:root {
  --bg-light: rgba(255,255,255,0.9);
  --bg-dark: rgba(0,0,0,0.7);
  --text-light: #111827;
  --text-dark: #f9fafb;
  --accent: #3b82f6;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: url('배경화면1.png') no-repeat center center fixed;
  background-size: cover;
  color: var(--text-light);
  transition: background 0.35s, color 0.35s;
}

.dark-mode {
  background: url('배경화면2.png') no-repeat center center fixed !important;
  background-size: cover !important;
  color: var(--text-dark);
}

.hidden { display:none; }

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background: rgba(0,0,0,0.35);
  color:#fff;
}
header h1 { margin:0; font-size:20px; }
.icon { cursor:pointer; font-size:20px; }

.container {
  max-width: 1100px;
  margin: 20px auto;
  padding: 20px;
  background: var(--bg-light);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.dark-mode .container {
  background: var(--bg-dark);
}

/* 로그인/회원가입 */

#loginPage, #signupPage {
  max-width: 380px;
  margin: 40px auto;
}
#loginPage h2, #signupPage h2 { margin-top:0; }
#loginForm input, #signupForm input {
  width:100%;
  padding:8px;
  margin:5px 0;
  border-radius:8px;
  border:1px solid #d1d5db;
}
#loginForm button, #signupForm button {
  margin-top:8px;
  padding:8px 12px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}
#signupForm button[type="button"],
#loginForm button[type="button"] {
  background:#6b7280;
}

/* 메인 레이아웃 */

.layout {
  display:flex;
  gap:16px;
}

.sidebar {
  width:230px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.my-info {
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,0.9);
}
.dark-mode .my-info {
  background:rgba(0,0,0,0.5);
}
.avatar-wrap img {
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
}
.my-name {
  font-weight:600;
  margin-bottom:2px;
}
.my-intro {
  font-size:12px;
  color:#6b7280;
}
.dark-mode .my-intro { color:#d1d5db; }

.menu {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.menu button {
  padding:8px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  text-align:left;
  background:rgba(255,255,255,0.85);
}
.menu button:hover {
  background:rgba(209,213,219,0.9);
}
.dark-mode .menu button {
  background:rgba(55,65,81,0.9);
  color:#e5e7eb;
}
.dark-mode .menu button:hover {
  background:rgba(75,85,99,0.9);
}

.content {
  flex:1;
}

/* 공통 섹션 카드 */

section {
  padding:16px;
  border-radius:10px;
  background:rgba(255,255,255,0.9);
}
.dark-mode section {
  background:rgba(0,0,0,0.5);
}
section h2 {
  margin-top:0;
}

/* 프로필 */

.profile-top {
  display:flex;
  gap:16px;
  margin-bottom:10px;
}
.profile-photo {
  text-align:center;
}
.profile-pic {
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin-bottom:6px;
}
.profile-photo button {
  padding:6px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:#9ca3af;
  color:#fff;
  font-size:12px;
}
.profile-main { flex:1; }

.field { margin-bottom:10px; }
.field label {
  display:block;
  font-size:13px;
  margin-bottom:4px;
}
.field textarea {
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #d1d5db;
  resize:vertical;
}

.interest-box label {
  display:inline-flex;
  align-items:center;
  margin-right:10px;
  margin-bottom:6px;
  font-size:13px;
}

/* 친구 + 채팅 */

.friend-add {
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.friend-add input {
  flex:1;
  padding:6px;
  border-radius:8px;
  border:1px solid #d1d5db;
}
.friend-add button {
  padding:6px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}

.friends-chat-wrap {
  display:flex;
  gap:14px;
}

/* 친구 목록 컬럼 */

.friend-column {
  width:260px;
}
#friendList div,
#pendingList div {
  margin-bottom:6px;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(243,244,246,0.95);
  cursor:pointer;
  font-size:14px;
}
.dark-mode #friendList div,
.dark-mode #pendingList div {
  background:rgba(17,24,39,0.8);
}
.friend-name-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.badge {
  background:#ef4444;
  color:#fff;
  border-radius:999px;
  padding:1px 6px;
  font-size:11px;
}

/* 채팅 컬럼 */

.chat-column { flex:1; display:flex; flex-direction:column; }

.chat-messages {
  flex:1;
  min-height:220px;
  max-height:320px;
  border-radius:8px;
  border:1px solid #d1d5db;
  padding:10px;
  overflow-y:auto;
  background:rgba(255,255,255,0.95);
}
.dark-mode .chat-messages {
  background:rgba(15,23,42,0.85);
  border-color:#4b5563;
}

.message {
  max-width:75%;
  padding:6px 9px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:6px;
}
.message.me {
  margin-left:auto;
  background:var(--accent);
  color:#fff;
}
.message.you {
  margin-right:auto;
  background:#e5e7eb;
}
.dark-mode .message.you {
  background:#374151;
  color:#f9fafb;
}

.chat-input {
  margin-top:8px;
  display:flex;
  gap:6px;
}
.chat-input input {
  flex:1;
  padding:8px;
  border-radius:8px;
  border:1px solid #d1d5db;
}
.chat-input button {
  padding:8px 12px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}

/* 추천 */

.search-input {
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #d1d5db;
  margin-bottom:10px;
}
.recommend-card {
  border-radius:10px;
  padding:10px;
  margin-bottom:8px;
  border:1px solid #d1d5db;
  background:rgba(255,255,255,0.9);
  cursor:pointer;
}
.recommend-card:hover {
  background:#e0f2fe;
}
.dark-mode .recommend-card {
  background:rgba(15,23,42,0.9);
  border-color:#4b5563;
}

/* 그래프 */

#graphCanvas {
  width:100%;
  height:400px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:rgba(255,255,255,0.2);
}
.dark-mode #graphCanvas {
  background:rgba(15,23,42,0.6);
  border-color:#4b5563;
}

/* 설정 */

#settingsSec button {
  padding:8px 12px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:#ef4444;
  color:#fff;
}

/* 반응형 */

@media (max-width:900px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; flex-direction:row; gap:10px; }
  .content { width:100%; }
  .friends-chat-wrap { flex-direction:column; }
  .friend-column { width:100%; }
}