﻿@charset "utf-8";
/* CSS Document */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height:100vh; color:#333; }
.container { max-width:1200px; margin:0 auto; padding:20px; min-height:100vh; display:flex; flex-direction:column; }
.header { display:flex; justify-content:space-between; align-items:center; padding:20px 0; margin-bottom:40px; position:relative;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); }
/*.logo { font-size:28px; font-weight:bold; color:white; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }*/
.hamburger { display:flex; flex-direction:column; cursor:pointer; padding:10px; background:rgba(255,255,255,0.1); border-radius:8px; transition:all 0.3s ease; }
.hamburger:hover { background:rgba(255,255,255,0.2); }
.hamburger span { width:25px; height:3px; background:white; margin:3px 0; transition:0.3s; border-radius:2px; }
.hamburger.active span:nth-child(1) { transform:rotate(-45deg) translate(-5px,6px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(45deg) translate(-5px,-6px); }
.dropdown-menu { position:absolute; top:100%; right:0; background:white; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.2); min-width:200px; overflow:hidden; opacity:0; transform:translateY(-10px); transition:all 0.3s ease; pointer-events:none; }
.dropdown-menu.show { opacity:1; transform:translateY(0); pointer-events:all; }
.menu-divider { border:none; border-top:1px solid #e0e0e0; margin:8px 16px; }
.dropdown-menu a { display:flex; align-items:center; gap:8px; padding:12px 20px; color:#333; text-decoration:none; transition:all 0.3s ease; border-bottom:1px solid #f0f0f0; font-size:14px; font-weight:500; opacity:0; animation:slideInRight 0.3s ease forwards; }
.dropdown-menu a:hover { background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%); color:#495057; transform:translateX(3px); }
.dropdown-menu a:last-child { border-bottom:none; }
.menu-section { padding:0; }
.auth-menu a { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; margin:8px; border-radius:8px; border-bottom:none; }
.auth-menu a:hover { background:linear-gradient(135deg,#5a6fd8 0%,#6a3093 100%); transform:translateY(-1px); }
.user-menu a { position:relative; padding-left:45px; }
.user-menu a:before { content:''; position:absolute; left:20px; top:50%; transform:translateY(-50%); width:4px; height:4px; background:#667eea; border-radius:50%; }
.menu-header { padding:8px 20px; font-size:12px; font-weight:bold; color:#666; text-transform:uppercase; letter-spacing:0.5px; background:#f8f9fa; border-bottom:1px solid #e0e0e0; }
.dropdown-menu a .menu-icon { font-size:16px; width:20px; text-align:center; }
.dropdown-menu.show a { animation-delay:calc(var(--item-index)*0.05s); }
@keyframes slideInRight { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
.main-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.welcome-text { color:white; margin-bottom:40px;margin-top:20px; }
.welcome-text h1 { font-size:32px; margin-bottom:10px; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.welcome-text p { font-size:18px; opacity:0.9; }
.bible-versions { display:grid; grid-template-columns:1fr; gap:20px; width:100%; max-width:500px; }
.bible-btn { background:white; border:none; padding:25px 30px; border-radius:15px; font-size:18px; font-weight:600; color:#333; cursor:pointer; transition:all 0.3s ease; box-shadow:0 5px 20px rgba(0,0,0,0.1); text-decoration:none; display:block; position:relative; }
.bible-btn:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.bible-btn:active { transform:translateY(0); }
.bible-btn .subtitle { font-size:14px; color:#666; margin-top:5px; font-weight:normal; }
.bible-btn.last-used { background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%); color:white; box-shadow:0 5px 20px rgba(76,175,80,0.3); }
.bible-btn.last-used:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(76,175,80,0.4); }
.bible-btn.last-used .subtitle { color:rgba(255,255,255,0.9); }
.bible-btn.last-used::after { content:"최근 선택"; position:absolute; top:-8px; right:-8px; background:#FF6B6B; color:white; padding:4px 8px; border-radius:12px; font-size:10px; font-weight:bold; box-shadow:0 2px 8px rgba(255,107,107,0.3); }
.fade-in { animation:fadeIn 1s ease-in; }
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:768px) { .container { padding:40px; } .logo { font-size:36px; } .welcome-text h1 { font-size:48px; } .welcome-text p { font-size:20px; } .bible-versions { grid-template-columns:repeat(3,1fr); gap:30px; max-width:900px; } .bible-btn { padding:35px 25px; font-size:20px; } }
@media (max-width:768px) { .dropdown-menu { min-width:250px; right:-10px; } .dropdown-menu a { padding:15px 20px; font-size:15px; } }
@media (min-width:1024px) { .bible-btn { padding:40px 30px; font-size:22px; } }


