/* =========================================================
   1. 폰트 및 디자인 시스템
   ========================================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@font-face { font-family: 'JejuAirFlightSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/JejuAirFlightSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'JejuAirFlightSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/JejuAirFlightSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }

:root {
  --bg-color: #F4F5F7; --card-bg: #FFFFFF; --primary-color: #191F28;
  --text-main: #222222; --text-sub: #8B95A1; --border-color: #E5E8EB; --text-placeholder: #A0A6B1;
  --my-msg-bg: #191F28; --my-msg-color: #FFFFFF; --other-msg-bg: #EFEFF1;
  --radius-lg: 24px; --radius-md: 14px; --shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  --font-main: 'JejuAirFlightSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
  --bg-color: #121212; --card-bg: #1E1E1E; --primary-color: #4A90E2;
  --text-main: #EAEAEA; --text-sub: #A0A0A0; --border-color: #333333; --text-placeholder: #666666;
  --my-msg-bg: #4A90E2; --my-msg-color: #FFFFFF; --other-msg-bg: #2C2C2C;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-main); -webkit-font-smoothing: antialiased; }
body { background-color: var(--bg-color); color: var(--text-main); display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 16px; transition: background-color 0.3s, color 0.3s; }

.file-mode-notice { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:20px; background:rgba(15,18,24,.72); backdrop-filter:blur(8px); }
.file-mode-notice[hidden] { display:none; }
.file-mode-notice-box { width:min(420px,calc(100vw - 40px)); padding:28px; border:1px solid var(--border-color); border-radius:16px; background:var(--card-bg); box-shadow:0 18px 50px rgba(0,0,0,.24); text-align:center; }
.file-mode-notice-box img { width:48px; height:48px; border-radius:10px; object-fit:contain; }
.file-mode-notice-box strong { display:block; margin-top:14px; font-size:19px; }
.file-mode-notice-box p { margin:10px 0 6px; color:var(--text-main); font-size:14px; line-height:1.55; }
.file-mode-notice-box span { display:block; color:var(--text-sub); font-size:12px; line-height:1.5; }
.file-mode-notice-box a { display:flex; align-items:center; justify-content:center; min-height:46px; margin-top:20px; border-radius:10px; background:var(--primary-color); color:#fff; font-weight:700; text-decoration:none; }

.app-container {
  width: 100%; max-width: 520px; height: 88vh; max-height: 940px; min-height: 640px;
  background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden; position: relative; border: 1px solid var(--border-color); transition: max-width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s, border-color 0.3s;
}
@media (min-width: 768px) { .app-container { max-width: 1400px; height:min(92dvh,940px); min-height:0; } }

.auth-boot-screen { display:none; flex:1; align-items:center; justify-content:center; background:var(--card-bg); }
.auth-pending .auth-boot-screen { display:flex; }
.auth-pending .auth-screen,
.auth-pending .main-screen { display:none !important; }
.auth-boot-spinner { width:28px; height:28px; border:3px solid var(--border-color); border-top-color:var(--primary-color); border-radius:50%; animation:auth-boot-spin .72s linear infinite; }
@keyframes auth-boot-spin { to { transform:rotate(360deg); } }

[data-theme="dark"] .modal-box, [data-theme="dark"] .chat-sidebar, [data-theme="dark"] .room-header, [data-theme="dark"] .chat-input-area, [data-theme="dark"] .app-header, [data-theme="dark"] .tab-nav, [data-theme="dark"] .context-menu { background: #1E1E1E; border-color: #333; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #2A2A2A !important; color: #EAEAEA !important; border-color: #444 !important; }
[data-theme="dark"] .post-card, [data-theme="dark"] .mail-card, [data-theme="dark"] .feedback-card, [data-theme="dark"] .banned-card, [data-theme="dark"] .friend-card, [data-theme="dark"] .friend-req-card, [data-theme="dark"] .member-item-card, [data-theme="dark"] .btn-sm { background: #1E1E1E; border-color: #333; color: #EAEAEA; }
[data-theme="dark"] .chat-item:hover, [data-theme="dark"] .chat-item.active, [data-theme="dark"] .btn-sm:hover, [data-theme="dark"] .rich-editor-toolbar { background: #2A2A2A; }
[data-theme="dark"] .reaction-badge { background: #2A2A2A; border-color: #444; color: #EAEAEA; }
[data-theme="dark"] .reaction-badge.active { background: #1A3A5F; border-color: #4A90E2; color: #4A90E2; }
[data-theme="dark"] .toast-popup { background: rgba(255, 255, 255, 0.9); color: #121212; }
[data-theme="dark"] .drop-zone { background: #1E1E1E; border-color: #444; }
[data-theme="dark"] .drop-zone.dragover { background: #2A2A2A; border-color: #4A90E2; }
[data-theme="dark"] .msg-media, [data-theme="dark"] .post-img { background: transparent; }
[data-theme="dark"] .pinned-msg-bar, [data-theme="dark"] .reply-preview-bar { background: #1E1E1E; border-color: #333; }

/* 토스트 & 공통 모달 */
.toast-popup { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(25, 31, 40, 0.94); color: #FFFFFF; padding: 12px 26px; border-radius: 30px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.18); backdrop-filter: blur(8px); z-index: 1000; display: none; align-items: center; gap: 8px; white-space: nowrap; }
.toast-popup.show { display: flex; }

.modal-overlay { display: none !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 800; justify-content: center; align-items: center; padding: 20px; }
.modal-overlay.active { display: flex !important; }
#siteConfirmModal { position:fixed;z-index:5500; }

.modal-box { background: var(--card-bg); width: 100%; max-width: 420px; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
#settingsModal { padding:24px; }
#settingsModal .modal-box { display:flex; width:min(600px,calc(100vw - 48px)); max-width:600px; height:100%; max-height:100%; padding:0; overflow:hidden; box-sizing:border-box; border:1px solid var(--border-color); border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.settings-scroll-content { flex:1; min-width:0; min-height:0; padding:24px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text-sub) 58%,transparent) transparent; }
.settings-scroll-content::-webkit-scrollbar { width:10px; }
.settings-scroll-content::-webkit-scrollbar-track { margin-block:14px; background:transparent; }
.settings-scroll-content::-webkit-scrollbar-thumb { min-height:44px; border:3px solid transparent; border-radius:999px; background:color-mix(in srgb,var(--text-sub) 58%,transparent); background-clip:padding-box; }
.settings-scroll-content::-webkit-scrollbar-button,
.settings-scroll-content::-webkit-scrollbar-button:single-button,
.settings-scroll-content::-webkit-scrollbar-button:start,
.settings-scroll-content::-webkit-scrollbar-button:end { display:none !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; border:0; background:transparent; }
.settings-scroll-content::-webkit-scrollbar-corner { background:transparent; }
#profileTab .sub-container { scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text-sub) 58%,transparent) transparent; }
#profileTab .sub-container::-webkit-scrollbar { width:10px; }
#profileTab .sub-container::-webkit-scrollbar-track { margin-block:14px; background:transparent; }
#profileTab .sub-container::-webkit-scrollbar-thumb { min-height:44px; border:3px solid transparent; border-radius:999px; background:color-mix(in srgb,var(--text-sub) 58%,transparent); background-clip:padding-box; }
#profileTab .sub-container::-webkit-scrollbar-button,
#profileTab .sub-container::-webkit-scrollbar-button:single-button,
#profileTab .sub-container::-webkit-scrollbar-button:start,
#profileTab .sub-container::-webkit-scrollbar-button:end { display:none !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; border:0; background:transparent; }
#profileTab .sub-container::-webkit-scrollbar-corner { background:transparent; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.modal-sub { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; line-height: 1.4; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.btn-sm { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-color); background: var(--card-bg); cursor: pointer; white-space: nowrap; color: var(--text-main); }
.btn-sm:hover { background: #F4F5F7; }
.btn-sm.danger { color: #FF3B30; border-color: #FFE5E5; }
.btn-sm.danger:hover { background: #FF3B30; color: #FFF; }
.btn-danger-rounded { width: 100%; padding: 16px; border-radius: 16px; background: #FF3B30; color: #FFF; font-size: 15px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2); transition: opacity 0.2s; }
.btn-danger-rounded:hover { opacity: 0.85; }
.btn-outline { width: 100%; padding: 14px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--primary-color); font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.btn-outline:hover { background: #F4F5F7; }

/* 설정 토글 */
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.theme-setting-item { align-items:stretch; flex-direction:column; gap:10px; }
.theme-setting-item .setting-info { width:100%; }
.theme-setting-item .theme-mode-control { width:100%; }
.theme-setting-item .theme-mode-option { flex:1; justify-content:center; }
.theme-mode-control { display:flex; flex:0 0 auto; gap:3px; padding:4px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-color); transition:background-color .24s ease,border-color .24s ease; }
.theme-mode-option { position:relative; display:grid; grid-template-columns:18px auto; align-items:center; gap:4px; min-height:38px; padding:0 9px; border:0; border-radius:8px; background:transparent; color:var(--text-sub); cursor:pointer; transition:background-color .22s ease,color .22s ease,box-shadow .22s ease,transform .16s ease; }
.theme-mode-option span { font-size:15px; line-height:1; }
.theme-mode-option small { font-size:11px; font-weight:700; white-space:nowrap; }
.theme-mode-option:hover { background:color-mix(in srgb,var(--primary-color) 8%,transparent); color:var(--text-main); }
.theme-mode-option:active { transform:scale(.96); }
.theme-mode-option.selected { background:var(--card-bg); color:var(--primary-color); box-shadow:0 2px 8px rgba(0,0,0,.09); }
.theme-mode-option:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
@media (max-width:520px) { .setting-item { gap:12px; }.theme-mode-option { grid-template-columns:1fr; gap:2px; min-width:42px; padding:5px 7px; text-align:center; } }
.setting-info strong { display: block; font-size: 14px; margin-bottom: 4px; }
.setting-info span { font-size: 12px; color: var(--text-sub); }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #34C759; }
input:checked + .slider:before { transform: translateX(20px); }

/* 라이트박스 및 비디오 플레이어 */
.lightbox-modal { display: none !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(6px); z-index: 950; flex-direction: column; justify-content: center; align-items: center; padding: 20px; cursor: pointer; }
.lightbox-modal.active { display: flex !important; }
.lightbox-modal img { max-width: 90%; max-height: 80%; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); pointer-events: none; }

.video-player-overlay { display: none !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1000; flex-direction: column; justify-content: center; align-items: center; }
.video-player-overlay.active { display: flex !important; }
.video-container { position: relative; width: 100%; max-width: 800px; }
.video-container video { width: 100%; max-height: 80vh; display: block; }
.custom-controls { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 16px; display: flex; align-items: center; gap: 12px; color: #FFF; flex-wrap: wrap; }
.custom-controls button { background: none; border: none; color: #FFF; font-size: 16px; cursor: pointer; }
.progress-bar-container { flex: 1; display: flex; align-items: center; min-width: 150px; }
.progress-bar { width: 100%; cursor: pointer; accent-color: #3182F6; }
.speed-select { background: rgba(255,255,255,0.2); color: #FFF; border: none; border-radius: 6px; padding: 4px 8px; outline: none; font-size: 12px; }
.btn-close-video { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.5); border: none; color: #FFF; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 16px; }

/* 로그인 */
.auth-screen { flex: 1; padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; max-width: 480px; margin: 0 auto; width: 100%; position: relative; }
.auth-theme-toggle { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 50%; background: var(--card-bg); color: var(--text-main); font-size: 18px; cursor: pointer; }
.auth-theme-toggle:hover { background: var(--bg-color); }
.auth-screen.auth-leaving { animation: auth-exit 180ms ease-in both; pointer-events: none; }
.auth-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.auth-subtitle { font-size: 14px; color: var(--text-sub); margin-bottom: 24px; }
.input-group { margin-bottom: 16px; }
.input-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
.input-wrapper { position: relative; display: flex; align-items: center; gap: 8px; }
.input-wrapper input, .form-select, .form-textarea { width: 100%; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: #FAFAFB; font-size: 14px; outline: none; }
.input-wrapper input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary-color); background: var(--card-bg); }
.app-native-select{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.app-custom-select{position:relative;display:inline-block;min-width:104px;max-width:100%;vertical-align:middle}.app-custom-select-wide{display:block;width:100%}.app-custom-select-compact{flex:0 0 auto}.app-select-button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:42px;padding:10px 13px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);color:var(--text-main);font:600 13px/1.3 var(--font-main);text-align:left;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}.app-select-button:hover{background:color-mix(in srgb,var(--card-bg) 90%,var(--primary-color))}.app-select-button:focus-visible,.app-custom-select.open .app-select-button{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 14%,transparent)}.app-select-button:disabled{cursor:not-allowed;opacity:.55}.app-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-chevron{flex:none;color:var(--text-sub);font-size:15px;transition:transform .18s}.app-custom-select.open .app-select-chevron{transform:rotate(180deg)}.app-select-menu{display:none;position:absolute;z-index:1200;top:calc(100% + 6px);left:0;width:max-content;min-width:100%;max-width:min(320px,calc(100vw - 32px));max-height:min(280px,45vh);padding:6px;overflow:auto;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg);box-shadow:0 14px 38px rgba(0,0,0,.2)}.app-custom-select.open .app-select-menu{display:grid;gap:2px;animation:appSelectOpen .16s ease-out}.app-select-option{display:flex;align-items:center;width:100%;min-height:38px;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:var(--text-main);font:500 13px/1.35 var(--font-main);text-align:left;white-space:nowrap;cursor:pointer}.app-select-option:hover,.app-select-option:focus-visible{outline:0;background:color-mix(in srgb,var(--primary-color) 10%,var(--card-bg))}.app-select-option.selected{background:var(--primary-color);color:#fff;font-weight:700}.app-select-option.selected::after{content:'✓';margin-left:auto;padding-left:16px}.app-select-option:disabled{opacity:.45;cursor:not-allowed}@keyframes appSelectOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){.app-select-button{min-height:44px;border-radius:12px}.app-select-menu{position:fixed;z-index:5300;top:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;width:auto;max-width:none;max-height:min(52vh,420px);padding:8px;border-radius:16px}.app-select-option{min-height:44px;border-radius:10px}}
.btn-toggle-pw { position: absolute; right: 14px; background: none; border: none; cursor: pointer; font-size: 16px; color: var(--text-sub); z-index: 10; }
.auth-options { display: flex; align-items: center; justify-content: space-between; margin-top: -4px; margin-bottom: 16px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sub); cursor: pointer; user-select: none; }
.checkbox-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border-color); border-radius: 5px; background-color: #FAFAFB; cursor: pointer; position: relative; }
.checkbox-label input[type="checkbox"]:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.checkbox-label input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.btn-primary { width: 100%; padding: 16px; border-radius: var(--radius-md); background: var(--primary-color); color: #FFF; font-size: 15px; font-weight: 600; border: none; cursor: pointer; margin-top: 12px; }
.btn-primary:hover { opacity: 0.9; }
.settings-docs-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.settings-footer-docs { display:flex; align-items:center; justify-content:center; gap:5px; width:max-content; min-height:30px; margin:14px auto 2px; padding:3px 6px; border:0; border-radius:7px; background:transparent; color:var(--primary-color); font-size:12px; font-weight:600; text-decoration:none; transition:background-color .2s ease,color .2s ease,transform .16s ease; }
.settings-footer-docs:hover { background:color-mix(in srgb,var(--primary-color) 8%,transparent); }
.settings-footer-docs:active { transform:scale(.985); }
.settings-footer-docs:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
.settings-close-row { margin-top:4px; }
#btnEnableBrowserNotifications.danger { border-color:color-mix(in srgb,#FF3B30 35%,var(--border-color)); color:#FF3B30; }
#btnEnableBrowserNotifications:disabled { cursor:not-allowed; opacity:.55; }
.auth-toggle { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-sub); }
.auth-toggle span { color: var(--primary-color); font-weight: 600; cursor: pointer; }
.auth-password-note { position:absolute; left:50%; bottom:18px; width:max-content; max-width:calc(100vw - 28px); margin:0; transform:translateX(-50%); color:var(--text-placeholder); font-size:10px; font-weight:400; line-height:1.4; white-space:nowrap; text-align:center; user-select:none; }

/* 메인 프레임 & 탭 */
.main-screen { display: none; flex-direction: column; height: 100%; }
.main-screen.app-entering { animation: app-enter 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); z-index:10; }
.header-user-info { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.admin-badge { font-size: 11px; background: #FF3B30; color: #FFF; padding: 2px 7px; border-radius: 10px; }
.btn-settings { font-size: 20px; background: none; border: none; cursor: pointer; color: var(--text-sub); transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; }
.btn-settings:hover { transform: rotate(90deg); }

.tab-nav { display: flex; border-bottom: 1px solid var(--border-color); background: var(--card-bg); overflow-x: auto; scrollbar-width: none; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn { position: relative; padding: 14px 16px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-sub); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; transition: all 0.2s ease; }
.tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: var(--card-bg); flex: 2; }
.tab-badge { display: inline-flex; justify-content: center; align-items: center; background-color: #FF3B30; color: #FFFFFF; font-size: 10px; font-weight: 700; height: 16px; min-width: 16px; padding: 0 5px; border-radius: 10px; box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3); }

@media (max-width: 767px) { .tab-label { display: none; } .tab-btn.active .tab-label { display: inline-block; } }
.tab-content { flex: 1; display: none; flex-direction: column; overflow: hidden; background: var(--bg-color); }
.tab-content.active { display: flex; }
.tab-content.active { animation: tab-enter 180ms ease-out both; }

@keyframes app-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes auth-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes tab-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-screen.auth-leaving, .main-screen.app-entering, .tab-content.active { animation: none; }
}

.sound-choice-group { width: 168px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sound-choice { min-height: 34px; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); color: var(--text-main); font-size: 12px; cursor: pointer; }
.sound-choice:hover { background: var(--bg-color); }
.sound-choice.selected { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); color: var(--primary-color); font-weight: 700; }
.empty-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 32px 20px; text-align: center; color: var(--text-sub); }
.empty-state[hidden], .admin-panel-section[hidden] { display:none !important; }
.empty-state-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--other-msg-bg); font-size: 19px; margin-bottom: 3px; }
.empty-state strong { color: var(--text-main); font-size: 14px; }
.empty-state span { font-size: 12px; line-height: 1.5; }

/* 채팅 레이아웃 */
.chat-layout { display: flex; height: 100%; flex-direction: column; flex: 1; overflow: hidden; }
@media (min-width: 768px) { .chat-layout { flex-direction: row; } }
.chat-sidebar { width: 100%; border-bottom: 1px solid var(--border-color); background: var(--card-bg); display: flex; flex-direction: column; }
@media (min-width: 768px) { .chat-sidebar { width:clamp(280px,28vw,360px); border-bottom:none; border-right:1px solid var(--border-color); flex-shrink:0; } }
.chat-search-bar { padding: 12px 16px; border-bottom: 1px solid var(--border-color); display: flex; gap: 8px; }
.chat-search-bar input { flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg); font-size: 13px; outline: none; color: var(--text-main); }
.chat-list { overflow-y: auto; flex: 1; }
.chat-item { padding: 14px 18px; border-bottom: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; gap: 12px; position: relative; }
.chat-item:hover, .chat-item.active { background: #F4F5F7; }
.avatar-container { position: relative; flex-shrink: 0; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; position: absolute; bottom: 0; right: 0; border: 2px solid #FFFFFF; background: #C4C4C4; }
.status-dot.online { background: #34C759; }
.avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; color: #FFFFFF; border: 1px solid var(--border-color); flex-shrink: 0; overflow: hidden; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-img.default-avatar { background:#E5E8EB !important; color:#8B95A1; }
.default-avatar-person { position:relative; width:62%; height:62%; display:block; }
.default-avatar-person::before { content:''; position:absolute; z-index:2; top:0; left:28%; width:44%; aspect-ratio:1; border-radius:50%; background:#8B95A1; }
.default-avatar-person::after { content:''; position:absolute; bottom:0; left:8%; width:84%; height:56%; border-radius:50% 50% 34% 34%; background:#8B95A1; }
[data-theme="dark"] .avatar-img.default-avatar { background:#343434 !important; }
[data-theme="dark"] .default-avatar-person::before,[data-theme="dark"] .default-avatar-person::after { background:#9A9A9A; }
.chat-item-info { flex: 1; overflow: hidden; }
.chat-item-name { min-width:0; font-size:14px; font-weight:700; margin-bottom:2px; display:flex; justify-content:flex-start; align-items:center; }
.chat-user-tag { margin-left:6px; color:#3182F6; font-size:11px; font-weight:600; white-space:nowrap; }
.chat-item-last { font-size: 12px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; margin-left:auto; background:#FF3B30; color:#FFF; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; flex-shrink:0; }
.typing-indicator { font-size: 11px; color: #3182F6; font-weight: 600; }
.sidebar-footer { padding: 12px 18px; border-top: 1px solid var(--border-color); background: var(--card-bg); text-align: center; display: flex; justify-content: space-around; }
.btn-sidebar-add-friend { background: none; border: none; font-size: 13px; font-weight: 600; color: var(--text-sub); cursor: pointer; }
.btn-sidebar-add-friend:hover { color: var(--primary-color); }

.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-color); position: relative; height: 100%; }
.room-header { padding: 12px 20px; border-bottom: 1px solid var(--border-color); background: var(--card-bg); display: flex; justify-content: space-between; align-items: center; min-height: 52px; z-index: 5; }
.room-title-group { display:flex; align-items:center; min-width:0; gap:8px; }
.btn-back-chat-list { display:none; flex:0 0 auto; width:34px; height:34px; padding:0; border:1px solid var(--border-color); border-radius:50%; background:var(--card-bg); color:var(--text-main); font:500 20px/1 var(--font-main); cursor:pointer; }
.room-title { font-size: 15px; font-weight: 700; color: var(--primary-color); display: flex; align-items: center; gap: 6px; }
.btn-room-invite { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; font-size: 12px; font-weight: 600; color: var(--primary-color); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
.empty-chat-state { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-sub); gap: 12px; }
.empty-icons { display: flex; gap: -10px; }
.empty-avatar { width: 64px; height: 64px; border-radius: 50%; background: #E0E2E7; display: flex; justify-content: center; align-items: center; font-size: 28px; border: 3px solid var(--card-bg); }

/* 공지 (Pin) 바 스타일 */
.pinned-msg-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--card-bg); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.02); z-index: 4; cursor: pointer; transition: background 0.2s; }
.pinned-msg-bar:hover { background: var(--bg-color); }
.pinned-icon { font-size: 16px; }
.pinned-text { flex: 1; font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; pointer-events: none; }
.btn-pinned-opts { background: none; border: none; font-size: 18px; color: var(--text-sub); cursor: pointer; padding: 0 4px; }

/* 채팅 뷰 */
.chat-messages { flex: 1; padding: 24px; overflow-y: auto; overflow-anchor:none; display: flex; flex-direction: column; gap: 8px; }
.message-wrapper { display: flex; flex-direction: column; max-width: 75%; position: relative; transition: background-color 0.8s ease; border-radius: 8px; padding: 2px 4px; width: fit-content; }
.message-wrapper.my-msg { align-self: flex-end; align-items: flex-end; }
.message-wrapper.other-msg { align-self: flex-start; align-items: flex-start; }
.msg-sender-box { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; margin-top: 8px; }
.msg-sender { font-size: 12px; color: var(--text-sub); font-weight: 600; pointer-events: none; }
.msg-bubble { padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; cursor: pointer; position: relative; z-index: 2; user-select: none; -webkit-user-select: none; pointer-events: auto; }
.msg-bubble a { color: #3182F6; text-decoration: underline; word-break: break-all; pointer-events: auto; }
.my-msg .msg-bubble { background: var(--my-msg-bg); color: var(--my-msg-color); border-bottom-right-radius: 4px; }
.my-msg .msg-bubble a { color: #82B3F9; }
.other-msg .msg-bubble { background: var(--other-msg-bg); color: var(--text-main); border-bottom-left-radius: 4px; }

.msg-reply-box { font-size: 12px; padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; display: block; text-decoration: none !important; pointer-events: none; }
.my-msg .msg-reply-box { background: rgba(0, 0, 0, 0.15); border-left: 3px solid rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); }
.other-msg .msg-reply-box { background: rgba(0, 0, 0, 0.05); border-left: 3px solid rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.6); }

.date-divider { align-self: center; background: rgba(0,0,0,0.1); color: var(--text-main); font-size: 11px; padding: 4px 12px; border-radius: 12px; margin: 16px 0; font-weight: 600; opacity: 0.6; pointer-events: none; }

.msg-media { max-width: 220px; max-height: 280px; object-fit: contain; border-radius: 12px; margin-top: 6px; cursor: pointer; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; pointer-events: auto; }
.msg-video-thumb { position: relative; display: inline-block; cursor: pointer; margin-top: 6px; pointer-events: auto; border: none !important; outline: none !important; background: transparent !important; }
.play-icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; background: rgba(0,0,0,0.5); border-radius: 50%; padding: 8px 12px; color: #FFF; pointer-events: none; }

.msg-meta { font-size: 10px; color: var(--text-sub); margin-top: 4px; display: flex; gap: 4px; align-items: center; z-index: 1; pointer-events: none; }
.reaction-bar { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; z-index: 3; position: relative; pointer-events: auto; }
.reaction-badge { font-size: 11px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 2px 7px; cursor: pointer; display: flex; align-items: center; gap: 3px; }
.reaction-badge.active { background: #EBF2FE; border-color: #3182F6; color: #3182F6; }

.btn-scroll-bottom { display:none; position:absolute; bottom:82px; right:20px; min-width:94px; height:38px; padding:0 13px; gap:5px; border-radius:19px; background:var(--card-bg); border:1px solid var(--border-color); box-shadow:0 5px 16px rgba(0,0,0,.14); font-size:12px; font-weight:700; color:var(--text-main); justify-content:center; align-items:center; cursor:pointer; z-index:20; transition:transform .2s,opacity .2s; }
.btn-scroll-bottom:hover { transform: translateY(-2px); }
.btn-scroll-bottom.has-new::after { content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: #FF3B30; border-radius: 50%; border: 2px solid var(--card-bg); }
.message-wrapper.pending-message { opacity:.58; }
.delivery-state { font-weight:700; }
.delivery-state.failed { color:#ff453a; pointer-events:auto; cursor:pointer; border:0; background:transparent; padding:0; font:inherit; }
.chat-attachment-preview { display:flex; align-items:center; gap:10px; margin:8px 16px 0; padding:9px 10px; border:1px solid var(--border-color); border-radius:12px; background:var(--card-bg); }
.chat-attachment-preview[hidden] { display:none; }
.chat-attachment-thumb { width:42px; height:42px; flex:0 0 42px; border-radius:8px; background:var(--other-msg-bg) center/cover no-repeat; display:grid; place-items:center; overflow:hidden; }
.chat-attachment-thumb video { width:100%; height:100%; object-fit:cover; }
.chat-attachment-info { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.chat-attachment-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.chat-attachment-info span { color:var(--text-sub); font-size:10px; }
.chat-attachment-preview button { width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--text-sub); cursor:pointer; }
.chat-input-wrap { position:relative; }
.chat-mention-suggestions { display:none; position:absolute; left:0; right:0; bottom:calc(100% + 7px); max-height:190px; overflow:auto; padding:5px; border:1px solid var(--border-color); border-radius:12px; background:var(--card-bg); box-shadow:0 10px 28px rgba(0,0,0,.16); z-index:45; }
.chat-mention-suggestions.show { display:grid; }
.chat-mention-option { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:38px; padding:7px 9px; border:0; border-radius:8px; background:transparent; color:var(--text-main); cursor:pointer; text-align:left; }
.chat-mention-option:hover,.chat-mention-option:focus-visible { background:var(--bg-color); outline:none; }
.chat-mention-option small { color:var(--text-sub); }
.global-chat-drop-overlay { display:none; position:absolute; inset:10px; z-index:760; place-content:center; justify-items:center; gap:5px; border:2px dashed var(--primary-color); border-radius:14px; background:color-mix(in srgb,var(--card-bg) 92%,transparent); color:var(--text-main); pointer-events:none; }
.global-chat-drop-overlay.active { display:grid; }
.global-chat-drop-overlay span { color:var(--text-sub); font-size:12px; }

.reply-preview-bar { display: none; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--other-msg-bg); border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-sub); }
.chat-input-area { padding: 14px 16px; border-top: 1px solid var(--border-color); background: var(--card-bg); display: flex; align-items: flex-end; gap: 10px; }
.chat-input-wrap { flex:1; position:relative; min-width:0; }
.chat-input-wrap textarea { width:100%; }
.chat-char-count { position:absolute; right:12px; bottom:7px; color:var(--text-placeholder); font-size:10px; pointer-events:none; }
.connection-banner { display:none; padding:7px 16px; text-align:center; background:#fff4d6; color:#7a5b00; border-top:1px solid #f0d98a; font-size:11px; }
[data-theme="dark"] .connection-banner { background:#3a3018; color:#f1cf73; border-color:#5b4a20; }
.btn-attach { background: none; border: none; font-size: 20px; color: var(--text-sub); cursor: pointer; padding: 8px; border-radius: 50%; }
.btn-attach:hover { background: #F4F5F7; }
.chat-input-area textarea { flex:1; height:44px; padding:11px 72px 11px 16px; border-radius:20px; border:1px solid var(--border-color); background:var(--bg-color); font-size:14px; line-height:20px; outline:none; resize:none; min-height:44px; max-height:120px; font-family:var(--font-main); color:var(--text-main); }
.chat-input-area textarea { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; pointer-events:auto; touch-action:manipulation; -webkit-user-select:text; user-select:text; }
.chat-input-area textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.btn-send { padding: 10px 20px; background: var(--primary-color); color: #FFF; border: none; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; height: 44px; }

/* 다크모드 호환 에디터 스타일 */
.rich-editor-container { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: visible; margin-bottom: 10px; background: var(--card-bg); position: relative; }
.rich-editor-toolbar { padding: 8px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); display: flex; gap: 6px; }
.rich-editor-toolbar button { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-main); transition: background 0.2s, color 0.2s; }
.rich-editor-toolbar button:hover { background: var(--border-color); }
.rich-editor-toolbar button.active-format { background: var(--primary-color) !important; color: #FFF !important; border-color: var(--primary-color) !important; }
.rich-editor-toolbar select { border: 1px solid var(--border-color); border-radius: 4px; padding: 3px 6px; font-size: 12px; background: var(--card-bg); color: var(--text-main); outline:none;}
#postFontSelect { min-width: 106px; }
.font-size-control { display:grid; grid-template-columns:28px 34px 18px 28px; align-items:center; width:108px; height:30px; overflow:hidden; border:1px solid var(--border-color); border-radius:6px; background:var(--card-bg); color:var(--text-sub); }
.font-size-control input { width:34px; min-width:34px; height:100%; padding:0; border:0; outline:0; background:transparent !important; color:var(--text-main); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; }
.font-size-control input::-webkit-inner-spin-button, .font-size-control input::-webkit-outer-spin-button { margin:0; appearance:none; -webkit-appearance:none; }
.font-size-control span { width:18px; padding:0; font-size:11px; text-align:left; pointer-events:none; }
.font-size-control button { width:28px; height:100%; padding:0; border:0; border-radius:0; background:transparent; color:var(--text-main); cursor:pointer; font-size:16px; font-weight:500; }
.font-size-control button:hover { background:var(--bg-color); }
[data-theme="dark"] .font-size-control, [data-theme="dark"] .font-size-control input, [data-theme="dark"] .font-size-control button { background:#2A2A2A !important; }
[data-theme="dark"] .font-size-control button:hover { background:#353535 !important; }
#postFontSelect option[value="Pretendard"] { font-family: 'Pretendard', sans-serif; }
.rich-editor-content font[face="Pretendard"], .post-content font[face="Pretendard"] { font-family: 'Pretendard', sans-serif; }
.rich-editor-content font[face="JejuAirFlightSans"], .post-content font[face="JejuAirFlightSans"] { font-family: 'JejuAirFlightSans', sans-serif; }
.rich-editor-content { min-height: 90px; padding: 12px; font-size: 14px; outline: none; color: var(--text-main); font-family: var(--font-main); background: var(--card-bg); white-space: pre-wrap; word-wrap: break-word; }
.rich-editor-content[placeholder]:empty:before { content: attr(placeholder); color: var(--text-placeholder); cursor: text; }
.mention-suggestions { display: none; position: absolute; left: 10px; right: 10px; top: calc(100% - 4px); z-index: 40; padding: 6px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); }
.mention-suggestions.show { display: grid; }
.mention-suggestions-label { padding: 6px 10px 7px; color: var(--text-sub); font-size: 11px; font-weight: 700; }
.mention-suggestion { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 9px; border: 0; border-radius: 8px; color: var(--text-main); background: transparent; text-align: left; cursor: pointer; }
.mention-suggestion:hover, .mention-suggestion:focus-visible { background: var(--bg-color); outline: 2px solid color-mix(in srgb, var(--primary-color) 28%, transparent); outline-offset: -2px; }
.mention-avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
.mention-user-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.mention-user-info strong { overflow: hidden; color: var(--text-main); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mention-user-info span { overflow: hidden; color: var(--text-sub); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mention-insert-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--bg-color); color: var(--primary-color); font-size: 13px; font-weight: 800; }
.site-confirm-box { max-width: 360px; text-align: center; }
.site-confirm-icon { display: grid; width: 44px; height: 44px; margin: 0 auto 12px; place-items: center; border-radius: 50%; background: var(--other-msg-bg); font-size: 20px; }

/* 맞춤법 추천 배지 */
.spell-check-bar { display: none; align-items: center; justify-content: space-between; font-size: 12px; padding: 8px 12px; background: #EBF2FE; color: #3182F6; border-radius: 8px; margin-bottom: 10px; border: 1px solid #BEE3F8; }
[data-theme="dark"] .spell-check-bar { background: #1A3A5F; color: #90CDF4; border-color: #2B6CB0; }
.spell-check-btn { background: #3182F6; color: #FFF; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 11px; font-weight: bold; }
.spell-check-btn:hover { background: #2B6CB0; }

/* 예약 발행 설정 영역 */
.reservation-box { display: flex; flex-direction: column; gap: 6px; background: var(--bg-color); padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 10px; font-size: 12px; color: var(--text-sub); }
.reservation-toggle-label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:36px; width:100%; cursor:pointer; text-align:center; user-select:none; }
.reservation-toggle-label input { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--primary-color); }
.reservation-toggle-label span { display:inline-flex; align-items:center; justify-content:center; line-height:1.3; }
.reservation-inputs { display: flex; gap: 6px; flex-wrap: wrap; }
.reservation-inputs select, .reservation-inputs input { padding: 6px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font-size: 12px; outline: none; }

.link-preview-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-color); text-decoration: none !important; margin-top: 8px; transition: background 0.2s; }
.link-preview-card:hover { background: var(--border-color); }
.link-preview-icon { font-size: 24px; }
.link-preview-info { display: flex; flex-direction: column; overflow: hidden; }
.link-preview-title { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-preview-url { font-size: 11px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.sub-container { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.friend-req-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 14px 18px; border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.friend-search-box { display: flex; gap: 8px; background: var(--card-bg); padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.admin-manual-ban-box { padding:10px 12px; border:1px solid var(--border-color); border-radius:14px; background:var(--card-bg); gap:10px; overflow:hidden; }
.admin-manual-ban-box #manualBanTargetId,
[data-theme="dark"] .admin-manual-ban-box #manualBanTargetId { min-width:0; padding:8px 4px; border:0 !important; border-radius:0; outline:0; background:transparent !important; box-shadow:none !important; }
.friend-search-box input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: var(--text-main); }
.friend-search-box:not(.admin-manual-ban-box) input,
[data-theme="dark"] .friend-search-box:not(.admin-manual-ban-box) input { background:transparent !important; box-shadow:none !important; }
.friend-list { display: flex; flex-direction: column; gap: 10px; }
.friend-card { background: var(--card-bg); padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.friend-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.btn-send:disabled { opacity:.65; cursor:wait; }
.invite-user-list { display:flex; flex-direction:column; gap:8px; max-height:240px; overflow-y:auto; }
.invite-user-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-color); cursor:pointer; }
.invite-user-item:hover { border-color:var(--primary-color); }
.invite-user-item input { appearance:none; width:20px; height:20px; border:2px solid var(--border-color); border-radius:7px; background:var(--card-bg); position:relative; cursor:pointer; flex-shrink:0; }
.invite-user-item input:checked { background:var(--primary-color); border-color:var(--primary-color); }
.invite-user-item input:checked::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; }
.invite-user-item:has(input:checked) { border-color:var(--primary-color); background:color-mix(in srgb,var(--primary-color) 8%,var(--card-bg)); }
.friend-left-group { display: flex; align-items: center; gap: 10px; }
.friend-info-text { display: flex; flex-direction: column; gap: 2px; }
.friend-name { font-size: 14px; font-weight: 700; }
.friend-actions { display: flex; gap: 6px; }

.post-card, .mail-card, .report-card, .feedback-card, .banned-card { background: var(--card-bg); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.02); position: relative; }
.post-card { touch-action: manipulation; }
.btn-mail-delete { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 18px; color: var(--text-sub); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.btn-mail-delete:hover { color: #FF3B30; }

.feedback-card .card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.btn-feedback-del { background: none; border: none; font-size: 16px; color: var(--text-placeholder); cursor: pointer; margin-left: 8px; transition: color 0.2s; }
.btn-feedback-del:hover { color: #FF3B30; }

.post-header, .card-header { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; }
.post-author, .card-title { font-size: 14px; font-weight: 700; color: var(--primary-color); }
.post-date, .card-date { font-size: 11px; color: var(--text-sub); }
.post-content, .card-body { font-size: 14px; line-height: 1.55; color: var(--text-main); margin-bottom: 12px; word-break: break-word; }
.user-mention { color: var(--primary-color); font-weight: 700; }
.post-like-burst { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; font-size: 72px; opacity: 0; transform: scale(0.35); pointer-events: none; }
.post-like-burst.show { animation: post-like-pop 700ms cubic-bezier(.2,.8,.2,1); }
@keyframes post-like-pop { 0% { opacity: 0; transform: scale(.35); } 24% { opacity: 1; transform: scale(1.12); } 55% { opacity: 1; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .post-like-burst.show { animation-duration: 1ms; } }
.post-img { width: 100%; max-height: 300px; object-fit: contain; background: var(--bg-color); border-radius: 12px; margin-top: 8px; border: 1px solid var(--border-color); display: block; cursor: pointer; }

.admin-post-form { background: var(--bg-color); border: 1px solid var(--border-color); padding: 18px; border-radius: var(--radius-md); margin-bottom: 8px; }
.post-title-input { width:100%; min-height:42px; margin-bottom:10px; padding:10px 12px; box-sizing:border-box; border:1px solid var(--border-color); border-radius:8px; outline:none; background:var(--card-bg); color:var(--text-main); font:600 14px/1.4 var(--font-main); }
.post-title-input:focus { border-color:var(--primary-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 12%,transparent); }
.post-title { margin:2px 0 10px; color:var(--text-main); font-size:17px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.post-media-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.post-media-inputs input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 13px; outline: none; background: var(--card-bg); color: var(--text-main); }
.btn-post-upload { width: 100%; padding: 12px; background-color: #8B95A1; color: #FFFFFF; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }

.drop-zone { border: 2px dashed #D0D5DD; border-radius: var(--radius-md); padding: 20px; text-align: center; background: var(--bg-color); cursor: pointer; margin-bottom: 12px; }
.drop-zone-text { font-size: 13px; color: var(--text-sub); }
.profile-avatar-picker { display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:14px; }
.profile-avatar-button { position:relative; width:104px; height:104px; padding:2px; border:2px solid var(--border-color); border-radius:50%; background:var(--card-bg); cursor:pointer; transition:border-color .2s ease,transform .16s ease,box-shadow .2s ease; }
.profile-avatar-button:hover { border-color:var(--primary-color); box-shadow:0 6px 18px rgba(0,0,0,.1); }
.profile-avatar-button:active { transform:scale(.98); }
.profile-avatar-button:focus-visible { outline:3px solid color-mix(in srgb,var(--primary-color) 24%,transparent); outline-offset:3px; }
.profile-preview-avatar { width:96px; height:96px; margin:0; font-size:34px; }
.profile-avatar-edit { position:absolute; right:1px; bottom:4px; display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--card-bg); border-radius:50%; background:var(--primary-color); color:#fff; font-size:18px; line-height:1; }
.profile-photo-hint { color:var(--text-placeholder); font-size:11px; line-height:1.4; }
.profile-image-reset { min-height:28px; padding:3px 8px; border:0; border-radius:7px; background:transparent; color:var(--text-sub); font-size:11px; cursor:pointer; }
.profile-image-reset:hover { background:var(--bg-color); color:var(--text-main); }
.profile-id-input[readonly] { background:var(--other-msg-bg); color:var(--text-sub); cursor:not-allowed; }
.profile-id-input.admin-editable { background:var(--card-bg); color:var(--text-main); cursor:text; }
.profile-field-hint { display:block; margin-top:6px; color:var(--text-placeholder); font-size:11px; line-height:1.45; }

.admin-panel-section { margin-bottom:26px; }
.admin-panel-section[hidden] { display:none; }
.admin-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.admin-section-heading > div { min-width:0; }
.admin-section-heading strong { display:block; font-size:16px; color:var(--text-main); }
.admin-section-heading span { display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--text-sub); }
.admin-private-label { flex:0 0 auto; margin:0 !important; padding:5px 8px; border:1px solid var(--border-color); border-radius:999px; background:var(--bg-color); font-size:10px !important; font-weight:700; color:var(--text-sub) !important; }
.admin-memo-section { padding:16px; border:1px solid var(--border-color); border-radius:12px; background:var(--card-bg); }
.admin-memo-editor { padding:0; border:0; background:transparent; }
.admin-memo-editor:focus-within { border-color:transparent; box-shadow:none; }
.admin-memo-editor textarea { display:block; width:100%; min-height:84px; max-height:220px; resize:vertical; padding:12px 14px; border:1px solid var(--border-color); border-radius:10px; outline:0; background:var(--bg-color); color:var(--text-main); font:400 13px/1.6 var(--font-main); transition:border-color .18s,box-shadow .18s; }
.admin-memo-editor textarea:focus { border-color:var(--primary-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 12%,transparent); }
.admin-memo-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.admin-memo-editor-footer > span { color:var(--text-placeholder); font-size:10px; }
.admin-memo-editor-actions { display:flex; gap:6px; }
.admin-memo-save { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.admin-memo-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:12px; }
.admin-memo-card { position:relative; min-width:0; padding:14px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-color); overflow:hidden; }
.admin-memo-card.is-pinned { border-color:color-mix(in srgb,var(--primary-color) 42%,var(--border-color)); box-shadow:inset 3px 0 0 var(--primary-color); }
.admin-memo-pinned-label { display:inline-flex; align-items:center; min-height:22px; margin-bottom:8px; padding:0 7px; border-radius:999px; background:color-mix(in srgb,var(--primary-color) 11%,var(--card-bg)); color:var(--primary-color); font-size:10px; font-weight:700; }
.admin-memo-content { min-height:42px; margin:0 0 12px; color:var(--text-main); font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-memo-meta { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.admin-memo-author { min-width:0; color:var(--text-sub); font-size:10px; line-height:1.5; }
.admin-memo-actions { display:flex; flex:0 0 auto; gap:4px; }
.admin-memo-actions button { min-width:34px; height:28px; padding:0 7px; border:1px solid var(--border-color); border-radius:7px; background:var(--card-bg); color:var(--text-sub); font:600 11px var(--font-main); cursor:pointer; }
.admin-memo-actions button.active { border-color:color-mix(in srgb,var(--primary-color) 45%,var(--border-color)); color:var(--primary-color); }
.admin-memo-actions .danger { color:#FF3B30; }
.admin-memo-empty { grid-column:1/-1; padding:22px 12px; text-align:center; color:var(--text-sub); font-size:12px; }
.admin-section-heading > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.admin-section-heading strong { font-size:16px; color:var(--text-main); }
.admin-section-heading span { color:var(--text-sub); font-size:12px; line-height:1.45; }
.admin-role-list { display:grid; gap:8px; }
.admin-role-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); }
.admin-role-person { display:flex; flex-direction:column; gap:3px; min-width:0; }
.admin-role-person strong { font-size:13px; color:var(--text-main); }
.admin-role-person small { color:var(--text-sub); font-size:11px; }
.admin-role-permissions { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.admin-role-chip { padding:2px 6px; border-radius:5px; background:var(--other-msg-bg); color:var(--text-sub); font-size:10px; }
.admin-role-actions { display:flex; gap:6px; flex-shrink:0; }
.admin-role-modal-box { width:min(460px,calc(100vw - 28px)); }
.admin-role-search { display:flex; gap:8px; margin:14px 0 10px; }
.admin-role-search .form-select { flex:1; margin:0; }
.admin-role-search .btn-sm { padding-inline:16px; background:var(--primary-color); color:#fff; }
.admin-role-user-preview { padding:11px 12px; margin-bottom:12px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-color); color:var(--text-main); font-size:13px; line-height:1.5; }
.admin-permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; padding:0; border:0; }
.admin-permission-grid legend { width:100%; margin-bottom:8px; color:var(--text-sub); font-size:12px; font-weight:700; }
.admin-permission-grid label { display:flex; align-items:flex-start; gap:8px; min-height:58px; padding:10px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); cursor:pointer; }
.admin-permission-grid label:has(input:checked) { border-color:var(--primary-color); background:color-mix(in srgb,var(--primary-color) 8%,var(--card-bg)); }
.admin-permission-grid input { margin-top:2px; accent-color:var(--primary-color); }
.admin-permission-grid span { display:flex; flex-direction:column; gap:2px; }
.admin-permission-grid strong { font-size:12px; color:var(--text-main); }
.admin-permission-grid small { font-size:10px; line-height:1.35; color:var(--text-sub); }
.admin-permission-grid:disabled { opacity:.55; }
#btnSaveAdminRole { background:var(--primary-color); color:#fff; }
#btnSaveAdminRole:disabled { background:var(--other-msg-bg); color:var(--text-placeholder); cursor:not-allowed; }

@media (max-width: 520px) {
  #settingsModal { padding:12px; align-items:center; }
  #settingsModal .modal-box { width:100%; max-width:none; height:100%; max-height:100%; border-radius:16px; }
  .settings-scroll-content { padding:18px; }
  .admin-section-heading,.admin-role-card { align-items:flex-start; flex-direction:column; }
  .admin-role-actions { width:100%; }
  .admin-role-actions .btn-sm { flex:1; }
  .admin-permission-grid { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
  .admin-memo-section { padding:13px; border-radius:10px; }
  .admin-memo-list { grid-template-columns:1fr; }
  .admin-memo-card { padding:13px; }
  .admin-memo-meta { align-items:flex-start; flex-direction:column; }
  .admin-memo-actions { width:100%; justify-content:flex-end; flex-wrap:wrap; }
  .admin-memo-actions button { min-width:58px; min-height:34px; }
  .admin-memo-editor-footer { align-items:flex-end; flex-direction:column; }
  .admin-memo-editor-actions { width:100%; }
  .admin-memo-editor-actions button { flex:1; min-height:38px; }
  .admin-section-heading { align-items:flex-start; }
  html { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
  body { position:fixed; top:var(--app-top,0px); right:0; bottom:auto; left:0; width:100%; min-height:var(--app-height,100dvh); height:var(--app-height,100dvh); padding:0; align-items:stretch; overflow:hidden; overscroll-behavior:none; }
  .app-container { width:100%; height:var(--app-height,100dvh); min-height:0; max-height:none; border:0; border-radius:0; }
  .auth-screen.keyboard-open { justify-content:flex-start; overflow-y:auto; padding-top:20px; padding-bottom:16px; overscroll-behavior:contain; }
  .auth-screen.keyboard-open .auth-password-note { position:static; width:auto; max-width:100%; margin:22px auto 0; transform:none; white-space:normal; }
  .main-screen,.tab-content,.chat-layout,.chat-main,.chat-sidebar,.chat-list,.chat-messages { min-height:0; }
  .app-header { flex:0 0 auto; min-height:calc(58px + env(safe-area-inset-top)); padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); gap:10px; }
  .header-user-info { min-width:0; gap:9px; font-size:14px; }
  #userInfo { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-header .avatar-img { width:38px; height:38px; flex:0 0 38px; }
  .btn-settings { width:40px; height:40px; flex:0 0 40px; }
  .tab-nav { flex:0 0 auto; min-height:52px; }
  .tab-btn { min-width:48px; padding:10px 6px; gap:4px; }
  .chat-search-bar { flex:0 0 auto; padding:10px 14px; }
  .chat-search-bar input { min-height:42px; }
  .chat-list { overscroll-behavior:contain; }
  .chat-item { padding:12px 16px; gap:10px; }
  .chat-item .avatar-img { width:44px; height:44px; flex:0 0 44px; }
  .chat-item-info { min-width:0; }
  .chat-item-name,.chat-item-preview { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-footer { flex:0 0 auto; padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); gap:8px; }
  .sidebar-footer button { min-width:0; min-height:40px; padding-inline:8px; }
  .chat-layout:not(.mobile-room-open) .chat-sidebar { flex:1; height:100%; max-height:none; min-height:0; }
  .chat-layout:not(.mobile-room-open) .chat-main { display:none; }
  .chat-layout.mobile-room-open .chat-sidebar { display:none; }
  .chat-layout.mobile-room-open .chat-main { display:flex; height:100%; overflow:hidden; }
  .chat-layout.mobile-room-open #btnShowMembers,
  .chat-layout.mobile-room-open #btnInviteMember { display:none !important; }
  .chat-layout.mobile-room-open .room-header { flex-shrink:0; padding:10px 14px; }
  .chat-layout.mobile-room-open .btn-back-chat-list { display:inline-grid; place-items:center; }
  .chat-messages { padding:16px 12px; overscroll-behavior:contain; }
  .chat-input-area { flex-shrink:0; padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); gap:7px; }
  .chat-input-area textarea { font-size:16px; }
  .btn-attach { padding:8px 5px; }
  .btn-send { padding:10px 16px; }
  .modal-overlay { position:fixed; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body { padding:8px; }
  .app-container { width:100%; max-width:none; height:calc(100dvh - 16px); max-height:none; border-radius:14px; }
  .chat-sidebar { width:clamp(260px,36vw,330px); }
  .app-header { padding:14px 18px; }
  .tab-btn { padding-inline:10px; }
  .sub-container { padding:22px; }
}
@media (max-width: 767px) and (orientation: landscape) {
  .app-header { min-height:50px; padding-top:6px; padding-bottom:6px; }
  .app-header .avatar-img { width:34px; height:34px; flex-basis:34px; }
  .tab-nav { min-height:44px; }
  .tab-btn { padding-top:7px; padding-bottom:7px; }
}
@media (max-width: 520px) {
  .auth-password-note { bottom:max(12px,env(safe-area-inset-bottom)); font-size:9px; }
  .sub-container { padding:18px 14px; }
  .friend-card,.friend-req-card { padding:12px 14px; }
  .friend-card { align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .friend-left-group { min-width:0; }
  .friend-actions { width:100%; justify-content:flex-end; }
}
@media (max-width: 340px) { .auth-password-note { font-size:8.75px; } }
@media (max-width: 360px) {
  .chat-input-area { gap:5px; }
  .chat-input-area textarea { padding-right:58px; }
  .btn-send { min-width:58px; padding-inline:12px; }
  .sidebar-footer button { font-size:11px; }
}
.preview-media-card { position: relative; margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-color); text-align: center; }
.preview-media-card img { max-width: 100%; max-height: 280px; object-fit: contain; display: block; margin: 0 auto; }
.position-controls { display: flex; gap: 12px; background: var(--bg-color); padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 12px; align-items: center; }
.position-controls label { font-size: 12px; font-weight: 600; color: var(--text-sub); }
.position-controls input[type="range"] { flex: 1; accent-color: var(--primary-color); cursor: pointer; }

/* 컨텍스트 메뉴 스타일 */
.context-menu { display: none; position: absolute; background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: 0 8px 28px rgba(0,0,0,0.18); border-radius: var(--radius-md); z-index: 2000; width: 180px; overflow: hidden; }
.context-menu button { width: 100%; padding: 12px 14px; text-align: left; background: none; border: none; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text-main); font-weight: 600; }
.context-menu button:hover { background-color: var(--bg-color); }
.context-menu button.danger { color: #FF3B30; }
.room-context-menu { position:fixed; width:190px; }
.chat-item.room-pinned::after { content:'📌'; position:absolute; right:12px; top:12px; font-size:10px; }
.room-muted-icon { flex:none; margin-left:5px; font-size:11px; line-height:1; opacity:.72; }
.msg-bubble code { padding:2px 5px; border-radius:4px; background:rgba(127,127,127,.16); font-family:Consolas,monospace; font-size:.92em; }
.emoji-selector { display: flex; justify-content: space-around; padding: 10px; border-bottom: 1px solid var(--border-color); background: var(--bg-color); }
.emoji-selector span { cursor: pointer; font-size: 20px; transition: transform 0.2s; }
.emoji-selector span:hover { transform: scale(1.2); }
.custom-reaction-button { width:24px !important; min-width:24px; height:24px; padding:0 !important; justify-content:center; border:1px solid var(--border-color) !important; border-radius:50%; font-size:17px !important; line-height:1; color:var(--text-sub) !important; }
.custom-reaction-button:hover { color:var(--primary-color) !important; border-color:var(--primary-color) !important; }
.custom-reaction-modal .form-select { width:100%; margin:14px 0 4px; font-size:22px; text-align:center; }
.edit-bar { display: none; padding: 8px 16px; background: var(--other-msg-bg); font-size: 12px; justify-content: space-between; align-items: center; color: var(--text-sub); }

.banned-card { padding: 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

@keyframes highlight-pulse { 0% { background-color: rgba(49, 130, 246, 0.4); } 100% { background-color: transparent; } }
.highlight-anim { animation: highlight-pulse 2s ease-out forwards; }
/* 최고 관리자 점검 모드 */
.service-unavailable-overlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,17,20,.78);background:color-mix(in srgb,var(--bg-color) 72%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.service-unavailable-overlay[hidden]{display:none}
#serviceAuthModal{position:fixed;z-index:5100}
#serviceAuthModal .modal-box{isolation:isolate;background:var(--container-bg);box-shadow:0 22px 70px rgba(0,0,0,.32)}
.service-unavailable-overlay.auth-open .service-unavailable-panel{visibility:hidden;opacity:0;transform:scale(.98)}
.service-unavailable-panel{width:min(460px,100%);padding:32px 28px;text-align:center;border:1px solid var(--border-color);border-radius:20px;background:var(--container-bg);box-shadow:0 20px 60px rgba(0,0,0,.18)}
.service-unavailable-icon{font-size:30px;margin-bottom:12px}.service-unavailable-panel h1{font-size:22px;margin:0 0 10px;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}.service-unavailable-panel p{max-width:370px;margin:0 auto 22px;color:var(--text-sub);line-height:1.7;white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}.service-unavailable-panel button{margin:4px auto;min-width:180px}.service-auth-modal-box .input-wrapper{margin:14px 0 4px}.service-reason-group{position:relative;margin-top:18px;text-align:left}.service-reason-group label{display:block;margin:10px 0 7px;font-size:13px;font-weight:700}.service-reason-group .form-select{padding:11px 13px}.service-reason-group textarea{min-height:88px;resize:vertical;padding-bottom:26px;line-height:1.55;word-break:keep-all;overflow-wrap:break-word}.service-reason-group>span{position:absolute;right:10px;bottom:9px;color:var(--text-sub);font-size:11px}.service-control-section{border-color:color-mix(in srgb,#ff453a 32%,var(--border-color))}.service-status-badge{padding:5px 9px;border-radius:999px;background:#e8f8ee;color:#168342;font-size:12px;font-weight:700}.service-status-badge.offline{background:#fff0ef;color:#d92d20}.service-control-note{margin:10px 0 0;color:var(--text-sub);font-size:12px}
@media(max-width:767px){.service-unavailable-overlay{padding:18px}.service-unavailable-panel{padding:28px 20px;border-radius:16px}.service-unavailable-panel h1{font-size:20px}}