/* ========================================
   BASE STYLES
   기본 스타일, 리셋, 레이아웃
   ======================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%; /* 루트 문서가 내부 스크롤 컨테이너보다 더 크게 늘어나지 않도록 */
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
  font-weight: 400;
  background-color: #141a21;
  color: #e4e6f0;
  min-height: 100vh;
  transition: background-color 0.3s ease;
  /* 문서 루트는 스크롤 금지, 내부 패널만 스크롤 */
  overflow: hidden;
  overscroll-behavior: none; /* 뷰포트로의 스크롤 체인 차단 (모바일 이중 스크롤 방지) */
}

/* 사이드바가 열렸을 때 배경 문서 스크롤을 잠금 (모바일 가로/세로 스크롤 방지) */
body.sidebar-open {
  overflow: hidden; /* x/y 모두 차단, 내부 사이드바는 자체 스크롤 사용 */
  overscroll-behavior: none; /* iOS/안드로이드에서 바운스 스크롤로 빈 공간 보이는 현상 완화 */
}

.container {
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  /* 문서 전체 스크롤 대신 내부 패널에서만 스크롤되도록 고정 */
  height: 100vh; /* 폴백 */
  height: 100dvh; /* 실제 보이는 뷰포트 높이 */
  overflow: hidden;
}

/* ========================================
   HEADER
   ======================================== */

.header {
  background: #1f2937; /* Solid Slate */
  border-bottom: 1px solid #374151; /* Solid Slate border */
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: 80px 1fr;
  transition: transform 0.3s ease;
  grid-row: 1;
  grid-column: 1;
}

body.sidebar-open .header {
  transform: translateX(320px);
}

/* Decorative gradient bar removed for Solid Slate */

.header-left {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(138, 149, 165, 0.15);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header-left:hover {
  background: rgba(138, 149, 165, 0.12);
}

.header-left:hover .sidebar-toggle {
  color: #9daab8;
}

.header-left:active .sidebar-toggle {
  transform: scale(0.95);
}

.header-right {
  padding: 28px 32px;
  overflow: hidden;
}

body.sidebar-open .header-right h1,
body.sidebar-open .header-right p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.header h1 {
  font-size: 2.2rem;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #2aa0f0 0%, #1a90e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
}

.header p {
  color: #9ea2c4;
  font-size: 0.95rem;
  font-weight: 400;
  text-align: left;
  margin: 0;
}

/* ========================================
   MAIN LAYOUT
   ======================================== */

.main-layout {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  grid-row: 2;
  grid-column: 1;
  /* 내부 스크롤 컨테이너가 제대로 동작하도록 최소 높이 제한 해제 */
  min-height: 0;
}

/* ========================================
   TOAST NOTIFICATION
   ======================================== */

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #345D78;
  color: white;
  padding: 14px 20px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
  font-weight: 400;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   ANNOUNCEMENT BUTTON + PATCH MODAL
   ======================================== */

/* 공지/일괄해제 플로팅 버튼: 필(원형 모서리 직사각형) 디자인 */
.announcement-btn,
.dismiss-badges-btn {
  position: fixed;
  right: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background-color: #242a35;
  color: #e4e6f0;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  z-index: 1200; /* above sidebar (1000) and toast (1000) */
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 3px 6px rgba(0,0,0,0.32);
  transition: transform 0.15s ease, background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  opacity: 0.9;
  border-radius: 9999px; /* 최대 원형 모서리 */
  min-height: 32px;
}

.announcement-btn:hover,
.dismiss-badges-btn:hover {
  opacity: 1;
  background-color: #2b313d;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.35);
}
.announcement-btn:active,
.dismiss-badges-btn:active {
  transform: scale(0.98);
}

/* 개별 배치: 아래(공지), 위(레드닷 해제) */
.announcement-btn {
  /* 하단 안전영역을 고려하여 버튼 위치 보정 */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 6px 12px 6px 32px; /* 왼쪽은 아이콘 자리 확보 (컴팩트) */
  /* 확성기 아이콘(더 작은 스케일) + 텍스트 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f56565' stroke-width='2' d='M14 14V6m0 8l6.102 3.487a.6.6 0 0 0 .898-.52V3.033a.6.6 0 0 0-.898-.521L14 6m0 8H7a4 4 0 1 1 0-8h7M7.757 19.3L7 14h4l.677 4.74a1.98 1.98 0 0 1-3.92.56Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px; /* 더 컴팩트하게 */
}

.dismiss-badges-btn {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 32px + 10px); /* 공지 버튼 위에 배치(간격 10px) */
  padding: 6px 12px; /* 아이콘 없음: 좌우 대칭 패딩, 컴팩트 */
}

.patch-modal-backdrop[hidden],
.patch-modal[hidden] { display: none !important; }

.patch-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,12,16,0.55);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  z-index: 1290;
}

.patch-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 440px);
  background: rgba(26,28,34,0.95);
  color: #e4e6f0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.35);
  z-index: 1310;
  overflow: hidden;
  /* Limit height and allow internal scroll */
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.patch-modal .patch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
.patch-modal .patch-title { font-weight: 700; letter-spacing: -0.01em; }
.patch-modal .patch-close {
  background: transparent;
  border: none;
  color: #9ea2c4;
  font-size: 20px;
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
}
.patch-modal .patch-close:hover { background: rgba(255,255,255,0.06); color: #e4e6f0; }

.patch-modal .patch-body {
  padding: 14px 16px 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  /* Scroll within modal body when content grows */
  flex: 1 1 auto;
  min-height: 0; /* ensure flexbox overflow works */
  overflow-y: auto;
}
.patch-modal .patch-body p { margin: 0 0 12px 0; color: #c4c8da; }
.patch-modal .patch-body ul { margin-top: 10px; list-style: disc; }
.patch-modal .patch-body li { margin: 6px 0; color: #d2d6e6; }
.patch-modal .patch-body li::marker { color: #9ea2c4; font-size: 0.8em; }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .header {
    grid-template-columns: 60px 1fr;
  }

  .header-right {
    padding: 20px 24px;
  }

  .header h1 {
    font-size: 1.8rem;
  }
}