/* ============================================================
DM 옵시디언 콰이엇 — dm.css "뒤에" 로드하는 오버라이드 레이어
← 이 줄 추가
원칙: 순흑·헤어라인·큰 여백. 인디고(#4361ff)는 안읽음·전송·활성에만.
글로우·그라디언트·아우라 전면 제거.
(출처: claude.ai/design 'DM 기능 갈라 스타일 업그레이드' apply/dm-quiet.css)
============================================================ */
/* 패널 — 아우라 제거, 앱 배경색과 통일(#0a0a0b) — 순흑이면 DM만 검게 떠 다른 페이지와 색 단차(사장님 지적) */
.dm-panel {
background: #0a0a0b !important;
box-shadow: -16px 0 40px rgba(0,0,0,.45);
}
/* 헤더 — SVG 아이콘 버튼 */
.dm-x, .dm-compose, .dm-back, .dm-gear {
display: flex; align-items: center; justify-content: center;
}
.dm-x svg, .dm-compose svg, .dm-back svg, .dm-gear svg { display: block; }
.dm-gear { color: #6b7280; }
/* 탭 — 알약 → 텍스트 + 언더라인 (텔레그램 문법) */
.dm-tabs {
gap: 24px; padding: 6px 20px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.dm-tab {
flex: none; padding: 8px 2px 11px;
border: none; border-radius: 0; background: none !important;
color: #6b7280; font-size: 14px; font-weight: 700;
box-shadow: none !important;
border-bottom: 2px solid transparent;
}
.dm-tab.on {
color: #fff; font-weight: 800;
border-bottom: 2px solid #4361ff;
}
.dm-tab:active { transform: none; opacity: .7; }
/* 행 — 구분선을 아바타 오른쪽부터 시작하는 인셋 헤어라인으로 */
.dm-thread, .dm-friend {
gap: 14px; padding: 14px 20px;
border-bottom: none;
box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.05);
}
.dm-thread:active, .dm-friend:active { background: rgba(255,255,255,.04); }
.dm-ava { box-shadow: none; }
.dm-ava.sm { box-shadow: none; }
/* 핀 아이콘(SVG)이 이름 앞에 붙을 때 */
.dm-thread-name { display: flex; align-items: center; gap: 5px; }
.dm-thread-name svg { flex: none; }
/* 안읽음 — 플랫 인디고 (그라디언트·글로우 제거) */
.dm-dot {
background: #4361ff !important;
box-shadow: none !important;
}
/* 정렬 버튼 */
.dm-sort-row { padding: 12px 20px 4px; }
#dm-sort { color: #565b66; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 4px; }
/* 말풍선 — 플랫. 내 것 #3450d6, 상대 #16171c (보더·블러·글로우 제거) */
.dm-bubble.me {
/* 테마(포인트 색)를 따른다 — 설정에서 바꾸면 여기가 바로 반영된다 */
background: var(--dm-mine, #3450d6) !important;
box-shadow: none !important;
}
.dm-bubble.you {
background: #16171c !important;
border: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.dm-receipt { color: #aebcff !important; }
.dm-quote { border-left-color: #4361ff; }
/* 타이핑 점 — 무채색 */
.dm-typing-dots i { background: #6b7280; }
/* 온라인 — 테마 토큰 --ok */
.dm-peer-sub.on { color: #2fd07a; }
.dm-head-ava.on::after { background: #2fd07a; animation: none; }
/* 입력바 — 포커스 글로우 제거, 보더만 */
#dm-input:focus {
border-color: #4361ff !important;
box-shadow: none !important;
}
.dm-attach { background: rgba(255,255,255,.06); color: #a4abb8; display: flex; align-items: center; justify-content: center; }
.dm-send {
background: #4361ff !important;
box-shadow: none !important;
display: flex; align-items: center; justify-content: center;
}
/* 검색 인풋 — 포커스 인디고 */
.dm-search-wrap input:focus, .dm-friend-search input:focus { border-color: rgba(67,97,255,.5); }
/* 섹션 라벨 — SVG와 정렬 */
.dm-sec { display: flex; align-items: center; gap: 6px; padding: 12px 20px 6px; color: #565b66; }
.dm-sec b { color: #9ab4ff; }
/* 친구 이동 버튼 — SVG */
.dm-friend-go { color: #a4abb8; }
.dm-friend-go svg { display: block; }
/* 설정 토글 — 텍스트 알약 → iOS식 스위치 */
.dm-toggle {
min-width: 44px; width: 44px; height: 26px; padding: 0;
border: none !important; border-radius: 999px;
background: rgba(255,255,255,.12) !important;
box-shadow: none !important;
position: relative; font-size: 0;
transition: background .18s ease;
}
.dm-toggle::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; border-radius: 50%; background: #fff;
transition: transform .18s cubic-bezier(.2,.9,.3,1);
}
.dm-toggle.on { background: #4361ff !important; }
.dm-toggle.on::after { transform: translateX(18px); }
/* 공유 카드 — 톤 정리 */
.dm-share-card { background: #0c0d11; border-color: rgba(255,255,255,.1); }
/* 모션 — 폭포 등장은 유지하되 장식 애니메이션은 제거 */
.dm-unread .dm-dot { animation: none; }
.dm-send.fly { animation: none; }
/* 아바타 사진은 글자 폴백 위에 절대배치 — 깨지면 img가 스스로 사라져 글자가 드러난다 */
.dm-ava { position: relative; }
.dm-ava img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
/* ⬇️ 당겨서 새로고침 */
.dm-ptr {
height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
transition: height .18s ease;
}
.dm-ptr-spin {
width: 22px; height: 22px; margin-bottom: 14px; border-radius: 50%;
border: 2.5px solid rgba(255,255,255,.15); border-top-color: #4361ff;
opacity: .5; transform: rotate(0deg);
}
.dm-ptr.ready .dm-ptr-spin { opacity: 1; transform: rotate(180deg); transition: transform .2s ease; }
.dm-ptr.busy .dm-ptr-spin { opacity: 1; animation: dmPtrSpin .7s linear infinite; }
@keyframes dmPtrSpin { to { transform: rotate(360deg); } }
/* ═══════ 👤 친구 프로필 (카톡 프로필 화면 문법, 콰이엇 톤) ═══════ */
.dm-prof-hero { text-align: center; padding: 30px 20px 18px; }
.dm-prof-ava .dm-ava.lg {
width: 84px; height: 84px; font-size: 32px; margin: 0 auto; border-radius: 30px;
}
.dm-prof-name { margin-top: 14px; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.3px; }
.dm-prof-bio { margin-top: 6px; font-size: 13px; color: #8b93a5; line-height: 1.5; }
.dm-prof-rel { margin-top: 8px; min-height: 18px; }
.dm-prof-actions {
/* 버튼 4개(메시지·육성톡·면상톡·프로필홈) — 2×2 그리드 */
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
margin: 6px 20px 8px; border-radius: 14px; overflow: hidden;
border: 1px solid rgba(255,255,255,.09);
}
.dm-prof-actions button {
flex: 1; padding: 13px 0; border: none; cursor: pointer; font-size: 13.5px; font-weight: 800;
background: rgba(255,255,255,.045); color: #eef0f4;
display: flex; align-items: center; justify-content: center; gap: 7px;
}
.dm-prof-actions button:active { background: rgba(67,97,255,.15); }
#dm-prof-chat { color: #9ab4ff; }
.dm-idcard {
margin: 8px 20px; padding: 14px 15px; border-radius: 14px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
}
.dm-id-tier { font-size: 16px; font-weight: 900; letter-spacing: -.2px; }
.dm-id-tier b { font-size: 12px; color: #9ab4ff; margin-left: 4px; }
.dm-id-type { font-size: 15px; font-weight: 900; color: #fff; }
.dm-id-sub { margin-top: 5px; font-size: 11.5px; color: #6b7488; line-height: 1.5; }
.dm-id-bar { margin-top: 9px; height: 6px; border-radius: 99px; background: rgba(255,77,103,.35); overflow: hidden; }
.dm-id-bar i { display: block; height: 100%; background: #4361ff; }
.dm-id-tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.dm-id-tags span {
font-size: 10.5px; font-weight: 700; color: #9aa3b5; padding: 3px 9px;
border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.dm-idstats {
display: flex; justify-content: space-around; margin: 12px 20px 24px; padding: 13px 0;
border-radius: 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
}
.dm-idstats span { font-size: 11px; color: #6b7488; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dm-idstats b { font-size: 15px; font-weight: 900; color: #eef0f4; }
/* ═══════ ≡ 대화 설정 서랍 ═══════ */
.dm-cs-peer {
display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
padding: 16px 20px; background: none; border: none; cursor: pointer;
box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.05);
}
.dm-cs-peer:active { background: rgba(255,255,255,.04); }
.dm-cs-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px 20px 10px;
}
.dm-cs-thumb {
aspect-ratio: 1; border: none; border-radius: 10px; cursor: pointer;
background-color: #16171c; background-size: cover; background-position: center;
}
.dm-cs-thumb:active { opacity: .7; }
.dm-cs-link {
display: block; padding: 12px 20px; text-decoration: none;
font-size: 13px; font-weight: 700; color: #9ab4ff;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.04);
}
.dm-cs-link:active { background: rgba(255,255,255,.04); }
.dm-cs-act {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 14px 20px; background: none; border: none; cursor: pointer;
font-size: 14px; font-weight: 700; color: #eef0f4;
box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.04);
}
.dm-cs-act:active { background: rgba(255,255,255,.04); }
.dm-cs-act.danger { color: #ff8595; }
.dm-cs-act.disabled { color: #565b66; cursor: default; }
.dm-soon {
font-style: normal; font-size: 9.5px; font-weight: 900; color: #9ab4ff;
padding: 2px 7px; border-radius: 999px; background: rgba(67,97,255,.13);
border: 1px solid rgba(67,97,255,.3); margin-left: 2px;
}
/* 사진 라이트박스 */
#dm-lightbox {
position: fixed; inset: 0; z-index: 2147483600; background: rgba(0,0,0,.92);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#dm-lightbox.on { opacity: 1; pointer-events: auto; }
#dm-lightbox img { max-width: 94vw; max-height: 88vh; border-radius: 12px; object-fit: contain; }
/* 텍스트 속 인라인 아이콘 정렬 (미리보기·인용·삭제 표시) */
.dm-thread-prev svg, .dm-quote svg, .dm-deleted svg, .dm-id-pct svg, .dm-cs-link svg, .dm-share-banner svg {
vertical-align: -2px; margin-right: 2px;
}
/* 📨 새 메시지 토스트 — 상단에서 내려와 탭하면 그 대화로 */
#dm-toast {
position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px));
z-index: 2147483250; max-width: 460px; margin: 0 auto;
display: flex; align-items: center; gap: 11px; text-align: left;
padding: 11px 13px; border-radius: 16px; cursor: pointer;
background: #101116; border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 14px 40px rgba(0,0,0,.6);
transform: translateY(-130%); opacity: 0;
transition: transform .34s cubic-bezier(.2,1.1,.3,1), opacity .25s;
}
#dm-toast.on { transform: none; opacity: 1; }
#dm-toast .dm-ava { width: 38px; height: 38px; font-size: 15px; flex: none; }
.dm-toast-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-toast-mid b { font-size: 13.5px; font-weight: 800; color: #fff;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-toast-mid i { font-style: normal; font-size: 12px; color: #8b93a5;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #dm-toast { transition: none; } }
/* ═══════ 📄 페이지 모드 (dm.html) — 오버레이가 아니라 본문 ═══════ */
.dm-root.page {
position: static; inset: auto; z-index: auto; pointer-events: auto;
}
.dm-root.page .dm-dim { display: none; }
.dm-root.page .dm-panel {
position: relative; transform: none; max-width: none; width: 100%;
border-left: none; box-shadow: none;
/* 헤더(sticky 64px)를 뺀 화면 높이 — 뷰들이 이 안에서 absolute로 선다 */
height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
}
/* 페이지(앱) 모드: '닫기 X'는 숨김(네비가 출구)지만, 같은 .dm-x 클래스인 '+ 글쓰기'(data-write-hub)는 유지 */
.dm-root.page .dm-view .dm-head .dm-x:not([data-write-hub]) { visibility: hidden; }
/* 목록 화면: 플로팅 네비에 가리지 않게 바닥 여백 */
.dm-root.page .dm-list { padding-bottom: 110px; }
/* 몰입 뷰(대화방 등)에선 네비 숨김 — showView가 body에 dm-immersive를 단다 */
body.dm-immersive .nav { display: none; }
.dm-root.page .dm-msgs { padding-bottom: 8px; }
.dm-login-cta {
margin-top: 4px; padding: 11px 26px; border: none; border-radius: 12px; cursor: pointer;
font-size: 14px; font-weight: 900; color: #fff; background: #4361ff;
}
/* 페이지 모드: DM 내부 '메시지' 바 제거 — ⚙·✎는 페이지 헤더로 승격됐다 */
.dm-root.page [data-view="inbox"] > .dm-head { display: none; }
.hdr-group.hdr-right { justify-self: end; }
/* dm.html은 페이지 자체 CSS가 없어 UA 기본 body margin 8px가 살아남는다
— 헤더가 다른 페이지보다 8px 내려앉던 원인 */
body[data-page="dm"] { margin: 0; }
/* 페이지 모드 상세 뷰: GALLA 페이지 헤더 제거(이중 헤더 해소) — 상세의 자체 헤드가 유일한 헤더 */
body[data-page="dm"].dm-detail .header { display: none; }
body[data-page="dm"].dm-detail .dm-root.page .dm-panel { height: 100dvh; height: calc(100dvh - env(safe-area-inset-top, 0px)); }
/* 노치 안전영역 — 헤더가 사라진 자리의 상단 여백 */
body[data-page="dm"].dm-detail .dm-view .dm-head { padding-top: calc(env(safe-area-inset-top, 0px)); }
/* ═══ 난장 — 오픈 채팅방 ═══ */
/* 탭바 오른쪽 끝 설정(⚙) — 텍스트 탭들과 밑줄 문법을 공유하되 아이콘만 */
.dm-tabs { display: flex; align-items: stretch; }
.dm-tab.dm-tab-set {
margin-left: auto; display: flex; align-items: center;
color: #6b7280; padding: 8px 2px 11px;
}
.dm-tab.dm-tab-set:active { opacity: .6; }
/* 난장 상단 바: 안내 문구 + 열기 버튼 */
.dm-room-bar { justify-content: space-between; align-items: center; }
/* ⚠️ hidden 속성은 클래스의 display:flex에 진다(.dm-friend-search 상속) — 못 박아야 실제로 사라진다 */
.dm-room-bar[hidden], .dm-room-form[hidden] { display: none !important; }
.dm-room-hint { font-size: 12px; color: #6b7280; letter-spacing: -.2px; }
/* 난장 만들기 폼 */
.dm-room-form { padding: 14px 20px 4px; display: grid; gap: 8px; }
.dm-room-form input {
width: 100%; box-sizing: border-box; padding: 11px 14px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 12px; color: #fff; font-size: 14px; outline: none;
}
.dm-room-form input:focus { border-color: rgba(67,97,255,.5); }
.dm-room-form-btns { display: flex; gap: 8px; justify-content: flex-end; }
.dm-room-form-btns button {
padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
border: 1px solid rgba(255,255,255,.1); background: none; color: #8b909b; cursor: pointer;
}
.dm-room-form-btns #dm-room-go {
display: inline-flex; align-items: center; gap: 5px;
background: #4361ff; border-color: #4361ff; color: #fff;
}
/* 방 행: 멤버 수 칩 */
.dm-room-cnt {
display: inline-flex; align-items: center; gap: 3px; margin-left: 7px;
font-size: 11px; font-weight: 700; color: #6b7280;
}
.dm-room-cnt svg { stroke: #6b7280; }
/* 미참여 게이트 — 주제 소개 + 뛰어들기 */
.dm-room-gate {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 24px; text-align: center;
}
.dm-room-gate[hidden] { display: none !important; } /* hidden은 display 규칙에 진다 — 명시 차단(상점 탭과 같은 버그) */
.dm-gate-ava { width: 72px; height: 72px; font-size: 28px; border-radius: 24px; }
.dm-gate-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.dm-gate-topic { font-size: 13.5px; color: #9aa0ad; max-width: 280px; line-height: 1.5; }
.dm-gate-cnt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #6b7280; }
.dm-gate-join {
margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
padding: 12px 28px; border-radius: 999px; border: none; cursor: pointer;
background: #4361ff; color: #fff; font-size: 15px; font-weight: 800;
box-shadow: 0 8px 24px -8px rgba(67,97,255,.55);
}
.dm-gate-join:active { transform: scale(.96); }
/* 단체 말풍선 — 남의 말엔 아바타+닉네임(1:1엔 없는 문법) */
.dm-gmsg { display: flex; gap: 8px; align-items: flex-end; }
.dm-gmsg .dm-gava { flex: none; }
.dm-gcol { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.dm-gname { font-size: 11.5px; font-weight: 700; color: #8b909b; padding-left: 4px; }
.dm-gmsg .dm-bubble.you { margin: 0; }
/* ═══ 단체 채팅 만들기 ═══ */
.dm-gnew-entry {
display: flex; align-items: center; gap: 8px;
margin: 4px 20px 8px; padding: 12px 16px; width: calc(100% - 40px); box-sizing: border-box;
background: rgba(67,97,255,.09); border: 1px solid rgba(67,97,255,.25);
border-radius: 14px; color: #cdd9ff; font-size: 14px; font-weight: 800; cursor: pointer;
}
.dm-gnew-entry:active { transform: scale(.98); }
.dm-gnew-titlewrap { padding: 14px 20px 4px; }
.dm-gnew-titlewrap input {
width: 100%; box-sizing: border-box; padding: 11px 14px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 12px; color: #fff; font-size: 14px; outline: none;
}
.dm-gnew-titlewrap input:focus { border-color: rgba(67,97,255,.5); }
/* 선택 체크 — 원형 링, 고르면 인디고 채움 */
.dm-gcheck {
flex: none; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.18); transition: all .15s ease;
}
.dm-gpick.sel .dm-gcheck {
border-color: #4361ff; background: #4361ff;
box-shadow: inset 0 0 0 3px #0a0a0f;
}
.dm-gpick.sel .dm-thread-name { color: #cdd9ff; }
.dm-gnew-gowrap { padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.dm-gnew-gowrap button {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 14px 0; border: none; border-radius: 999px; cursor: pointer;
background: #4361ff; color: #fff; font-size: 15px; font-weight: 800;
}
.dm-gnew-gowrap button:disabled { background: rgba(255,255,255,.07); color: #6b7280; cursor: default; }
/* 멤버 목록 */
.dm-mem-owner {
flex: none; font-size: 11px; font-weight: 800; color: #cdd9ff;
padding: 3px 9px; border-radius: 999px;
background: rgba(67,97,255,.14); border: 1px solid rgba(67,97,255,.3);
}
.dm-mem-me { font-style: normal; font-size: 11px; color: #6b7280; font-weight: 700; margin-left: 4px; }
.dm-gnew-titlewrap[hidden] { display: none !important; }
/* ═══ 비밀대화 · 신고 · 미니 토스트 ═══ */
.dm-cs-state {
font-style: normal; margin-left: auto; font-size: 11px; font-weight: 800;
color: #6b7280; padding: 3px 10px; border-radius: 999px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.dm-cs-state.on { color: #7ee0a3; background: rgba(60,190,120,.1); border-color: rgba(60,190,120,.3); }
/* 비밀 모드 입력바 — 은은한 초록 락 톤 */
#dm-form.secret { box-shadow: inset 0 1px 0 rgba(60,190,120,.35); }
#dm-form.secret textarea { caret-color: #7ee0a3; }
.dm-e2e-mark { display: inline-flex; margin-left: 5px; opacity: .55; vertical-align: middle; }
.dm-e2e-mark svg { width: 10px; height: 10px; }
.dm-e2e-wait { opacity: .75; display: inline-flex; align-items: center; gap: 5px; }
#dm-mini-toast {
position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
/* 모달(#pager-call 14000·통화·검색 1000002) 위에 떠야 한다 —
아래 깔리면 에러 안내가 통째로 안 보여 '아무 반응 없음'으로 오인된다 */
transform: translate(-50%, 14px); z-index: 2000000;
max-width: min(86vw, 380px); padding: 11px 18px; border-radius: 999px;
background: rgba(24,26,34,.96); color: #e6e8ef; font-size: 13px; font-weight: 700;
border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px rgba(0,0,0,.5);
opacity: 0; pointer-events: none; transition: all .25s cubic-bezier(.2,.9,.3,1.2);
text-align: center;
}
#dm-mini-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* 녹음 실패 사유는 모달 안에 남긴다(토스트는 사라지지만 이건 남는다) */
.pgr-err { color: #ff9aa5; font-size: 12.5px; line-height: 1.55; margin-top: 8px; }
/* ═══ 보이스톡 ═══ */
#dm-call {
position: fixed; inset: 0; z-index: 13000;
display: flex; align-items: center; justify-content: center;
background: rgba(5,6,10,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
opacity: 0; transition: opacity .25s ease;
}
#dm-call.on { opacity: 1; }
.dmc-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px; }
.dmc-ava {
width: 96px; height: 96px; border-radius: 34px;
display: flex; align-items: center; justify-content: center;
font-size: 38px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #4361ff, #1a1c26);
box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}
.dmc-ava.ring { animation: dmcPulse 1.6s ease-out infinite; }
@keyframes dmcPulse {
0% { box-shadow: 0 0 0 0 rgba(67,97,255,.5); }
100% { box-shadow: 0 0 0 26px rgba(67,97,255,0); }
}
.dmc-name { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.dmc-state { font-size: 13.5px; color: #9aa0ad; min-height: 18px; }
#dm-call-timer { color: #7ee0a3; font-weight: 800; font-variant-numeric: tabular-nums; }
.dmc-btns { display: flex; gap: 26px; margin-top: 26px; }
/* 🎛️ 통화 컨트롤 = 아이콘 원 + 아래 라벨(네이티브 CallKit 스타일). 아이콘만이라 헷갈리던 것 해소. */
.dmc-ctl { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 64px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dmc-ctl > i { font-size: 12px; font-style: normal; color: #c7ccd6; letter-spacing: -.2px; white-space: nowrap; pointer-events: none; }
.dmc-ctl .dmc-btn { pointer-events: none; } /* 탭은 컨트롤(.dmc-ctl[data-c])이 받는다 — 라벨·여백 어디를 눌러도 작동 */
.dmc-ctl:active .dmc-btn { transform: scale(.92); }
.dmc-btn {
width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; color: #fff;
background: rgba(255,255,255,.09);
}
.dmc-btn:active { transform: scale(.92); }
.dmc-btn.accept { background: #22b46a; animation: dmcPulse 1.6s ease-out infinite; }
.dmc-btn.end { background: #ff3b4e; }
.dmc-btn.end svg { transform: rotate(135deg); }
.dmc-btn.mute.off { background: rgba(255,72,88,.25); color: #ff8f9a; }
@media (prefers-reduced-motion: reduce) { .dmc-ava.ring, .dmc-btn.accept { animation: none; } }
/* ⏳ 사라지는 메시지 배너 */
.dm-exp-note {
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 7px 14px; font-size: 12px; color: #c9b458;
background: rgba(201,180,88,.07); border-bottom: 1px solid rgba(201,180,88,.14);
}
.dm-exp-note b { font-weight: 800; }
.dm-exp-note svg { stroke: #c9b458; }
/* 📞 통화 말풍선 + 페이스톡 */
.dm-call-card { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.dm-call-card svg { flex: none; }
.dm-call-card.missed svg { stroke: #ff8f9a; }
.dm-call-mid { display: flex; flex-direction: column; gap: 1px; }
.dm-call-mid b { font-size: 13.5px; }
.dm-call-card.missed .dm-call-mid b { color: #ff8f9a; }
.dm-call-mid i { font-style: normal; font-size: 11.5px; opacity: .65; }
.dm-callback {
margin-left: 6px; padding: 7px 13px; border: none; border-radius: 999px; cursor: pointer;
background: rgba(67,97,255,.18); color: #cdd9ff; font-size: 12px; font-weight: 800;
}
.dm-callback:active { transform: scale(.95); }
/* 페이스톡 — 상대 풀스크린 영상 + 내 PiP. 통화중 컨트롤 버튼은 네이티브 오버레이(CallControlsOverlay,
윈도우 레벨)가 영상 위에 그린다 → 웹 버튼은 oncall에서 숨긴다(웹 DOM은 영상에 가려 안 보이므로). */
#dm-call.video { background: #000; }
#dm-call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
#dm-call-local {
position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 16px;
width: 108px; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px;
border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 2;
transform: scaleX(-1);
}
#dm-call.video[data-state="oncall"] .dmc-card { display: none; } /* 네이티브 오버레이가 버튼 담당 */
/* 영상통화 통화중: 영상·버튼 모두 네이티브가 그린다 → 웹 영상 요소 숨김(iosrtc 이중 렌더 방지) */
#dm-call.video[data-state="oncall"] #dm-call-remote, #dm-call.video[data-state="oncall"] #dm-call-local { display: none !important; }
#dm-call.video .dmc-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
#dm-call.video[data-state="incoming"] .dmc-name, #dm-call.video[data-state="outgoing"] .dmc-name { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
/* 📹 Agora 면상톡: 영상은 웹뷰 '안'(HTML div)에 렌더 → 컨테이너를 보이고, 버튼도 웹이 관리(네이티브 오버레이 X). */
#dm-call.agora.video[data-state="oncall"] #dm-call-remote,
#dm-call.agora.video[data-state="oncall"] #dm-call-local { display: block !important; }
#dm-call.agora.video[data-state="oncall"] .dmc-card { display: block !important; }
#dm-call.agora #dm-call-remote video, #dm-call.agora #dm-call-local video { width: 100% !important; height: 100% !important; object-fit: cover; }
#dm-call.agora #dm-call-local { transform: none; } /* Agora가 mirror:true 처리 → CSS 미러 중복 제거 */
.dmc-err { max-width: 300px; line-height: 1.55; color: #ffb3bb; }
.dmc-retry {
margin-top: 4px; padding: 11px 22px; border: none; border-radius: 999px; cursor: pointer;
background: #4361ff; color: #fff; font-size: 13.5px; font-weight: 800;
}
.dm-mic-btn {
flex: none; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #cdd9ff; cursor: pointer;
}
.dm-mic-btn.ok { color: #7ee0a3; border-color: rgba(60,190,120,.35); background: rgba(60,190,120,.08); }
/* 같은 자리에 로도 쓴다(도움말 링크) — 버튼과 동일하게 보이게 */
a.dm-mic-btn { text-decoration: none !important; display: inline-flex; align-items: center; }
/* ═══ 인스타식 입력바 · 무한 이모티콘 · 음성 메시지 ═══ */
.dm-ib {
flex: none; width: 36px; height: 36px; border: none; background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; color: #8b909b; border-radius: 50%;
}
.dm-ib:active { transform: scale(.88); }
.dm-ib.rec { color: #ff4d67; animation: dmRecPulse 1.2s ease-in-out infinite; }
@keyframes dmRecPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* 😀 이모티콘 시트 */
.dm-stk {
/* 칩 줄(스타일·카테고리)과 크레딧이 붙으면서 그리드가 눌렸다 — 시트를 키워 2줄 이상 보이게 */
height: min(46vh, 340px); display: flex; flex-direction: column;
border-top: 1px solid rgba(255,255,255,.07); background: #0b0c12;
}
.dm-stk[hidden] { display: none !important; }
.dm-stk-top { display: flex; gap: 8px; padding: 8px 14px 5px; align-items: center; }
.dm-stk-top input {
flex: 1; padding: 9px 14px; border-radius: 999px; font-size: 13px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #fff; outline: none;
}
.dm-stk-top input:focus { border-color: rgba(67,97,255,.5); }
.dm-stk-tabs { display: flex; gap: 4px; }
.dm-stk-tabs button {
padding: 7px 12px; border-radius: 999px; border: none; cursor: pointer;
background: none; color: #6b7280; font-size: 12.5px; font-weight: 800;
}
.dm-stk-tabs button.on { background: rgba(67,97,255,.16); color: #cdd9ff; }
.dm-stk-grid {
flex: 1; overflow-y: auto; padding: 6px 12px 14px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start;
}
.dm-stk-grid img {
width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; cursor: pointer;
background: rgba(255,255,255,.03);
}
.dm-stk-grid img:active { transform: scale(.9); }
.dm-stk-grid .dm-loading, .dm-stk-grid .dm-set-empty { grid-column: 1 / -1; }
/* 스티커 말풍선 — 배경 없는 투명 (이모티콘은 그 자체가 말) */
.dm-bubble.stk { background: none !important; border: none !important; box-shadow: none !important; padding: 2px 0 !important; }
.dm-stkimg { width: 138px; height: 138px; object-fit: contain; display: block; }
/* 🎤 음성 말풍선 */
.dm-voice { display: inline-flex; align-items: center; gap: 9px; padding: 2px 0; min-width: 150px; }
.dm-vplay {
flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(255,255,255,.14); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.dm-vwave { display: inline-flex; align-items: center; gap: 2.5px; }
.dm-vwave i {
width: 2.5px; border-radius: 2px; background: currentColor; opacity: .65;
height: 8px;
}
.dm-vwave i:nth-child(2n) { height: 15px; } .dm-vwave i:nth-child(3n) { height: 11px; }
.dm-vwave i:nth-child(5n) { height: 18px; }
.dm-voice b { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .8; }
/* 이모지 그리드(문자) — 스티커 그리드와 다른 밀도 */
.dm-stk-grid.emoji { grid-template-columns: repeat(8, 1fr); gap: 2px; }
.dm-emo {
border: none; background: none; cursor: pointer; padding: 0;
font-size: 26px; line-height: 1.5; border-radius: 8px;
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.dm-emo:active { background: rgba(255,255,255,.08); transform: scale(.85); }
/* 카테고리 칩 */
.dm-stk-cats { display: flex; gap: 5px; overflow-x: auto; padding: 0 12px 4px; scrollbar-width: none; }
.dm-stk-cats::-webkit-scrollbar { display: none; }
.dm-stk-cats[hidden] { display: none !important; }
.dm-stk-cats button {
flex: none; padding: 6px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
color: #8b909b; font-size: 12px; font-weight: 700;
}
.dm-stk-cats button.on { background: rgba(67,97,255,.16); border-color: rgba(67,97,255,.4); color: #cdd9ff; }
/* 라이선스 크레딧 — CC BY 표기 의무 */
.dm-stk-credit {
flex: none; padding: 5px 14px 8px; font-size: 10px; color: #4b5563; text-align: center;
background: #0b0c12; /* 스크롤되는 그리드가 글자 뒤로 비쳐 겹쳐 보이던 것 차단 */
}
.dm-stk-credit[hidden] { display: none !important; }
/* ═══ 위챗식 워키토키(PTT) ═══ */
.dm-ptt {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 0 0 78px; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(5,6,10,.86) 45%);
}
.dm-ptt[hidden] { display: none !important; }
/* 위로 미는 슬롯 — 취소 / 잠금 */
.dm-ptt-slot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 4px; }
.dm-ptt-lock, .dm-ptt-cancel {
display: flex; flex-direction: column; align-items: center; gap: 3px;
width: 46px; height: 46px; border-radius: 50%; justify-content: center;
background: rgba(255,255,255,.07); color: #8b909b;
transition: all .18s ease;
}
.dm-ptt-lock i, .dm-ptt-cancel i { font-style: normal; font-size: 9px; font-weight: 700; }
.dm-ptt[data-armed="lock"] .dm-ptt-lock { background: rgba(67,97,255,.28); color: #cdd9ff; transform: scale(1.15); }
.dm-ptt[data-armed="cancel"] .dm-ptt-cancel { background: rgba(255,77,103,.3); color: #ffb3bb; transform: scale(1.15); }
.dm-ptt.locked .dm-ptt-slot { display: none; }
/* 녹음 패널 */
.dm-ptt-panel {
display: flex; align-items: center; gap: 10px;
padding: 12px 20px; border-radius: 999px;
background: rgba(24,26,34,.96); border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.dm-ptt[data-armed="cancel"] .dm-ptt-panel { border-color: rgba(255,77,103,.5); background: rgba(60,18,26,.96); }
.dm-ptt-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d67; animation: dmRecPulse 1s infinite; }
.dm-ptt-time { font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; min-width: 34px; }
.dm-ptt-wave { display: inline-flex; align-items: center; gap: 2px; height: 28px; }
.dm-ptt-wave i {
width: 3px; height: 8px; border-radius: 2px; background: #4361ff;
transition: height .12s ease;
}
.dm-ptt[data-armed="cancel"] .dm-ptt-wave i { background: #ff4d67; }
.dm-ptt-hint {
position: absolute; bottom: 46px; left: 0; right: 0; text-align: center;
font-size: 11.5px; color: #9aa0ad;
}
.dm-ptt[data-armed="cancel"] .dm-ptt-hint { color: #ffb3bb; }
/* 녹음 중 마이크 버튼 강조 */
.dm-ib.rec { color: #fff; background: #ff4d67; transform: scale(1.15); }
/* 스티커 스타일 칩 */
.dm-stk-styles { display: flex; gap: 5px; padding: 0 12px 3px; overflow-x: auto; scrollbar-width: none; }
.dm-stk-styles[hidden] { display: none !important; }
.dm-stk-styles button {
flex: none; padding: 5px 11px; border-radius: 8px; cursor: pointer;
border: 1px solid rgba(255,255,255,.07); background: none;
color: #6b7280; font-size: 11.5px; font-weight: 700;
}
.dm-stk-styles button.on { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16); }
/* PTT 오버레이 기준점 + 시트가 열려도 대화방이 화면을 넘지 않게
(flex 자식은 기본 min-height:auto라 내용만큼 버틴다 → 이모티콘 시트 264px가
들어오면 입력바가 화면 밖으로 밀려났다. 메시지 영역이 줄어들어야 한다) */
/* 대화방은 position:relative여야 내부 시트(이모티콘·답장 미리보기)가 이 안에 갇힌다.
단 relative가 되는 순간 inset:0 채움이 풀려 '내용 높이'로 쪼그라든다
(헤드+말풍선+입력바만 그려지고 나머지가 검게 남던 정렬 붕괴의 정체).
→ 패널(flex column)의 유일한 흐름 자식이므로 flex로 다시 꽉 채운다. */
.dm-view[data-view="thread"],
.dm-view[data-view="room"] {
position: relative; overflow: hidden;
flex: 1 1 auto; min-height: 0; height: 100%;
/* ⚠️ display를 여기서 만지지 않는다 — .dm-view[hidden]{display:none}과 동률
특정성이라 이 파일이 나중에 로드되며 숨김 뷰를 되살려버린다(실측 직전 회피).
기본 .dm-view가 이미 flex column. */
}
.dm-view[data-view="thread"] > .dm-msgs,
.dm-view[data-view="room"] > .dm-msgs { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
/* 대화가 적어도 말풍선은 바닥에 붙는다(채팅 문법). justify-content:flex-end는
내용이 길어지면 위쪽이 잘리므로 첫 자식 margin-top:auto로 처리 */
.dm-msgs > :first-child { margin-top: auto; }
/* 🍳 믹스 재료 줄 */
.dm-mixbase {
flex: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
font-size: 21px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.dm-mixbase.on { background: rgba(67,97,255,.2); border-color: rgba(67,97,255,.5); transform: scale(1.08); }
/* 🇰🇷 토스페이스 — 원본 TTF 그대로(라이선스상 서브셋·포맷변환 금지).
@font-face는 '실제로 쓰일 때만' 내려받으므로, 켠 사람만 12MB를 받는다. */
@font-face {
font-family: 'TossFace';
src: url('/assets/fonts/TossFaceFontMac.ttf') format('truetype');
font-display: swap;
}
body.tossface .dm-emo,
body.tossface .dm-bub-body,
body.tossface #dm-input,
body.tossface .dm-thread-prev,
body.tossface .dm-thread-name,
body.tossface .dm-ptt-hint {
font-family: 'TossFace', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
/* 🎨 나만의 이모티콘 제작 */
.dm-mk { padding: 2px 12px 6px; display: grid; gap: 6px; }
.dm-mk[hidden] { display: none !important; }
.dm-mk-presets { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.dm-mk-presets::-webkit-scrollbar { display: none; }
.dm-mk-presets button {
flex: none; padding: 6px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(201,180,88,.28); background: rgba(201,180,88,.09);
color: #e6d9a3; font-size: 11.5px; font-weight: 700;
}
.dm-mk-row { display: flex; gap: 6px; }
.dm-mk-row input {
flex: 1; min-width: 0; padding: 9px 13px; border-radius: 999px; font-size: 12.5px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #fff; outline: none;
}
.dm-mk-row input:focus { border-color: rgba(201,180,88,.5); }
.dm-mk-row button {
flex: none; padding: 9px 15px; border-radius: 999px; border: none; cursor: pointer;
background: linear-gradient(135deg, #c9b458, #a8912f); color: #1a1608;
font-size: 12.5px; font-weight: 900; white-space: nowrap;
}
.dm-mk-row button:disabled { opacity: .5; cursor: default; }
.dm-mk-hint { font-size: 11px; color: #8b909b; padding-left: 4px; }
/* ═══════════════ 📟 삐삐 (음성사서함) ═══════════════
채팅과 시각적으로도 확실히 갈라놓는다 — 인디고 UI 사이에서 홀로 초록 액정. */
.pgr-wrap { padding: 14px 16px 90px; }
.pgr-device {
background: linear-gradient(160deg, #2a2d36, #1a1c22);
border: 1px solid rgba(255,255,255,.09); border-radius: 20px;
padding: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
/* 액정 — 그 시절 초록 LCD */
.pgr-lcd {
background: linear-gradient(180deg, #143d22, #0d2b18);
border: 2px solid rgba(0,0,0,.5); border-radius: 10px;
padding: 14px 16px; text-align: center;
box-shadow: inset 0 2px 12px rgba(0,0,0,.6);
font-family: 'Courier New', ui-monospace, monospace;
}
.pgr-lcd-top { font-size: 10.5px; letter-spacing: 2px; color: #5fd88a; opacity: .75; }
.pgr-lcd-main {
font-size: 30px; font-weight: 700; letter-spacing: 3px; color: #7dffa8;
text-shadow: 0 0 12px rgba(125,255,168,.55); margin: 5px 0 3px;
}
.pgr-lcd-sub { font-size: 11.5px; color: #5fd88a; opacity: .85; }
.pgr-actions { display: flex; gap: 8px; margin-top: 12px; }
.pgr-btn {
flex: 1; padding: 10px 0; border-radius: 10px; cursor: pointer;
background: linear-gradient(180deg, #3a3e49, #23262e);
border: 1px solid rgba(255,255,255,.1); color: #d7dae2;
font-size: 12.5px; font-weight: 800;
box-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.pgr-btn:active { transform: translateY(2px); box-shadow: none; }
.pgr-greet-play {
width: 100%; margin-top: 8px; padding: 9px 0; border-radius: 10px; cursor: pointer;
background: none; border: 1px dashed rgba(125,255,168,.3); color: #7dffa8; font-size: 12px; font-weight: 700;
}
.pgr-sec { margin: 20px 2px 8px; font-size: 12px; font-weight: 800; color: #8b909b; letter-spacing: .5px; }
.pgr-list { display: grid; gap: 7px; }
.pgr-row {
display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer; text-align: left;
padding: 12px 14px; border-radius: 14px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
}
.pgr-row.new { background: rgba(125,255,168,.06); border-color: rgba(125,255,168,.22); }
.pgr-row-ic {
flex: none; width: 40px; height: 40px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: rgba(125,255,168,.1); color: #7dffa8; font-size: 11px; font-weight: 800;
font-family: 'Courier New', monospace;
}
.pgr-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pgr-row-mid b { font-size: 14px; color: #fff; font-family: 'Courier New', monospace; letter-spacing: 1px; }
.pgr-row-mid b i { font-style: normal; font-size: 11.5px; color: #7dffa8; margin-left: 6px; letter-spacing: 0; font-family: inherit; }
.pgr-row-mid span { font-size: 11.5px; color: #8b909b; }
.pgr-row-t { flex: none; font-size: 10.5px; color: #6b7280; text-align: right; }
.pgr-row-t em { display: block; font-style: normal; color: #7dffa8; font-weight: 800; margin-top: 3px; }
.pgr-empty, .pgr-loading { padding: 30px 10px; text-align: center; color: #6b7280; font-size: 13px; line-height: 1.7; }
.pgr-empty span { font-size: 12px; opacity: .8; }
.pgr-note { margin-top: 16px; text-align: center; font-size: 11px; color: #4b5563; line-height: 1.6; }
/* 도착 팝업 — 채팅 토스트와 완전히 다른 물건 */
#pager-pop {
position: fixed; inset: 0; z-index: 14000; display: flex; align-items: center; justify-content: center;
background: rgba(5,6,10,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#pager-pop.on { opacity: 1; pointer-events: auto; }
.pgr-pop-body {
width: min(86vw, 330px); padding: 18px;
background: linear-gradient(160deg, #2a2d36, #16181e);
border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
box-shadow: 0 24px 60px rgba(0,0,0,.6);
animation: pgrShake .5s ease;
}
@keyframes pgrShake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-7px) rotate(-1deg); }
40% { transform: translateX(7px) rotate(1deg); }
60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.pgr-pop-btns { display: flex; gap: 8px; margin-top: 14px; }
.pgr-pop-btns button {
flex: 1; padding: 11px 0; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 800;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #b9bdc7;
}
.pgr-pop-btns button[data-p="go"] { background: #1f7a45; border-color: #2a9c58; color: #eafff1; }
/* 남기기(사서함 접속) 모달 */
#pager-call {
position: fixed; inset: 0; z-index: 14000; display: flex; align-items: flex-end; justify-content: center;
background: rgba(5,6,10,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
opacity: 0; transition: opacity .25s ease;
}
#pager-call.on { opacity: 1; }
.pgr-call-body {
width: 100%; max-width: 480px; padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
background: #12141a; border-radius: 22px 22px 0 0; border-top: 1px solid rgba(255,255,255,.09);
transform: translateY(20px); transition: transform .3s cubic-bezier(.2,.9,.3,1.1);
}
#pager-call.on .pgr-call-body { transform: translateY(0); }
.pgr-call-stage { margin-top: 14px; }
.pgr-dial { text-align: center; color: #7dffa8; font-size: 13px; padding: 18px 0; letter-spacing: 1px;
font-family: 'Courier New', monospace; animation: pgrBlink 1.2s ease-in-out infinite; }
@keyframes pgrBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pgr-call-x {
width: 100%; margin-top: 14px; padding: 11px 0; border-radius: 12px; cursor: pointer;
background: none; border: 1px solid rgba(255,255,255,.1); color: #8b909b; font-size: 13px; font-weight: 700;
}
/* 녹음 단계 */
.pgr-rec { display: grid; gap: 10px; }
.pgr-rec-hint { text-align: center; font-size: 12.5px; color: #9aa0ad; }
.pgr-rec-btn {
padding: 14px 0; border-radius: 14px; cursor: pointer; border: none;
background: linear-gradient(135deg, #c9354a, #8f2231); color: #fff; font-size: 15px; font-weight: 800;
}
.pgr-rec-time { text-align: center; font-size: 12px; color: #7dffa8; font-family: 'Courier New', monospace; min-height: 16px; }
.pgr-rec-after { display: flex; gap: 7px; }
.pgr-rec-after[hidden] { display: none !important; }
.pgr-rec-after button {
flex: 1; padding: 11px 0; border-radius: 12px; cursor: pointer; font-size: 12.5px; font-weight: 800;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #d7dae2;
}
.pgr-rec-after button.go { background: #1f7a45; border-color: #2a9c58; color: #eafff1; }
/* 숫자 호출 */
.pgr-code { margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.1); }
.pgr-code-t { font-size: 11.5px; color: #8b909b; margin-bottom: 8px; }
.pgr-code-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pgr-code-chips button {
padding: 8px 2px; border-radius: 10px; cursor: pointer; display: grid; gap: 2px;
background: rgba(125,255,168,.06); border: 1px solid rgba(125,255,168,.18);
color: #7dffa8; font-size: 13px; font-weight: 800; font-family: 'Courier New', monospace;
}
.pgr-code-chips button i { font-style: normal; font-size: 9.5px; color: #8b909b; font-family: inherit; font-weight: 600; }
.pgr-code-row { display: flex; gap: 6px; margin-top: 8px; }
.pgr-code-row input {
flex: 1; min-width: 0; padding: 10px 13px; border-radius: 10px; font-size: 14px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #fff;
outline: none; font-family: 'Courier New', monospace; letter-spacing: 2px;
}
.pgr-code-row button {
flex: none; padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
background: #1f7a45; color: #eafff1; font-size: 13px; font-weight: 800;
}
/* 프로필 액션 그리드에서 삐삐는 한 줄 차지 */
.dm-prof-actions button.span2 { grid-column: 1 / -1; }
.dm-cs-note { font-style: normal; margin-left: auto; font-size: 10.5px; color: #6b7280; }
/* 📖 삐삐 암호책 */
#pager-book {
position: fixed; inset: 0; z-index: 14500; display: flex; align-items: flex-end; justify-content: center;
background: rgba(5,6,10,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
opacity: 0; transition: opacity .25s ease;
}
#pager-book.on { opacity: 1; }
.pgr-book-body {
width: 100%; max-width: 480px; max-height: 78vh; display: flex; flex-direction: column;
padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
background: #12141a; border-radius: 22px 22px 0 0; border-top: 1px solid rgba(255,255,255,.09);
transform: translateY(20px); transition: transform .3s cubic-bezier(.2,.9,.3,1.1);
}
#pager-book.on .pgr-book-body { transform: translateY(0); }
.pgr-book-head { text-align: center; margin-bottom: 10px; }
.pgr-book-head b { display: block; font-size: 16px; color: #fff; }
.pgr-book-head span { font-size: 11.5px; color: #6b7280; }
.pgr-book-scroll { flex: 1; overflow-y: auto; display: grid; gap: 6px; padding: 2px; }
.pgr-book-cat {
margin: 10px 2px 2px; font-size: 11px; font-weight: 800; letter-spacing: 1px;
color: #7dffa8; font-family: 'Courier New', monospace;
}
.pgr-book-cat:first-child { margin-top: 0; }
.pgr-book-row {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
padding: 11px 14px; border-radius: 12px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
}
.pgr-book-row:disabled { cursor: default; }
.pgr-book-row b {
flex: none; min-width: 72px; font-size: 15px; color: #7dffa8; letter-spacing: 2px;
font-family: 'Courier New', monospace; text-shadow: 0 0 8px rgba(125,255,168,.35);
}
.pgr-book-row span { flex: 1; font-size: 12.5px; color: #b9bdc7; }
.pgr-book-row i {
flex: none; font-style: normal; font-size: 11px; font-weight: 800; color: #eafff1;
padding: 5px 12px; border-radius: 999px; background: #1f7a45;
}
.pgr-book-row:not(:disabled):active { transform: scale(.98); background: rgba(125,255,168,.07); }
.pgr-book-open {
margin-left: auto; border: 1px solid rgba(125,255,168,.25); background: none; cursor: pointer;
color: #7dffa8; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
}
.pgr-code-t { display: flex; align-items: center; }
/* 📟 다이얼(삐삐 걸기) */
.pgr-dialer { display: grid; gap: 7px; }
.pgr-dialer .pgr-code-row input { font-size: 17px; letter-spacing: 3px; text-align: center; }
.pgr-friends-btn {
padding: 10px 0; border-radius: 10px; cursor: pointer;
background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14);
color: #b9bdc7; font-size: 12.5px; font-weight: 700;
}
.pgr-dial-hint { text-align: center; font-size: 11px; color: #6b7280; }
/* 음성에 숫자 동봉 */
.pgr-after-btns { display: flex; gap: 7px; }
.pgr-after-btns button {
flex: 1; padding: 11px 0; border-radius: 12px; cursor: pointer; font-size: 12.5px; font-weight: 800;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #d7dae2;
}
.pgr-after-btns button.go { background: #1f7a45; border-color: #2a9c58; color: #eafff1; }
.pgr-rec-after { display: grid; gap: 8px; }
.pgr-with-code { display: flex; gap: 6px; }
.pgr-with-code input {
flex: 1; min-width: 0; padding: 9px 13px; border-radius: 10px; font-size: 13px;
background: rgba(125,255,168,.05); border: 1px solid rgba(125,255,168,.18); color: #7dffa8;
outline: none; font-family: 'Courier New', monospace; letter-spacing: 2px;
}
.pgr-with-code button {
flex: none; width: 42px; border-radius: 10px; border: 1px solid rgba(125,255,168,.2);
background: none; cursor: pointer; font-size: 15px;
}
/* # 인사말 건너뛰기 — 우물정자 감성 */
.pgr-skip {
display: block; margin: 2px auto 0; padding: 8px 20px; border-radius: 999px; cursor: pointer;
background: none; border: 1px solid rgba(125,255,168,.3); color: #7dffa8;
font-size: 12.5px; font-weight: 800; font-family: 'Courier New', monospace; letter-spacing: 1px;
}
.pgr-skip:active { background: rgba(125,255,168,.1); transform: scale(.95); }
/* 📱 번호 선택 개통 */
.pgr-pick-open {
width: 100%; margin-top: 8px; padding: 9px 0; border-radius: 10px; cursor: pointer;
background: none; border: 1px dashed rgba(255,255,255,.16); color: #b9bdc7;
font-size: 12px; font-weight: 700;
}
.pgr-pick-wrap { display: grid; gap: 10px; padding: 4px 2px; }
.pgr-pick-row {
display: flex; align-items: center; gap: 6px; justify-content: center;
background: linear-gradient(180deg, #143d22, #0d2b18);
border: 2px solid rgba(0,0,0,.5); border-radius: 12px; padding: 12px;
box-shadow: inset 0 2px 12px rgba(0,0,0,.6);
}
.pgr-pick-prefix { font-size: 24px; color: #5fd88a; font-family: 'Courier New', monospace; letter-spacing: 2px; }
.pgr-pick-row input {
width: 150px; background: none; border: none; outline: none;
font-size: 24px; color: #7dffa8; font-family: 'Courier New', monospace; letter-spacing: 3px;
text-shadow: 0 0 10px rgba(125,255,168,.5);
}
.pgr-pick-stat { text-align: center; font-size: 12px; color: #8b909b; min-height: 16px; }
.pgr-pick-stat.good { color: #7dffa8; }
.pgr-pick-stat.bad { color: #ff8f9a; }
.pgr-pick-sug { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pgr-pick-sug button {
padding: 7px 12px; border-radius: 999px; cursor: pointer;
background: rgba(125,255,168,.06); border: 1px solid rgba(125,255,168,.2);
color: #7dffa8; font-size: 12.5px; font-weight: 800; font-family: 'Courier New', monospace;
}
.pgr-pick-go {
padding: 13px 0; border-radius: 12px; border: none; cursor: pointer;
background: #1f7a45; color: #eafff1; font-size: 14px; font-weight: 800;
}
.pgr-pick-go:disabled { opacity: .45; cursor: default; }
/* 📟 개통식 */
.pgr-act-copy {
margin: 12px 4px 2px; text-align: center; font-size: 12.5px; color: #9aa0ad; line-height: 1.7;
}
.pgr-btn.go { background: linear-gradient(180deg, #2a9c58, #1f7a45); border-color: #2a9c58; color: #eafff1; }
.pgr-btn:disabled { opacity: .5; cursor: default; }
/* 수신 3케이스 구분 */
.pgr-row-ic.code { background: rgba(255,255,255,.06); color: #d7dae2; }
.pgr-row-ic.mix { background: rgba(201,180,88,.12); color: #e6d9a3; }
.pgr-row.mix { border-color: rgba(201,180,88,.2); }
/* 보낸 호출 — 흐릿하게(주인공은 받은 호출) */
.pgr-list.dim .pgr-row { opacity: .62; cursor: default; }
.pgr-row-ic.sent { background: rgba(255,255,255,.05); color: #8b909b; }
.pgr-sec-sub { font-weight: 600; font-size: 10.5px; color: #4b5563; margin-left: 6px; }
/* 개통식 — 기다리는 호출 배너 */
.pgr-act-wait {
margin: 10px 4px 0; padding: 10px 12px; border-radius: 12px; text-align: center;
background: rgba(201,180,88,.1); border: 1px solid rgba(201,180,88,.3);
color: #e6d9a3; font-size: 12.5px;
}
.pgr-act-wait b { color: #ffe89a; }
/* ═══ DM 페이지 크롬 안정화 ═══
증상: 삐삐 등에서 스크롤 시 헤더와 탭바(채팅·친구·난장·삐삐)가 겹쳐 보임.
원인: 내부 스크롤 컨테이너 + 헤더 자동 숨김이 만나면 슬라이드 중 두 줄이 교차한다.
대응: ① nav.js에서 dm 헤더 자동숨김 제외 ② 탭바를 불투명 sticky로 못 박아
어떤 상황에서도 다른 요소가 뒤에 비치지 않게. */
.dm-root.page .dm-tabs {
position: sticky; top: 0; z-index: 5;
background: #000; /* 뒤 내용이 비쳐 '겹친 것처럼' 보이는 것 차단 */
}
/* 헤더는 DM 페이지에서 항상 제자리 — 자동 숨김 클래스가 남아 있어도 무력화 */
body[data-page="dm"] .header.hdr-hidden { transform: none; }
body[data-page="dm"] .header.hdr-nologo .logo { opacity: 1; visibility: visible; }
/* 받은 호출 목록이 플로팅 네비에 가리지 않게(네비 64px + 여유 + 안전영역) */
.dm-root.page #dm-pager { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.pgr-list { padding-bottom: 4px; }
/* 삐삐 탭 미확인 점 — 탭을 안 열어도 '왔다'는 걸 안다 */
.dm-tab-dot {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
border-radius: 999px; background: #2fd07a; color: #04150b;
font-size: 10px; font-weight: 900; vertical-align: middle;
}
.dm-tab-dot[hidden] { display: none !important; }
/* ① 보낸 호출 행 폭 — 발신 배지/시간이 밀려 레이아웃이 터지던 문제 */
.pgr-row.sentrow { cursor: default; align-items: center; }
.pgr-row.sentrow .pgr-row-mid { min-width: 0; flex: 1; }
.pgr-row.sentrow .pgr-row-mid b,
.pgr-row.sentrow .pgr-row-mid span {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgr-row .pgr-row-t { flex: none; white-space: nowrap; }
.pgr-row-ic { flex: none; }
/* 📟 삐삐 컴포넌트 박스 모델 못 박기 — box-sizing이 없어 패딩만큼(14px) 컨테이너를 넘쳐
'보낸 호출' 행이 오른쪽으로 삐져나갔다. 페이지마다 전역 box-sizing 유무가 달라 여기서 확정. */
.pgr-wrap, .pgr-wrap *, .pgr-row, .pgr-device, .pgr-list, .pgr-dialer,
.pgr-mk, .pgr-book-body, .pgr-call-body { box-sizing: border-box; }
.pgr-row { width: 100%; max-width: 100%; }
.pgr-list { max-width: 100%; overflow-x: hidden; }
/* 📟 다이얼 — 012 고정 프리픽스(타이핑 대상 아님) */
.pgr-dial-row {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(180deg, #0f2a1a, #0a1f13);
border: 1px solid rgba(125,255,168,.14); border-radius: 14px; padding: 10px 12px;
}
.pgr-dial-prefix {
flex: none; font-size: 19px; color: #5fd88a; letter-spacing: 2px;
font-family: 'Courier New', monospace; user-select: none;
}
.pgr-dial-row input {
flex: 1; min-width: 0; background: none; border: none; outline: none;
font-size: 19px; color: #7dffa8; letter-spacing: 3px;
font-family: 'Courier New', monospace; text-shadow: 0 0 8px rgba(125,255,168,.4);
}
.pgr-dial-row input::placeholder { color: rgba(125,255,168,.28); text-shadow: none; }
.pgr-dial-go {
flex: none; padding: 9px 16px; border-radius: 999px; border: none; cursor: pointer;
background: #1f7a45; color: #eafff1; font-size: 13px; font-weight: 900;
}
.pgr-dial-go:disabled { opacity: .4; cursor: default; }
.pgr-dial-hint.bad { color: #ff8f9a; }
/* ═══ 📖 삐삐 사용 설명서 — 90년대 취급설명서 감성 ═══ */
#pager-guide {
position: fixed; inset: 0; z-index: 14800; display: flex; align-items: center; justify-content: center;
background: radial-gradient(120% 90% at 50% 20%, #0b2416 0%, #050608 70%);
opacity: 0; transition: opacity .26s ease; padding: 20px;
}
#pager-guide.on { opacity: 1; }
.pgr-gd-body {
width: 100%; max-width: 420px; box-sizing: border-box;
padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
border-radius: 22px; background: #0e1116; border: 1px solid rgba(125,255,168,.18);
box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(125,255,168,.08);
transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2,.9,.3,1.15);
text-align: center;
}
#pager-guide.on .pgr-gd-body { transform: none; }
.pgr-gd-art {
background: linear-gradient(180deg, #0d2b18, #081510);
border: 1px solid rgba(125,255,168,.14); border-radius: 16px;
padding: 10px; margin-bottom: 16px;
}
.pgr-art-svg { width: 100%; height: auto; max-height: 168px; display: block; }
.pgr-gd-t {
font-size: 19px; font-weight: 900; color: #fff; letter-spacing: -.3px; margin-bottom: 10px;
}
.pgr-gd-b {
font-size: 13.5px; line-height: 1.85; color: #b9bdc7; min-height: 118px;
}
.pgr-gd-b b { color: #7dffa8; font-weight: 800; }
.pgr-gd-b i { color: #8b909b; font-style: normal; font-size: 12.5px; }
.pgr-gd-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 16px; }
.pgr-gd-dots i {
width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18);
transition: all .25s ease;
}
.pgr-gd-dots i.on { width: 18px; border-radius: 3px; background: #7dffa8; }
.pgr-gd-btns { display: flex; gap: 8px; }
.pgr-gd-btns button {
flex: 1; padding: 13px 0; border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 800;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #b9bdc7;
}
.pgr-gd-btns button.go {
flex: 1.6; border: none; background: linear-gradient(180deg, #2a9c58, #1f7a45); color: #eafff1;
}
.pgr-gd-btns button:active { transform: scale(.97); }
.pgr-guide-open {
width: 100%; margin-top: 8px; padding: 11px 0; border-radius: 12px; cursor: pointer;
background: rgba(125,255,168,.07); border: 1px solid rgba(125,255,168,.22);
color: #7dffa8; font-size: 12.5px; font-weight: 800;
}
/* 삽화 애니메이션 — 삐삐는 떨고, 액정은 깜빡이고, 숫자는 떠다닌다 */
@keyframes artShake { 0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-1.5px,1px) rotate(-1deg)} 75%{transform:translate(1.5px,-1px) rotate(1deg)} }
@keyframes artBlink { 0%,45%{opacity:1} 55%,70%{opacity:.25} 80%,100%{opacity:1} }
@keyframes artWave { 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }
@keyframes artFloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes artFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@keyframes artSpark { 0%,100%{opacity:.35; transform:scale(.9)} 50%{opacity:1; transform:scale(1.15)} }
.art-shake { animation: artShake .28s infinite; transform-origin: center; }
.art-blink { animation: artBlink 1.6s infinite; }
.art-wave { animation: artWave 1.2s infinite; }
.art-float1 { animation: artFloat1 2.6s ease-in-out infinite; }
.art-float2 { animation: artFloat2 3.1s ease-in-out infinite; }
.art-spark { animation: artSpark 1.8s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
.art-shake, .art-blink, .art-wave, .art-float1, .art-float2, .art-spark { animation: none; }
}
/* ═══ DM 페이지: 문서 스크롤 잠금 (iOS 키보드 대응) ═══
증상: 삐삐 걸기 입력을 눌렀다 빠져나오면 헤더가 탭바 위로 내려앉아 겹침.
원인: iOS는 입력에 포커스가 가면 '문서'를 강제로 밀어 올려 키보드 자리를 만든다.
DM은 내부 스크롤 구조라 문서가 스크롤될 일이 없는데도 밀리고, 키보드가
닫혀도 그 오프셋이 남아 sticky 헤더와 본문이 어긋난다.
대응: 문서 자체를 스크롤 불가로 못 박아 밀릴 여지를 없앤다(+JS가 복원). */
html:has(body[data-page="dm"]) { height: 100%; overflow: hidden; }
body[data-page="dm"] {
height: 100dvh; overflow: hidden; overscroll-behavior: none;
position: relative;
}
/* ═══ 삐삐 입력 행 넘침 봉쇄 ═══
원인: 그리드/플렉스 아이템은 기본 min-width:auto라 '내용 최소폭' 아래로 안 줄어든다.
은 기본 intrinsic 폭(약 20자)이 커서 좁은 화면·iOS에서 행 전체를
컨테이너 밖으로 밀어냈다(호출 버튼이 화면 밖으로).
해법: 컨테이너를 minmax(0,1fr)로, 아이템에 min-width:0, 입력은 flex:1 1 0 + width:0
(내재 폭 기여를 0으로 만들어 순수 남은 공간만 차지하게). */
.pgr-dialer { grid-template-columns: minmax(0, 1fr); }
.pgr-dialer > *, .pgr-pick-wrap > *, .pgr-mk > * { min-width: 0; }
.pgr-dial-row, .pgr-pick-row, .pgr-code-row, .pgr-with-code, .pgr-mk-row {
min-width: 0; max-width: 100%;
}
.pgr-dial-row input, .pgr-pick-row input, .pgr-code-row input,
.pgr-with-code input, .pgr-mk-row input {
flex: 1 1 0; width: 0; min-width: 0;
}
/* 어떤 경우에도 가로 스크롤은 만들지 않는다 */
.pgr-wrap, #dm-pager { overflow-x: hidden; }
/* ═══════ ⚙ 메시지 설정 — 카톡식 섹션 구조 ═══════ */
/* 내 정보 카드 — '나'부터 보여주고 시작한다 */
.dm-set-me {
display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.dm-set-me-ava .dm-ava { width: 52px; height: 52px; font-size: 19px; }
.dm-set-me-tx { flex: 1; min-width: 0; }
.dm-set-me-tx b { display: block; font-size: 16px; font-weight: 900; color: #fff; }
.dm-set-me-tx i { display: block; font-style: normal; font-size: 12px; color: #8b909b; margin-top: 2px; }
.dm-set-manage {
flex: none; padding: 7px 14px; border-radius: 999px; text-decoration: none;
border: 1px solid rgba(255,255,255,.16); color: #dfe3ec; font-size: 12.5px; font-weight: 800;
}
/* 글자 크기 세그먼트 */
.dm-seg { flex: none; display: inline-flex; background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; }
.dm-seg button {
border: none; background: none; color: #9aa1af; cursor: pointer;
padding: 7px 11px; font-size: 12px; font-weight: 800;
}
.dm-seg button.on { background: #4361ff; color: #fff; }
/* 안내 문단 */
.dm-set-note {
margin: 2px 14px 10px; padding: 11px 12px; border-radius: 12px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
font-size: 12px; line-height: 1.6; color: #98a0b0;
}
.dm-set-ver { padding: 18px 16px 28px; text-align: center; font-size: 11.5px; color: #5d6472; }
/* 알림 상세 — 기기 알림 꺼짐 경고(카톡과 같은 자리) */
.dm-set-warn {
margin: 12px 14px; padding: 16px 14px; border-radius: 14px; text-align: center;
background: rgba(255,212,121,.09); border: 1px solid rgba(255,212,121,.26);
}
.dm-set-warn[hidden] { display: none; }
.dm-set-warn b { display: block; font-size: 14px; color: #fff; font-weight: 900; }
.dm-set-warn i { display: block; font-style: normal; font-size: 12.5px; color: #d9c9a2; margin: 5px 0 12px; }
.dm-set-warn .dm-mic-btn { display: inline-flex; }
/* 세로 배치 행(키워드 입력 등) */
.dm-set-col { display: flex; flex-direction: column; gap: 9px; padding: 13px 16px; }
.dm-set-input, .dm-set-time {
width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 11px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
color: #fff; font-size: 14px; font-family: inherit;
}
.dm-time-row { flex: none; display: flex; align-items: center; gap: 7px; }
.dm-time-row em { font-style: normal; color: #8b909b; }
.dm-set-time { width: 108px; }
#dm-dnd-range.off { opacity: .42; pointer-events: none; }
/* 🔒 화면 잠금 — 점 4개 + 키패드 (은행 앱 문법) */
.dm-pin-dim {
position: fixed; inset: 0; z-index: 2000002; display: flex; align-items: center; justify-content: center;
background: rgba(4,5,9,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
padding: 20px; opacity: 0; transition: opacity .18s ease;
}
.dm-pin-dim.on { opacity: 1; }
.dm-pin { width: 100%; max-width: 320px; text-align: center; }
.dm-pin-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 15px; margin-bottom: 12px;
background: rgba(255,255,255,.07); color: #cdd9ff;
}
.dm-pin-ic svg { width: 20px; height: 20px; }
.dm-pin b { display: block; font-size: 18px; font-weight: 900; color: #fff; }
.dm-pin i { display: block; font-style: normal; font-size: 13px; color: #98a0b0; margin: 6px 0 22px; }
/* 입력 상태를 점으로 */
.dm-pin-dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 26px; }
.dm-pin-dots span {
width: 13px; height: 13px; border-radius: 50%;
background: rgba(255,255,255,.13); transition: background .15s, transform .15s;
}
.dm-pin-dots span.on { background: var(--accent-2, #6a7bff); transform: scale(1.15); }
/* 키패드 */
.dm-pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dm-pin-pad button {
height: 58px; border-radius: 16px; cursor: pointer;
border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.05);
color: #fff; font-size: 21px; font-weight: 800; font-family: inherit;
}
.dm-pin-pad button:active { background: rgba(255,255,255,.16); transform: scale(.96); }
.dm-pin-pad .dm-pin-del { font-size: 18px; color: #b9c3d4; }
.dm-pin-pad .dm-pin-txt { font-size: 12.5px; font-weight: 800; color: #8fa0ff; border-color: transparent; background: none; }
.dm-pin-cancel {
margin-top: 18px; background: none; border: none; cursor: pointer;
color: #8b909b; font-size: 13.5px; font-weight: 700; font-family: inherit;
}
/* 틀리면 흔든다 */
@keyframes pinShake {
0%,100% { transform: translateX(0) }
20% { transform: translateX(-9px) } 40% { transform: translateX(8px) }
60% { transform: translateX(-5px) } 80% { transform: translateX(4px) }
}
.dm-pin.bad { animation: pinShake .4s; }
.dm-pin.bad .dm-pin-dots span { background: #ff6b81; }
@media (prefers-reduced-motion: reduce) { .dm-pin.bad { animation: none } }
/* 키워드가 걸린 알림은 눈에 띄게 */
#dm-toast.kw { border-color: rgba(255,212,121,.5); box-shadow: 0 12px 34px rgba(255,190,60,.25); }
/* 밀어서 답장 — 충분히 밀면 색이 살아나 '놓으면 걸린다'를 알려준다 */
.dm-bubble.reply-armed { box-shadow: -3px 0 0 0 #4361ff; }
.dm-msgs .dm-bubble { will-change: transform; }
/* ❤️ 메시지 리액션 — 말풍선 아래 작은 칩 */
.dm-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dm-reacts:empty { display: none; }
.dm-react {
display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
padding: 2px 7px; border-radius: 999px; font-size: 12.5px; line-height: 1.5;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #e7ebf3;
animation: reactPop .32s cubic-bezier(.2,1.4,.3,1);
}
.dm-react.mine { background: rgba(67,97,255,.24); border-color: rgba(120,150,255,.5); }
.dm-react b { font-size: 11px; font-weight: 900; opacity: .9; }
@keyframes reactPop { 0% { transform: scale(.4); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
/* 꾹 눌러서 고르는 팝오버 */
.dm-react-pop {
position: fixed; z-index: 2000003; display: flex; gap: 2px; padding: 6px;
background: #1b1e26; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
box-shadow: 0 12px 34px rgba(0,0,0,.5);
opacity: 0; transform: scale(.86); transition: opacity .16s, transform .16s cubic-bezier(.2,1.3,.3,1);
}
.dm-react-pop.on { opacity: 1; transform: scale(1); }
.dm-react-pop button {
border: none; background: none; cursor: pointer; font-size: 21px; line-height: 1;
padding: 5px 6px; border-radius: 50%;
}
.dm-react-pop button:active { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .dm-react, .dm-react-pop { animation: none; transition: none } }
/* 데이터·백업 화면 */
.dm-set-val { flex: none; font-size: 13.5px; font-weight: 900; color: #cdd9ff; }
.dm-backup-hero {
margin: 14px; padding: 16px; border-radius: 16px;
background: linear-gradient(135deg, rgba(106,123,255,.16), rgba(58,91,255,.05));
border: 1px solid rgba(106,123,255,.28);
}
.dm-backup-hero b { display: block; font-size: 15px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.dm-backup-hero i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.65; color: #c3c9d6; }
/* 📁 채팅방 폴더 칩 */
.dm-folders { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px 6px; -webkit-overflow-scrolling: touch; }
.dm-folders[hidden] { display: none; }
.dm-fchip {
flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
color: #aab2c0; font-size: 12.5px; font-weight: 800;
}
.dm-fchip.on { background: #4361ff; border-color: #4361ff; color: #fff; }
.dm-folder-pick .dm-folder-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.dm-folder-pick .dm-folder-list button {
width: 100%; padding: 11px; border-radius: 11px; cursor: pointer; font-size: 14px; font-weight: 800;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #e7ebf3;
}
/* 🚪 대기 중인 그룹 초대 */
.dm-invites { padding: 8px 12px 2px; }
.dm-invites[hidden] { display: none; }
.dm-invite {
display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
padding: 11px 12px; border-radius: 14px;
background: linear-gradient(135deg, rgba(106,123,255,.15), rgba(58,91,255,.05));
border: 1px solid rgba(106,123,255,.3);
}
.dm-invite-tx { flex: 1; min-width: 0; }
.dm-invite-tx b { display: block; font-size: 14px; font-weight: 900; color: #fff; }
.dm-invite-tx i { display: block; font-style: normal; font-size: 12px; color: #b9c3d4; margin-top: 2px; }
.dm-invite button { flex: none; border: none; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 900; cursor: pointer; }
.dm-invite-no { background: rgba(255,255,255,.08); color: #cfd5e0; }
.dm-invite-ok { background: linear-gradient(135deg,#6a7bff,#3a5bff); color: #fff; }
/* ⌨ 키보드 툴바 */
.dm-kbtool {
display: flex; gap: 6px; overflow-x: auto; padding: 7px 12px;
border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02);
}
.dm-kbtool[hidden] { display: none; }
.dm-kbtool button {
flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05);
color: #cfd5e0; font-size: 12.5px; font-weight: 800;
}
.dm-kbtool button:active { background: rgba(255,255,255,.12); }
/* ═══════ 🖼 화면 설정 ═══════ */
/* 글자 크기·글씨체는 CSS 변수로 받아 미리보기와 실제 대화가 같은 규칙을 쓴다 */
/* 글자 크기는 '변수 하나'로만 정한다.
⚠️ 예전엔 html[data-dm-font="m"] .dm-bubble{font-size:14.5px}(고정)가
calc 규칙보다 특정성이 높아 슬라이더를 아무리 움직여도 14.5px에 묶여 있었다.
기준값(--dm-base)과 배율(--dm-font-scale)을 곱하는 단일 규칙으로 정리한다. */
html { --dm-font-scale: 1; --dm-base: 14.5px; }
.dm-bubble { font-size: calc(var(--dm-base) * var(--dm-font-scale)); }
html[data-dm-face="round"] .dm-bubble { font-family: ui-rounded, "Apple SD Gothic Neo", system-ui, sans-serif; letter-spacing: -.1px; }
html[data-dm-face="serif"] .dm-bubble { font-family: ui-serif, "Apple SD Gothic Neo", Georgia, serif; }
/* 미리보기 카드 */
.dm-prev { padding: 14px 14px 4px; }
.dm-prev-in {
position: relative; overflow: hidden; border-radius: 16px; padding: 14px 12px;
min-height: 132px; background: #0b0c10; border: 1px solid rgba(255,255,255,.08);
display: flex; flex-direction: column; gap: 6px;
}
.dm-prev-in .dm-bubble { position: relative; z-index: 1; }
/* 글자 크기 슬라이더 */
.dm-size-row { display: flex; align-items: center; gap: 12px; }
.dm-size-row em { font-style: normal; color: #98a0b0; font-size: 13px; }
.dm-size-row em.big { font-size: 21px; color: #dfe3ec; }
.dm-size-row input[type="range"] { flex: 1; min-width: 0; accent-color: #4361ff; }
/* 배경 스와치 */
.dm-bg-row { display: flex; flex-wrap: wrap; gap: 9px; }
.dm-bg-sw {
width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
border: 2px solid rgba(255,255,255,.12); background-size: 40px 40px;
}
.dm-bg-sw.on { border-color: #4361ff; box-shadow: 0 0 0 3px rgba(67,97,255,.25); }
/* ❄️ 눈 내리는 채팅방 — 스크롤 영역이 아니라 '뷰' 위에 얹는 오버레이.
스크롤 컨텐츠가 되면 대화가 멈춘 것처럼 굴고 말풍선 정렬까지 깨진다(실제로 겪음) */
.dm-bg-host { position: relative; background-repeat: repeat; }
.dm-bg-host > .dm-msgs, .dm-bg-host > .dm-prev-in { background: transparent; }
.dm-snow {
position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.dm-snow i {
position: absolute; top: -14px; color: #fff; font-style: normal;
animation: snowFall linear infinite;
}
@keyframes snowFall {
0% { transform: translateY(-14px) translateX(0) rotate(0deg); }
100% { transform: translateY(105vh) translateX(18px) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .dm-snow { display: none; } }
/* 🎨 테마 — 포인트 색 */
.dm-theme-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dm-acc {
position: relative; width: 84px; height: 56px; border-radius: 14px; cursor: pointer;
border: 2px solid rgba(255,255,255,.12); display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 5px;
}
.dm-acc span { font-size: 11.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.dm-acc.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
/* 😀 이모티콘 설정 */
.dm-stk-styles-set { display: flex; flex-wrap: wrap; gap: 7px; }
.dm-stk-st {
padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 800;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #cfd5e0;
}
.dm-stk-st.on { background: var(--accent, #4361ff); border-color: var(--accent, #4361ff); color: #fff; }
/* 이모티콘 크기 — 대화에 붙는 스티커에 적용 */
html[data-stk-size="s"] .dm-bubble.stk img { width: 84px; height: 84px; }
html[data-stk-size="m"] .dm-bubble.stk img { width: 116px; height: 116px; }
html[data-stk-size="l"] .dm-bubble.stk img { width: 148px; height: 148px; }
/* ═══════ ⚙ 설정 메인 — 카테고리 행 ═══════ */
/* 한 화면에 다 늘어놓지 않는다. 어디로 갈지만 보여주고 세부는 안에서. */
.dm-cat {
display: flex; align-items: center; gap: 13px; cursor: pointer;
padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.dm-cat:active { background: rgba(255,255,255,.04); }
.dm-cat-ic {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
display: flex; align-items: center; justify-content: center; font-size: 15px;
background: rgba(255,255,255,.06); color: #cdd9ff;
}
.dm-cat-ic svg { width: 17px; height: 17px; }
.dm-cat-tx { flex: 1; min-width: 0; }
.dm-cat-tx b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.dm-cat-tx i {
display: block; font-style: normal; font-size: 12px; color: #8b909b;
margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-cat-go { flex: 0 0 auto; color: #5d6472; font-size: 19px; line-height: 1; }
/* 배경을 깔아도 말풍선·입력창이 눈·무늬 위에 오게 */
/* ⚠️ .dm-inputbar는 여기서 제외 — position:relative가 알약(absolute;left/right:10px)을 덮어
left:10만 적용된 풀폭 바가 화면 밖으로 밀렸다(사장님 두 폰 재현, BARDIAG로 확정).
입력바 스택은 아래 .dm-bg-host > .dm-inputbar { z-index: 8 }가 담당(absolute 유지). */
.dm-bg-host > .dm-msgs, .dm-bg-host > .dm-head { position: relative; z-index: 1; }
/* 키워드 강조 — 등록한 낱말이 대화에 보이면 눈에 띄게 */
mark.dm-kw { background: rgba(255,212,121,.28); color: #ffe6a8; border-radius: 4px; padding: 0 2px; }
/* ⌨️ 키보드가 올라오면 '실제로 보이는 높이'에 맞춘다(--dm-vvh는 JS가 넣는다).
dvh만 믿으면 기기마다 입력창이 키보드 뒤로 숨거나 화면이 밀린다. */
body[data-page="dm"].dm-detail .dm-root.page .dm-panel {
height: var(--dm-vvh, calc(100dvh - env(safe-area-inset-top, 0px)));
}
/* ⌨️ 카톡식 무빙 — 키보드 애니메이션 '동안'만 패널 높이에 iOS 키보드 곡선의 트랜지션을 걸어
입력창이 키보드에 딱 붙어 같은 속도로 미끄러져 오르내리게 한다. JS가 willShow/willHide에
.dm-kb-anim을 켜고 didShow/didHide에 끈다(평상시엔 트랜지션 없이 즉답 — 스크롤 방해 방지). */
body.dm-kb-anim .dm-panel { transition: height .25s cubic-bezier(.38,.7,.125,1); }
/* 배경 미리보기 — 실제 대화방처럼 헤더·말풍선·입력창까지 흉내낸다 */
.dm-prev-label { font-size: 11.5px; font-weight: 900; color: #7f8695; padding: 0 2px 7px; }
.dm-prev-in { justify-content: flex-start; min-height: 168px; padding: 0 0 0 0; overflow: hidden; }
.dm-prev-head {
padding: 9px 12px; font-size: 12px; font-weight: 800; color: #cfd5e0;
background: rgba(0,0,0,.32); border-bottom: 1px solid rgba(255,255,255,.07);
position: relative; z-index: 1;
}
.dm-prev-in .dm-bubble { margin: 8px 12px 0; position: relative; z-index: 1; }
.dm-prev-bar {
margin: 10px 12px 12px; padding: 9px 13px; border-radius: 999px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
font-size: 12.5px; color: #8b909b; position: relative; z-index: 1;
}
/* 무늬 스와치에 이름 표시 */
.dm-bg-sw { position: relative; }
.dm-bg-pat span {
position: absolute; left: 0; right: 0; bottom: 3px; text-align: center;
font-size: 10px; font-weight: 800; color: #cfd5e0; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
/* 😀 그림체 고르기 — 이름 대신 '같은 이모지를 그림체별로' 보여준다 */
.dm-stk-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.dm-stk-card {
display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
padding: 12px 8px 10px; border-radius: 14px;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
}
.dm-stk-card img, .dm-stk-card .dm-stk-fb { width: 46px; height: 46px; font-size: 38px; line-height: 46px; }
.dm-stk-card b { font-size: 12.5px; font-weight: 900; color: #e7ebf3; }
.dm-stk-card i { font-style: normal; font-size: 10.5px; color: #8b909b; text-align: center; line-height: 1.35; }
.dm-stk-card.on { border-color: var(--accent, #4361ff); background: rgba(67,97,255,.14); }
.dm-stk-card.on b { color: #fff; }
/* 색 스와치에 이름 + 선택 표시(✓) — '눌렀는데 반응이 없다'는 오해를 막는다 */
.dm-bg-sw { width: 56px; height: 52px; }
.dm-bg-sw > span {
position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
font-size: 10px; font-weight: 800; color: #dfe3ec; text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.dm-bg-sw.on::after {
content: '✓'; position: absolute; top: 3px; right: 5px;
font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
/* 미리보기를 조금 키워 배경이 실제로 보이게 */
.dm-prev-in { min-height: 196px; }
/* ── 통화 컨트롤 확장 (스피커·녹음·전환) ── */
#dm-call .dmc-btn.on2 { background: rgba(106,123,255,.35); border-color: #6a7bff; }
#dm-call .dmc-btn.rec { color: #ff5d75; }
#dm-call .dmc-btn.rec.recing { background: rgba(255,77,103,.28); border-color: #ff4d67; animation: dmcRec 1.1s ease-in-out infinite; }
@keyframes dmcRec { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,103,.5); } 50% { box-shadow: 0 0 0 8px rgba(255,77,103,0); } }
#dm-call .dmc-btns { flex-wrap: wrap; justify-content: center; gap: 20px 14px; max-width: 244px; margin: 20px auto 0; }
/* ── ➕ 카톡식 첨부 시트 ── */
.dm-att-sheet { position: fixed; inset: 0; z-index: 11500; pointer-events: none; }
.dm-att-sheet.open { pointer-events: auto; }
.dm-att-dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .16s; }
.dm-att-sheet.open .dm-att-dim { opacity: 1; }
.dm-att-card {
position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
background: linear-gradient(180deg,#16171c,#0c0c0f);
border: 1px solid rgba(255,255,255,.08); border-bottom: none;
border-radius: 22px 22px 0 0; padding: 8px 14px calc(20px + env(safe-area-inset-bottom));
transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.dm-att-sheet.open .dm-att-card { transform: translateY(0); }
.dm-att-grip { width: 38px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.22); margin: 6px auto 16px; }
.dm-att-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; padding: 0 2px 4px; }
.dm-att-item {
display: flex; flex-direction: column; align-items: center; gap: 8px;
background: none; border: none; cursor: pointer; padding: 4px 0; font-family: inherit;
opacity: 0; transform: translateY(10px);
transition: transform .14s;
}
.dm-att-sheet.open .dm-att-item {
animation: dmAttIn .32s cubic-bezier(.2,.9,.3,1.1) forwards;
animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes dmAttIn { to { opacity: 1; transform: translateY(0); } }
.dm-att-item:active .dm-att-ic { transform: scale(.9); }
.dm-att-ic {
width: 56px; height: 56px; border-radius: 19px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(106,123,255,.13), rgba(106,123,255,.05));
border: 1px solid rgba(106,123,255,.22);
color: #aab4ff; transition: transform .14s;
}
.dm-att-ic svg { width: 23px; height: 23px; }
.dm-att-lb { font-size: 11.5px; font-weight: 800; color: #9aa2b5; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) {
.dm-att-item { opacity: 1; transform: none; animation: none !important; }
}
/* 📁 파일 메시지 카드 */
.dm-file-card {
display: flex; align-items: center; gap: 10px; text-decoration: none;
padding: 4px 2px; min-width: 180px;
}
.dm-file-ic { font-size: 26px; }
.dm-file-mid { display: flex; flex-direction: column; min-width: 0; }
.dm-file-mid b { color: #e7ebf3; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.dm-file-mid i { color: #8a90a0; font-size: 11px; font-style: normal; margin-top: 2px; }
/* 난장 게이트 표시 중 메시지·입력바 숨김도 display 규칙에 지지 않게 */
#dm-room-msgs[hidden], #dm-room-send[hidden] { display: none !important; }
/* ═══════════ 카톡식 프로스트 입력 도크 (2026-07-24) ═══════════
입력바를 메시지 위에 반투명 유리로 띄운다. .dm-view가 position:absolute inset:0 이라
그 안에서 하단 절대배치 가능. 메시지는 아래로 흘러 유리 뒤로 비친다. */
.dm-view .dm-msgs { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
/* 🫧 둥근 플로팅 필 입력바(사장님 지정 모양) — 양옆·아래 띄우고 큰 라운드, 카톡/아이메시지 톤.
앱(WKWebView 셸 iframe)에선 backdrop blur가 안 뜨니 반투명 배경 자체로 유리처럼 읽히게. */
.dm-inputbar {
box-sizing: border-box !important; /* ⚠️ content-box면 left/right+padding이 폭을 넘겨 전송버튼이 잘린다(사장님 재현) */
align-items: center !important; /* 알약 안 컴포넌트 세로 중앙(기본 flex-end는 바닥에 붙어 보였다 — 사장님 지적) */
position: absolute; left: 10px; right: 10px; z-index: 8;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
border-radius: 26px !important;
padding: 5px 6px !important;
background: rgba(38,41,52,.72) !important;
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 8px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.dm-inputbar textarea {
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.12) !important;
}
.dm-inputbar textarea {
background: rgba(255,255,255,.14) !important; /* 또렷한 반투명 입력 필 */
border-color: rgba(255,255,255,.18) !important;
}
.dm-inputbar textarea:focus { border-color: rgba(140,165,255,.8) !important; background: rgba(255,255,255,.18) !important; }
/* 유리 위 버튼도 살짝 밝게 떠 보이게 */
.dm-inputbar .dm-attach, .dm-inputbar .dm-ib { background: rgba(255,255,255,.08); }
/* 답장 미리보기·키보드 툴바 = 입력바 바로 위로, 같은 유리 톤 */
.dm-reply-strip:not([hidden]), .dm-kbtool:not([hidden]) {
position: absolute; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 7;
background: rgba(15,16,20,.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border-top: 1px solid rgba(255,255,255,.06);
}
/* 녹음·이모티콘 패널 = 하단 전체 오버레이(입력 위) */
.dm-ptt:not([hidden]), .dm-stk:not([hidden]) { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; }
/* 배경 테마 있는 방(dm-bg-host)에선 유리 뒤로 배경도 비침 */
.dm-bg-host > .dm-inputbar { z-index: 8; }
/* 📐 폰 폭 압축 — 실기기(iOS WKWebView)에서 미지의 수평 시프트로 전송버튼이 잘리던 문제.
버튼·간격을 줄여 어떤 시프트에도 물리적으로 잘릴 수 없게 ~28pt 여유 확보(사장님 재현 종결). */
@media (max-width: 480px) {
.dm-inputbar { gap: 6px !important; padding: 5px 5px !important; }
.dm-inputbar .dm-attach { flex: 0 0 30px; width: 30px; height: 30px; font-size: 16px; }
.dm-inputbar .dm-ib { width: 32px; height: 32px; }
.dm-inputbar .dm-send { width: 34px; height: 34px; font-size: 13px; flex: 0 0 34px; }
}
/* ═══════════ 📊 그룹 투표/약속 ═══════════ */
.dm-bubble.has-poll { max-width: 300px; width: 300px; }
.dm-poll { display: block; }
.dm-poll-load { font-size: 12.5px; color: var(--text-low,#8a8f9a); padding: 6px 2px; display: block; }
.dm-poll-card { display: flex; flex-direction: column; gap: 8px; }
.dm-poll-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--accent-2,#8ca5ff); font-weight: 800; }
.dm-poll-closed { color: var(--text-low,#8a8f9a); background: rgba(255,255,255,.08); padding: 2px 7px; border-radius: 999px; }
.dm-poll-q { font-size: 14.5px; font-weight: 800; color: #f3f4f6; line-height: 1.35; }
.dm-poll-opts { display: flex; flex-direction: column; gap: 6px; }
.dm-poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.04);
color: #eef0f4; font-family: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.dm-poll-opt:active { transform: scale(.99); }
.dm-poll-opt.picked { border-color: var(--accent,#4361ff); background: rgba(67,97,255,.12); }
.dm-poll-opt:disabled { cursor: default; opacity: .95; }
.dm-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(67,97,255,.28), rgba(111,134,255,.16)); transition: width .5s cubic-bezier(.2,.8,.3,1); z-index: 0; }
.dm-poll-opt.picked .dm-poll-fill { background: linear-gradient(90deg, rgba(67,97,255,.45), rgba(111,134,255,.28)); }
.dm-poll-otxt { position: relative; z-index: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-poll-ocnt { position: relative; z-index: 1; flex: none; font-size: 11px; color: var(--text-mid,#a4abb8); font-weight: 800; }
.dm-poll-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-low,#8a8f9a); }
.dm-poll-end { background: none; border: none; color: var(--con,#ff5a6e); font-weight: 800; font-size: 11.5px; cursor: pointer; font-family: inherit; }
/* + 투표 메뉴 */
.dm-plus-menu { position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 12;
background: var(--surface-2,#1a1b22); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 6px;
box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; animation: dmPlusIn .16s ease; }
@keyframes dmPlusIn { from { opacity: 0; transform: translateY(6px); } }
.dm-plus-menu button { text-align: left; background: none; border: none; color: #eef0f4; font-family: inherit; font-size: 14px; font-weight: 700; padding: 11px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.dm-plus-menu button:active { background: rgba(255,255,255,.06); }
/* 투표 작성 시트 */
.dm-poll-modal { position: fixed; inset: 0; z-index: 100002; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; }
.dm-poll-modal.on { opacity: 1; }
.dm-pm-sheet { width: 100%; max-width: 480px; background: var(--surface-2,#14151a); border: 1px solid rgba(255,255,255,.1);
border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.9,.3,1); }
.dm-poll-modal.on .dm-pm-sheet { transform: none; }
.dm-pm-title { font-size: 17px; font-weight: 900; color: #fff; }
.dm-pm-q, .dm-pm-opt { width: 100%; padding: 12px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
border-radius: 12px; color: #fff; font-size: 14.5px; font-family: inherit; outline: none; }
.dm-pm-q:focus, .dm-pm-opt:focus { border-color: var(--accent,#4361ff); }
.dm-pm-q { font-weight: 700; }
.dm-pm-opts { display: flex; flex-direction: column; gap: 8px; }
.dm-pm-add { align-self: flex-start; background: none; border: 1px dashed rgba(255,255,255,.2); color: var(--accent-2,#8ca5ff); font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: 10px; cursor: pointer; font-family: inherit; }
.dm-pm-multi { display: flex; align-items: center; gap: 8px; color: var(--text-mid,#a4abb8); font-size: 13.5px; }
.dm-pm-btns { display: flex; gap: 10px; margin-top: 4px; }
.dm-pm-btns button { flex: 1; padding: 14px; border: none; border-radius: 13px; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; }
.dm-pm-cancel { background: rgba(255,255,255,.07); color: #cfd3db; }
.dm-pm-go { background: var(--accent-grad, linear-gradient(135deg,#6a7bff,#3a5bff)); color: #fff; box-shadow: var(--accent-glow,0 6px 22px rgba(67,97,255,.32)); }
/* ═══════════ 🔥 인기 난장 랭킹 ═══════════ */
.dm-hot-room { }
.dm-hot-rank { flex: none; width: 22px; text-align: center; font-size: 15px; font-weight: 900;
color: #ff8a3d; font-style: italic; margin-right: -4px; }
.dm-hot-room:nth-child(2) .dm-hot-rank { color: #ffcf5c; } /* 1위 골드빛 */
.dm-hot-cnt { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800;
color: #ff9a3c; background: rgba(255,140,60,.12); padding: 3px 9px; border-radius: 999px; }
.dm-hot-cnt svg { width: 12px; height: 12px; }
/* ═══ 📻 DM 상단 안내 배너(dm-guide.js) — 스타일을 파일로 상주시켜
snapshot 잔상 재생 때도 무스타일 번쩍임이 없다(사장님 재현: 새로고침 시 흉하게 떴다 정상화) ═══ */
.dmg-wrap{padding:0 14px;margin:4px 0 8px;transition:opacity .22s ease,transform .22s ease}
.dmg-wrap.dmg-out{opacity:0;transform:translateY(-8px)}
.dmg{border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#161826,#0e0f16);border:1px solid rgba(111,134,255,.28)}
.dmg-head{display:flex;align-items:center;gap:10px;width:100%;padding:12px 15px;background:none;border:0;cursor:pointer;text-align:left}
.dmg-head-ic{font-size:19px;line-height:1}
.dmg-head-t{flex:1;font-size:13.5px;font-weight:800;color:#cfd6e6}
.dmg-head-t b{color:#fff;font-weight:900}
.dmg-head-arrow{color:#8a93ff;font-size:13px;font-weight:900}
.dmg-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
.dmg.open .dmg-body{max-height:700px}
.dmg-steps{padding:2px 14px 4px}
.dmg-step{display:flex;gap:11px;align-items:center;width:100%;padding:9px 0;border:0;border-top:1px solid rgba(255,255,255,.05);background:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dmg-step:first-child{border-top:0}
.dmg-step:active{opacity:.6}
.dmg-ic{font-size:20px;line-height:1.1;flex:0 0 auto;width:24px;text-align:center}
.dmg-go{flex:0 0 auto;color:#6b7488;font-size:18px;font-weight:900;padding-left:4px}
.dmg-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dmg-t{font-size:13.5px;font-weight:900;color:#fff}
.dmg-s{font-size:12px;line-height:1.45;color:#a7afc0}
.dmg-s b{color:#dfe4f0;font-weight:800}
.dmg-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 14px 12px}
.dmg-dot{color:#4a5163;font-size:12px;font-weight:900}
.dmg-fold,.dmg-dismiss{padding:4px 6px;border:0;background:none;color:#8b93a6;font-size:12px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dmg-fold:active,.dmg-dismiss:active{opacity:.55}
/* ═══════ 🚀 SPA 단일문서(app.html, body[data-page="spa"]) — dm 판 보정 ═══════
위의 페이지 모드 규칙 중 body[data-page="dm"] 키 규칙들이 SPA에선 안 걸린다.
SPA엔 페이지 헤더(GALLA 로고줄)가 없으므로(뷰 추출에서 header 제거)
내부 dm-head(⚙·✎ 포함)를 헤더로 되살리고, 패널 높이를 판(.view-host)에 맞춘다.
MPA(dm.html)·구 iframe 셸에는 절대 안 걸리는 셀렉터만 사용. */
body[data-page="spa"] .dm-root.page [data-view="inbox"] > .dm-head { display: grid; }
body[data-page="spa"] .dm-root.page .dm-panel { height: calc(100dvh - env(safe-area-inset-top, 0px)); }
body[data-page="spa"] .dm-root.page .dm-view .dm-head { padding-top: calc(env(safe-area-inset-top, 0px)); }
/* 상세(dm-detail)에선 MPA와 같은 문법 — 키보드 실높이(--dm-vvh)에 맞춘다 */
body[data-page="spa"].dm-detail .dm-root.page .dm-panel {
height: var(--dm-vvh, calc(100dvh - env(safe-area-inset-top, 0px)));
}
/* 🐞 대화방 상단 검은 띠(실기기) — MPA는 문서 자체를 잠가(1160행) 어떤 스크롤/흐름
오프셋도 못 생기지만, SPA의 스크롤러는 문서가 아니라 판의 .view-host라
dm.js lockPageScroll(문서만 스냅)이 못 받친다. 대응 2중:
① DM 판의 view-host는 아예 스크롤 불가(문서잠금의 SPA 등가물 — DM은 전부 내부 스크롤)
② 상세는 판(.tab-pane, transform 컨테이너) 기준 절대 고정 — 스레드 헤드가
safe-area 바로 아래 붙고, 높이는 --dm-vvh(키보드 로직) 그대로 산다. */
body[data-page="spa"] .tab-pane[data-tab="dm"] .view-host {
overflow: hidden; overscroll-behavior: none;
}
body[data-page="spa"].dm-detail .dm-root.page {
/* ⚠️ position:absolute (NOT fixed) — 판(.tab-pane)이 transform 컨테이너라
fixed든 absolute든 '판 기준 고정'으로 동일하게 렌더된다. 그런데 iOS WKWebView는
transform된 조상 안의 position:fixed 서브트리에서 내부 overflow(.dm-msgs) '터치'
스크롤을 죽인다(프로그램 스크롤·웹은 정상, 실기기 손가락만 꿈쩍 안 함 = 사장님 재현).
absolute로 바꾸면 같은 레이아웃·같은 '검은 띠' 방지(view-host가 스크롤 불가라 flow
오프셋 0)면서 내부 터치 스크롤이 살아난다. .view-host(absolute inset:0)가 positioned
조상이라 top/height가 판 기준으로 정확히 잡힌다. */
position: absolute; top: 0; left: 0; right: 0;
height: var(--dm-vvh, 100dvh);
z-index: 5; /* 판 안 잔여 콘텐츠 위 — 판이 자체 스택 컨텍스트라 셸 네비(9999)·스택(#stack-root)엔 못 오른다 */
}
/* 🫲 SPA 엣지 스와이프 백(dm.js bindSpaEdgeSwipe) — 끌리는 대화방 뷰가 불투명하게
인박스 위에 얹혀 밀리고, 벌어진 틈으로 뒤의 인박스 리스트가 드러난다.
배경·그림자는 .dm-panel과 같은 문법(스택 뷰 슬라이드와 같은 감). */
body[data-page="spa"] .dm-view.dm-sliding {
z-index: 3;
background:
radial-gradient(90% 40% at 80% 0%, rgba(61,107,255,.10) 0%, transparent 60%),
radial-gradient(120% 80% at 50% 0%, #13141a 0%, #08090c 60%);
box-shadow: -24px 0 60px rgba(0,0,0,.55);
will-change: transform;
}