/* --- 기본 테마 설정 --- */
:root {
    --bg-color: #f3f4f6;
    --surface: #ffffff;
    --text-main: #111827;
    --text-muted: #6b7280;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --input-bg: #f9fafb;
    --border: #e5e7eb;
    --radius-lg: 20px;
    --radius-md: 12px;
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.03);
    --shadow-floating: 0 10px 25px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    line-height: 1.5;
    display: flex; 
    justify-content: center; 
    min-height: 100dvh; 
    padding: 20px 20px calc(env(safe-area-inset-bottom, 20px) + 40px) 20px;
}

.container { 
    width: 100%; 
    max-width: 480px; 
    margin: 0 auto;
}

/* --- 공통 UI 요소 --- */
.card { 
    background-color: var(--surface); 
    border-radius: var(--radius-lg); 
    box-shadow: var(--shadow-subtle); 
    padding: 24px; 
    margin-bottom: 20px; 
    border: 1px solid rgba(255,255,255,0.8);
}

h1, h2, h3 { color: var(--text-main); font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
p.desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; }

label { display: block; margin-bottom: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

input[type="text"], input[type="password"], input[type="number"], select, textarea { 
    width: 100%; 
    padding: 14px 16px; 
    background-color: var(--input-bg);
    border: 1px solid transparent; 
    border-radius: var(--radius-md); 
    font-size: 1rem; 
    color: var(--text-main);
    margin-bottom: 16px; 
    transition: all 0.2s ease;
    appearance: none;
}
input:focus, select:focus, textarea:focus { 
    background-color: var(--surface);
    border-color: var(--primary); 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); 
    outline: none; 
}

button { 
    background-color: var(--surface); 
    border: 1px solid var(--border); 
    padding: 14px 20px; 
    border-radius: var(--radius-md); 
    cursor: pointer; 
    font-size: 1rem; 
    font-weight: 600; 
    color: var(--text-main);
    transition: all 0.2s ease; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    width: 100%;
}
button:active:not(:disabled) { transform: scale(0.98); }
button.primary { background-color: var(--primary); color: white; border: none; }
button.primary:hover:not(:disabled) { background-color: var(--primary-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.tabs-container { margin-bottom: 24px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; }
.tabs-container::-webkit-scrollbar { display: none; }
.tabs { display: flex; gap: 8px; padding: 4px; background: #e5e7eb; border-radius: 14px; width: 100%; }
.tab { flex: 1; padding: 10px 16px; border-radius: 10px; background-color: transparent; color: var(--text-muted); border: none; font-weight: 600; font-size: 0.9rem; text-align: center; white-space: nowrap; }
.tab.active { background-color: var(--surface); color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* 아이콘 */
svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* 유틸 및 특수 요소 */
.hidden { display: none !important; }
.text-center { text-align: center; }
.flex-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.flex-col { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.log-box { background-color: var(--input-bg); border-radius: var(--radius-md); padding: 16px; font-size: 0.9rem; max-height: 250px; overflow-y: auto; margin-top: 8px; }
.log-entry { padding: 10px 0; border-bottom: 1px solid var(--border); }
.log-entry:last-child { border-bottom: none; }
.log-time { color: var(--text-muted); font-size: 0.75rem; display: block; margin-bottom: 4px;}

.result-text { font-size: 1.25rem; font-weight: 700; text-align: center; margin-top: 16px; padding: 16px; background: var(--input-bg); border-radius: var(--radius-md); color: var(--primary); }
.code-box { background: var(--text-main); color: white; padding: 12px; border-radius: 8px; font-weight: bold; font-size: 1.2rem; letter-spacing: 4px; text-align: center; margin-top: 8px;}

/* 룰렛 캔버스 스타일 */
.roulette-container { text-align: center; margin-bottom: 20px; overflow: hidden; }
#rouletteCanvas { max-width: 100%; aspect-ratio: 1 / 1; }

/* 공지사항 박스 */
.notice-box { background-color: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; font-size: 0.9rem; color: var(--text-main); }
.notice-title { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; color: var(--primary); }

/* 토스트 알림 */
.toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px); background-color: rgba(17, 24, 39, 0.9); color: white; padding: 14px 24px; border-radius: 100px; font-size: 0.95rem; font-weight: 500; box-shadow: var(--shadow-floating); opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: none; z-index: 1000; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }