/* colors */
:root {
    --primary-red: #E60A00;
    --white: #FFFFFF;
    --black: #000000;
    --gray: #E6E6E6;
    --button-red: red;
    --light-gray: #B0B0B0;
}

/* 기본 폰트 및 스타일 */
body {
    font-family: 'GmarketSans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--gray);
    color: var(--black);
}


/* 헤더와 타이틀에도 Gmarket Sans 적용 */
header, .title {
    font-family: 'GmarketSans', sans-serif;
}

/* 입력 필드와 버튼에도 적용 */
input[type="text"], button, textarea {
    font-family: 'GmarketSans', sans-serif;
}

/* 버튼 스타일 */
button {
    background-color: var(--button-red);
    color: var(--white);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: darken(var(--button-red));
}



/* 기본 폼 스타일 */
input[type="text"], input[type="password"], input[type="email"], textarea {
    background-color: var(--white); /* 흰색 배경 */
    color: var(--black); /* 텍스트 색상 */
    border: 1px solid var(--light-gray); /* 경계선 */
    padding: 12px 20px;
    width: 100%; /* 가로 크기 100%로 */
    box-sizing: border-box; /* 패딩을 포함하여 전체 크기 계산 */
    font-size: 16px; /* 폰트 크기 */
    border-radius: 5px; /* 테두리 둥글게 */
    transition: border-color 0.3s ease; /* 경계선 색상 변경 시 애니메이션 */
}

/* 포커스 시 스타일 */
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: var(--primary-red); /* 포커스 시 빨간색 경계선 */
    outline: none; /* 기본 포커스 아웃라인 없애기 */
}

/* 입력 필드가 비어있을 때 경고 메시지 */
input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid {
    border-color: #FF6347; /* 잘못된 입력에 빨간 경계선 */
}

/* placeholder 스타일 */
input::placeholder, textarea::placeholder {
    color: var(--light-gray); /* 회색 색상 */
    font-style: italic; /* 이탤릭체 */
}

/* 텍스트 영역 스타일 */
textarea {
    height: 150px; /* 텍스트 영역 크기 */
    resize: vertical; /* 세로로만 크기 조정 가능 */
}



.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px; /* 양쪽 여백 */
  box-sizing: border-box;
}