: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;
	}

	/* QHD (2560px 이상) */
	@media (min-width: 2500px) {
	  .container {
		max-width: 1200px;   /* FullHD 보다 좀 크게 */
	  }
	}

	/* UHD (3840px 이상) */
	@media (min-width: 3800px) {
	  .container {
		max-width: 1600px;   /* QHD 보다 더 크게 */
	  }
	}
	.description {
	  background: #e8f0fe;
	  border: 1px solid #b3d1ff;
	  padding: 1.0rem;
	  margin: 1rem 0 2rem 0;
	  border-radius: var(--radius);
	  font-size: 0.95rem;
	  color: #333;
	}
	.description h3 {
	  margin-bottom: 0.8rem;
	  color: #0056b3;
	}
	.description ul {
	  list-style: disc inside;
	  padding-left: 0.5rem;
	}
	.description li {
	  margin-bottom: 0.5rem;
	}
	.color-picker {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.color-picker div {
		text-align: center;
		margin: 10px;
	}
	.color-picker input[type="color"] {
		width: 85px;
		height: 85px;
		border: 2px solid #ccc;
		border-radius: 10px;
	}
	.color-code {
		font-size: 14px;
		color: #555;
		margin-top: 5px;
	}
	button {
		padding: 10px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	#resultFrame {
		background-color: #f5f5f5; /* iframe 배경색 설정 */
		border: none !important; /* 테두리 제거 */
		outline: none  !important; /* 테두리 강조선 제거 */
		box-shadow: none  !important; /* 그림자 제거 */
		margin: 0;
		padding: 0;
		display: block; /* 인라인 요소의 여백 제거 */
		width: 100% !important;
		height: 300px; /* 필요에 따라 높이 조정 */
	}
	#palete {
	grid-area: center;
	background-color: #f5f5f5; /* 배경색 */
	font-size: 20px; /* 텍스트 크기 설정 */
	color: black; /* 텍스트 색상 */
	padding: 20px; /* 글자 시작 위치 간격 */
	box-shadow: none !important;
    }