/* support.css */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f6fa;color:#1a1a2e;font-size:15px;min-height:100vh;}

/* 헤더 */
.app-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fff;border-bottom:1px solid #e8e8f0;position:sticky;top:0;z-index:10;}
.app-header h1{font-size:17px;font-weight:700;flex:1;}
.btn-back{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;color:#555;font-size:20px;padding:0;}
.btn-back:active{opacity:.6;}
.btn-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:#4A90D9;font-size:22px;padding:0;}
.btn-icon:active{opacity:.6;}

/* 화면 전환 */
.screen{display:none;min-height:calc(100vh - 53px);}
.screen.active{display:block;}

/* ─── 목록 화면 ─── */
#screen-list{}
.ticket-list{padding:12px;}
.ticket-card{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;border:1px solid #ebebf5;transition:box-shadow .15s;}
.ticket-card:active{box-shadow:0 0 0 2px #4A90D9;background:#f0f6ff;}
.ticket-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ticket-subject{font-size:15px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-open{background:#e8f4ff;color:#1565C0;}
.badge-in_progress{background:#fff8e1;color:#F57F17;}
.badge-resolved{background:#e8f5e9;color:#2E7D32;}
.badge-closed{background:#f3f3f3;color:#757575;}
.ticket-meta{font-size:12px;color:#888;display:flex;gap:8px;align-items:center;}
.ticket-meta .cat{background:#f0f0f8;color:#5c5c8a;padding:2px 7px;border-radius:10px;font-size:11px;}
.reply-badge{display:flex;align-items:center;gap:3px;color:#4A90D9;font-size:12px;font-weight:600;}

.empty-state{text-align:center;padding:60px 20px;color:#aaa;}
.empty-state .icon{font-size:48px;margin-bottom:16px;}
.empty-state p{font-size:14px;line-height:1.6;}

/* 플로팅 버튼 */
.fab{position:fixed;bottom:24px;right:20px;width:54px;height:54px;border-radius:27px;background:#4A90D9;color:#fff;border:none;font-size:26px;cursor:pointer;box-shadow:0 4px 16px rgba(74,144,217,.4);display:flex;align-items:center;justify-content:center;z-index:9;}
.fab:active{transform:scale(.93);}

/* ─── 새 문의 화면 ─── */
#screen-new{padding:16px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#555;margin-bottom:6px;}
.form-group select,
.form-group input,
.form-group textarea{width:100%;border:1.5px solid #e0e0ee;border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;color:#1a1a2e;background:#fff;outline:none;transition:border-color .2s;}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus{border-color:#4A90D9;}
.form-group textarea{resize:vertical;min-height:140px;line-height:1.6;}
.btn-submit{width:100%;padding:14px;background:#4A90D9;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin-top:8px;}
.btn-submit:active{background:#357ABD;}
.btn-submit:disabled{background:#b0c8e8;cursor:not-allowed;}

/* ─── 상세 화면 ─── */
#screen-detail{padding:0 0 80px;}
.ticket-info-box{background:#fff;margin:12px;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.ticket-info-box .subject{font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.4;}
.ticket-info-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.ticket-info-row span{font-size:12px;color:#888;}
.ticket-body-text{font-size:14px;color:#333;line-height:1.7;white-space:pre-wrap;padding-top:12px;border-top:1px solid #f0f0f8;}

.replies-section{margin:0 12px;}
.reply-item{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.reply-item.admin{border-left:3px solid #4A90D9;}
.reply-item.user{border-left:3px solid #aad4a0;}
.reply-author{font-size:12px;font-weight:700;margin-bottom:6px;}
.reply-item.admin .reply-author{color:#4A90D9;}
.reply-item.user .reply-author{color:#3a8c3f;}
.reply-body{font-size:14px;color:#333;line-height:1.7;white-space:pre-wrap;}
.reply-time{font-size:11px;color:#bbb;margin-top:6px;text-align:right;}

.reply-input-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e8e8f0;padding:10px 12px;display:flex;gap:8px;align-items:flex-end;z-index:10;}
.reply-input-bar textarea{flex:1;border:1.5px solid #e0e0ee;border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;resize:none;min-height:42px;max-height:120px;outline:none;transition:border-color .2s;line-height:1.5;}
.reply-input-bar textarea:focus{border-color:#4A90D9;}
.btn-send{flex-shrink:0;width:42px;height:42px;border-radius:10px;background:#4A90D9;color:#fff;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.btn-send:active{background:#357ABD;}
.btn-send:disabled{background:#c0d8f0;cursor:not-allowed;}

/* 로딩/에러 */
.loading{text-align:center;padding:40px;color:#aaa;font-size:14px;}
.error-msg{margin:16px;padding:14px;background:#fff3f3;border-radius:10px;color:#c0392b;font-size:14px;border:1px solid #fcd4d4;}
.section-label{font-size:12px;font-weight:700;color:#aaa;padding:12px 16px 4px;text-transform:uppercase;letter-spacing:.5px;}

/* 구분선 */
.divider{height:1px;background:#f0f0f8;margin:0 12px 10px;}

/* 토스트 알림 */
.toast{position:fixed;top:62px;left:50%;transform:translateX(-50%);background:#1a1a2e;color:#fff;padding:10px 18px;border-radius:24px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:100;opacity:0;transition:opacity .3s;}
.toast.show{opacity:1;}

/* 새 답변 배너 */
.new-reply-banner{display:none;align-items:center;gap:10px;background:#e8f4ff;border-left:4px solid #4A90D9;padding:12px 16px;margin:10px 12px;border-radius:0 10px 10px 0;font-size:13px;color:#1565C0;font-weight:600;cursor:pointer;}
.new-reply-banner:active{background:#d0e8ff;}

/* ── 웹 모드 (브라우저 직접 접속) ── */
body.web-mode .app-header{display:none!important;}
body.web-mode .screen{min-height:calc(100vh - 70px);}
body.web-mode .toast{top:80px;}

/* ── 웹뷰 모드 (앱 내 webview) ── */
body.webview-mode nav,
body.webview-mode footer{display:none!important;}