/* 원본 index.css 그대로 + 로그인/회원가입 화면 디자인 개편 규칙 추가.
   src/main/resources/static/css/style/index.css 파일을 이 내용으로 교체하세요. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --color-bg: #f2f2f3;
  --color-surface: #ffffff;
  --color-text: #1d1f20;
  --color-text-muted: color-mix(in srgb, #1d1f20 55%, transparent);
  --color-divider: color-mix(in srgb, #1d1f20 14%, transparent);
  --color-accent: #3f7f7a;
  --color-accent-hover: #35706b;
  --color-accent-100: #eaf4f3;
  --color-accent-700: #2c5a56;
  --color-accent-800: #234641;
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --radius: 4px;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.signup-container {
    display: flex;
    justify-content: center;
}

.signup-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 500px;
}

#address1 {
    width: 200px;
    align-items: flex-start;
}



.card-link {
    text-decoration: none;
}
.card-link:hover,
.card-link:focus {
    text-decoration: none;
}
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 */
}

.card:hover {
    transform: scale(1.05); /* 카드를 약간 확대 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}

.find-text {
    display: inline-block;
    font-size: 15px;
    line-height: 17px;
    text-decoration: none;
    color: #888;
}

.find-wrap{
    padding: 20px 0 35px;
    text-align: center;
}

.find-wrap li {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
}

.login-container {
    display: flex;
    justify-content: center;
}
.login-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 500px;
    height: 500px;
}

.nav-header {
    color: black;
    text-decoration: none;
}

.navbar-collapse {
 justify-content: end;
}

.error-message {
    color: #dc3545; /* 빨간색 텍스트 색상 */
    font-size: 0.875em; /* 글씨 크기 */
    margin-top: 0.25rem; /* 필드 위에 조금의 여백을 제공 */
}

#categoryList {
    display: flex;
    flex-direction: column;

}

.card-body small{
    margin-bottom: 2px;
}

input[type="number"] {
        width: 50px; /* 너비 조절 */
        text-align: center;
}

/* ── 로그인 / 회원가입 화면 디자인 개편 (Industry 시스템 톤) ──
   구조는 그대로 두고, Bootstrap 기본 폼 스타일만 새 디자인으로 덮어씁니다. */
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }

.login-container, .signup-container {
    min-height: calc(100vh - 120px);
    align-items: center;
    background: var(--color-bg);
}

.login-form, .signup-form {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius);
    padding: 36px 40px;
    box-shadow: 0 3px 10px color-mix(in srgb, #2b2b2d 12%, transparent);
    height: auto;
}

.login-form .nav-header, .signup-form .nav-header {
    display: block;
    text-align: center;
    margin-bottom: 24px;
}

.login-form .nav-header h1, .signup-form .nav-header h1 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 22px;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.login-form .form-label, .signup-form .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.login-form .form-control, .signup-form .form-control {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.login-form .form-control:focus, .signup-form .form-control:focus {
    border-color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
    box-shadow: none;
}

.login-form .btn-primary, .signup-form .btn-primary {
    width: 100%;
    background: var(--color-accent);
    border-color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius);
    padding: 10px;
}

.login-form .btn-primary:hover, .signup-form .btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.login-form .alert-danger {
    background: color-mix(in srgb, #a5544a 12%, transparent);
    color: #a5544a;
    border: 1px solid color-mix(in srgb, #a5544a 30%, transparent);
    border-radius: var(--radius);
    font-size: 0.85rem;
    padding: 8px 12px;
}

.login-form .find-text {
    color: var(--color-text-muted);
}
.login-form .find-text:hover {
    color: var(--color-accent);
}