/* 1. 전체 레이아웃 */
main {
    max-width: 800px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 50px;
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. 제목 및 입력창 */
h3 {
    width: 500px;
    font-size: 16px;
    font-weight: 700;
    margin: 25px 0 10px;
    text-align: left;
}

.signUp-input, .signUp-input-area {
    width: 500px;
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
    flex: 1;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
}

/* 3. 유효성 검사 메시지 */
.signUp-message {
    width: 500px;
    font-size: 13px;
    margin-top: 8px;
    text-align: left;
}
.confirm { color: green !important; }
.error { color: red !important; }

/* 4. 버튼 색상 통일 (#332211) */
button[type="button"], #signUpBtn {
    background-color: #452829;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

button[type="button"] { height: 48px; padding: 0 20px; white-space: nowrap; }

button[type="button"]:disabled {
    height: 48px;
    padding: 0 20px;
    background-color: #b8b1b1;
    color: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
    opacity: 0.7;
}


#signUpBtn {
    width: 500px;
    height: 60px;
    font-size: 18px;
    margin: 50px 0;
}

/* 5. 취미 영역 (화면 흔들림 방지 및 디자인) */

/* 제목+박스가 들어갈 자리를 미리 확보 (흔들림 방지 핵심) */
.signUp-input:has(#mainCategoryArea) {
    flex-direction: column;
    align-items: center;
    min-height: 350px; 
}

#mainCategoryArea {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

/* 👇 (중요) 이 부분이 빠져 있어서 다시 넣었습니다! (버튼 모양 만들기) */
#mainCategoryArea label {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: white;
    font-size: 13px;
    cursor: pointer;
}

#mainCategoryArea input[type="radio"] { display: none; }

#mainCategoryArea label:has(input:checked) {
    background-color: #fff57e;
    color: #452829;
    border-color: #fff57e;
    font-weight: 700;
}
/* 👆 여기까지 추가된 부분 */

/* 세부 취미 제목 스타일 */
#subTitle {
    width: 100%;
    text-align: left;
    margin-top: 15px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
}

/* ⭐ 세부 취미 박스 고정 (스크롤바 포함) ⭐ */
#CategoryArea {
    width: 100%;
    height: 200px; /* 높이 고정 */
    overflow-y: auto; /* 스크롤 생성 */
    margin-top: 10px;
    padding: 15px;
    background-color: #fafafa;
    border: 1px dashed #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

/* 스크롤바 디자인 */
#CategoryArea::-webkit-scrollbar {
    width: 6px;
}
#CategoryArea::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px;
}

/* 세부 취미 개별 항목 */
#CategoryArea label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    flex-shrink: 0;
}

/* 6. 소개글 */
#introdution {
    width: 500px !important;
    height: 180px !important;
    padding: 15px !important;
    resize: none;
}

/*---------------------------*/

/* ================================================
   반응형 미디어 쿼리 (4단계)
================================================ */

/* --- Tablet (768px ~ 1199px) --- */
@media (max-width: 1199px) {
    main {
        max-width: 700px;
    }
}

/* --- Mobile L (480px ~ 767px) --- */
@media (max-width: 767px) {
    main {
        max-width: 95%;
        margin: 36px auto;
        padding: 0 16px;
    }

    h1 {
        font-size: 26px;
        margin-bottom: 36px;
    }

    h3 {
        width: 100%;
    }

    .signUp-input,
    .signUp-input-area {
        width: 100%;
        flex-wrap: wrap;
    }

    .signUp-message {
        width: 100%;
    }

    /* 취미 영역 */
    #mainCategoryArea {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    #signUpBtn {
        width: 100%;
        height: 54px;
        font-size: 16px;
        margin: 36px 0;
    }

    #introdution {
        width: 100% !important;
    }
}

/* --- Mobile S (~ 479px) --- */
@media (max-width: 479px) {
    main {
        margin: 24px auto;
        padding: 0 12px;
    }

    h1 {
        font-size: 22px;
        margin-bottom: 28px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea {
        height: 44px;
        font-size: 14px;
    }

    button[type="button"] {
        height: 44px;
        padding: 0 14px;
        font-size: 13px;
    }

    #signUpBtn {
        height: 48px;
        font-size: 15px;
    }

    #CategoryArea {
        height: 160px;
    }
}