/* 즐톡.NET — 크림/코랄 아기자기 테마 (정밀 디자인) */

/* 셀프호스팅 폰트 (외부 CDN 의존 없음) */
@font-face {
  font-family: 'Jua'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Jua.ttf') format('truetype');
}
@font-face {
  font-family: 'GowunDodum'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/GowunDodum.ttf') format('truetype');
}

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #F3EADB;            /* 페이지 배경: 크림 */
  --card: #FBF5E9;          /* 카드/패널: 아이보리 */
  --card-border: #E5D9C3;   /* 카드 테두리 */
  --card-border-deep: #D8C8AB;
  --header: #EF8E75;        /* 헤더: 코랄 */
  --header-deep: #E07A60;
  --btn-blue: #C7E3F4;
  --btn-blue-deep: #9CC8E3;
  --text: #5C4A38;          /* 본문 갈색 */
  --text-sub: #9B8A76;
  --bubble-text: #4A3728;   /* 말풍선 본문/발신자: 진갈색(또렷) */
  --badge: #EFE3CE;
  /* 참여자 말풍선 6색 (배경 / 한 톤 진한 테두리) */
  --bub-0: #DDEBC9; --bub-0b: #BBD69A;  /* 민트 */
  --bub-1: #F6CBD4; --bub-1b: #E7A6B2;  /* 핑크 */
  --bub-2: #C9DFF2; --bub-2b: #A2C6E5;  /* 하늘 */
  --bub-3: #F6EBB8; --bub-3b: #E1D186;  /* 레몬 */
  --bub-4: #E3D0EE; --bub-4b: #C6AADB;  /* 라벤더 */
  --bub-5: #F6D9BE; --bub-5b: #E8BB92;  /* 살구 */
  --male: #5B9BD5;
  --female: #E58BA6;
  --accent-green: #A8C6A1;
  --shadow: 0 4px 14px rgba(92,74,56,.12);
  --shadow-hover: 0 8px 22px rgba(92,74,56,.20);
  --font-title: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body: 'GowunDodum', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --radius: 18px;
}
html, body { height: 100%; }
body {
  font-family: var(--font-body); background: var(--bg); color: var(--text);
  overflow: hidden; -webkit-tap-highlight-color: transparent; line-height: 1.55;
}
.hidden { display: none !important; }
.muted { color: var(--text-sub); font-size: 12px; }
.spacer { flex: 1; }
.err { color: var(--header-deep); font-size: 13px; min-height: 16px; margin-top: 6px; }
.mobile-only { display: none; }

/* 스크롤바 (얇고 둥근 갈색) */
* { scrollbar-width: thin; scrollbar-color: var(--card-border-deep) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--card-border-deep); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #c9b795; }
::-webkit-scrollbar-track { background: transparent; }

/* 아바타 (세로 라운드 사각형 슬라이스 webp, 프레임 없음 — 테두리·그림자·박스 배경 없음) */
/* full 컷 아바타: 컴팩트 비율 240×268(≈1:1.115). 카드/미니프로필이 이 비율을 따라 낮아짐 */
.avatar { width: 40px; height: 45px; border-radius: 26%; flex-shrink: 0; display: block; object-fit: cover; }
.avatar.xs { width: 20px; height: 26px; border-radius: 26%; } /* face 성격(작은 발신자) — 유지 */
.avatar.sm { width: 30px; height: 39px; border-radius: 26%; } /* face 성격(대화 리스트) — 유지 */
.avatar.lg { width: 96px; height: 107px; border-radius: 24%; }
/* 아이보리가 아닌 바탕(코랄 헤더/쪽지헤더) 위: radius 크게 + 미세한 아이보리 배경으로 이질감 완화(테두리·그림자 없음) */
.me-chip .avatar, .note-win-head .avatar, .mthread-head .avatar { border-radius: 40%; background: rgba(251,245,233,.45); }

/* 색 있는 성별 기호 (뱃지 배경 없음) — 닉네임 바로 앞 */
.gmark { font-family: var(--font-title); font-weight: 800; margin-right: 4px; }
.gmark.m { color: var(--male); }
.gmark.f { color: var(--female); }
.nl-name { }
.g-m { color: var(--male); } .g-f { color: var(--female); }

/* ===== 마카롱 버튼 ===== */
.btn {
  font-family: var(--font-title); font-size: 15px; cursor: pointer; color: var(--text);
  padding: 10px 18px; border-radius: 16px; border: none;
  background: linear-gradient(180deg, #F7F0E1, #EFE3CD);
  border-bottom: 3px solid var(--card-border-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(92,74,56,.14);
  transition: transform .1s, box-shadow .1s, border-bottom-width .05s;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 12px rgba(92,74,56,.2); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn.blue { background: linear-gradient(180deg, #C0DFF2, #DCEFFB); border-bottom-color: var(--btn-blue-deep); color: #35617e; }
.btn.coral { background: linear-gradient(180deg, #F2A28E, #EF8E75); border-bottom-color: var(--header-deep); color: #fff7f3; text-shadow: 0 1px 1px rgba(180,90,70,.35); }
.btn.block { width: 100%; }
.btn.round { border-radius: 999px; }

/* 로그인/가입 */
.screen { height: 100vh; height: 100dvh; }
.center-screen { display: flex; align-items: center; justify-content: center; background: var(--bg); }
.card { background: var(--card); padding: 34px; border-radius: 24px; width: 350px; max-width: 90vw;
  box-shadow: var(--shadow); text-align: center; border: 1px solid var(--card-border); }
.logo-emoji { font-size: 46px; }
.logo { font-family: var(--font-title); font-size: 34px; color: var(--header); margin: 2px 0 8px; }
/* ".NET"은 "즐톡"보다 작고 옅게 → "즐톡"이 주인공 */
.logo .tld { font-size: 0.52em; opacity: 0.6; font-weight: 400; margin-left: 1px; vertical-align: baseline; }
.brand .tld { font-size: 0.68em; opacity: 0.82; margin-left: 1px; }
.tagline { color: var(--text-sub); font-size: 13px; margin-bottom: 20px; }
/* 로그인 소개 문구: 어떤 화면 폭(모바일 360px 포함)에서도 한 줄 보장 */
.login-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 로그인 버튼 영역 가운데 정렬 (구글 GIS iframe 버튼 포함) */
#google-login-area { display: flex; justify-content: center; align-items: center; min-height: 44px; }
#google-login-area > div { margin: 0 auto; }
#dev-login-area { display: flex; flex-direction: column; align-items: center; }
#dev-login-area .dev-note { text-align: center; }
#dev-login-area input, #dev-login-area .btn { width: 100%; }
.dev-note { color: var(--text-sub); font-size: 12px; margin: 14px 0 8px; }
.card input, .popup-card input { width: 100%; padding: 12px 14px; margin: 6px 0; border: 1.5px solid var(--card-border);
  border-radius: 14px; font-size: 15px; font-family: var(--font-body); background: #FFFDF8; color: var(--text); transition: border-color .15s; }
.card input:focus, .popup-card input:focus { outline: none; border-color: var(--header); }
.gender-row { display: flex; gap: 12px; justify-content: center; margin: 14px 0; }
.gender-pick { cursor: pointer; padding: 8px 14px; border: 1.5px solid var(--card-border); border-radius: 14px; background: #FFFDF8; }

/* ===== 앱 레이아웃 ===== */
#screen-app { display: flex; flex-direction: column; }
.topbar {
  height: 58px; background: var(--header); border-bottom: 3px solid var(--header-deep);
  display: flex; align-items: center; padding: 0 14px; flex-shrink: 0; color: #fff9f5; z-index: 20;
}
.tb-side { display: flex; align-items: center; gap: 8px; flex: 1; }
.tb-right { justify-content: flex-end; }
.brand { font-family: var(--font-title); font-size: 20px; color: #fff; text-shadow: 0 2px 2px rgba(180,90,70,.35);
  letter-spacing: .5px; white-space: nowrap; }
/* ===== GNB (상단 글로벌 내비) ===== */
.gnb { justify-content: space-between; gap: 12px; }
.gnb-left { display: flex; align-items: center; flex-shrink: 0; }
.gnb-menu { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.gnb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gnb-item { position: relative; background: rgba(255,255,255,.16); color: #fff9f5; border: none; cursor: pointer;
  font-family: var(--font-title); font-size: 14px; padding: 8px 15px; border-radius: 14px; display: inline-flex; align-items: center; gap: 4px;
  transition: background .12s, transform .1s; }
.gnb-item:hover { background: rgba(255,255,255,.3); }
.gnb-item:active { transform: translateY(1px); }
.gnb-item.active { background: #fff; color: var(--header-deep); box-shadow: 0 2px 8px rgba(180,90,70,.3); }
.gnb-item.active::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -8px; height: 3px; background: #fff; border-radius: 3px; }
.gnb-item .badge { position: static; margin-left: 2px; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 20px; font-family: var(--font-title); }
.online-pill { background: rgba(255,255,255,.28); color: #fff9f5; }
.pill.soft { background: var(--badge); color: var(--text-sub); }
.me-chip { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.25);
  padding: 4px 12px 4px 4px; border-radius: 22px; font-size: 13px; color: #fff9f5; font-family: var(--font-title); }
.icon-btn { background: none; border: none; font-size: 18px; cursor: pointer; padding: 6px; border-radius: 10px;
  color: inherit; text-decoration: none; transition: background .12s; line-height: 1; }
.icon-btn:hover { background: rgba(92,74,56,.1); }
.topbar .icon-btn:hover { background: rgba(255,255,255,.22); }

.app-grid { flex: 1; display: grid; grid-template-columns: 1fr 320px; overflow: hidden; }
.col { overflow: hidden; display: flex; flex-direction: column; }
#center { background: var(--bg); }
.side { background: var(--card); border-left: 1px solid var(--card-border); }
.section-title { font-family: var(--font-title); font-size: 18px; color: var(--text); }
.section-title.small { font-size: 15px; padding: 14px 16px 8px; }
.empty-note { text-align: center; color: var(--text-sub); padding: 28px 16px; font-size: 13px; line-height: 1.9; }

/* 방 리스트 */
.rooms-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 16px 16px 0; }
.rooms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rooms-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.rooms-tools input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--card-border); border-radius: 14px;
  font-family: var(--font-body); background: var(--card); color: var(--text); }
.rooms-tools input:focus { outline: none; border-color: var(--header); }
.rooms-tools select { border: 1.5px solid var(--card-border); border-radius: 14px; padding: 0 8px; font-family: var(--font-body);
  background: var(--card); color: var(--text); }
.room-list { flex: 1; overflow-y: auto; list-style: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.room-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--card-border); cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; position: relative; }
.room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.room-card.full { opacity: .55; }
.room-icon { width: 46px; height: 46px; flex-shrink: 0; filter: drop-shadow(0 3px 4px rgba(92,74,56,.22)); }
.rc-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-title { font-family: var(--font-title); font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-sub); flex-shrink: 0; }
.count-badge { background: var(--badge); color: #a9855a; padding: 2px 10px; border-radius: 999px; font-family: var(--font-title); font-size: 12px; }
.count-badge.full { background: var(--header); color: #fff9f5; }
.lock { color: #cf9b52; }
.new-badge { position: absolute; top: 10px; right: 12px; background: var(--header); color: #fff9f5;
  font-family: var(--font-title); font-size: 10px; padding: 2px 7px; border-radius: 9px; }

/* 대기자 리스트 */
.waiter-box { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.waiter-list { flex: 1; overflow-y: auto; list-style: none; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.waiter-card { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 2px 6px rgba(92,74,56,.08);
  cursor: pointer; transition: transform .12s, box-shadow .12s; }
.waiter-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.waiter-card.me { background: #FFF6E4; border-color: #EBD9B4; cursor: default; }
.waiter-card.me:hover { transform: none; box-shadow: none; }
.wc-info { flex: 1; min-width: 0; }
.wc-name { font-family: var(--font-title); font-size: 14px; color: var(--text); }
.wc-sub { font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.note-btn { flex-shrink: 0; padding: 6px 12px; font-size: 12px; border-radius: 999px; border-bottom-width: 2px; }

/* 참여자 — 대기자와 동일한 쿠키 카드 스타일 (.waiter-card 재사용) */
.members-box { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.members-list { flex: 1; overflow-y: auto; list-style: none; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.crown { color: #e6a52e; margin-right: 2px; }
/* 나가기 버튼(마카롱, 작게) — 방 헤더/1:1 스레드 공통 */
.leave-btn { flex-shrink: 0; padding: 8px 14px; font-size: 13px; border-radius: 999px; border-bottom-width: 2px; white-space: nowrap; }

/* 채팅 */
.chat-room { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
/* 3단 구조: 헤더(고정) / 메시지(스크롤) / 입력바(고정) — 입력바는 스크롤 컨테이너 밖 형제 */
.chat-room-head { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--card-border); }
.chat-title { font-family: var(--font-title); font-size: 17px; color: var(--text); min-width: 0; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; padding: 16px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
/* 하단 앵커링(카톡식): 대화가 적으면 아래에 모이고, 넘치면 첫 자식 여백이 접혀 정상 스크롤 */
.messages > :first-child { margin-top: auto; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; animation: rise .18s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
/* 발신자 표기: 작은 아바타(20px) + 닉네임(연령대), 또렷하게(700, 진갈색) */
.msg .who { display: flex; align-items: center; gap: 5px; margin: 0 0 1px 2px; cursor: pointer; font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--bubble-text); }
.msg .who:hover .who-name { color: var(--header); }
.msg .who-name { display: inline-flex; align-items: baseline; }
/* 말풍선 + 시간 한 줄 (내 것: 시간 왼쪽 / 상대: 시간 오른쪽) */
.msg .bubble-row { display: flex; align-items: flex-end; gap: 5px; max-width: 100%; }
.msg-time { font-size: 11px; color: var(--text-sub); flex-shrink: 0; white-space: nowrap; padding-bottom: 3px; }
/* 말풍선: 내용 길이에 맞춤(최대 70%), 긴 문자열 줄바꿈, 또렷한 본문 */
.msg .bubble { max-width: 70%; width: fit-content; padding: 9px 14px; border-radius: 16px; overflow-wrap: anywhere; word-break: break-word;
  font-size: 15px; font-weight: 600; color: var(--bubble-text);
  background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 1px 3px rgba(92,74,56,.08); }
/* 참여자별 6색 (상대 말풍선) */
.msg .bubble.c0 { background: var(--bub-0); border-color: var(--bub-0b); }
.msg .bubble.c1 { background: var(--bub-1); border-color: var(--bub-1b); }
.msg .bubble.c2 { background: var(--bub-2); border-color: var(--bub-2b); }
.msg .bubble.c3 { background: var(--bub-3); border-color: var(--bub-3b); }
.msg .bubble.c4 { background: var(--bub-4); border-color: var(--bub-4b); }
.msg .bubble.c5 { background: var(--bub-5); border-color: var(--bub-5b); }
.msg.mine { align-items: flex-end; }
/* 닉네임 뒤 연령대: 작고 옅게 */
.age-suf { font-family: var(--font-title); font-size: .82em; font-weight: 400; color: var(--text-sub); margin-left: 2px; }
.msg.mine .bubble { background: linear-gradient(180deg, #F2A28E, #EF8E75); color: #fff9f3; border-color: transparent; }
.msg img { max-width: 240px; border-radius: 12px; display: block; }
/* 시스템 알약: 한 줄에 들어가는 문구는 반드시 한 줄로(여백 충분). 정말 긴 것만 자연 줄바꿈 */
.msg.system { align-self: center; max-width: 90%; }
.msg.system .bubble { background: var(--badge); color: #a9855a; font-size: 12px; padding: 5px 14px; border-radius: 999px; border: none; box-shadow: none;
  width: fit-content; max-width: 100%; }
/* 입력바: input은 flex:1 1 auto + min-width:0 로 축소 가능, 버튼·📷은 안 줄어듦 → 전송 버튼 잘림 방지 */
.chat-input { flex-shrink: 0; display: flex; gap: 8px; padding: 12px; background: var(--card); border-top: 1px solid var(--card-border); align-items: center;
  padding-right: calc(12px + env(safe-area-inset-right)); padding-left: calc(12px + env(safe-area-inset-left)); }
.chat-input > .icon-btn, .chat-input > #btn-send { flex-shrink: 0; }
.chat-input input#msg-input { flex: 1 1 auto; min-width: 0; padding: 12px 16px; border: 1.5px solid var(--card-border); border-radius: 24px;
  font-size: 15px; font-family: var(--font-body); background: #FFFDF8; color: var(--text); }
.chat-input input#msg-input:focus { outline: none; border-color: var(--header); }
/* 귓말 모드: 입력바 옅은 라벤더 (모드 오인 방지) */
.chat-room.whispering .chat-input { background: #EFE6F7; border-top-color: #D8C6EC; }

/* 내정보 (PC 뷰 + 모바일 탭 공용) */
.me-view { flex: 1; overflow-y: auto; flex-direction: column; align-items: center; gap: 16px; padding: 28px 24px; background: var(--bg); }
.me-view .me-card, .me-view .btn.block { width: 100%; max-width: 420px; }
.me-card { background: var(--card); border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--card-border); }
.me-card .pp-name { font-family: var(--font-title); font-size: 18px; }

/* ===== 홈 랜딩 ===== */
.home-view { flex: 1; overflow-y: auto; flex-direction: column; padding: 18px 20px; gap: 16px; }
.home-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(120deg, #FBE7DD, #F7EFDF); border: 1px solid var(--card-border); border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow); }
.home-banner .hb-text { font-family: var(--font-title); font-size: 18px; color: var(--text); }
.home-main { display: flex; flex-direction: column; gap: 12px; }
.home-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.home-reco { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { font-family: var(--font-title); font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--card-border); border-bottom-width: 2px; color: var(--text); transition: background .12s, border-color .12s; }
.chip-btn:hover { border-color: var(--card-border-deep); }
.chip-btn.active { background: var(--header); color: #fff9f5; border-color: var(--header-deep); }
.chip-btn.ghost { background: transparent; border-style: dashed; color: var(--text-sub); }
.home-view .room-list { flex: none; overflow: visible; padding-bottom: 0; }
.talk-teaser { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 16px 18px; border-radius: 16px;
  background: #F3ECFA; border: 1px dashed #C9B2E6; }
.talk-teaser .tt-emoji { font-size: 30px; }
.talk-teaser .tt-title { font-family: var(--font-title); color: #6b558f; }
.talk-teaser .tt-sub { font-size: 12px; color: var(--text-sub); }

/* ===== 빈 상태(토크 준비중) ===== */
.empty-state { flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-sub); padding: 24px; }
.empty-state .es-emoji { font-size: 54px; }
.empty-state .es-title { font-family: var(--font-title); font-size: 20px; color: var(--text); }
.empty-state .es-sub { font-size: 13px; }

/* 하단 탭 */
.bottom-tabs { display: none; height: 62px; background: var(--card); border-top: 1px solid var(--card-border); padding-bottom: env(safe-area-inset-bottom); }
.tab-btn { flex: 1; background: none; border: none; font-size: 20px; color: var(--text-sub); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-title); }
.tab-btn span:not(.badge) { font-size: 10px; }
.tab-btn.active { color: var(--header); }
.badge { background: var(--header); color: #fff9f5; border-radius: 12px; font-size: 10px; font-family: var(--font-title);
  padding: 1px 6px; min-width: 16px; text-align: center; }
.tab-btn .badge { position: absolute; top: 6px; right: 22%; }

/* ===== 쪽지 레이어 ===== */
.fab { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(180deg, #F2A28E, #EF8E75); color: #fff; border: none; border-bottom: 3px solid var(--header-deep);
  font-size: 24px; cursor: pointer; box-shadow: 0 6px 18px rgba(224,122,96,.5); z-index: 45; transition: transform .15s; display: none; }
body.logged-in .fab { display: block; }
.fab:hover { transform: scale(1.06); }
.fab .badge { position: absolute; top: -2px; right: -2px; }
.notes-inbox { position: fixed; right: 22px; bottom: 90px; width: 330px; max-height: 62vh; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow-hover); z-index: 46; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--card-border); animation: pop .18s ease; }
.notes-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--card-border); font-family: var(--font-title); background: var(--badge); }
.notes-list { flex: 1; overflow-y: auto; }
.note-conv { padding: 12px 16px; border-bottom: 1px solid var(--card-border); cursor: pointer; display: flex; gap: 10px; align-items: center; transition: background .12s; }
.note-conv:hover { background: var(--bg); }
.note-conv .nc-body { flex: 1; min-width: 0; }
.note-conv .nc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.note-conv .nc-name { font-family: var(--font-title); font-size: 14px; }
.note-conv .nc-time { font-size: 10px; color: var(--text-sub); }
.note-conv .nc-last { font-size: 12px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* PC 플로팅 쪽지창 */
#note-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; display: none; }
body.logged-in #note-layer { display: block; }
.note-win { position: absolute; width: 300px; height: 380px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-hover); display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  border: 1px solid var(--card-border); animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
.note-win.collapsed { height: 48px; }
.note-win.collapsed .note-messages, .note-win.collapsed .note-input { display: none; }
.note-win-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: move;
  background: var(--header); color: #fff9f5; height: 48px; flex-shrink: 0; }
.note-win-head .nw-peer { display: flex; align-items: center; gap: 6px; min-width: 0; }
.note-win-head .nw-name { font-family: var(--font-title); font-size: 14px; }
.note-win-head .icon-btn { color: #fff9f5; font-size: 15px; }
.note-win-head .nw-badge { background: #fff; color: var(--header-deep); border-radius: 12px; font-size: 10px; padding: 0 6px; font-family: var(--font-title); }
.note-win.blink .note-win-head { animation: blink 1s ease infinite; }
@keyframes blink { 50% { background: #f6b3a1; } }
.note-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); -webkit-overflow-scrolling: touch; }
/* 하단 앵커링 (플로팅 쪽지창 + 모바일 스레드 공통) */
.note-messages > :first-child { margin-top: auto; }
/* 쪽지: 말풍선 + 시간 한 줄 (내 것 시간 왼쪽 / 상대 오른쪽) */
.note-row { display: flex; align-items: flex-end; gap: 5px; max-width: 100%; align-self: flex-start; }
.note-row.mine { align-self: flex-end; }
/* 쪽지 말풍선: 내용 길이에 맞춤 + 긴 문자열 줄바꿈 (1:1은 색 유지) */
.note-msg { max-width: 82%; width: fit-content; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-border);
  font-size: 14px; font-weight: 500; color: var(--bubble-text); overflow-wrap: anywhere; word-break: break-word; }
.note-msg.mine { background: linear-gradient(180deg, #F2A28E, #EF8E75); color: #fff9f3; border-color: transparent; }
/* 어두운(코랄) 헤더 위의 연령대는 밝게 */
.note-win-head .age-suf, .mthread-head .age-suf { color: rgba(255,255,255,.82); }
.note-input { flex-shrink: 0; display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--card-border); background: var(--card); align-items: center;
  padding-right: calc(10px + env(safe-area-inset-right)); padding-left: calc(10px + env(safe-area-inset-left)); }
.note-input > .btn { flex-shrink: 0; }
.note-input input { flex: 1 1 auto; min-width: 0; padding: 9px 13px; border: 1.5px solid var(--card-border); border-radius: 18px; font-family: var(--font-body);
  background: #FFFDF8; color: var(--text); }
.note-input input:focus { outline: none; border-color: var(--header); }

/* 모바일 쪽지 전체화면 */
.mobile-notes { display: none; position: fixed; inset: 58px 0 62px 0; background: var(--card); flex-direction: column; z-index: 30; }
.mobile-inbox { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.mobile-inbox .notes-list { flex: 1; }
.mobile-thread { position: absolute; inset: 0; background: var(--card); display: flex; flex-direction: column; min-height: 0; }
/* 1:1 스레드 전용 헤더 (상대 아바타+닉네임+연령대 / 🚪 나가기) */
.mthread-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--card-border);
  background: var(--header); flex-shrink: 0; }
.mthread-peer { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: #fff9f5; padding: 4px 6px; border-radius: 12px; }
.mthread-peer:active { background: rgba(255,255,255,.18); }
.mthread-peer .mt-name { font-family: var(--font-title); font-size: 15px; }
.mthread-peer .mt-age { font-size: 12px; opacity: .9; }
.exit-btn { padding: 8px 14px; font-size: 13px; border-radius: 999px; border-bottom-width: 2px; }
/* 스레드 진입 시: 공통 헤더/하단 탭 숨기고 전체 화면 */
body.thread-open .topbar, body.thread-open .bottom-tabs { display: none !important; }
body.thread-open .mobile-notes { inset: 0; height: 100dvh; }

/* 미니 프로필 팝오버 */
.profile-pop { position: fixed; inset: 0; z-index: 80; }
.profile-pop-inner { position: absolute; width: 230px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-hover); padding: 18px; text-align: center; animation: pop .16s ease; border: 1px solid var(--card-border); }
.profile-pop-inner .avatar { margin: 0 auto; }
.profile-pop-inner .pp-name { font-family: var(--font-title); font-size: 17px; margin-top: 10px; }
.profile-pop-inner .pp-sub { color: var(--text-sub); font-size: 13px; margin: 6px 0 12px; }
.profile-pop-inner .btn { width: 100%; margin-top: 6px; padding: 9px; font-size: 14px; }

/* 모달 */
.popup { position: fixed; inset: 0; background: rgba(92,74,56,.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.popup-card { background: var(--card); padding: 26px; border-radius: 22px; width: 340px; max-width: 90vw; border: 1px solid var(--card-border); }
.popup-card h3 { font-family: var(--font-title); margin-bottom: 10px; }
.confirm-card { text-align: center; }
.confirm-msg { font-family: var(--font-body); color: var(--text); font-size: 15px; line-height: 1.6; white-space: pre-line; margin: 4px 0 8px; }
/* 모달 필드: 참여 인원 라벨 + 인라인 토글 + 비번 부드러운 펼침 */
.field-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px; cursor: default; }
.field-label { font-family: var(--font-title); font-size: 14px; color: var(--text); }
.cap-input { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); color: var(--text-sub); font-size: 13px; }
.cap-input input { width: 72px; text-align: center; margin: 0; padding: 8px 6px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px;
  padding: 10px 12px; background: #FFFDF8; border: 1.5px solid var(--card-border); border-radius: 14px; cursor: pointer; }
.toggle-row span { font-family: var(--font-title); font-size: 14px; color: var(--text); }
.toggle-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--header); cursor: pointer; }
.pw-wrap { max-height: 0; overflow: hidden; transition: max-height .25s ease, margin .25s ease, opacity .2s ease; opacity: 0; }
.pw-wrap.open { max-height: 64px; margin-top: 2px; opacity: 1; }
.modal-btns { display: flex; gap: 8px; margin-top: 14px; }
.modal-btns .btn { flex: 1; }
.pop-in { animation: pop .2s ease; }

/* 토스트 */
.toast-area { position: fixed; right: 18px; bottom: 90px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--card); color: var(--text); padding: 12px 16px; border-radius: 14px; font-size: 14px;
  box-shadow: var(--shadow-hover); cursor: pointer; display: flex; align-items: center; gap: 8px;
  border-left: 4px solid var(--header); border: 1px solid var(--card-border); animation: toastin .25s ease; max-width: 280px; font-family: var(--font-body); }
@keyframes toastin { from { transform: translateY(16px); opacity: 0; } }

/* ===== 참여자 바텀시트 (모바일) + 헤더 인원 버튼 ===== */
.members-pill { background: var(--badge); color: var(--text-sub); border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; }
.members-pill:active { transform: scale(.96); }
.members-sheet { position: fixed; inset: 0; z-index: 55; pointer-events: none; display: none; }
.members-sheet .ms-backdrop { position: absolute; inset: 0; background: rgba(92,74,56,.4); opacity: 0; transition: opacity .2s ease; }
.members-sheet .ms-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh; background: var(--card);
  border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(92,74,56,.22); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .22s ease; padding-bottom: env(safe-area-inset-bottom); }
.members-sheet .ms-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--card-border); font-family: var(--font-title); font-size: 15px; }
.members-sheet .ms-panel .members-list { flex: 1; overflow-y: auto; padding: 12px; }
.members-sheet.open { pointer-events: auto; }
.members-sheet.open .ms-backdrop { opacity: 1; }
.members-sheet.open .ms-panel { transform: translateY(0); }

/* ===== 귓말(귓속말) ===== */
.whisper-chip { flex-shrink: 0; display: flex; align-items: center; gap: 6px; margin: 0 12px; padding: 7px 12px;
  background: #EFE6F7; border: 1px dashed #B79FD6; border-bottom: none; border-radius: 14px 14px 0 0; color: #6b558f;
  font-size: 13px; font-family: var(--font-title); }
.whisper-chip .wc-target { font-weight: 800; }
.whisper-chip .wc-x { margin-left: auto; background: none; border: none; color: #6b558f; cursor: pointer; font-size: 14px; padding: 2px 8px; border-radius: 8px; line-height: 1; }
.whisper-chip .wc-x:hover { background: rgba(123,85,163,.16); }
/* 귓말 말풍선: 점선 테두리 + 라벤더 + 라벨 (당사자 화면에만 렌더) */
.msg.whisper { align-items: flex-start; }
.msg.whisper.mine { align-items: flex-end; }
.msg .wh-label { font-size: 11px; color: #7b55a3; font-family: var(--font-title); font-weight: 700; margin: 0 2px 2px; }
.msg .bubble.whisper-bubble { background: #EFE6F7; border: 1.5px dashed #B79FD6; color: #4a3a63; box-shadow: none; }
.msg.mine .bubble.whisper-bubble { background: #E7DAF5; border: 1.5px dashed #B79FD6; color: #4a3a63; }
/* 참여자 카드의 🤫 귓말 버튼 (방 안 1순위 동작) + 차단 뱃지 */
.whisper-btn { flex-shrink: 0; padding: 6px 12px; font-size: 12px; border-radius: 999px; border-bottom-width: 2px; white-space: nowrap; }
.blocked-badge { font-size: 12px; margin-left: 5px; opacity: .85; vertical-align: middle; }

/* 대상 선택 드롭다운 (세이클럽식 "모두에게 ▾") — 입력바 안, 위로 펼침 */
.wtarget { position: relative; flex-shrink: 0; }
.wtarget-btn { display: inline-flex; align-items: center; gap: 3px; max-width: 40vw; padding: 9px 11px; border-radius: 999px;
  border: 1.5px solid var(--card-border); border-bottom-width: 2px; background: #FFFDF8; color: var(--text);
  font-family: var(--font-title); font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s; }
.wtarget-btn:hover { border-color: var(--card-border-deep); }
.wtarget-btn.active { background: #EFE6F7; border-color: #C9B2E6; color: #6b558f; }
.wtarget-btn .wt-label { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtarget-btn .wt-caret { font-size: 10px; opacity: .7; flex-shrink: 0; }
.wtarget-menu { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 190px; max-width: 74vw; max-height: 244px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-hover); padding: 6px; z-index: 70; animation: pop .14s ease; }
.wt-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; cursor: pointer;
  font-family: var(--font-title); font-size: 14px; color: var(--text); }
.wt-item:hover { background: var(--bg); }
.wt-item.sel { background: #EFE6F7; }
.wt-item.all { border-bottom: 1px solid var(--card-border); border-radius: 11px 11px 0 0; margin-bottom: 3px; padding-bottom: 10px; }
.wt-item .wt-name { min-width: 0; }
.wt-item .avatar { margin: 0; }

/* ===== 섹션 스위칭 (홈/대화방/토크/내정보 + 방 채팅) ===== */
#chat-room { display: none; }
body.in-room #chat-room { display: flex; }

/* ===== PC ===== */
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .mobile-notes { display: none !important; }
  #bottom-tabs { display: none !important; }

  /* 중앙: data-view 로 한 섹션만 (방 입장 시 chat-room 이 덮음) */
  #home-view, #rooms-view, #talk-view, #me-view { display: none; }
  body:not(.in-room)[data-view="home"] #home-view { display: flex; }
  body:not(.in-room)[data-view="rooms"] #rooms-view { display: flex; }
  body:not(.in-room)[data-view="talk"] #talk-view { display: flex; }
  body:not(.in-room)[data-view="me"] #me-view { display: flex; }

  /* 우측 패널(대기자/참여자): 홈·대화방·방 채팅에서만. 토크·내정보는 전체폭 */
  #side { display: none; }
  body:not(.in-room)[data-view="home"] #side,
  body:not(.in-room)[data-view="rooms"] #side,
  body.in-room #side { display: flex; }
  #waiter-box, #members-box { display: none; }
  body:not(.in-room) #waiter-box { display: flex; }
  body.in-room #members-box { display: flex; }
  body:not(.in-room)[data-view="talk"] .app-grid,
  body:not(.in-room)[data-view="me"] .app-grid { grid-template-columns: 1fr; }
}

/* ===== 모바일 ===== */
@media (max-width: 767px) {
  .pc-only { display: none !important; }
  .mobile-only { display: inline-flex; }
  .gnb-menu { display: none; }
  .bottom-tabs { display: flex; }
  .brand { font-size: 17px; }
  .app-grid { grid-template-columns: 1fr; position: relative; }
  .col { position: absolute; inset: 0; border: none !important; }

  /* 홈은 모바일에 없음. data-tab 으로 스위칭 */
  #home-view { display: none !important; }
  #rooms-view, #talk-view, #me-view { display: none; }
  body:not(.in-room)[data-tab="rooms"] #rooms-view { display: flex; }
  body:not(.in-room)[data-tab="talk"] #talk-view { display: flex; }
  body:not(.in-room)[data-tab="me"] #me-view { display: flex; }
  body:not(.in-room)[data-tab="waiters"] #center { display: none; }
  body[data-tab="notes"] #center { display: none; }

  /* 우측(대기실 탭) */
  #side { display: none; }
  body:not(.in-room)[data-tab="waiters"] #side { display: flex; }
  #waiter-box { display: flex; }
  #members-box { display: none; }

  /* 쪽지 전체화면 */
  body[data-tab="notes"] .mobile-notes { display: flex; }

  /* 방 입장 → 채팅 전체화면 (공통 헤더+하단 탭바 숨김, #center 뷰포트 고정) */
  body.in-room:not([data-tab="notes"]) .topbar,
  body.in-room:not([data-tab="notes"]) .bottom-tabs { display: none !important; }
  body.in-room:not([data-tab="notes"]) #side { display: none !important; }
  body.in-room:not([data-tab="notes"]) #center {
    display: flex; position: fixed; inset: 0; height: 100dvh; z-index: 25;
  }
  .members-sheet { display: block; }

  /* 모바일: 말풍선 폭 80% + 본문 14px + 시간 10px */
  .msg .bubble { max-width: 80%; font-size: 14px; }
  .note-msg { max-width: 84%; }
  .msg-time { font-size: 10px; }
  #note-layer { display: none !important; }
  .notes-inbox { display: none !important; }
  .fab { display: none !important; }
  .toast-area { bottom: 74px; right: 12px; left: 12px; }
  .toast { max-width: none; }
}