:root {
  --bg: #000000;
  --surface-w: 760px;   /* set 페이지 + 플리 편집기 공통 폭 (me와 동일 톤) */
  --blue: #29c2f2;
  --blue-glow: rgba(41, 194, 242, 0.5);
  --text-dim: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.5); /* 0.3→0.5: WCAG AA 통과(5.3:1) */
  --vv-bottom: 0px;
  --ambient-scale: 1;

  /* ── 타입 스케일 (Galmuri 정격 12/14/16px만 사용) — 모바일에서 한 곳만 바꿔 전 요소가 함께 축소 ── */
  --fs-comment: 14px;   /* 벽 댓글·ups 본문·닉 공통 (모바일 12px). em 파생 요소(카운트·신고·화살표)가 자동 추종 */
  --fs-ui: 12px;        /* 소형 UI(버튼·메타·칩) — G9 정격 하한 */
  --tap: 32px;          /* 하단 플로팅 버튼(이모트·토글) 터치 크기 (모바일 28px) */

  /* 클래식 윈도우 컨트롤 색 */
  --silver: #d4d0c8;
  --hi: #ffffff;
  --lo: #404040;
  --mid: #808080;

  /* 콘텐츠 폰트 — GalmuriI18n(한글+라틴 픽셀) 선두 + CJK 정품 폰트 폴백.
     어떤 언어 모드든 댓글·닉네임의 외국어(중/일 한자·가나)가 정품 폰트로 렌더(한글/영어는 Galmuri 픽셀 그대로). */
  --font-body: "GalmuriI18n", "PingFang SC", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans CJK SC", "Microsoft YaHei", "Yu Gothic", "굴림", Gulim, sans-serif;
  --font-mono: "GalmuriMono11", "GalmuriI18n", "PingFang SC", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans CJK SC", "굴림", Gulim, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 전역 숨김 안전망 — 여러 모듈이 class="hidden"을 공통 상태로 사용한다. */
.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-body);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  -webkit-font-smoothing: none;
}

/* 이스터에그 감성 배경 영상 — 검정 배경 위(z-index:-1), 콘텐츠 아래. 무음·비차단. */
.ambient-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transform: scale(var(--ambient-scale));
  transform-origin: center center;
  object-fit: cover;
  object-position: center center;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease;
  filter: saturate(1.05);
  will-change: opacity, transform;
}
.ambient-video.active { opacity: 0.6; }
.ambient-video.pending { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ambient-video { transition: opacity 0.4s ease; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 검정 배경은 html이 담당. body는 투명 → z-index:-1 배경 영상이 가려지지 않음 */
  background: transparent;
  touch-action: manipulation;   /* 이동 연타 시 더블탭 줌 방지(스크롤·핀치줌은 유지) */
}

.stage {
  position: relative;
  width: 100%;
  max-width: min(1080px, 94vw);   /* 벽 댓글을 화면비에 맞춰 넓게 — brand/countdown/ups/topsets는 아래서 720으로 재제한 */
  margin: 0 auto;
  flex: 1; /* 남는 높이를 채워 푸터를 화면 바닥에, 불필요한 스크롤 제거 */
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  touch-action: manipulation;   /* 캐릭터 이동 연타 시 더블탭 줌 방지(핀치줌은 유지) */
}
body.world-denied .stage,
body.world-denied .orb-canvas,
body.world-denied .orb-emotes {
  display: none !important;
}
.world-access {
  width: min(620px, calc(100vw - 36px));
  margin: clamp(58px, 12vh, 120px) auto 48px;
  padding: 26px 24px;
  border: 1px solid rgba(41, 194, 242, .34);
  border-radius: 8px;
  background: rgba(8, 11, 14, .9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 22px 70px rgba(0,0,0,.48);
  color: #d9edf4;
  text-align: left;
  position: relative;
  z-index: 12;
}
.world-access-tag {
  color: var(--world-accent, #29c2f2);
  font-size: 12px;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.world-access h1 {
  margin: 0 0 10px;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}
.world-access p {
  margin: 0;
  color: #9da9ad;
  line-height: 1.65;
  font-size: 14px;
}
.world-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.world-access-actions button,
.world-access-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(41, 194, 242, .78);
  border-radius: 6px;
  background: rgba(41, 194, 242, .14);
  color: #eaf9ff;
  font-family: "Galmuri9", var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.world-access-actions a {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: #c8d2d6;
}

/* ---------- brand ---------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 로고 안내 말풍선 */
.logo-hint {
  position: absolute;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--blue);
  color: #00131b;
  font-family: var(--font-body);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  box-shadow: 0 0 18px var(--blue-glow);
  cursor: pointer;
  z-index: 40;   /* 씬·피드 요소 위로 — 안내가 안 가려지게(유저 요청) */
  animation: hint-bounce 1.4s ease-in-out infinite;
}

/* 말풍선 꼬리 (위쪽을 가리킴) */
.logo-hint::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--blue);
}

.logo-hint.hidden {
  display: none;
}

@keyframes hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

.logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  line-height: 0;
}

.logo {
  width: 100px;
  height: 100px;
  display: block;
}

.now-playing {
  margin-top: 12px;
  min-height: 18px; /* 재생 여부와 무관하게 높이 고정 → 레이아웃 안 흔들림 */
  line-height: 18px;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--blue);
  text-align: center;
}

/* ---------- teaser images ---------- */
.countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 7;              /* 앰비언트 캔버스(z6, 건물·캐릭터)보다 앞 → 시계가 건물 앞에 보임 */
}
/* 메인 인덱스: 씬 위 오버레이(사진·타임라인·카운트다운·대기)를 위로 당기고 아래 여백↑ → 위를 더 채우고 씬 띠를 아래로. (유저 요청 2026-07-08, 테스트서버 튜닝) */
body:not(.world-page) .countdown-wrap { margin-top: -30px; margin-bottom: 96px; }
body.world-type-general:not(.world-edit) .countdown-wrap {
  display: none;
}
body.world-page:not(.world-type-countdown) .stage {
  gap: 34px;
}
.world-home {
  width: 100%;
  max-width: min(760px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .85fr);
  gap: 12px;
  align-items: start;
  position: relative;
  z-index: 8;
}
.world-home.world-home-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(720px, 94vw);
}
.world-home-primary,
.world-home-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.world-home-side:empty {
  display: none;
}
.world-home-card {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(4, 8, 12, .94);
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
}
.world-home-card-title {
  margin-bottom: 8px;
  color: var(--world-accent, var(--blue));
  font-family: "Galmuri9", var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}
.world-home-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 3px;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.07);
}
.world-home-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.world-home-row:last-child {
  padding-bottom: 0;
}
.world-home-row-main {
  min-width: 0;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.world-home-row-meta {
  grid-column: 1;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.35;
  min-width: 0;
}
.world-home-row-tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--world-accent, var(--blue));
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
a.world-home-row:hover .world-home-row-main {
  color: #fff;
}
body.world-type-general .comments,
body.world-type-pomodoro .comments {
  margin-top: 28px;
}
@media (max-width: 720px) {
  .world-home {
    max-width: 94vw;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .world-home-card,
  .world-home .comm-board,
  .world-home .pomo-panel {
    padding: 12px;
  }
  .world-home-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.teaser-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.teaser-images:empty {
  display: none;
}
.teaser-images .photo-icon {
  height: 22px;
  width: 22px;
  object-fit: cover;
  border: 1px solid rgba(41, 194, 242, 0.6);
  cursor: pointer;
}
.teaser-images .photo-icon:hover {
  box-shadow: 0 0 8px var(--blue-glow);
}

/* ---------- countdown ---------- */
.countdown {
  text-align: center;
  width: 100%;
}

.countdown.hidden {
  display: none;
}

.kicker {
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: var(--blue);
  transform-origin: center;
  position: relative;   /* 시계 안내 말풍선(absolute) 기준 */
  /* 이스터에그: 시계 클릭 → 배경 영상. 탭 시 텍스트선택·콜아웃·더블탭줌 방지 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  cursor: pointer;
}
.clock * { touch-action: none; }

/* 매 분 펄스 — 잠깐 밝아지며 살짝 커졌다 돌아옴 */
.clock.pulse {
  animation: clock-pulse 0.7s ease-out;
}
@keyframes clock-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 6px var(--blue-glow));
  }
  25% {
    transform: scale(1.02);
    filter: brightness(1.6) drop-shadow(0 0 22px var(--blue-glow));
  }
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 6px var(--blue-glow));
  }
}

/* 10분 이내 심장박동 — 두 번 쿵쾅(lub-dub), 박동 간격은 JS에서 --hb-dur로 제어 */
@keyframes heartbeat {
  0%   { transform: scale(1);     filter: brightness(1)    drop-shadow(0 0 6px  var(--blue-glow)); }
  8%   { transform: scale(1.055); filter: brightness(2.1)  drop-shadow(0 0 36px var(--blue-glow)); }
  16%  { transform: scale(1.02);  filter: brightness(1.3)  drop-shadow(0 0 14px var(--blue-glow)); }
  24%  { transform: scale(1.04);  filter: brightness(1.75) drop-shadow(0 0 26px var(--blue-glow)); }
  42%  { transform: scale(1);     filter: brightness(1)    drop-shadow(0 0 6px  var(--blue-glow)); }
  100% { transform: scale(1);     filter: brightness(1)    drop-shadow(0 0 6px  var(--blue-glow)); }
}
.clock.heartbeat {
  animation: heartbeat var(--hb-dur, 900ms) ease-out forwards;
}

.value,
.plus,
.sep {
  font-family: var(--font-mono);
  color: var(--blue);
  line-height: 1;
  text-shadow: 0 0 10px var(--blue-glow);
}

.value {
  font-size: clamp(40px, 13vw, 84px);
}

.plus {
  font-size: clamp(40px, 13vw, 84px);
  align-self: flex-start;
  margin-right: 2px;
}

.sep {
  font-size: clamp(30px, 10vw, 64px);
  opacity: 0.55;
  animation: blink 2s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0.12;
  }
}

/* 흐르는 공지 (상단 마퀴) */
.notice-bar {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(41, 194, 242, 0.12);
  border-bottom: 1px solid rgba(41, 194, 242, 0.4);
  padding: 5px 0;
}
.notice-bar.hidden {
  display: none;
}
.notice-track {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--blue);
  padding-left: 100%; /* start off-screen right (100% of parent = viewport width) */
  will-change: transform;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* 허니팟 (봇 차단용, 화면엔 안 보임) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 공유 버튼 + 누적 방문자 — 화면 하단 푸터 */
.site-foot {
  width: 100%;
  margin-top: auto;
  padding-top: 32px;
  /* 하단 고정 버튼바(#orbEmotes)가 footer를 덮지 않게 아래 여백 확보. 플레이어(npBar) 뜨면 더 크게(body.has-npbar). */
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--text-faint);
}
.foot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.foot-btn {
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--blue);
  background: transparent;
  border: 1px solid rgba(41, 194, 242, 0.5);
  border-radius: 0;
  padding: 4px 12px;
  cursor: pointer;
}
.foot-btn:hover {
  border-color: var(--blue);
  color: #fff;
}

/* share — 테두리/배경 없이 글자만 */
#shareBtn {
  border: none;
  background: none;
  padding: 2px 0;
}
#shareBtn:hover {
  color: #fff;
}
.visits #visitCount {
  color: var(--blue);
  font-weight: 700;
}
.trash-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.trash-link:hover { opacity: 1; }
.trash-link img {
  width: 18px;
  height: 18px;
  display: block;
}
.privacy-link {
  font-family: "Galmuri9", var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;   /* Galmuri9 정격 12px (10px는 획 깨짐) + 자간 제거 */
  color: rgba(41, 194, 242, 0.55);   /* 파란 글씨(버튼 전환 후 안 보이던 문제 + 사이트 톤) */
  text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0;   /* a→button 전환해도 동일 외형 */
}
.privacy-link:hover { color: var(--blue); }

/* 개인정보 등 장문 콘텐츠의 언어 블록 — html[lang]으로 선택(ko=한국어, 그 외 전부=영어). 모달·단독페이지 공통 */
.prv-lang { display: none; }
html[lang="ko"] .prv-lang[data-l="ko"],
html[lang="zh"] .prv-lang[data-l="zh"],
html[lang="ja"] .prv-lang[data-l="ja"],
html[lang="es"] .prv-lang[data-l="es"],
html[lang="en"] .prv-lang[data-l="en"],
html:not([lang="ko"]):not([lang="zh"]):not([lang="ja"]):not([lang="es"]) .prv-lang[data-l="en"] { display: block; }
.foot-links { display: flex; gap: 14px; align-items: center; }

/* 포인트 안내 모달 (footer "points") — 시스템 UI 톤(다크+블루) */
.pg-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pg-modal.hidden { display: none; }
/* 신규 입장 환영·규칙 모달(커뮤 온보딩) — pg-box 기반 */
.wlc-box { max-width: 380px; }
.wlc-title { color: var(--blue); font-family: "Galmuri9", var(--font-mono); font-size: 12px; margin-bottom: 10px; }
.wlc-welcome { color: rgba(255,255,255,.92); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.wlc-rules-h { color: rgba(255,255,255,.4); font-family: "Galmuri9", var(--font-mono); font-size: 12px; margin: 14px 0 6px; }
.wlc-rules { color: rgba(255,255,255,.8); line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; }
.wlc-ok { margin-top: 16px; width: 100%; padding: 10px; background: var(--blue); color: #00131b; border: 0; border-radius: 4px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
.wlc-ok:hover { filter: brightness(1.08); }
/* Galmuri 정격 크기(실측): Galmuri9=12px · Galmuri11=16px · Galmuri14=20px — 그 외 크기는 획이 사라져 깨짐.
   bold 합성·letter-spacing 금지(번짐/반픽셀). 소형 UI는 Galmuri9@12px(비례형 — Mono9는 'm' 글리프 결함) */
.pg-box { background: #0d0d0d; border: 1px solid rgba(41,194,242,.35); width: 100%; max-width: 340px; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.pg-head { display: flex; align-items: center; margin-bottom: 12px; }
.pg-title { color: var(--blue); font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.pg-close { background: none; border: none; color: rgba(255,255,255,.35); font-family: system-ui, sans-serif; font-size: 18px; line-height: 1; cursor: pointer; margin-left: auto; padding: 0 2px; }
.pg-close:hover { color: #fff; }
.pg-sec-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); margin: 14px 0 6px; }
.pg-sec-title:first-child { margin-top: 0; }
.pg-row { padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.pg-main { display: flex; align-items: baseline; gap: 10px; }
.pg-label { color: rgba(255,255,255,.9); font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.pg-val { margin-left: auto; font-family: "Galmuri9", var(--font-mono); font-size: 12px; white-space: nowrap; }   /* bold 제거 — 픽셀폰트 합성볼드가 숫자 주변 번짐(그라데이션처럼) 만들던 원인 */
.pg-val.plus { color: #ffd66e; }
.pg-val.minus { color: #ff7a7a; }
.pg-sub { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.38); margin-top: 2px; }
/* 홈 화면 추가(A2HS) 안내 — 알림 불가 환경(iOS 사파리 미설치)에서 푸시 토글 시 */
.a2hs-intro { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.55; margin-bottom: 12px; }
.a2hs-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.a2hs-step:last-child { border-bottom: none; }
.a2hs-ic { flex: none; display: grid; place-items: center; }
.a2hs-num { flex: none; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: var(--blue); }
.a2hs-txt { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.9); line-height: 1.5; }

/* 개인정보 모달 — 장문이라 넓게. 본문 = Galmuri11 정격 16px(실측: 11/14px에선 획 사라짐 — 벽 댓글 15~16px가 멀쩡한 이유).
   제목 = Galmuri14@20px. bold·letter-spacing 미사용(합성볼드 번짐/자간 반픽셀 방지) */
#privacyModal .pg-box { max-width: 620px; }
#privacyModal .pg-body { max-width: none; padding: 0; font-family: "Galmuri11", var(--font-body); }
#privacyModal .pg-body h1 { font-family: "Galmuri14", "Galmuri11", var(--font-mono); font-size: 20px; color: var(--blue); margin: 0 0 4px; font-weight: 400; }
#privacyModal .pg-body h2 { font-size: 16px; color: var(--blue); margin: 18px 0 6px; font-weight: 400; }
#privacyModal .pg-body p, #privacyModal .pg-body li { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.8); }   /* 16×1.75=28px 정수 줄높이 */
#privacyModal .pg-body ul { padding-left: 18px; margin: 6px 0; }
#privacyModal .pg-body strong { font-weight: 400; color: #fff; }
#privacyModal .pg-body .prv-date { font-size: 12px; font-family: "Galmuri9", var(--font-mono); color: rgba(255,255,255,.35); margin-bottom: 12px; }
#privacyModal .pg-body a { color: var(--blue); }
.pg-note { margin-top: 12px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.42); line-height: 1.7; }

/* 시계 조작 안내 — 시계 위에 떠 있는 말풍선(레이아웃 안 밀림) */
.clock-hint {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  white-space: nowrap;
  background: var(--blue);
  color: #00131b;
  font-family: var(--font-body);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  box-shadow: 0 0 18px var(--blue-glow);
  cursor: pointer;
  pointer-events: auto;
  z-index: 40;   /* 씬·피드 요소 위로 — 안내가 안 가려지게(유저 요청) */
  animation: clock-hint-bounce 1.4s ease-in-out infinite;
}
.clock-hint::before {   /* 위(시계)를 가리키는 꼬리 */
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--blue);
}
@keyframes clock-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
.clock-hint.hidden { display: none; }
/* 비-카운트다운 커뮤(뽀모도로·일반): 카운트다운용 상단 씬 요소 정리 — 겹침 해소.
   S로고·영상시계 힌트는 system.seoul 전용이라 숨김. 일반 커뮤는 카운트다운 자체도 숨김(타이머 없는 게시판). */
.world-type-pomodoro .clock-hint, .world-type-general .clock-hint { display: none !important; }
.world-type-pomodoro header.brand, .world-type-general header.brand { display: none !important; }
.world-type-general .countdown-wrap { display: none !important; }
/* 씬(건물·버스·캐릭터)은 유지하되 겹치지 않게 — 씬을 콘텐츠(worldHome) '위' 띠에 그림.
   worldHome 위에 씬 높이만큼 공간을 비워 그 자리에 씬이 오게 함(app.js measureLayout이 _gapDocY를 여기로). */
.world-type-pomodoro .world-home, .world-type-general .world-home { margin-top: 210px; }
/* 타입별 씬 무드 1단계 — 배경 톤(고립·안전). 뽀모도로=따뜻한 공부 톤, 일반=차분한 남색.
   커뮤가 씬 배경색을 직접 지정하면(인라인) 그게 우선. */
body.world-type-pomodoro:not(.world-edit) { background: radial-gradient(150% 100% at 50% -8%, #171009 0%, #0b0807 52%, #060505 100%); }
body.world-type-general:not(.world-edit) { background: radial-gradient(150% 100% at 50% -8%, #0b1016 0%, #080b10 55%, #05070a 100%); }
.logo-status-bubble,
.video-mute-bubble {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--blue);
  color: #00131b;
  font-family: var(--font-body);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 5px 9px;
  border-radius: 3px;
  box-shadow: 0 0 18px var(--blue-glow);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}
.logo-status-bubble { top: calc(100% + 8px); }
.logo-status-bubble::before,
.video-mute-bubble::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--blue);
}
.logo-status-bubble.show,
.video-mute-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 실시간 접속자 수 */
.presence {
  margin-top: 22px;
  display: flex;
  align-items: center; /* 점을 글자 정중앙에 맞춤 */
  justify-content: center;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  min-height: 15px;   /* "N waiting together"가 로드 후 나타나도 높이 불변 */
}
/* 떠다니는 불빛 — 페이지 높이만큼 깔리는 absolute 캔버스(네이티브 스크롤로 흐름, 모바일 부드러움).
   크기는 JS가 지정. 실시간 접속자 시각화(Realtime broadcast) */
.orb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;          /* 클릭/스크롤 방해 안 함 (입력은 window에서 감지) */
  z-index: 6;                    /* 콘텐츠 위 ambient, 모달/알림보다 아래 */
}
.orb-hint {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 7;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.8s ease;
  white-space: nowrap;
}
.orb-hint.gone { opacity: 0; }

/* 감정 표현 바 — 누르면 내 빛에서 마음이 떠오름 (모두에게 실시간 공유) */
.orb-emotes {
  position: fixed;
  left: 50%;
  bottom: calc(44px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom));
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;   /* 2줄: 윗줄 버튼(.orb-emotes-row) + 아랫줄 나우플레잉(#npBar) */
  align-items: stretch;
  gap: 0;
  padding: 6px 10px;
  border-radius: 22px;
  background: rgba(12, 16, 22, 0.5);   /* 흰끼 6% → 어두운 반투명: 밝은 아이콘이 또렷하게(모바일 가시성) */
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.82;
  transition: opacity 0.4s ease;
  touch-action: manipulation;    /* 모바일 더블탭 줌 방지 */
  -webkit-user-select: none;
  user-select: none;
}
.orb-emotes:hover { opacity: 1; }
@media (hover: none) {   /* 터치(모바일)=hover 없음 → 알약 상시 또렷 + 테두리 강화 */
  .orb-emotes { opacity: 0.95; border-color: rgba(255, 255, 255, 0.2); background: rgba(12, 16, 22, 0.62); }
  .orb-emotes button { color: rgba(255, 255, 255, 0.85); }
}
/* 고정폭 바 → 미니플레이어(np-bar) 유무와 무관하게 항상 같은 위치·너비. 윗줄: 구름(소리)=좌, ♡·담배=중앙, 캐릭터=우 */
.orb-emotes { width: min(236px, calc(100vw - 44px)); box-sizing: border-box; }
.orb-emotes-row { display: flex; gap: 8px; align-items: center; width: 100%; }
.emote-mid { flex: 1; display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
/* 나우플레잉 미니 바 — 가장 최근 재생 플레이어(단일 엔진) 미러. 곡 없으면 숨김 → 한 줄 알약으로 복귀 */
.np-bar {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 7px 2px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  width: 100%;   /* 바가 고정폭 → np-bar는 그 폭을 채움(위치 안 변함) */
}
.np-bar.hidden { display: none; }
.np-cover { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; background: rgba(255, 255, 255, 0.06); }
.np-cover.hidden { display: none; }
.np-cover-ph { display: grid; place-items: center; font-size: 14px; color: rgba(255, 255, 255, 0.4); }
.np-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-title { font-family: var(--font-body); font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.np-artist { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.np-ctrl { display: flex; gap: 2px; flex: none; }
.orb-emotes .np-ctrl button { width: 30px; height: 30px; }   /* 이모트(--tap)보다 살짝 작게 — 보조 컨트롤 */
.np-bar.is-playing #npPlay { color: var(--blue); }
.orb-emotes button {
  all: unset;
  cursor: pointer;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);   /* 미정의 var(--text) → 또렷한 흰색으로(아이콘 가시성) */
  touch-action: manipulation;
  -webkit-touch-callout: none;    /* iOS 길게누름 콜아웃(복사·확대) 방지 → 볼륨 롱프레스 안정 */
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.orb-emotes button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.orb-emotes button:active { transform: scale(0.82); }
.char-toggle svg { display: block; }
/* 음소거 재생 안내 — 하단 구름 위에 뜨는 토스트(탭=볼륨패널) + 구름 버튼 펄스 */
.unmute-hint {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom));
  transform: translateX(-50%) translateY(6px); z-index: 62;
  max-width: min(88vw, 320px); box-sizing: border-box;
  background: rgba(6, 20, 30, 0.96); border: 1px solid rgba(41, 194, 242, 0.55); color: #d7f0ff;
  font-family: "Galmuri9", var(--font-mono), monospace; font-size: 12px; line-height: 1.45; text-align: center;
  padding: 9px 14px; border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.unmute-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; cursor: pointer; }
@keyframes unmutePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(41, 194, 242, 0); } 50% { box-shadow: 0 0 0 7px rgba(41, 194, 242, 0.4); } }
.orb-emotes button.unmute-pulse { animation: unmutePulse 1s ease-in-out infinite; color: #7fe0ff !important; }
.char-toggle.is-on { color: var(--blue); background: rgba(41, 194, 242, 0.16); }   /* 캐릭터 모드 ON */
/* 소리 토글(구름 — 배경음+효과음 통합): OFF=흐리게, ON=파랑(위 .is-on) → 상태 명확 */
#ambToggleBtn:not(.is-on) { opacity: .45; }

/* 소리 버튼 길게눌러 볼륨/음소거 팝오버 */
.audio-pop { position: fixed; z-index: 60; background: rgba(10,12,16,.96); border: 1px solid rgba(41,194,242,.4); border-radius: 8px; padding: 8px 10px; min-width: 172px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.audio-pop-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; opacity: .7; margin-bottom: 6px; letter-spacing: .5px; text-align: center; }
.audio-pop-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.audio-pop-lab { font-family: "Galmuri9", var(--font-mono); font-size: 12px; min-width: 52px; max-width: 104px; flex: none; color: #cfe; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-pop-mute { width: 24px; height: 22px; flex: none; border: none; background: transparent; cursor: pointer; padding: 0; line-height: 1; color: #bfe; display: inline-flex; align-items: center; justify-content: center; }
.audio-pop-mute svg { display: block; }
.audio-pop-mute.is-muted { color: #ff6b6b; }   /* 음소거 = 빨강 */
.audio-pop-slider { flex: 1; min-width: 92px; accent-color: var(--blue); }
@media (max-width: 520px) {
  .ambient-video {
    object-position: center 42%;
  }
  .orb-emotes {
    opacity: 0.82;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom));
  }
}

/* 입력 중 표시 — 실제 타이핑 중인 접속자가 있을 때만 (Realtime broadcast) */
.typing-indicator {
  color: var(--blue);
  opacity: 0.85;
  white-space: nowrap;
}
.typing-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 1px;
  vertical-align: baseline;
}
.typing-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }

.presence .dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
  transform: translateY(-2px); /* 글자 광학 중앙에 맞게 살짝 위로 */
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
#onlineCount {
  color: var(--blue);
  font-weight: 700;
  margin-right: 6px;
}

/* ---------- 크로스플랫폼 플레이리스트 ---------- */
.xplay {
  width: 100%;
  max-width: 640px;
  margin: 34px auto 0;   /* 좌우 auto — 패널(.pl-tp-player)에 이식될 때 중앙정렬(재생 시 좌측 쏠림 수정). 편집기는 margin:0으로 override */
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,.86);
}
.xplay-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--blue);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: .08em;
  min-height: 14px;
}
.xplay-titlebox {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.xplay-cover-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 4px;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  color: rgba(0,0,0,.3);
  font-size: 16px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.xplay-cover-btn.has-img { color: transparent; }
.xplay:not(.is-editing) .xplay-cover-btn { pointer-events: none; border-color: transparent; }
/* 커버 삭제 X — me페이지 셋카드(.set-card-x)와 동일: 커버 안쪽 우상단, 검정 원, hover 빨강.
   .xplay-editbar button(알약: min-width 54·height 26·테두리)을 덮어야 하므로 특이도 ↑ + 명시적 override.
   absolute라 커버 중앙정렬엔 영향 없음. JS가 사진+편집중일 때만 .show 토글 */
.xplay-cover-wrap { position: relative; display: inline-block; flex: 0 0 auto; line-height: 0; }
.xplay-editbar .xplay-cover-x,
.xplay-cover-wrap .xplay-cover-x {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 22px; height: 22px; min-width: 0; box-sizing: border-box;
  border-radius: 50%; border: none; padding: 0; margin: 0; gap: 0;
  background: rgba(0,0,0,.7); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.xplay-editbar .xplay-cover-x.show,
.xplay-cover-wrap .xplay-cover-x.show { display: flex; }
.xplay-editbar .xplay-cover-x:hover,
.xplay-cover-wrap .xplay-cover-x:hover { background: #e0245e; }
.xplay-desc-input {
  width: 100%;
  margin-top: 6px;
  height: 24px;
  border: 1px solid rgba(41,194,242,.38);
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.78);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 2px 6px;
}
.xplay:not(.is-editing) .xplay-desc-input { display: none; }
.xplay-name-input {
  width: 100%;
  max-width: none;
  height: 24px;
  border: 1px solid rgba(41,194,242,.38);
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.86);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 2px 6px;
}
.xplay:not(.is-editing) .xplay-name-input {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
.xplay-status {
  color: rgba(255,255,255,.42);
  margin-right: auto;
  max-width: 66%;
  overflow: hidden;
  text-overflow: ellipsis; padding-left: 2px; margin-left: -2px;
  white-space: nowrap;
}
.xplay-connect {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}
.xplay-connect.hidden { display: none; }
.xplay-connect button {
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.46);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.xplay-connect button:hover {
  border-color: rgba(41,194,242,.34);
  color: rgba(255,255,255,.76);
}
.xplay-connect button.is-connected {
  border-color: rgba(41,194,242,.52);
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue-glow);
}
.xplay-connect button.is-pending {
  color: rgba(255,255,255,.34);
}
.xplay-player {
  background: transparent;
}
/* 플레이어 스크린 — 콘텐츠(YouTube/Spotify/SoundCloud)가 바뀌어도 박스 크기 고정 →
   비율 변동으로 레이아웃이 무너지지 않게. 임베드는 박스 안에 꽉 채움(중앙). */
.xplay-screen {
  width: 100%;
  max-width: 360px;
  height: 200px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(41,194,242,.38);
  background: transparent;
}
.xplay-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.xplay-screen.is-spotify-sdk {
  border-color: rgba(30,215,96,.28);
}
/* set의 .set-sp-card와 동일한 표현 — 녹색 그라데이션 카드 (index/패널/편집기 공통) */
.xplay-sdk-screen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(29,185,84,.22), #000);
  color: #fff;
}
.xplay-sdk-screen img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
}
.xplay-sdk-title,
.xplay-sdk-artist {
  overflow: hidden;
  text-overflow: ellipsis; padding-left: 2px; margin-left: -2px;
  white-space: nowrap;
}
.xplay-sdk-title {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.xplay-sdk-artist {
  margin-top: 6px;
  color: #1db954;
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
/* "앱에서 열기" 폴백 변형은 세로 스택으로 (커버 없이 텍스트+버튼) */
.xplay-sdk-screen.xplay-sdk-needsapp { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.xplay-sdk-device {
  margin-top: 4px;
  color: rgba(30,215,96,.8);
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis; padding-left: 2px; margin-left: -2px;
  white-space: nowrap;
}
.xplay-sdk-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.xplay-sdk-open {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(30,215,96,.55);
  border-radius: 14px;
  background: transparent;
  color: #1ed760;
  font-family: inherit;
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.xplay-sdk-open:hover { background: rgba(30,215,96,.12); }
/* 알림(앱 안내·재연결 등)은 앨범아트용 2열 그리드를 쓰지 않고 가로 전체를 쓴다 */
.xplay-sdk-needsapp {
  display: block;
  grid-template-columns: none;
  width: min(100%, 440px);
  text-align: center;
  padding: 12px 16px;
}
.xplay-sdk-needsapp .xplay-sdk-title { white-space: normal; }
.xplay-sdk-needsapp .xplay-sdk-artist { white-space: normal; line-height: 1.45; }
.xplay-sdk-needsapp .xplay-sdk-actions { justify-content: center; flex-wrap: wrap; }
.xplay-empty {
  color: rgba(255,255,255,.35);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
/* Keep iframe players mounted; display/visibility hiding can suspend SoundCloud. */
.xplay-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.xplay-layer.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.xplay-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(41,194,242,.28);
  border-radius: 6px;
  background: rgba(41,194,242,.06);
  color: rgba(255,255,255,.62);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  line-height: 1.45;
}
.xplay-hint button {
  flex: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.xplay-hint button:hover { color: #fff; }
.xplay-hint.hidden { display: none; }   /* hidden 클래스가 실제로 숨기도록 (없어서 빈 박스가 떴음) */
.xplay-controls,
.xplay-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.xplay-editpanel {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.xplay-controls {
  margin-top: 5px;
  border: 0;
  background: transparent;
  padding: 9px 38px;
  justify-content: center;
  gap: 13px;
  position: relative;
  min-height: 38px;
  overflow: visible;
}
.xplay-controls button,
.xplay-form button,
.xplay-open,
.xplay-editbar button {
  height: 28px;
  min-width: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(41,194,242,.52);
  background: rgba(0,0,0,.42);
  color: var(--blue);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.xplay-controls .xplay-icon-btn {
  all: unset;
  width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  position: relative;
  color: rgba(255,255,255,.88);
  cursor: pointer;
  overflow: visible;
}
.xplay-controls .xplay-icon-btn:hover {
  color: #fff;
}
.xplay-controls .xplay-icon-btn.is-on {
  color: var(--blue);
}
.xplay-controls .xplay-one.is-on {
  color: var(--blue);
}
.xplay-controls .xplay-icon-btn.is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.xplay-play {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  background: #fff !important;
  color: #111 !important;
  flex: 0 0 auto;
}
.xplay-play span,
.xplay-prev span,
.xplay-next span,
.xplay-shuffle span,
.xplay-repeat span {
  display: block;
  position: relative;
}
.xplay-play span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.xplay-play.is-paused span {
  width: 12px;
  height: 13px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px);
}
.xplay-prev span,
.xplay-next span {
  width: 17px;
  height: 16px;
}
.xplay-prev span::before,
.xplay-prev span::after,
.xplay-next span::before,
.xplay-next span::after {
  content: "";
  position: absolute;
  top: 2px;
}
.xplay-prev span::before,
.xplay-next span::after {
  width: 3px;
  height: 12px;
  background: currentColor;
}
.xplay-prev span::before { left: 0; }
.xplay-next span::after { right: 0; }
.xplay-prev span::after {
  left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid currentColor;
}
.xplay-next span::before {
  right: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
/* 셔플·반복 — 깔끔한 SVG(mask, currentColor 틴트) */
.xplay-shuffle span,
.xplay-repeat span {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.xplay-shuffle span {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/></svg>");
}
.xplay-repeat span {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z'/></svg>");
}
/* 한 곡 반복: 일반 반복 아이콘 그대로 + 우상단에 또렷한 "1" 배지. (is-on 점은 ::after라 ::before 사용) */
.xplay-repeat.is-one::before {
  content: "1";
  position: absolute;
  top: -4px;
  right: -2px;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
}
.xplay-one {
  display: none !important;
}
.xplay-one span {
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  line-height: 1;
}
/* 외부 열기 버튼 제거 — 요소/JS는 남기되 항상 숨김 (엔진 init 가드가 openLink를 참조하므로) */
.xplay-open { display: none !important; }
.xplay-form input {
  width: 100%;
  min-width: 0;
  height: 24px;
  border: 1px solid rgba(41,194,242,.26);
  background: rgba(0,0,0,.20);
  color: #fff;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 2px 7px;
  outline: 0;
}
.xplay-form input::placeholder { color: rgba(255,255,255,.42); }
.xplay-form button {
  width: 18px;
  min-width: 18px;
  height: 18px;
  border-radius: 2px;
  border-color: rgba(41,194,242,.36);
  background: transparent;
}
.xplay-form button:hover {
  border-color: rgba(41,194,242,.7);
  background: rgba(41,194,242,.08);
}
.xplay-search {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  padding: 6px;
  max-height: 300px;
}
.xplay-search.hidden { display: none; }
/* 결과 목록만 스크롤(스크롤바 숨김), 하단 플랫폼 링크는 고정 */
.xplay-sr-list { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.xplay-sr-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 검색 결과 행 — 플리 리스트처럼 좌측정렬(커버·제목·아티스트), 안 잘림 */
.xplay-search .xplay-sr {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 5px 6px;
  cursor: pointer;
  text-align: left;
  overflow: visible;
  white-space: normal;
}
.xplay-search .xplay-sr:hover { background: rgba(41,194,242,.10); }
.xplay-sr-art { width: 36px; height: 36px; flex: none; border-radius: 4px; background: #000 center/cover no-repeat; }
.xplay-sr-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.xplay-sr-title { max-width: 100%; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.92); overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; text-align: left; }
.xplay-sr-artist { max-width: 100%; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; text-align: left; }
.xplay-sr-logo { width: 16px; height: 16px; flex: none; object-fit: contain; }
.xplay-sr-loading, .xplay-sr-none { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); padding: 8px 6px; }
.xplay-sr-links { flex: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 6px 2px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.xplay-sr-ext { display: inline-flex; align-items: center; gap: 4px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); text-decoration: none; }
.xplay-sr-ext img { width: 14px; height: 14px; flex: none; object-fit: contain; }
.xplay-sr-ext:hover { color: #fff; }
.xplay-sr-ext.is-disabled { opacity: .4; cursor: default; }
.xplay-sr-ext.is-disabled img { filter: grayscale(1); }
.xplay-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
.xplay-preview-row {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 18px 28px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 32px;
}
/* 입력 + 액션버튼 한 줄 — 입력이 늘어나고 버튼은 우측, 숨김 버튼은 공간 차지 안 함 */
.xplay-inputrow { display: flex; align-items: center; gap: 6px; width: 100%; }   /* form이 align-items:center라 width 없으면 콘텐츠 폭으로 줄어듦 → 풀폭 */
.xplay-inputrow .xplay-search-input { flex: 1 1 auto; min-width: 0; }
.xplay-before-row.hidden {
  display: none;
}
.xplay-add-cover {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 2px;
  background-color: rgba(255,255,255,.92);
  background-size: cover;
  background-position: center;
  color: rgba(0,0,0,.58);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
.xplay-add-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.xplay-add-name span {
  color: rgba(255,255,255,.42);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; padding-left: 2px; margin-left: -2px;
}
#xplayInputTitle {
  color: rgba(255,255,255,.84);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
.xplay-preview-row .xplay-add-label {
  color: var(--blue);
  cursor: default;
  font-size: 12px;   /* Galmuri 정격 — 8px에선 획이 사라져 라벨이 안 보였음 (letter-spacing 금지) */
  text-shadow: 0 0 7px var(--blue-glow);
}
.xplay-add-label {
  opacity: 0;
  visibility: hidden;
}
.xplay-add-label.is-visible {
  opacity: 1;
  visibility: visible;
}
.xplay-add-cover.is-choice,
#xplayInputTitle.is-choice,
#xplayInputHint.is-choice {
  cursor: pointer;
}
.xplay-add-cover.is-choice {
  animation: xplay-choice-glow 1.25s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(41,194,242,.72), 0 0 8px rgba(41,194,242,.22);
}
#xplayInputTitle.is-choice,
#xplayInputHint.is-choice {
  animation: xplay-choice-text-glow 1.25s ease-in-out infinite;
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue-glow);
}
.xplay-add-cover.is-pulse,
#xplayInputTitle.is-pulse,
#xplayInputHint.is-pulse {
  animation: xplay-field-pulse .42s ease;
}
.xplay-add-badge img {
  filter: grayscale(1);
  opacity: .72;
}
.xplay-add-badge img:not(.is-disabled) {
  filter: none;
  opacity: .88;
}
.xplay-add-badge > img.is-new {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(41,194,242,.78), 0 0 10px rgba(41,194,242,.30);
  opacity: 1;
}
.xplay-add-badge span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.xplay-add-badge span img {
  filter: none;
  opacity: .58;
}
.xplay-merge-note {
  width: 100%;
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  line-height: 1.35;
  padding-left: 91px;
}
.xplay-merge-note.hidden { display: none; }
.xplay-merge-warning {
  color: rgba(255,110,110,.86);
}
@keyframes xplay-field-pulse {
  0% { filter: brightness(1); transform: translateY(0); }
  45% { filter: brightness(1.7); transform: translateY(-1px); }
  100% { filter: brightness(1); transform: translateY(0); }
}
@keyframes xplay-choice-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(41,194,242,.42), 0 0 5px rgba(41,194,242,.12); }
  50% { box-shadow: 0 0 0 1px rgba(41,194,242,.95), 0 0 13px rgba(41,194,242,.38); }
}
@keyframes xplay-choice-text-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(41,194,242,.20); }
  50% { text-shadow: 0 0 11px rgba(41,194,242,.82); }
}
.xplay-editbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: rgba(255,255,255,.38);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
.xplay-editbar .xplay-titlebox {
  flex: 1 1 auto;
  margin-right: auto;
}
.xplay-editbar button {
  min-width: 54px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  border: 1px solid rgba(41,194,242,.34);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  color: var(--blue);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
}
#xplayEdit {
  overflow: visible;
  text-indent: 0;
}
#xplayEdit::before {
  content: "";
  width: 10px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(-38deg);
}
#xplayEdit::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(-38deg);
}
#xplaySave {
  min-width: 56px;
  color: var(--blue);
  background: rgba(41,194,242,.08);
}
.xplay:not(.is-editing) #xplaySave,
.xplay.is-editing #xplayEdit { display: none; }
.xplay:not(.is-editing) .xplay-form,
.xplay:not(.is-editing) .xplay-search,
.xplay:not(.is-editing) .xplay-editpanel {
  display: none;
}
.xplay-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.xplay-track {
  display: grid;
  grid-template-columns: 38px 28px 1fr auto 22px 22px 18px;   /* 편집모드 곡별 자동찾기(돋보기) 칸 추가 — 비편집 땐 버튼 미생성이라 영향 없음 */
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.78);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  position: relative;
}
.xplay-track:hover,
.xplay-track.is-drop-before,
.xplay-track.is-drop-after {
  background: rgba(0,0,0,.20);
  border-color: rgba(255,255,255,.05);
}
.xplay-track.is-active {
  color: #fff;
}
.xplay-track.is-active:hover,
.xplay-track.is-active.is-drop-before,
.xplay-track.is-active.is-drop-after {
  background: rgba(41,194,242,.09);
  border-color: rgba(41,194,242,.18);
}
.xplay-track.is-locked .xplay-platform,
.xplay-track.is-locked .xplay-platform-token img,
.xplay-platform-token.is-disabled img {
  filter: grayscale(1);
  opacity: .44;
}
/* 플랫폼 추가 대상으로 지목된 곡 — 한눈에 보이게 강조 */
.xplay-track.is-link-target {
  background: rgba(41,194,242,.12);
  border-color: rgba(41,194,242,.55);
  box-shadow: 0 0 0 1px rgba(41,194,242,.35);
}
.xplay-track.is-link-target .xplay-alt { background: var(--blue); color: #07121a; }
.xplay-drag {
  color: rgba(255,255,255,.28);
  cursor: grab;
  text-align: center;
  touch-action: none;        /* 모바일: 핸들 터치 시 스크롤 대신 reorder 드래그 */
  padding: 0 6px;            /* 터치 히트영역 넓힘 */
  margin: 0 -6px;
}
.xplay:not(.is-editing) .xplay-drag,
.xplay:not(.is-editing) .xplay-rm,
.xplay:not(.is-editing) .xplay-alt {
  visibility: hidden;
}
.xplay-track.is-dragging {
  opacity: .45;
}
.xplay-track.is-drop-before::before,
.xplay-track.is-drop-after::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  height: 1px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
}
.xplay-track.is-drop-before::before { top: -3px; }
.xplay-track.is-drop-after::after { bottom: -3px; }
.xplay-tcover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: none;
}
.xplay-platform {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 2px;
}
.xplay-tcover .xplay-platform { width: 100%; height: 100%; }
/* eq(재생 애니메이션)를 앨범커버 위에 오버레이 */
.xplay-tcover .xplay-now {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 2px;
  background: rgba(0,0,0,.5);
}
.xplay-now {
  width: 15px;
  height: 16px;
  display: inline-flex;
  align-items: end;
  gap: 2px;
  opacity: 0;
}
.xplay-track.is-active .xplay-now { opacity: .36; }
.xplay.is-playing .xplay-track.is-active .xplay-now { opacity: 1; }
.xplay-now i {
  width: 3px;
  height: 5px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue-glow);
  animation: xplay-bars .78s ease-in-out infinite;
}
.xplay-now i:nth-child(2) { animation-delay: .12s; }
.xplay-now i:nth-child(3) { animation-delay: .24s; }
.xplay:not(.is-playing) .xplay-track.is-active .xplay-now i {
  animation-play-state: paused;
}
@keyframes xplay-bars {
  0%, 100% { height: 4px; opacity: .55; }
  50% { height: 15px; opacity: 1; }
}
.xplay-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.xplay-song-title,
.xplay-song-artist {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; padding-left: 2px; margin-left: -2px;
  white-space: nowrap;
}
.xplay-song-title {
  color: rgba(255,255,255,.86);
}
.xplay.is-playing .xplay-track.is-active .xplay-song-title {
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue-glow);
}
.xplay-song-artist {
  color: rgba(255,255,255,.42);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
}
.xplay-badge {
  color: rgba(255,255,255,.42);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: end;
}
.xplay-badge span:empty { display: none; }
.xplay-badge img {
  width: 13px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  opacity: .82;
}
.xplay-platforms {
  gap: 4px;
}
.xplay-platform-token {
  all: unset;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}
.xplay-platform-token img {
  width: 14px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  opacity: .9;
}
/* 자동발견(검토 대기) 배지 — 점선 + 저채도. 편집모드 탭=채택(auto 해제→실선), ×=제거 */
.xplay-platform-token.is-auto {
  outline: 1px dashed rgba(41,194,242,.62);
  outline-offset: 1px;
}
.xplay-platform-token.is-auto img {
  opacity: .55;
  filter: saturate(.45);
}
/* 대체 플랫폼 자동찾기 버튼 (편집패널 상단 — 편집모드에서만 보임) */
.xplay-autofill {
  height: 28px;
  padding: 0 10px;
  margin: 8px 0 0;   /* 검색(전/후) 블록 아래로 이동 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(41,194,242,.52);
  background: rgba(0,0,0,.42);
  color: var(--blue);
  font-family: "Galmuri9", var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.xplay-autofill.is-on {
  border-style: solid;
  background: rgba(41,194,242,.16);
}
.xplay-autofill svg { width: 11px; height: 11px; flex: none; }   /* 곡별 돋보기와 동일 아이콘 — 통일감 */
/* 계정 가져오기 3사 버튼 행 — YT/SC는 준비 전 비활성(자리만 통일) */
.xplay-import-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.xplay-import-row .xplay-autofill { margin: 0; }
.xplay-autofill:disabled { opacity: .35; cursor: not-allowed; border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.55); }
.xplay-autofill.hidden { display: none; }   /* 곡 0개일 땐 '모든 곡 자동찾기' 숨김 */
/* ── 플리 가져오기 모달 (profile + 가져오기) — z-index 4000: 연결 확인팝업(5000)이 위로 뜨게 ── */
.imp-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.64); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .14s ease; }
.imp-overlay.show { opacity: 1; }
.imp-card { width: 100%; max-width: 440px; max-height: 84vh; display: flex; flex-direction: column; background: #0d1116; border: 1px solid rgba(41,194,242,.3); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
.imp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.imp-head b { font-family: "Galmuri9", var(--font-mono); font-size: 13px; color: #fff; }
.imp-x { border: 0; background: transparent; color: rgba(255,255,255,.6); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.imp-x:hover { color: #fff; }
.imp-body { padding: 16px; overflow-y: auto; }
.imp-label { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); margin: 0 0 8px; }
.imp-section { margin-top: 22px; }
/* 링크 붙여넣기 행 — 검색바+가져오기 융합(편집기와 동일 톤) */
.imp-linkrow { display: flex; }
.imp-linkrow input { flex: 1; min-width: 0; height: 34px; box-sizing: border-box; background: rgba(0,0,0,.3); border: 1px solid rgba(41,194,242,.3); color: #fff; padding: 0 10px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; border-radius: 8px 0 0 8px; outline: 0; }
.imp-linkrow button { flex: none; height: 34px; padding: 0 16px; border: 1px solid var(--blue); border-left: 0; background: var(--blue); color: #001018; font-family: "Galmuri9", var(--font-mono); font-size: 12px; border-radius: 0 8px 8px 0; cursor: pointer; white-space: nowrap; }
.imp-linkrow button:hover { filter: brightness(1.08); }
/* 계정 버튼 — 로고 + 이름, 2열 그리드 */
.imp-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.imp-acc { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.03); color: #fff; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; text-align: left; }
.imp-acc img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; }
.imp-acc:hover:not(:disabled) { border-color: rgba(41,194,242,.55); background: rgba(41,194,242,.06); }
.imp-acc:disabled { opacity: .38; cursor: not-allowed; }
.imp-acc .imp-acc-tag { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.4); }
.imp-acc.is-ready { border-color: rgba(41,194,242,.45); }
.imp-acc.is-ready .imp-acc-tag { color: var(--blue); }
/* 연결됨 → 로고·이름 우측의 '연결 해제' (하단 별도 바 없이 여기서) */
.imp-acc .imp-acc-dc { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 2px 8px; }
.imp-acc .imp-acc-dc:hover { color: rgba(255,120,120,.95); border-color: rgba(255,99,99,.5); }
/* 연결 관리 한 줄 */
.imp-connbar { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.5); }
.imp-connbar button { margin-left: auto; border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.75); border-radius: 999px; padding: 4px 12px; font-family: "Galmuri9", var(--font-mono); font-size: 11px; cursor: pointer; }
.imp-connbar button:hover { color: #fff; border-color: rgba(41,194,242,.5); }
.imp-connbar button.is-connect { border-color: var(--blue); color: var(--blue); }
.imp-msg { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(41,194,242,.9); min-height: 16px; margin-top: 14px; }
.imp-msg.is-err { color: rgba(255,120,120,.9); }
/* 내 플리 목록 행 */
.imp-pl { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.02); cursor: pointer; text-align: left; margin-bottom: 6px; }
.imp-pl:hover { border-color: rgba(41,194,242,.5); background: rgba(41,194,242,.05); }
.imp-pl-cover { width: 40px; height: 40px; border-radius: 6px; background: #222 center/cover no-repeat; flex: none; }
.imp-pl-meta { min-width: 0; flex: 1; }
.imp-pl-name { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-pl-sub { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }
.imp-back { border: 0; background: transparent; color: rgba(255,255,255,.6); font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; padding: 0; margin-bottom: 12px; }
.imp-back:hover { color: #fff; }
/* 미리보기 */
.imp-preview { display: flex; gap: 12px; align-items: flex-start; }
.imp-preview-cover { width: 72px; height: 72px; border-radius: 8px; background: #222 center/cover no-repeat; flex: none; }
.imp-preview-meta { min-width: 0; }
.imp-preview-title { font-family: "Galmuri9", var(--font-mono); font-size: 13px; color: #fff; }
.imp-preview-sub { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.5); margin-top: 4px; }
.imp-preview-desc { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4); margin-top: 6px; white-space: normal; max-height: 3.2em; overflow: hidden; line-height: 1.4; }
.imp-trackrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); margin-top: 16px; }
.imp-trackrow-label { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #fff; }
.imp-trackrow-desc { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }
.imp-vis-seg { width: auto; max-width: 200px; border-radius: 8px; }
.imp-vis-seg .vis-seg-btn { padding: 6px 8px; font-size: 11px; }
.imp-freq { border: 1px solid rgba(41,194,242,.4); background: rgba(41,194,242,.08); color: var(--blue); border-radius: 999px; padding: 4px 12px; font-family: "Galmuri9", var(--font-mono); font-size: 11px; cursor: pointer; }
.imp-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.imp-acts button { border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.8); border-radius: 999px; padding: 8px 16px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
.imp-acts .imp-register { border-color: var(--blue); background: var(--blue); color: #001018; }
.imp-acts .imp-register:hover { filter: brightness(1.08); }
.imp-acts button:disabled { opacity: .4; cursor: not-allowed; }
/* set 카드 타입 배지 (편집모드) — 추적 중 / 가져옴 구분 */
.set-card-badge { display: inline-block; align-self: flex-start; margin-top: 6px; border-radius: 999px; padding: 2px 9px; font-family: "Galmuri9", var(--font-mono); font-size: 10px; }
.set-card-badge.is-tracked { border: 1px solid rgba(41,194,242,.55); background: rgba(41,194,242,.14); color: var(--blue); }
.set-card-badge.is-paused { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: rgba(255,255,255,.55); }
.set-card-visrow .set-card-vis { margin-top: 0; text-align: left; min-width: 0; }
.set-card-visrow .set-card-badge { margin-top: 0; align-self: center; justify-self: end; white-space: nowrap; }   /* 추적 배지는 우측 고정 */
/* 비편집: 공개상태 + 추적 배지 한 줄. 공개상태는 좌측, 추적상태는 우측 */
.set-card-visrow { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
/* set 카드 추적 컨트롤 (편집모드, source 있는 플리) — [추적 중/일시정지 토글][갱신] 한 줄, 중앙정렬 */
.set-card-track { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 6px; justify-content: center; }
.set-track-btn { border: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.6); border-radius: 6px; padding: 5px 10px; font-family: "Galmuri9", var(--font-mono); font-size: 11px; white-space: nowrap; cursor: pointer; }
.set-track-btn:hover { border-color: rgba(41,194,242,.6); color: #fff; }
.set-track-btn.is-on { border-color: var(--blue); background: rgba(41,194,242,.12); color: var(--blue); }   /* 추적 중 = 파랑 */
.set-track-btn.is-paused { border-color: rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.55); }   /* 추적 일시정지 = 회색 */
.set-track-btn:disabled { opacity: .5; cursor: default; }
.set-track-src { align-self: center; font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(41,194,242,.75); text-decoration: none; }
.set-track-src:hover { color: var(--blue); }
/* 에디터 추적 컨트롤 줄 — 공개설정(vis-seg) 바로 밑. 버튼은 프로필 카드(set-track-btn)와 동일 디자인 */
#xplay.xplay-editing #xplaySyncRow { order: 5; width: 100%; max-width: 340px; margin: 4px auto 0; justify-content: center; gap: 6px; flex-wrap: wrap; }
#xplay.xplay-editing #xplaySyncRow > button { all: unset; box-sizing: border-box; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.6); border-radius: 999px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
#xplay.xplay-editing #xplaySyncRow > button:hover { border-color: rgba(41,194,242,.6); color: #fff; }
#xplay.xplay-editing #xplaySyncSrc.is-on { border-color: var(--blue); background: rgba(41,194,242,.12); color: var(--blue); }
/* 편집기 추적 원본 — 플랫폼 로고 + 플리 커버 + 제목 */
.xplay-sync-srclink { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; margin-top: 4px; }
.xplay-sync-src-logo { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; flex: none; }
.xplay-sync-src-cover { width: 22px; height: 22px; border-radius: 4px; background: #222 center/cover no-repeat; flex: none; }
.xplay-sync-src-title { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.65); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xplay-sync-srclink:hover .xplay-sync-src-title { color: var(--blue); }
/* 편집기 가져오기 계정 버튼 (로고+이름 — profile 모달과 동일) */
#xplay.xplay-editing .xplay-import-accts { width: 100%; max-width: 340px; margin: 4px auto 0; }
#xplay.xplay-editing .imp-label-editor { max-width: 340px; margin: 14px auto 6px; text-align: center; }
/* 원본 플리 추적 토글 — 가져온 set에서만 노출, 켜지면 실선+파랑 */
.xplay-syncsrc.is-on { border-style: solid; background: rgba(41,194,242,.16); }
.xplay-syncsrc.hidden { display: none; }
/* 곡별 자동찾기(돋보기) — + 로 대상 곡 지정 시 검색창 좌측에 (JS가 display 제어) */
.xplay-autoone { border-style: dashed !important; }
.xplay-autoone svg { width: 11px; height: 11px; display: block; }
.xplay-autoone.is-busy { opacity: .4; pointer-events: none; }
.xplay-inputrow .xplay-autoone { visibility: visible; flex: none; width: auto; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; }   /* 입력 없을 때 .xplay-alt 공통 숨김의 예외 + 아이콘·글자 */
#xplay.xplay-editing #xplayAutoOne { width: auto; height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 6px; font-size: 12px; }
#xplay.xplay-editing #xplayAutoOne svg { width: 13px; height: 13px; flex: none; }
/* 대댓글식 인라인 플랫폼 목록 (편집모드) — 곡 탭하면 그 밑에 펼쳐짐(평소 숨김) */
.xplay-plats-inline { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 8px 44px; }   /* 대댓글식 들여쓰기 — 대표곡 종속임이 확실히 보이게 */
#xplayPlatsHere .xplay-plats-inline { margin: 0 0 8px; }   /* 전/후 밑 복제본 — 들여쓰기 없이 꽉 차게 */
/* 플랫폼 편집 세션 저장/취소 — 이 블록만의 확정/원복 (편집기 전체 저장/취소와 별개) */
.xplay-plats-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 8px; }
.xplay-plats-actions button { all: unset; box-sizing: border-box; height: 28px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
.xplay-plats-actions .pa-save { background: var(--blue); color: #001018; }
.xplay-plats-actions .pa-cancel { border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.xplay-plats-actions .pa-save:hover { filter: brightness(1.1); }
.xplay-plats-actions .pa-cancel:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.xplay-plat-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.03); box-sizing: border-box; min-height: 32px; }
.xplay-plat-row.is-auto { border-style: dashed; border-color: rgba(41,194,242,.5); background: rgba(41,194,242,.06); }
.xplay-plat-row.is-new { border: 1px solid rgba(41,194,242,.85); background: rgba(41,194,242,.10); box-shadow: 0 0 6px rgba(41,194,242,.22); }   /* 추가 예정(입력 링크) — 파란 실선 스트로크 */
.xplay-tcover.has-auto { outline: 1px dashed rgba(41,194,242,.62); outline-offset: 1px; border-radius: 2px; }   /* 미결정 후보 있는 곡 — 좌측 커버에도 점선 신호 */
/* 아직 추가 안 된(미확정) 플랫폼 로고 — 어디서든 점선+회색 (전/후 로고줄·인라인 행 로고 공통) */
#xplayInputMeta img.is-pending { outline: 1px dashed rgba(41,194,242,.55); outline-offset: 1px; opacity: .5; filter: saturate(.4); }
.xplay-plat-row.is-auto .xplay-plat-logo { outline: 1px dashed rgba(41,194,242,.55); outline-offset: 1px; opacity: .6; filter: saturate(.5); }
.xplay-plat-row.is-auto .xplay-plat-name b,
.xplay-plat-row.is-auto .xplay-plat-title { color: var(--blue); }   /* 자동발견 = 글자 대신 파란 톤 — "검토 필요" 신호 */
.xplay-plat-logo { width: 15px; height: 15px; border-radius: 3px; object-fit: cover; flex: none; }
.xplay-plat-cover { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; }   /* 그 플랫폼에서 찾은 커버 */
.xplay-plat-name { flex: 1; min-width: 0; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xplay-plat-name b { font-weight: 400; }
.xplay-plat-title { color: rgba(255,255,255,.38); margin-left: 6px; }
.xplay-pbtn { all: unset; box-sizing: border-box; width: 26px; height: 24px; flex: none; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; line-height: 1; color: rgba(255,255,255,.75); cursor: pointer; position: relative; touch-action: manipulation; }
.xplay-pbtn::after { content: ""; position: absolute; inset: -6px -2px; }   /* 보이는 크기 유지, 탭 히트영역만 확장 */
.xplay-pbtn.p-play { color: var(--blue); border-color: rgba(41,194,242,.5); }
.xplay-pbtn.p-keep { background: var(--blue); border-color: var(--blue); color: #001018; }   /* bold 금지(픽셀폰트) — 활성/비활성 글리프 크기 동일 유지 */
.xplay-pbtn.p-x { color: rgba(255,120,120,.85); border-color: rgba(255,99,99,.4); }
.xplay-pbtn.p-open { color: rgba(255,255,255,.55); text-decoration: none; }
.xplay-pbtn.p-keep.is-kept { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.45); cursor: default; pointer-events: none; }   /* 이미 포함됨 = 같은 버튼의 회색판 (크기 완전 동일) */
/* 편집모드 배지 = 표시 전용 — 탭은 행으로 통과(재생+플랫폼 목록 펼침), 오탭 원천 차단 */
.xplay.is-editing .xplay-platform-token { pointer-events: none; }
/* (로고 위 겹침 × 배지는 폐지 — 제거는 인라인 플랫폼 목록의 행 옆 ×로 이동) */
/* 편집모드 탭 히트영역 확장 — 보이는 크기·디자인 그대로, 투명 ::after로 터치존만 키움 (모바일·데스크톱 동일 = 통일 경험) */
.xplay.is-editing .xplay-track .xplay-alt,
.xplay.is-editing .xplay-track .xplay-rm { position: relative; touch-action: manipulation; }
.xplay.is-editing .xplay-track .xplay-alt::after,
.xplay.is-editing .xplay-track .xplay-rm::after { content: ""; position: absolute; inset: -12px -5px; }
.xplay-alt {
  all: unset;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(41,194,242,.36);
  border-radius: 2px;
  color: var(--blue);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.xplay-alt:hover {
  border-color: rgba(41,194,242,.7);
  color: #fff;
}
.xplay-rm {
  all: unset;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  width: 18px;
  text-align: center;
}
.xplay-rm:hover { color: #fff; }
.xplay-reject {
  display: inline-grid;
  color: rgba(255,90,90,.88);
}
/* add track / cancel — 입력 있을 때만 보이되 공간은 항상 차지(검색바 위치 고정) */
.xplay-inputrow .xplay-alt,
.xplay-inputrow .xplay-reject { visibility: hidden; }
.xplay-inputrow.has-input .xplay-alt,
.xplay-inputrow.has-input .xplay-reject { visibility: visible; }
.xplay-alt.is-confirm {
  color: var(--blue);
  border-color: rgba(41,194,242,.72);
  background: rgba(41,194,242,.08);
}
.xplay-alt:disabled {
  opacity: .32;
  cursor: not-allowed;
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.36);
  background: transparent;
}
@media (max-width: 520px) {
  /* 모바일에서도 스크린 높이 고정 (콘텐츠 무관) */
  .xplay-screen { height: 180px; }
  .xplay-track {
    grid-template-columns: 34px 28px 1fr auto 20px 16px;
    gap: 5px;
    padding-inline: 5px;
  }
  .xplay-preview-row {
    grid-template-columns: 34px 16px 28px 1fr auto;
    gap: 5px;
  }
}

/* ---------- 댓글 벽 (하나의 편지) ---------- */
.comments {
  width: 100%;
  margin-top: 72px;   /* presence와 ups 사이 투표 창 + ups와의 거리 확보 */
}

/* 닉네임·내용이 띄어쓰기로 쭉 이어지는 흐르는 텍스트 */
.wall {
  font-family: var(--font-body);
  font-size: var(--fs-comment);   /* 벽·ups 공통 스케일 (데스크톱 14 / 모바일 12) */
  line-height: 1.85;              /* 배수 → 크기 따라 함께 축소 */
  color: rgba(233, 240, 246, 0.86);   /* 순백은 검정 배경에서 눈부심 — 차분한 청회백(가독성 유지·피로도 감소) */
  text-align: left;
  word-break: break-word;
}

.wall.loading {
  min-height: 180px;
}

/* 맨 왼쪽 위에 박혀 흐름에 끼어드는 직사각형 입력창 */
.composer {
  display: inline;
  margin-right: 0.5em;
}

.composer input,
.composer textarea {
  font-family: var(--font-body);
  font-size: 16px; /* iOS 입력 포커스 시 자동 확대 방지(16px 이상) */
  line-height: 22px; /* 픽셀 폰트 위아래 1px 잘림 방지 */
  height: 30px; /* input 기본 렌더 차이 보정 (textarea는 JS가 덮어씀) */
  background: transparent;
  border: 1px solid rgba(41, 194, 242, 0.55);
  border-radius: 0; /* 직사각형 */
  padding: 3px 6px;
  outline: none;
  vertical-align: top;
}

.composer input:focus,
.composer textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 8px rgba(41, 194, 242, 0.4);
}

/* 입력창은 내용에 따라 가로로 늘어난다(잘림 방지). JS가 width 를 지정. */
.nick-input {
  color: var(--blue);
  width: 5.5em;
  min-width: 4em;
  max-width: 100%;
  margin-right: 4px;
}

.nick-input::placeholder {
  color: rgba(41, 194, 242, 0.45);
}
.nick-input[readonly] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* 내용칸 + 전송버튼 묶음 (버튼을 우측 아래에 고정하기 위한 컨테이너) */
.text-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

/* 내용칸: 한 줄 넘어가면 JS가 높이를 줄 수만큼 늘린다(잘림 없이 전부 보임).
   우측에 버튼 자리(padding-right)를 비워둬 글자가 버튼에 가리지 않게 한다.
   (.composer textarea 보다 우선하도록 선택자 우선순위를 높임) */
.composer .text-input {
  color: #fff;
  width: 11em;
  min-width: 8em;
  min-height: 30px;
  max-width: 100%;
  padding: 3px 28px 3px 5px;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 글자 수 카운터 — textarea 우측 상단 */
.char-count {
  position: absolute;
  top: 2px;
  right: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(41, 194, 242, 0.3);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.char-count.near-limit { color: rgba(255, 100, 60, 0.75); }

/* 전송(↵) — 내용칸 우측 아래 안쪽에 글리프만 (테두리·배경 없음, 상자 겹침 방지) */
.composer-send {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--blue);
  background: none;
  border: none;
  border-radius: 0;
  padding: 3px 4px;
  cursor: pointer;
  opacity: 0.7;
}

.composer-send:hover {
  opacity: 1;
}

.composer-send:active {
  color: #fff;
  opacity: 1;
}

/* 터치 타깃 확장 (모바일) — 시각적 크기 변경 없이 클릭 영역만 늘림 */
.composer-send::after {
  content: "";
  position: absolute;
  inset: -12px;
}

/* 사진 첨부 버튼 — 정사각형, 닉네임/내용칸과 같은 높이(28px) */
.img-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1;
  color: var(--blue);
  background: rgba(41, 194, 242, 0.1);
  border: 1px solid rgba(41, 194, 242, 0.55);
  border-radius: 0;
  margin-right: 4px;
  cursor: pointer;
  vertical-align: top;
}
.img-btn:hover {
  background: rgba(41, 194, 242, 0.25);
}
.img-btn.drag {
  background: var(--blue);
  color: #00131b;
}
.img-btn.busy {
  opacity: 0.5;
  cursor: default;
}

/* 첨부 미리보기 칩 — img-btn 과 동일 크기로 대체 */
.img-btn.hidden { display: none; }
.img-chip {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin-right: 4px;
  vertical-align: top;
  cursor: pointer;
}
.img-chip.hidden { display: none; }
.img-chip img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 1px solid rgba(41, 194, 242, 0.55);
  display: block;
}
.img-chip:hover img { border-color: var(--blue); }
.img-chip.drag img  { border-color: var(--blue); opacity: 0.7; }
.img-chip button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 15px;
  height: 15px;
  line-height: 12px;
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  text-align: center;
  background: #000;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

/* 댓글 속 사진 아이콘(작은 썸네일) */
.msg .photo-icon,
.best-row .photo-icon,
.prof-comment-text .photo-icon {
  height: 1.4em;
  width: 1.4em;
  object-fit: cover;
  vertical-align: -0.25em;
  margin: 0 4px 0 0;
  border: 1px solid rgba(41, 194, 242, 0.6);
  cursor: pointer;
}
.msg .photo-icon:hover,
.best-row .photo-icon:hover,
.prof-comment-text .photo-icon:hover {
  box-shadow: 0 0 8px var(--blue-glow);
}

/* 라이트박스 (사진 크게 보기) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.hidden {
  display: none;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border: 1px solid rgba(41, 194, 242, 0.4);
  box-shadow: 0 0 40px rgba(41, 194, 242, 0.25);
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}
.lightbox-close:hover {
  color: var(--blue);
}

/* 개별 댓글 — 구분 없이 본문에 녹아드는 인라인 조각 */
.milestone-marker {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4); /* 0.22→0.4: 대비율 개선 */
  padding: 5px 0 3px;
  margin: 1px 0;
  cursor: pointer;
}
.nothing-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 28px;
  letter-spacing: 0.1em;
  z-index: 999;
  cursor: pointer;
  pointer-events: auto;
}

/* 고정 댓글 카드 — 커뮤 벽 위(콘솔에서 지정). 커뮤 전용. */
.pinned-comment {
  max-width: min(680px, 92vw);
  margin: 0 auto 14px;
  padding: 10px 14px;
  border: 1px solid var(--acc, #29c2f2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--acc, #29c2f2) 8%, transparent);
}
.pinned-comment .pin-label {
  font-family: "Galmuri9", var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--acc, #29c2f2);
  margin-bottom: 4px;
}
.pinned-comment .pin-text { font-size: 14px; color: #eaeaea; word-break: break-word; }
.pinned-comment .pin-who { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
/* 커뮤 공지 피드(운영자 포스트) */
.comm-posts { max-width: min(680px, 92vw); margin: 0 auto 14px; display: flex; flex-direction: column; gap: 10px; }
.comm-post { display: block; text-decoration: none; color: inherit; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.03); }
.comm-post.pinned { border-color: var(--blue, #29c2f2); background: color-mix(in srgb, var(--blue, #29c2f2) 7%, transparent); }
.comm-post .cp-pin { font-family: "Galmuri9", var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--blue, #29c2f2); margin-bottom: 4px; }
.comm-post .cp-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; display: block; }
.comm-post .cp-title { font-size: 14px; color: #fff; margin-bottom: 3px; word-break: break-word; }
.comm-post .cp-body { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
a.comm-post:hover { border-color: rgba(255,255,255,.3); }
/* 일반 커뮤 게시판 */
.comm-board {
  max-width: min(680px, 92vw);
  margin: 0 auto 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.world-home .comm-board {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 8px;
  background: rgba(4, 8, 12, .94);
}
.cboard-head,
.cboard-compose-foot,
.cboard-thread-foot,
.cboard-reply {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cboard-head { justify-content: space-between; margin-bottom: 10px; }
.cboard-title { color: #fff; font-size: 14px; }
.cboard-compose { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cboard-compose-foot { justify-content: flex-end; }
.cboard-input,
.cboard-text {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 10px;
  outline: 0;
}
.cboard-text { resize: vertical; min-height: 38px; line-height: 1.45; }
.cboard-input:focus,
.cboard-text:focus { border-color: var(--blue, #29c2f2); }
.cboard-note { flex: 1; min-height: 14px; color: var(--text-dim); font-size: 11px; }
.cboard-post,
.cboard-mini {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
}
.cboard-post { border-color: var(--blue, #29c2f2); color: var(--blue, #29c2f2); }
.cboard-post:disabled { opacity: .45; cursor: not-allowed; }
.cboard-list { display: flex; flex-direction: column; gap: 8px; }
.cboard-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px 0; }
.cboard-thread {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 11px 12px;
  background: rgba(0,0,0,.18);
}
.cboard-thread.pinned { border-color: var(--blue, #29c2f2); }
.cboard-thread.hot { border-color: rgba(255,159,67,.4); box-shadow: inset 3px 0 0 #ff9f43; }   /* 베스트(참여도 높은 글) */
.cboard-like { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: transparent; color: rgba(255,255,255,.55); font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; transition: .12s; }
.cboard-like:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.cboard-like.on { color: #ff6b81; border-color: rgba(255,107,129,.5); background: rgba(255,107,129,.1); }
.cboard-like svg { display: block; }
/* 게시판 글쓰기 버튼 + 에디터 모달 + 이미지 갤러리 */
.cboard-compose-bar { margin-bottom: 12px; }
.cboard-write { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.03); color: rgba(255,255,255,.72); font-family: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.cboard-write:hover { border-color: var(--blue,#29c2f2); color: #fff; }
.te-box { max-width: 560px; width: 94vw; }
.te-body-wrap { display: flex; flex-direction: column; gap: 10px; }
.te-title { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #fff; font-family: inherit; font-size: 15px; padding: 10px 12px; outline: 0; }
.te-title:focus, .te-body:focus { border-color: var(--blue,#29c2f2); }
.te-body { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #eaeaea; font-family: inherit; font-size: 14px; line-height: 1.55; padding: 10px 12px; outline: 0; resize: vertical; min-height: 120px; }
.te-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.te-img, .te-img-add { width: 74px; height: 74px; border-radius: 8px; position: relative; overflow: hidden; flex: none; }
.te-img { border: 1px solid rgba(255,255,255,.14); background: #0b0e13; }
.te-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.te-img.loading::after { content: "…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
.te-img-rm { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.te-img-add { border: 1px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.03); color: rgba(255,255,255,.5); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.te-img-add:hover { border-color: var(--blue,#29c2f2); color: #fff; }
.te-foot { display: flex; align-items: center; gap: 10px; }
.te-note { flex: 1; color: rgba(255,120,120,.9); font-size: 12px; }
.cboard-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cboard-img { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); flex: none; }
.cboard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cboard-thread-title { color: #fff; font-size: 14px; word-break: break-word; }
.cboard-thread-body {
  margin-top: 5px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.cboard-thread-foot { justify-content: space-between; margin-top: 8px; }
.cboard-meta,
.cboard-comment-meta { color: var(--text-dim); font-size: 11px; }
.cboard-detail { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.cboard-comments { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.cboard-comment {
  border-left: 2px solid rgba(41,194,242,.45);
  padding-left: 9px;
}
.cboard-comment-text { color: rgba(255,255,255,.84); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cboard-reply .cboard-text { flex: 1; min-height: 32px; }
@media (max-width: 520px) {
  .comm-board { padding: 12px; }
  .cboard-thread-foot,
  .cboard-reply { align-items: stretch; flex-direction: column; }
  .cboard-thread-foot .cboard-mini,
  .cboard-reply .cboard-post { align-self: flex-end; }
}
/* 뽀모도로 공부시간 패널 */
.pomo-panel {
  max-width: min(680px, 92vw);
  margin: 0 auto 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.world-home .pomo-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 8px;
  background: rgba(4, 8, 12, .94);
}
.pomo-head,
.pomo-actions,
.pomo-rank {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pomo-head { justify-content: space-between; margin-bottom: 10px; }
/* 공유 phase 배너 — 방 전원이 같은 상태(집중/휴식). focus=차분한 블루, rest=따뜻한 앰버. 카드에 융화(radius 8·13px). */
.pomo-phase { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 11px; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.pomo-phase::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pomo-phase.focus { color: #bfe0f0; background: rgba(41,194,242,.1); border-color: rgba(41,194,242,.3); }
.pomo-phase.focus::before { background: #29c2f2; box-shadow: 0 0 7px #29c2f2; }
.pomo-phase.rest { color: #ffd9a8; background: rgba(255,159,67,.12); border-color: rgba(255,159,67,.34); }
.pomo-phase.rest::before { background: #ff9f43; box-shadow: 0 0 7px #ff9f43; animation: pomoPulse 1.4s ease-in-out infinite; }
@keyframes pomoPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.pomo-phase.just-break { animation: pomoBreak 1.3s ease-out; }
@keyframes pomoBreak { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,159,67,.5); } 22% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(255,159,67,.28); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,159,67,0); } }
/* 휴식 중 공유 리액션 — 버튼 + 떠오르는 리액션(Cloudflare DO 룸 방송) */
.pomo-react { display: flex; gap: 8px; margin-bottom: 12px; }
.pomo-react-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform .1s, background .12s; }
.pomo-react-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.pomo-react-btn:active { transform: scale(.88); }
.pomo-react-btn svg { width: 20px; height: 20px; }
.react-layer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; }
.react-float { position: absolute; bottom: 12%; width: 34px; height: 34px; opacity: 0; animation: reactRise 2.6s ease-out forwards; }
.react-float svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
@keyframes reactRise { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 12% { opacity: 1; transform: translate(0,-10px) scale(1.05); } 100% { transform: translate(var(--dx,0), -46vh) scale(.9); opacity: 0; } }
/* 집중 패널 섹션 타이틀 = CYCLE 타이틀과 동일(cyan·Galmuri·12px·uppercase) → 두 카드 융화 */
.pomo-title { color: var(--world-accent, var(--blue, #29c2f2)); font-family: "Galmuri9", var(--font-mono); font-size: 12px; text-transform: uppercase; }
.pomo-elapsed { color: rgba(255,255,255,.85); font-size: 13px; font-variant-numeric: tabular-nums; }
.pomo-actions { margin-bottom: 12px; }
.pomo-btn {
  border: 1px solid var(--blue, #29c2f2);
  border-radius: 999px;
  background: transparent;
  color: var(--blue, #29c2f2);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
}
.pomo-btn:disabled { opacity: .45; cursor: not-allowed; }
.pomo-note { flex: 1; color: var(--text-dim); font-size: 11px; min-height: 14px; }
.pomo-board { border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; margin-top: 2px; }
.pomo-board-title { color: var(--world-accent, var(--blue, #29c2f2)); font-family: "Galmuri9", var(--font-mono); font-size: 12px; text-transform: uppercase; margin-bottom: 8px; }
.pomo-rank { justify-content: space-between; padding: 5px 0; color: rgba(255,255,255,.82); font-size: 12px; }
.pomo-rank + .pomo-rank { border-top: 1px solid rgba(255,255,255,.06); }
.pomo-rank b { color: var(--blue, #29c2f2); font-weight: 400; }
.pomo-empty { color: var(--text-dim); font-size: 12px; padding: 5px 0; }
/* CYCLE 카드 집중/휴식 행 — phase 배너와 같은 색(집중=블루, 휴식=앰버) 좌측 액센트 + 태그색 → 통일감 */
.world-home-row.pomo-cyc { position: relative; padding-left: 12px; }
.world-home-row.pomo-cyc::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; }
.world-home-row.pomo-cyc.focus::before { background: #29c2f2; box-shadow: 0 0 6px rgba(41,194,242,.55); }
.world-home-row.pomo-cyc.rest::before { background: #ff9f43; box-shadow: 0 0 6px rgba(255,159,67,.55); }
.world-home-row.pomo-cyc.focus .world-home-row-tag { color: #29c2f2; }
.world-home-row.pomo-cyc.rest .world-home-row-tag { color: #ffb877; }
@media (max-width: 520px) {
  .pomo-actions { align-items: stretch; flex-direction: column; }
  .pomo-btn { align-self: flex-start; }
}
/* 커뮤 폴/투표 */
.comm-poll { max-width: min(680px, 92vw); margin: 0 auto 14px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.03); }
.comm-poll .cpoll-q { font-size: 14px; color: #fff; margin-bottom: 10px; word-break: break-word; }
.comm-poll .cpoll-opts { display: flex; flex-direction: column; gap: 6px; }
.comm-poll .cpoll-opt { position: relative; overflow: hidden; text-align: left; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.03); color: #eaeaea; font-family: inherit; font-size: 13px; cursor: pointer; }
button.cpoll-opt:hover { border-color: var(--blue, #29c2f2); }
.comm-poll .cpoll-opt.res { cursor: default; display: flex; align-items: center; gap: 8px; }
.comm-poll .cpoll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--blue, #29c2f2) 22%, transparent); z-index: 0; }
.comm-poll .cpoll-opt.mine { border-color: var(--blue, #29c2f2); }
.comm-poll .cpoll-otext { position: relative; z-index: 1; flex: 1; word-break: break-word; }
.comm-poll .cpoll-pct { position: relative; z-index: 1; color: var(--blue, #29c2f2); font-size: 12px; }
.comm-poll .cpoll-meta { margin-top: 8px; font-size: 11px; color: var(--text-dim); }

.msg {
  margin-right: 0.5em;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 스켈레톤 알약 — 실제 .msg와 같은 인라인 흐름·같은 줄높이(글자 한 줄 = 1em 알약, 벽 행간 1.8 유지).
   닉=파란 톤 / 본문=흰 톤 쌍으로 로드 후 모습(파란 닉+흰 텍스트)과 동일 구조. 무광 단색 + 아주 느린 페이드만. */
.sk-pill {
  display: inline-block;
  height: 1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  vertical-align: baseline;
  margin-right: 0.35em;
  animation: sk-fade 2.2s ease-in-out infinite;
}
.sk-pill.sk-nick { background: rgba(41, 194, 242, 0.13); margin-right: 0.3em; }
/* ups 스켈레톤 행 — 실제 .best-row와 동일 치수(height 1.8em, padding 0 16px, gap 8px, font 15px) */
.sk-row { display: flex; align-items: center; height: 24px; padding: 0 16px; gap: 8px; font-size: 12px; }
@keyframes sk-fade { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sk-pill { animation: none; } }
/* 마우스 올리면 알약형태 강조 (box-shadow ring이라 레이아웃은 안 밀림) */
.msg:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
}

/* 벽 최근댓글에 함께 노출되는 대댓글 프리뷰 — .msg 스타일 상속 + 살짝 푸른 틴트로 구분 */
.wall-reply { background: rgba(110, 168, 255, 0.13); }
.wall-reply:hover { background: rgba(110, 168, 255, 0.24); box-shadow: 0 0 0 5px rgba(110, 168, 255, 0.22); }
.wall-reply-badge { color: var(--blue); font-weight: 700; margin-right: 3px; }
.wall-reply-music { color: var(--blue); margin: 0 3px; }

.msg .nick {
  color: var(--blue);
}
.msg .nick.nick-member {
  cursor: pointer;
}
.msg .nick.nick-member:hover {
  text-decoration: underline;
}
.msg .nick .verified,
.best-row-left .nick .verified {
  color: var(--blue);
  font-size: .75em;
  margin-right: 2px;
  vertical-align: .05em;
  font-style: normal;
}

.msg .body,
.best-row .body {
  color: #fff;
}

/* "시스템서울" 단어 — 특수 색 제거(일반 텍스트색). 핑크는 팔로우한 사람 표시용으로 이전. */
.msg .ss-word,
.best-row .ss-word {
  color: inherit;
}
/* 내가 팔로우한 사람 닉네임 — 핑크 (씬의 팔로우 빛 색과 통일) */
.nick.nick-follow { color: #f6a8c0; }
.nick.nick-follow .verified { color: #f6a8c0; }
/* 내 댓글 닉네임 — 연한 분홍 (일반=하늘 / 팔로우=진한 핑크 #f6a8c0 / 나=연분홍) */
.nick.nick-me { color: #ffcbe6; }
.nick.nick-me .verified { color: #ffcbe6; }

/* 욕설 — 글자는 보이되 가운데 가로 취소선으로 가림 (눈에 안 띄게 중립색) */
.msg .masked,
.best-row .masked {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
}

/* 본문 링크: 밑줄 없음 (밑줄이 "링크 열림"으로 오해되어 제거 — 실제론 댓글 열림) */
.msg .body .link,
.best-row .body .link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 링크만 있는 댓글: 본문=스레드 열기, URL은 이 작은 런처로 */
.msg .body .link-launch,
.best-row .body .link-launch,
.prof-comment-text .link-launch {
  display: inline-block;
  margin-left: 4px;
  padding: 0 3px;
  font-size: 0.9em;
  line-height: 1;
  text-decoration: none;
  color: var(--blue);
  border: 1px solid rgba(41, 194, 242, 0.4);
  border-radius: 3px;
  vertical-align: baseline;
  cursor: pointer;
}
.msg .body .link-launch:hover,
.best-row .body .link-launch:hover,
.prof-comment-text .link-launch:hover {
  background: rgba(41, 194, 242, 0.15);
  border-color: var(--blue);
}

/* 링크 칩 (플랫폼 로고/파비콘 또는 🔗 + 짧은 라벨) — 자체 알약 없음(댓글 hover 알약만) */
.msg .body .link-chip,
.best-row .body .link-chip,
.prof-comment-text .link-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  text-decoration: none;
  line-height: 1;
}
.msg .body .link-chip.link-direct,
.best-row .body .link-chip.link-direct {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.msg .body .link-logo-generic,
.best-row .body .link-logo-generic {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.7;
}
.link-logo {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* ── 베스트 댓글 섹션 ── */
#best-section, #free-best {
  max-width: min(1080px, 94vw);   /* 벽 댓글 뭉터기와 동일 폭 — 화면 따라 넓어짐 */
  margin: 0 auto;
  padding: 0 0 4px;
}
.best-section-header {
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--blue);
  letter-spacing: .1em;
  padding: 10px 16px 4px;
  opacity: .55;
  text-align: center;
}
.best-track {
  padding: 0;
}

/* ── 최신 릴리즈 섹션(ups 아래) — 가로 스크롤 카드. 클릭=해당 댓글 점프 ── */
#releases-section { max-width: min(1080px, 94vw); margin: 0 auto; padding: 0 0 4px; }
#releases-section.hidden { display: none; }
.rel-track { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rel-track::-webkit-scrollbar { display: none; }
.rel-card { all: unset; position: relative; cursor: pointer; flex: 0 0 128px; display: flex; flex-direction: column; gap: 5px; border-radius: 8px; }
.rel-card:hover .rel-cap { color: #fff; }
.rel-link { position: absolute; top: 5px; right: 5px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(6,12,18,.82); color: rgba(255,255,255,.9); font-size: 13px; line-height: 1; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.22); -webkit-tap-highlight-color: transparent; }
.rel-link:hover { background: rgba(41,194,242,.9); color: #04121a; box-shadow: 0 0 0 1px rgba(41,194,242,.95), 0 0 8px rgba(41,194,242,.5); }
.rel-cover { position: relative; width: 128px; height: 76px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); display: block; }
.rel-cover img:not(.rel-plat) { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-cover.is-empty::after { content: "♪"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.3); font-size: 18px; }
.rel-plat { position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; border-radius: 4px; }
.rel-cap { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 2px; }   /* 픽셀폰트 첫 글자 왼쪽 컬럼 클리핑 방지 */
.rel-date { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.35); padding-left: 2px; }
.best-row {
  display: flex;
  align-items: center;
  height: 1.72em;    /* em → 폰트 스케일 따라감 (14→24 / 12→21) */
  padding: 0 16px;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-comment);   /* 벽 본문과 동일 스케일 */
  line-height: 1.72;
  border-radius: 999px;
  color: #fff;
  word-break: break-word;
  overflow: visible;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.best-row:not(.best-row-empty):hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
}
.best-row-empty {
  height: 1.8em;
}
.best-row-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.45em;            /* 닉네임과 본문 사이 간격 — 일반 댓글처럼 */
  cursor: pointer;
  overflow: visible;
  padding-left: 2px;      /* 데스크탑 픽셀 폰트 좌측 획 클립 방지 */
  margin-left: -2px;
}
.best-row-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
}
.best-row-thumb {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
  cursor: pointer;
}
.best-row-btn {
  align-self: center;
}
/* ups(베스트) 행의 첨부 플리 카드 — baseline flex로 깨지던 것 → 세로 가운데 + 행 높이에 맞게 커버만 축소.
   font-size는 상속(주변 텍스트와 일치). */
.best-row-left .pl-card-inline { align-self: center; }
.best-row-left .pl-card-inline .pl-cover { width: 1.2em; height: 1.2em; }
/* 사진도 형제(logo/thumb/btn)처럼 세로 가운데 — baseline flex에서 위로 뜨는 것 방지 */
.best-row .photo-icon { align-self: center; }
.best-row-left:hover .best-row-text { opacity: .85; }
.best-row-left .nick { color: var(--blue); flex-shrink: 0; }
.best-row-text {
  flex: 0 1 auto;        /* 내용 크기로 (안 채움). 길면 말줄임 → 링크버튼이 내용 바로 뒤에 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; padding-left: 2px; margin-left: -2px;
  white-space: nowrap;
  color: rgba(255,255,255,.7);
  /* font-size 명시 제거 → .best-row(var(--fs-comment)) 상속. 닉과 동일 크기 유지(예전 16px가 닉보다 커서 어긋났음) */
}
.best-row-rc {
  flex-shrink: 0;
  margin-left: auto;    /* 우측 끝으로 (링크버튼은 내용 뒤, 카운트는 우측 끝) */
  min-width: 2.9em;     /* 폭 고정 → 댓글수 자릿수 달라도 행마다 아이콘·수 가로위치 일관(우측 정렬 어긋남 수정) */
  text-align: right;
  font-family: "Galmuri9", var(--font-mono);   /* 0.7em(≈8~10px 비정격) → G9 정격 12px (ups 카운트 깨짐 수정) */
  font-size: 12px;
  color: rgba(255,255,255,.45);
  line-height: 1;
  align-self: center;   /* 세로 중앙 */
}
.best-pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 5px 16px 8px;
}
.best-page-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.4);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 2px 9px;
  cursor: pointer;
  line-height: 1.4;
}
.best-page-btn.active {
  border-color: var(--blue);
  color: var(--blue);
}
.best-page-btn:hover:not(.active) {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.65);
}

/* 추천 1위 강조 */
.msg.best {
  background: rgba(41, 194, 242, 0.12);
  border-radius: 2px;
  padding: 0 3px;
}
.best-tag {
  font-family: var(--font-mono);
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00131b;
  background: var(--blue);
  padding: 1px 4px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: 1px;
}

/* 신고 — 작은 깃발 아이콘, 옅게 / 호버·신고됨 시 빨강 */
.msg .report {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.4); /* 0.25→0.4: 대비율 개선 */
  margin-left: 4px;
  cursor: pointer;
  vertical-align: 1px;
}
.msg .report:hover {
  color: #ff6b6b;
}
.msg .report.reported {
  color: #ff6b6b;
  cursor: default;
}

/* .trash-link 규칙은 위 .site-foot 섹션에 통합됨 */

/* 신고로 숨겨진 글 (쓰레기통 열었을 때만 흐리게 표시) */
.msg.reported-hidden {
  opacity: 0.5;
}
.msg.reported-hidden::before {
  content: "[신고됨] ";
  color: #ff6b6b;
  font-size: 0.72em;
}

/* 댓글 우측 카운트: 순위점수(상단) + 대댓글수(하단) */
.msg-counts {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  vertical-align: top;
  margin-left: 1px;
  line-height: 1;
  flex-shrink: 0;
}
.net-score {
  font-family: "Galmuri9", var(--font-mono);   /* 0.7em 비정격 → G9 12px (좋아요/카운트 깨짐 수정) */
  font-size: 12px;
  color: var(--score-color, rgba(255,255,255,.55));
  line-height: 1.15;
  min-height: 1.15em;
  text-align: right;
  white-space: pre;
}
.net-score.is-best { color: #ffd700; }
.reply-count {
  font-family: "Galmuri9", var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,.38);
  line-height: 1.15;
  text-align: right;
  white-space: pre;
}



/* 이미 누른 댓글 */
.msg.clicked {
  cursor: default;
}

/* 새로 추가될 때 파바박 */
.msg.pop {
  animation: pop 0.45s steps(4);
}

@keyframes pop {
  0% {
    opacity: 0;
    color: #fff;
    text-shadow: 0 0 14px var(--blue-glow);
  }
  100% {
    opacity: 1;
    text-shadow: none;
  }
}

.msg.notif-highlight {
  animation: notif-hl 1.1s ease-out 2;   /* 배경·테두리 플래시 2회 — 모바일에서도 잘 보이게 */
  border-radius: 4px;
}

@keyframes notif-hl {
  0%, 100% { background: transparent; box-shadow: none; }
  25%      { background: rgba(41,194,242,.32); box-shadow: 0 0 0 2px var(--blue), 0 0 16px var(--blue-glow); color: #fff; }
}

/* 댓글 작성 경고 — 닉네임 줄 바로 위에 띄움(절대배치 → 다른 요소 안 밀림), 왼쪽정렬 */
.wall { position: relative; }
.error-note {
  position: fixed;
  left: 50%;
  top: 56px;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  color: #ffd7d7;
  font-size: 12.5px;
  line-height: 1.4;
  max-width: min(92vw, 420px);
  padding: 6px 14px;
  border-radius: 9px;
  background: rgba(28, 8, 8, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 200;
  pointer-events: auto;
}

/* 이전 댓글 더 보기 */
.load-more {
  display: block;
  margin: 18px auto 0;
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--blue);
  background: transparent;
  border: 1px solid rgba(41, 194, 242, 0.5);
  border-radius: 0;
  padding: 6px 16px;
  cursor: pointer;
}
.load-more:hover {
  border-color: var(--blue);
  color: #fff;
}
.load-more.hidden {
  display: none;
}

/* 대댓글 입력 중인 부모 댓글 — 언더라인으로 표시 */

/* ── 좋아요/싫어요 바 (스레드 열릴 때) ── */
.like-bar {
  display: flex;
  align-items: center;
  position: relative;
  padding: 7px 16px;
}
.like-bar-center {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.like-bar-center .l-btn,
.like-bar-center .l-score {
  pointer-events: auto;
}
.l-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s;
  color: rgba(255,255,255,.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.l-btn:hover { color: rgba(255,255,255,.8); }
.l-btn.active { color: var(--blue); }
.l-btn.active-neg { color: #ff6b6b; }
.l-btn.report-btn {
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.32);
  white-space: nowrap;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
}
.l-btn.report-btn:hover { color: #ff6b6b; }
.l-btn.report-btn.reported { color: #ff6b6b; }
.l-score {
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--score-color, rgba(255,255,255,.6));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  letter-spacing: 0;
  overflow: hidden;
}

/* 대댓글 스레드 그룹 — 부모 댓글 아래 블록, 전체 중앙 정렬 */
.thread-group {
  display: block;
  text-align: center;
  margin: 0 0 6px;
}
.thread-group.hidden {
  display: none;
}

/* 눌린(열린) 부모 댓글 — 중앙 정렬 블록으로 전환, margin-right 0으로 서브픽셀 잔상 방지 */
.msg.replying {
  display: block;
  text-align: center;
  margin-right: 0;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 3px;
}

/* 스레드 안 reply composer — 좌우 인셋, 가로 꽉 채움 */
.thread-group .reply-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin: 6px 16px 5px;
}
.thread-group .reply-composer .text-wrap {
  flex: 1;
  min-width: 120px;
  position: relative;
  display: block;
}
.thread-group .reply-composer .text-input {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* 대댓글 — flex: 좌(닉+텍스트) + 우(액션 버튼) */
.msg.reply {
  display: flex;
  align-items: center;
  margin: 3px 0;
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
  cursor: default;
}
.reply-left {
  flex: 1;
  min-width: 0;
}

/* 대댓글 우측 액션 버튼 영역 */
.reply-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding-top: 0;
  align-self: center;
}
.reply-r-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s;
  color: rgba(255,255,255,.35);
}
.reply-r-btn:hover { color: rgba(255,255,255,.75); }
.reply-r-btn.active { color: var(--blue); }
.reply-r-btn.active-neg { color: #ff6b6b; }
.reply-r-btn.reported { color: #ff6b6b; }
.reply-r-btn:last-child { padding-right: 0; }
.reply-like-count {
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: var(--score-color, rgba(255,255,255,.5));
  display: inline-block;
  flex: 0 0 auto;
  width: 2.6em;
  min-width: 2.6em;   /* flex auto-min(min-content) 무력화 → 점수 자릿수 달라도 폭 고정. 안 하면 .reply-right 폭이 행마다 달라져 △▽신고 어긋남 */
  text-align: right;
  overflow: hidden;
}

/* 대댓글 ↳ 표시 */
.msg.reply .reply-arrow {
  color: var(--text-dim);
}

/* 대댓글 작성 폼 — 인라인 */
.reply-composer {
  display: inline;
  margin-right: 0.5em;
}

/* 대댓글 첨부 지우기 버튼 */
.reply-img-clear {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 15px;
  height: 15px;
  line-height: 12px;
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  text-align: center;
  background: #000;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

/* ── 소셜 포스팅 (시스템서울 자동 댓글) ── */
.msg.sys-post {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 8px 8px;
  margin: 4px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.msg.sys-post { border-radius: 8px; }
.msg.sys-post:hover { background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.sysp-row1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.sysp-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.sysp-name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,.45);
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-right: 6px;
}
.sysp-thumb {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  cursor: zoom-in;
}
.sysp-title {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.82);
}
.sysp-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid rgba(41,194,242,.3);
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sysp-btn:hover { border-color: var(--blue); color: #fff; }
.sysp-time {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,.35);
  margin-top: 5px;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .stage {
    gap: 40px;
    padding: 34px 14px calc(150px + env(safe-area-inset-bottom, 0px));
  }
  .clock {
    gap: 3px;
  }
  /* .wall font-size 옛 16px 제거 — --fs-comment(모바일 12px)가 벽·ups 통일. 이게 범인이었음 */
  .composer input,
  .composer textarea {
    font-size: 16px; /* iOS 자동 확대 방지 — 16px 미만으로 내리지 말 것 */
  }
}

/* SW 업데이트 토스트 */
#sw-update-toast {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--blue);
  color: #000;
  font-family: "Galmuri9", var(--font-mono);   /* 0.78em(≈9.4px 비정격)+bold+자간 = 픽셀폰트 깨짐 → G9 정격 12px, bold·자간 제거 */
  font-size: 12px;
  text-align: center;
  padding: 10px 16px;
  cursor: pointer;
  z-index: 9999;
  -webkit-tap-highlight-color: transparent;
}

#rx-login-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 18, 0.93);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
}

/* ── Auth 모달 ─────────────────────────────────────────────── */
.auth-modal {
  position: fixed; inset: 0; z-index: 10001;   /* 설정 모달(pg-modal 10000) 위에 → 취소 시 설정 그대로 남음 */
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.auth-modal.hidden { display: none; }
.auth-box {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.1);
  width: 100%; max-width: 340px;
  padding: 24px 20px 20px;
  font-family: var(--font-mono);
}
.auth-tabs {
  display: flex; gap: 0; margin-bottom: 20px; position: relative;
}
.auth-tab {
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.45); font-family: "Galmuri9", var(--font-mono); font-size: 12px;   /* Galmuri9 정격 12px — 11px mono는 획 깨짐 */
  padding: 6px 14px; cursor: pointer;   /* letter-spacing 제거 — 소수픽셀 자간이 픽셀폰트 획을 깨뜨림 */
}
.auth-tab.auth-tab-active {
  color: var(--blue); border-bottom-color: var(--blue);
}
.auth-close {
  background: none; border: none; color: rgba(255,255,255,.3);
  font-size: 18px; cursor: pointer; margin-left: auto; padding: 0 4px;
}
.auth-close:hover { color: #fff; }
.auth-input {
  display: block; width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0; color: #fff;
  font-family: var(--font-mono); font-size: 16px;   /* Galmuri11 정격 16px(획 깨짐 방지) + iOS 입력 포커스 자동확대 방지(16px 이상) */
  padding: 9px 10px; margin-bottom: 10px;
  outline: none;
}
.auth-input:focus { border-color: var(--blue); }
.auth-submit {
  width: 100%; background: rgba(41,194,242,.1);
  border: 1px solid rgba(41,194,242,.4);
  color: var(--blue); font-family: "Galmuri9", var(--font-mono); font-size: 12px;   /* Galmuri9 정격 12px + 자간 제거 */
  padding: 9px; cursor: pointer;
}
.auth-submit:hover { background: rgba(41,194,242,.18); }
.auth-msg {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45);   /* 정격 12px */
  margin: 12px 0 0; min-height: 16px; text-align: center;
}
#authLoginForm.hidden, #authSignupForm.hidden, #authForgotForm.hidden { display: none; }
.auth-link {
  display: block; width: 100%; background: none; border: none;
  color: rgba(255,255,255,.42); font-family: "Galmuri9", var(--font-mono); font-size: 12px;   /* 정격 12px, 자간 제거(픽셀 깨짐 방지) */
  cursor: pointer; padding: 8px 0 0; text-align: center;
}
.auth-link:hover { color: rgba(255,255,255,.6); }
.auth-forgot-desc { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); margin-bottom: 14px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#signup-welcome {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9999; white-space: nowrap;
  background: rgba(0,0,0,.92); border: 1px solid rgba(41,194,242,.5);
  color: var(--blue); font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 10px 20px; letter-spacing: .04em;
  animation: fadeIn .4s ease;
}

/* ── top-bar — 공지바 아래, stage 위 우측 정렬 ─────────────────── */
.top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 0;   /* 상단바 버튼은 화면 끝까지 (profile/set과 통일) — max-width 없음 */
  min-height: 37px;   /* 실측 자연높이(버튼 포함) — 이보다 크면 씬이 아래로 밀림, 작으면 버튼 등장 시 점프 */
  box-sizing: border-box;
}
.top-trash {
  opacity: 0.35;
  transition: opacity 0.2s;
}
.top-trash:hover { opacity: 1; }
.top-trash img { width: 24px; height: 24px; display: block; }
.top-home { opacity: 0.35; transition: opacity 0.2s; }
.top-home:hover { opacity: 1; }
.top-home img { width: 32px; height: 32px; display: block; border-radius: 4px; }

#userBtn {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.45);
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  padding: 5px 11px;   /* 자체 패딩 있음 → 클립보정(padding-left 덮음) 금지 */
  cursor: pointer;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;   /* 픽셀폰트 수직 중앙 */
}
#userBtn:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* ── Pull-to-refresh ── */
#ptr {
  position: fixed;
  top: -44px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 44px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}
#ptr-ring {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.6);
  margin-bottom: 6px;
  transition: border-color .15s;
}
#ptr.ptr-ready #ptr-ring { border-color: rgba(255,255,255,.9); }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
#ptr.ptr-spin #ptr-ring { animation: ptr-spin .5s linear infinite; border-color: #fff; }

/* ── Secondary-page nav & layout (me.html + u.html shared) ─────── */
.pg-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  max-width: 720px; margin: 0 auto;
}
.pg-nav-back {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.4); text-decoration: none; letter-spacing: .05em;
}
.pg-nav-back:hover { color: var(--blue); }
.pg-nav-title {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.42); letter-spacing: .14em;
}
.pg-nav-title.accent { color: var(--blue); }
.pg-nav-act {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.35); background: none; border: none;
  cursor: pointer; letter-spacing: .05em; padding: 0;
}
.pg-nav-act:hover { color: rgba(255,100,100,.8); }

.pg-body { max-width: 480px; margin: 0 auto; padding: 0 20px; }
.pg-section { margin-top: 32px; }
.pg-section-title {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,.42); letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 14px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Profile comment card (me.html + u.html shared) ─────────────── */
.prof-comment {
  padding: 9px 12px 10px 13px; margin-bottom: 7px; cursor: pointer;
  border: 1px solid rgba(120,180,220,.14); border-left: 2px solid rgba(41,194,242,.55); border-radius: 8px;
  background: rgba(10,20,28,.5);
  transition: border-color .15s, background .15s;
}
.prof-comment:hover { border-color: rgba(41,194,242,.42); background: rgba(41,194,242,.06); }
.prof-comment.is-trash { border-left-color: rgba(224,112,112,.7); }
/* 메타 칩 — 타입(chat/set)·reply·답글수·점수. 시간은 우측 끝 */
.pfc-chip { font-family: "Galmuri9", var(--font-mono); font-size: 10px; line-height: 1.3; padding: 1px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.03); white-space: nowrap; }
.pfc-kind { color: #7fe0ff; border-color: rgba(41,194,242,.35); background: rgba(41,194,242,.08); }
.pfc-set { color: #cdb4ff; border-color: rgba(170,130,255,.35); background: rgba(170,130,255,.08); }
.pfc-score.pos { color: #5fd4a8; border-color: rgba(95,212,168,.35); }
.pfc-score.neg { color: #e07070; border-color: rgba(224,112,112,.35); }
.prof-comment-meta {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px;   /* GalmuriMono11 네이티브 크기 — 10px에선 픽셀폰트가 깨져 보임(시간 글자) */
  color: rgba(255,255,255,.38); margin-bottom: 5px; letter-spacing: .02em;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.prof-comment-time { color: rgba(255,255,255,.45); margin-left: auto; font-size: 11px; }   /* 상대시간 — 우측 끝(호버=정확 KST) */
/* 내 글 행 — 인덱스 글카드와 동일한 한줄(썸네일·제목 | 시간·조회·추천·댓글·삭제) */
.prof-post-line { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; border: 1px solid rgba(120,180,220,.14); border-left: 2px solid rgba(41,194,242,.55); border-radius: 8px; background: rgba(10,20,28,.5); transition: border-color .15s, background .15s; }
.prof-post-line:hover { border-color: rgba(41,194,242,.42); background: rgba(41,194,242,.06); }
.ppl-thumb { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 5px; object-fit: cover; background: #0b1017; }
.ppl-title { flex: 1 1 auto; min-width: 0; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-right { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: #8aa; }
.ppl-right .prof-comment-time { margin-left: 0; }   /* 한줄 행에선 auto 밀기 불필요 */
.ppl-time { flex: 0 0 auto; font-family: "Galmuri9", var(--font-mono); font-size: 10px; color: #7d94a0; white-space: nowrap; }   /* 내 글 = 정확 날짜/시간(KST) */
.ppl-stat { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ppl-stat svg { width: 11px; height: 11px; }
.ppl-del { background: none; border: none; color: rgba(224,112,112,.75); cursor: pointer; padding: 2px 3px; display: inline-flex; align-items: center; }
.ppl-del:hover { color: #ff8a8a; }
.ppl-del svg { width: 13px; height: 13px; }
@media (max-width: 520px) { .ppl-right { gap: 6px; font-size: 10px; } .ppl-stat svg { width: 10px; height: 10px; } }
.prof-comment-text {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.7); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.prof-comment.expanded .prof-comment-text {
  display: block; overflow: visible; white-space: pre-wrap;
}
.prof-comment:hover .prof-comment-text { color: rgba(255,255,255,.9); }
.prof-comment-trash-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 5px; opacity: .6;
}
.prof-comment-trash-badge img { height: 11px; width: 11px; object-fit: contain; }
.prof-comment-replies {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; font-weight: 500; margin-left: 6px;
  vertical-align: middle; color: rgba(255,255,255,.42);
}
.prof-comment-score {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; font-weight: 600; margin-left: 5px;
  vertical-align: middle; color: rgba(255,255,255,.5);
}
.prof-comment-score.pos { color: #5fd4a8; }
.prof-comment-score.neg { color: #e07070; }
/* me 댓글: 링크칩(index와 동일 톤) + 'on <set>' 표시 */
.prof-comment-text .link-chip { display: inline-flex; align-items: center; gap: 3px; vertical-align: -0.15em; text-decoration: none; color: var(--blue); }
.prof-comment-onset { margin-left: 6px; color: inherit; font-family: "Galmuri9", var(--font-mono); font-size: 12px; }   /* 'reply on'은 회색 */
.prof-onset-title { color: var(--blue); }   /* 플리 제목만 하늘색 */
/* 사진·플리알약을 댓글 텍스트와 같은 높이로 정렬 */
.prof-comment-text .pl-card-inline, .prof-comment-text .photo-icon { vertical-align: middle; }
.prof-comment-empty {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.42); padding: 16px 0;
}
.prof-photo-icon {
  height: 1.4em; width: 1.4em; object-fit: cover;
  vertical-align: -0.25em; margin: 0 4px 0 0;
  border: 1px solid rgba(41,194,242,.5); cursor: pointer;
}
.prof-photo-icon:hover { box-shadow: 0 0 8px rgba(41,194,242,.4); }

/* ── 댓글의 플레이리스트 (Phase 2) ───────────────────────────────────────────── */
/* 선택 칩 (작성바) */
.pl-chip {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin-right: 4px; max-width: 220px;
  background: rgba(255,255,255,.07); border-radius: 999px; padding: 3px 8px 3px 4px;   /* 등록 카드(.pl-card-inline)와 같은 알약 */
}
.pl-chip.hidden { display: none; }
.pl-chip-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pl-chip .pl-chip-meta { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); }   /* 만든이 · 곡수 — .pl-chip span 덮음 */
.pl-chip .pl-cover, .pl-chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 18%; background: #000 center/cover no-repeat; flex: none; }
/* 칩 커버도 사진 없으면 흰배경+회색♪ (.pl-cover.is-empty 패턴) */
.pl-chip span { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.pl-chip button { border: 0; background: transparent; color: rgba(255,255,255,.6); font-size: 16px; line-height: 1; cursor: pointer; flex: none; }

/* 피커 — 화면 정중앙 모달 (box-shadow로 전체 화면 어둡게) */
.pl-picker {
  position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 460px); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(41,194,242,.5); background: #0b0f12; border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.6), 0 10px 34px rgba(0,0,0,.7);
}
.pl-picker.hidden { display: none; }
.pl-picker-empty { padding: 12px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); }
.pl-picker-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px;
  padding: 7px 9px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.05);
}
.pl-picker-item > div:nth-child(2) { min-width: 0; }
.pl-picker-item:hover { background: rgba(41,194,242,.1); }
/* 커버는 span+background — img 스트로크/모서리 뭉개짐 방지. block+aspect-ratio로 정사각형 보장 */
.pl-picker-cover { display: block; width: 36px; height: 36px; aspect-ratio: 1; align-self: center; border-radius: 6px; background: #000 center/cover no-repeat; flex: none; }
.pl-picker-cover.is-empty { display: flex; align-items: center; justify-content: center; background: #fff; }
.pl-picker-cover.is-empty::after { content: "\266A"; color: rgba(0,0,0,.3); font-size: 18px; }
.pl-picker-newcover { width: 36px; height: 36px; border-radius: 18%; background: rgba(41,194,242,.14); display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 20px; line-height: 1; }
.pl-picker-new .pl-picker-name { color: var(--blue); }
.pl-picker-name { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.88); overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.pl-picker-meta { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }   /* 9px 비정격 → G9 12px (attach 피커 깨짐 수정) */
.pl-picker-badge { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,180,80,.7); }

/* 피드 댓글 안의 플리 카드 — 파란 스트로크 없음, 둥근 모서리 */
/* 댓글 속 플리 카드 — 댓글 텍스트에 융화(컴팩트, 테두리 X). [커버·제목·만든이·곡수] */
.pl-card-inline {
  display: inline-flex; align-items: center; gap: 6px;
  vertical-align: middle; margin: 1px 4px 1px 0; max-width: 100%;   /* 주변 텍스트와 상하 중앙 정렬(인라인). font-size는 상속 → 글자크기 일치 */
  padding: 2px 10px 2px 3px; border-radius: 999px;
  background: rgba(255,255,255,.07);   /* 알약 — 댓글 텍스트와 구분 */
  cursor: pointer; text-decoration: none;
}
.pl-card-inline:hover { background: rgba(255,255,255,.12); }
/* 삭제/이용불가 잔재 — 흐릿하게, 클릭 불가 */
.pl-card-deleted { cursor: default; opacity: .5; }
.pl-card-deleted:hover { background: rgba(255,255,255,.07); }
.pl-card-deleted .pl-title { font-style: italic; }
.set-card-deleted { opacity: .5; cursor: default; }
.set-card-deleted .set-card-name { font-style: italic; }
.pl-card-inline .pl-cover {
  display: inline-block; width: 1.6em; height: 1.6em; border-radius: 4px;
  background: #000 center/cover no-repeat; flex: none;
}
.pl-card-inline .pl-title { color: #fff; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.pl-card-inline .pl-meta { color: rgba(255,255,255,.45); flex: none; }   /* 만든이 · 곡수 */

/* ── 3a: 대댓글창 set 패널 ───────────────────────────────────────────────────── */
.pl-thread-panel {
  border: 1px solid rgba(41,194,242,.28); border-radius: 10px;
  background: rgba(0,0,0,.28); padding: 12px; margin: 4px 0 10px;
  position: relative;   /* X 닫기 버튼(.pl-tp-close) 앵커 */
}
/* 우측 상단 X 닫기 (링크·플리 패널 공통) — stroke 없음, 살짝 아래 */
.pl-tp-close {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: rgba(0,0,0,.42); color: #fff; font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.pl-tp-close:hover { background: rgba(0,0,0,.72); }
.pl-tp-loading { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); padding: 6px; }
.pl-tp-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; }
.pl-tp-cover { width: 96px; height: 96px; border-radius: 18%; background: #000 center/cover no-repeat; flex: none; }
/* 빈 커버 음표 placeholder (둥근 프레임과 같은 곡률, 사진과 이질감 없게) */
.pl-tp-cover.is-empty, .pl-card-inline .pl-cover.is-empty, .pl-cover.is-empty { display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.pl-tp-cover.is-empty::after, .pl-cover.is-empty::after { content: "\266A"; color: rgba(0,0,0,.32); line-height: 1; }
.pl-tp-cover.is-empty::after { font-size: 40px; }
.pl-cover.is-empty::after { font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.pl-tp-info { min-width: 0; width: 100%; }
.pl-tp-title { font-size: 16px; color: #fff; font-weight: 600; }
.pl-tp-creator { display: inline-block; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: var(--blue); margin-top: 3px; text-decoration: none; }
a.pl-tp-creator { cursor: pointer; }
a.pl-tp-creator:hover { text-decoration: underline; }
.pl-tp-desc { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); margin-top: 6px; line-height: 1.4; text-align: center; }
.pl-tp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); }
.pl-tp-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: center; flex-wrap: wrap; }
.pl-tp-btn {
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; padding: 6px 12px;
  border: 1px solid rgba(41,194,242,.5); border-radius: 6px; background: transparent;
  color: var(--blue); cursor: pointer;
}
.pl-tp-btn:hover { background: rgba(41,194,242,.12); }
.pl-tp-iconbtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; font-size: 15px; }
.pl-tp-tracks { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.pl-tp-track { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 6px; }
.pl-tp-track:hover { background: rgba(255,255,255,.04); }
.pl-tp-tcover { position: relative; width: 34px; height: 34px; border-radius: 18%; background: #000 center/cover no-repeat; flex: none; }
/* 플랫폼 로고 (편집기와 동일 스타일) */
.pl-tp-plats { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; max-width: 110px; }
.pl-tp-plogo { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; cursor: pointer; box-shadow: 0 0 0 0 transparent; transition: box-shadow .12s; }
.pl-tp-plogo.is-disabled { opacity: .4; filter: grayscale(1); }   /* 풀재생 불가 — 흑백, 클릭 시 연결 */
.pl-tp-plogo.is-pref { box-shadow: 0 0 0 2px var(--blue); }   /* 선택된 선호 플랫폼 — 하늘색 stroke */
/* 인앱 재생 불가 플랫폼 비활성화 */
.pl-tp-track.pl-tp-disabled { opacity: .4; cursor: default; }
/* 현재 곡 강조 */
.pl-tp-track.playing { background: rgba(41,194,242,.12); }
.pl-tp-track.playing .pl-tp-ttitle { color: var(--blue); }
/* 재생 중 이퀄라이저 (커버 위 오버레이) */
.pl-tp-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2px; padding: 7px 0; background: rgba(0,0,0,.5); border-radius: 18%; }
.pl-tp-track.playing .pl-tp-eq { display: flex; }   /* 현재 곡이면 항상 표시 */
.pl-tp-eq i { width: 3px; background: var(--blue); border-radius: 1px; animation: plEq .9s ease-in-out infinite; animation-play-state: paused; }
.pl-tp-track.is-playing .pl-tp-eq i { animation-play-state: running; }   /* 실제 재생 중일 때만 움직임 (일시정지=정지된 막대) */
.pl-tp-eq i:nth-child(1) { animation-delay: 0s; }
.pl-tp-eq i:nth-child(2) { animation-delay: .3s; }
.pl-tp-eq i:nth-child(3) { animation-delay: .6s; }
@keyframes plEq { 0%,100% { height: 4px; } 50% { height: 16px; } }

/* ── 전용 set 페이지 (set.html) ── */
.set-page { margin: 0; background: #0a0a0a; color: #fff; min-height: 100vh; }
/* flex(body) 안에서 margin:auto만 있으면 stretch가 안 돼 콘텐츠 폭으로 쪼그라듦 → width:100% 필수.
   패딩(14px)·max-width를 편집기(#xplay.xplay-editing: padding 14px, 자식 max-width 760)와 맞춰 모든 폭에서 내용폭 일치 */
.set-main { width: 100%; max-width: calc(var(--surface-w) + 28px); margin: 0 auto; padding: 16px 14px 90px; box-sizing: border-box; }
/* 상단바 버튼은 화면 끝까지 (profile/index와 통일) — .set-main 폭 제한을 벗어나 풀블리드 */
.set-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 16px; box-sizing: border-box; }
.set-back { display: inline-flex; align-items: center; color: rgba(255,255,255,.75); text-decoration: none; font-size: 18px; line-height: 1; padding: 4px 6px; }
.set-back:hover { color: #fff; }
.set-top-right { display: inline-flex; align-items: center; gap: 12px; }
/* index의 #userBtn과 동일한 네모 박스 (로그인 / 닉네임) */
.set-userbtn { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.45); font-family: "Galmuri9", var(--font-mono); font-size: 12px; padding: 5px 11px; cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; display: inline-block; }
.set-userbtn:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.set-back:hover { color: var(--blue); }
.set-authbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.set-auth-nick { color: var(--blue); font-weight: 600; text-decoration: none; font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-auth-nick:hover { text-decoration: underline; }
.set-share-new { border-color: var(--blue); color: var(--blue); }
.set-auth-login { padding: 3px 11px; border-radius: 6px; border: 1px solid var(--blue); background: transparent; color: var(--blue); cursor: pointer; font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-auth-login:hover { background: rgba(41,194,242,.12); }
.set-loading { padding: 44px 0; text-align: center; color: rgba(255,255,255,.5); font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-frame { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }   /* 에디터 .xplay-screen(360)과 통일 — 플레이어는 중앙 작게, 트랙리스트만 풀폭 */
.set-layer { position: absolute; inset: 0; display: none; }
.set-layer.is-active { display: block; }
.set-layer iframe { width: 100%; height: 100%; border: 0; display: block; }
.set-frame-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.16); font-size: 46px; }
/* Spotify 풀재생(SDK)은 화면이 없어 카드로 표시 */
.set-sp-card { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 22px; background: linear-gradient(135deg, rgba(29,185,84,.22), #000); }
.set-sp-cover { width: 110px; height: 110px; border-radius: 8px; background: #000 center/cover no-repeat; flex: none; }
.set-sp-meta { min-width: 0; }
.set-sp-title { font-size: 17px; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; }
.set-sp-sub { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #1db954; margin-top: 6px; }
.set-ctl { display: flex; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.set-ctl-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; font-size: 15px; cursor: pointer; }
.set-ctl-btn.is-on { border-color: var(--blue); color: var(--blue); }
.set-head { margin-top: 14px; }
.set-actions { justify-content: center; flex-wrap: wrap; }
.pl-tp-btn.is-on { border-color: var(--blue); color: var(--blue); background: rgba(41,194,242,.12); }
/* 공개 상태 배너 (set 페이지) */
.set-vis-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.03); font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-vis-tag { font-weight: 700; padding: 2px 8px; border-radius: 5px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-vis-tag.tag-unlisted { color: #ffcf6b; border: 1px solid rgba(255,207,107,.5); }
.set-vis-tag.tag-draft { color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.3); }
.set-vis-note { color: rgba(255,255,255,.5); flex: 1; min-width: 120px; }
.set-vis-copy { background: #fff; color: #000; border: none; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
.set-comments { margin-top: 16px; }
/* 구분선은 좋아요/싫어요/저장 버튼 줄(.set-actions) 위로 */
.set-actions { border-top: 1px solid rgba(255,255,255,.08); margin-top: 24px; padding-top: 16px; }
.set-comments-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
/* 작성칸 — index 댓글(.composer)과 완전 동일. set에선 블록 가로배치 + 내용칸 꽉 채움 */
.set-composer { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 18px; }
.set-composer-reply { margin: 8px 0 6px 24px; }   /* 대댓글 작성기는 살짝 들여써서 대댓글 느낌 */
.set-reply-arrow-composer { align-self: center; margin-right: 2px; font-size: 16px; flex: none; }
.set-composer .img-btn { flex: none; }
.set-composer .text-wrap { flex: 1 1 auto; display: block; min-width: 0; }
.set-composer .text-input { width: 100%; min-width: 0; box-sizing: border-box; }
/* 표시 — index 댓글(.msg) 룩 + 블록 스레딩(한 댓글 끝나면 다음 줄) */
.set-cmt-list { display: flex; flex-direction: column; gap: 14px; }
.set-comments .msg { display: block; cursor: pointer; margin: 0; max-width: 100%; line-height: 1.5; font-size: var(--fs-comment); }   /* 벽 댓글과 동일 스케일(데스크톱 14/모바일 12) — 페이지 간 댓글 크기 통일 */
.set-comments .msg .link-logo { width: 15px; height: 15px; }
.set-comments .set-msg-counts { font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-comments .set-msg-acts .reply-r-btn { font-size: 12px; }
.set-comments .set-reply-arrow { font-size: 1.05em; }
.set-comments .msg:hover { background: none; box-shadow: none; }
.set-comments .msg .nick, .set-comments .msg .photo-icon, .set-comments .msg .set-cmt-attach { cursor: pointer; }
/* 카운트 요약 — 평소 표시, 펼치면 숨김(액션이 대체) */
.set-msg-counts { display: inline-flex; gap: 10px; margin-left: 8px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); vertical-align: middle; }
.set-cnt-score.pos { color: var(--blue); }
.set-cnt-score.neg { color: #ff6b6b; }
.set-cnt-reply { display: inline-flex; align-items: center; gap: 3px; }
.set-comments .msg.is-open .set-msg-counts { display: none; }
.set-msg-reply { margin-left: 16px; }   /* 대댓글은 ↳로 구분 (테두리 X) */
.set-reply-arrow { color: rgba(255,255,255,.4); }
/* set 댓글 사진 — index와 동일하게 작은 정사각형 썸네일(클릭 시 라이트박스로 크게). .msg .photo-icon 규칙 그대로 상속 */
.set-cmt-attach { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; padding: 6px 10px 6px 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; text-decoration: none; max-width: 260px; }
.set-cmt-attach:hover { border-color: rgba(41,194,242,.4); }
.set-cmt-attach-cover { width: 38px; height: 38px; flex: none; border-radius: 5px; background: #000 center/cover no-repeat; }
.set-cmt-attach-cover.is-empty { display: inline-flex; align-items: center; justify-content: center; }
.set-cmt-attach-cover.is-empty::after { content: "\266A"; color: rgba(255,255,255,.3); font-size: 18px; }
.set-cmt-attach-meta { min-width: 0; }
.set-cmt-attach-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.set-cmt-attach-sub { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }
/* 액션 — 평소 숨김, 댓글 클릭(.is-open) 시 노출 (index 감성) */
.set-msg-acts { display: none; gap: 14px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.set-comments .msg.is-open .set-msg-acts { display: flex; }
.set-msg-acts .reply-r-btn { font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.set-msg-time { font-family: "Galmuri9", var(--font-mono); font-size: 11px; color: rgba(255,255,255,.3); align-self: center; }   /* 댓글·대댓글 작성시각 */
.set-cmt-report { margin-left: auto; }   /* 신고는 우측 끝 */
.set-cmt-report.reported { color: #ff6b6b; }
/* 사진 라이트박스 */
.set-lightbox { position: fixed; inset: 0; z-index: 100050; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.set-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }
/* 통계 아이콘 정렬 + 댓글 SVG */
.pl-tp-stats span { display: inline-flex; align-items: center; gap: 3px; }
.set-stat-ic { width: 13px; height: 13px; flex: none; }
/* 크롬 아이콘 — 버튼 글자크기에 맞춰 스케일 (글리프/이모지 대체) */
.x-ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: none; }
/* 공용 원형 아이콘 버튼 (상단바 공유·편집·설정) — sets·profile·index 통일 */
.top-ico-btn, .idx-ico-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.4); color: rgba(255,255,255,.7); line-height: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.top-ico-btn:hover, .idx-ico-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); }
/* 알림 기능 잠시 비활성(테스트 채널 전용) — 회색 표시 */
.idx-ico-btn.ico-soon { opacity: .38; cursor: default; }
.idx-ico-btn.ico-soon:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.15); }
.idx-set-field.notif-disabled { opacity: .5; }
.notif-soon { color: rgba(255,255,255,.5); font-size: 12px; margin-top: 4px; }
#commBell.on { color: var(--blue, #29c2f2); border-color: var(--blue, #29c2f2); }
/* 알림 인박스 벨 배지 + 목록 */
.inbox-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 3px; background: #ff5b6e; color: #fff; font-family: "Galmuri9", var(--font-mono); font-size: 10px; font-weight: 400; line-height: 17px; text-align: center; box-sizing: border-box; pointer-events: none; box-shadow: 0 0 0 2px rgba(6,10,16,.9); -webkit-font-smoothing: none; }
#inboxModal .pg-box { max-width: 460px; width: min(92vw, 460px); border-color: rgba(41,194,242,.52); border-radius: 2px; background: rgba(4,8,10,.96); box-shadow: 0 0 0 1px rgba(41,194,242,.13), 0 18px 58px rgba(0,0,0,.68); font-family: "Galmuri9", var(--font-mono); }
#inboxModal .pg-title, #inboxModal .pg-close { font-family: "Galmuri9", var(--font-mono); font-weight: 400; -webkit-font-smoothing: none; }
#inboxBody { max-height: min(66vh, 560px); overflow-y: auto; scrollbar-color: rgba(41,194,242,.45) rgba(255,255,255,.04); }
.inbox-tools { display: flex; gap: 7px; margin: 0 0 12px; }
.inbox-tool-btn { flex: 1; min-height: 31px; padding: 8px 10px; border-radius: 3px; border: 1px solid rgba(41,194,242,.28); background: rgba(3,22,28,.65); color: rgba(218,246,255,.76); font-family: "Galmuri9", var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; -webkit-font-smoothing: none; }
.inbox-tool-btn:hover { border-color: rgba(41,194,242,.62); background: rgba(7,36,45,.86); color: #e8fbff; }
.inbox-tool-btn.danger:hover { border-color: rgba(255,91,110,.62); color: #ff9aa6; background: rgba(72,13,22,.46); }
.inbox-list { display: flex; flex-direction: column; gap: 7px; }
.inbox-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 11px 12px; border-radius: 4px; border: 1px solid rgba(41,194,242,.16); background: rgba(1,16,21,.58); overflow: hidden; cursor: pointer; transition: transform .16s ease, opacity .16s ease, background .14s ease, border-color .14s ease; }
.inbox-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--k, #29c2f2); opacity: .34; transition: opacity .14s; }
.inbox-item:hover, .inbox-item:focus-within, .inbox-item:focus-visible { transform: translateY(-1px); border-color: rgba(41,194,242,.55); background: rgba(4,30,38,.78); outline: none; }
.inbox-item.unread { background: rgba(2,34,43,.76); border-color: rgba(41,194,242,.48); box-shadow: inset 0 0 0 1px rgba(41,194,242,.08); }
.inbox-item.unread::before { opacity: 1; }
.inbox-item.removing { opacity: 0; transform: translateX(18px); }
.inbox-ico { flex: none; width: 31px; height: 31px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--k, #29c2f2); background: rgba(41,194,242,.12); box-shadow: inset 0 0 0 1px rgba(41,194,242,.14); }
.inbox-ico svg { width: 17px; height: 17px; display: block; }
.inbox-main { flex: 1; min-width: 0; display: block; text-decoration: none; color: inherit; }
.inbox-t { font-family: "Galmuri9", var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.48; color: rgba(232,251,255,.9); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: none; }
.inbox-b { font-family: "Galmuri9", var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.55; color: rgba(210,232,239,.68); margin-top: 3px; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: none; }
.inbox-time { font-family: "Galmuri9", var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.2; color: rgba(78,210,250,.62); margin-top: 6px; -webkit-font-smoothing: none; }
.inbox-del { flex: none; width: 26px; height: 26px; border-radius: 3px; border: 1px solid transparent; background: transparent; color: rgba(218,246,255,.32); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .14s ease, background .14s ease, color .14s ease, border-color .14s ease; }
.inbox-item:hover .inbox-del, .inbox-item:focus-within .inbox-del { opacity: 1; }
.inbox-del:hover { border-color: rgba(255,91,110,.42); background: rgba(255,91,110,.12); color: #ff9aa6; }
.inbox-del svg { width: 14px; height: 14px; }
.inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 42px 12px; color: rgba(210,232,239,.48); font-family: "Galmuri9", var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; text-align: center; -webkit-font-smoothing: none; }
.inbox-empty-ic { width: 40px; height: 40px; color: rgba(255,255,255,.22); }
.inbox-empty-ic svg { width: 40px; height: 40px; }
@media (hover: none) { .inbox-del { opacity: .62; } .inbox-item:hover { transform: none; } }
/* 원형 버튼 안 SVG — 인라인 vertical-align 오프셋 제거 + 고정크기(3페이지 동일) → 정중앙 */
.top-ico-btn .x-ic, .idx-ico-btn .x-ic, .pf-icon-btn .x-ic, .set-share-x .x-ic { width: 15px; height: 15px; display: block; vertical-align: 0; }

/* index 상단 우측 클러스터 (설정·공유·닉네임) — sets/profile과 통일 */
.idx-top-actions { display: inline-flex; align-items: center; gap: 8px; }
/* 나우플레잉 미니바가 뜨면 하단 바가 더 높아짐 → footer 여백 추가 확보 */
body.has-npbar .site-foot { padding-bottom: calc(184px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom, 0px)); }

/* index 설정 모달 — 언어 선택 + 액션 버튼 */
.idx-set-body { display: flex; flex-direction: column; gap: 16px; }
.idx-set-label { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 10px; }
/* 언어 알약 — profile 설정과 동일 */
.lang-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-choice { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 12px; cursor: pointer; -webkit-font-smoothing: none; }
.lang-choice:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.lang-choice.is-active { color: #04121a; background: var(--blue); border-color: var(--blue); font-weight: 700; }
.idx-hue-row { display: flex; align-items: center; gap: 10px; }
.idx-hue-row input[type=range] { flex: 1; accent-color: #7cc; }
.idx-hue-prev { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); flex: none; }
.idx-set-actions { display: flex; flex-direction: column; gap: 8px; }
.idx-set-btn { display: flex; align-items: center; gap: 9px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); font-family: "Galmuri9", var(--font-mono); font-size: 12px; padding: 11px 13px; border-radius: 8px; cursor: pointer; text-align: left; }
.idx-set-btn:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.idx-set-btn .x-ic { width: 16px; height: 16px; vertical-align: 0; flex: none; }
/* 설정 모달: 언어 5개를 한 줄에 균등 분할(스크롤 없이 폭을 나눠 채움) */
#settingsModal .pg-box { max-width: 400px; }
.idx-set-body .lang-choices { flex-wrap: nowrap; gap: 5px; }
.idx-set-body .lang-choice { flex: 1 1 0; min-width: 0; padding: 6px 2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 캐릭터 크리에이터가 index 설정에도 들어가므로 profile 인라인 클래스 공용화 */
.me-btn { font-family: "Galmuri9", var(--font-mono); font-size: 12px; background: none; border: none; cursor: pointer; color: var(--blue); padding: 0; white-space: nowrap; flex-shrink: 0; }
.me-btn:hover { color: #fff; }
.me-msg { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); margin-top: 8px; min-height: 14px; }
/* 옷 크리에이터 메시지(불러옴/저장됨/먼지찾기)만 — 빈 상태에도 한 줄 높이 확보 + 줄바꿈 금지 → 뜰 때 아래 UI 안 밀림 */
#ccMsg, #ccSlotMsg, #idxHueMsg { height: 18px; line-height: 18px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* 게스트: 옷 컨트롤 잠금(딤) — 클릭은 로그인 요청(JS). S 행은 예외(자물쇠 블링크). */
#charCreator.cc-guest .cc-row:not(#ccSRow), #charCreator.cc-guest .cc-tools, #charCreator.cc-guest #ccResetBtn, #charCreator.cc-guest .cc-slots { opacity: .4; }
#charCreator.cc-guest .cc-row:not(#ccSRow) .cc-color { pointer-events: none; }
/* S 잠금 = 파란 자물쇠가 깜빡여 누르고 싶게 */
.cc-arrow.cc-s-locked { color: var(--blue) !important; animation: sBlink 1.1s ease-in-out infinite; }
@keyframes sBlink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* S 잠금 안내(저장 메시지 자리) = 빨간 글씨 */
.cc-msg-warn { color: #ff6b6b !important; }
/* S 잠금 안내("먼지를 찾으세요") — S 잠금 버튼 텍스트 자체가 잠시 바뀜(.cc-msg-warn 빨강 재사용) */
/* Outfit 라벨 옆 "로그인 필요"(게스트) */
.cc-login-note { color: #ff8a8a; font-size: 11px; font-weight: 400; margin-left: 6px; }
/* 주사위 아이콘(이모지 대체) — 전체 랜덤 버튼 + 항목별 랜덤 */
.cc-rand-btn { display: inline-flex; align-items: center; gap: 5px; }
.cc-rand-btn .cc-dice { width: 15px; height: 15px; flex: none; }
.cc-rand .cc-dice { width: 14px; height: 14px; display: block; }
/* 설정 모달 내 owner-only/guest-only 토글이 실제로 숨도록(전역 .hidden 규칙이 없어서 안 먹던 것) */
#settingsModal .hidden { display: none !important; }
/* 상단바 우측 클러스터 (편집·공유·닉네임) */
.set-topbar-actions { display: inline-flex; align-items: center; gap: 8px; }
/* 공유/선택 오버레이 */
.set-share-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.set-share-menu { background: #161616; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px; min-width: 220px; max-width: 86vw; max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.set-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.set-share-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); text-align: left; flex: 1; }
.set-share-x { background: none; border: none; color: rgba(255,255,255,.5); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; flex: none; }
.set-share-x:hover { color: #fff; }
.set-share-opt { display: block; width: 100%; text-align: left; padding: 11px 12px; margin-bottom: 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: #fff; cursor: pointer; font-family: "Galmuri11", var(--font-mono); font-size: 16px; }   /* 픽셀폰트 정격(11→16px) 명시 — 상위 Galmuri9를 16px로 상속받아 획 깨지던 것 수정 */
.set-share-opt:hover { border-color: var(--blue); color: var(--blue); }
.set-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: rgba(0,0,0,.88); color: #fff; padding: 10px 16px; border-radius: 8px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; z-index: 10000; }
/* 공용 간단 set 생성 모달 (quickcreate.js) */
.qc-overlay { position: fixed; inset: 0; z-index: 100002; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.qc-card { width: 92%; max-width: 460px; background: #1c1c1c; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; }
.qc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.qc-title-h { font-size: 18px; color: #fff; font-weight: 700; }
.qc-x { border: 0; background: transparent; color: rgba(255,255,255,.6); font-size: 20px; line-height: 1; cursor: pointer; }
.qc-body { display: flex; gap: 16px; align-items: center; }
.qc-cover { width: 96px; height: 96px; border-radius: 18%; border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer; position: relative; overflow: hidden; padding: 0; flex: none; display: flex; align-items: center; justify-content: center; }
.qc-cover img { width: 100%; height: 100%; object-fit: cover; display: none; }
.qc-cover.has-img img { display: block; }
.qc-cover.has-img .qc-cover-plus { display: none; }
.qc-cover-plus { color: rgba(0,0,0,.3); font-size: 36px; line-height: 1; }
.qc-title-in { flex: 1; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; font-family: var(--font-mono); font-size: 16px; padding: 10px; }
.qc-title-in:focus { outline: none; border-color: var(--blue); }
.qc-save { margin-top: 16px; width: 100%; background: #fff; color: #000; border: none; border-radius: 999px; padding: 10px; font-weight: 700; font-size: 16px; cursor: pointer; }
.qc-save:disabled { opacity: .5; cursor: default; }
.qc-msg { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); min-height: 14px; margin-top: 8px; text-align: center; }
.set-edit-tracks { width: 100%; margin-top: 10px; }
.pl-tp-tinfo { min-width: 0; text-align: left; }
.pl-tp-tracks { text-align: left; }
.pl-tp-ttitle { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.88); overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.pl-tp-tartist { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.42); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.pl-tp-tadd {
  width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
  background: transparent; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1; cursor: pointer; flex: none;
}
.pl-tp-tadd:hover { border-color: var(--blue); color: var(--blue); }
.pl-tp-track { cursor: pointer; }
/* set 페이지 트랙: 편집기(.xplay-track)처럼 가로로 긴 알약 행. (index 댓글 패널은 촘촘 유지) */
.set-root .pl-tp-tracks { gap: 5px; }
.set-root .pl-tp-track { min-height: 42px; padding: 4px 12px; border-radius: 999px; }
.set-root .pl-tp-track:hover { background: rgba(255,255,255,.06); }

/* 댓글 set 패널에 이식된 플레이어 마운트 */
.pl-tp-player:empty { display: none; }
.pl-tp-player { margin-bottom: 14px; }
/* 패널 플레이어 placeholder (커버 + ▶) — 재생 시 #xplay 이식되면 숨김 */
.pl-tp-ph { width: 100%; max-width: 360px; height: 200px; margin: 0 auto; display: grid; place-items: center; border: 1px solid rgba(41,194,242,.38); border-radius: 4px; background: #000 center/cover no-repeat; cursor: pointer; padding: 0; }
.pl-tp-ph.is-empty { background: rgba(255,255,255,.04); }
.pl-tp-ph-play { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.5); color: #fff; display: grid; place-items: center; font-size: 16px; padding-left: 2px; }
.pl-tp-player.has-player .pl-tp-ph { display: none; }
/* Spotify embed 프리뷰 재생바 — 엔진 컨트롤바(.xplay-controls) 클래스 그대로 상속. 단일곡이라 여백만 살짝 조정. */
.sp-embed-controls { padding: 8px 0 2px !important; margin-top: 4px !important; }
/* #xplay 엔진은 기본 숨김. 패널 감상(.xplay-listening) 또는 편집(.xplay-editing) 때만 표시 */
#xplay { display: none; }
#xplay.xplay-listening { display: block; }
/* 전용 편집기 — set 페이지처럼 보이는 중앙정렬 레이아웃 (오버레이 한정, 인라인 플레이어엔 영향 없음) */
#xplay.xplay-editing { display: flex; flex-direction: column; align-items: center; gap: 12px; position: fixed; inset: 0; margin: 0; width: 100vw; max-width: none; z-index: 99990; overflow-y: auto; overscroll-behavior: contain; background: #0a0a0a; padding: 56px 14px 72px; }
#xplay.xplay-editing > * { width: 100%; max-width: var(--surface-w); }
#xplay.xplay-editing .xplay-head { order: 7; justify-content: center; opacity: .6; min-height: 14px; }   /* 상태 피드백(paused/saved 등) */
/* 헤더: by 닉네임 + 통계 덩어리 (set 페이지와 통일) */
#xplay.xplay-editing .xplay-by { order: 2; text-align: center; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: var(--blue); }
#xplay.xplay-editing .xplay-stats { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }
#xplay.xplay-editing .xplay-stats span { display: inline-flex; align-items: center; gap: 3px; }
.xplay-by, .xplay-stats { display: none; }
#xplay.xplay-editing .xplay-by { display: block; }
#xplay.xplay-editing .xplay-stats { display: flex; }
#xplay.xplay-editing .xplay-editbar { order: 1; flex-direction: column; align-items: center; gap: 10px; }
#xplay.xplay-editing .xplay-titlebox { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
/* 커버 = 앨범아트 (클릭하면 사진 변경) */
#xplay.xplay-editing .xplay-cover-btn { width: 132px; height: 132px; border-radius: 14px; font-size: 46px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 34px rgba(0,0,0,.5); position: relative; background-color: #fff; background-size: cover; background-position: center; color: rgba(0,0,0,.3); }   /* .xplay-editbar button(검정+파랑)를 덮어 흰배경+회색♪ */
#xplay.xplay-editing .xplay-cover-btn::after { content: "\270E"; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.66); color: #fff; font-family: "Galmuri9", var(--font-mono); font-size: 12px; display: grid; place-items: center; }
/* 제목 = 클릭하면 그 자리에서 편집 */
#xplay.xplay-editing .xplay-name-input { text-align: center; font-size: 17px; font-weight: 600; color: #fff; height: auto; padding: 4px 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.18); max-width: 380px; border-radius: 6px; }   /* 테두리 상시 표시(클릭 전에도 입력칸임을 알게) */
#xplay.xplay-editing .xplay-name-input::placeholder { color: rgba(255,255,255,.32); font-weight: 400; }
#xplay.xplay-editing .xplay-name-input:hover { border-color: rgba(255,255,255,.36); }
#xplay.xplay-editing .xplay-name-input:focus { border-color: rgba(41,194,242,.5); background: rgba(0,0,0,.3); }
/* 설명 = 클릭하면 편집 (테두리 상시 표시) */
#xplay.xplay-editing .xplay-desc-input { order: 4; text-align: center; max-width: 440px; margin: 0 auto; border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.18); color: rgba(255,255,255,.6); border-radius: 6px; }
#xplay.xplay-editing .xplay-desc-input:hover { border-color: rgba(255,255,255,.36); }
#xplay.xplay-editing .xplay-desc-input:focus { border-color: rgba(41,194,242,.5); background: rgba(0,0,0,.3); }
#xplay.xplay-editing .xplay-player { order: 6; }
#xplay.xplay-editing .xplay-hint { order: 6; }
#xplay.xplay-editing .xplay-editpanel { order: 8; }
#xplay.xplay-editing .xplay-list { order: 9; }
/* 트랙 행 간격 좁게 — ⋮ 핸들을 콘텐츠에 붙이고 행 높이 축소 */
#xplay.xplay-editing .xplay-track { grid-template-columns: 16px 30px 1fr auto auto auto; gap: 6px; min-height: 36px; padding: 2px 4px; }   /* 돋보기 열 제거 — 곡별 자동찾기는 검색창 좌측으로 이동 */
#xplay.xplay-editing .xplay-drag { font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
/* 플레이어임을 보여주는 ♪ (재생 전·아무것도 안 뜬 상태) */
.xplay-idle { color: rgba(255,255,255,.16); font-size: 46px; line-height: 1; }   /* 플레이어 idle 음표(♪) — 회색, 파란색 아님 */
/* 우상단 [Cancel] [Save] — 통일된 알약 한 쌍 */
/* Save+Cancel 묶음: 평소엔 display:contents(래퍼 없는 듯 = 인라인 편집모드 그대로), 오버레이 편집기에선 우상단 고정 flex로 → 언어 길이 달라도 겹치지 않음 */
.xplay-topbtns { display: contents; }
#xplay.xplay-editing .xplay-topbtns { display: flex; position: fixed; top: 12px; right: 14px; z-index: 502; gap: 8px; }
#xplay.xplay-editing #xplaySave { box-sizing: border-box; min-width: 64px; height: 34px; padding: 0 16px; white-space: nowrap; border-radius: 999px; background: var(--blue); color: #07121a; border: 1px solid var(--blue); font-weight: 700; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
#xplay.xplay-editing #xplayCancel { box-sizing: border-box; min-width: 64px; height: 34px; padding: 0 16px; white-space: nowrap; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.22); font-weight: 700; font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer; }
#xplay:not(.xplay-editing) #xplayCancel { display: none; }   /* Cancel은 전용 편집기에서만 */
/* 공개설정 세그먼트 (Public / Link / Private) */
/* visibility = me 페이지와 동일한 .vis-seg (글자 또렷) */
.vis-seg { display: flex; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; }
.vis-seg-btn { flex: 1; min-width: 0; white-space: nowrap; background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-family: "Galmuri9", var(--font-mono); font-size: 12px; padding: 7px 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.vis-seg-btn:last-child { border-right: 0; }
.vis-seg-btn.is-on { background: var(--blue); color: #001018; font-weight: 700; }
#xplayVis { display: none; }
#xplay.xplay-editing #xplayVis { order: 5; display: flex; flex: 0 0 auto; min-height: 34px; width: 100%; max-width: 340px; margin: 0 auto; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; }   /* flex:none+min-height — 편집기(fixed 100vh column flex)에서 콘텐츠가 길면 overflow:hidden 아이템은 0으로 짜부되던 것 방지 */
/* 편집기 공개설정 버튼 — 명시 스타일(profile.html 인라인 .vis-seg-btn 축소본을 특이도로 제압, 글자 또렷하게) */
#xplay.xplay-editing #xplayVis .vis-seg-btn {
  flex: 1 1 0; min-width: 0; box-sizing: border-box;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 32px !important; padding: 0 6px !important;
  border: 0 !important; border-right: 1px solid rgba(255,255,255,.12) !important; background: transparent !important;
  font-family: "Galmuri9", var(--font-mono) !important; font-size: 12px !important; line-height: 1.4 !important;
  white-space: nowrap !important; color: rgba(255,255,255,.78) !important; cursor: pointer !important;
}
#xplay.xplay-editing #xplayVis .vis-seg-btn:last-child { border-right: 0 !important; }
#xplay.xplay-editing #xplayVis .vis-seg-btn.is-on { background: var(--blue) !important; color: #001018 !important; font-weight: 700 !important; }
/* 미리보기 행: add track / X 들어갈 자리 확보 (오버레이 전용) */
/* 미리보기 행: [before/after 라벨][커버][제목·아티스트][플랫폼로고][+] */
#xplay.xplay-editing .xplay-preview-row { grid-template-columns: auto 28px 1fr auto auto auto; }
/* + = 다른 플랫폼 추가 (플랫폼로고 우측 끝, 작은 파란 사각) */
#xplay.xplay-editing #xplayAddPlat { all: unset; order: 4; width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid rgba(41,194,242,.55); border-radius: 4px; color: var(--blue); font-size: 15px; cursor: pointer; justify-self: end; }
#xplay.xplay-editing #xplayAddPlat:hover { border-color: var(--blue); color: #fff; }
#xplay:not(.xplay-editing) #xplayAddPlat { display: none; }   /* 인라인 플레이어엔 미표시(레이아웃 보호) */
#xplay.xplay-editing .xplay-preview-row .xplay-now { display: none; }
/* before/after 라벨 — 좌측, 플랫폼 추가(merge) 시에만 보임. 12px = Galmuri 정격(9px는 획 사라짐) */
#xplay.xplay-editing .xplay-add-label { font-size: 12px; color: var(--blue); text-align: center; min-width: 0; }
/* before/after 라벨 고정폭 → 두 행(및 인접)의 커버·제목·로고가 어긋나지 않게. 56px = "después" 등 긴 번역 수용 */
#xplay.xplay-editing .xplay-add-label.is-visible { width: 56px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#xplay.xplay-editing .xplay-add-name { text-align: left; }
/* add track = 파란 알약, X = 파란(다른 회색/빨강 X와 다름) */
/* 'add track'(미리보기 enter)만 파란 알약 — 트랙 행의 + 버튼(.xplay-alt)은 건드리지 않음 */
/* 검색바·취소·플랫폼추가 = 전부 같은 높이 32px (제각각이라 밀려 보이던 것 통일) */
#xplay.xplay-editing .xplay-inputrow input { height: 32px; box-sizing: border-box; }
#xplay.xplay-editing #xplayEnter { all: unset; box-sizing: border-box; height: 32px; margin-left: -7px; display: inline-flex; align-items: center; background: var(--blue); color: #001018; font-family: "Galmuri9", var(--font-mono); font-size: 12px; padding: 0 14px; cursor: pointer; white-space: nowrap; flex: none; }   /* 검색바에 융합 — [검색][취소][플랫폼 추가] 한 덩어리 */
#xplay.xplay-editing #xplayEnter:hover { filter: brightness(1.1); }
#xplay.xplay-editing #xplayEnter:disabled { opacity: .4; cursor: not-allowed; }
/* 취소 = 검색바에 융합(한 덩어리) — 편집기 저장/취소와 헷갈리지 않게 '이 검색만의 취소'로 보이게 */
#xplay.xplay-editing #xplayReject { all: unset; box-sizing: border-box; height: 32px; margin-left: -7px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(41,194,242,.26); border-left: 0; background: rgba(41,194,242,.10); color: rgba(255,255,255,.78); font-family: "Galmuri9", var(--font-mono); font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap; flex: none; text-align: center; }
#xplay.xplay-editing #xplayReject:hover { background: rgba(41,194,242,.2); color: #fff; }
#xplay.xplay-editing #xplaySearchBtn { all: unset; box-sizing: border-box; height: 32px; margin-left: -7px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(41,194,242,.26); border-left: 0; background: rgba(41,194,242,.10); color: rgba(255,255,255,.82); font-family: "Galmuri9", var(--font-mono); font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap; flex: none; text-align: center; }   /* [검색] — 취소·곡추가와 한 덩어리로 융합 */
#xplay.xplay-editing #xplaySearchBtn:hover { background: rgba(41,194,242,.2); color: #fff; }
/* 아무것도 입력 안 했을 땐 검색창만 — add track/cancel 숨김(공간은 차지해 검색창 위치 고정) */
#xplay.xplay-editing .xplay-inputrow:not(.has-input) #xplayEnter,
#xplay.xplay-editing .xplay-inputrow:not(.has-input) #xplayReject,
#xplay.xplay-editing .xplay-inputrow:not(.has-input) #xplaySearchBtn { visibility: hidden; }
/* 검색 결과 비활성(Apple) */
.xplay-sr-ext.is-disabled { opacity: .4; cursor: default; }
.xplay-sr-ext.is-disabled img { filter: grayscale(1); }
/* 편집 모드 부트: 편집기 준비 전까지 인덱스 본문(벽) 숨김 — 깜빡임 방지 */
html.ed-boot { background: #0a0a0a; }
html.ed-boot body { visibility: hidden; }
/* 풀 편집기 글로벌 오버레이 (me/set에서 iframe으로 index 편집기를 띄움) */
.ed-overlay { position: fixed; inset: 0; z-index: 100003; background: #0a0a0a; }
.ed-frame { width: 100%; height: 100%; border: 0; display: block; }
.ed-close { position: fixed; top: 10px; right: 12px; z-index: 100004; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; }
.xplay-close { position: fixed; top: 12px; right: 14px; z-index: 501; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; }
/* 감상 모드: 편집 UI 숨기고 화면+컨트롤만 */
.xplay-listening { padding: 0 !important; margin: 0 auto !important; border: 0 !important; background: transparent !important; }   /* 좌우 auto 유지 — 패널에서 중앙정렬(데스크톱 좌측 쏠림 수정). margin:0이 !important로 auto를 죽이던 게 범인 */
.xplay-listening .xplay-head,
.xplay-listening .xplay-connect,
.xplay-listening .xplay-hint,
.xplay-listening .xplay-editbar,
.xplay-listening .xplay-editpanel,
.xplay-listening #xplayList { display: none !important; }
.xplay-addset {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 5px; margin-left: 4px;
  border: 1px solid rgba(41,194,242,.45); border-radius: 4px; background: transparent;
  color: rgba(41,194,242,.85); cursor: pointer; flex: none;
}
.xplay-addset:hover { background: rgba(41,194,242,.15); }

/* Top sets — 인기 세트 랭킹 (index) */
.topsets { width: 100%; max-width: 720px; align-self: stretch; margin: 30px auto 0; padding: 0 14px; box-sizing: border-box; }
.topsets-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.65); text-transform: uppercase; margin: 0 0 12px; text-align: center; }   /* ups 헤더와 동일하게 중앙 */
.topsets-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.topset-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 6px; cursor: pointer; }
.topset-row:hover { background: rgba(255,255,255,.05); }
.topset-rank { width: 20px; flex: none; text-align: center; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(41,194,242,.85); }
.topset-cover { width: 40px; height: 40px; flex: none; border-radius: 5px; background: #000 center/cover no-repeat; }
.topset-cover.is-empty { display: flex; align-items: center; justify-content: center; background: #fff; }
.topset-cover.is-empty::after { content: "\266A"; color: rgba(0,0,0,.32); font-size: 18px; }
.topset-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.topset-title { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.topset-sub { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; white-space: nowrap; }
.topset-sub .set-stat-ic { width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; }   /* 곡수 앞 음표 */
.topset-plays { flex: none; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); }
.topset-plats { flex: 0 0 76px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; pointer-events: none; }   /* 플리 곡들의 플랫폼 로고 — 재생수 오른쪽. 최대 4개 자리 고정폭(16×4+간격 4×3=76px) → 개수 달라도 정렬·재생수 위치 유지, UI 안 흔들림. 클릭은 행 전체(세트로 이동) */
.topset-plogo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex: none; }
/* 플리 베스트 등재 뱃지 (index Top sets · set 헤더) */
.best-chip { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #1a1400; background: linear-gradient(180deg,#ffe07a,#f5b731); padding: 1px 5px; border-radius: 6px; vertical-align: middle; box-shadow: 0 1px 3px rgba(245,183,49,.4); white-space: nowrap; }

/* ── 커스텀 확인 대화상자 (시스템 confirm 대체) ── */
.ui-confirm-overlay {
  position: fixed; inset: 0; z-index: 100001;   /* 편집기(99990)·import 모달(4000)보다 위 — 확인창은 항상 최상위 */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); padding: 20px;
  opacity: 0; transition: opacity .12s ease;
}
.ui-confirm-overlay.show { opacity: 1; }
.ui-confirm-box {
  width: 100%; max-width: 360px;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding: 20px 20px 14px; box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.ui-confirm-msg {
  color: #fff; font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 18px;
}
.ui-confirm-acts { display: flex; gap: 8px; justify-content: flex-end; }
.ui-confirm-btn {
  border: none; border-radius: 999px; padding: 8px 18px;
  font-family: "Galmuri9", var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer;
}
.ui-confirm-cancel { background: rgba(255,255,255,.12); color: #fff; }
.ui-confirm-cancel:hover { background: rgba(255,255,255,.2); }
.ui-confirm-ok { background: #fff; color: #000; }
.ui-confirm-ok:hover { background: #e6e6e6; }
.ui-confirm-ok.is-danger { background: #e0245e; color: #fff; }
.ui-confirm-ok.is-danger:hover { background: #c01e4f; }

/* 벽 댓글 더 보기 (클라 페이지네이션) */
.wall-load-more {
  display: block; margin: 12px auto 8px; padding: 5px 14px;   /* 컴팩트 — 좌우·상단 여백 축소(유저 요청) */
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.16); border-radius: 0;   /* 네모(둥근모서리 없음) */
  font-family: "Galmuri9", var(--font-mono); font-size: 12px; cursor: pointer;
}
.wall-load-more:hover { background: rgba(255,255,255,.16); color: #fff; }

/* 대댓글 첨부 플리 패널 (카드 클릭 시 펼침) */
.reply-pl-group { display: block; margin: 2px 0 10px; }
/* 임시 링크 플리 커버 = ♪ (일반 커버와 같은 자리) */
.pl-cover-note { display: inline-grid; place-items: center; color: #8cf; font-size: 15px; }
.pl-tp-cover.pl-cover-note { font-size: 22px; }
.pl-tp-tcover.is-empty { display: inline-grid; place-items: center; color: #8cf; font-family: "Galmuri9", var(--font-mono); font-size: 12px; }

/* 댓글 음악 링크 → 임시 1곡 플레이어 (실제 플리 아님) */
.link-pl-group { display: block; position: relative; margin: 4px 0 12px; }
.link-pl-close { position: absolute; top: -2px; right: 2px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(41,194,242,.38); background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.link-pl-close:hover { background: rgba(0,0,0,.8); }
/* 재생 가능한 음악 링크 칩은 살짝 강조(눌러서 재생) */
.msg .body .link-chip.link-playable { color: var(--blue); }

/* 캐릭터 꾸미기 (me 설정) */
.cc-wrap { display: flex; gap: 14px; align-items: center; }
.cc-preview { width: 64px; height: 120px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.04); border-radius: 8px; flex: none; }
.cc-controls { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.cc-cat { width: 46px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #9aa; flex: none; }
.cc-arrow { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: var(--text); background: rgba(255, 255, 255, 0.06); touch-action: manipulation; }
.cc-arrow:hover { background: rgba(255, 255, 255, 0.14); }
.cc-arrow:active { transform: scale(0.85); }
.cc-rand { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; font-family: "Galmuri9", var(--font-mono); font-size: 12px; line-height: 1; background: rgba(255, 255, 255, 0.06); flex: none; touch-action: manipulation; }
.cc-rand:hover { background: rgba(255, 255, 255, 0.14); }
.cc-rand:active { transform: scale(0.85) rotate(25deg); }
.cc-val { flex: 1; min-width: 0; text-align: center; font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: var(--text); }
.cc-val.cc-pop { animation: ccPop 0.18s ease; }
@keyframes ccPop { 0% { transform: translateY(3px); opacity: 0.3; } 100% { transform: translateY(0); opacity: 1; } }
.cc-color { width: 30px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px; background: none; cursor: pointer; padding: 0; flex: none; }
.cc-color::-webkit-color-swatch-wrapper { padding: 2px; }
.cc-color::-webkit-color-swatch { border: none; border-radius: 3px; }
.cc-range { flex: 1; min-width: 0; height: 22px; cursor: pointer; accent-color: #6fd6e6; touch-action: manipulation; }
.cc-val { font-family: "Galmuri9", var(--font-mono); font-size: 12px; }
.cc-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cc-rand-btn { flex: none; }
.cc-slots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cc-slots-lbl { font-family: "Galmuri9", var(--font-mono); font-size: 12px; color: #9aa; margin-right: 2px; }
.cc-slot { all: unset; cursor: pointer; position: relative; width: 30px; height: 52px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); touch-action: manipulation; user-select: none; overflow: hidden; }
.cc-slot:hover { border-color: rgba(255, 255, 255, 0.32); }
.cc-slot:active { transform: scale(0.94); }
.cc-slot-cv { width: 26px; height: 48px; image-rendering: pixelated; display: block; }
.cc-slot-plus { position: absolute; color: rgba(255,255,255,.3); font-size: 16px; font-family: "Galmuri9", var(--font-mono); pointer-events: none; }
.cc-slot.filled .cc-slot-plus { display: none; }   /* 저장된 슬롯 = 썸네일만 */
.cc-slot.is-active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }   /* 편집 중 슬롯 */
.cc-slot-save { flex: none; margin-left: 4px; align-self: center; }


/* ── 모바일 전방위 축소 — 변수 하나(--fs-comment)로 벽·ups·파생요소가 함께 축소.
   픽셀폰트는 G9@12px(정격 하한). 버튼·아이콘·커버도 텍스트 비율에 맞춰 조정. ── */
@media (max-width: 520px) {
  :root {
    --fs-comment: 12px;   /* 벽·ups 본문/닉 + em 파생(신고·카운트·화살표) 전부 12px로 */
    --tap: 28px;          /* 하단 플로팅 버튼 살짝 축소(터치 하한 유지) */
  }
  .wall { font-family: "Galmuri9", var(--font-body); }   /* 12px은 비례형 G9가 선명 */
  .composer { display: block; margin-right: 0; margin-bottom: 8px; }   /* 모바일: 입력창이 한 줄 차지 → 첫 댓글이 다음 행에서 시작(가로 자리 부족 해소·정렬 어긋남 방지) */
  .best-row { font-family: "Galmuri9", var(--font-body); padding: 0 12px; }
  .best-row-text, .best-row .nick { font-family: "Galmuri9", var(--font-body); }
  .sk-row { height: 21px; padding: 0 12px; }
  .best-section-header { font-size: 12px; }
  .composer-send { font-size: 15px; }         /* ↵ 살짝 축소 */
  .topset-cover { width: 32px; height: 32px; }
  .topset-row { gap: 10px; padding: 6px 4px; }
  .topset-title, .topset-sub, .topset-plays, .topset-rank { font-size: 11px; }
  .topset-plats { flex-basis: 65px; gap: 3px; }   /* 14×4+3×3=65px */
  .topset-plogo { width: 14px; height: 14px; }
  .pl-tp-cover, .pl-picker-cover, .pl-picker-newcover { width: 44px; height: 44px; }
  .pl-picker-item { column-gap: 14px; padding: 8px 11px; }
  .set-stat-ic { width: 12px; height: 12px; }
  /* 콘텐츠 제목 모바일 상한 (엔진·플리·모달·set 공통 — 전 페이지 공유 스타일시트) */
  .pl-tp-title, .set-sp-title, .xplay-sdk-title, .ui-confirm-msg, .pl-tp-cover.is-empty::after { font-size: 14px; }
  .pl-tp-cover.is-empty::after { font-size: 30px; }
  .qc-title-h { font-size: 16px; }
  .pl-tp-close { font-size: 16px; }
  .set-comments .set-msg-counts, .prof-comment-meta { font-size: 11px; }
  /* 개인정보 모달 본문 모바일 축소 (16→14px, Galmuri11 정격) */
  #privacyModal .pg-body p, #privacyModal .pg-body li { font-size: 14px; line-height: 1.9; }
  #privacyModal .pg-body h1 { font-size: 16px; }
  #privacyModal .pg-body h2 { font-size: 14px; }
}

/* ── 비한국어(中/日/ES) 폰트 — 핵심: 한글·라틴·숫자·기호는 Galmuri(픽셀) 그대로, "CJK 글자만" 정품 폰트로.
   unicode-range로 Galmuri를 한글+라틴+기호에만 적용하는 파생 패밀리(GalmuriI18n)를 만들어 스택 맨 앞에 둠 →
   중국어/일본어 한자·가나는 Galmuri에 매칭 안 돼 다음 폰트(PingFang/Hiragino)로 폴백. 브라우저 표준 폴백 방식. ── */
@font-face {
  font-family: "GalmuriI18n";
  font-style: normal; font-weight: 400; font-display: block;
  src: local('Galmuri11 Regular'),
       url('/fonts/Galmuri11.woff2') format('woff2');
  /* 라틴(악센트 포함)·한글자모/음절·일반문장부호·화살표·기호(♪♡★✓✦)만. CJK 한자(U+4E00~)·CJK부호(U+3000~)·전각(U+FF00~)은 제외 → 폴백 */
  unicode-range: U+0000-00FF, U+1100-11FF, U+2000-206F, U+2190-21FF, U+2460-24FF, U+2600-27BF, U+3130-318F, U+AC00-D7A3;
}
/* 언어별 CJK 폰트 = --font-body/--font-mono 변수 재정의로 적용(전역 * !important 클로버 제거).
   → var(--font-body/mono)를 쓰는 요소는 지역 CJK 폰트를 받고, Galmuri9/GalmuriMono11 같은
   요소별 픽셀폰트는 언어 무관하게 그대로 유지. 예전엔 * !important가 카운트·소형 라벨의
   Galmuri9(12px 또렷)까지 GalmuriI18n(Galmuri11)로 덮어써 중/일/스페인 모드에서만
   글자 높낮이·또렷함이 달라 보였음(중앙정렬 어긋남) → 해결. 픽셀폰트는 자간 금지라 CJK 자간만 초기화. */
html[lang="zh"] *:not(svg):not(path),
html[lang="ja"] *:not(svg):not(path),
html[lang="es"] *:not(svg):not(path) { letter-spacing: normal !important; }
html[lang="zh"] {
  --font-body: "GalmuriI18n", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  --font-mono: "GalmuriMono11", "GalmuriI18n", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", monospace;
}
html[lang="ja"] {
  --font-body: "GalmuriI18n", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", "Source Han Sans JP", sans-serif;
  --font-mono: "GalmuriMono11", "GalmuriI18n", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", monospace;
}
html[lang="es"] {
  --font-body: "GalmuriI18n", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "GalmuriMono11", "GalmuriI18n", system-ui, -apple-system, "Segoe UI", Roboto, monospace;
}
/* 시계·카운트다운·로고·kicker(카운트다운 라벨)는 어느 언어든 대표폰트 Galmuri 유지(픽셀 미학, 위 규칙보다 특이도 높아 이김) */
html[lang="zh"] .clock, html[lang="zh"] .clock *, html[lang="zh"] .logo, html[lang="zh"] .kicker,
html[lang="ja"] .clock, html[lang="ja"] .clock *, html[lang="ja"] .logo, html[lang="ja"] .kicker,
html[lang="es"] .clock, html[lang="es"] .clock *, html[lang="es"] .logo, html[lang="es"] .kicker {
  font-family: "GalmuriMono11", "Galmuri11", monospace !important;
}

/* ── 중국어·일본어 한자는 픽셀폰트(Galmuri)가 획을 뭉개 읽기 어려움 → 시스템 CJK 폰트로 대체(가독성 우선, 픽셀 감성보다 읽힘 우선) ── */
html[lang="zh"] :is(body, button, input, textarea, select, span, div, p, a, h1, h2, h3, h4, label, li, strong, b, em),
html[lang="ja"] :is(body, button, input, textarea, select, span, div, p, a, h1, h2, h3, h4, label, li, strong, b, em) {
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans CJK JP", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}