/* colors */
:root {
  /* 🎯 Primary Red Base */
  --primary-red: #E60012;         /* 브랜드 메인 컬러 */
  --primary-red-light-1: #FFE5E7; /* 매우 연한 배경용 */
  --primary-red-light-2: #FFB3B8; /* hover용, badge 등 */
  --primary-red-light-3: #FF666D; /* 강조 텍스트/라인 */
  --primary-red-dark-1: #B0000E;  /* 액션 버튼 등 진한 강조 */
  --primary-red-dark-2: #7A0009;  /* 경계선 또는 텍스트 강조 */

  /* 🖤 Base Colors */
  --white: #FFFFFF;
  --black: #000000;

  /* ⚫ Gray Scale (중립) */
  --gray-100: #F8F9FA;  /* 전체 배경 */
  --gray-300: #E6E6E6;  /* border, 구분선 */
  --gray-500: #B0B0B0;  /* 비활성 버튼 등 */
  --gray-700: #495057;  /* 서브 텍스트 */

  /* 📦 Buttons */
  --button-red: #E60012;       /* 기본 강조 버튼 */
  --button-red-hover: #B0000E; /* hover 시 */

  /* ✅ 상태 Colors */
  --success: #2E8B57;
  --warning: #FFC107;
  --info: #007BFF;
  --error: #E60012; /* = primary */

  /* ✍ 텍스트 전용 */
  --text-main: #212529;       /* 기본 텍스트 */
  --text-sub: #495057;        /* 설명 텍스트 */
  --text-placeholder: #B0B0B0;

  /* 💡 기타 */
  --disabled-bg: #F1F3F5;
  --disabled-text: #ADB5BD;
}






/* 기본 폰트 및 스타일 */
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;
}