/* ========== Variables & Reset ========== */
	: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 보다 더 크게 */
	  }
	}
	input[type="text"],
	input[type="number"],
	select,
	textarea,
	.form-control {
	  background-color: #f2f2f2; /* 연한 회색 */
	}

	.description {
	  background: #f1f8e9;
	  border: 1px solid #c5e1a5;
	  padding: 1rem;
	  border-radius: var(--radius);
	  margin-bottom: 1.5rem;
	  font-size: 0.95rem;
	  color: #333;
	}
	.description p {
	  margin-bottom: 0.5rem;
	  font-weight: bold;
	}
	.description ul {
	  padding-left: 1.2rem;
	}
	.description li {
	  margin-bottom: 0.25rem;
	}

    /* ========== Layout ========== */
    h3 { background: #d0d0d0; color: #000; padding: 3px; border-radius: var(--radius) var(--radius) 0 0; font-size: 1.2rem; }
    .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 6px rgba(0,0,0,0.05); margin-bottom: 12px; overflow: hidden; }
    .card-content { padding: 2px; }
    .form-group { display: flex; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
    .form-group label { margin-right: 10px; white-space: nowrap; }
    .form-group input, .form-group select { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition); }
    .form-group input:focus-visible, .form-group select:focus-visible { outline: 3px solid #333; }
    .radio-group { display: flex; gap: 15px; margin-bottom: 15px; }
    .radio-group label { cursor: pointer; display: flex; align-items: center; }
    .radio-group input { margin-right: 6px; }
    button { background: var(--primary); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); position: relative; }
    button:hover { background: #45a049; }
    button:disabled { opacity: .6; cursor: not-allowed; }
    .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; }
    @keyframes spin { to { transform: rotate(360deg); }}
    .result { margin-top: 10px; font-weight: bold; }