/* static/style.css */

/* --- 1. 기본 설정 (모든 페이지 공통) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* 과제 제출용으로 아주 깔끔한 Pretendard 폰트 적용 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

body {
    background-color: #f4f7f6; /* 전체 바탕은 연회색 */
    color: #333;
    display: flex;
    justify-content: center;
    /* 로그인/회원가입은 세로 중앙 정렬을 위해 100vh 사용 */
    min-height: 100vh; 
}

/* --- 2. 로그인 & 회원가입 전용 스타일 (새로 추가) --- */
/* 화면 중앙에 하얀색 카드를 띄우는 스타일 */
.auth-wrapper {
    align-items: center; /* 세로 중앙 정렬 */
    width: 100%;
    display: flex;
    justify-content: center;
}

.auth-card {
    background-color: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* 부드러운 그림자 */
    width: 100%;
    max-width: 400px; /* 카드의 최대 너비 */
    text-align: center;
    border: 1px solid #ddd;
}

.auth-card h2 {
    color: #135B79; /* 다크 블루 포인트 컬러 */
    margin-bottom: 25px;
    font-size: 24px;
}

.auth-card input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.auth-card input:focus {
    border-color: #135B79;
    outline: none;
}

/* 로그인/회원가입 전용 꽉 찬 버튼 */
.auth-card button {
    width: 100%;
    padding: 12px;
    background-color: #135B79;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-card button:hover {
    background-color: #0B3D53;
}

.auth-card a {
    display: inline-block;
    margin-top: 15px;
    color: #135B79;
    text-decoration: none;
    font-size: 14px;
}

.auth-card a:hover {
    text-decoration: underline;
}


/* --- 3. 프로필 페이지 전용 스타일 --- */
/* 프로필 페이지는 상단 여백이 필요하므로 body 설정을 살짝 덮어씀 */
body.profile-body {
    padding-top: 40px;
    align-items: flex-start; /* 상단 정렬 */
}

/* 전체 컨테이너 설정 */
.container {
    width: 100%;
    max-width: 900px;
    position: relative;
    /* ⭐️ 핵심 추가: 박스가 아무리 많아져도 바닥과 최소 80px의 여유 공간을 둠! */
    margin-bottom: 80px; 
}

/* 상단 우측 버튼 구역 */
.top-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 30px;
}

/* 다크 블루 테두리 네모 버튼 */
.btn-dark {
    display: inline-block;
    background-color: #32537d;
    color: white;
    border: 2px solid #0B3D53;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-dark:hover {
    background-color: #1a5d7a;
}

/* ⭐️ 핵심 변경사항: 사진과 정보를 하나의 큰 다크 블루 박스로 통합 */
.profile-header {
    display: flex; /* 내부 가로 배치 (좌: 사진, 우: 정보) */
    gap: 40px;
    margin-bottom: 20px; /* 하단 박스들과의 간격 */
    align-items: center; /* 세로 중앙 맞춤 */

    /* 소개글 박스(.section-box)와 동일한 다크 블루 테마 적용 */
    background-color: #3790b7; 
    color: white;
    padding: 30px;
    border-radius: 16px;
    border: 2px solid #2b7391;
}

/* 통합 박스 내부 - 사진 구역 */
.profile-img-box {
    flex: 0 0 200px; /* 사진 너비 고정 (통합 박스 크기에 맞춰 살짝 줄임) */
}

.profile-img-box img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    /* 자체 테두리 삭제 (통합 박스 테두리가 있으므로) */
    border: none; 
}

/* 프사 없을 때 기본 회색 박스 */
.no-img {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    /* 어두운 배경 위에 뜨므로 연한 회색으로 변경 */
    background-color: rgba(255, 255, 255, 0.1); 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-weight: bold;
}

/* 통합 박스 내부 - 정보 구역 */
.profile-info {
    flex: 1; /* 나머지 공간 차지 */
    font-size: 18px; /* 글씨 크기 조정 */
    line-height: 1.8;
}

/* 항목 제목(Strong)에 포인트 컬러 적용 (어두운 배경이므로 연한 하늘색) */
.profile-info strong {
    font-weight: bold;
    color: #a0d8ef; 
}

/* --- 4. 하단 소개글 박스 영역 --- */
.sections-container {
    margin-top: 20px;
}

/* 소개글 개별 네모 상자 */
.section-box {
    background-color: #3790b7;
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    border: 2px solid #0B3D53;
    font-size: 18px;
    line-height: 1.5;
    white-space: pre-wrap; 
    text-align: left;
    margin-bottom: 15px;

    /* ⭐️ 추가된 마법의 코드: 긴 글자가 상자 밖으로 튀어나가지 못하게 강제로 줄바꿈! */
    word-break: break-all; 
    overflow-wrap: break-word; 
}

/* ⭐️ 제일 중요한 부분! HTML p 태그가 만드는 보이지 않는 2줄짜리 빈 공간 완벽 삭제 */
.section-box p {
    margin: 0 !important;
    padding: 0 !important;
}