@charset "UTF-8";

#gemCalcBody {
	max-width: 1000px;
	margin: 1rem auto; /* 마진 축소 */
	padding: 0.5rem; /* 패딩 축소 */
}

h1 {
	text-align: center;
	font-size: 1.5rem; /* 제목 크기 축소 */
	margin: 0.5rem 0; /* 마진 축소 */
}

.gem-section {
	margin-bottom: 0.5rem; /* 마진 축소 */
	padding: 0.3rem; /* 패딩 축소 */
	border: 1px solid #ddd;
	border-radius: 6px; /* 라운드 축소 */
	background: #f9f9f9;
}

.gem-section h3 {
	margin: 0 0 0.3rem 0; /* 마진 축소 */
	font-size: 1rem; /* 폰트 크기 축소 */
	color: var(--header-blue-text);
}

.grades-container {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 6px; /* 간격 축소 */
	padding-bottom: 3px; /* 패딩 축소 */
	justify-content: space-around;
}

.grade-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px; /* 최소 너비 축소 */
}

.grade-item label {
	font-size: 0.7rem; /* 라벨 폰트 크기 축소 */
	font-weight: bold;
	text-align: center;
	margin-bottom: 3px; /* 마진 축소 */
}

.output {
	margin-top: 1rem; /* 마진 축소 */
	padding: 0.5rem; /* 패딩 축소 */
	border: 1px solid #ccc;
	border-radius: 6px; /* 라운드 축소 */
	background: #f5f5f5;
}

.gemCountInput {
	width: 40px; /* 너비 축소 */
	height: 24px; /* 높이 축소 */
	text-align: center;
	font-size: 0.8rem; /* 폰트 크기 축소 */
	margin: 0 3px; /* 마진 축소 */
	border-radius: 4px; /* 라운드 축소 */
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.input-control {
	display: flex;
	align-items: center;
	gap: 4px; /* 간격 축소 */
}

.control-btn {
	width: 36px;
	height: 36px;
	font-size: 1.2rem;
	border: none;
	border-radius: 4px;
	background: #0984e3;
	color: white;
	cursor: pointer;
	transition: background 0.3s;
}

.control-btn:hover {
	background: #74b9ff;
}

.control-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
}

button.submit-btn {
    font-family: 'mabinogi_classic';
	background: #0984e3;
	color: white;
	padding: 0.5rem 1rem; /* 패딩 축소 */
	border: none;
	border-radius: 4px; /* 라운드 축소 */
	cursor: pointer;
	font-size: 1rem; /* 폰트 크기 축소 */
	transition: background 0.3s;
	width: 100%;
	margin-top: 0.5rem; /* 마진 축소 */
}

button.submit-btn:hover {
	background: #74b9ff;
}

ul {
	margin: 0;
	padding-left: 1rem; /* 패딩 축소 */
}

.info {
	margin-top: 1rem; /* 마진 축소 */
	padding: 0.5rem; /* 패딩 축소 */
	background: #eef6ff;
	border: 1px solid #aaccee;
	border-radius: 6px; /* 라운드 축소 */
}

.info h3 {
	margin-top: 0;
	font-size: 1rem; /* 폰트 크기 축소 */
}

/* 단계별 색상 */
.grade-1 {
	background-color: #d1e7ff;
	padding: 2px 4px;
	border-radius: 4px;
}

.grade-2 {
	background-color: #d4edda;
	padding: 2px 4px;
	border-radius: 4px;
}

.grade-3 {
	background-color: #fff3cd;
	padding: 2px 4px;
	border-radius: 4px;
}

.grade-4 {
	background-color: #ffe5d0;
	padding: 2px 4px;
	border-radius: 4px;
}

.grade-5 {
	background-color: #f8d7da;
	padding: 2px 4px;
	border-radius: 4px;
}

@media ( max-width : 600px) {
	.gemCountInput {
		display: none;
	}
	.input-control {
		display: flex;
	}
	.grade-item {
		min-width: 50px; /* 최소 너비 축소 */
	}
	.grade-item label {
		font-size: 0.6rem; /* 라벨 폰트 크기 더 축소 */
	}
	.control-btn {
		padding: 0;
		width: 24px; /* 버튼 크기 축소 */
		height: 24px; /* 버튼 크기 축소 */
		font-size: 0.8rem; /* 폰트 크기 축소 */
	}
}

@media ( min-width : 601px) {
	.input-control {
		display: none;
	}
	.gemCountInput {
		display: inline-block;
	}
	.grades-container {
		justify-content: space-between;
	}
}

/* 다크모드 스타일 */
body.dark-mode .gem-section {
    background: var(--section-bg); /* #252525 */
    border: 1px solid var(--section-border); /* #3a3a3a */
}

body.dark-mode .output {
    background: var(--container-bg); /* #2d2d2d */
    border: 1px solid var(--input-border); /* #546e7a */
    color: var(--text-color); /* #e0e0e0 */
}

body.dark-mode .info {
    background: var(--notification-bg); /* #37474f */
    border: 1px solid var(--notification-border); /* #546e7a */
    color: var(--text-color); /* #e0e0e0 */
}

body.dark-mode select {
    background: var(--input-bg); /* #3a3a3a */
    border: 1px solid var(--input-border); /* #546e7a */
    color: var(--input-text); /* #e0e0e0 */
}

body.dark-mode button {
    background: var(--button-bg); /* #1e88e5 */
}

body.dark-mode button:hover {
    background: var(--button-hover-bg); /* #42a5f5 */
}