:root {
  /* Light Mode */
  --bg-color: oklch(0.98 0.01 240);
  --card-bg: oklch(1 0 0);
  --accent-color: oklch(0.6 0.2 250);
  --text-primary: oklch(0.2 0.02 240);
  --text-secondary: oklch(0.4 0.02 240);
  --shadow-color: oklch(0.1 0.02 240 / 0.1);
  --font-main: 'Pretendard', sans-serif;
  --transition-speed: 0.3s;
}

[data-theme="dark"] {
  --bg-color: oklch(0.15 0.02 240);
  --card-bg: oklch(0.2 0.02 240);
  --accent-color: oklch(0.7 0.2 250);
  --text-primary: oklch(0.95 0.01 240);
  --text-secondary: oklch(0.7 0.01 240);
  --shadow-color: oklch(0.05 0.02 240 / 0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 콘텐츠가 길어지면 위에서부터 정렬 */
  padding: 4rem 1rem;      /* 상하 여유 공간 추가 */
  overflow-y: auto;        /* 세로 스크롤 활성화 */
  position: relative;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.background-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 1;
}

[data-theme="dark"] .background-texture {
  opacity: 0.1;
  filter: invert(1);
}

.app-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.comments-section {
  width: 100%;
}

.comments-section .card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 
    0 10px 25px var(--shadow-color),
    0 20px 48px var(--shadow-color);
  transition: background-color 0.3s ease;
  min-height: 400px;
}

.comments-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2rem;
  text-align: center;
}