@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

body {margin: 0;font-family: 'Fredoka One', sans-serif;background: linear-gradient(to bottom, #2c3e50, #34495e);height: 100vh;display: flex;justify-content: center;align-items: center;color: #fff;}
.container {background: rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 40px;width: 350px;text-align: center;box-shadow: 0 0 20px rgba(0,0,0,0.5);position: relative;}
.container::before {content: '';background: url('https://cdn-icons-png.flaticon.com/512/616/616408.png') no-repeat center/contain;width: 80px;height: 80px;position: absolute;top: -40px;left: calc(50% - 40px);}
@keyframes pop {  from { transform: scale(0.8); opacity: 0; }  to { transform: scale(1); opacity: 1; }}
.success-icon {  font-size: 70px;  margin-bottom: 10px;}
h1 {margin-bottom: 30px;color: #ffd700; /* 볼링 핀 골드 느낌 */}
input[type="text"], input[type="password"] {width: 100%;padding: 12px;margin-bottom: 20px;border-radius: 10px;border: none;outline: none;font-size: 16px;box-sizing: border-box;}
button {width: 100%;padding: 12px;background: #e74c3c;border: none;border-radius: 10px;color: #fff;font-size: 18px;cursor: pointer;transition: 0.3s;box-sizing: border-box;}
button:hover {background: #c0392b;}
.pins {display: flex;justify-content: space-between;margin-top: 30px;}
.pin {width: 20px;height: 40px;background: #fff;border-radius: 10px 10px 2px 2px;position: relative;}
.pin::after {content: '';width: 100%;height: 10px;background: red;position: absolute;top: 10px;left: 0;border-radius: 5px;}

a.button {  display: inline-block;  padding: 12px 30px;  background: #e74c3c;  color: white;  text-decoration: none;  border-radius: 10px;  font-size: 18px;  transition: 0.3s;}
a.button:hover {  background: #c0392b;}