:root {
  --primary: #007bff;         /* 코랄 레드 */
  --primary-dark: #C44D58;    /* 짙은 코랄 */
  --bg: #F5F7FA;              /* 아주 연한 그레이-블루 */
  --text: #2E3A59;            /* 다크 네이비 톤 */
  --card-bg: #FCF8F5;
  --radius: 10px;
  --shadow: 0 4px 12px rgba(0,0,0,0.05);
}
body {
  background: var(--bg);
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--text);
  margin: 0;
}

.container {
  max-width: 900px;      /* FullHD 이하 (≤1920px) */
  margin: 0.2rem auto; /* 기본 1.0 */
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.generator-title {
  font-size: 1.7rem;
  font-weight: 700;
  background: linear-gradient(45deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* 박스(블럭) 효과 */
  display: inline-block;
  padding: 0.3em 0.6em;         /* 상하/좌우 넉넉한 여백 */
  border-radius: 1.5em;         /* 둥근 사각형 */
  background-color: #e9f3ff;    /* 밝은 연블루 */
  box-shadow: 0 4px 16px rgba(0,60,120,0.10);
  margin: 1.5rem 0 1rem;
  position: relative;
}

/*
.category {
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.6;
}
*/

.category {
  border-radius: 10px;
  padding: 1px 10px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.6;
}

.category-title {
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 8px;
}

/* 부드러운 파스텔 배경 5종 */
.category:nth-of-type(1) { background-color: #FFFDE3; }  /* 연한 레몬 옐로우 */
.category:nth-of-type(2) { background-color: #E3FFF2; }  /* 연한 민트 */
.category:nth-of-type(3) { background-color: #E3F2FF; }  /* 연한 스카이 블루 */
.category:nth-of-type(4) { background-color: #E3FFF2; }  /* 연한 민트 */
.category:nth-of-type(5) { background-color: #E3F2FF; }  /* 연한 스카이 블루 */

/* hover 시 약간 확대 & 밝기 업 */
.category a:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* 링크 텍스트 (무료 이미지/영상 등) */
.category a:not([href*=".png"]) {
  font-size: 1.1rem;
  color: var(--primary);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.category a:not([href*=".png"]):hover {
  background: var(--primary);
  color: #fff;
}
.category p {
  line-height: 1.8;
  margin-bottom: 0.5rem;
}
.category .naver {
  margin-left: 8px; /* 기본 10px + 추가 20px */
}
.category .pexel {
  margin-left: 8px; /* 기본 10px + 추가 20px */
}
.category .pexelv {
  margin-left: 8px; /* 기본 10px + 추가 20px */
}
.category .free {
  margin-left: 8px; /* 기본 10px + 추가 20px */
}
.category .kapwing {
  margin-left: 8px; /* 기본 10px + 추가 20px */
}