/* 기본 레이아웃 */
body { margin: 0; padding: 0; background-color: #121212; color: white; font-family: 'Apple SD Gothic Neo', sans-serif; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
#app-container { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.panel { display: none; flex: 1; flex-direction: column; background: #121212; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; z-index: 20; overflow-y: auto; padding-bottom: 70px; }
.panel.active { display: flex; }
.panel-content { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.center-content { justify-content: center; align-items: center; text-align: center; }

/* 텍스트 & 유틸 클래스 */
.text-center { text-align: center; }
.text-bold { font-weight: bold; }
.text-white { color: white; }
.title-green { color: #00ff88; margin-bottom: 10px; }
.desc-gray { color: #888; font-size: 14px; margin-bottom: 30px; line-height: 1.5; }
.m-0 { margin: 0; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.font-bold { font-weight: bold; }
.font-18 { font-size: 18px; }
.hidden-ui { display: none; flex-direction: column; height: 100%; }

/* 애니메이션 */
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-15px); } }
.searching-loader { font-size: 40px; margin-bottom: 20px; animation: bounce 1s infinite alternate; }

/* 공통 폼 UI */
.auth-input { width: 100%; padding: 15px; border-radius: 12px; border: 1px solid #333; background: #1e1e1e; color: white; margin-bottom: 12px; font-size: 16px; outline: none; box-sizing: border-box; }
.auth-input:focus { border-color: #00ff88; }
.main-btn { width: 100%; padding: 16px; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; box-sizing: border-box; }
.main-btn:active { transform: scale(0.98); }
.btn-green { background: #00ff88; color: #000; margin-bottom: 15px; }
.btn-dark { background: #333; color: white; }
.btn-fail { color: #ff3d00; }
.btn-cancel { background: transparent; color: #888; border: 1px solid #444; margin-top: 10px; }
.toggle-btn { background: transparent; color: #888; text-decoration: underline; font-size: 14px; cursor: pointer; border: none; }

/* 팝업 */
#custom-alert { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; padding: 20px; backdrop-filter: blur(5px); }
.alert-box { background: #1e1e1e; border: 1px solid #333; border-radius: 16px; padding: 25px; width: 100%; max-width: 320px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.alert-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: white; }
.alert-title.error { color: #ff3d00; }
.alert-msg { font-size: 14px; color: #aaa; margin-bottom: 25px; line-height: 1.5; word-break: keep-all; }
.alert-btn { width: 100%; padding: 14px; border: none; border-radius: 8px; background: #333; color: white; font-weight: bold; cursor: pointer; }
.alert-btn.action { background: #00ff88; color: black; }

/* 로그인 뷰 */
#auth-panel, #reset-panel { justify-content: center; align-items: center; padding: 40px; z-index: 100; }
.auth-container { width: 100%; max-width: 320px; text-align: center; }
.auth-links { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.auth-links span { color: #888; font-size: 13px; cursor: pointer; }

/* 헤더 & 히스토리 */
header { padding: 15px; background: #1e1e1e; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; z-index: 50; }
.header-btn { background: #333; color: white; border: none; padding: 8px 12px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.btn-outline { background: transparent; border: 1px solid #555; margin-left: 5px; }
.history-header { padding: 15px; border-bottom: 1px solid #333; display: flex; align-items: center; gap: 15px; background: #1e1e1e; }
.btn-back { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }
.history-item { background: #1e1e1e; padding: 15px; border-radius: 10px; margin-bottom: 10px; border-left: 5px solid #333; }
.history-item.success { border-left-color: #00ff88; }
.history-item.fail { border-left-color: #ff3d00; }

/* 카메라 뷰 */
.camera-wrapper { flex: 1; position: relative; background: #000; }
#video, #captured-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
#captured-image { z-index: 11; }
.camera-controls { position: absolute; bottom: 30px; left: 0; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; z-index: 15; }
.btn-scan { background: #6200ea; color: white; margin: 0; }
.btn-manual { background: rgba(30, 30, 30, 0.9); color: white; border: 1px solid #444; backdrop-filter: blur(5px); margin: 0; }
.scanner-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 12; display: none; }
.scanner-line { width: 100%; height: 3px; background: #00ff88; box-shadow: 0 0 15px #00ff88; position: absolute; animation: scan 1.5s linear infinite; }
@keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }

/* 다중 선택 카드 */
.result-title { margin-top: 0; font-size: 18px; }
.candidate-card { background: #1e1e1e; padding: 12px; border-radius: 12px; border: 1px solid #333; cursor: pointer; margin-bottom: 10px; display: flex; align-items: center; gap: 15px; transition: 0.2s; }
.candidate-card:active { border-color: #00ff88; background: #2a2a2a; }
.candidate-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #000; }
.candidate-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; }
.candidate-name { font-weight: bold; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; }
.candidate-price { color: #00ff88; font-weight: bold; font-size: 16px; }

/* 설정 뷰 */
.setup-box { background: #1e1e1e; padding: 20px; border-radius: 15px; margin-bottom: 20px; text-align: center; }
.setup-item { font-size: 14px; margin-top: 0; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-price-label { font-size: 16px; margin-top: 15px; }
.highlight { color: #00ff88; font-weight: bold; }
.price-lg { font-size: 26px; }
.input-label { text-align: left; font-size: 13px; color: #aaa; margin-top: 25px; margin-bottom: 5px; }
.quick-btn-group { display: flex; gap: 5px; margin-bottom: 10px; }
.quick-btn { flex: 1; background: #333; color: white; border: none; padding: 10px 0; border-radius: 8px; font-size: 13px; cursor: pointer; }
.stepper-group { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px; }
.stepper-btn { background: #333; color: white; border: none; width: 45px; height: 45px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.stepper-input { width: 80px; margin-bottom: 0; text-align: center; font-size: 20px; font-weight: bold; }

/* 트래커 뷰 & 🚨 버튼 크기 픽스 */
.gauge-container { position: relative; width: 256px; height: 256px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.gauge-svg { position: absolute; inset: 0; }
.progress-ring-circle { transition: stroke-dashoffset 0.5s ease-in-out, stroke 0.5s ease-in-out; transform: rotate(-90deg); transform-origin: 50% 50%; }
.gauge-text { text-align: center; z-index: 10; }
.gauge-label { color: #aaa; font-size: 14px; margin: 0 0 5px 0; }
.gauge-value { font-size: 36px; font-weight: bold; margin: 0; }
.gauge-sub { color: #888; font-size: 12px; margin: 5px 0 0 0; }
.cost-per-play { text-align: center; color: #888; font-size: 14px; margin-bottom: 20px; width: 100%; }
.btn-huge { height: 80px; font-size: 24px; }

/* 이 부분이 성공/포기 버튼 크기를 완벽하게 동일하게 만듭니다 */
.action-btn-group { display: flex; gap: 10px; margin-top: 30px; width: 100%; box-sizing: border-box; }
.action-btn-group .main-btn { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }

/* --- V11.0 추가 CSS --- */
.history-tabs { display: flex; padding: 10px 20px; gap: 10px; background: #121212; border-bottom: 1px solid #333; }
.hist-tab { flex: 1; background: #1e1e1e; color: #888; border: 1px solid #333; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.hist-tab.active { background: #00ff88; color: #000; border-color: #00ff88; }

.hist-item { background: #1e1e1e; padding: 15px; border-radius: 12px; margin-bottom: 12px; display: flex; gap: 15px; align-items: center; border-left: 5px solid #333; }
.hist-item.success { border-left-color: #00ff88; }
.hist-item.fail { border-left-color: #ff3d00; }
.hist-img { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; background: #000; flex-shrink: 0; }
.hist-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hist-date { font-size: 11px; color: #888; margin-bottom: 5px; }
.hist-title { font-size: 15px; font-weight: bold; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-result { font-size: 14px; display: flex; justify-content: space-between; }