/* 전체 페이지 배경과 폰트 스타일 */
body {
  font-family: sans-serif; /* 기본 글꼴을 산세리프 계열로 설정 */
  background: #f7f7f7;      /* 연한 회색 배경으로 시각적 부드러움 제공 */
  padding: 2em;             /* 모든 방향에 2em 만큼 여백 추가 */
}

/* 섹션들을 담는 컨테이너 - 반응형 그리드 */
.grid-container {
  display: grid; /* CSS Grid 레이아웃 사용 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 최소 300px, 최대 1fr로 자동 정렬 */
  gap: 1.5em; /* 섹션 간 간격 */
}

/* 각 개별 섹션 카드 스타일 */
section {
  background: white; /* 섹션 배경은 흰색 */
  padding: 1em;       /* 내부 여백 */
  border-radius: 8px; /* 모서리 둥글게 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 가벼운 그림자 */
}

/* 제목 정렬 */
h1, h2 {
  text-align: center; /* 가운데 정렬 */
}

/* 각 입력 항목의 라벨 */
label {
  font-weight: bold;  /* 굵은 글씨 */
  display: block;     /* 블록 요소로 표시 (줄바꿈) */
  margin-top: 1em;    /* 위 여백 */
}

/* 공통 폼 요소 스타일 (select, textarea, button) */
select,
textarea,
button {
  width: 100%;         /* 부모 요소 기준으로 가로 100% */
  padding: 0.6em;      /* 내부 여백 */
  margin-top: 0.3em;   /* 위쪽 여백 */
  border: 1px solid #ccc; /* 테두리 */
  border-radius: 6px;  /* 테두리 둥글게 */
  box-sizing: border-box; /* padding 포함한 박스 크기 계산 */
}

/* textarea의 가로 크기를 늘리기 위해 width 조정 */
textarea {
  width: 100%; /* 원하는 경우, 특정 px 값으로 변경 가능 (예: 600px) */
  height: 300px;
}

/* 버튼 스타일 공통 */
button {
  background-color: #4CAF50; /* 녹색 배경 */
  color: white;              /* 흰 글씨 */
  font-size: 1em;            /* 글자 크기 */
  margin-top: 1em;           /* 위쪽 여백 */
  cursor: pointer;           /* 마우스 포인터 변경 */
}

/* 복사 버튼 스타일 */
.btn-copy {
  background-color: #2196F3; /* 파란색 배경 */
}

/* 삭제 버튼 스타일 */
.btn-delete {
  background-color: #f44336; /* 빨간색 배경 */
}