:root {
	  --primary: #007bff;         /* 코랄 레드 */
	  --primary-dark: #C44D58;    /* 짙은 코랄 */
	  --bg: #F5F7FA;              /* 아주 연한 그레이-블루 */
	  --text: #2E3A59;            /* 다크 네이비 톤 */
      --card-bg: #FCF8F5;
      --radius: 10px;
      --shadow: 0 4px 12px rgba(0,0,0,0.08);
      --border: #ddd;
      --meter-weak: #e74c3c;
      --meter-medium: #f1c40f;
      --meter-strong: #2ecc71;
      --toast-bg: rgba(0,0,0,0.7);
      --toast-color: #fff;
    }
	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 이상 */
    @media (min-width: 2500px) {
      .container { max-width: 1200px; }
    }
    /* UHD 이상 */
    @media (min-width: 3800px) {
      .container { max-width: 1600px; }
    }
    .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; }
    .card-content { padding:20px; display:flex; flex-direction:column; gap:15px; }
    .form-group { display:flex; align-items:center; justify-content:space-between; }
    .form-group label { flex:1; }
    .form-group input[type=range] { flex:2; margin-left:10px; }
    .options { display:flex; flex-wrap:wrap; gap:10px; }
    .options label { display:flex; align-items:center; gap:4px; font-size:0.9rem; }
    .password-display { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
    .password-display input { flex:1; padding:8px; border:1px solid var(--border); border-radius: var(--radius); font-family: monospace; background: #e0e0e0; }
    .toggle-password { cursor:pointer; font-size:0.9rem; }
    .custom-group { display:flex; flex-direction:column; }
    .custom-group label { margin-bottom:5px; font-size:0.9rem; }
    /* 추가 문자 입력에 길이와 패턴 제약 적용 */
    .custom-group input {
      padding:8px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      max-width: 300px;
    }
    button { padding:10px; background: var(--primary); color:#fff; border:none; border-radius: var(--radius); cursor:pointer; transition: background 0.2s; }
    button:hover { background: var(--primary-dark); }
    .strength-meter { height:30px; border-radius:4px; background: var(--border); overflow:hidden; }
    .strength-meter > div { height:100%; width:0%; transition: width 0.2s, background 0.2s; }
    .strength-text { text-align:right; font-size:0.85rem; }
    .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-color); padding: 8px 16px; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
    .toast.show { opacity: 1; }