/* 듀엣 화면 — 라인(LINE) 메신저의 배치·움직임을 빌린 밝은 화면. 폰이 어두운 모드여도 이 디자인 그대로 (2026-10-19 소장 「라인의 인터페이스 디자인 차용」, 2026-10-20 「다크 모드에서도 그대로」)
   빌린 것: 아래 탭·목록 줄·푸른 회색 대화 배경·연두 내 말풍선·얼굴 묶기·말풍선 밖 시간·＋/스티커 판. 로고·캐릭터·아이콘 그림은 빌리지 않는다 */
:root {
  --bg: #ffffff; --bg2: #f2f3f5; --panel: #ffffff; --field: #f2f3f5; --line: #e9eaee; --text: #111318; --sub: #8b9099;
  --brand: #06c755; --brand-deep: #04a447; --brand-tint: #e6f8ed; --accent: #06c755; --warn: #ff9500; --bad: #ff334b;
  --chat-bg: #9db4d4; --chat-meta: #3e4b60; --chat-name: #2d3748; --pill-bg: #00000024; --pill-ink: #ffffff;
  --mine: #a3e57f; --mine-ink: #0f1a0b; --mine-sub: #3f5f2f; --theirs: #ffffff; --theirs-ink: #111318; --theirs-sub: #6b7280;
  --fs: 1; --safe-b: env(safe-area-inset-bottom); --safe-t: env(safe-area-inset-top);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 폰 글꼴 크게 설정 시 모바일 브라우저·WebView가 본문만 제멋대로 키워(font boosting) 말풍선이 겹치던 문제 (2026-10-20 소장).
   글자 크기는 앱의 --fs로만 키운다 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: calc(16px * var(--fs))/1.45 -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans", system-ui, sans-serif; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
button svg, a svg { pointer-events: none; flex: none; }   /* 단추 안 그림을 눌러도 단추를 누른 것 */
#app { height: 100%; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; background: var(--bg); }

/* ── 시작 화면 ── */
.onb { flex: 1; overflow-y: auto; padding: calc(var(--safe-t) + 40px) 20px calc(var(--safe-b) + 24px); display: flex; flex-direction: column; gap: 18px; }
.onb h1 { font-size: 26px; margin: 0; letter-spacing: -0.5px; }
.onb .tag { color: var(--sub); margin: -10px 0 8px; }
.onb h2 { font-size: 18px; margin: 8px 0 0; }
.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.langs button { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; text-align: left; display: flex; gap: 10px; align-items: center; }
.langs button.sel { border-color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand) inset; background: var(--brand-tint); }
.langs .f { font-size: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--sub); }
.field input, .field select { background: var(--field); border: 1px solid transparent; border-radius: 10px; padding: 13px 14px; outline: none; }
.field input:focus { border-color: var(--brand); background: var(--panel); }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; background: var(--field); border: 1px solid transparent; border-radius: 10px; padding: 12px; }
.seg button.sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.seg.rels { flex-wrap: wrap; }
.relsel { width: 100%; padding: 11px 38px 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  color: var(--text); font: inherit; font-size: calc(15px * var(--fs)); -webkit-appearance: none; appearance: none; }
.relsel:focus { outline: none; border-color: var(--brand); }
.seg.rels button { flex: 1 1 40%; padding: 10px 8px; border-radius: 20px; }
.primary { background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 14px; font-weight: 700; font-size: 16px; }
.primary:active { background: var(--brand-deep); }
.primary:disabled { opacity: .4; }
.ghost { background: none; border: none; color: var(--sub); padding: 8px; }
.err { color: var(--bad); font-size: 14px; min-height: 1.2em; }
.codebox { background: var(--bg2); border-radius: 12px; padding: 14px; text-align: center; }
.codebox .code { font-size: 28px; letter-spacing: 6px; font-weight: 800; margin-top: 2px; }
.waiting { color: var(--sub); text-align: center; display: flex; gap: 8px; justify-content: center; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.notice { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; margin: 0; }
.brand { display: flex; gap: 14px; align-items: center; }
.brand img { width: 58px; height: 58px; border-radius: 16px; }
.brand h1 { margin: 0; } .brand .tag { margin: 2px 0 0; }
.maker { margin-top: auto; padding-top: 18px; text-align: center; font-size: 11px; color: var(--sub); }
.maker img { display: block; height: 22px; margin: 6px auto 0; }
.gbtn { display: flex; justify-content: center; min-height: 44px; margin: 6px 0; }
.note { font-size: 12px; color: var(--sub); text-align: center; }
.note a { color: var(--sub); }
.gfallback { background: #fff; color: #222; border: 1px solid var(--line); border-radius: 20px; padding: 10px 18px; font-weight: 700; }
.gfallback b { font-weight: 900; margin-right: 6px; color: #4285f4; }
.gerr { color: var(--bad); font-size: 13px; text-align: center; margin: 6px 0 0; }

/* ── 머리줄 (목록·대화방 공통) ── */
.top { display: flex; align-items: center; gap: 4px; min-height: calc(var(--safe-t) + 54px); padding: var(--safe-t) 6px 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.icon { background: none; border: none; width: 42px; height: 42px; border-radius: 50%; color: var(--text); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.icon svg { width: 25px; height: 25px; }
.icon:active { background: var(--bg2); }
.htop .ttl { flex: 1; margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.who { flex: 1; min-width: 0; }
.who b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { display: block; font-size: 11.5px; color: var(--sub); line-height: 1.2; }
.who span:empty { display: none; }
.who span.on { color: var(--brand); }
.ctop { padding-left: 2px; border-bottom-color: transparent; }
.back { display: flex; align-items: center; gap: 0; min-width: 40px; height: 42px; padding: 0 4px; background: none; border: none; color: var(--text); flex: none; }
.back svg { width: 26px; height: 26px; }
.backn { font-size: 13px; font-weight: 700; margin-left: -2px; }
.leave { flex: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 16px; padding: 6px 12px 6px 9px; font-size: 14px; }
.leave:active { background: var(--bg2); }
.banner { font-size: 12.5px; text-align: center; padding: 8px 12px; background: var(--bg2); color: var(--text); flex: none; }
.banner.bad { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); }
.banner.push { background: var(--panel); border-bottom: 1px solid var(--line); padding: 7px 12px; }
.pushbtn { background: var(--brand); color: #fff; border: none; border-radius: 16px; padding: 6px 14px; font-weight: 700; font-size: 13.5px; }

/* ── 목록 (친구·대화 탭) ── */
.friends { flex: 1; overflow-y: auto; background: var(--panel); overscroll-behavior: contain; }
.fhead { font-size: 12.5px; color: var(--sub); padding: 14px 16px 4px; }
.friend { width: 100%; display: flex; gap: 12px; align-items: center; padding: 9px 16px; background: none; border: none; text-align: left; }
.friend:active { background: var(--bg2); }
.avatar { position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 19px; flex: none; background: #9aa7bb; }
.avatar.sm { width: 36px; height: 36px; font-size: 15px; }
.avatar.big { width: 60px; height: 60px; font-size: 24px; }
.avatar.huge { width: 92px; height: 92px; font-size: 38px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar:has(img) { background: var(--bg2); }
.phpick { position: relative; cursor: pointer; }
.phcam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 4px #0003; font-size: 15px; font-style: normal; display: flex; align-items: center; justify-content: center; }
.myrow { cursor: pointer; }
.pvsheet { display: flex; flex-direction: column; height: 86vh; }
.pvsheet iframe { flex: 1; width: 100%; border: 0; border-radius: 10px; background: #fff; }
/* ── 친구 프로필 ── */
.frtop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 14px; }
.frtop b { font-size: calc(20px * var(--fs)); }
.fracts { display: flex; justify-content: center; gap: 34px; padding: 4px 0 16px; }
.fracts button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; color: var(--text); font-size: 12.5px; }
.fracts i { width: 52px; height: 52px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; font-style: normal; }
.fracts i svg { width: 25px; height: 25px; }
.frval { color: var(--sub); text-align: right; overflow-wrap: anywhere; max-width: 64%; }
.frsheet .emrow input { flex: 1; min-width: 0; background: var(--field); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; outline: none; }
.frsheet .emrow .primary { flex: none; padding: 9px 16px; border-radius: 10px; }
.dot-on { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 2px solid var(--panel); }
.fmain { flex: 1; min-width: 0; }
.fname { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fname b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fname span { font-size: 11.5px; color: var(--sub); flex: none; }
.fprev { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.fprev span { flex: 1; min-width: 0; font-size: 13.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.myrow { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.myrow b { display: block; font-size: 18px; }
.myrow span { font-size: 12.5px; color: var(--sub); }
.empty { margin: auto; text-align: center; white-space: pre-line; color: var(--sub); font-size: 14.5px; line-height: 1.6; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty .primary { padding: 11px 20px; font-size: 15px; }
.reqcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--brand-tint); border-bottom: 1px solid var(--line); }
.reqmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.reqcard b { font-size: 15px; }
.reqbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.reqbtns .primary { padding: 8px 18px; font-size: 14.5px; }

/* 아래 탭 — 친구 · 대화 · 설정 */
.tabbar { display: flex; flex: none; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tabbar button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; background: none; border: none; color: var(--sub); font-size: 10.5px; }
.tabbar svg { width: 25px; height: 25px; }
.tabbar button.sel { color: var(--text); font-weight: 700; }
.tabbar button.sel svg { stroke-width: 2.3; }
.tbadge { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
.tbadge[hidden] { display: none; }

/* ── 대화방 ── 푸른 회색 바탕, 상대는 왼쪽 흰 말풍선(얼굴·이름), 나는 오른쪽 연두 말풍선 */
.list { flex: 1; overflow-y: auto; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 3px; background: var(--chat-bg); overscroll-behavior: contain; }
.day { align-self: center; margin: 14px 0 6px; }
.day span, .callrow, .more { display: inline-block; font-size: 11.5px; color: var(--pill-ink); background: var(--pill-bg); padding: 3px 11px; border-radius: 12px; }
.more { align-self: center; border: none; margin: 6px 0; font-size: 12.5px; padding: 5px 13px; }
.callrow { align-self: center; font-size: 12.5px; padding: 5px 13px; margin: 8px 0; cursor: pointer; }
.callrow.bad { background: color-mix(in srgb, var(--bad) 55%, transparent); }
.row { display: flex; max-width: 100%; }
.row.first { margin-top: 9px; }
.row.me { align-self: flex-end; flex-direction: column; align-items: flex-end; max-width: 86%; }
.row.them { align-self: flex-start; gap: 8px; align-items: flex-start; max-width: 90%; }
.avsp { width: 36px; flex: none; }
.col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.nm { font-size: 12.5px; color: var(--chat-name); margin: 0 0 3px 3px; }
.line { display: flex; align-items: flex-end; gap: 5px; max-width: 100%; min-width: 0; }
.meta { flex: none; display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.25; color: var(--chat-meta); padding-bottom: 1px; white-space: nowrap; }
.me .meta { align-items: flex-end; }
.meta .rd { font-weight: 600; }
.bubble { position: relative; min-width: 0; padding: 8px 12px; border-radius: 18px; word-break: break-word; white-space: pre-wrap; }
.me .bubble { background: var(--mine); color: var(--mine-ink); }
.them .bubble { background: var(--theirs); color: var(--theirs-ink); }
/* 이어진 말의 첫 말풍선에만 꼬리 */
.row.first .bubble:not(.jumbo)::before { content: ""; position: absolute; top: 0; width: 12px; height: 12px; background: inherit; }
.them.first .bubble { border-top-left-radius: 6px; }
.them.first .bubble:not(.jumbo)::before { left: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.me.first .bubble { border-top-right-radius: 6px; }
.me.first .bubble:not(.jumbo)::before { right: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble .main { font-size: calc(16px * var(--fs)); }
.bubble .sub { font-size: calc(13px * var(--fs)); margin-top: 6px; padding-top: 5px; border-top: 1px solid #0000001a; color: var(--theirs-sub); }
.me .bubble .sub { color: var(--mine-sub); border-top-color: #00000014; }
.bubble .sub.back::before { content: "↩ "; }
.bubble .fix { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 7px; background: #ffffff8c; color: #8a5300; margin-bottom: 4px; }
.them .bubble .fix { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.bubble .draft { opacity: .7; }
.bubble.pending .main { opacity: .7; }
.state { font-size: 11px; color: var(--chat-meta); margin: 2px 4px 0; }
.state.bad { color: var(--bad); background: var(--panel); padding: 1px 8px; border-radius: 8px; cursor: pointer; }
.typing { font-size: 12px; color: var(--chat-meta); padding: 0 16px 4px; height: 18px; background: var(--chat-bg); flex: none; }
.list .empty { color: var(--chat-meta); }
/* 대화 속 스티커 — 말풍선 없이 그림만 */
.stkrow .stkimg { display: block; width: clamp(120px, calc(128px * var(--fs)), 150px); height: clamp(120px, calc(128px * var(--fs)), 150px); -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.bubble.jumbo { background: none !important; padding: 0 2px; }
.bubble.jumbo .main { font-size: calc(42px * var(--fs)); line-height: 1.15; }

/* ── 입력줄 ── ＋ · 둥근 입력칸(안에 스티커 단추) · 글이 있을 때만 보내기 */
.composer { padding: 0 0 var(--safe-b); border-top: 1px solid var(--line); background: var(--panel); flex: none; }
.composer [hidden] { display: none !important; }
.crow { display: flex; align-items: flex-end; gap: 4px; padding: 7px 8px 7px 4px; }
.plusbtn { width: 40px; height: 40px; border: none; background: none; color: var(--text); padding: 0; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.plusbtn svg { width: 26px; height: 26px; transition: transform .15s; }
.plusbtn.on svg { transform: rotate(45deg); }
.tbox { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--field); border-radius: 20px; }
.tbox textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; min-height: 40px; background: none; border: none; padding: 9px 2px 9px 15px; outline: none; line-height: 1.35; }
.pickbtn { width: 40px; height: 40px; border: none; background: none; color: var(--sub); padding: 0; flex: none; display: flex; align-items: center; justify-content: center; }
.pickbtn svg { width: 24px; height: 24px; }
.pickbtn.on { color: var(--brand); }
.send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--brand); color: #fff; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; }
.send svg { width: 22px; height: 22px; }
.send:disabled { display: none; }

/* ＋ 판 — 키보드 자리 */
.plusp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; padding: 20px 10px 22px; border-top: 1px solid var(--line); }
.plusp button { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; padding: 0; font-size: 11.5px; color: var(--text); line-height: 1.25; text-align: center; }
.plusp i { width: 54px; height: 54px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.plusp i svg { width: 26px; height: 26px; }
.plusp button:active i { background: var(--line); }

/* 스티커·이모지 판 — 키보드 자리에 뜬다(라인처럼). 흰 판·4칸 격자·아래 줄에 묶음 탭 */
.picker { height: min(44vh, 300px); display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--panel); }
.ptabs { order: 3; display: flex; gap: 2px; padding: 4px 6px; overflow-x: auto; border-top: 1px solid var(--line); background: var(--bg2); flex: none; scrollbar-width: none; }
.ptabs button { flex: none; width: 46px; height: 38px; border: none; border-radius: 8px; background: none; color: var(--sub); padding: 0; display: flex; align-items: center; justify-content: center; }
.ptabs button svg { width: 22px; height: 22px; }
.ptabs button img { width: 30px; height: 30px; }
.ptabs button.sel { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line) inset; }
.pname { font-size: 12px; color: var(--sub); padding: 8px 14px 0; flex: none; }
.pgrid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 8px 10px; align-content: start; overscroll-behavior: contain; }
.pgrid.emo { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pgrid img { max-width: 100%; height: auto; min-width: 0; }  /* 큰 그림(320px webp)이 칸을 넓혀 4번째 열이 화면 밖으로 나갔다 */
.pgrid.emo button { border: none; background: none; font-size: 27px; padding: 4px 0; border-radius: 8px; }
.stk { border: none; background: none; padding: 4px; border-radius: 12px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.stk img { width: 100%; max-width: 86px; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.stk:active, .pgrid.emo button:active { background: var(--bg2); }
.pempty { grid-column: 1 / -1; text-align: center; color: var(--sub); font-size: 13px; padding: 30px 10px; }

/* 입력줄 위 — 추천 띠와 미리보기(대화 위에 어둡게 깔린다) */
.suggest { display: flex; gap: 2px; padding: 6px 8px 0; overflow-x: auto; scrollbar-width: none; }
.suggest .stk { width: 64px; height: 64px; flex: none; }
.preview { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 10px 8px; background: color-mix(in srgb, var(--chat-bg) 55%, #000); }
.pvimg { border: none; background: none; padding: 0; }
.pvimg img { width: 124px; height: 124px; display: block; -webkit-user-drag: none; }
.pvx, .pvfav { position: absolute; top: 8px; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: #fff; font-size: 20px; }
.pvx { right: 8px; }
.pvfav { right: 48px; }
.pvfav.on { color: #ffd23f; }
.pvhint { font-size: 11.5px; color: #ffffffd9; margin-top: 4px; }

/* 대화 코치 — 입력칸 바로 위, 나만 보이는 카드 (2026-10-19) */
.coach { margin: 8px 10px 0; padding: 9px 10px 8px 12px; border-radius: 14px; background: var(--brand-tint);
         border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); display: flex; flex-direction: column; gap: 7px; }
.coach .cwhy { display: flex; gap: 6px; align-items: flex-start; font-size: calc(13.5px * var(--fs)); line-height: 1.4; }
.coach .cwhy > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.coach .cico { flex: none; }
.coach .cx { flex: none; background: none; border: none; color: var(--sub); padding: 0 0 0 6px; line-height: 0; }
.coach .cx svg { width: 18px; height: 18px; }
.coach .csay { align-self: flex-start; max-width: 100%; text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--brand);
               border-radius: 16px; padding: 7px 12px; font-size: calc(14.5px * var(--fs)); line-height: 1.35; overflow-wrap: anywhere; }
.coach .csay:active { background: var(--brand-tint); }
.coach .ctag { display: block; font-size: 11px; color: var(--brand-deep); font-weight: 700; margin-bottom: 2px; }
.coach .cpriv { font-size: 11px; color: var(--sub); }

/* ── 코치 대화창(＋ 「코치에게 묻기」) ── 나만 보는 1:1. 코치 말은 왼쪽, 내 질문은 오른쪽 */
.sheet.cosheet { display: flex; flex-direction: column; height: 78vh; overflow: hidden; padding: 6px 16px calc(var(--safe-b) + 12px); }
.cosheet > .usage { margin: 0 2px 4px; }
.colist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 0 12px; }
.cobub { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: calc(14.5px * var(--fs)); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.cobub.coach { align-self: flex-start; background: var(--brand-tint); border-top-left-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
.cobub.me { align-self: flex-end; background: var(--panel); border: 1px solid var(--line); border-top-right-radius: 4px; }
.cobub.wait { color: var(--sub); }
.cocaret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--brand); border-radius: 1px; animation: cocaret 1s steps(2) infinite; }
@keyframes cocaret { 50% { opacity: 0; } }
.cobub .csay { align-self: stretch; text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--brand); border-radius: 14px; padding: 7px 12px; font: inherit; white-space: normal; }
.cobub .csay:active { background: var(--brand-tint); }
.cobub .ctag { display: block; font-size: 11px; color: var(--brand-deep); font-weight: 700; margin-bottom: 2px; }
.cosheet .emrow textarea { flex: 1; min-width: 0; resize: none; background: var(--panel); border: 1px solid transparent; border-radius: 10px; padding: 11px 14px; outline: none; font: inherit; max-height: 120px; }
.cosheet .emrow textarea:focus { border-color: var(--brand); }
.cosheet .emrow .primary { flex: none; padding: 10px 18px; border-radius: 10px; }

/* ── 시트 ── 흰 바탕·둥근 위 모서리, 설정은 라인처럼 회색 바탕 위 흰 묶음 */
.sheet-bg { position: fixed; inset: 0; background: #0006; display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet { width: 100%; max-width: 640px; background: var(--panel); border-radius: 16px 16px 0 0; padding: 6px 18px calc(var(--safe-b) + 16px); max-height: 88%; overflow-y: auto; }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 2px auto 4px; }
.shead { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 4px; }
.shead h3, .sheet h3 { margin: 0; font-size: 17px; font-weight: 700; text-align: center; }
.shead .icon { position: absolute; right: -6px; top: 1px; }
.gsheet { background: var(--bg2); padding-left: 0; padding-right: 0; }
.gsheet .shead .icon { right: 6px; }
.glabel { font-size: 12.5px; color: var(--sub); padding: 14px 28px 6px; }
.group { background: var(--panel); border-radius: 12px; margin: 0 12px; overflow: hidden; }
.group + .group { margin-top: 10px; }
.row2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.group .row2 { width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; text-decoration: none; font-size: 15.5px; min-height: 50px; }
.group .row2:last-child { border-bottom: none; }
.group .row2.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.group .row2.stack .usage { margin: 0; }
.row2.link > * { pointer-events: none; }
.row2.link svg { width: 18px; height: 18px; color: var(--sub); }
.row2.link:active { background: var(--bg2); }
.row2.danger { color: var(--bad) !important; }
.group .ghost { color: var(--brand-deep); font-weight: 600; padding: 4px 2px; }
.sizes { display: flex; gap: 5px; }
.sizes button { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg2); font-size: 14px; }
.sizes button.sel { background: var(--brand); color: #fff; font-weight: 700; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: #d6d8dd; border: none; position: relative; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: left .15s; }
.switch.on { background: var(--brand); }
.switch.on::after { left: 22px; }
.usage { font-size: 12.5px; color: var(--sub); line-height: 1.45; }
.usage b { color: var(--text); font-size: 18px; }
.gsheet .maker { padding: 22px 0 6px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 90px); transform: translateX(-50%); background: #000c; color: #fff; padding: 9px 14px; border-radius: 12px; font-size: 14px; z-index: 40; }   /* 통화 화면(30) 위로 */
.ghost.danger { color: var(--bad); padding-left: 0; }

/* 새 친구 — 방법마다 흰 묶음 하나 */
.addsec { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; }
.ahead { display: flex; align-items: center; gap: 10px; }
.ahead b { font-size: 15.5px; }
.aic { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; flex: none; }
.aic svg { width: 19px; height: 19px; }
.addsec .usage { margin: 0; }
.byemail { display: flex; flex-direction: column; gap: 8px; }
.emrow { display: flex; gap: 8px; }
.emrow input { flex: 1; min-width: 0; background: var(--field); border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; outline: none; }
.emrow input:focus { border-color: var(--brand); background: var(--panel); }
.emrow .primary { padding: 11px 16px; font-size: 15px; flex: none; }
.reqout { font-size: 13px; color: var(--sub); }
.reqout .ghost { font-size: 13px; padding: 2px 6px; }
.codein { text-transform: uppercase; letter-spacing: 3px; }
.admlog { font-size: 13.5px; line-height: 1.9; padding: 0 16px; }
.admlog span { color: var(--sub); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ── 영상통화 화면 (시안 docs/mockups/call.html) ── */
.callui { position: fixed; inset: 0; z-index: 30; background: #000; color: #fff; overflow: hidden; }
.callui[hidden] { display: none; }
.callui #rv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.c-face { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
          background: radial-gradient(ellipse at 50% 30%, #3a2f45, #17141d 70%); }
.c-av { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, #ff7aa2, #ffb36b); display: flex; align-items: center; justify-content: center;
        font-size: 52px; font-weight: 800; box-shadow: 0 0 0 16px #ffffff12, 0 0 0 34px #ffffff08; }
.c-face p { margin: 28px 0 0; color: #ddd; font-size: 15px; }
.callui:not([data-state=live]) .c-face, .callui.camoff .c-face { display: flex; }
.callui[data-state=ringing] .c-av { animation: ringpulse 1.6s infinite; }
@keyframes ringpulse { 50% { box-shadow: 0 0 0 22px #ffffff18, 0 0 0 44px #ffffff0a; } }
.c-top { position: absolute; top: 0; left: 0; right: 0; padding: calc(var(--safe-t) + 16px) 16px 18px; display: flex; align-items: flex-start; gap: 10px;
         background: linear-gradient(#000a, #0000); }
.c-who b { display: block; font-size: 18px; }
.c-who span { font-size: 13px; color: #ddd; }
.c-lang { margin-left: auto; font-size: 12px; background: #0006; border: 1px solid #fff3; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.callui[data-state=ringing] .c-lang { display: none; }
.c-stat { position: absolute; top: calc(var(--safe-t) + 66px); left: 12px; margin: 0; font: 11px/1.4 ui-monospace, monospace; background: #0009; padding: 6px 8px; border-radius: 8px; z-index: 2; white-space: pre; }
.c-pip { position: absolute; top: calc(var(--safe-t) + 74px); right: 12px; width: 96px; height: 136px; object-fit: cover; border-radius: 14px; border: 2px solid #ffffff40; background: #1f2833; z-index: 1; }
.c-pip:not(.back) { transform: scaleX(-1); }   /* 셀카는 거울처럼 */
.callui[data-state=ringing] .c-pip { display: none; }
/* 얼굴 보정 단추 — 내 작은 화면 왼쪽 아래 모서리 (2026-10-20 소장) */
.c-bty { position: absolute; top: calc(var(--safe-t) + 74px + 136px - 38px); right: calc(12px + 96px - 38px); z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  border: none; padding: 0; font-size: 16px; line-height: 32px; background: #0007; color: #fff; filter: grayscale(1); opacity: .75; }
.c-bty.on { background: #ff7ab8cc; filter: none; opacity: 1; }
.c-subs { position: absolute; left: 14px; right: 14px; bottom: calc(var(--safe-b) + 130px); text-align: center; transition: opacity .6s; }
.c-subs.gone { opacity: 0; pointer-events: none; }
.c-subs .them { font-size: calc(22px * var(--fs)); font-weight: 700; line-height: 1.5; background: #000a; padding: 3px 12px; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.c-subs .them:empty, .c-subs .mine:empty, .c-subs .orig:empty, .c-subs .mytr:empty { display: none; }
.c-subs .them.draft { opacity: .75; }
.c-subs .orig { display: inline-block; margin-top: 6px; font-size: calc(13px * var(--fs)); color: #e6e6e6; background: #000a; padding: 2px 9px; border-radius: 7px; }
.c-subs .mine { display: inline-block; margin-top: 10px; font-size: calc(15px * var(--fs)); color: #cfe; background: #0009; padding: 3px 10px; border-radius: 8px; }
.c-subs .mytr { display: inline-block; margin-top: 4px; font-size: calc(12.5px * var(--fs)); color: #e6eef8; background: #000a; padding: 2px 9px; border-radius: 7px; }   /* 밝은 화면 위에서도 읽히게 배경 (2026-10-20 소장) */
.callui[data-state=ringing] .c-subs { display: none; }
.c-bar { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 22px); display: flex; justify-content: center; gap: 10px; padding: 0 8px; }
.c-bar.ringbar { gap: 90px; bottom: calc(var(--safe-b) + 70px); }
.c-btn { position: relative; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: #eee; background: none; border: none; padding: 0; }
.c-btn i { width: 56px; height: 56px; border-radius: 50%; background: #ffffff26; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 23px; }
.ringbar .c-btn i { width: 72px; height: 72px; font-size: 30px; }
.c-btn.end i { background: #ff4d4f; }
.c-btn.ok i { background: #22c55e; }
.c-btn.off i { background: #fff; color: #000; }
.c-badge { position: absolute; top: -2px; right: 6px; background: var(--accent); color: #000; font-size: 10px; font-weight: 800; border-radius: 9px; padding: 1px 5px; }
.c-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: var(--panel); color: var(--text); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px #0008;
           display: flex; flex-direction: column; z-index: 3; max-width: 640px; margin: 0 auto; }
.c-sheet[hidden] { display: none; }
.c-sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 9px auto 4px; flex: none; }
.c-sheet .sh-head { display: flex; align-items: center; gap: 8px; padding: 2px 10px 8px 16px; border-bottom: 1px solid var(--line); }
.c-sheet .sh-head span { font-size: 12px; color: var(--sub); }
.c-sheet .sh-head .ghost { margin-left: auto; }
.c-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.callui.open .c-subs, .callui.open .c-bar { display: none; }
/* 우측 세로 볼륨바 — 반투명, 위아래로 끌어 조절 (2026-10-20 소장) */
.c-volbar { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 180px; border-radius: 20px; background: #0006;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; touch-action: none; z-index: 5; cursor: ns-resize; }
.c-volfill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #ffffffb3; pointer-events: none; }
.c-volico { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 16px; pointer-events: none; }
.callui[data-state=ringing] .c-volbar, .callui.open .c-volbar { display: none; }
body.incall { overflow: hidden; }
.c-soundpop { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 112px); z-index: 4; display: flex; flex-direction: column; gap: 10px;
              padding: 12px; border-radius: 14px; background: #000c; max-width: 480px; margin: 0 auto; }
.c-soundpop[hidden] { display: none; }
.c-soundpop #cout { min-height: 44px; border-radius: 10px; border: 1px solid #888; background: transparent; color: #fff; font-size: 15px; padding: 6px 10px; }
.c-vol { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.c-vol input { flex: 1; accent-color: #fff; height: 28px; }
.c-vol b { font-size: 14px; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.callui.open .c-soundpop { display: none; }

/* QR 초대·아이폰 홈 화면 추가 안내 (2026-10-19) */
.ghost.wide { width: 100%; margin-top: 8px; padding: 10px; }
.qrbox { text-align: center; }
.qrimg { width: min(72vw, 300px); height: auto; aspect-ratio: 1; display: block; margin: 14px auto 6px; border-radius: 12px; background: #fff; padding: 6px; }
.qrbox .code { margin-bottom: 6px; }
.hguide .key { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.hguide svg.ios { width: 17px; height: 17px; color: #0a84ff; }
.hgarrow { position: fixed; left: 26%; bottom: calc(var(--safe-b) + 4px); transform: translateX(-50%); font-size: 34px; color: #fff; text-shadow: 0 1px 6px #0008; animation: hgbob 1.1s ease-in-out infinite; pointer-events: none; z-index: 60; }
@keyframes hgbob { 50% { transform: translate(-50%, 8px); } }

/* 컴퓨터(맥)에 앱으로 설치 (2026-10-19) */
.banner.push:has(#instbar) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insthow { margin: 10px 0 6px; padding-left: 22px; line-height: 1.6; font-size: 14.5px; }
.insthow.macsteps { list-style: none; padding-left: 0; }
.macsteps li { margin-bottom: 12px; line-height: 1.5; }
.macsteps li b { display: inline-block; margin-bottom: 2px; }
.macfix { margin: 6px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); font-size: 13px; line-height: 1.5; }
.macfix ul { margin: 6px 0 0; padding-left: 18px; color: var(--sub); }
.insthow li + li { margin-top: 4px; }
#instsheet .primary { width: 100%; margin: 12px 0 6px; }

/* ── 사진·동영상 (2026-10-20) ── 말풍선 자리에 그림, 설명 글은 그 아래 번역 말풍선. 불러오기 전에도 가로·세로 비율로 자리를 잡는다 */
.mcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row.me .mcol { align-items: flex-end; }
.mbox { position: relative; width: min(232px, 62vw); max-height: 320px; border-radius: 14px; overflow: hidden; background: #0000001f; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; }
.mbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbox .mwait { width: 100%; height: 100%; background: linear-gradient(100deg, #ffffff22 30%, #ffffff55 50%, #ffffff22 70%) 0 0 / 200% 100%; animation: mshine 1.2s linear infinite; }
.mbox.vid .mwait { background: #1d2230; animation: none; }
@keyframes mshine { to { background-position: -200% 0; } }
.mbox.gone { aspect-ratio: auto !important; width: auto; min-width: 160px; cursor: default; background: var(--panel); color: var(--sub); }
.mgone { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 12.5px; }
.mgone svg { width: 18px; height: 18px; flex: none; }
.mplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #0008; color: #fff;
  display: flex; align-items: center; justify-content: center; }
.mplay svg { width: 22px; height: 22px; margin-left: 3px; }
.mdur { position: absolute; right: 7px; bottom: 6px; font-size: 11.5px; color: #fff; background: #0008; padding: 1px 6px; border-radius: 8px; }
.viewer { background: #000; flex-direction: column; align-items: stretch; justify-content: flex-start; z-index: 35; }
.vtop { display: flex; justify-content: space-between; padding: calc(var(--safe-t) + 8px) 10px 6px; }
.vbtn { display: flex; align-items: center; gap: 6px; background: #ffffff1f; color: #fff; border: none; border-radius: 18px; padding: 7px 12px; font-size: 13.5px; }
.vbtn svg { width: 20px; height: 20px; }
.vbody { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.vbody { overflow: hidden; }
.vbody img, .vbody video { max-width: 100%; max-height: 100%; object-fit: contain; }
.vbody img { touch-action: none; transform-origin: center; will-change: transform; user-select: none; -webkit-user-select: none; }
.vacts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 12px calc(var(--safe-b) + 14px); }
.vacts .vbtn { padding: 9px 14px; font-size: 14px; }
#ocrsheet { z-index: 40; }   /* 크게 보기(35) 위로 */
#ocrbig { z-index: 45; }
.ocrpic { margin: 4px 0 10px; border-radius: 12px; overflow: hidden; background: #0001; min-height: 120px; cursor: zoom-in; }
.ocrpic img { display: block; width: 100%; height: auto; }
.ocrscan { position: relative; margin: 4px 0 6px; border-radius: 12px; overflow: hidden; background: #0002; min-height: 160px; }
.ocrscan img { display: block; width: 100%; height: auto; filter: blur(2px) brightness(.85); opacity: .7; }
.ocrscan i { position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(180deg, transparent, #7fd3ff88 50%, transparent);
  box-shadow: 0 0 18px #7fd3ff66; animation: ocrscan 1.6s ease-in-out infinite alternate; }
@keyframes ocrscan { to { top: 100%; } }
.vnote { color: #ffffffb3; font-size: 12.5px; text-align: center; padding: 8px 16px calc(var(--safe-b) + 10px); margin: 0; white-space: pre-wrap; }
.mpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 6px 0 10px; max-height: 42vh; overflow-y: auto; }
.mpick img, .mpick video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--bg2); }
#mcap, #rpnote { width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--line); background: var(--field); color: var(--text); border-radius: 12px;
  padding: 9px 12px; font: inherit; font-size: 15px; margin: 4px 0 8px; }
.mprog { height: 5px; border-radius: 3px; background: var(--bg2); overflow: hidden; margin: 2px 0 8px; }
.mprog i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }

/* ── 차단·신고 (2026-10-20) ── */
.row2 svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.rpwhy .row2, .rpblock { cursor: pointer; }
.rpwhy input, .rpblock input { width: 20px; height: 20px; accent-color: var(--bad); flex: none; }
.primary.danger-btn { background: var(--bad); }
.repcard { background: var(--panel); border-radius: 12px; padding: 10px 12px; margin: 0 4px 10px; display: flex; flex-direction: column; gap: 6px; }
.repcard.closed { opacity: .55; }
.repcard .admlog .bad { color: var(--bad); }
.repcard .admlog i { color: var(--sub); }
.padx { padding: 10px 16px 0; }
.mcol .bubble::before { display: none; }   /* 사진 아래 설명 말풍선에는 꼬리를 안 단다 */

/* ── 공감 하트·답장 (2026-10-20) ── */
.bwrap { position: relative; min-width: 0; display: flex; flex-direction: column; }
.row.me .bwrap { align-items: flex-end; }
.row.hashrt { margin-bottom: 10px; }
.hrt { position: absolute; bottom: -12px; right: -4px; font-size: 12px; line-height: 1; background: var(--panel); border-radius: 10px; padding: 3px 5px;
  box-shadow: 0 1px 3px #0003; display: flex; align-items: center; gap: 2px; cursor: pointer; z-index: 1; }
.row.me .hrt { right: auto; left: -4px; }
.hrt b { font-size: 11px; color: var(--sub); }
.hrt.on { outline: 1.5px solid #ff4d6d; }
.quote { display: flex; flex-direction: column; gap: 1px; font-size: calc(12.5px * var(--fs)); padding: 4px 8px; margin: -2px -4px 6px; border-left: 3px solid #0004;
  background: #0000000f; border-radius: 6px; cursor: pointer; max-width: 260px; }
.quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.quote.gone span { font-style: italic; opacity: .6; }
.mcol > .quote { margin: 0; background: var(--panel); color: var(--text); }
.replybar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.replybar .rbody { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.replybar .rbody b { color: var(--brand); font-size: 12.5px; }
.replybar .rbody span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sub); }
.replybar .cx { background: none; border: none; color: var(--sub); padding: 4px; }
.replybar .cx svg { width: 18px; height: 18px; }
.row.flash .bubble, .row.flash .mbox, .row.flash .stkimg { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px #ffd54a; } 100% { box-shadow: 0 0 0 0 #ffd54a00; } }
.mmenu .row2 { justify-content: flex-start; }

/* ── 메신저 검색 (2026-10-20) ── */
.srsheet .sheet { height: 92vh; max-height: 92vh; display: flex; flex-direction: column; padding-top: 10px; }
.rfind { display: flex; align-items: center; gap: 4px; margin: 6px 10px; padding: 0 2px 0 10px; background: var(--field); border-radius: 12px; color: var(--sub); }
.rfind[hidden] { display: none; }
.rfind svg { width: 18px; height: 18px; flex: none; }
.rfind input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text); font: inherit; font-size: 16px; padding: 9px 0; }
.rfind .icon { width: 34px; height: 34px; font-size: 13px; }
.rfind .icon:disabled { opacity: .3; }
.rfn { font-size: 13px; color: var(--sub); min-width: 2.5em; text-align: right; }
.dvme { font-size: 12px; color: var(--brand-deep); background: var(--brand-tint); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
mark.rfm { background: #ffd54a; color: #111; border-radius: 3px; padding: 0 1px; }
.srbar { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 0 4px 0 12px; background: var(--field); border-radius: 12px; color: var(--sub); }
.srbar svg { width: 20px; height: 20px; flex: none; }
.srbar input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text); font: inherit; font-size: 16px; padding: 11px 0; }
.srres { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.srres .glabel { display: flex; align-items: center; gap: 8px; }
.srres .glabel .avatar { width: 22px; height: 22px; font-size: 11px; }
.srhit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: 10px 16px; color: var(--text); }
.srhit:last-child { border-bottom: none; }
.srwho { font-size: 12px; color: var(--sub); }
.srtxt { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srsub { font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srres mark { background: #ffd54a; color: #111; border-radius: 3px; padding: 0 1px; }
.srnone { text-align: center; padding: 30px 0; }

/* ── 링크 미리보기 (2026-10-20) ── */
.mlink { color: inherit; text-decoration: underline; word-break: break-all; }
.lcard { display: block; margin-top: 7px; border-radius: 10px; overflow: hidden; background: #0000000f; color: inherit; text-decoration: none; max-width: 260px; }
.lcard img, .lcard .limg { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; background: #0000001a; }
.lbody { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 8px; }
.lsite { font-size: 11.5px; opacity: .65; }
.lbody b { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ldesc { font-size: 12.5px; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 음성통화 (2026-10-20) ── 카메라 없이 얼굴 동그라미. 상대 소리는 #rv가 계속 낸다(보이지만 않게) */
.callui[data-media=voice] #rv { opacity: 0; pointer-events: none; }
.callui[data-media=voice] .c-face { display: flex; background: radial-gradient(circle at 50% 35%, #2a3350, #0d1018 70%); }
.callui[data-media=voice] .c-pip, .callui[data-media=voice] .c-bty { display: none !important; }
/* 통화 중 받아 적은 말 — 통화 기록 한 줄 아래 접어 두고 「펼치기」로 (2026-10-20 소장) */
.callrow .cgrp { margin-left: 6px; background: none; border: none; color: inherit; text-decoration: underline; font: inherit; padding: 0 2px; cursor: pointer; }
.callgrp { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px; padding: 6px 0 6px 10px; border-left: 2px solid #ffffff55; }
.vtag { font-size: 10.5px; opacity: .7; margin-right: 3px; }

/* ── 페이스북으로 시작 (2026-10-20) ── 브랜드 색만 쓰고 로고 그림은 안 가져온다 */
.fbbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 320px; margin: 4px auto; padding: 11px 14px;
  border: none; border-radius: 6px; background: #1877f2; color: #fff; font-weight: 700; font-size: 15px; }
.fbbtn b { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #1877f2; font: 900 17px/22px Helvetica, Arial, sans-serif; }
.orline { text-align: center; color: var(--sub); font-size: 12.5px; margin: 6px 0; }
.c-btn.lit i { background: #06c755; }   /* 통역 읽어 주기 켜짐 */

/* ── 안드로이드 앱 받기 (2026-10-20) ── */
.apkbtn { display: block; width: 100%; margin: 8px 0 4px; padding: 11px 14px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; font-size: 15px; }
.apkopen { display: block; text-align: center; text-decoration: none; margin: 12px 0 6px; }
.apkget { display: block; text-align: center; text-decoration: none; padding: 8px 0; }
/* 펼친 통화 묶음 — 위 줄이 목록 위에 붙어 따라온다(어디서든 접기), 끝에도 접기 (2026-10-20 소장) */
.cghead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px -10px;
  padding: 6px 10px; border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: 0 2px 8px #0003; font-size: 12px; }
.cghead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cghead .cgrp { flex: none; margin: 0; padding: 4px 10px; border-radius: 12px; background: var(--bg2); color: var(--text); text-decoration: none; font-weight: 700; }
.cgfold { align-self: center; margin: 8px 0 2px; padding: 6px 14px; border: none; border-radius: 14px; background: var(--pill-bg); color: var(--pill-ink); font-size: 12px; font-weight: 700; }

/* ── 하루 무료 통역 한도 (2026-10-20) ── */
.quotabar { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bad) 12%, var(--panel)); font-size: 12.5px; }
.quotabar b { color: var(--bad); font-size: 13px; }
.quotabar span { color: var(--sub); }
.bubble .sub.notr { font-size: 11px; font-style: italic; opacity: .7; }
.usrrow { align-items: center; }
/* 보내는 중 사진 — 아래쪽 막대가 올라간 만큼 찬다 (2026-10-20) */
.mup { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; background: #0006; overflow: hidden; }
.mup b { display: block; height: 100%; background: #fff; transition: width .15s; }
/* 사진 속 글자 번역 (2026-10-20) */
.ocrbtn { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border: none; border-radius: 12px; background: var(--pill-bg); color: var(--pill-ink); font-size: 12px; }
.row.me .ocrbtn { align-self: flex-end; }
.ocrlist { margin: 4px 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ocrlist li b { display: block; font-size: 16px; }
.ocrlist li span { display: block; font-size: 13px; color: var(--sub); }
.ocrwait { padding: 18px 0; text-align: center; }

/* 운영 보기 요약판·탭 (2026-10-20 소장 「관리 페이지가 너무 부실하다」) */
.admtabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--bg); }
.admtabs button { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 7px 12px; font-size: 14px; }
.admtabs button.sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.admgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 12px; }
@media (min-width: 640px) { .admgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.admcard { background: var(--panel); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admcard span { font-size: 12.5px; color: var(--sub); }
.admcard b { font-size: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admcard em { font-style: normal; font-size: 12px; color: var(--sub); }
.admcard b i { font-style: normal; }
.admcard b i.pos { color: #1a7f37; }
.admcard b i.neg { color: var(--bad); }
.admbar { display: flex; gap: 8px; padding: 10px 12px 0; }
.admbar input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--panel); color: var(--text); }
.admbar select { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; }
.tierpill { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--line); color: var(--sub); vertical-align: 1px; }
.tierpill.t-plus { background: #e0f2ff; color: #0b6bcb; }
.tierpill.t-pro { background: #ede4ff; color: #6b3fd4; }
.tierpill.t-max { background: #fff1d6; color: #a86200; }
.admchart { width: 100%; height: auto; display: block; }
.admchart text { font-size: 9px; fill: var(--sub); }

.sub.fastmark { color: #a86200; font-size: 12px; }   /* 한도를 넘어 빠른 번역(초벌)으로 간 말 (2026-10-20) */