:root {
  --bg: #0b1220;
  --surface: #131c2e;
  --surface-2: #1b2740;
  --line: #263450;
  --text: #e8edf6;
  --text-dim: #93a1bd;
  --muted: #93a1bd;
  --accent: #4f8cff;
  --accent-2: #8b5cf6;
  --badge: #ff3b30;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --appbar-h: 52px;
  --tabbar-h: 50px;
}
/* 주간(라이트) 테마 — 변수 오버라이드. 1차: 색상 변수를 쓰는 대부분이 밝게 전환.
   (하드코딩 색이 남은 일부 요소는 후속으로 다듬음) */
:root[data-theme="light"] {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #eaeef4;
  --line: #d5dbe6;
  --text: #1b2436;
  --text-dim: #5b6880;
  --muted: #6b7688;
  --accent: #2f6dc0;
  --accent-2: #7c4dd6;
  --badge: #ff3b30;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
/* 주간: 하드코딩 다크로 남는 큰 표면들(상단바·하단탭바·PC배경·다크 오버레이)을 밝게 오버라이드(다크는 불변) */
:root[data-theme="light"] .appbar { background: rgba(255,255,255,0.9); }
:root[data-theme="light"] .tabbar { background: rgba(255,255,255,0.94); }
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .msg-menu .mm-item:hover,
:root[data-theme="light"] .msg-menu .mm-item:active { background: rgba(0,0,0,.06); }
.bm-list { padding: 10px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bm-empty { color: var(--text-dim); text-align: center; padding: 30px 10px; font-size: 14px; line-height: 1.6; }
.bm-item { display: flex; align-items: flex-start; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.bm-item:active { border-color: var(--accent); }
.bm-body { flex: 1; min-width: 0; }
.bm-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }
.bm-meta .bm-chan { color: var(--accent); font-weight: 700; }
.bm-text { font-size: 14px; color: var(--text); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bm-del { flex: 0 0 auto; background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 2px 4px; }
.more-menu { position: absolute; right: 6px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 6px); z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px; min-width: 148px; }
.more-item { background: none; border: none; color: var(--text); text-align: left; padding: 11px 14px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.more-item:hover, .more-item:active { background: var(--surface-2); }
.tabbar .tab-label { white-space: nowrap; }
.feed-open-btn { display: block; width: calc(100% - 20px); margin: 8px 10px 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; }
.feed-open-btn:active { border-color: var(--accent); }
#view-feed[data-active="true"] { display: flex; flex-direction: column; overflow: hidden; }
.feed-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); flex: 0 0 auto; -webkit-overflow-scrolling: touch; }
.feed-chip { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim); font-size: 13px; white-space: nowrap; cursor: pointer; }
.feed-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.feed-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.feed-card { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.feed-card:active { border-color: var(--accent); }
.feed-card-body { flex: 1; min-width: 0; }
.feed-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.feed-chan { color: var(--accent); font-weight: 700; }
.feed-text { font-size: 14.5px; color: var(--text); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: pre-wrap; word-break: break-word; }
.feed-reply { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.feed-thumb { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.feed-more { margin: 8px auto; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 14px; cursor: pointer; }
.app-ver.has-update { color: var(--accent); font-weight: 800; }
.pc-vid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 13px; line-height: 30px; text-align: center; pointer-events: none; }
.pf-theme-seg { display: flex; gap: 8px; margin-top: 6px; }
.pf-theme-opt { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 14px; cursor: pointer; }
.pf-theme-opt.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 더블탭 확대(페이지 줌으로 레이아웃 깨짐)를 전 화면에서 방지 — 탭 기반 UI.
   touch-action은 상속되지 않으므로 모든 요소(*)에 적용해야 화면 어디를 더블탭해도 확대되지 않는다.
   스크롤(pan)·핀치줌은 유지되어 라이트박스 사진 확대는 계속 동작.
   지도(Leaflet)·드래그 핸들 등은 각자 규칙(none/pan-y)이 더 높은 우선순위로 유지된다. */
* { touch-action: manipulation; }
.leaflet-container, .leaflet-container * { touch-action: none; }   /* 지도는 Leaflet 자체 제스처 */
html, body { margin: 0; height: 100%; }

/* hidden 속성은 항상 display:none 로 강제(.login-screen/.modal-backdrop 의
   display:grid 가 hidden 을 덮어써서 화면이 안 사라지던 버그 방지) */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", Roboto, sans-serif;
  overflow: hidden;
}

/* 앱을 "키보드 위 실제 보이는 영역(VisualViewport)"에 맞춰 고정 → 키보드가 떠도
   앱바·방헤더는 위에 고정되고 메시지 영역만 줄어든다(JS가 height/top 갱신). */
.app { position: fixed; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; }

/* ===== 스크롤바 다듬기 (v122) — 데스크톱 기본 스크롤바가 투박해서 얇고 은은하게 =====
   세로 스크롤 영역: 가느다란 라운드 바(호버 시 살짝 진해짐).
   가로 스트립(Top5·인물칩 등): 바 숨김(휠·트랙패드로 스크롤). */
* { scrollbar-width: thin; scrollbar-color: rgba(148,161,189,.32) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148,161,189,.28);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148,161,189,.52); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* 짧은 가로 스트립은 스크롤바 자체를 숨겨 깔끔하게 */
.top-activity, .cs-grid, .sm-grid, .dd-strip, .lbi-persons { scrollbar-width: none; }
.top-activity::-webkit-scrollbar,
.cs-grid::-webkit-scrollbar,
.sm-grid::-webkit-scrollbar,
.dd-strip::-webkit-scrollbar,
.lbi-persons::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===== 앱바 ===== */
.appbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(var(--appbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 16px; padding-right: 12px;
  background: rgba(11,18,32,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.appbar-title { font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }
.icon-btn {
  position: relative; background: none; border: none; color: var(--text);
  font-size: 20px; padding: 8px; border-radius: 12px; cursor: pointer;
  min-width: 44px; min-height: 44px;   /* 접근성: 최소 터치 영역 */
}
.icon-btn:active { background: var(--surface-2); }
.dot-badge {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  background: var(--badge); border-radius: 50%; border: 2px solid var(--bg);
}

/* ===== 뷰 공통 ===== */
.view {
  position: absolute; inset: 0;
  top: calc(var(--appbar-h) + var(--safe-top));
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: none;
}
.view[data-active="true"] { display: block; }

/* ===== 구성원(갤러리 탭) ===== */
.roster-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
/* 인물 상세: 스크롤해도 누구인지 보이게 인물명 헤더 고정 */
#view-people .roster-head { position: sticky; top: 0; z-index: 8; background: var(--bg); }
.pr-bday { font-size: 12px; color: var(--text-dim); }
.pr-bday a { text-decoration: none; }
.roster-title { font-size: 17px; font-weight: 800; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-count { font-size: 12.5px; color: var(--text-dim); margin-left: 2px; flex: 1; }
.gal-win-sel { flex: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 26px 6px 10px; font-size: 13px; font-weight: 700; outline: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a1bd' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.gal-win-sel:focus { border-color: var(--accent); }
.people-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 14px 10px; }
.people-tools input { flex: 1; min-width: 120px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 9px 12px; font-size: 14px; outline: none; }
.people-tools input:focus { border-color: var(--accent); }
.p-sort { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 9px 10px; font-size: 13px; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.p-sort:focus { border-color: var(--accent); }
.cat-chips { display: flex; gap: 6px; }
.chip { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); border-radius: 14px; padding: 8px 13px; font-size: 12.5px; cursor: pointer; }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gallery-back { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; padding: 8px 12px; border-radius: 14px; white-space: nowrap; }
.gallery-back:active { background: var(--line); }
.p-face { width: 72px; height: 72px; border-radius: 22px; overflow: hidden; background: var(--surface-2); }
.p-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 6px 10px; }
/* 갤러리 월 구분선(YYYY-MM) — 3열 전체 폭 차지 */
.ph-month { grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; margin: 6px 0 2px; padding: 6px 4px; font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .02em; background: linear-gradient(var(--bg), var(--bg) 70%, transparent); }
.ph-month::before { content: "📅 "; opacity: .7; }
.ph-day { grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; margin: 8px 0 2px; padding: 6px 4px; font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: .01em; line-height: 1.35; background: linear-gradient(var(--bg), var(--bg) 70%, transparent); }
.ph-day::before { content: "📅 "; opacity: .7; }
.ph-day:empty { display: none; }
.ph-age { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 4px; }
.photo-cell { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); border-radius: 10px; display: block; padding: 0; border: none; cursor: pointer; }
.pc-count { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.pc-dup { position: absolute; left: 5px; top: 5px; background: rgba(20,90,220,.85); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 10px; }
/* 셀 하트 카운트: 빨간 하트 안에 숫자(하단 왼쪽) — 갤러리 셀 */
.pc-heart { position: absolute; left: 3px; bottom: 3px; z-index: 2; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; padding-bottom: 1px; box-sizing: border-box; color: #fff; font-size: 7px; font-weight: 900; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.5); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef4444' stroke='%23ffffff' stroke-width='1.5' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center/contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.photo-cell:active img { transform: scale(.96); }

/* 라이트박스 */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.94); display: flex; flex-direction: column; }
.lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-img.zoomed { cursor: grab; will-change: transform; }   /* 핀치 줌 확대 상태 */
#lbImg { touch-action: none; }   /* 핀치/팬 제스처를 우리 핸들러로(브라우저 기본 확대 방지). 동영상(#lbVideo)엔 미적용 */
.lb-video { width: 90%; max-width: 100%; max-height: 100%; background: #000; }
.lb-close { position: absolute; top: calc(10px + var(--safe-top)); right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 18px; cursor: pointer; }
.lb-edit { position: absolute; top: calc(10px + var(--safe-top)); right: 62px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 17px; cursor: pointer; }
/* 원본 보기 / 다운로드 (좌상단) */
.lb-btn { position: absolute; top: calc(10px + var(--safe-top)); z-index: 3; height: 40px; border-radius: 20px; background: rgba(255,255,255,.15); color: #fff; border: none; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.lb-original { left: 14px; padding: 0 15px; font-size: 13.5px; }
.lb-original.on { background: var(--accent); }
.lb-download { left: 92px; width: 40px; padding: 0; font-size: 22px; line-height: 1; }
/* 사진 날짜 변경 모달 */
#dateModal { z-index: 130; }
#placeModal { z-index: 130; }   /* 라이트박스(120) 안에서 열리므로 그 위로 */
.date-body { padding: 12px 14px calc(14px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; }
.date-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.date-field input { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 15px; outline: none; }
.dd-h { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.dd-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.dd-strip img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 72px; background: rgba(255,255,255,.08); color: #fff; border: none; font-size: 38px; line-height: 1; cursor: pointer; border-radius: 12px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-meta { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #fff; font-size: 12px; opacity: .8; }
/* 사진 좋아요(하트) — 내 좋아요=빨간하트, 옆에 다른사람 좋아요 수 */
.lb-heart { position: absolute; right: 12px; bottom: 28px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 13px; cursor: pointer; backdrop-filter: blur(4px); }
.lb-heart .lb-heart-ico { font-size: 20px; line-height: 1; }
.lb-heart .lb-heart-cnt { font-size: 14px; font-weight: 800; color: #fff; }
.lb-heart .lb-heart-cnt:empty { display: none; }
.lb-heart.pop .lb-heart-ico { animation: heartpop .3s ease; }
@keyframes heartpop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
/* 인물 카드 하트 카운트: 빨간 하트 안에 숫자, 하단 왼쪽(그린 위치), 크게 */
.p-heart { position: absolute; left: 5px; bottom: 26px; z-index: 3; width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; box-sizing: border-box; color: #fff; font-size: 9.5px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.45); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef4444' stroke='%23ffffff' stroke-width='1.5' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center/contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
/* 사진 위 위치 해시태그 오버레이 — 클릭 시 그 위치 사진 보기 */
.lb-tags { position: absolute; left: 10px; right: 10px; bottom: 30px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; z-index: 4; pointer-events: none; }
.lb-tags[hidden] { display: none; }
.lb-tag { pointer-events: auto; font-size: 13px; font-weight: 800; color: #fff; background: rgba(79,140,255,.82); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 12px; cursor: pointer; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lb-tag:hover { background: rgba(79,140,255,.95); }
.lb-info { flex: 0 0 auto; max-height: 46%; overflow-y: auto; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 14px calc(14px + var(--safe-bottom)); }
.lb-info:empty { display: none; }
.lbi-sec { margin-bottom: 12px; }
.lbi-h { font-size: 11.5px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
.lbi-persons { display: flex; gap: 8px; flex-wrap: wrap; }
.lbi-person { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 3px 12px 3px 3px; cursor: pointer; color: var(--text); }
.lbi-person.unnamed { border-style: dashed; border-color: var(--accent); }
.lbi-hint { font-weight: 500; font-size: 10.5px; color: var(--text-dim); }
.lbi-person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lbi-person span { font-size: 13px; font-weight: 700; }
/* 이미치 상세 '정보' 섹션 — 키/값 행 */
.lbi-rows { display: flex; flex-direction: column; gap: 4px; }
.lbi-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; }
.lbi-rk { flex: 0 0 44px; color: var(--text-dim); font-weight: 700; }
.lbi-rv { flex: 1; color: var(--text); word-break: break-all; }
.lbi-addr { font-size: 12.5px; color: var(--text); margin: 2px 0 8px; line-height: 1.4; word-break: keep-all; }
.lbi-map { width: 100%; height: 150px; border: 1px solid var(--line); border-radius: 12px; display: block; overflow: hidden; background: var(--surface-2); }
.lbi-map .leaflet-control-container { display: none; }   /* 미니맵: 컨트롤 숨김 */
.lbi-map-wrap { position: relative; }
.lbi-map-expand { position: absolute; top: 7px; right: 7px; z-index: 500; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.4); font-size: 15px; line-height: 1; cursor: pointer; backdrop-filter: blur(3px); }
.lbi-map-expand:active { background: rgba(0,0,0,.8); }
/* 지도 크게 보기(전체화면) */
.lbmap-view { position: fixed; inset: 0; z-index: 125; background: var(--bg); }
.lbmap-view[hidden] { display: none; }
.lbmap-canvas { position: absolute; inset: 0; }
.lbmap-close { position: absolute; top: calc(10px + var(--safe-top)); right: 14px; z-index: 500; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.35); font-size: 18px; cursor: pointer; }
.lbmap-hint { position: absolute; top: calc(14px + var(--safe-top)); left: 14px; z-index: 500; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.lbmap-hint:empty { display: none; }
.lbi-maplink { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent); }
/* 위치(장소) 등록 — 라이트박스 */
.lbi-h .lbi-place-btn { float: right; font: inherit; font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(79,140,255,.12); border: 1px solid rgba(79,140,255,.4); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.lbi-places { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.lbi-places:empty { display: none; }
.lbi-place { display: inline-flex; align-items: center; gap: 2px; }
.lbi-place-chip { font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px 0 0 999px; padding: 4px 8px 4px 10px; cursor: pointer; }
.lbi-place-chip:hover { border-color: var(--accent); }
.lbi-place-edit { font-size: 11px; line-height: 1; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); border-left: none; border-radius: 0 999px 999px 0; padding: 4px 8px; cursor: pointer; }
.lbi-place-edit:hover { border-color: var(--accent); }
#placeRenameModal { z-index: 130; }   /* 라이트박스(120) 위로 */
#bdayModal, #repModal { z-index: 130; }   /* 반려동물 상세(place-view 115)·라이트박스 위로 — 안 그러면 뒤에 열려 무반응처럼 보임 */
/* 위치 등록 모달 */
.place-body { padding: 14px 16px calc(16px + var(--safe-bottom)); }
.place-hint { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.pm-nearby { margin-bottom: 10px; }
.pm-h { font-size: 11.5px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
.pm-h.pm-empty { color: var(--text-dim); font-weight: 500; }
.pm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; margin: 0 6px 6px 0; cursor: pointer; }
.pm-chip:hover { border-color: var(--accent); }
.pm-chip span { font-weight: 500; color: var(--text-dim); font-size: 11px; }
/* 등록 중 비슷한 이름 매칭(거리 표시, 멀면 경고색) */
.pm-matches { margin: 8px 0 2px; }
.pm-matches:empty { display: none; }
.pm-name-match { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; text-align: left; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; }
.pm-name-match span { font-weight: 600; color: var(--text-dim); font-size: 11.5px; flex: none; }
.pm-name-match:hover { border-color: var(--accent); }
.pm-name-match.far { border-color: rgba(239,68,68,.5); }
.pm-name-match.far span { color: #ff6b6b; }
.place-input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 11px 13px; font-size: 16px; outline: none; }
.place-input:focus { border-color: var(--accent); }
/* 경계(반경) 편집기: 이름 밑 미니지도 + 반경 슬라이더 */
.pm-bound { margin: 12px 0 2px; }
.pm-map { width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.pm-radius { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.pm-radius input[type="range"] { flex: 1; accent-color: var(--accent); }
.pm-radius-val { flex: none; font-size: 12.5px; font-weight: 700; color: var(--text); min-width: 74px; text-align: right; }
.place-actions { display: flex; gap: 8px; margin-top: 12px; }
.place-actions .login-btn { flex: 1; margin: 0; }
.place-del-btn { flex: none; background: rgba(239,68,68,.14); color: #ff6b6b; border: 1px solid rgba(239,68,68,.4); border-radius: 12px; padding: 0 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.place-del-btn:hover { background: rgba(239,68,68,.24); }
.lbi-comments { display: flex; flex-direction: column; gap: 6px; }
.lbi-c { background: var(--surface-2); border-radius: 10px; padding: 8px 11px; font-size: 13.5px; line-height: 1.4; }
.lbi-c b { color: var(--accent); margin-right: 5px; font-size: 12.5px; }
.lbi-c-empty { color: var(--text-dim); font-size: 12.5px; }
.lbi-cform { display: flex; gap: 6px; margin-top: 8px; }
.lbi-cform input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 18px; padding: 9px 13px; font-size: 15px; outline: none; }
.lbi-cform button { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; cursor: pointer; }
.manage-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.manage-btn:active { background: var(--line); }
.manage-btn:disabled { opacity: .45; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 6px 14px 12px; }
.person-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
/* 미분류 인물 섹션(어드민) */
.people-section { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--text-dim); padding: 16px 4px 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.person-card.unl { border-style: dashed; }
.person-card.unl .p-label { color: var(--text-dim); font-weight: 600; }
/* 병합 다중선택 */
.person-card .pm-check { display: none; position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: transparent; font-size: 13px; font-weight: 900; line-height: 20px; text-align: center; z-index: 2; }
.people-grid.merge-mode .person-card .pm-check { display: block; }
.people-grid.merge-mode .person-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.people-grid.merge-mode .person-card.sel .pm-check { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 인물 목록 병합 액션바 */
.merge-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 10px); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.merge-bar #mergeInfo { flex: 1; font-size: 13px; font-weight: 600; }
.merge-bar button { border: none; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.merge-bar .mb-cancel { background: var(--surface); color: var(--text-dim); border: 1px solid var(--line); }
.merge-bar .mb-go { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.merge-bar .mb-go:disabled { opacity: .45; }
/* ===== 지도 탭 (사진 위치 히트맵 + 기간 슬라이더) ===== */
#view-map[data-active="true"] { display: flex; flex-direction: column; overflow: hidden; }
.map-topbar { flex: 0 0 auto; padding: 8px 16px 6px; background: var(--surface); border-bottom: 1px solid var(--line); }
.map-range { display: flex; flex-direction: column; gap: 2px; }
.mr-labels { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text); }
.mr-labels .mr-count { color: var(--text-dim); font-weight: 600; font-size: 11.5px; }
.mr-track { position: relative; height: 30px; }
.mr-track::before { content: ""; position: absolute; left: 10px; right: 10px; top: 13px; height: 4px; background: var(--line); border-radius: 2px; }
.mr-track input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.mr-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 30px; }
.mr-track input[type="range"]::-moz-range-track { background: transparent; height: 30px; }
.mr-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; margin-top: 5px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; }
.mr-track input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; }
/* 갤러리 시간바: 헤더+바 고정(아래 그리드만 스크롤), 밀도=바 안 색 그라데이션(파랑 낮음→빨강 높음) */
.gal-fixed { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--line); }
.gal-topbar { padding: 2px 16px 8px; background: var(--bg); }
.gal-topbar .map-range { gap: 3px; }
.mr-mid { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gal-topbar .gal-win-sel { padding: 3px 22px 3px 9px; font-size: 12px; }
.gal-topbar .mr-track::before, .map-topbar .mr-track::before { display: none; }   /* 회색 기본선 대신 밀도 바 사용 */
/* 밀도 바: 밝은 회색 배경 + 월별 컬럼(3단: 중간층 항상, 진하면 상하층까지) — 갤러리·지도 공용 */
.mr-dens { position: absolute; left: 10px; right: 10px; top: 6px; height: 18px; border-radius: 5px; background: #c6cdd8; overflow: hidden; z-index: 0; }
.mr-col { position: absolute; }
.map-topbar .mr-density, .map-topbar .mr-years { display: none; }   /* 기존 히스토그램/연도 제거(밀도는 바 안에) */
/* 선택영역: 양 끝 도트(핸들) 없이, 밴드 밑의 밀도색을 반전(네거티브)한 음영으로 표시 */
.gal-topbar .mr-track input[type="range"]::-webkit-slider-thumb, .map-topbar .mr-track input[type="range"]::-webkit-slider-thumb { background: transparent; border: none; box-shadow: none; }
.gal-topbar .mr-track input[type="range"]::-moz-range-thumb, .map-topbar .mr-track input[type="range"]::-moz-range-thumb { background: transparent; border: none; box-shadow: none; }
.gal-topbar .mr-window, .map-topbar .mr-window { top: 6px; height: 18px; background: #fff; mix-blend-mode: difference; border: none; box-shadow: none; border-radius: 4px; z-index: 2; }
.map-canvas { flex: 1; min-height: 0; width: 100%; background: #0f1826; }
.map-canvas .leaflet-container { width: 100%; height: 100%; background: #0f1826; }
/* 지도 사진 핀(밀도 낮을 때) */
.leaflet-div-icon.photo-pin { background: transparent; border: none; }
.photo-pin img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); background: #222; cursor: pointer; }
.photo-pin img:active { transform: scale(.94); }
/* 지도 탭: 등록한 장소(위치 키워드) 마커 — 기본은 작은 핀만, 확대(시·구 단위)하면 이름 표시 */
/* width/height auto !important: Leaflet divIcon 기본 iconSize(~12px)가 폭을 좁혀 이름이 세로로 줄바꿈되는 것 방지 */
.leaflet-marker-icon.place-pin { width: auto !important; height: auto !important; background: transparent; border: none; white-space: nowrap; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.place-pin .place-pin-dot { font-size: 13px; line-height: 1; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.place-pin .place-pin-label { display: none; flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(79,140,255,.9); border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 1px 7px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* 충분히 확대했을 때만 이름 노출(줌 임계값에서 JS가 컨테이너에 클래스 토글) */
.map-canvas.show-place-labels .place-pin .place-pin-label { display: inline-block; }
.place-pin:active .place-pin-label { background: rgba(79,140,255,1); }

/* 인물 상세: 대표 사진 헤더 + 변경 */
.person-rep { display: flex; align-items: center; gap: 12px; padding: 6px 14px 4px; }
.pr-face { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; }
.pr-face img { width: 100%; height: 100%; object-fit: cover; }
.pr-none { color: var(--text-dim); font-size: 26px; font-weight: 800; }
.pr-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-meta b { font-size: 16px; font-weight: 800; }
.pr-meta span { font-size: 12px; color: var(--text-dim); }
.pr-actions { margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.pr-change { flex: 0 0 auto; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pr-change:active { background: var(--line); }
/* 얼굴 정리 모달 */
.rep-sim.low { background: rgba(255,59,48,.9); }
.fm-cell.sel { outline: 3px solid #ff3b30; }
.fm-cell.sel img { opacity: .5; }
/* 대표 선택 모달 그리드 */
.rep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 14px calc(14px + var(--safe-bottom)); max-height: 64vh; overflow-y: auto; }
.rep-cell { position: relative; display: block; aspect-ratio: 1; border: none; padding: 0; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.rep-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-cell:active { outline: 2px solid var(--accent); }
.rep-sim { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 7px; }
/* 인물 상세 윗층: 같이 찍힌 사람 */
.costar-panel { padding: 6px 14px 4px; }
.cs-head { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.cs-head span { font-weight: 500; font-size: 11.5px; color: var(--text-dim); margin-left: 6px; }
/* 공통: 둥근 얼굴 + 코너 뱃지 카드(같이찍힌/닮은 인물 동일 사이즈) */
.cs-grid, .sm-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cs-card, .sm-cand { flex: 0 0 auto; width: 54px; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cs-face, .sm-face { position: relative; width: 44px; height: 44px; }
.cs-face img, .sm-face img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
/* 오른쪽 상단 뱃지: 같이찍힌=함께횟수 / 닮은=사진수 */
.cs-co, .sm-cnt-badge { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; border-radius: 9px; border: 2px solid var(--bg); }
.cs-name, .sm-name { font-size: 11px; font-weight: 600; color: var(--text-dim); white-space: nowrap; max-width: 54px; overflow: hidden; text-overflow: ellipsis; }
/* 닮은정도: 이름 오른쪽 하단에 작게(.4) */
.sm-name { overflow: visible; }
.sm-sim { margin-left: 2px; font-size: 8.5px; font-weight: 800; color: var(--accent-2); vertical-align: sub; }
.cs-name { font-weight: 700; color: var(--text); }
.cs-cnt { font-size: 10px; color: var(--text-dim); }
.sm-cand.sel .sm-face img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* 인물 상세 아랫층: 닮은 인물 합치기 패널 */
.sim-merge { padding: 6px 14px 4px; }
.sm-head { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.sm-head span { font-weight: 500; font-size: 11.5px; color: var(--text-dim); margin-left: 6px; }
.person-card .p-avatar { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 26px; }
.person-card .p-label { font-size: 14px; font-weight: 700; text-align: center; }
.person-card .p-user { font-size: 11px; color: var(--text-dim); }
.roster-empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); padding: 40px 16px; font-size: 13.5px; line-height: 1.6; }

/* 라벨 관리 */
.manage-body { padding: 12px 14px calc(14px + var(--safe-bottom)); overflow-y: auto; }
.manage-add { display: flex; gap: 6px; }
.manage-add input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
.manage-add input:focus { border-color: var(--accent); }
.manage-add button { flex: 0 0 auto; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 10px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.manage-hint { font-size: 11.5px; color: var(--text-dim); margin: 8px 2px 10px; }
.manage-list { list-style: none; margin: 0; padding: 0; }
.manage-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.manage-item .mi-user { flex: 0 0 34%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-item .mi-user small { color: var(--text-dim); }
.manage-item .mi-label { flex: 1; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 9px; font-size: 13px; outline: none; }
.manage-item .mi-label:focus { border-color: var(--accent); }
.manage-item .mi-del { flex: 0 0 auto; background: none; border: none; color: var(--badge); font-size: 15px; cursor: pointer; padding: 4px 6px; }

/* ===== 캘린더 ===== */
.cal-list { list-style: none; margin: 0; padding: 6px 12px calc(16px + var(--safe-bottom)); }
.cal-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; color: var(--text); }
.cal-item:active { background: var(--surface-2); }
.cal-date { flex: 0 0 46px; text-align: center; color: var(--accent); font-size: 15px; }
.cal-title { font-size: 14.5px; font-weight: 700; }
.cal-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cal-detail { padding: 14px 16px; }
.cal-d-title { font-size: 19px; font-weight: 800; margin: 10px 0 4px; }
.cal-d-meta { font-size: 12.5px; color: var(--text-dim); margin-bottom: 12px; }
.cal-comments { display: flex; flex-direction: column; gap: 8px; }
.cal-c { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 14px; line-height: 1.4; }
.cal-c b { color: var(--accent); margin-right: 6px; font-size: 13px; }
.cal-c-empty { color: var(--text-dim); font-size: 13px; padding: 8px 2px; }
#calCommentForm { position: sticky; bottom: 0; }
.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-dim); }
.cal-form input, .cal-form select { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px 12px; font-size: 15px; outline: none; }
.cal-form input:focus, .cal-form select:focus { border-color: var(--accent); }
/* 월간 달력 */
.cal-monthbar { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 14px; font-size: 16px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 8px; }
.cal-dow span { text-align: center; font-size: 11px; color: var(--text-dim); padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 8px; touch-action: pan-y; }
/* 월 전환 슬라이드 인(스와이프/버튼) */
@keyframes calInNext { from { transform: translateX(30%); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
@keyframes calInPrev { from { transform: translateX(-30%); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
.cal-grid.cal-in-next { animation: calInNext .28s cubic-bezier(.4,0,.2,1) both; }
.cal-grid.cal-in-prev { animation: calInPrev .28s cubic-bezier(.4,0,.2,1) both; }
.cal-cell { min-height: 62px; border: 1px solid var(--line); border-radius: 8px; padding: 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; background: var(--surface); }
.cal-cell.empty { border: none; background: none; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell.has { cursor: pointer; }
.cal-dnum { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.cal-photos { font-size: 9px; font-weight: 700; color: #00e0a0; background: rgba(0,224,160,.14); border-radius: 5px; padding: 0 3px; line-height: 14px; }
.cal-cell.today .cal-dnum { color: var(--accent); font-weight: 800; }
.cal-dot { font-size: 9px; background: var(--surface-2); border-radius: 4px; padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-dayevents { padding: 8px 12px calc(16px + var(--safe-bottom)); }
.cal-day-h { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 6px 2px; }

/* ===== 갤러리 ===== */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px;
}
.gallery-cell {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2);
}
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-cell .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}

/* ===== 채팅 레이아웃 ===== */
.chat-view { overflow: hidden; }
.chat-view[data-active="true"] { display: flex; flex-direction: column; }   /* .view[data-active]{display:block} 이김 */
.chat-layout { display: flex; flex: 1; min-height: 0; position: relative; }

/* 전자액자 — 메시지 위 최상단 레이어(고정). 채팅 내용이 이 밑으로 스크롤되어 지나감 */
.chat-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 액자: 메시지 영역 우상단에 떠 있는 오버레이(우측 반·최상단 레이어).
   왼쪽 반과 아래쪽은 채팅이 노출되고, 채팅 내용은 액자 아래로 스크롤되어 지나간다.
   좌하단 모서리 드래그로 크기조절, 왼쪽 핸들로 접기(2/3 숨김) */
.photo-frame { position: absolute; top: 0; right: 0; left: auto; width: 50%; height: 16vh; z-index: 4; overflow: hidden; background: #000; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 14px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .35s ease; }
.photo-frame.collapsed { transform: translateX(66.667%); }   /* 2/3 오른쪽으로 숨기고 1/3만 빼꼼 */
/* 접기/펼치기 핸들(액자 왼쪽면 |>|) */
.pf-collapse { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 5; width: 22px; height: 46px; border: none; border-radius: 0 8px 8px 0; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(3px); }
.photo-frame.collapsed .pf-collapse { transform: translateY(-50%) rotate(180deg); }   /* 접히면 화살표 반전 */
/* 좌하단 크기조절 손잡이 */
.pf-resize { position: absolute; left: 0; bottom: 0; width: 24px; height: 24px; z-index: 5; cursor: nesw-resize; touch-action: none; background:
    linear-gradient(45deg, transparent 55%, rgba(255,255,255,.85) 55%, rgba(255,255,255,.85) 63%, transparent 63%,
    transparent 70%, rgba(255,255,255,.85) 70%, rgba(255,255,255,.85) 78%, transparent 78%); }
/* 액자가 떠 있을 때 메시지 최초 위치를 액자 아래로 밀되, 스크롤 시 밑으로 지나가게 */
/* 우상단 떠있는 액자라 전체폭을 밀지 않는다. 채팅은 액자 아래로 그대로 스크롤되어 지나간다. */
/* 슬라이드 래퍼(토스트식 진입/이탈), 안쪽 이미지가 팬 */
.pf-slide { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; touch-action: none; }
.pf-slide.out { transform: translateX(-100%); opacity: 0; }        /* 다음: 현재 사진 왼쪽으로 빠져나감 */
.pf-slide.pre { transform: translateX(100%); opacity: 0; transition: none; }  /* 다음: 새 사진 오른쪽 밖 대기 */
.pf-slide.out-r { transform: translateX(100%); opacity: 0; }       /* 이전: 현재 사진 오른쪽으로 빠져나감 */
.pf-slide.pre-l { transform: translateX(-100%); opacity: 0; transition: none; }  /* 이전: 새 사진 왼쪽 밖 대기 */
.pf-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-img.pf-pan { animation: pfPan 20s ease-in-out both; }
@keyframes pfPan { from { transform: scale(1.08) translate(-2.5%, -1.5%); } to { transform: scale(1.14) translate(2.5%, 1.5%); } }
.pf-cap { position: absolute; left: 10px; bottom: 8px; z-index: 2; color: #fff; font-size: 12px; font-weight: 600; background: rgba(0,0,0,.42); padding: 3px 9px; border-radius: 11px; backdrop-filter: blur(4px); }

/* 채널 사이드바 */
.channel-pane {
  width: 290px; flex: 0 0 290px; height: 100%;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto;
}
.team-head { display: flex; gap: 10px; align-items: center; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.team-badge {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
}
.team-name { font-weight: 700; font-size: 15px; }
.team-sub { font-size: 11px; color: var(--text-dim); }
.channel-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); padding: 14px 16px 6px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.chan-sort-toggle { border: 1px solid var(--line, var(--line)); background: var(--surface-2, var(--surface)); color: var(--text-dim);
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.chan-sort-toggle.manual { background: #17324a; border-color: #2f6dc0; color: #8ec5ff; }
/* 채널 정렬 3단 세그먼트 + 검색 버튼 */
.chan-controls { display: flex; align-items: center; gap: 8px; padding: 8px 14px 4px; }
.chan-sort-seg { display: inline-flex; flex: 1; background: var(--surface-2, var(--surface)); border: 1px solid var(--line, var(--line)); border-radius: 999px; padding: 2px; }
.chan-sort-seg button { flex: 1; border: 0; background: none; color: var(--text-dim); font-size: 12px; font-weight: 700; padding: 6px 4px; border-radius: 999px; }
.chan-sort-seg button.on { background: #2f6dc0; color: #fff; }
.chan-sort-seg button { font-size: 11.5px; padding: 6px 2px; }   /* 4개(통합피드 포함) 들어가게 살짝 촘촘히 */
/* 통합피드 모드: 채널목록 영역을 단일 열로(2열 그리드 해제) + 피드 카드/칩 */
.channel-list.feedmode { display: block; }
.channel-list.feedmode .feed-card { margin-bottom: 7px; }
.chan-feed-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.chan-feed-chips::-webkit-scrollbar { display: none; }
.chan-search-btn { flex: 0 0 auto; width: 38px; height: 34px; border: 1px solid var(--line, var(--line)); background: var(--surface-2, var(--surface)); border-radius: 10px; font-size: 15px; color: var(--text); }
.chan-search-btn:active { background: #22355a; }
.channel-pane .channel-search[hidden] { display: none; }
.ch-drag { position: absolute; top: 6px; right: 8px; z-index: 3; color: var(--text-dim); font-size: 15px; line-height: 1;
  cursor: grab; touch-action: none; padding: 2px 4px; border-radius: 6px; background: rgba(0,0,0,.18); }
.channel-row.draggable { position: relative; }
.channel-row.draggable .ch-top { padding-right: 22px; }   /* 안읽음 뱃지가 ⋮⋮ 손잡이와 겹치지 않게 */
/* 안 읽은 글 모아보기: 맨 앞 고정 행 */
.channel-row.unread-inbox { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#17324a,var(--surface)); border-color: #2f6dc0; }
.channel-row.unread-inbox.active { outline: 2px solid var(--accent, #3a7bd5); }
.unread-inbox .ubx-ico { font-size: 17px; }
.unread-inbox .ubx-name { font-weight: 800; color: #cfe0ff; font-size: 14px; }
.unread-inbox .talk-badge { margin-left: auto; }
.unread-inbox .ubx-zero { margin-left: auto; font-size: 11px; color: var(--text-dim); }
/* 인박스 안 메시지 목록 */
.unread-item { display: block; width: 100%; text-align: left; background: var(--surface-2, var(--surface)); border: 1px solid var(--line, var(--line)); border-radius: 12px; padding: 9px 12px; margin: 0 0 8px; color: var(--text); }
.unread-item:active { background: var(--surface-2); }
.unread-item .ui-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.unread-item .ui-chan { font-size: 12px; font-weight: 800; color: #8ec5ff; }
.unread-item .ui-time { margin-left: auto; font-size: 10px; color: var(--text-dim); }
.unread-item .ui-body { display: flex; align-items: flex-start; gap: 8px; }
.unread-item .ui-body .avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; font-size: 12px; }
.unread-item .ui-txt { font-size: 13px; line-height: 1.35; color: #d7deea; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.unread-item .ui-txt b { color: #fff; }
.ubx-empty { text-align: center; color: var(--text-dim); padding: 40px 16px; font-size: 15px; }
.channel-row.dragging { opacity: .6; outline: 2px dashed #2f6dc0; }
/* 순서 바꿀 때 글자가 드래그 선택되는 것 방지 */
.channel-list, .channel-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.chan-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
/* 방 목록: 3~5열 그리드 카드 */
/* 큰 화면(기본): 1컬럼 리스트 — 셀 넉넉하게 */
.channel-list { list-style: none; margin: 0; padding: 8px; flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-content: start; overflow-x: hidden; }   /* minmax(0,·): 요약/미리보기 글이 길어도 열이 안 늘어남(늘어나면 오른쪽 뱃지가 화면 밖으로 밀림) */
.channel-list .ch-empty { grid-column: 1 / -1; }
.channel-row {
  min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 11px; border-radius: 12px; cursor: pointer; color: var(--text-dim);
  font-size: 13px; background: var(--surface); border: 1px solid var(--line);
}
.ch-top { display: flex; align-items: center; gap: 6px; }
.channel-row .ch-dm-av { flex: 0 0 auto; display: inline-flex; }
.channel-row .ch-dm-av .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; font-weight: 800; }
.channel-row .ch-hash { opacity: 0.55; flex: 0 0 auto; }
.channel-row .ch-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.channel-row .ch-time { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); opacity: .85; }
.channel-row .ch-mute { font-size: 11px; }
.channel-row .talk-badge { flex: 0 0 auto; margin-left: auto; }
.channel-row.unread { color: var(--text); }
.channel-row.unread .ch-name { font-weight: 800; }
.channel-row.active { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
.channel-row:active { background: var(--surface-2); }
/* 최근 화자 아이콘 (데스크톱 1.5배) */
.ch-recent { display: flex; padding-left: 2px; }
.ch-recent-av { margin-right: -7px; }
.ch-recent-av:last-child { margin-right: 0; }
.ch-recent .avatar { width: 33px; height: 33px; border-radius: 10px; font-size: 14px; font-weight: 800; border: 2px solid var(--surface); }
.channel-row.active .ch-recent .avatar { border-color: var(--surface-2); }
/* 마지막 대화 미리보기 */
.ch-preview { font-size: 12px; color: var(--text-dim); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-preview b { color: var(--text); font-weight: 700; }
.channel-row.active .ch-preview { color: var(--text-dim); }
/* 모바일: 기존 2컬럼 유지 + 미리보기 한 줄만 콤팩트하게 */
@media (max-width: 640px) {
  .channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }   /* 정확히 2열 — minmax(0,·)로 미리보기 텍스트가 열을 밀어 넘치는(2열째 잘림) 것 방지 */
  .channel-row { min-width: 0; padding: 8px 9px; gap: 4px; }
  .channel-row .ch-name { font-size: 13px; }
  .channel-row .ch-dm-av .avatar { width: 24px; height: 24px; }
  .ch-recent .avatar { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
  .ch-preview { font-size: 11px; }
}

/* 인증 확인 스플래시(로그인창 깜빡임 방지) */
.splash { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; }
.splash .login-logo { animation: splashPulse 1.1s ease-in-out infinite; }
@keyframes splashPulse { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }

/* 채널 알림 음소거 표시(목록) */
.ch-mute { margin-left: 4px; font-size: 12px; opacity: .8; }
/* 헤더 알림 버튼: 음소거 상태를 빨간 배지로 확실히 구분(상단바 전체 알림 종과 혼동 방지) */
.mute-btn { font-size: 15px; }
.fav-btn { font-size: 16px; }
.fav-btn.on { background: rgba(250,204,21,.18); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(250,204,21,.6); }
#chanFavFirstBtn { opacity: .4; filter: grayscale(1); }
#chanFavFirstBtn.on { opacity: 1; filter: none; border-color: rgba(250,204,21,.7); }
.channel-row .ch-fav { flex: 0 0 auto; font-size: 12px; }
.channel-row.fav { border-color: rgba(250,204,21,.35); }
.channel-row { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.mute-btn.muted { background: rgba(239,68,68,.18); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(239,68,68,.55); }
/* 사진 슬라이드(전자액자) 토글 — 꺼지면 흐리게 */
.frame-btn { font-size: 15px; }
.frame-btn.off { opacity: .32; filter: grayscale(1); }

/* 카톡식 톡 뱃지 */
.talk-badge {
  min-width: 19px; height: 19px; padding: 0 6px;
  background: var(--badge); color: #fff; border-radius: 10px;
  font-size: 11.5px; font-weight: 800; line-height: 19px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);   /* 밝은/어두운 어느 배경에서도 또렷하게 */
}
/* 음소거한 방의 안읽음 뱃지: 알림 대상 아님 → 회색이되, 밝은 테마에서도 보이게(흰 글씨) */
.talk-badge.muted { background: var(--muted); color: #fff; font-weight: 700; box-shadow: none; }

/* 내 계정(프로필/비밀번호) 모달 */
.profile-body { padding: 8px 16px 20px; overflow-y: auto; }
.pf-section { padding: 14px 0; border-bottom: 1px solid var(--surface-2); }
.pf-section:last-child { border-bottom: 0; }
.pf-section h4 { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.pf-hint { margin: -4px 0 10px; font-size: 12px; color: var(--muted); }
.pf-badge-diag { display: inline-block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }
.pf-badge-diag b { color: var(--accent); }
.pf-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pf-field span { font-size: 12px; color: var(--muted); }
.pf-field input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--surface-2); background: var(--surface); color: var(--text); font-size: 15px; }
.pf-btn { width: 100%; padding: 11px; border: 0; border-radius: 10px; background: var(--accent, #2b6cff); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.pf-btn:active { opacity: .85; }
.pf-userlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface); border: 1px solid var(--surface-2); border-radius: 10px; }
.pf-u-info { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.pf-u-name { font-size: 14px; font-weight: 600; color: var(--text); }
.pf-u-id { font-size: 11px; color: var(--muted); }
.pf-u-av { flex: none; }
.pf-u-av .avatar { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 800; color: #fff; display: grid; place-items: center; }
.pf-u-seen { font-size: 11px; color: #00e0a0; margin-top: 1px; }
.pf-u-seen.never { color: var(--muted); }
.pf-u-state { font-size: 11px; padding: 2px 7px; border-radius: 8px; }
.pf-u-state.custom { background: rgba(0,224,160,.16); color: #00e0a0; }
.pf-u-state.shared { background: var(--surface-2); color: var(--muted); }
.pf-u-reset, .pf-u-clear { padding: 6px 10px; font-size: 12px; border: 1px solid var(--surface-2); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.pf-u-clear { background: transparent; color: var(--muted); }

.sim-btn {
  margin: 10px 12px 12px; padding: 10px;   /* safe-bottom 중복 제거 */
  background: var(--surface-2); color: var(--text); border: 1px dashed var(--line);
  border-radius: 10px; font-size: 12.5px; cursor: pointer;
}
.sim-btn:active { background: var(--line); }

/* 메시지 영역 */
.message-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.msg-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.back-btn { display: none; background: none; border: none; color: var(--text); font-size: 24px; line-height: 1; padding: 8px 12px 8px 6px; margin-left: -6px; min-width: 40px; min-height: 40px; cursor: pointer; }
.msg-head .hash { color: var(--text-dim); font-weight: 700; }
.msg-head-name { font-weight: 700; flex: 1; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 대화방 헤더: 채널명과 우측 아이콘 사이에 이 방 top 게시자(공간 절약: 포스트 수는 아바타 위 코너 뱃지) */
.head-posters { flex: 0 1 auto; display: flex; align-items: center; gap: 9px; overflow: visible; padding-right: 2px; }
.head-posters:empty { display: none; }
.hp-item { position: relative; display: inline-flex; flex: 0 0 auto; }
.hp-item .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.hp-item b { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; line-height: 15px; text-align: center; border: 1.5px solid var(--surface); box-sizing: border-box; }
.member-count {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 12.5px; padding: 7px 10px; border-radius: 14px; cursor: pointer; min-height: 38px;
}
.member-count:active { background: var(--line); }
.member-count .mc-ico { font-size: 13px; }

.messages { flex: 1; overflow-y: auto; padding: 12px 14px 16px; -webkit-overflow-scrolling: touch; background: var(--chat-bg); }
.day-sep { text-align: center; font-size: 11.5px; color: var(--text-dim); margin: 14px 0 8px; position: relative; }
/* 채팅 날짜 구분선 — 카톡식 중앙 알약 배지 */
.day-sep span { display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim); font-weight: 600; }

.msg { display: flex; gap: 10px; padding: 3px 0; }
.msg.grouped { padding-top: 1px; }
.msg .avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 14px;
}
.msg.grouped .avatar { visibility: hidden; height: 0; }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 700; font-size: 14px; }
.msg-time { font-size: 11px; color: var(--text-dim); }
/* 카카오식 말풍선 — 받은 글: 흰/서피스 버블, 내 글: CI 연두 버블. 모서리 둥글게(말랑) */
.msg-text { font-size: 14.5px; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
  display: inline-block; max-width: 100%; padding: 8px 12px; background: var(--surface-2); color: var(--text);
  border-radius: 5px 18px 18px 18px; }
.msg-text:empty { display: none; padding: 0; }
.msg-text.emoji-only { font-size: 43.5px; line-height: 1.15; }   /* 이모지만 보낸 글: 3배 */
.msg.me .msg-text { background: var(--me-bubble); color: var(--me-bubble-text); border-radius: 18px 5px 18px 18px; }
.msg.me .msg-text a { color: #1c4db8; text-decoration: underline; }
/* 배경(카톡풍 연한 청회색) + 내 말풍선 CI 연두 색값. 라이트에선 상대 말풍선 흰색. */
:root { --chat-bg: var(--bg); --me-bubble: #d4f2a8; --me-bubble-text: #263d16; }
:root[data-theme="light"] { --chat-bg: #b7c9d8; }
:root[data-theme="light"] .msg:not(.me) .msg-text { background: #fff; color: #1b2436; box-shadow: 0 1px 1.5px rgba(0,0,0,.06); }
:root[data-theme="light"] .msg.me .msg-text { box-shadow: 0 1px 1.5px rgba(0,0,0,.05); }
.msg-line { display: flex; align-items: flex-end; gap: 6px; }
.msg-line .msg-text { flex: 0 1 auto; }
/* 카톡식 "안 읽은 사람 수" — 노란 숫자 */
/* 안 읽은 사람 수: 자리를 항상 고정 폭으로 예약(내용 0이면 빈칸) → 뱃지 토글 시 텍스트 줄바꿈·높이 변화 없음 */
.unread-by { flex: 0 0 auto; min-width: 16px; text-align: center; color: #e0a020; font-size: 11.5px; font-weight: 800; line-height: 1; margin-bottom: 2px; }
:root[data-theme="light"] .unread-by { color: #b26a00; }   /* 밝은 배경에서도 또렷한 진한 앰버 */
.msg.me .unread-by { text-align: center; }
.msg.me .msg-line { flex-direction: row-reverse; }   /* 내 메시지는 숫자를 왼쪽에 */
.msg-images { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg.me .msg-images { justify-content: flex-end; }   /* 내가 올린 사진도 오른쪽 정렬(텍스트와 일관) */
/* 시간을 메시지 하단(콘텐츠 옆)으로 — 카톡식 */
.msg-row { display: flex; align-items: flex-end; gap: 6px; }
.msg-stack { min-width: 0; }
.msg-time2 { flex: 0 0 auto; font-size: 10px; color: var(--text-dim); white-space: nowrap; margin-bottom: 3px; }
.msg.me .msg-row { flex-direction: row-reverse; }               /* 내 메시지: 시간 왼쪽, 내용 오른쪽 */
.msg.me .msg-stack { display: flex; flex-direction: column; align-items: flex-end; }
.msg.me .avatar { display: none; }                              /* 내 메시지: 아바타 없음 */
.msg.me .msg-meta { display: none; }                            /* 내 메시지: 별명 없음 */
.msg.me .msg-body { display: flex; flex-direction: column; align-items: flex-end; }   /* 답글·리액션도 오른쪽으로 */
.msg-img { width: 132px; height: 132px; padding: 0; border: none; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.msg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-img:active img { transform: scale(.96); transition: transform .15s; }
/* 사진 1장 메시지 — 카카오처럼 크게, 원본 비율 유지(잘림 없음) */
.msg-img.big { width: auto; height: auto; max-width: min(300px, 76%); max-height: 420px; border-radius: 14px; background: var(--surface-2); }
.msg-img.big img { width: auto; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.msg-video.big { max-width: min(300px, 76%); }
/* 여러 장 → 카카오식 그리드(정사각 타일) */
.msg-images.grid { display: grid; gap: 3px; max-width: min(300px, 76%); }
.msg-images.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.msg-images.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.msg-images.grid.g4 { grid-template-columns: repeat(2, 1fr); }
.msg-images.grid.g5 { grid-template-columns: repeat(3, 1fr); }
.msg-images.grid .msg-img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; }
.msg.me .msg-images.grid { justify-content: end; }
.reply-btn { margin-top: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); border-radius: 12px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.reply-btn:active { background: var(--line); }

/* 스레드 패널 */
/* 위치 상세 화면 (위치명 + 지도 + 년월별 사진) */
.place-view { position: fixed; inset: 0; z-index: 115; background: var(--bg); display: flex; flex-direction: column; }
.pv-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 14px 10px; border-bottom: 1px solid var(--line); background: rgba(11,18,32,.92); backdrop-filter: blur(8px); }
.pv-back { background: none; border: none; color: var(--text); font-size: 26px; line-height: 1; padding: 0 4px; cursor: pointer; }
.pv-title { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-title::before { content: "📍 "; }
.pv-count { font-size: 12.5px; color: var(--text-dim); margin-left: auto; flex: none; }
.pv-manage { flex: none; background: none; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 0 4px 4px; cursor: pointer; }
.place-view.pet .pv-title::before { content: ""; }   /* 펫은 제목에 🐾 이미 있음(📍 중복 방지) */
.place-view.pet .pv-map { display: none !important; }   /* 반려동물 상세엔 지도 불필요 */
.lbi-pet { display: inline-flex; align-items: center; margin: 0 8px 6px 0; }
.lbi-pet .lbi-person { margin: 0; }
.lbi-pet-rep { flex: none; margin-left: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 5px 8px; font-size: 13px; cursor: pointer; }
.lbi-pet-rep:active { border-color: var(--accent); }
/* 반려동물 상세 툴바 */
.pv-pet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.pv-pet-bday { font-size: 13px; font-weight: 700; color: var(--text); }
.pv-pet-actions { margin-left: auto; display: flex; gap: 6px; }
.pv-pet-actions button { font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.pv-pet-actions button:active { border-color: var(--accent); }
/* 정리(선택) 모드 */
.photo-grid.sel-mode .photo-cell { outline: 2px solid transparent; }
.photo-grid.sel-mode .photo-cell.sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.photo-grid.sel-mode .photo-cell.sel::after { content: "✓"; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; }
.pv-sel-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 12px); z-index: 118; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 13px; }
.pv-sel-bar button { margin-left: auto; font-size: 12.5px; font-weight: 700; border: none; border-radius: 999px; padding: 7px 12px; cursor: pointer; background: var(--badge); color: #fff; }
.pv-sel-bar button#pvSelCancel { margin-left: 0; background: var(--surface); color: var(--text-dim); border: 1px solid var(--line); }
#placeManageModal { z-index: 130; }   /* 위치 화면(115) 위로 */
.plm-list { display: flex; flex-direction: column; gap: 8px; }
.plm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.plm-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plm-info b { font-size: 14px; }
.plm-info span { font-size: 11.5px; color: var(--text-dim); }
.plm-del { flex: none; background: rgba(239,68,68,.16); color: #ff6b6b; border: 1px solid rgba(239,68,68,.4); border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pv-map { width: 100%; height: 200px; background: var(--surface-2); }
.thread-panel { position: fixed; inset: 0; z-index: 110; background: var(--bg); display: flex; flex-direction: column; }
.thread-panel .msg-head { padding-top: calc(12px + var(--safe-top)); }
.thread-panel .messages { flex: 1; overflow-y: auto; padding: 12px 14px 8px; }
.msg.me .msg-author { color: var(--accent); }

.new-line-sep {
  display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--badge); font-size: 11px; font-weight: 700;
}
.new-line-sep::before, .new-line-sep::after { content: ""; flex: 1; height: 1px; background: var(--badge); opacity: 0.4; }

/* 입력창 */
.composer {
  display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px;   /* safe-bottom은 .view 하단 오프셋에서 이미 반영 → 중복 제거(하단 갭 방지) */
  border-top: 1px solid var(--line); background: var(--surface);
}
.composer input, .composer textarea {
  flex: 1; background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 22px; padding: 11px 16px; font-size: 16px; outline: none;   /* 16px 미만이면 iOS가 포커스 시 자동 확대(가로폭 풀림) → 16px 고정 */
}
/* 입력량에 따라 몇 줄까지 자동 확장(최대 약 5줄), 그 이상은 내부 스크롤 */
.composer textarea {
  resize: none; line-height: 1.35; max-height: 118px; overflow-y: auto;
  font-family: inherit;
}
.composer input:focus, .composer textarea:focus { border-color: var(--accent); }
.send-btn {
  width: 44px; height: 44px; flex: 0 0 44px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-size: 15px; cursor: pointer;
}
.send-btn:active { transform: scale(0.94); }

/* ===== 컴포저 확장(사진·이모지·답장) ===== */
.composer { position: relative; flex-wrap: wrap; }
.comp-ico { flex: 0 0 auto; width: 40px; height: 42px; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; border-radius: 10px; }
.comp-ico:active { background: var(--surface-2); }
.comp-reply, .comp-previews { flex-basis: 100%; width: 100%; order: -1; box-sizing: border-box; }
/* 멤버 팝업의 '이번 달 활동 Top' 섹션 헤더 + 순위 */
.member-top-h { font-size: 12px; font-weight: 800; color: var(--text-dim); padding: 10px 14px 4px; letter-spacing: .02em; }
.member-item .mt-rank { flex: 0 0 auto; width: 18px; text-align: center; font-weight: 800; color: var(--accent); font-size: 13px; }
.comp-previews { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 2px 4px; }
.cp-thumb { position: relative; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-thumb.cp-vid video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cp-thumb.cp-vid .cp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); pointer-events: none; }
.cp-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.comp-reply { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 4px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 12.5px; }
.comp-reply .cr-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.comp-reply .cr-author { color: var(--accent); font-weight: 700; margin-right: 6px; }
.comp-reply .cr-x { flex: none; border: none; background: transparent; color: var(--text-dim); font-size: 15px; cursor: pointer; }
.emoji-pop { position: absolute; bottom: 56px; left: 8px; right: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 40; max-height: 190px; overflow: auto; }
.emoji-pop button { border: none; background: transparent; font-size: 22px; padding: 5px 0; cursor: pointer; border-radius: 8px; }
.emoji-pop button:active { background: var(--surface-2); }
/* 메시지 리액션 칩 */
.msg-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rx-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; cursor: pointer; color: var(--text); }
.rx-chip .rx-e { font-size: 19px; line-height: 1; }   /* 리액션 이모지 크게 */
.rx-chip .rx-n { font-size: 12.5px; }
.rx-chip.me { border-color: var(--accent); background: rgba(79,140,255,.16); }
.msg-uploading { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
/* 메시지 메뉴 리액션 행 */
.mm-rx { display: flex; gap: 2px; padding: 4px 4px 2px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.mm-rx button { border: none; background: transparent; font-size: 22px; padding: 4px 6px; cursor: pointer; border-radius: 8px; }
.mm-rx button:active { background: var(--surface-2); }

/* ===== 탭바 ===== */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; background: rgba(11,18,32,0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative; flex: 1; background: none; border: none; color: var(--text-dim);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  font-size: 11px; cursor: pointer; padding-bottom: 4px;
}
.tab[data-active="true"] { color: var(--text); }
.tab-ico { font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.tab-ico svg { width: 23px; height: 23px; display: block; }
.tab .talk-badge {
  position: absolute; top: 6px; left: calc(50% + 6px);
}

/* 토스트 */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); z-index: 40;
  background: #000c; color: #fff; padding: 10px 16px; border-radius: 20px;
  font-size: 13px; max-width: 82%; text-align: center;
  border: 1px solid var(--line);
}

/* ===== 링크 프리뷰 (URL 썸네일) ===== */
.link-preview {
  margin-top: 6px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; overflow: hidden; background: var(--surface-2); max-width: 420px;
  display: block; text-decoration: none; color: inherit;
}
.link-preview .lp-img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--surface); }
.link-preview .lp-imgwrap { position: relative; }
.link-preview .lp-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 17px; display: flex; align-items: center; justify-content: center; padding-left: 3px; }
.link-preview .lp-body { padding: 8px 11px; }
.link-preview .lp-site { font-size: 11px; color: var(--accent); font-weight: 700; }
.link-preview .lp-title { font-size: 13.5px; font-weight: 700; margin: 2px 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview .lp-desc { font-size: 12px; color: var(--text-dim); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview.image-only { border-left-color: var(--accent-2); max-width: 260px; }
.link-preview.image-only .lp-img { height: 200px; }
.msg-text a { color: var(--accent); word-break: break-all; }

/* ===== 로그인 화면 ===== */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, var(--surface-2) 0%, var(--bg) 60%);
}
.login-card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; padding: 28px 22px 22px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.login-logo {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; font-weight: 800; font-size: 30px;
}
.login-title { text-align: center; margin: 0; font-size: 21px; }
.login-sub { text-align: center; margin: 0 0 6px; font-size: 12.5px; color: var(--text-dim); }
.login-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-dim); }
.login-field input {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 12px 14px; font-size: 16px; outline: none;
}
.login-field input:focus { border-color: var(--accent); }
.login-error { color: var(--badge); font-size: 12.5px; margin: 0; text-align: center; }
.login-btn {
  margin-top: 6px; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-size: 15px; font-weight: 700;
}
.login-btn:disabled { opacity: .6; }
.login-hint { text-align: center; font-size: 11px; color: var(--text-dim); margin: 4px 0 0; }

/* ===== 멤버 모달 ===== */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
.modal { width: 100%; max-width: 360px; max-height: 70vh; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.member-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.member-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
.member-item:active { background: var(--surface-2); }
.member-item .avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 14px; }
.member-item .m-name { font-size: 14px; font-weight: 600; }
.member-item .m-user { font-size: 11.5px; color: var(--text-dim); }
.member-item .m-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 8px; }
.m-tag.owner { background: rgba(255,209,102,.18); color: #ffd166; }
.m-tag.me { background: rgba(79,140,255,.18); color: var(--accent); }

/* ===== 모바일: 채널→메시지 단일 컬럼 전환 ===== */
@media (max-width: 640px) {
  .channel-pane { position: absolute; inset: 0; width: 100%; flex: none; z-index: 5; }
  .message-pane { position: absolute; inset: 0; z-index: 6; transform: translateX(0); }
  .chat-layout.show-messages .channel-pane { display: none; }
  .chat-layout:not(.show-messages) .message-pane { display: none; }
  .back-btn { display: block; }
}

/* ===== UX 개선 배치 (P1~P3) ===== */
/* 채널 검색 입력 */
.channel-search {
  margin: 6px 10px 4px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-size: 16px; outline: none; width: calc(100% - 20px);   /* iOS 포커스 확대 방지 */
}
.channel-search:focus { border-color: var(--accent); }
.ch-empty { list-style: none; padding: 18px 14px; color: var(--text-dim); font-size: 13px; text-align: center; }

/* 인물 카드: 화면 밖은 렌더 건너뛰어 초기 부하↓ (169장 대응) */
.person-card { content-visibility: auto; contain-intrinsic-size: 0 156px; }

/* 접근성: 키보드 포커스 표시 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* 지도 줌 버튼·달력 화살표 터치 영역 확대 */
.leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
.cal-monthbar .gallery-back { min-width: 40px; min-height: 40px; }
.chip { min-height: 36px; }

/* 로딩 스켈레톤(그리드/메시지 자리표시) */
@keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skeleton, .sk-cell, .sk-line {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 600px 100%; animation: shimmer 1.2s infinite linear; border-radius: 10px;
}
.sk-grid { display: grid; gap: 10px; padding: 12px 14px; }
.people-grid.sk-grid, .photo-grid.sk-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sk-cell { aspect-ratio: 1; }
.sk-msgs { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.sk-line { height: 40px; border-radius: 12px; max-width: 72%; }
.sk-line:nth-child(even) { align-self: flex-end; max-width: 58%; }

/* 지도 슬라이더 아래 시기별 사진 농도 + 년 구분 */
.mr-density { position: relative; height: 24px; margin-top: 4px; }
.mr-bar { position: absolute; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--accent); opacity: .55; border-radius: 2px; }
.mr-years { position: relative; height: 14px; margin-top: 1px; }
.mr-year { position: absolute; transform: translateX(-50%); font-size: 9px; color: var(--text-dim); }
.mr-year::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 12px; background: var(--line); }

/* 대화(메시지) 검색 결과 */
.search-result { list-style: none; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.search-result:active { background: var(--surface-2); }
.sr-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.sr-ch { font-size: 12px; font-weight: 700; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-time { font-size: 10.5px; color: var(--text-dim); flex: 0 0 auto; }
.sr-text { font-size: 12.5px; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-text b { color: var(--text-dim); font-weight: 700; }
.sr-text mark, .search-result mark { background: rgba(79,140,255,.35); color: inherit; border-radius: 3px; padding: 0 1px; }
/* 검색 결과로 점프 시 해당 메시지 강조 */
.msg-highlight { animation: msgHi 2.4s ease; border-radius: 10px; }
@keyframes msgHi { 0%,70% { background: rgba(79,140,255,.22); } 100% { background: transparent; } }

/* 프로필 사진(있을 때만) — 색상 이니셜 위에 덮어 표시, 실패 시 이니셜 노출 */
.avatar { position: relative; overflow: hidden; }
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s ease; }
.av-img.on { opacity: 1; }
.av-initial.hide { visibility: hidden; }   /* 사진 로드 전엔 색상원만(글자 숨김) → 실패 시에만 글자 노출 */

/* 관리자: 계정↔인물 매핑 셀렉트 */
.pf-user { flex-wrap: wrap; }
.pf-u-map { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.pf-u-map select { flex: 1; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 9px; font-size: 13px; outline: none; -webkit-appearance: none; appearance: none; }
.pf-u-map select:focus { border-color: var(--accent); }

/* 이번 달 활동 Top 5 (채팅 상단) */
.top-activity { padding: 8px 10px 6px; border-bottom: 1px solid var(--line); height: 112px; box-sizing: border-box; overflow: hidden; }   /* 고정 높이 → 글↔방문 전환해도 아래가 안 흔들림 */
.ta-title { font-size: 11px; font-weight: 800; color: var(--text-dim); margin-bottom: 6px; line-height: 16px; height: 16px; overflow: hidden; }
.ta-row { align-items: flex-start; }
.ta-item { height: 74px; justify-content: flex-start; }   /* 항목 높이 고정 → 인원/이름 달라도 행 높이 일정 */
.ta-row { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ta-item { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ta-av { position: relative; }
.ta-av .avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.ta-rank { position: absolute; top: -4px; left: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.ta-rank.r1 { background: #f5b301; color: #3a2a00; border-color: #f5b301; }
.ta-rank.r2 { background: #c7ccd6; color: #23303f; border-color: #c7ccd6; }
.ta-rank.r3 { background: #d98a4f; color: #2a1400; border-color: #d98a4f; }
.ta-name { font-size: 10px; color: var(--text-dim); max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-cnt { font-size: 11px; font-weight: 800; color: var(--accent); }

/* 방 제목 옆 이번 달 게시자 아이콘 + 횟수 */
.ch-posters { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; flex: 0 0 auto; }
.ch-poster { display: inline-flex; align-items: center; gap: 1px; }
.ch-poster .avatar { width: 18px; height: 18px; border-radius: 6px; font-size: 9px; font-weight: 800; }
.ch-poster b { font-size: 10px; font-weight: 800; color: var(--text-dim); }

/* 갤러리 3달 창 하이라이트 밴드(전체 축에서 슬라이드) */
.mr-window { position: absolute; top: 10px; height: 10px; background: rgba(79,140,255,.28); border: 1px solid var(--accent); border-radius: 6px; pointer-events: none; z-index: 0; }

/* 상단바 우측 액션 묶음 + 앱 버전 표시(전원 아이콘 왼쪽) */
.appbar-title { flex: none; }
.appbar-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.app-ver { font-size: 11px; font-weight: 700; color: var(--text-dim); padding: 0 3px; letter-spacing: .02em; }

/* 상단바 가운데: 현재 접속자 아바타(인원수 따라 크기 자동조절, 많으면 겹침) + 타이핑 표시 */
.appbar-presence { --pa: 24px; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 6px; }
.appbar-presence:not(.has) { display: none; }
.appbar-presence .pa { flex: none; position: relative; display: inline-flex; transition: transform .16s ease; }
.appbar-presence .pa .avatar { width: var(--pa); height: var(--pa); border-radius: 50%; font-size: calc(var(--pa) * 0.44); color: #fff; display: grid; place-items: center; font-weight: 800; border: 1.5px solid var(--bg); box-sizing: border-box; }
.appbar-presence .pa.me .avatar { box-shadow: 0 0 0 1.5px var(--accent); }
.appbar-presence .pa.typing { transform: translateY(-1px) scale(1.12); z-index: 200 !important; }
.appbar-presence .pa.typing .avatar { border-color: #06d6a0; box-shadow: 0 0 0 2px rgba(6,214,160,.55); }
/* 오른쪽 하단 탭 아이콘 배지(지금 보고 있는 탭) — 채팅=⌨️, 입력 중이면 활성화 */
.pa-tab { position: absolute; right: -3px; bottom: -3px; min-width: 14px; height: 14px; padding: 0 1px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; background: var(--surface-2); border: 1.5px solid var(--bg); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.pa-tab.empty { display: none; }
.pa-tab.active { background: #06d6a0; border-color: #06d6a0; box-shadow: 0 0 0 2px rgba(6,214,160,.5); animation: patab .9s infinite ease-in-out; }
@keyframes patab { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }

/* 생일 설정 모달 */
#bdayModal .date-field input[type="date"] { font-size: 16px; }
.bday-actions { display: flex; gap: 8px; margin-top: 6px; }
.bday-actions .login-btn { flex: 1; margin: 0; }
.bday-actions .gallery-back { flex: 0 0 auto; }

/* 생일 모달 버튼 */
.bday-actions { display: flex; gap: 8px; margin-top: 10px; }
.bday-actions .login-btn { flex: 1; margin: 0; }
.bday-actions .gallery-back { flex: 0 0 auto; }
#bdayDateInput { font-size: 16px; }   /* iOS 포커스 확대 방지 */

/* 릴리즈 노트(업데이트 내역) */
.app-ver { cursor: pointer; }
.release-list { list-style: none; margin: 0; padding: 6px 14px calc(16px + var(--safe-bottom)); max-height: 70vh; overflow-y: auto; }
.release-item { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.release-item:last-child { border-bottom: 0; }
.release-item.cur { background: rgba(79,140,255,.10); border-radius: 8px; }
.rel-ver { flex: 0 0 auto; width: 74px; font-size: 12px; font-weight: 800; color: var(--accent); }
.release-item.cur .rel-ver { color: #00e0a0; }
.rel-desc { font-size: 13px; color: var(--text); line-height: 1.35; }

/* ===== 메시지 롱프레스 수정 메뉴 + 인라인 편집 (v123) ===== */
.msg-menu { position: fixed; z-index: 140; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.5); min-width: 128px; }
.msg-menu .mm-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text);
  font-size: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.msg-menu .mm-item:hover, .msg-menu .mm-item:active { background: rgba(255,255,255,.08); }
.msg-menu .mm-item.danger { color: #ff8fa3; }
.msg-edit { margin: 4px 0 2px; }
.msg-edit-ta { width: 100%; box-sizing: border-box; resize: none; background: var(--surface); color: var(--text);
  border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; font: inherit; line-height: 1.4; outline: none; }
.msg-edit-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.msg-edit-btns button { border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.msg-edit-btns .me-cancel { background: var(--surface-2); color: var(--text-dim); }
.msg-edit-btns .me-save { background: var(--accent); color: #fff; }
.msg-edit-btns .me-save:disabled { opacity: .6; cursor: default; }
.msg-edited { margin-left: 6px; font-size: 11px; color: var(--text-dim); }
/* 스레드 답글: ⋯ 수정·삭제 버튼(PC는 마우스 올리면, 터치는 흐리게 상시) + 내 답글에도 시간 표시 */
#threadMessages .msg.me .msg-meta { display: flex; justify-content: flex-end; }
#threadMessages .msg.me .msg-author { display: none; }
.msg-more { background: none; border: 0; color: var(--text-dim); font-size: 17px; line-height: 1; padding: 0 6px; border-radius: 6px; cursor: pointer; opacity: 0; }
#threadMessages .msg:hover .msg-more, .msg-more:focus-visible { opacity: 1; }
.msg-more:hover { background: rgba(127,127,127,.2); }
@media (hover: none) { .msg-more { opacity: .55; } }


/* ===== 중복 사진(pHash) 표시 (v124) ===== */
.pc-dup { position: absolute; left: 5px; top: 5px; z-index: 2; background: rgba(0,0,0,.62); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 10px; }
.lbi-dups { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lbi-dups::-webkit-scrollbar { display: none; }
.lbi-dup-cell { flex: 0 0 auto; width: 60px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.lbi-dup-cell.cur { border-color: var(--accent); }
.lbi-dup-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 미지정 인물 이름지정 팝업(얼굴 표시) + 댓글 아바타 (v127) ===== */
#personNameModal { z-index: 130; }   /* 라이트박스(120) 위로 */
.pn-body { padding: 22px 18px calc(18px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; }
.pn-face { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); background: var(--surface-2); }
.pn-title { margin: 14px 0 12px; font-size: 15px; font-weight: 700; text-align: center; }
.pn-body .place-input { width: 100%; box-sizing: border-box; }
.pn-body .place-actions { width: 100%; margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
.pn-cancel { background: var(--surface-2); color: var(--text-dim); border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* 댓글: 이름 왼쪽에 아바타 아이콘 */
.lbi-c { display: flex; align-items: flex-start; gap: 7px; }
.lbi-c .avatar { width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 800; flex: 0 0 auto; overflow: hidden; }
.lbi-c-body { flex: 1; min-width: 0; }
.lbi-c-imgs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.lbi-c-img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: none; cursor: pointer; }
.lbi-c-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== MM(매터모스트) 유저 상태 = active 이면 아바타 초록 테두리 (v127) ===== */
.appbar-presence .pa.mm-active .avatar { border-color: #22c55e; box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3.5px #22c55e; }

/* ===== 인물 생일 음력/양력 토글 + 라벨 (v129) ===== */
.bday-cal { display: flex; gap: 8px; margin-top: 10px; }
.bcal { flex: 1; padding: 9px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-dim); font-size: 14px; font-weight: 700; cursor: pointer; }
.bcal.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.bd-cal { font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(79,140,255,.16); padding: 1px 6px; border-radius: 6px; }

/* ===== PC(넓은 화면): 사진 셀을 화면폭에 맞춰 열 늘려 적정 크기로 (v132) =====
   모바일은 기존 3열 유지, 640px 이상부터 auto-fill 로 열을 늘려 셀이 커지지 않게. */
@media (min-width: 640px) {
  .photo-grid  { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ===== 게임 탭 ===== */
#view-game .game-body{padding:14px}
.game-select{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gsel{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:16px 14px;min-height:120px;color:var(--text);cursor:pointer}
.gsel:not(.soon):active{border-color:var(--accent)}
.gsel.soon{opacity:.5}
.gsel .gemoji{font-size:30px}
.gsel .gname{font-weight:800;font-size:15px;margin-top:4px}
.gsel .gdesc{font-size:11.5px;color:var(--text-dim)}
.gsel .gsoon{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;color:var(--text-dim);background:var(--line);border-radius:999px;padding:2px 8px}
/* 방 목록 */
.room-list{display:flex;flex-direction:column;gap:10px}
.room-card{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer}
.rc-ico{width:42px;height:42px;border-radius:12px;background:#22304e;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.rc-body{flex:1;min-width:0}
.rc-name{font-weight:800;font-size:14.5px}
.rc-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.rc-avs{display:flex;margin-top:6px;align-items:center}
.rc-avs .avatar{width:22px;height:22px;font-size:10px;margin-left:-6px;border:2px solid var(--surface-2);border-radius:50%;overflow:hidden}
.rc-avs .avatar:first-child{margin-left:0}
.pav-empty{width:22px;height:22px;border-radius:50%;border:2px dashed var(--line);color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;font-size:11px;margin-left:-6px}
.rc-status{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;flex:0 0 auto}
.rc-status.wait{background:rgba(52,199,89,.16);color:#34c759}
.rc-status.play{background:rgba(239,68,68,.16);color:#ff6b6b}
.rc-btn{flex:0 0 auto;font-size:12px;font-weight:800;border-radius:999px;padding:8px 14px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.rc-btn.join{background:var(--accent);border:none;color:#fff}
/* 대기방 */
.waitroom{background:var(--surface-2);border:1px solid var(--accent);border-radius:16px;padding:14px}
.wr-head{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.wr-sub{font-size:11.5px;color:var(--text-dim);margin:2px 0 12px}
.wr-seats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.seat{display:flex;align-items:center;gap:8px;background:#0d1526;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px}
.seat .avatar{width:26px;height:26px;border-radius:50%;font-size:11px;flex:0 0 auto;overflow:hidden}
.seat-name{font-weight:700}
.seat.empty{color:var(--text-dim);border-style:dashed;justify-content:center}
.seat-host{font-size:9.5px;font-weight:800;background:var(--accent);color:#fff;border-radius:5px;padding:1px 5px;margin-left:auto}
.wr-note{font-size:12.5px;color:#34c759;font-weight:700;margin-bottom:10px}
.wr-actions{display:flex;gap:8px}
.wr-start{flex:1;padding:12px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;font-size:14px;cursor:pointer}
.wr-start:disabled{opacity:.5}
.wr-dim{font-weight:600;font-size:11px;opacity:.85}
.wr-waiting{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:12.5px}
.wr-leave{flex:0 0 auto;width:84px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-weight:800;cursor:pointer}

/* ===== 루미큐브 보드 ===== */
#view-game .game-body{padding:0}
.rk-top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.rk-turn{font-size:14px}
.rk-pool{font-size:12.5px;color:var(--text-dim);font-weight:700}
.rk-players{display:flex;gap:8px;overflow:auto;padding:8px 14px}
.rk-pl{flex:0 0 auto;font-size:12px;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.rk-pl.now{border-color:var(--accent);color:var(--text)}
.rk-pl b{color:var(--accent)}
.rk-pl i{font-style:normal;color:#ff6b6b;font-size:10px}
.rk-board{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;padding:12px;margin:0 12px;background:rgba(20,30,52,.5);border:1px dashed var(--line);border-radius:12px;min-height:180px}
.rk-set{display:flex;gap:3px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:5px}
.rk-set.newslot{align-items:center;justify-content:center;text-align:center;color:var(--text-dim);font-size:11px;border-style:dashed;min-width:80px;cursor:pointer}
.rk-tile{width:32px;height:44px;border-radius:6px;background:#f4ecd8;color:#222;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.4);font-weight:900;flex:0 0 auto;border:none;cursor:pointer;padding:0}
.rk-tile .rk-num{font-size:18px;line-height:1}
.rk-tile.red{color:#e01020}.rk-tile.blue{color:#1560d8}.rk-tile.black{color:#1a1a1a}.rk-tile.orange{color:#d98000}.rk-tile.joker{color:#c026d3}
/* 주황=진한 앰버(아래줄 밑줄로 빨강과 확실히 구분) */
.rk-tile.orange .rk-num{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:1px}
.rk-tile .rk-num{-webkit-text-stroke:.3px rgba(0,0,0,.15)}
.rk-tile.sel{outline:3px solid var(--accent);outline-offset:1px}
.rk-rack-wrap{position:sticky;bottom:0;margin-top:12px;background:var(--surface);border-top:1px solid var(--line);padding:10px 12px calc(12px + var(--safe-bottom))}
.rk-rack-t{font-size:11.5px;color:var(--text-dim);font-weight:700;margin-bottom:8px}
.rk-rack{display:flex;flex-wrap:wrap;gap:5px;background:#0d1526;border:1px solid var(--line);border-radius:12px;padding:8px;min-height:52px}
.rk-actions{display:flex;gap:7px;margin-top:10px}
.rk-a{flex:1;padding:11px 6px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-weight:800;font-size:12.5px;cursor:pointer}
.rk-a:disabled{opacity:.4}
.rk-a.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff}

/* ===== 포인트(코인) ===== */
.profile-wrap{display:flex;flex-direction:row-reverse;align-items:center;gap:4px;line-height:1}
.coin-mini{font-size:13px;font-weight:800;color:#f0b429;white-space:nowrap}
.p-coin{font-size:11px;font-weight:800;color:#f0b429;margin-top:1px}

/* 방 만들기 타이머 선택 + 보드 카운트다운 */
.gc-tlabel{font-size:12px;color:var(--text-dim);font-weight:700;margin:12px 0 8px}
.gc-timers{display:flex;flex-wrap:wrap;gap:7px}
.gc-t{font-size:12.5px;font-weight:700;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer}
.gc-t.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rk-timer{font-size:14px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.rk-timer.low{color:#ff6b6b}

/* ===== 게임 음성(WebRTC) 바 ===== */
.game-voice{display:flex;align-items:center;gap:7px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface);overflow:auto}
.game-voice .v-label{font-size:15px;flex:0 0 auto}
.v-peer{position:relative;flex:0 0 auto}
.v-peer .avatar{width:26px;height:26px;border-radius:50%;font-size:11px;overflow:hidden}
.v-peer.muted::after{content:"🔇";position:absolute;bottom:-4px;right:-5px;font-size:10px}
.v-spacer{flex:1}
.v-btn{flex:0 0 auto;font-size:12px;font-weight:800;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:7px 11px;cursor:pointer}
.v-btn.mic.on{background:rgba(52,199,89,.16);border-color:#34c759;color:#34c759}
.v-btn.mute.on{background:rgba(239,68,68,.16);border-color:#ff6b6b;color:#ff6b6b}
.rk-sfx{flex:0 0 auto;border:none;background:transparent;font-size:16px;cursor:pointer;padding:0 2px}
.rk-tile{touch-action:none}
.rk-drag-ghost{position:fixed;transform:translate(-50%,-130%);z-index:9999;pointer-events:none;background:#1f2b45;color:#fff;border:1px solid #5a9;border-radius:9px;padding:6px 11px;font-weight:800;font-size:15px;box-shadow:0 8px 20px rgba(0,0,0,.45);opacity:.96}
.rk-drop-hi{outline:2px dashed #6ad;outline-offset:2px;background:rgba(90,150,220,.14);border-radius:8px}
.rk-dragging,.rk-dragging *{cursor:grabbing !important;user-select:none}
.seat.addbot{cursor:pointer;border:1px dashed #5a9;color:#7dd;background:rgba(90,160,120,.08);font-weight:700}
.seat.addbot:hover{background:rgba(90,160,120,.16)}
.seat.bot .bot-av,.seat-av.bot-av{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#22314f;font-size:20px}
.seat-delbot{margin-left:6px;border:none;background:transparent;color:#e88;cursor:pointer;font-size:14px;font-weight:800}
.seat.addbot{flex-direction:column;gap:4px;border:1px dashed #5a9;background:rgba(90,160,120,.08)}
.addbot-t{font-size:12px;color:#7dd;font-weight:700}
.addbot-lv{display:flex;gap:4px}
.ab-lv{width:26px;height:26px;border-radius:6px;border:1px solid #3a4a66;background:var(--surface-2);color:#cde;font-weight:800;cursor:pointer;font-size:13px}
.ab-lv:hover{background:#22406a}
.ab-easy{border-color:#4a7} .ab-mid{border-color:#c94} .ab-hard{border-color:#c55}
.lv-badge{display:inline-block;min-width:15px;text-align:center;padding:0 4px;border-radius:6px;font-size:10px;font-weight:800;color:#0b1220;vertical-align:middle}
.lv-easy{background:#6ad07a} .lv-mid{background:#e0b24a} .lv-hard{background:#e56a6a}
.rk-set.bad{border:1px solid #e55 !important;box-shadow:0 0 0 1px #e55 inset;background:rgba(230,85,85,.08)}
.rk-end{color:#e88}
.rk-caret{position:fixed;width:3px;border-radius:2px;background:#7cf;box-shadow:0 0 6px #7cf,0 0 2px #fff;z-index:9998;pointer-events:none;transition:left .04s linear,top .04s linear}
.rk-pot{flex:0 0 auto;font-size:13px;font-weight:800;color:#ffd77a;padding:0 4px}
.gc-s.on{background:#c9a227;color:#241a00;border-color:#c9a227}
/* 팀 로비 */
.gc-m,.gc-tn{padding:6px 10px;border-radius:8px;border:1px solid #33415e;background:#141d30;color:#cdd;font-weight:700;cursor:pointer}
.gc-m.on,.gc-tn.on{background:#2b6cb0;color:#fff;border-color:#2b6cb0}
.team-boxes{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.team-box{flex:1 1 140px;min-width:130px;border:1px solid #2a3550;border-radius:12px;padding:8px;background:#0f1626}
.team-box-t{font-size:12px;font-weight:800;color:#9db4d6;margin-bottom:6px}
.team-seats{display:flex;flex-direction:column;gap:6px}
.wr-team-tag{font-size:11px;background:#2b6cb0;color:#fff;border-radius:6px;padding:1px 6px;font-weight:800}
.seat-move{display:inline-flex;gap:3px;margin-left:auto}
.seat-move button{width:22px;height:22px;border-radius:6px;border:1px solid #3a4a66;background:var(--surface-2);color:#cde;font-weight:800;cursor:pointer;font-size:12px}
/* 팀 턴 표시(보드) */
.rk-pl.rk-teamg{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:10px;border:2px solid transparent}
.rk-pl.rk-teamg.unmelded{border-color:#e5484d}
.rk-pl.rk-teamg.now{background:rgba(90,150,220,.18)}
.rk-tm{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;border-radius:50%;background:#22314f;font-size:11px;font-weight:800;border:2px solid transparent}
.rk-tm.ctrl{border-color:#8aff5a;box-shadow:0 0 6px #8aff5a}
.seat-move-lbl{color:#8aa;font-size:11px;margin-right:1px}
.seat-move button{white-space:nowrap;padding:0 6px;width:auto;min-width:22px}
.seat-move button:disabled{opacity:.35;cursor:default}
.seat[data-drag]{cursor:grab;touch-action:none}
.seat.seat-dragging{opacity:.4}
.team-box.tb-drop-hi{outline:2px dashed #6ad;outline-offset:2px;background:rgba(90,150,220,.12)}
.seat-drag-ghost{position:fixed;transform:translate(-50%,-130%);z-index:9999;pointer-events:none;background:#1f2b45;color:#fff;border:1px solid #5a9;border-radius:9px;padding:6px 11px;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
/* 공용 타일 영역만 스크롤(위 헤더·턴·플레이어는 고정) */
.rk-board{max-height:44vh;overflow-y:auto;overflow-x:hidden}
/* 공용 타일 밀도 축소(--bts) */
#rkBoard .rk-tile{width:calc(32px * var(--bts,1));height:calc(44px * var(--bts,1))}
#rkBoard .rk-tile .rk-num{font-size:calc(18px * var(--bts,1))}
/* 근접 돋보기: 드래그 중 대상 세트 확대 */
.rk-set{transition:transform .08s ease}
.rk-set.rk-magnify{transform:scale(1.28);transform-origin:center;z-index:6;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.5)}
/* 힌트: 유의미한 내 타일 강조(밝은 아웃라인) */
.rk-tile.hint{outline:3px solid #ffd84a;outline-offset:1px;box-shadow:0 0 10px #ffd84a,inset 0 -3px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.4)}
.rk-sfx.on{filter:drop-shadow(0 0 4px #ffd84a)}
/* ===== 게임 보드 공간 효율화 ===== */
/* 상단 압축: 방이름/음성/턴줄 높이 최소화 */
#view-game .roster-head{padding:6px 12px 4px}
.game-voice{padding:3px 10px}
.game-voice .v-label{font-size:13px}
.rk-top{padding:5px 12px;gap:8px}
.rk-players{padding:4px 12px;gap:6px}
/* 공용 영역 더 크게(위 확보) */
.rk-board{max-height:52vh;min-height:120px}
/* 중간 버튼을 한 줄로(설명·무르기·정렬·뽑기·확인) — 손패 위에 */
.rk-rack-wrap{margin-top:6px;padding:6px 12px calc(6px + var(--safe-bottom))}
.rk-rack-bar{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.rk-rack-t{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-rack-bar .rk-a{flex:0 0 auto;padding:8px 12px}
.rk-rack-bar .rk-a.mini{padding:7px 9px;font-size:12px}
.rk-actions{display:none}
/* ===== 게임 보드 3영역 압축 (v184) ===== */
/* 보드 중엔 방이름 헤더 숨김 → 상단 1줄(rk-top)로 */
#view-game.rk-playing .roster-head{display:none}
/* 게임뷰를 세로 flex로 채워 rack을 맨 아래에 붙이고 보드가 중간을 채움 */
#view-game[data-active="true"]{display:flex;flex-direction:column;min-height:0}
#view-game .game-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.game-body>.rk-board{flex:1 1 auto;min-height:120px;max-height:none}
.rk-rack-wrap{position:static}
/* 공용 보드 줄 간격 축소 → 타일이 상대적으로 커짐 */
.rk-board{gap:5px 8px;padding:8px}
.rk-set{padding:4px;gap:3px}
/* 효과음 꺼짐: 물결 없는 스피커 + 흐림(빗금 대신 직관적) */
.rk-sfx.off{opacity:.4;filter:grayscale(1)}
/* 미등록 표시: 텍스트 대신 칩 빨간 아웃라인(너비 절약) */
.rk-pl.unmelded{border-color:#e5484d !important;box-shadow:0 0 0 1px #e5484d inset}
/* 현재 차례 표시: 아웃라인 대신 연두형광 은은한 음영/글로우 */
.rk-pl.now{border-color:var(--line);background:rgba(138,255,90,.15);box-shadow:0 0 10px rgba(138,255,90,.3);color:var(--text)}
.rk-pl.rk-teamg.now{background:rgba(138,255,90,.15);box-shadow:0 0 10px rgba(138,255,90,.3)}
/* 현재 차례 연두형광 더 진하게 */
.rk-pl.now,.rk-pl.rk-teamg.now{background:rgba(138,255,90,.28) !important;box-shadow:0 0 14px rgba(138,255,90,.6),0 0 4px rgba(138,255,90,.9) !important;border-color:rgba(138,255,90,.6) !important}
/* 새 세트 드롭 타겟 확장: 슬롯 크게 + 빈 보드 영역 전체가 타겟 */
.rk-set.newslot{flex:1 1 160px;min-width:150px;min-height:56px;align-self:stretch;justify-content:center;font-size:13px}
#rkBoard.rk-drop-hi{outline:2px dashed #6ad;outline-offset:-4px;background:rgba(90,150,220,.10)}
/* 팀 로비: 드래그 중심으로 칩 정리(이동버튼 제거) */
.team-drag-hint{font-size:12px;color:#8ab;margin:2px 2px 8px}
.team-seats .seat{min-height:52px}
.seat[data-drag]{cursor:grab}
.seat .seat-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.seat.bot .bot-av,.seat-av.bot-av{width:34px;height:34px;font-size:18px;flex:0 0 auto}
.seat-host{flex:0 0 auto}
/* 로봇 보조: 로봇이 옮긴 타일 + 로봇 아이콘 돋보이게 */
.rk-tile.botmoved{outline:3px solid #ff9d2e;outline-offset:1px;box-shadow:0 0 12px #ff9d2e,inset 0 -3px 0 rgba(0,0,0,.12);animation:botPulse 1.2s ease-in-out infinite}
.rk-tm.moved{border-color:#ff9d2e;box-shadow:0 0 10px #ff9d2e;animation:botPulse 1.2s ease-in-out infinite}
@keyframes botPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
/* PC(넓은 화면): 베젤 없이 화면 전체 폭 사용(캡 제거) */
@media (min-width: 1000px) {
  body { background: #05070d; }
}
/* PC: 타일 크게(폰 32×44 → 약 2배). --bts(밀도축소)도 이 크기 기준으로 적용 */
@media (min-width: 1000px) {
  .rk-tile { width: 64px; height: 88px; border-radius: 9px; }
  .rk-tile .rk-num { font-size: 36px; }
  #rkBoard .rk-tile { width: calc(64px * var(--bts,1)); height: calc(88px * var(--bts,1)); }
  #rkBoard .rk-tile .rk-num { font-size: calc(36px * var(--bts,1)); }
  .rk-set { padding: 6px; gap: 4px; }
  .rk-board { gap: 8px 10px; }
}
/* 조커 타일: 연보라 배경 + 보라 J 로 확실히 구분 */
.rk-tile.joker{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);color:#a021d6}
.rk-tile.joker .rk-num{font-style:italic}
/* 라인 아이콘 공통 사이즈/정렬 */
.ico{display:inline-block;width:18px;height:18px;vertical-align:middle}
.rk-sfx{display:inline-flex;align-items:center;justify-content:center}
.rk-sfx .ico{width:20px;height:20px}
.rk-a{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.rk-a .ico{width:17px;height:17px}
.rk-a.mini .ico{width:16px;height:16px}
.rk-pool,.rk-pot{display:inline-flex;align-items:center;gap:3px}
.rk-pool .ico,.rk-pot .ico{width:15px;height:15px}
.rk-timer{display:inline-flex;align-items:center;gap:3px}
.rk-clock .ico{width:14px;height:14px}
#rkTimer.low{color:#e5484d}
.rk-timer.low .rk-clock{color:#e5484d}
.pa-tab{display:flex;align-items:center;justify-content:center}
.pa-tab .ico{width:11px;height:11px}
/* ===== 루미큐브 세련화(v206) ===== */
/* 타일: 아이보리 그라데이션 + 부드러운 입체감 */
.rk-tile{background:linear-gradient(180deg,#fcf7ec 0%,#efe3cd 100%);border:1px solid rgba(120,90,40,.14);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(120,80,30,.12),0 2px 5px rgba(0,0,0,.35);color:#2a2a2a}
.rk-tile.sel{box-shadow:0 0 0 2px #4f8cff,0 4px 10px rgba(79,140,255,.5);transform:translateY(-2px)}
.rk-tile .rk-num{text-shadow:0 1px 0 rgba(255,255,255,.5)}
/* 세트 카드 */
.rk-set{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rk-board{background:rgba(12,20,36,.55);border:1px solid rgba(255,255,255,.06);border-radius:14px}
.rk-board.rk-drop-hi{outline:2px dashed #6ad;outline-offset:-5px;background:rgba(90,150,220,.10)}
/* 상단바·플레이어 */
.rk-top{gap:10px}
.rk-turn{font-weight:800;letter-spacing:-.2px}
.rk-pl{border-radius:999px;background:var(--surface-2);border:1px solid rgba(255,255,255,.08)}
.rk-sfx{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text);transition:background .12s}
.rk-sfx:hover{background:rgba(255,255,255,.1)}
.rk-sfx.on{background:rgba(138,255,90,.16);border-color:rgba(138,255,90,.5);color:#c8ffb0}
.rk-pool,.rk-pot{padding:4px 8px;border-radius:9px;background:rgba(255,255,255,.05);font-weight:800}
.rk-pot{color:#ffd77a}
/* 조작 버튼 */
.rk-a{border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);font-weight:800;transition:background .12s}
.rk-a:hover:not(:disabled){background:rgba(255,255,255,.12)}
.rk-a.primary{background:linear-gradient(135deg,#5b8cff,#8a6bff);border:none;box-shadow:0 3px 10px rgba(90,110,255,.4)}
/* 음성 바 */
.game-voice{border-bottom:1px solid rgba(255,255,255,.06)}
.v-btn{display:inline-flex;align-items:center;gap:5px;border-radius:10px}
.v-btn .ico{width:16px;height:16px}
.v-label .ico{width:16px;height:16px}
/* 로비: 방 카드·팀 박스 */
.room-card{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.team-box{border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}
.seat{border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
/* 자체 루미큐브 아이콘 크기(마작패 교체) */
.rummi-ico{width:44px;height:auto;vertical-align:middle;display:inline-block}
.gemoji .rummi-ico{width:62px}
.rc-ico .rummi-ico{width:38px}
.wr-head .rummi-ico{width:30px}
/* 반려동물 상세 대표 사진(인물 상세처럼) */
.pv-pet-rep{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.15);flex:0 0 auto}
.pv-pet-name{font-weight:800;font-size:15px;margin-right:2px}
/* 우하단 설정 FAB(계정/관리 진입) */
/* 설정(관리) 탭 — 관리자 전용, 탭바 항목으로 배치 */
#settingsFab .tab-ico{color:#9fb0c8}

/* 공지 배너 (헤더 아래) */
.notice-bar{display:flex;align-items:center;gap:8px;padding:7px 14px;background:linear-gradient(90deg,#fff7e6,#fff1d6);border-bottom:1px solid #f0d9a8;color:#6b4e12;font-size:13px;line-height:1.4}
.notice-bar .notice-ico{flex:0 0 auto;font-size:14px}
.notice-bar .notice-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.pf-notice-edit{display:flex;gap:8px;align-items:center;margin:6px 0}
.pf-notice-edit .place-input{flex:1 1 auto;min-width:0}
.pf-notice-edit .login-btn{flex:0 0 auto;width:auto;padding:8px 14px}

/* 달력: 그날 등장 인물 얼굴 아이콘 */
.cal-faces{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin:1px 0}
.cal-face{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.35);background:var(--surface-2)}
.cal-face-more{font-size:8px;font-weight:700;color:var(--text-dim);line-height:16px}
@media (min-width:1000px){ .cal-face{width:22px;height:22px} .cal-face-more{line-height:22px;font-size:10px} }

/* ===== 마피아 게임 ===== */
.mafia{padding:10px 12px 90px}
.mafia.night{background:#0a0a14;border-radius:14px}
.mf-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mf-phase{font-weight:800;font-size:15px;padding:5px 12px;border-radius:16px}
.mf-phase.night{background:#1a1030;color:#c9a6ff}.mf-phase.day{background:#fff3d6;color:#a9740f}
.mf-hostbadge{font-size:11px;font-weight:700;background:#2a2410;color:#f5c451;border-radius:12px;padding:3px 9px}
.mf-alive-n{margin-left:auto;font-size:12px;color:var(--text-dim)}
.mf-role{display:flex;align-items:center;gap:11px;border-radius:14px;padding:12px 13px;margin-bottom:12px;border:1px solid}
.mf-role.mf{background:linear-gradient(135deg,#2a0f18,#160a12);border-color:#5a2338}
.mf-role.cp{background:linear-gradient(135deg,#0f2438,#0a1626);border-color:#23557f}
.mf-role.dc{background:linear-gradient(135deg,#0f3326,#0a1c16);border-color:#1f6b47}
.mf-role.ct{background:#141a26;border-color:#2a3446}
.mf-role.dead{opacity:.6;filter:grayscale(.4)}
.mf-role-e{font-size:30px}
.mf-role b{font-size:15px;color:#fff}
.mf-mates{font-size:11px;color:#ff9db0;margin-top:3px}
.mf-narr{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;color:#cfe0ff;line-height:1.5;margin-bottom:12px}
.mf-narr b{color:#ff8fa3}
.mf-sec{font-size:12px;color:var(--text-dim);margin:4px 2px 9px}
.mf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.mf-cell{background:var(--bg);border:1px solid var(--surface-2);border-radius:13px;padding:11px 6px;text-align:center;position:relative;color:var(--text)}
.mf-cell.act{cursor:pointer}
.mf-cell.act:active{transform:scale(.97)}
.mf-cell.sel{border-color:#ff4d6d;box-shadow:0 0 0 2px #ff4d6d;background:#1e0d15}
.mafia.day .mf-cell.sel{border-color:#f0a020;box-shadow:0 0 0 2px #f0a020}
.mf-cell.dead{opacity:.45}.mf-cell.dead:after{content:'💀';position:absolute;top:5px;right:7px;font-size:12px}
.mf-cell[disabled]{opacity:.6;pointer-events:none}
.mf-av{display:block;width:46px;height:46px;margin:0 auto 6px}
.mf-av img,.mf-av .avatar,.mf-av>*{width:46px !important;height:46px !important;border-radius:50% !important;font-size:20px !important}
.mf-nm{font-size:12px}
.mf-vc{position:absolute;top:5px;left:6px;font-size:11px;font-weight:700;color:#ff9db0}
.mafia.day .mf-vc{color:#c8860f}
.mf-log{background:#0b1420;border:1px solid #1b2c40;border-radius:12px;padding:9px 11px;font-size:12px;color:var(--text-dim)}
.mf-log-h{font-size:11px;color:#7d8aa3;margin-bottom:5px}
.mf-log-i{padding:2px 0}.mf-log-i .good{color:#4ee38a}.mf-log-i .bad{color:#ff8fa3}
.mf-wait{text-align:center;padding:34px 16px}
.mf-moon{font-size:52px;animation:mffl 3s ease-in-out infinite}
@keyframes mffl{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-6px);opacity:1}}
.mf-wait h3{color:#cdd8ea;margin:12px 0 5px}.mf-wait p{color:#7d8aa3;font-size:13px}
.mf-host{margin-top:8px;background:var(--bg);border:1px solid #2a2140;border-radius:14px;padding:12px}
.mf-host-t{font-size:11px;color:var(--text-dim);margin-bottom:9px}
.mf-btn{display:block;width:100%;border:0;border-radius:12px;padding:14px;font-size:15px;font-weight:800}
.mf-btn.adv{background:linear-gradient(135deg,#f0a020,#e57a12);color:#241400}
.mf-btn.leave{background:#132038;color:var(--text-dim);border:1px solid var(--line)}
.mafia.day .mf-btn.adv{background:linear-gradient(135deg,#3a5aa0,#26407a);color:#dfe9ff}
/* 결과 */
.mafia.end{text-align:center}
.mf-win{padding:22px 12px 16px}.mf-win-e{font-size:48px}
.mf-win h2{font-size:22px;margin:8px 0 4px}
.mafia.m-cit .mf-win h2{color:#7dc0ff}.mafia.m-maf .mf-win h2{color:#ff8fa3}
.mf-win p{color:var(--text-dim);font-size:13px}
.mf-grid.reveal .mf-cell{cursor:default}
.mf-rl{display:inline-block;margin-top:5px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px}
.mf-rl.mf{background:#3a1420;color:#ff8fa3}.mf-rl.cp{background:#12233a;color:#8fd0ff}.mf-rl.dc{background:#12351f;color:#7de3b0}.mf-rl.ct{background:#241a30;color:#c9b3e6}
.mf-pot{margin:12px 0;font-size:13px;color:#f5c451}
.mf-abar{margin-top:14px}
.mafia-roleprev{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;color:#cfe0ff;margin:8px 0 12px;text-align:center}

/* 방 만들기 — 마피아 인원 선택 + 역할 미리보기 힌트 */
.gc-c{font-size:12.5px;font-weight:700;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer}
.gc-c.on{background:var(--accent);border-color:var(--accent);color:#fff}
.gc-mf-hint{font-size:11.5px;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-top:9px;line-height:1.5}

/* ===== 채팅 파일 드래그앤드롭 ===== */
.message-pane{position:relative}
.chat-drop{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(11,18,32,.72);backdrop-filter:blur(3px);pointer-events:none}
.chat-drop-in{border:2.5px dashed var(--accent,#4f8cff);border-radius:18px;padding:26px 34px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#dbe6ff;font-size:15px;font-weight:700;background:rgba(30,45,75,.55)}
.chat-drop-in .cd-ico{font-size:40px}
/* 비이미지 첨부 미리보기 칩 */
.cp-thumb.cp-file{width:auto;max-width:160px;display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.cp-thumb.cp-file .cp-fico{font-size:18px;flex:0 0 auto}
.cp-thumb.cp-file .cp-fname{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.cp-thumb.cp-file .cp-del{position:static;margin-left:2px}

/* 업로드 진행바(큰 파일) */
.upload-bar{width:100%;padding:6px 10px 2px;box-sizing:border-box}
.upload-bar .ub-track{height:8px;border-radius:5px;background:var(--surface-2,var(--surface-2));overflow:hidden;border:1px solid var(--line,var(--line))}
.upload-bar .ub-fill{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#4f8cff,#7db0ff);transition:width .15s ease}
.upload-bar .ub-txt{font-size:11px;color:var(--text-dim,var(--text-dim));margin-top:4px;text-align:center}
/* 100% 도달 후 서버 저장 대기 — 멈춘 게 아님을 알리는 움직이는 줄무늬 */
.upload-bar.processing .ub-fill{width:100%;background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%,transparent);background-size:22px 22px;animation:ubstripe .8s linear infinite}
@keyframes ubstripe{from{background-position:0 0}to{background-position:22px 0}}

/* 메시지 영상/파일 첨부 */
.msg-video{max-width:min(320px,78%);width:100%;border-radius:12px;background:#000;margin-top:4px;display:block}
.msg-file{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:8px 12px;background:var(--surface-2,var(--surface-2));border:1px solid var(--line,var(--line));border-radius:12px;color:var(--text,var(--text));font-size:13px;text-decoration:none;max-width:78%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-file:hover{background:var(--surface,var(--surface))}

/* 관리자: 계정별 이미치 연동 */
.pf-u-immich{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:7px;padding-top:8px;border-top:1px dashed var(--line,var(--line))}
.pf-u-im-st{font-size:12px;color:var(--text-dim)}
.pf-u-im-st.on{color:#1a9a55;font-weight:700}
.pf-u-imkey{flex:1;min-width:150px;padding:7px 10px;border:1px solid var(--line,var(--line));border-radius:9px;background:var(--surface-2,var(--surface));color:var(--text,var(--text));font-size:12px}
.pf-u-imsave,.pf-u-imclear{border:0;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer}
.pf-u-imsave{background:#2f6dc0;color:#fff}
.pf-u-imclear{background:#3a2330;color:#ff8fa3}

/* 관리자: 인물 기반 공유 토글 */
.pf-u-imshare{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line,var(--line))}
.pf-u-sh-lbl{font-size:12px;color:var(--text-dim);flex:1}
.pf-u-sh-lbl b{color:var(--text)}
.pf-u-sh-hint{font-size:11px;color:#f0c05a}
.pf-sw{position:relative;width:46px;height:26px;flex:0 0 auto;cursor:pointer}
.pf-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pf-sw-t{position:absolute;inset:0;background:#28344c;border-radius:20px;transition:.18s}
.pf-sw-t:before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.18s}
.pf-sw input:checked+.pf-sw-t{background:#2ecb74}
.pf-sw input:checked+.pf-sw-t:before{left:23px}

/* 갤러리: 이미치 출처 표시 주황 LED(좌상단) */
.photo-cell{position:relative}
.pc-led{position:absolute;top:5px;left:5px;width:9px;height:9px;border-radius:50%;background:#ff8c00;box-shadow:0 0 6px 1px rgba(255,140,0,.9),0 0 0 1px rgba(0,0,0,.3);z-index:2;pointer-events:none;animation:ledpulse 2s ease-in-out infinite}
@keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* 갤러리 시간바: x축 경계선(눈금) + 축 라벨 (밀도 박스와 정렬) */
.mr-ticks{position:absolute;left:10px;right:10px;top:6px;height:18px;z-index:1;pointer-events:none}
.mr-tick{position:absolute;top:0;height:100%;width:1px;background:rgba(255,255,255,.22)}
.mr-tick.major{width:1.5px;background:rgba(255,255,255,.5)}
.mr-axis{position:relative;height:13px;margin:3px 10px 0}
.mr-axis .mr-tk{position:absolute;top:0;transform:translateX(-50%);font-size:9px;line-height:1;color:var(--text-dim,var(--text-dim));white-space:nowrap}

/* 지도: 이미치 사진 핀에 주황 LED */
.photo-pin{position:relative}
.photo-pin .pin-led{position:absolute;top:-2px;left:-2px;width:10px;height:10px;border-radius:50%;background:#ff8c00;box-shadow:0 0 6px 1px rgba(255,140,0,.9),0 0 0 1.5px #fff;z-index:3;pointer-events:none}

/* 인물 상세: 이미치 인물 매칭 + 사진 */
.person-immich{margin:6px 10px 12px;padding:11px 12px;background:var(--surface-2,var(--surface));border:1px solid var(--line,var(--line));border-radius:14px}
.pim-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.pim-badge{font-size:13px;color:#cfe0ff}.pim-badge b{color:#fff}
.pim-badge.dim{color:var(--text-dim)}
.pim-btn{border:0;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;background:#2f6dc0;color:#fff;cursor:pointer;margin-left:auto}
.pim-hint{font-size:12px;color:var(--text-dim)}
.pim-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px;margin-top:4px}
.pim-cell{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--surface,#0f1a2e);border:1px solid var(--line,var(--line));border-radius:11px;padding:8px 5px;cursor:pointer}
.pim-cell:hover{border-color:#2f6dc0}
.pim-face{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:#5f6b82;font-size:18px}
.pim-face img{width:100%;height:100%;object-fit:cover}
.pim-nm{font-size:11px;color:var(--text-dim);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.pim-grid .photo-cell{aspect-ratio:1/1}
.pim-grid .photo-cell img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.pim-btn.ghost{background:transparent;border:1px solid var(--line,var(--line));color:#9fb0c8}

/* 스레드 첨부 드래그 표시 */
.thread-panel.dragging{outline:2px dashed var(--accent,#3a7bd5);outline-offset:-6px}
.ch-preview.summ{color:#a9c6f5}
.channel-row.active .ch-preview.summ{color:var(--accent)}
/* 라이트 테마: 미리보기 글자가 흰 배경에서 너무 옅던 것 → 또렷한 진한 색으로 */
:root[data-theme="light"] .ch-preview{color:#46536b}
:root[data-theme="light"] .ch-preview b{color:#1b2436}
:root[data-theme="light"] .ch-preview.summ{color:#2f6dc0}
:root[data-theme="light"] .channel-row.active .ch-preview.summ{color:#1f4f96}

/* 게임 슬롯: 그 게임에 현재 참여 중인 사람 아바타 */
.gsel .gplayers{display:flex;align-items:center;width:100%;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.gsel .gpav{margin-right:-7px}
.gsel .gpav .avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface-2);font-size:11px;font-weight:800}
.gsel .gpmore{margin-left:13px;font-size:11px;color:var(--text-dim);font-weight:700}
.gsel .gpcount{margin-left:9px;font-size:10.5px;color:#2ecb74;font-weight:700;white-space:nowrap}

/* 끝말잇기 보드 */
.wc-board{display:flex;flex-direction:column;height:100%;gap:10px;padding:4px 2px}
.wc-players{display:flex;gap:10px;overflow:auto;padding:2px}
.wc-p{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
.wc-p .avatar{width:38px;height:38px;border-radius:50%;border:2px solid transparent;font-size:17px;font-weight:800}
.wc-p.turn .avatar{border-color:#f5c451;box-shadow:0 0 10px rgba(245,196,81,.5)}
.wc-p.out{opacity:.45}
.wc-pn{font-size:11px;color:var(--text-dim)}.wc-p.turn .wc-pn{color:#f5c451;font-weight:700}
.wc-pl{font-size:10px;color:var(--text-dim)}
.wc-chain{flex:1;overflow:auto;display:flex;flex-direction:column;gap:7px;padding:2px}
.wc-wc{display:flex;align-items:center;gap:9px;background:var(--surface-2,var(--surface));border:1px solid var(--line,var(--line));border-radius:12px;padding:8px 11px}
.wc-wc.me{border-color:#2f6dc0}
.wc-wc.new{border-color:#2ecb74;background:#12261c;animation:wcpop .3s}
@keyframes wcpop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.wc-wc .wc-cav .avatar{width:28px;height:28px;border-radius:50%;font-size:14px}
.wc-word{font-size:19px;font-weight:800}
.wc-meta{margin-left:auto;text-align:right;line-height:1.25}
.wc-meta .wc-nm{font-size:11px;color:var(--text-dim);display:block}.wc-meta .wc-tm{font-size:10px;color:#6f7c93}
.wc-inp{border-top:1px solid var(--line,var(--line));padding-top:9px}
.wc-turnbar{text-align:center;font-size:13px;color:#cfe0ff;margin-bottom:8px}.wc-turnbar b{color:#f5c451}.wc-mine{color:#4ad07f;font-weight:700}
.wc-inrow{display:flex;gap:8px}
.wc-inrow .wc-input{flex:1;background:var(--surface,#0f1a2e);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);font-size:17px}
.wc-inrow .wc-input:disabled{opacity:.5}
.wc-inrow .wc-send{width:54px;border:0;border-radius:12px;background:linear-gradient(135deg,#3a7bd5,#2f6dc0);color:#fff;font-size:17px;font-weight:800}
.wc-inrow .wc-send:disabled{opacity:.4}
.wc-end{text-align:center;padding:24px 16px}
.wc-end .wc-win-e{font-size:48px}.wc-end h2{margin:8px 0 14px;color:#f5c451}
.wc-sec{font-size:12px;color:#7a869c;margin:6px 0}
.wc-scores{display:flex;flex-direction:column;gap:7px;max-width:280px;margin:0 auto}
.wc-srow{display:flex;align-items:center;gap:9px;background:var(--surface-2,var(--surface));border:1px solid var(--line,var(--line));border-radius:11px;padding:8px 12px}
.wc-srow .wc-cav .avatar{width:28px;height:28px;border-radius:50%}
.wc-srow b{font-size:14px}.wc-srow .wc-sc{margin-left:auto;color:#f5c451;font-weight:800}
.wc-abar{margin-top:16px}.wc-btn.leave{border:0;border-radius:12px;padding:12px 22px;background:#3a2330;color:#ff8fa3;font-weight:700}
.gsel .gpword{margin-left:9px;font-size:11px;color:#f5c451;font-weight:700;white-space:nowrap}

/* 끝말잇기 게시판형: 다음글자 배너 + 안내 */
.wc-cuebar{text-align:center;font-size:14px;color:#cfe0ff;background:var(--surface-2,var(--surface));border:1px solid var(--line,var(--line));border-radius:12px;padding:9px}
.wc-cuebar b{color:#f5c451;font-size:18px}
.wc-hint{font-size:11px;color:#7a869c;text-align:center;margin-top:7px;line-height:1.4}
.wc-players .wc-pl{font-size:10px;color:var(--text-dim)}
/* 끝말잇기 턴제: 차례 배너 + 타이머 + 봇 */
.wc-turn{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:700;border-radius:12px;padding:11px;border:1px solid var(--line,var(--line))}
.wc-turn.mine{color:#0c1a10;background:linear-gradient(135deg,#5fe39a,#33c877);border-color:#2ecb74;box-shadow:0 0 14px rgba(46,203,116,.35)}
.wc-turn.bot{color:#cfe0ff;background:var(--surface-2,var(--surface))}
.wc-turn.other{color:var(--text-dim);background:var(--surface-2,var(--surface))}
.wc-timer{font-size:13px;font-weight:800;background:rgba(0,0,0,.22);border-radius:9px;padding:2px 9px;min-width:38px;text-align:center}
.wc-turn.mine .wc-timer{background:rgba(0,0,0,.18);color:#0c1a10}
.wc-bot-ava{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface-2);border:2px solid transparent}
.wc-p.turn .wc-bot-ava{border-color:#f5c451;box-shadow:0 0 10px rgba(245,196,81,.5)}
.wc-wc.bot{border-color:#5b6b8c;background:#161d2b}
.wc-restart{text-align:center;font-size:11px;color:#e0a94b;margin:3px 0 1px;opacity:.9}
/* 끝말잇기 한 판 종료(승자 없음) */
.wc-over{text-align:center;border-radius:14px;padding:14px 12px;background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line)}
.wc-over-t{font-size:20px;font-weight:800;color:#f5c451}
.wc-over-s{font-size:13px;color:#cfe0ff;margin-top:5px}.wc-over-s b{color:#f5c451}
.wc-over-sum{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;margin:11px 0}
.wc-sm{font-size:13px;color:var(--text-dim);background:rgba(255,255,255,.05);border-radius:9px;padding:4px 10px}.wc-sm b{color:#4ad07f;margin-left:2px}
.wc-newgame{border:0;border-radius:12px;padding:12px 26px;background:linear-gradient(135deg,#3a7bd5,#2f6dc0);color:#fff;font-size:15px;font-weight:800}
.wc-over-btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.wc-leavegame{border:1px solid var(--line);border-radius:12px;padding:12px 20px;background:var(--surface-2);color:var(--text-dim);font-size:14px;font-weight:700}
.wc-exit-row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.wc-leave2{border:1px solid var(--line);border-radius:10px;padding:8px 16px;background:var(--surface-2);color:var(--text-dim);font-size:13px;font-weight:700}
.wc-destroy{border:1px solid #6a2530;border-radius:10px;padding:8px 16px;background:#2a1116;color:#ff8a9c;font-size:13px;font-weight:800}
.wc-over-btns .wc-leave2,.wc-over-btns .wc-destroy{padding:12px 18px;font-size:14px}
.wc-inp-row2{display:flex;align-items:center;gap:8px;margin-top:7px}
.wc-inp-row2 .wc-hint{flex:1;text-align:left;margin:0}
.wc-endgame{flex:0 0 auto;border:1px solid #5a3a44;border-radius:10px;padding:7px 12px;background:#2a1c22;color:#ff9db0;font-size:12px;font-weight:700}
/* 로봇 수 선택 모달 */
.wc-pick-ov{position:fixed;inset:0;z-index:200;background:rgba(4,8,16,.66);display:flex;align-items:center;justify-content:center;padding:24px}
.wc-pick{background:var(--surface-2,var(--surface));border:1px solid var(--line);border-radius:18px;padding:22px 20px;text-align:center;max-width:320px;width:100%}
.wc-pick-t{font-size:22px;font-weight:800;color:#f5c451}
.wc-pick-sub{font-size:13px;color:var(--text-dim);margin:8px 0 16px;line-height:1.5}
.wc-pick-btns{display:flex;gap:10px;justify-content:center}
.wc-pick-b{flex:1;border:1px solid var(--line);border-radius:13px;padding:16px 0;background:var(--surface-2);color:var(--text);font-size:17px;font-weight:800}
.wc-pick-b:active{background:#22355a}
.wc-pick-x{margin-top:14px;border:0;background:none;color:var(--text-dim);font-size:13px}
.pav-bot{width:22px;height:22px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-left:-6px;border:1px solid var(--line,var(--line))}