:root{--primary:#4f46e5;--primary-hover:#4338ca;--secondary:#10b981;--bg-color:#f9fafb;--surface:#fff;--text-main:#111827;--text-muted:#6b7280;--border:#e5e7eb;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased}.layout{flex-direction:column;min-height:100vh;padding-bottom:70px;display:flex}.header{background:var(--surface);text-align:center;box-shadow:var(--shadow-sm);z-index:10;padding:1rem;position:sticky;top:0}.header h1{color:var(--primary);font-size:1.25rem;font-weight:700}.main-content{flex:1;width:100%;max-width:600px;margin:0 auto;padding:1.5rem}.bottom-nav{background:var(--surface);z-index:100;justify-content:space-around;padding:.75rem 0;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1px 3px #0000000d}.nav-item{color:var(--text-muted);flex-direction:column;align-items:center;gap:.25rem;font-size:.75rem;text-decoration:none;transition:color .2s;display:flex}.nav-item.active{color:var(--primary);font-weight:600}.page{animation:.3s ease-in-out fadeIn}.page h2{margin-bottom:.5rem;font-size:1.5rem}.subtitle{color:var(--text-muted);margin-bottom:1.5rem;font-size:.9rem}.upload-container{background:var(--surface);border:2px dashed var(--border);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;height:250px;transition:border-color .2s;display:flex;overflow:hidden}.upload-container:hover{border-color:var(--primary)}.upload-placeholder{color:var(--text-muted);flex-direction:column;align-items:center;gap:1rem;display:flex}.image-preview{object-fit:cover;width:100%;height:100%}button{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;font-weight:600;transition:transform .1s,opacity .2s;display:flex}button:active{transform:scale(.98)}button:disabled{opacity:.7;cursor:not-allowed}.primary-btn{background:var(--primary);color:#fff}.success-btn{background:var(--secondary);color:#fff}.tts-btn{border-radius:4px;flex-shrink:0;min-width:unset!important;width:max-content!important;height:max-content!important;box-shadow:none!important;background:0 0!important;border:none!important;padding:4px!important}.tts-btn:hover{transform:scale(1.1);background:#0000000d!important}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.word-grid{gap:1rem;display:grid}.word-card{background:var(--surface);box-shadow:var(--shadow-sm);border:1px solid var(--border);border-radius:12px;padding:1rem}.word-header{border-bottom:1px solid var(--border);flex-direction:column;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.word-header-top{justify-content:space-between;align-items:flex-start;display:flex}.word-header strong{color:var(--primary);font-size:1.4rem;display:block}.word-header .pronunciation{color:var(--text-muted);margin-top:.25rem;font-size:.95rem;display:block}.word-header .meaning{color:var(--text-main);margin-top:.75rem;font-size:1.1rem;font-weight:600}.example{background:var(--bg-color);border-radius:8px;padding:1rem;font-size:.95rem;line-height:1.6}.example .en{color:var(--text-main);flex:1;margin-bottom:.5rem;margin-right:.5rem;font-style:italic;line-height:1.6}.example .ko{color:var(--text-muted);word-break:keep-all;overflow-wrap:break-word;line-height:1.6}