<template>
  <div class="page-description">
    <button class="toggle-btn" @click="toggleOpen">
      <span v-if="isOpen">▼</span>
      <span v-else>▲</span>
      <span>{{ isOpen ? "설명 접기" : "설명 펼치기" }}</span>
    </button>
    <div v-show="isOpen">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isOpen = ref(false);
function toggleOpen() {
  isOpen.value = !isOpen.value;
}
</script>

<style scoped>
.page-description {
  background: #fff; /* 기존 #f5f7fa → #fff */
  border-left: 5px solid #3498db; /* 기존 4px #409eff → 5px #3498db */
  border: 1px solid #ddd; /* 추가: 박스 테두리 */
  padding: 20px 24px;
  margin-bottom: 24px;
  font-size: 1.1rem;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  font-weight: 500;
  letter-spacing: 0.01em;
}

:deep(h1) {
  color: #2c3e50;
}
:deep(h2) {
  margin-top: 30px;
  color: #34495e;
}
:deep(ul) {
  padding-left: 20px;
}
:deep(.highlight) {
  font-weight: bold;
  color: #e74c3c;
}
.toggle-btn {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.1em;
  color: #3498db;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.toggle-btn:focus {
  outline: none;
}
</style>
