/* reset.css 삽입 */
@import "reset.css";

/* 캔버스를 화면 가운데로 정렬 */
body {
  display: flex;
  padding: 20px;
  gap: 20px;
  text-align: center;
  justify-content: space-between;
  align-items: flex-start;
  background-color: gainsboro;
}

/* 색 모음 */
.color-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* 사용자 지정색 */
#setting-color {
  background-color: transparent;
  width: 80px;
  height: 80px;
  margin-top: 10px;
  border: none;
  display: flex;
  flex-direction: column;
}

/* 팔레트 */
.color-option {
  width: 45px;
  height: 45px;
}

/* 사용자 지정색, 팔레트 */
#setting-color::-webkit-color-swatch,
.color-option {
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 50%;
  border: 5px solid white;
  cursor: pointer;
  transition: transform ease-in-out 0.1s;
}
#setting-color:hover,
.color-option:hover {
  transform: scale(1.2);
}

/* 캔버스 크기 설정 */
canvas {
  width: 800px;
  height: 800px;
  border-radius: 5px;
  background-color: white;
}

/* 도구 모음 */
.buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 선 굵기 */
#line-width {
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  margin-top: 15px;
  border-radius: 5px;
  background: white;
  outline: none;
}
#line-width::-webkit-slider-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: cornflowerblue;
  cursor: pointer;
}

/* 선 굵기를 숫자로 나타낸 값 */
p {
  margin-top: 10px;
  color: cornflowerblue;
}

/* 개별 버튼, 드롭다운, 파일 첨부 */
button,
#text-input,
#file-input::file-selector-button,
select {
  all: unset;
  padding: 10px 0;
  font-weight: 500;
  color: white;
  background-color: cornflowerblue;
  border-radius: 5px;
  cursor: pointer;
}

/* 텍스트 입력란, 폰트 설정 */
#file-input,
#text-input,
#font-size,
#font-style {
  color: black;
  background-color: white;
  border-radius: 5px;
}

/* 파일 첨부 버튼, 개별 버튼*/
#file-input::file-selector-button:hover,
button:hover {
  background-color: royalblue;
}

/* 파일 첨부 버튼 */
#file-input::file-selector-button {
  margin-right: 5px;
  padding: 10px;
  border: none;
}

/* 폰트 설정 */
.font-option {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
#font-size,
#font-style {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

/* 텍스트 입력란 */
#text-input:hover {
  cursor: auto;
}
#text-input::placeholder {
  color: gray;
  font-size: 14px;
}

/* 그림자 효과*/
#line-width:hover,
#font-size:hover,
#font-style:hover,
#text-input:hover {
  box-shadow: 0px 0px 10px gray;
}