@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600&display=swap');

:root {
  --bg-gradient: linear-gradient(135deg, #4f46e5, #7c3aed, #a855f7);
  --box-bg: rgba(255,255,255,0.1);
  --text-color: #e5e7eb;
  --border: rgba(255,255,255,0.2);
  --btn-color: #a855f7;
  --btn-hover: #7c3aed;
  --shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.light-mode {
  --bg-gradient: linear-gradient(180deg, #f3f4f6, #ffffff);
  --box-bg: rgba(255,255,255,0.6);
  --text-color: #1f2937;
  --border: rgba(0,0,0,0.1);
  --btn-color: #6366f1;
  --btn-hover: #4f46e5;
  --shadow: 0 8px 24px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family:'Pretendard', sans-serif;
  background: var(--bg-gradient);
  color: var(--text-color);
  display: flex;
  min-height: 100vh;
  transition: all 0.4s ease;
}

.sidebar {
  width: 70px;
  background: var(--box-bg);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar a {
  margin:1rem 0; display:flex; justify-content:center; align-items:center;
  width:40px; height:40px; border-radius:12px;
  transition: all 0.3s ease;
}
.sidebar a:hover {
  background: var(--btn-color);
  box-shadow: 0 4px 10px var(--btn-hover);
  transform: scale(1.1);
}
.sidebar svg { width:24px; height:24px; stroke: var(--text-color); }

.content {
  flex:1; display:flex; flex-direction:column; max-width:1200px; margin:auto; width:100%;
  padding:2rem;
}

header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem;
  flex-wrap: wrap;
}
.header-actions button {
  margin-left:0.5rem; cursor:pointer; border:none;
  background: var(--btn-color); color:white; padding:0.4rem 0.8rem;
  border-radius:8px; transition: background 0.3s ease, transform 0.2s ease;
}
.header-actions button:hover {
  background: var(--btn-hover); transform:scale(1.05);
}

h2 { margin-bottom:1.5rem; }

.input-group {
  display:flex; flex-wrap: wrap; gap:0.5rem; margin-bottom:1.5rem;
}
.input-group input {
  flex:1; min-width:150px; padding:0.7rem; border-radius:10px;
  border:1px solid var(--border); background: rgba(255,255,255,0.1);
  color: var(--text-color);
}

.input-group button,
.password-section button,
.cards-section button {
  background: var(--btn-color);
  color:white;
  border:none;
  border-radius:10px;
  padding:0.6rem 1rem;
  cursor:pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.input-group button:hover,
.password-section button:hover,
.cards-section button:hover {
  background: var(--btn-hover);
  transform: scale(1.05);
}

.password-section, .cards-section {
  background: var(--box-bg);
  backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem; margin-bottom:1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 100%;
}
.password-section:hover, .cards-section:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.2);
}

.pw-inputs { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.pw-inputs input {
  flex:1; min-width:150px; padding:0.7rem; border-radius:10px;
  border:1px solid var(--border); background: rgba(255,255,255,0.1);
  color: var(--text-color);
}

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:1rem;
}
.card {
  background: rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  cursor:pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 20px var(--btn-hover);
}

footer {
  text-align:center;
  font-size:0.8rem;
  margin-top:auto;
  opacity:0.6;
}

/* 모바일에서도 sidebar 보이도록 */
@media (max-width:768px) {
  .content { padding:1rem; }
  .sidebar { width:60px; }
  .sidebar a { width:36px; height:36px; }
  .sidebar svg { width:20px; height:20px; }
}