:root{
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Malgun Gothic",
          "Noto Sans KR", "Noto Sans JP", "Segoe UI", sans-serif;
  --mono: "Cascadia Code","Consolas","D2Coding","SFMono-Regular","Menlo",monospace;
  --ink:#1f2328; --muted:#8a9099; --line:#ececf0; --accent:#3b6ef5;
}
html{color-scheme:only light}   /* 브라우저 강제 다크모드가 위장화면(구글독스·메모장)을 뒤집지 못하게 */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0; font-family:var(--font); color:var(--ink); background:#fff; overscroll-behavior:none; -webkit-font-smoothing:antialiased}
.screen{min-height:100dvh}
[hidden]{display:none !important}
.muted{color:var(--muted)}
button{font-family:var(--font); cursor:pointer}
input,textarea{font-family:var(--font)}

/* ───────── 로그인 ───────── */
#login{display:grid; place-items:center; background:#f6f7f9; padding:24px}
.login-card{width:100%; max-width:320px; text-align:center}
.login-logo{width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:linear-gradient(160deg,#5a84ff,#3a5ed2)}
.login-card h1{font-size:20px; margin:0 0 6px}
.login-card .muted{font-size:14px; margin:0 0 22px}
#login-code{width:100%; padding:14px 16px; font-size:18px; text-align:center; letter-spacing:4px; border:1px solid #dcdfe4; border-radius:12px; outline:none; background:#fff}
#login-code:focus{border-color:var(--accent)}
#login-btn{width:100%; margin-top:12px; padding:14px; font-size:16px; font-weight:600; color:#fff; background:var(--accent); border:none; border-radius:12px}
.login-err{color:#e5484d; font-size:14px; margin-top:12px}

/* ───────── 위장 공통 레이아웃 ───────── */
#disguise{background:#fff}
.skin{height:100dvh; display:flex; flex-direction:column; overflow:hidden}
.dz-win{height:100dvh; display:flex; flex-direction:column; overflow:hidden}
.dz-lines-area{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
.dz-line{white-space:pre-wrap; word-break:break-word}
.dz-line.mine{} /* 들여쓰기는 각 스킨에서 */
.dz-line.sub{opacity:.55; font-size:.86em}         /* 번역 보조줄 */
.dz-entry{display:flex; align-items:center}
.dz-input{flex:1; border:none; outline:none; background:transparent; color:inherit; font:inherit; padding:0}
.dz-caret{display:inline-block; width:7px; height:1.05em; background:currentColor; animation:bl 1.05s step-end infinite; vertical-align:-2px}
@keyframes bl{50%{opacity:0}}
body.split-on #disguise .skin{width:60%; float:left}

/* 분할 iframe */
#split-pane{position:fixed; top:0; right:0; width:40%; height:100dvh; background:#fff; border-left:1px solid #d7dbe0; z-index:30; display:flex; flex-direction:column}
.split-head{height:34px; background:#f1f3f6; border-bottom:1px solid #e3e6ea; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 12px; font-size:12.5px; color:#555}
#split-close{border:none; background:none; font-size:14px; color:#666; width:28px; height:26px; border-radius:4px}
#split-frame{flex:1; width:100%; border:none}
@media(max-width:700px){#split-pane{width:100%} body.split-on #disguise .skin{width:100%; float:none}}

/* ───────── 채팅 (카카오톡 형식) ───────── */
#chat{display:flex; flex-direction:column; height:100dvh; background:#b2c7da}
.chat-head{display:flex; align-items:center; gap:4px; padding:env(safe-area-inset-top) 6px 0; height:calc(52px + env(safe-area-inset-top)); background:#a1b8cc; flex:none}
.chat-back{background:none; border:none; font-size:30px; color:#2b3a45; width:40px; line-height:1}
.chat-peer{flex:1; display:flex; flex-direction:column; justify-content:center}
.chat-peer strong{font-size:16px; color:#1c2a33}
.chat-status{font-size:11px; color:#5b6b76}
.chat-menu{background:none; border:none; font-size:22px; color:#2b3a45; width:40px}
.chat-icon{background:none; border:none; color:#2b3a45; width:40px; height:40px; display:grid; place-items:center; cursor:pointer}
.sel-bar{display:flex; align-items:center; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:#f7f8fa; border-top:1px solid #e6e9ed; flex:none}
.sel-bar button{border:1px solid #d3d9de; background:#fff; border-radius:8px; padding:6px 14px; font-size:14px; color:#1c2a33; cursor:pointer}
.sel-bar #sel-delete{background:#ffe812; border-color:#ffe812; font-weight:600}
.sel-bar #sel-delete:disabled{background:#eceef0; border-color:#eceef0; color:#9aa4ad}
.sel-bar #sel-count{flex:1; font-size:14px; color:#2b3a45}
.sel-bar .danger{color:#e5484d}
.chat-scroll{overflow-anchor:none;scroll-behavior:auto;min-height:0;flex:1; overflow-y:auto; padding:14px 12px 6px; -webkit-overflow-scrolling:touch}
.messages{display:flex; flex-direction:column; gap:3px}
.date-div{align-self:center; margin:12px 0; padding:5px 14px; background:rgba(0,0,0,.14); color:#fff; font-size:12px; border-radius:20px; display:flex; align-items:center; gap:6px}
.date-div svg{opacity:.9}
.row{display:flex; align-items:flex-end; gap:6px; max-width:100%}
.row.me{flex-direction:row-reverse}
.row .meta{display:flex; flex-direction:column; font-size:11px; color:#5b6b76}
.row.me .meta{align-items:flex-end}
.bubble{max-width:72vw; padding:8px 11px; border-radius:16px; font-size:15px; line-height:1.42; word-break:break-word; white-space:pre-wrap; position:relative}
.row.other .bubble{background:#fff; border-top-left-radius:4px}
.row.me .bubble{background:#ffe812; border-top-right-radius:4px}
.bubble .sub{display:block; margin-top:3px; padding-top:3px; border-top:1px solid rgba(0,0,0,.08); font-size:13px; opacity:.62}
.row .time{font-size:11px; color:#59666f; margin:0 2px}
.read-mark{font-size:11px; color:#4a6a8a}
.bubble.img{padding:3px; background:#fff; cursor:pointer; overflow:hidden}
.row.me .bubble.img{background:#ffe812}
.bubble.img img{display:block; max-width:min(62vw,520px); max-height:320px; object-fit:contain; border-radius:13px}
.bubble.file{display:flex; align-items:center; gap:10px; cursor:pointer}
.file-ic{width:34px; height:34px; border-radius:8px; background:#eef1f4; display:grid; place-items:center; font-size:16px}
.file-meta b{display:block; font-size:14px; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-meta span{font-size:11px; color:#8a9099}

.typing-ind{display:flex; gap:4px; padding:10px 14px; align-self:flex-start; background:#fff; border-radius:16px; margin:2px 0 6px; width:fit-content}
.typing-ind span{width:7px; height:7px; border-radius:50%; background:#b5bcc3; animation:blink 1.2s infinite}
.typing-ind span:nth-child(2){animation-delay:.2s}
.typing-ind span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-input{display:flex; align-items:flex-end; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#f7f8fa; flex:none; border-top:1px solid #e6e9ed}
.attach-btn{width:38px; height:38px; border-radius:50%; background:#e7eaef; color:#6b7079; display:grid; place-items:center; font-size:22px; flex:none; cursor:pointer}
#msg-input{flex:1; resize:none; max-height:120px; padding:9px 13px; font-size:15px; line-height:1.4; border:1px solid #e0e4e9; border-radius:19px; outline:none; background:#fff}
.send-btn{width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:19px; flex:none; display:grid; place-items:center}
.send-btn:disabled{background:#c2ccd8}

/* ───────── 숨은 설정 ───────── */
.sheet{position:fixed; inset:0; z-index:40}
.sheet-bg{position:absolute; inset:0; background:rgba(0,0,0,.4)}
.sheet-card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(480px,92vw); max-height:min(620px, 82dvh); overflow-y:auto; overscroll-behavior:contain; background:#fff; border-radius:16px; padding:18px 20px 22px; z-index:1; box-shadow:0 10px 40px rgba(0,0,0,.3)}
.sheet-card h2{position:sticky; top:-18px; z-index:2; background:inherit; margin:-18px -20px 10px; padding:18px 20px 10px; font-size:18px; cursor:move; user-select:none; display:flex; align-items:center; gap:8px}
.sheet-card h2::before{content:"⋮⋮"; color:#c3c8d0; font-size:14px; letter-spacing:-2px}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid #f1f2f4}
.set-block{padding:13px 0; border-top:1px solid #f1f2f4}
.set-block>span{display:block; margin-bottom:9px}
.seg{display:flex; background:#f0f1f4; border-radius:10px; padding:3px; flex-wrap:wrap}
.seg button{border:none; background:none; padding:7px 13px; border-radius:8px; font-size:13.5px; color:#6b7079}
.seg button.on{background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08)}
.search-bar{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.search-bar input{flex:1; min-width:0; padding:9px 12px; border:1px solid #dcdfe4; border-radius:10px; font-size:14px; outline:none}
.search-bar input:focus{border-color:var(--accent)}
.search-target button{padding:7px 11px; font-size:13px}
.tools-row{display:flex; gap:8px; flex-wrap:wrap}
.tools-row button{border:1px solid #dcdfe4; background:#fff; padding:8px 13px; border-radius:10px; font-size:13.5px}
.set-action{border:1px solid #dcdfe4; background:#fff; padding:8px 14px; border-radius:10px; font-size:14px}
.set-action.danger{color:#e5484d; border-color:#f3c7c9}
.set-hint{font-size:13px; color:var(--muted); margin:2px 0 0; line-height:1.5}
.sheet-done{width:100%; margin-top:18px; padding:14px; border:none; background:#f0f1f4; border-radius:12px; font-size:16px; font-weight:600}

/* 설정 열기용 구석 핫스팟 (투명, 오른쪽 아래 모서리 더블클릭) */
#corner-hotspot{position:fixed; right:0; bottom:0; width:0; height:0; z-index:36; display:none}
/* 설정 여는 구석: PC 위장 화면에서만 크게, PC 일반 채팅에선 전송 버튼을 가리지 않게 아주 작게, 모바일은 없음 */
body.hs-big #corner-hotspot{display:block; width:40px; height:40px}
body.hs-small #corner-hotspot{display:block; width:8px; height:8px}

/* 이미지 뷰어 */
.viewer{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); display:grid; place-items:center}
.viewer img{max-width:96vw; max-height:88vh; object-fit:contain}
.viewer-dl{position:absolute; top:calc(16px + env(safe-area-inset-top)); right:20px; color:#fff; font-size:26px; text-decoration:none}

/* "/" 명령어 목록 */
#slash-help{position:fixed; z-index:60; background:#fff; color:#202124; border:1px solid #dadce0; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.14); padding:4px 0; font:13px/1.4 -apple-system,"Segoe UI","Malgun Gothic","Yu Gothic UI",sans-serif}
#slash-help[hidden]{display:none}
#slash-help .sh-head{padding:5px 12px 4px; font-size:11px; color:#80868b}
#slash-help .sh-row{display:flex; justify-content:space-between; gap:12px; padding:6px 12px; cursor:pointer}
#slash-help .sh-row:hover{background:#f1f3f4}
#slash-help .sh-cmd{white-space:nowrap}
#slash-help .sh-desc{color:#5f6368; white-space:nowrap}

/* 아이폰(사파리·홈화면 앱): 화면 맨 위에 iOS가 흐릿한 페이드를 덮어서 이름이 반쯤 가려짐 → 헤더 내용을 그 아래로 내림 */
body.mobile .chat-head{padding-top:calc(env(safe-area-inset-top) + 26px); height:calc(78px + env(safe-area-inset-top))}

/* ── 카톡식: 내 메시지는 시간이 말풍선 왼쪽 아래, 상대는 오른쪽 아래 ── */
.row.me{justify-content:flex-start}
.row .meta .time.hide{display:none}

/* ── 대화 검색 줄 ── */
.search-strip{display:flex; align-items:center; gap:4px; padding:7px 8px; background:#a1b8cc; border-top:1px solid rgba(0,0,0,.06); flex:none}
.search-strip[hidden]{display:none}
.ss-box{flex:1; display:flex; align-items:center; gap:6px; background:#fff; border-radius:8px; padding:0 10px; height:34px; color:#7a8791; min-width:0}
.ss-box input{flex:1; border:none; outline:none; background:transparent; font-size:15px; color:#1c2a33; min-width:0}
.ss-box input::-webkit-search-cancel-button{display:none}
.ss-count{font-size:12px; color:#2b3a45; min-width:38px; text-align:center; white-space:nowrap}
.ss-btn{background:none; border:none; width:34px; height:34px; display:grid; place-items:center; color:#2b3a45; cursor:pointer; border-radius:6px}
.ss-btn:disabled{opacity:.35}
.bubble mark{background:#ffd34d; color:inherit; border-radius:2px; padding:0 1px}
.row.me .bubble mark{background:#ff9f1a}
.row.hit-now .bubble{box-shadow:0 0 0 2px #ff7a00}

/* ── 카톡식 새 메시지 알림 말풍선 ── */
.chat{position:relative}
.new-pop{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(70px + env(safe-area-inset-bottom)); z-index:20; display:flex; align-items:center; gap:8px; max-width:min(92%, 520px); padding:9px 12px 9px 14px; background:rgba(255,255,255,.97); border:none; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.18); font-size:14px; color:#1c2a33; cursor:pointer; text-align:left}
.new-pop[hidden]{display:none}
.new-pop .np-name{font-weight:700; flex:none}
.new-pop .np-text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#3b4a55}
.new-pop .np-arrow{flex:none; color:#7a8791; display:grid; place-items:center}
.unread-div{align-self:stretch; display:flex; align-items:center; gap:10px; margin:10px 4px; font-size:12px; color:#4a5b66}
.unread-div::before,.unread-div::after{content:""; flex:1; height:1px; background:rgba(0,0,0,.15)}

/* ═══ 달력 · 톡서랍 팝업 (작은 창, 제목줄 끌어서 이동) ═══ */
.cal-pop{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:70; width:min(340px, calc(100vw - 16px)); max-height:calc(100dvh - 24px); display:flex; flex-direction:column; background:#fff; color:#1c2a33; border-radius:14px; box-shadow:0 10px 36px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06); font:14px/1.35 -apple-system,"Segoe UI","Malgun Gothic","Yu Gothic UI",sans-serif; outline:none; overflow:hidden; color-scheme:light}
.cal-pop[hidden]{display:none}
.cal-pop button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
.cal-head{display:flex; align-items:center; gap:2px; padding:10px 10px 6px 12px; cursor:move; user-select:none; touch-action:none}
.cal-ym{font-weight:700; font-size:16px; padding:0 4px; min-width:92px; text-align:center}
.cal-nav{width:30px; height:30px; border-radius:8px; font-size:20px !important; line-height:1}
.cal-nav:hover,.cal-x:hover,.cal-tbtn:hover,.cal-add:hover{background:#eef1f4}
.cal-sp{flex:1}
.cal-tbtn{padding:4px 10px; border-radius:8px; border:1px solid #d9dee3 !important; font-size:12px !important}
.cal-x{width:30px; height:30px; border-radius:8px; color:#6b7781 !important}
.cal-month{display:flex; flex-direction:column; min-height:0}
.cal-month[hidden],.cal-form[hidden]{display:none}
.cal-wd,.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); padding:0 8px}
.cal-wd span{text-align:center; font-size:12px; color:#6b7781; padding:4px 0}
.cal-wd .sun,.cal-cell.sun .cal-n{color:#e5484d}
.cal-wd .sat,.cal-cell.sat .cal-n{color:#2f6fed}
.cal-cell{height:40px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:4px !important; border-radius:9px}
.cal-cell:hover{background:#f2f4f6}
.cal-cell.out .cal-n{opacity:.35}
.cal-n{width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-size:13px}
.cal-cell.today .cal-n{background:#1c2a33; color:#fff !important}
.cal-cell.sel{background:#e8f0fe}
.cal-dots{display:flex; gap:2px; margin-top:2px}
.cal-dots i{width:5px; height:5px; border-radius:50%}
.cal-day{border-top:1px solid #eef0f2; margin-top:6px; padding:8px 12px 12px; min-height:90px; overflow:auto}
.cal-day-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.cal-day-t{font-weight:700; font-size:13px}
.cal-add{width:30px; height:30px; border-radius:8px; font-size:18px !important; color:#2f6fed !important}
.cal-list{display:flex; flex-direction:column; gap:4px}
.cal-none{color:#8a96a0; font-size:13px; padding:10px 0; text-align:center}
.cal-ev{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; cursor:pointer; background:#f6f7f9}
.cal-ev:hover{background:#eef1f4}
.cal-bar{width:4px; align-self:stretch; border-radius:2px; flex:none}
.cal-tm{font-size:12px; color:#5b6b76; flex:none; white-space:nowrap}
.cal-ti{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 일정 등록 폼 (카톡 일정 등록처럼) */
.cal-form{display:flex; flex-direction:column; gap:10px; padding:4px 16px 16px; overflow:auto}
.cf-title{display:none}
.cal-pop.form .cal-nav,.cal-pop.form .cal-tbtn{visibility:hidden}
.cal-pop.form .cal-ym{flex:1; text-align:center}
.cf-row{display:flex; align-items:center; gap:10px}
.cf-colors{display:flex; gap:8px; padding-left:2px}
.cf-c{width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 2px #fff inset}
.cf-c.on{outline:2px solid #1c2a33; outline-offset:2px}
.cf-name{border:none; border-bottom:1px solid #d3d9de; padding:8px 2px; font-size:15px; outline:none; background:transparent; color:#1c2a33}
.cf-name:focus{border-bottom-color:#2f6fed}
.cf-ic{width:20px; flex:none; text-align:center; font-size:14px}
.cf-dt{flex:1; display:flex; gap:6px; min-width:0}
.cf-dt input{flex:1; min-width:0; border:1px solid #d3d9de; border-radius:8px; padding:7px 8px; font:inherit; font-size:14px; color:#1c2a33; background:#fff}
.cf-dt input[type=time]{flex:0 0 108px}
.cf-dt input[hidden]{display:none}
.cf-all{cursor:pointer; font-size:14px}
.cf-all input{width:18px; height:18px; accent-color:#2f6fed; margin:0}
.cf-memo{border:1px solid #d3d9de; border-radius:8px; padding:7px 9px; font:inherit; resize:vertical; outline:none; color:#1c2a33}
.cf-btns{display:flex; gap:8px; align-items:center; margin-top:2px}
.cf-btns button{padding:9px 16px; border-radius:9px !important; font-weight:600}
.cf-cancel{border:1px solid #d3d9de !important}
.cf-save{background:#2f6fed !important; color:#fff !important}
.cf-save:disabled{background:#c7d3ea !important; cursor:default}
.cf-del{color:#e5484d !important; padding:9px 4px !important}
.cf-del[hidden]{display:none}
/* 톡서랍 */
.drw-pop{width:min(380px, calc(100vw - 16px)); height:min(560px, calc(100dvh - 24px))}
.drw-title{font-weight:700; font-size:16px; padding-left:2px}
.drw-tabs{display:flex; border-bottom:1px solid #e6e9ec; padding:0 8px}
.drw-tabs button{flex:1; padding:9px 0 !important; color:#6b7781 !important; border-bottom:2px solid transparent !important; font-size:14px}
.drw-tabs button.on{color:#1c2a33 !important; border-bottom-color:#1c2a33 !important; font-weight:700}
.drw-body{flex:1; overflow:auto}
.drw-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px}
.drw-ph{aspect-ratio:1; padding:0 !important; overflow:hidden; background:#eef0f2 !important}
.drw-ph img{width:100%; height:100%; object-fit:cover; display:block}
.drw-files{display:flex; flex-direction:column; padding:6px 8px}
.drw-f{display:flex; align-items:center; gap:10px; padding:9px 6px !important; border-radius:8px; text-align:left}
.drw-f:hover{background:#f2f4f6}
.drw-fi{font-size:22px}
.drw-ft{display:flex; flex-direction:column; min-width:0}
.drw-fn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drw-fm{font-size:12px; color:#8a96a0}
.chat-icon{width:36px}

/* ═══ 카톡식: 선택 삭제 동그라미 · 답장 · 우클릭 메뉴 ═══ */
.sel-ck{display:none; width:22px; height:22px; border-radius:50%; border:1.5px solid #8796a1; flex:none; align-self:center; margin-right:4px; background:rgba(255,255,255,.5)}
.chat.selecting .sel-ck{display:block}
.chat.selecting .row{cursor:pointer}
.chat.selecting .row.me .sel-ck{order:99; margin-right:auto}
.row.sel .sel-ck{background:#ffe812; border-color:#ffe812; box-shadow:inset 0 0 0 4px #ffe812}
.row.sel .sel-ck::after{content:"✓"; display:block; text-align:center; font-size:13px; line-height:19px; font-weight:700; color:#1c2a33}
.row-act{display:none; align-self:center; width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.08); color:#41505b; cursor:pointer; place-items:center; flex:none}
@media (pointer:fine){ .row:hover .row-act{display:grid} .chat.selecting .row:hover .row-act{display:none} }
.row.me .row-act{order:-1}
.rq{display:flex; flex-direction:column; gap:1px; padding:0 0 6px; margin-bottom:6px; border-bottom:1px solid rgba(0,0,0,.1); cursor:pointer; max-width:100%}
.rq-to{font-size:12px; font-weight:700; opacity:.85}
.rq-t{font-size:13px; opacity:.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.row.flash .bubble{animation:flashb 1.2s ease}
@keyframes flashb{0%,60%{box-shadow:0 0 0 3px #ff9f1a}100%{box-shadow:0 0 0 0 transparent}}
.reply-bar{display:flex; align-items:center; gap:10px; padding:8px 12px; background:#f7f8fa; border-top:1px solid #e6e9ed; flex:none}
.reply-bar[hidden],.sel-bar[hidden],.chat-input[hidden]{display:none}
.rb-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.rb-txt b{font-size:12px; color:#2f6fed}
.rb-txt span{font-size:13px; color:#3b4a55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#rb-close{background:none; border:none; font-size:16px; color:#7a8791; cursor:pointer; width:30px; height:30px}
.msg-menu{position:fixed; z-index:95; min-width:150px; padding:5px; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06); display:flex; flex-direction:column}
.msg-menu button{background:none; border:none; text-align:left; padding:8px 12px; font-size:14px; color:#1c2a33; border-radius:6px; cursor:pointer}
.msg-menu button:hover{background:#2f6fed; color:#fff}
.msg-menu button.danger{color:#e5484d}
.msg-menu button.danger:hover{background:#e5484d; color:#fff}
.mm-sep{height:1px; background:#eceef0; margin:4px 2px}

/* ═══ 다크 모드 (설정에서 켜기) ═══ */
body.dark #chat{background:#2b2b2b}
body.dark .chat-head,body.dark .search-strip{background:#2b2b2b; border-color:#3a3a3a}
body.dark .chat-peer strong,body.dark .chat-menu,body.dark .chat-icon,body.dark .ss-btn,body.dark .ss-count{color:#eee}
body.dark .chat-status{color:#aaa}
body.dark .ss-box{background:#1f1f1f; color:#999}
body.dark .ss-box input{color:#eee}
body.dark .row.other .bubble{background:#3d3d3d; color:#f1f1f1}
body.dark .row.me .bubble{background:#fee500; color:#1a1a1a}
body.dark .bubble.img,body.dark .row.me .bubble.img{background:#3d3d3d}
body.dark .row .time,body.dark .row .meta{color:#b8b8b8}
body.dark .date-div{background:rgba(255,255,255,.1); color:#ddd}
body.dark .unread-div{color:#bbb}
body.dark .unread-div::before,body.dark .unread-div::after{background:rgba(255,255,255,.15)}
body.dark .chat-input,body.dark .reply-bar,body.dark .sel-bar{background:#1f1f1f; border-color:#333}
body.dark #msg-input{background:#2b2b2b; color:#eee; border-color:#3a3a3a}
body.dark .attach-btn{background:#333; color:#bbb}
body.dark .rb-txt span,body.dark .sel-bar #sel-count{color:#ccc}
body.dark .sel-bar button{background:#333; border-color:#444; color:#eee}
body.dark .sel-bar #sel-delete{background:#fee500; border-color:#fee500; color:#1a1a1a}
body.dark .sel-bar #sel-delete:disabled{background:#3a3a3a; border-color:#3a3a3a; color:#777}
body.dark .row-act{background:rgba(255,255,255,.12); color:#ddd}
body.dark .rq{border-color:rgba(255,255,255,.15)}
body.dark .row.me .rq{border-color:rgba(0,0,0,.15)}
body.dark .new-pop{background:rgba(58,58,58,.97); color:#eee}
body.dark .new-pop .np-text{color:#ccc}
body.dark .typing-ind span{background:#888}
body.dark .msg-menu,body.dark #slash-help{background:#2f2f2f; color:#eee; box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 0 1px #444}
body.dark .msg-menu button{color:#eee}
body.dark .mm-sep{background:#444}
body.dark #slash-help .sh-row:hover{background:#3a3a3a}
body.dark #slash-help .sh-desc,body.dark #slash-help .sh-head{color:#aaa}
body.dark .sheet-card{background:#262626; color:#eee}
body.dark .sheet-card .set-row,body.dark .sheet-card .set-block{border-color:#383838}
body.dark .seg{background:#1b1b1b}
body.dark .seg button{color:#bbb}
body.dark .seg button.on{background:#3d3d3d; color:#fff}
body.dark .set-action,body.dark .tools-row button{background:#2f2f2f; border-color:#444; color:#8ab4ff}
body.dark .set-hint{color:#999}
body.dark #tool-search{background:#1b1b1b; border-color:#444; color:#eee}
body.dark .sheet-done{background:#333; color:#8ab4ff}
body.dark #login{background:#1e1e1e}
body.dark .login-card{background:#2a2a2a; color:#eee}
body.dark .cal-pop{background:#262626; color:#eee; box-shadow:0 10px 36px rgba(0,0,0,.6), 0 0 0 1px #3a3a3a}
body.dark .cal-nav:hover,body.dark .cal-x:hover,body.dark .cal-tbtn:hover,body.dark .cal-add:hover,body.dark .cal-cell:hover{background:#333}
body.dark .cal-tbtn{border-color:#444 !important}
body.dark .cal-wd span{color:#999}
body.dark .cal-cell.today .cal-n{background:#eee; color:#111 !important}
body.dark .cal-cell.sel{background:#2f3b52}
body.dark .cal-day{border-color:#383838}
body.dark .cal-ev{background:#2f2f2f}
body.dark .cal-ev:hover{background:#383838}
body.dark .cal-tm{color:#aaa}
body.dark .cf-name{color:#eee; border-color:#444}
body.dark .cf-dt input,body.dark .cf-memo{background:#1e1e1e; color:#eee; border-color:#444; color-scheme:dark}
body.dark .cf-cancel{border-color:#444 !important}
body.dark .cf-save:disabled{background:#3a4760 !important; color:#aaa !important}
body.dark .cf-c{box-shadow:0 0 0 2px #262626 inset}
body.dark .cf-c.on{outline-color:#eee}
body.dark .drw-tabs{border-color:#383838}
body.dark .drw-tabs button.on{color:#fff !important; border-bottom-color:#fff !important}
body.dark .drw-ph{background:#333 !important}
body.dark .drw-f:hover{background:#2f2f2f}

/* 달력 공휴일: 한국=빨간 채움, 일본=빨간 테두리 (둘 다 빨간 숫자) · 기념일=회색 */
.cal-cell.hol .cal-n{color:#e5484d}
.cal-cell.today.hol .cal-n{color:#fff !important; background:#e5484d}
.cal-cell{height:44px}
.cal-hd{display:flex; gap:2px; margin-top:1px; line-height:1}
.cal-hd b,.cal-legend b,.cal-htag{font-size:8.5px; font-weight:700; width:12px; height:12px; display:inline-grid; place-items:center; border-radius:3px}
.cal-hd b.kr,.cal-legend b.kr,.cal-htag.kr{background:#e5484d; color:#fff}
.cal-hd b.jp,.cal-legend b.jp,.cal-htag.jp{background:#fff; color:#e5484d; box-shadow:inset 0 0 0 1.2px #e5484d}
.cal-hd b.obs,.cal-htag.obs{background:#c9cfd5 !important; color:#fff !important; box-shadow:none !important}
.cal-dots{margin-top:1px}
.cal-legend{display:flex; align-items:center; gap:6px; justify-content:flex-end; padding:4px 10px 0; font-size:11px; color:#8a96a0}
.cal-lg{display:flex; align-items:center; gap:4px; padding:3px 7px !important; border-radius:6px; font-size:11px !important; color:#6b7781 !important}
.cal-lg:hover{background:#eef1f4}
.cal-ck{width:12px; height:12px; border-radius:3px; border:1.3px solid #9aa4ad; display:inline-grid; place-items:center; font-size:9px; line-height:1}
.cal-lg.on .cal-ck{background:#2f6fed; border-color:#2f6fed}
.cal-lg.on .cal-ck::after{content:"✓"; color:#fff; font-weight:700}
.cal-lg:not(.on){opacity:.6}
body.dark .cal-lg{color:#aaa !important}
body.dark .cal-lg:hover{background:#333}
.cal-htag{width:16px; height:16px; font-size:10px; flex:none}
.cal-hrow{display:flex; align-items:center; gap:8px; padding:5px 8px}
.cal-hname{flex:1; min-width:0; font-size:13px; color:#6b7781}
.cal-hname.off{color:#e5484d; font-weight:600}
.cal-hwho{font-size:11px; color:#8a96a0; flex:none}
body.dark .cal-hd b.jp,body.dark .cal-legend b.jp,body.dark .cal-htag.jp{background:#262626}
body.dark .cal-hd b.obs,body.dark .cal-htag.obs{background:#555 !important}
body.dark .cal-cell.sun .cal-n,body.dark .cal-cell.hol .cal-n,body.dark .cal-wd .sun{color:#ff6b6b}
body.dark .cal-cell.sat .cal-n,body.dark .cal-wd .sat{color:#6ea0ff}
body.dark .cal-cell.today .cal-n{color:#111 !important}
body.dark .cal-cell.hol .cal-n{color:#ff6b6b}

.cf-rm{flex:1; border:1px solid #d3d9de; border-radius:8px; padding:7px 8px; font:inherit; font-size:14px; color:#1c2a33; background:#fff}
body.dark .cf-rm{background:#1e1e1e; color:#eee; border-color:#444; color-scheme:dark}
.cal-bell{font-size:11px; flex:none; opacity:.8}

/* ═══ 큰 달력 (톡캘린더 구성) ═══ */
.bc{position:fixed; inset:0; z-index:66; background:#fff; color:#1c2a33; display:flex; flex-direction:column; font:14px/1.35 -apple-system,"Segoe UI","Malgun Gothic","Yu Gothic UI",sans-serif; outline:none; color-scheme:light}
.bc[hidden]{display:none}
.bc button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
.bc-top{display:flex; align-items:center; gap:16px; height:60px; padding:0 20px 0 28px; border-bottom:1px solid #eceef0; flex:none}
.bc-logo{font-size:18px; display:flex; align-items:center; gap:6px; min-width:200px}
.bc-search{margin-left:auto; display:flex; align-items:center; gap:6px; width:min(280px,40vw); height:36px; padding:0 12px; border:1px solid #e3e6e9; border-radius:8px; color:#8a96a0}
.bc-search input{flex:1; border:none; outline:none; background:transparent; font:inherit; color:#1c2a33; min-width:0}
.bc-close{width:36px; height:36px; border-radius:8px; font-size:18px !important; color:#6b7781 !important}
.bc-close:hover{background:#f1f3f5}
.bc-body{flex:1; display:flex; min-height:0}
.bc-side{width:230px; flex:none; border-right:1px solid #eceef0; padding:16px 14px; overflow:auto; display:flex; flex-direction:column; gap:18px}
.bc-create{border:1px solid #d9dee3 !important; border-radius:8px; padding:10px !important; font-weight:600 !important}
.bc-create:hover{background:#f6f7f9 !important}
.bc-mini-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.bc-mini-h button{width:24px; height:24px; border-radius:6px; font-size:16px !important}
.bc-mini-h button:hover{background:#f1f3f5}
.bc-mini-g{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11.5px; row-gap:2px}
.bc-mini-g .h{color:#8a96a0; padding:2px 0}
.bc-mini-g .d{width:26px; height:26px; margin:0 auto; border-radius:50% !important; font-size:11.5px !important}
.bc-mini-g .d:hover{background:#f1f3f5}
.bc-mini-g .out{opacity:.35}
.bc-mini-g .sun{color:#e5484d !important}
.bc-mini-g .sat{color:#2f6fed}
.bc-mini-g .sel{background:#e8f0fe}
.bc-mini-g .today{background:#1c2a33 !important; color:#fff !important}
.bc-cals{display:flex; flex-direction:column; gap:9px; border-top:1px solid #eceef0; padding-top:14px}
.bc-cals-h{font-size:12px; color:#8a96a0}
.bc-cals label{display:flex; align-items:center; gap:8px; cursor:pointer}
.bc-cals input{width:16px; height:16px; accent-color:#2f6fed; margin:0}
.bc-cals i{width:10px; height:10px; border-radius:3px}
.bc-cals i.jp{background:#fff; box-shadow:inset 0 0 0 2px #e5484d}
.bc-main{flex:1; min-width:0; display:flex; flex-direction:column}
.bc-bar{display:flex; align-items:center; gap:14px; padding:14px 18px}
.bc-nav{display:flex; border:1px solid #d9dee3; border-radius:8px; overflow:hidden}
.bc-nav button{padding:6px 12px !important; border-right:1px solid #d9dee3 !important}
.bc-nav button:last-child{border-right:none !important; font-size:13px !important}
.bc-nav button:hover{background:#f6f7f9}
.bc-ym{font-size:19px}
.bc-sp{flex:1}
.bc-modes{display:flex; border:1px solid #d9dee3; border-radius:8px; overflow:hidden}
.bc-modes button{padding:6px 18px !important}
.bc-modes button.on{background:#1c2a33 !important; color:#fff !important}
.bc-wd{display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid #eceef0; border-bottom:1px solid #eceef0}
.bc-wd span{padding:6px 10px; font-size:12px; color:#6b7781; border-right:1px solid #eceef0}
.bc-wd .sun{color:#e5484d}.bc-wd .sat{color:#2f6fed}
.bc-wd .today{font-weight:700; color:#1c2a33}
.bc-grid{flex:1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-height:0; overflow:auto}
.bc-grid.month{grid-template-rows:repeat(6,minmax(92px,1fr))}
.bc-grid.week{grid-template-rows:minmax(300px,1fr)}
.bc-cell{border-right:1px solid #eceef0; border-bottom:1px solid #eceef0; padding:6px 4px 4px; min-width:0; cursor:pointer; display:flex; flex-direction:column; gap:3px}
.bc-cell:hover{background:#fafbfc}
.bc-cell.sel{background:#f2f4f6}
.bc-cell.out .bc-num{opacity:.35}
.bc-cell.out .bc-items{opacity:.6}
.bc-num{font-size:13px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; margin-left:2px}
.bc-cell.sun .bc-num,.bc-cell.hol .bc-num{color:#e5484d}
.bc-cell.sat:not(.hol) .bc-num{color:#2f6fed}
.bc-cell.today .bc-num{background:#1c2a33; color:#fff !important}
.bc-items{display:flex; flex-direction:column; gap:2px; min-width:0}
.bc-chip{font-size:12px; line-height:18px; padding:0 6px; border-radius:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bc-chip.hol.kr{background:#f03e3e; color:#fff}
.bc-chip.hol.jp{background:#fff0f0; color:#e03131; box-shadow:inset 3px 0 0 #e03131}
.bc-chip.hol.obs{background:#adb5bd; color:#fff; box-shadow:none}
.bc-chip.ev{color:#1c2a33}
.bc-chip.ev::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c); margin-right:5px; vertical-align:1px}
.bc-chip.ev b{font-weight:600; color:#6b7781; font-size:11px}
.bc-chip.ev.bar{background:var(--c); color:#fff}
.bc-chip.ev.bar::before{display:none}
.bc-chip.ev:hover{filter:brightness(.95); background-color:rgba(0,0,0,.04)}
.bc-more{font-size:11px; color:#6b7781; padding-left:6px}
.bc-detail{width:260px; flex:none; border-left:1px solid #eceef0; padding:18px 16px; overflow:auto}
.bc-dh{font-weight:700; font-size:13px; margin-bottom:12px}
.bc-drow{display:flex; align-items:flex-start; gap:8px; padding:8px; border-radius:8px}
.bc-drow.ev{cursor:pointer}
.bc-drow.ev:hover{background:#f6f7f9}
.bc-vbar{width:4px; align-self:stretch; border-radius:2px; flex:none}
.bc-dt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.bc-dt span{font-size:12px; color:#6b7781}
.bc-dt small{font-size:12px; color:#8a96a0; white-space:pre-wrap}
.bc-bell{font-size:11px}
.bc-tag{font-size:10px; width:16px; height:16px; display:inline-grid; place-items:center; border-radius:3px; flex:none}
.bc-tag.kr{background:#e5484d; color:#fff}
.bc-tag.jp{background:#fff; color:#e5484d; box-shadow:inset 0 0 0 1.3px #e5484d}
.bc-tag.obs{background:#c9cfd5 !important; color:#fff !important; box-shadow:none !important}
.bc-dn{flex:1; font-size:13px; color:#6b7781}
.bc-dn.off{color:#e5484d; font-weight:600}
.bc-dw{font-size:11px; color:#8a96a0}
.bc-empty{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:120px; color:#6b7781; text-align:center}
.bc-empty .ic{width:40px; height:40px; border-radius:50%; border:2px solid #c5ccd3; display:grid; place-items:center; font-weight:700; color:#c5ccd3; font-size:20px; margin-bottom:6px}
.bc-empty b{color:#1c2a33; font-size:14px}
.bc-empty span{font-size:12px}
.bc-none{color:#8a96a0; font-size:13px; padding:10px 0}
body.bc-open .cal-pop:not(.drw-pop){z-index:80}
@media (max-width:820px){
  .bc-side{display:none}
  .bc-detail{display:none}
  .bc-logo{min-width:0}
  .bc-grid.month{grid-template-rows:repeat(6,minmax(70px,1fr))}
  .bc-chip{font-size:10.5px; padding:0 3px}
  .bc-top{padding:env(safe-area-inset-top) 10px 0 14px; height:calc(56px + env(safe-area-inset-top))}
}
/* 다크 */
body.dark .bc{background:#1f1f1f; color:#eee}
body.dark .bc-top,body.dark .bc-side,body.dark .bc-detail,body.dark .bc-wd,body.dark .bc-wd span,body.dark .bc-cell,body.dark .bc-cals{border-color:#333}
body.dark .bc-search{border-color:#3a3a3a}
body.dark .bc-search input{color:#eee}
body.dark .bc-create,body.dark .bc-nav,body.dark .bc-nav button,body.dark .bc-modes{border-color:#3a3a3a !important}
body.dark .bc-modes button.on{background:#eee !important; color:#111 !important}
body.dark .bc-cell:hover,body.dark .bc-drow.ev:hover,body.dark .bc-nav button:hover,body.dark .bc-close:hover,body.dark .bc-mini-g .d:hover{background:#2a2a2a}
body.dark .bc-cell.sel,body.dark .bc-mini-g .sel{background:#2c3546}
body.dark .bc-cell.today .bc-num,body.dark .bc-mini-g .today{background:#eee !important; color:#111 !important}
body.dark .bc-chip.ev{color:#eee}
body.dark .bc-chip.ev.bar{color:#fff}
body.dark .bc-chip.hol.jp{background:#3a2323; color:#ff8787}
body.dark .bc-empty b{color:#eee}
body.dark .bc-cell.sun .bc-num,body.dark .bc-cell.hol .bc-num,body.dark .bc-wd .sun{color:#ff6b6b}
body.dark .bc-cell.sat:not(.hol) .bc-num,body.dark .bc-wd .sat{color:#6ea0ff}

.cf-phone{color:#2f6fed !important; padding:9px 4px !important; font-weight:500 !important; font-size:13px !important}
.cf-phone[hidden]{display:none}
.cal-ask{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(440px, calc(100vw - 24px)); box-sizing:border-box; z-index:96; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 20px); padding:10px 10px 10px 16px; background:#1c2a33; color:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.3); font:14px/1.35 -apple-system,"Segoe UI","Malgun Gothic","Yu Gothic UI",sans-serif}
.cal-ask span{flex:1; min-width:0}
.cal-ask button{border:none; border-radius:8px; padding:7px 12px; font:inherit; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; flex:none}
.cal-ask button.yes{background:#ffe812; color:#1c2a33; font-weight:700}

.filler-edit{width:100%; box-sizing:border-box; border:1px solid #dcdfe4; border-radius:10px; padding:9px 11px; font:14px/1.6 ui-monospace,Consolas,"Malgun Gothic",monospace; resize:vertical; margin-bottom:4px; color:inherit; background:#fff}
.filler-edit[hidden]{display:none}
body.dark .filler-edit{background:#1b1b1b; border-color:#444; color:#eee}

/* ───────── 채팅 색 테마: 스카이 (앱 아이콘 var(--sky)) ─ 라이트 ───────── */
body.sky{--accent:#2fa8dc; --sky:#72D0F7}   /* ← 스카이 색은 여기 하나만 바꾸면 됨 (B #5BC8F5 / B1 #72D0F7 / B2 #8AD8F8 / B3 #A3E0FA / B4 #BCE8FB) */
body.sky #chat{background:#eef4f8}
body.sky .chat-head{background:#ffffff; border-bottom:1px solid #e3eaf0}
body.sky .chat-back,body.sky .chat-menu,body.sky .chat-icon{color:#1d2a33}
body.sky .chat-peer strong{color:#111}
body.sky .chat-status,body.sky .row .meta,body.sky .row .time{color:#8a96a0}
body.sky .read-mark{color:#2fa8dc}
body.sky .row.other .bubble{background:#ffffff; color:#111; box-shadow:0 1px 1px rgba(0,0,0,.04)}
body.sky .row.me .bubble,body.sky .row.me .bubble.img{background:var(--sky); color:#0b1a24}
body.sky .row.me .bubble .sub{border-top-color:rgba(0,0,0,.12)}
body.sky .date-div{background:rgba(0,0,0,.07); color:#5c6b76}
body.sky .typing-ind{background:#fff}
body.sky .chat-input{background:#ffffff; border-top-color:#e3eaf0}
body.sky #msg-input{background:#f3f6f9; border-color:#e3eaf0}
body.sky .send-btn{background:var(--sky); color:#0b1a24}
body.sky .send-btn:disabled{background:#cfe6f1; color:#fff}
body.sky .sel-bar #sel-delete{background:var(--sky); border-color:var(--sky); color:#0b1a24}
body.sky .row.me .bubble mark{background:#ffe066}
/* ─ 다크 (아이콘처럼 검은 바탕) ─ */
body.dark.sky{--accent:var(--sky)}
body.dark.sky #chat{background:#0f0f11}
body.dark.sky .chat-head,body.dark.sky .search-strip{background:#151517; border-color:#242428}
body.dark.sky .chat-back,body.dark.sky .chat-menu,body.dark.sky .chat-icon,body.dark.sky .chat-peer strong{color:#f2f2f2}
body.dark.sky .chat-status,body.dark.sky .row .meta,body.dark.sky .row .time{color:#7d838a}
body.dark.sky .read-mark{color:var(--sky)}
body.dark.sky .row.other .bubble,body.dark.sky .bubble.img{background:#2a2a2e; color:#f1f1f1; box-shadow:none}
body.dark.sky .row.me .bubble,body.dark.sky .row.me .bubble.img{background:var(--sky); color:#0b1a24}
body.dark.sky .date-div{background:rgba(255,255,255,.08); color:#9aa3aa}
body.dark.sky .typing-ind{background:#2a2a2e}
body.dark.sky .chat-input,body.dark.sky .reply-bar,body.dark.sky .sel-bar{background:#1b1b1e; border-color:#242428}
body.dark.sky #msg-input{background:#232326; color:#eee; border-color:#2e2e33}
body.dark.sky .send-btn{background:var(--sky); color:#0b1a24}
body.dark.sky .send-btn:disabled{background:#2c3a42; color:#6f8792}
body.dark.sky .sel-bar #sel-delete{background:var(--sky); border-color:var(--sky); color:#0b1a24}
body.dark.sky .new-pop{background:rgba(42,42,46,.97)}

/* ───────── 게임 창: 메뉴 카드 크기 줄이기 (항상) ───────── */
body .games-body .games-card{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;min-height:0;padding:10px 12px;border-radius:12px}
body .games-body .games-card .games-card-icon{grid-row:1/3;font-size:22px;line-height:1;text-align:center}
body .games-body .games-card strong{font-size:14px;line-height:1.3}
body .games-body .games-card small{font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
body .games-body .games-menu{gap:8px;margin:10px 0}
body .games-body .games-tabs button{min-height:36px;padding:6px 12px}
body .games-body .games-actions button,body .games-body .games-form button{min-height:40px;padding:6px 12px}
body .games-body .games-form input{min-height:40px;padding:8px 10px}
body .games-head{padding:4px 10px 4px 16px}
body .games-head button{min-width:40px;min-height:40px}

/* ───────── 게임 창: 스카이 테마 색 ───────── */
body.sky .games-pop{--game-bg:#ffffff;--game-fg:#16212a;--game-line:#e1e9ef;border-radius:18px}
body.sky .games-body .games-card{background:#f4f8fb;border-color:#e1e9ef}
body.sky .games-body .games-card:hover:not(:disabled){background:#e9f6fd;border-color:var(--sky)}
body.sky .games-card small{color:#7a8892}
body.sky .games-tabs .selected,body.sky .games-bingo .called{background:var(--sky);border-color:var(--sky);color:#0b1a24}
body.sky .games-status{background:#e9f6fd;color:#1d5f7c;border-left-color:var(--sky)}
body.sky .games-words li{background:#eef4f8}body.sky .games-words li:last-child{background:#d6f0fc}
body.sky .games-body progress{accent-color:var(--sky)}
body.sky .games-body button:focus-visible,body.sky .games-head button:focus-visible{outline-color:var(--sky)}
body.dark.sky .games-pop{--game-bg:#161618;--game-fg:#eef1f4;--game-line:#2a2a2f}
body.dark.sky .games-body .games-card{background:#202024;border-color:#2c2c31}
body.dark.sky .games-body .games-card:hover:not(:disabled){background:#1d2a31;border-color:var(--sky)}
body.dark.sky .games-card small{color:#8d959c}
body.dark.sky .games-body button,body.dark.sky .games-form input{background:#202024;border-color:#2c2c31}
body.dark.sky .games-tabs .selected,body.dark.sky .games-bingo .called{background:var(--sky);border-color:var(--sky);color:#0b1a24}
body.dark.sky .games-status{background:#1d2a31;color:#bfe9fb}
body.dark.sky .games-words li{background:#25252a}body.dark.sky .games-words li:last-child{background:#1f3a47}
body.dark.sky .games-invite{--game-bg:#161618;--game-line:#2a2a2f;background:#161618}

/* ───────── 하리오: 내 얼굴 머리 ───────── */
.hface-head{position:absolute;left:0;top:0;pointer-events:none;border-radius:50%;transform-origin:50% 60%;will-change:transform;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.hface-head img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;box-sizing:border-box;background:#ffe0c2}
.hface-head.hface-over img{filter:grayscale(1) brightness(.85)}
.hface-crop{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.hface-card{background:#fff;color:#16212a;border-radius:16px;padding:16px;width:min(320px,100%);display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.hface-card canvas{width:260px;height:260px;max-width:100%;touch-action:none;cursor:grab;background:repeating-conic-gradient(#eef3f6 0 25%,#fff 0 50%) 0 0/20px 20px;border-radius:50%}
.hface-card label{display:flex;gap:8px;align-items:center;width:100%;font-size:13px}.hface-card input[type=range]{flex:1}
.hface-btns{display:flex;gap:6px;width:100%}.hface-btns span{flex:1}
.hface-btns button{border:1px solid #d6e0e7;background:#fff;border-radius:9px;padding:8px 12px;font-size:14px;color:inherit}
.hface-btns [data-x=ok]{background:#72D0F7;border-color:#72D0F7;color:#0b1a24;font-weight:600}
.hface-btns [data-x=del]{color:#d9534f}
.hface-card small{color:#7a8892;min-height:1em}
body.dark .hface-card{background:#1b1b1e;color:#eee}body.dark .hface-btns button{background:#26262a;border-color:#333}

/* ───────── 하리오: 캐릭터 선택 ───────── */
.hchoose{padding:4px 2px}
.hchoose-pop{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:center;padding:16px}
.hchoose-pop>*{background:#fff;color:#16212a}
.hchoose-pop .hc-head{border-radius:16px 16px 0 0;padding:14px 14px 4px}.hchoose-pop .hc-grid{padding:10px 14px}.hchoose-pop .hc-foot{border-radius:0 0 16px 16px;padding:10px 14px 14px}
.hc-head strong{font-size:16px}
.hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:12px 0}
.hc-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:2px solid #e1e9ef;border-radius:14px;background:#f4f8fb;color:inherit;cursor:pointer;min-height:0;font:inherit}
.hc-card.on{border-color:var(--sky,#72D0F7);background:#e9f6fd;box-shadow:0 0 0 3px rgba(114,208,247,.35)}
.hc-face{width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:38px;background:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.hc-face img{width:100%;height:100%;object-fit:cover}
.hc-card b{font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-add .hc-face{background:transparent;border:2px dashed #b9c7d1;box-shadow:none;color:#8aa0ae;font-size:30px}
.hc-edit{position:absolute;top:4px;right:6px;font-style:normal;font-size:14px;color:#7a8892;padding:2px 4px}
.hc-foot{display:flex;gap:8px;justify-content:space-between}
.hc-foot button{border:1px solid #d6e0e7;background:#fff;border-radius:10px;padding:10px 14px;font:inherit;color:inherit;min-height:44px}
.hc-foot .hc-go{background:var(--sky,#72D0F7);border-color:var(--sky,#72D0F7);color:#0b1a24;font-weight:700;flex:1;max-width:200px}
.hc-name{width:100%;padding:10px 12px;border:1px solid #d6e0e7;border-radius:10px;font-size:16px;box-sizing:border-box}
.hc-loading{color:#7a8892}
body.dark .hchoose-pop>*{background:#1b1b1e;color:#eee}
body.dark .hc-card{background:#232327;border-color:#2e2e33}body.dark .hc-card.on{background:#1d2a31;border-color:var(--sky,#72D0F7)}
body.dark .hc-face{background:#2a2a2e;border-color:#2a2a2e}body.dark .hc-foot button,body.dark .hc-name{background:#232327;border-color:#333;color:#eee}
body.dark .hc-foot .hc-go{color:#0b1a24}

}
.hchoose-pop>*{max-width:420px;width:100%;margin:0 auto;box-sizing:border-box}.hchoose-pop .hc-grid{margin:0}

/* ───────── 하리오: 폰 전체화면 + 게임기식 버튼 (세로 / 가로) ───────── */
html body .hario button{color:#16212a}
html body .hario-menu{background:rgba(18,20,28,.92);color:#fff;border-radius:14px}
html body .hario-menu button{background:#2a2f3a;color:#fff;border:1px solid #3a4150;min-height:44px;border-radius:10px}
html body .hario-menu button:first-of-type{background:var(--sky,#72D0F7);border-color:var(--sky,#72D0F7);color:#0b1a24;font-weight:700}
html body .hario-toolbar .hario-pause,html body .hario-toolbar .hario-rot{min-width:44px;min-height:40px;padding:4px 12px;border-radius:10px;background:rgba(255,255,255,.85);color:#16212a;border:1px solid rgba(0,0,0,.08);font-size:15px}
body.dark .hario{color:#e8edf3}
body.dark .hario-hud{color:#e8edf3}

html body .games-pop.hario-full{left:0 !important;top:0 !important;right:0;transform:none !important;width:100vw !important;height:100dvh;max-height:100dvh !important;border-radius:0;border:0;background:#0d0e12;color:#fff;z-index:2000}
html body .games-pop.hario-full .games-head{display:none}
html body .games-pop.hario-full .games-body{padding:0;height:100%;overflow:hidden;display:flex;flex-direction:column}
.hario-full .hario{position:relative;flex:1;display:flex;flex-direction:column;color:#fff;min-height:0}
.hario-full .hario-toolbar{position:absolute;top:calc(8px + env(safe-area-inset-top));right:10px;z-index:4;gap:6px}
.hario-full .hario-toolbar strong,.hario-full .hario>small{display:none}
.hario-full .hario-viewport{margin:0;background:#0d0e12;position:relative;padding-top:env(safe-area-inset-top)}
.hario-full .hario-hud{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:120px;z-index:3;min-height:0;font:600 12px/1.4 ui-monospace,monospace;color:#16212a;text-shadow:0 1px 0 rgba(255,255,255,.7);pointer-events:none}
.hario-full .hario-menu{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:5;width:min(360px,calc(100% - 32px));justify-content:center;padding:16px;gap:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.hario-full .hario-menu strong{text-align:center;font-size:17px}
.hario-full .hario-menu button{flex:1 1 140px}
/* 게임기 버튼: 왼쪽 ◀ ▶ / 오른쪽 달리기 · 점프 */
.hario-full .hario-controls{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:end;gap:12px;padding:16px 18px calc(18px + env(safe-area-inset-bottom));max-width:none}
.hario-full .hario-controls button{max-width:none;margin:0 !important;border-radius:50%;width:76px;height:76px;min-height:0;padding:0;font-size:24px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.28);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.hario-full .hario-controls button:active{background:rgba(114,208,247,.45);transform:scale(.95)}
.hario-full .hario-controls button:nth-child(3){grid-column:5;grid-row:1;width:92px;height:92px;font-size:17px;background:rgba(114,208,247,.35);border-color:rgba(114,208,247,.7);margin-bottom:22px !important}
.hario-full .hario-controls button:nth-child(4){grid-column:4;grid-row:1;width:68px;height:68px;font-size:14px}
/* 세로: 화면 위 게임, 아래 버튼 */
.hario-port .hario-viewport{flex:1;align-items:center;min-height:0}
.hario-port .hario-controls{margin-top:auto}
/* 가로: 게임이 화면 가득, 버튼은 반투명으로 위에 겹침 */
.hario-land .hario-viewport{position:absolute;inset:0;padding:0;align-items:center}
.hario-land .hario-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 calc(22px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));pointer-events:none}
.hario-land .hario-controls button{pointer-events:auto;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);width:70px;height:70px}
.hario-land .hario-controls button:nth-child(3){width:84px;height:84px}
.hario-land .hario-controls button:nth-child(4){width:62px;height:62px}
.hario-land .hario-hud,.hario-land .hario-toolbar{top:10px}

/* 다크/스카이 게임 버튼 규칙보다 우선 (하리오 전용 색) */
html body .hario .hario-toolbar button{background:rgba(255,255,255,.88) !important;color:#16212a !important;border-color:rgba(0,0,0,.1) !important}
html body .hario-full .hario-controls button{background:rgba(255,255,255,.14) !important;color:#fff !important;border:2px solid rgba(255,255,255,.3) !important}
html body .hario-full .hario-controls button:nth-child(3){background:rgba(114,208,247,.38) !important;border-color:rgba(114,208,247,.75) !important}
html body .hario-land .hario-controls button{background:rgba(255,255,255,.2) !important}
html body .hario-full .hario-controls button:active{background:rgba(114,208,247,.55) !important}
html body .hario-menu button{background:#2a2f3a !important;color:#fff !important;border:1px solid #3a4150 !important}
html body .hario-menu button:first-of-type{background:var(--sky,#72D0F7) !important;border-color:var(--sky,#72D0F7) !important;color:#0b1a24 !important}
html body .hc-foot .hc-go{background:var(--sky,#72D0F7) !important;border-color:var(--sky,#72D0F7) !important;color:#0b1a24 !important}
html body .hc-foot .hc-back{background:transparent !important}
html body .hc-card{background:#f4f8fb !important;border:2px solid #e1e9ef !important;color:#16212a !important}
html body .hc-card.on{background:#e9f6fd !important;border-color:var(--sky,#72D0F7) !important}
html body.dark .hc-card{background:#232327 !important;border-color:#2e2e33 !important;color:#eee !important}
html body.dark .hc-card.on{background:#1d2a31 !important;border-color:var(--sky,#72D0F7) !important}
.hario-port .hario-hud{color:#e8edf3 !important;text-shadow:none !important}
/* 배경 없는(얼굴 모양) 사진: 동그라미·흰 테두리 없이 얼굴 윤곽 그대로 */
.hface-head.hface-cut{border-radius:0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.hface-head.hface-cut img{border:0;border-radius:0;background:transparent;object-fit:contain}
.hc-face.cut{background:transparent !important;border-color:transparent !important;box-shadow:none !important;border-radius:0}
.hc-face.cut img{object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.hc-tip{margin:0;font-size:12px;color:#7a8892;line-height:1.5}
.hc-auto{border:1px solid #d6e0e7;background:#fff;border-radius:10px;padding:8px 12px;font:inherit;color:#16212a}.hc-auto:disabled{opacity:.7}body.dark .hc-auto{background:#26262a;color:#eee;border-color:#333}

/* ───────── 하리오 가로 모드: 화면 어디든 터치 조작 ───────── */
.hario-touch{display:none}
.hario-land .hario-touch{display:block;position:absolute;inset:0;z-index:2;touch-action:none}
.hario-land .hario-controls{display:none !important}
.hario-stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.35);pointer-events:none}
.hario-stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(114,208,247,.6);border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.hario-tap{position:absolute;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:3px solid rgba(114,208,247,.85);background:rgba(114,208,247,.22);pointer-events:none;animation:hario-tap .35s ease-out}
@keyframes hario-tap{from{transform:scale(.5);opacity:.4}to{transform:scale(1);opacity:1}}
.hario-touch-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 14px;border-radius:20px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;white-space:nowrap;pointer-events:none;transition:opacity .6s}
.hario-touch-hint.gone{opacity:0}
.hario-touch::before{content:'';position:absolute;left:50%;top:15%;bottom:15%;border-left:1px dashed rgba(255,255,255,.18);pointer-events:none}
.hface-tag{position:absolute;left:0;top:0;z-index:3;padding:1px 7px;border-radius:9px;background:rgba(0,0,0,.55);color:#fff;font:600 11px/1.5 -apple-system,sans-serif;white-space:nowrap;pointer-events:none}
.hc-rename{width:100%;margin:0 0 10px;padding:10px;border-radius:10px;border:1px dashed #b9c7d1;background:transparent;color:inherit;font:inherit;font-size:13px}
html body .hc-rename{background:transparent !important;color:inherit !important}
/* 하리오 표정 효과 */
.hface-fx{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none}
.hfx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
.hfx-say{padding:3px 9px;border-radius:12px;background:#fff;color:#16212a;font:800 13px/1.3 -apple-system,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:hfx-say 1.2s ease-out forwards}
.hfx-say::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0}
.hfx-say-cry,.hfx-say-over{background:#dff3ff;color:#1d5f7c}.hfx-say-cry::after,.hfx-say-over::after{border-top-color:#dff3ff}
.hfx-say-yay{background:#fff3c4}.hfx-say-yay::after{border-top-color:#fff3c4}
@keyframes hfx-say{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.08)}25%{transform:translate(-50%,-60%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%)}}
.hfx-tear{font-size:13px;animation:hfx-tear .8s ease-in forwards;opacity:0}
@keyframes hfx-tear{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,140%) scale(1)}}
.hfx-blush{width:14px;height:8px;border-radius:50%;background:rgba(255,110,140,.55);filter:blur(1px);animation:hfx-fade .9s ease-out forwards}
.hfx-spark{font-size:14px;animation:hfx-spark .8s ease-out forwards}.hfx-spark.big{font-size:22px;animation-duration:1.3s}
@keyframes hfx-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-30deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-150%) scale(.9) rotate(20deg)}}
.hfx-plus{font:800 12px/1 -apple-system,sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);animation:hfx-spark .7s ease-out forwards}
@keyframes hfx-fade{0%,70%{opacity:1}100%{opacity:0}}
.hface-head.hface-laugh img{animation:hface-laugh .7s ease-in-out}
@keyframes hface-laugh{0%,100%{transform:none}20%{transform:scaleY(.86) scaleX(1.08)}40%{transform:scaleY(1.06) scaleX(.96)}60%{transform:scaleY(.9) scaleX(1.05)}80%{transform:scaleY(1.03)}}
.hface-head.hface-cry img{animation:hface-cry .9s ease-in-out;filter:saturate(.7) brightness(.95) hue-rotate(-8deg)}
@keyframes hface-cry{0%,100%{transform:none}15%,45%,75%{transform:translateX(-2px) rotate(-3deg)}30%,60%,90%{transform:translateX(2px) rotate(3deg)}}

/* 하리오 순위표 */
.hrank{flex-basis:100%;width:100%;color:#fff}
.hrank-wait{margin:4px 0;color:#aab;text-align:center;font-size:13px}
.hrank-new{text-align:center;font-weight:800;font-size:16px;color:#ffe066;margin:2px 0 6px}
.hrank-title{font-weight:700;font-size:14px;margin:4px 0 6px}
.hrank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:38vh;overflow:auto}
.hrank-list li{display:grid;grid-template-columns:28px 30px 1fr auto;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;background:rgba(255,255,255,.07)}
.hrank-list li.mine{background:rgba(114,208,247,.25);outline:1px solid rgba(114,208,247,.7)}
.hrank-list li.empty{display:block;text-align:center;color:#aab}
.hrank-list .m{text-align:center;font-weight:700}
.hrank-list .f{width:30px;height:30px;display:grid;place-items:center;font-size:20px}.hrank-list .f img{width:30px;height:30px;object-fit:contain}
.hrank-list .n{display:flex;flex-direction:column;min-width:0}.hrank-list .n b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrank-list .n small{font-size:10.5px;color:#aab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrank-list .s{font:800 15px/1 ui-monospace,monospace;color:#ffe066}
.hrank-best{display:flex;gap:10px;justify-content:center;margin-top:8px;font-size:12px;color:#ccd}.hrank-best b{color:#fff}
.hrank-panel{background:#16171c;border-radius:16px;padding:16px;max-width:420px;width:100%;margin:0 auto;box-sizing:border-box}
.hrank-close{display:block;width:100%;margin-top:12px;min-height:44px;border-radius:10px;border:1px solid #3a4150;background:#2a2f3a;color:#fff;font:inherit}
html body .hrank-close{background:#2a2f3a !important;color:#fff !important}
.hc-rankbtn{width:100%;margin:0 0 10px;padding:10px;border-radius:10px;border:1px solid #e6c34d;font:inherit;font-size:14px;font-weight:600}
html body .hc-rankbtn{background:#fff6d6 !important;color:#6b5200 !important}
html body.dark .hc-rankbtn{background:#3a3218 !important;color:#ffe08a !important;border-color:#6b5a1c}
.hario-full .hario-menu{max-height:calc(100% - 20px);overflow:auto}

/* 아이폰 화면 맨 위(상태바 뒤) 색을 채팅 화면과 맞춤 — 채팅이 다크일 때만 어둡게 (위장 화면은 그대로) */
html:has(body.chat-dark),body.chat-dark{background:#1f1f1f}
html:has(body.chat-dark.sky),body.chat-dark.sky{background:#151517}

/* ═══ 얼굴 게임 모음 (facegames.js) ═══ */
.fg{position:fixed;inset:0;z-index:2147483000;background:rgba(10,14,20,.55);display:flex;align-items:center;justify-content:center;font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Hiragino Sans",sans-serif;-webkit-user-select:none;user-select:none}
.fg-frame{width:min(100vw,480px);height:min(100dvh,860px);background:#fff;color:#222;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media(min-width:520px){.fg-frame{border-radius:22px;height:min(94dvh,860px)}}
.fg-top{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;background:#72D0F7;color:#08324a;flex:0 0 auto}
.fg-title{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-score{margin-left:auto;font-weight:800;font-size:15px;white-space:nowrap}
.fg-x{border:0;background:rgba(255,255,255,.55);color:#08324a;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;flex:0 0 auto}
.fg-stage{position:relative;flex:1 1 auto;overflow:hidden;touch-action:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.fg-canvas{position:absolute;inset:0;display:block}
.fg-start,.fg-end{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:22px 18px;text-align:center;background:linear-gradient(#f2fbff,#fff);z-index:3;touch-action:pan-y}
.fg-end{background:rgba(255,255,255,.94)}
.fg-big{font-size:58px;line-height:1.1}
.fg-start h2,.fg-end h2{margin:6px 0 8px;font-size:22px}
.fg-how{margin:0 0 14px;font-size:14px;line-height:1.55;color:#555;max-width:360px}
.fg-label{font-size:12px;font-weight:700;color:#888;margin-bottom:6px}
.fg-faces{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:4px 2px 10px;touch-action:pan-x;justify-content:flex-start}
.fg-face{flex:0 0 auto;width:72px;border:2px solid transparent;background:#f3f6f8;border-radius:16px;padding:6px 4px;cursor:pointer;color:#333;display:flex;flex-direction:column;align-items:center;gap:3px}
.fg-face span{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:34px}
.fg-face img{width:48px;height:48px;object-fit:contain}
.fg-face b{font-size:11px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-face.on{border-color:#2fa8dc;background:#e1f5fe}
.fg-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.fg-btns button{border:0;border-radius:999px;padding:11px 18px;font-size:15px;font-weight:800;cursor:pointer}
.fg-go{background:#2fa8dc;color:#fff}
.fg-out,.fg-rankbtn,.fg-cpu{background:#eef3f6;color:#234}
.fg-final{font-size:44px;font-weight:900;color:#2fa8dc;margin-bottom:6px}
.fg-rank{width:100%;max-width:380px}
.fg-wait{color:#888;font-size:13px;margin:8px 0}
.fg-new{font-weight:800;color:#e85d75;margin:6px 0}
.fg-rtitle{font-weight:800;margin:8px 0 6px;font-size:15px}
.fg-rlist{list-style:none;margin:0;padding:0;text-align:left}
.fg-rlist li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px}
.fg-rlist li:nth-child(odd){background:#f5f8fa}
.fg-rlist li.mine{background:#fff1c9;outline:2px solid #ffc93c}
.fg-rlist li.empty{justify-content:center;color:#999}
.fg-rlist .m{width:26px;text-align:center;font-weight:800}
.fg-rlist .f{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:24px}
.fg-rlist .f img{width:34px;height:34px;object-fit:contain}
.fg-rlist .n{flex:1;min-width:0;display:flex;flex-direction:column}
.fg-rlist .n b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-rlist .n small{font-size:11px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-rlist .s{font-weight:800;font-size:14px}
.fg-best{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#666}
.fg-rankpop{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:5;display:flex;align-items:center;justify-content:center;padding:16px}
.fg-rankpanel{background:#fff;border-radius:18px;padding:14px;width:100%;max-width:380px;max-height:90%;overflow-y:auto;text-align:center}
.fg-close{margin-top:10px;border:0;border-radius:999px;padding:9px 18px;font-weight:700}
.fg-pop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:4;font-weight:900;font-size:18px;color:#fff;background:#ff7aa2;padding:4px 10px;border-radius:14px;white-space:nowrap;animation:fgpop 1.1s ease-out forwards;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.fg-pop.cry{background:#5b8def}
.fg-pop.big{font-size:24px;padding:6px 14px}
.fg-pop.small{font-size:13px}
@keyframes fgpop{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
.fg-invite{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);z-index:2147483001;background:#fff;color:#222;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px 12px;display:flex;align-items:center;gap:8px;width:min(420px,calc(100vw - 24px));box-sizing:border-box;font-size:14px;animation:fginv .3s ease-out}
.fg-invite span{flex:1}
.fg-invite button{border:0;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.fg-invite .ok{background:#2fa8dc;color:#fff}.fg-invite .no{background:#eef3f6;color:#234}
@keyframes fginv{from{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%,0)}}
.fg-photo{position:absolute;inset:0;overflow-y:auto;padding:10px 12px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:pan-y}
.fg-pcv{width:min(100%,360px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.15);flex:0 0 auto}
.fg-pcv canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.fg-pscenes{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:2px;touch-action:pan-x;flex:0 0 auto}
.fg-pscenes button{flex:0 0 auto;border:0;border-radius:999px;padding:7px 12px;background:#eef3f6;color:#234;font-weight:700;font-size:13px;cursor:pointer}
.fg-pscenes button.on{background:#2fa8dc;color:#fff}
.fg-pctl{display:flex;gap:12px;width:100%;max-width:360px;flex:0 0 auto}
.fg-pctl label{flex:1;font-size:12px;color:#666;display:flex;flex-direction:column;gap:2px}
.fg-cap{width:100%;max-width:360px;border:1px solid #d5dde3;border-radius:12px;padding:9px 12px;font-size:15px;flex:0 0 auto;background:#fff;color:#222}
.fg-photo .fg-btns{margin-top:2px}
.fg-seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.fg-seg button{border:0;border-radius:999px;padding:8px 12px;background:#eef3f6;color:#234;font-weight:700;font-size:13px;cursor:pointer}
.fg-seg button.on{background:#2fa8dc;color:#fff}
.fg-pad{position:absolute;left:0;right:0;bottom:0;padding:10px 10px calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;justify-content:space-between;align-items:flex-end;gap:8px;z-index:2;pointer-events:none}
.fg-pad button{pointer-events:auto;border:0;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;color:#fff;font-weight:800}
.fg-pad-move{display:flex;gap:8px}
.fg-pad-move button{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.18);font-size:22px;border:2px solid rgba(255,255,255,.35)}
.fg-pad-act{display:grid;grid-template-columns:repeat(2,64px);gap:8px}
.fg-pad-act button{height:56px;border-radius:16px;background:rgba(255,255,255,.16);font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.3)}
.fg-pad-act small{font-size:10px;font-weight:700;opacity:.9}
.fg-pad button.on{background:rgba(114,208,247,.6)}
.fg-pad-pin{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translateX(-50%);width:150px;height:70px;border-radius:999px;background:#ff4d6d !important;font-size:22px;display:none;box-shadow:0 6px 20px rgba(255,77,109,.5)}
.fg-pad-pin.show{display:block;animation:fgpin .4s infinite alternate}
@keyframes fgpin{to{transform:translateX(-50%) scale(1.08)}}
.fg-drive{position:absolute;left:0;right:0;bottom:0;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;align-items:center;gap:10px;z-index:2}
.fg-drive button{flex:0 0 auto;width:78px;height:78px;border:0;border-radius:18px;font-weight:900;font-size:14px;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none}
.fg-drive .br{background:#e63946}.fg-drive .gas{background:#2bb673}
.fg-drive button.on{filter:brightness(1.25);transform:scale(.96)}
.fg-drive .wheel{flex:1;height:64px;border-radius:32px;background:rgba(0,0,0,.45);position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}
.fg-drive .wheel span{color:rgba(255,255,255,.75);font-size:12px;font-weight:700;pointer-events:none}
.fg-drive .wheel i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none}