: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 보다 더 크게 */
	  }
	}

    #menu { display:flex; gap:8px; flex-wrap:wrap; }
    #menu button { flex:1; padding:12px; border:none; background:#eee; cursor:pointer; }
    #menu button.active { background:#4CAF50; color:#fff; }
    .section { display:none; margin-top:24px; }
    .section.active { display:block; }
    .preview { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:12px 0; }
    .preview-item { text-align:center; cursor:move; }
    .preview-item canvas, .preview-item iframe { border:1px solid #ccc; display:block; margin:0 auto; }
	/* 수정 후: 삭제 선택된 페이지를 회색(흑백)으로 표시 */
    .preview-item.remove {border: 2px solid gray; box-sizing: border-box;} /* wrapper(div)에 빨간 보더 추가  보더가 canvas 크기에 포함되도록 */
	.preview-item.remove canvas {filter: grayscale(100%); opacity: 0.2;}
    .pagenum { margin-top:4px; font-size:0.9em; color:#333; }
    
	/* 합치기 */
    #m1 { width:98.7%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;}
	#m2 { width:98.7%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;}
	#goMerge{ width:100%; margin:6px 0; padding:8px;background:#eee; cursor:pointer;font-weight: bold; font-size: 1.0rem;color: #000; }
    
	/* 분할  */
    #s1{ width:98.7%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;font-size: 1.0rem;color: #000; }
    #ranges{ width:98.4%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;font-size: 1.0rem;color: #000; }
	#goSplit{ width:100%; margin:6px 0; padding:8px;background:#eee; cursor:pointer;font-weight: bold; font-size: 1.0rem;color: #000; }
	
	/* 삭제 */
    #d1{ width:98.7%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;font-size: 1.0rem;color: #000; }
    #delRanges{ width:98.4%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;font-size: 1.0rem;color: #000; }
	#goDelete{ width:100%; margin:6px 0; padding:8px;background:#eee; cursor:pointer;font-weight: bold; font-size: 1.0rem;color: #000; }

	/* 순서변경 */
    #r1{ width:98.7%; margin:6px 0; padding:8px; background:#eee; cursor:pointer;font-weight: bold;font-size: 1.0rem;color: #000; }
	#goReorder{ width:100%; margin:6px 0; padding:8px;background:#eee; cursor:pointer;font-weight: bold; font-size: 1.0rem;color: #000; }    

    input[type="file"] {/*찾아보기*/
	  font-size: 1.0rem; /* 또는 18px, 24px 등 원하는 크기 */
	  /* 추가 스타일 */
	  padding: 8px;
	}


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