/* =========================
   공통 색상 변수 (다크 테마 기본)
========================= */
:root {
  --bg: #0f1724;
  --card: #111827;
  --muted: #9ca3af;
  --accent: #7c3aed;
  --glass: rgba(255, 255, 255, 0.03);
  --radius: 14px;
  color-scheme: dark;
}
:root {
  --text: #e6eef8;  /* 다크 기본 텍스트 */
}

:root.light {
  --text: #3b3a36;  /* 라이트 기본 텍스트 */
}

:root.light {
  --bg: #fdfcf9;
  --card: #ffffff;
  --muted: #7c6f57;
  --accent: #d97706;
  --glass: rgba(0, 0, 0, 0.05);
  --radius: 14px;
  color-scheme: light;
}

body {
  margin: 0;
  font-family: Inter, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);   /* ← 변수로 통일 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  height: 100%;
  transition: background 0.3s, color 0.3s;
}


:root {
  --text: #e6eef8;  /* 다크 기본 텍스트 */
}

:root.light {
  --text: #3b3a36;  /* 라이트 기본 텍스트 */
}


/* =========================
   레이아웃
========================= */
.layout {
  display: flex;
  width: 100%;
  max-width: 1200px;
  gap: 20px;
}

/* ✅ 사이드바 */
.sidebar {
  width: 220px;
  min-width: 180px;
  max-width: 260px;

  position: relative;
  display: flex;
  flex-direction: column;
}


.sidebar h2 {
  font-size: 16px;
  margin: 0 0 12px 0;
  color: var(--muted);
}
.folders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.folder-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font-size: 14px;
}
.folder-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
:root.light .folder-btn {
  border: 1px solid rgba(0,0,0,0.1);
  background: #f9f7f3;
  color: #3b3a36;
}
:root.light .folder-btn:hover {
  background: #f3e9db;
}

/* ✅ 새 폴더 만들기 */
.new-folder {
  margin-top: 14px;
  display: flex;
  gap: 6px;
}
.new-folder input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: inherit;
  font-size: 13px;
}
:root.light .new-folder input {
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  color: #3b3a36;
}
.new-folder button {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 8px;
}

/* =========================
   커스텀 드롭다운
========================= */
.custom-select {
  position: relative;
  margin: 8px 0;
}
.custom-select .selected {
  background: var(--card);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.custom-select .options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: none;
  z-index: 20;
}
.custom-select.open .options {
  display: block;
}
.custom-select .options li {
  padding: 10px 12px;
  cursor: pointer;
}
.custom-select .options li:hover {
  background: var(--accent);
  color: #fff;
}

/* =========================
   나머지 스타일 (헤더/포스트/버튼)
========================= */
button:hover {
  filter: brightness(1.1);
}

.main { flex: 1; }
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
header h1 { font-size: 22px; margin: 0; }
.pill {
  background: rgba(255,255,255,0.05);
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 12px;
}
:root.light .pill {
  background: rgba(0,0,0,0.05);
  color: #374151;
}
.new-post {
  background: var(--glass);
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
input, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: inherit;
  resize: vertical;
  font-size: 14px;
}
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;   /* ← 직접 드래그 막기 */
  overflow: hidden; /* ← 스크롤바 안 뜨게 */
}


button {
  background: linear-gradient(180deg, var(--accent), #5b21b6);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
/* 공통 secondary */
button.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e6eef8;
}

/* 라이트 테마 secondary */
:root.light button.secondary {
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #374151;
  transition: background 0.2s, color 0.2s;
}
:root.light button.secondary:hover {
  background: #e5e7eb;
  color: #111827;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}
main { margin-top: 18px; }
.post {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}
.post h2 { margin: 0 0 8px 0; font-size: 16px; }
.meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post .content { white-space: pre-wrap; color: var(--text); }

.post .controls { display: flex; gap: 8px; }
.edit-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* =========================
   햄버거 & 사이드바 모바일 전용
========================= */
.hamburger {
  display: none; /* 기본 숨김 */
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* 오버레이 */
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 50;
}
.overlay.show {
  display: block;
  opacity: 1;
}

/* 사이드바 슬라이드 */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    background: var(--card);
    padding: 20px;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
    z-index: 100;
  }
  .sidebar.open {
    left: 0;
    opacity: 1;
  }
  .header-right {
    display: none; /* 모바일에선 우측 버튼 숨김 */
  }
}
/* 모바일에서만 사이드바에 액션 버튼 노출 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100vh;
    background: var(--card);
    padding: 20px;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
    z-index: 100;

    /* ✅ 사이드바 내부 스크롤 */
    overflow-y: auto;
  }
}




/* PC에서는 sidebar-actions 숨김 (버튼은 header-right에만 보임) */
.sidebar .sidebar-actions {
  background: rgba(0,0,0,0.05); /* 은은한 배경 */
  border-radius: 12px;
  padding: 7px;
}
/* =========================
   로그인/회원가입 화면 전용 스타일
========================= */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.login-card {
  background: var(--card);
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-title {
  margin: 0;
  font-size: 22px;
  text-align: center;
}

.login-subtitle {
  margin: 0 0 16px 0;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

.login-card input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: inherit;
}

.login-card button {
  margin-top: 8px;
  padding: 10px;
  font-size: 15px;
}

/* =========================
   overlay 예외 처리
   로그인/회원가입 화면에서는 클릭 막힘 방지
========================= */
/* ✅ 로그인/회원가입 화면에서만 overlay 제거 */
body.auth .overlay {
  display: none !important;
}
/* 가입신청 전용 카드 */
/* 가입신청 전용 카드 (넓게) */
.request-card {
  background: var(--card);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  width: 100%;
  max-width: 700px;   /* ← 더 넓게 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-card input,
.request-card textarea {
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: inherit;
}

.request-card textarea {
  min-height: 120px;
  max-height: 300px;   /* ← 최대 300px까지만 자동 확장 */
  resize: none;        /* 사용자가 직접 드래그 금지 */
  line-height: 1.5;
  overflow-y: auto;    /* 너무 길면 스크롤바 표시 */
}
/* 기본: 모바일 - 1개씩 */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 큰 화면(예: 768px 이상)에서는 3개씩 */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ✅ 익명 체크박스 토글 */
.anon-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  padding: 1px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  transition: background 0.2s, border 0.2s;
}

.anon-toggle:hover {
  background: rgba(255,255,255,0.15);
}

.anon-toggle input[type="checkbox"] {
  appearance: none;
  width: 5px;
  height: 16px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  display: grid;
  place-content: center;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}

/* 체크 ON */
.anon-toggle input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.anon-toggle input[type="checkbox"]:checked::after {
  content: "✔";
  font-size: 12px;
  color: white;
}
.comments.collapsed { display: none; }

.comment {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 10px;
}

.c-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.c-body {
  white-space: pre-wrap;  /* 줄바꿈 유지 */
  margin-bottom: 4px;
}

.c-actions {
  display: flex;
  gap: 6px;
  font-size: 12px;
}

.reply-form textarea {
  width: 100%;
  margin-top: 6px;
  white-space: pre-wrap;
}
.post-meta-top {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.post-controls-bottom {
  display: flex;
  justify-content: space-between; /* 좌: 댓글 버튼 / 우: 수정삭제 */
  align-items: center;
  margin-top: 8px;
}

.post-controls-bottom .left-controls {
  display: flex;
  gap: 6px;
}

.post-controls-bottom .controls {
  display: flex;
  gap: 8px;
}
/* 댓글 영역 개선 */
/* 댓글 영역 전체 */
.comments {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* 댓글 아이템 */
.comment {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}

:root.light .comment {
  background: rgba(0,0,0,0.05);
}

/* 대댓글 (답글) */
.comment.reply {
  margin-left: 16px;
  border-left: 2px solid rgba(255,255,255,0.1);
  padding-left: 12px;
}

/* 댓글 메타 (작성자/날짜) */
.c-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* 댓글 본문 */
.c-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  margin-bottom: 6px;
}

/* 댓글 액션 버튼 (답글/삭제) */
/* 댓글 액션 전체 */
.c-actions {
  display: flex;
  justify-content: space-between; /* 좌우로 분리 */
  align-items: center;
  font-size: 12px;
  margin-top: 4px;
}

/* 왼쪽 영역: 답글 */
.c-actions .left {
  display: flex;
  gap: 6px;
}

/* 오른쪽 영역: 수정/삭제 */
.c-actions .right {
  display: flex;
  gap: 6px;
}

/* 댓글 액션 버튼 */
/* 댓글 액션 버튼 (수정/삭제/답글) */
/* 댓글 버튼도 post 버튼과 동일하게 secondary 스타일 사용 */
/* 댓글 액션 버튼 공통 */
.c-actions button {
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
}
/* 수정 / 답글 버튼 hover 시 색 변화 없애기 */
.c-actions button.secondary:hover {
  filter: none;          /* 밝기 효과 제거 */
  background: transparent;
  color: inherit;
}

/* 수정/답글 버튼은 그대로 accent hover */
.c-actions button:not(.delete):hover {
  background: var(--accent);
  color: #fff;
}

/* 삭제 버튼은 hover 효과 없음 (secondary 기본 유지) */
.c-actions button.delete:hover {
  background: transparent;
  color: inherit;
}

.c-actions button:hover {
  background: transparent;
  color: inherit;
}

:root.light .c-actions button {
  background: rgba(0,0,0,0.05);
  color: #374151;
}
.c-actions button:hover {
  background: transparent;
  color: inherit;
}
/* 수정 모드 textarea */
.comment-edit {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comment-edit textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  resize: vertical;
  min-height: 50px;
}
.comment-edit .edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
/* 수정, 답글 버튼 hover 효과 제거 */
.c-actions button.secondary:hover {
  background: transparent !important;
  color: inherit !important;
  filter: none;
}



.comment-edit .edit-actions button {
  padding: 4px 10px;
  font-size: 12px;
}
/* 댓글/대댓글 입력창 버튼 */
.comment-actions .btn-submit,
.reply-form .btn-submit {
  background: var(--accent, #4a90e2);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.comment-actions .btn-submit:hover,
.reply-form .btn-submit:hover {
  background: #357ab8;
}
/* 익명 체크박스 라벨 */
.anon-toggle {
  font-size: 13px;
  color: var(--text, #ccc);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.anon-toggle input {
  transform: scale(1.1);
  cursor: pointer;
}
/* 댓글 입력창 */
.new-comment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.new-comment textarea {
  min-height: 60px;
  resize: none;
}

/* 댓글 입력창 하단 액션 (익명 + 등록 버튼) */
/* 댓글 입력창 하단 액션 */
.comment-actions {
  display: flex;
  justify-content: flex-end; /* 오른쪽 정렬 */
  align-items: center;
  gap: 10px; /* 버튼 사이 여백 */
}

/* 익명 토글 (라벨) */
.comment-actions .anon-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

/* 체크박스 크기 키우기 */
.comment-actions .anon-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}


/* 등록 버튼 */
.comment-actions button.primary {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 8px;
}
/* 대댓글 입력창(reply-form) 하단 영역 */
.reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.reply-form textarea {
  min-height: 60px;
  resize: none;
}

.reply-form .reply-actions {
  display: flex;
  justify-content: flex-end;  /* 오른쪽 정렬 */
  align-items: center;
  gap: 10px;
}

/* reply-form 안의 익명 토글 */
.reply-form .anon-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
}

/* 버튼은 new-comment와 동일 스타일 */
.reply-form button {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 8px;
}