:root{
    --accent:#111827; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
    --header-height: 56px; 
    --transition-duration: 0.3s; 
    --blue-accent: #1d6fef; /* 사장 CEO (신재원/송하윤) */
    --yellow-accent: #ffc107; /* 논의중 (Unknown) */
    --gradient-start: #ff7e5f; /* 핑크색 계열 시작 (밝은 산호색) */
    --gradient-end: #feb47b; /* 핑크색 계열 끝 (복숭아색) */
    
    /* 메뉴 관련 변수 추가 (terms.css에서 가져옴) */
    --pink-accent: #ff69b4; 
    --light-pink: #ffe6f0; 
    --darker-pink: #ff99cc; 
}

/* 폰트 적용 */
body :is(.header-title, .plus-btn, .action-btn, .message-text, .input-container textarea, .modal-grid-item, .modal-option, .thinking-indicator-text, button, .project-card, .project-page-title, .team-member-subtitle) {
    font-family: 'Elms Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
}

/* Material Symbols 아이콘 스타일 */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* 전체 레이아웃 */
* { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin:0; 
    background: #ffffff; 
    color:var(--accent); min-height:100vh;
    padding:0; overflow-x: hidden; 
    display: flex; 
    justify-content: flex-start;
    flex-direction: column;
}

/* .phone 컨테이너에서 max-width 제거하여 전체 너비 사용 */
.phone{
    width:100%; 
    min-height:100vh; 
    position:relative; 
    margin: 0;
    display:flex; 
    flex-direction:column;
}

/* --- 헤더 스타일 --- */
.header{
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:10px 16px; 
    height: var(--header-height); 
    border-bottom:none;
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; 
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(8px); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

.header-icon{ 
    width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#111827; cursor: pointer; flex-shrink: 0; 
}
.header-left-group { display: flex; align-items: center; }
.header-title a { 
    font-size: 18px; font-weight: 600; color: var(--accent); margin-left: 0; flex-shrink: 0; 
    text-decoration: none; 
}
.header-right-group { display: flex; align-items: center; gap: 10px; }
.header-center { text-align: left; display: flex; justify-content: flex-start; align-items: center; margin-left: 10px; }

/* PC 액션 버튼 스타일 */
.action-btn { 
    background-color: transparent; 
    color: var(--accent); 
    font-weight: 600; 
    padding: 4px 10px; 
    border-radius: 16px; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    font-size: 14px; 
    cursor: pointer; 
    line-height: 1.2; 
    margin-left: 10px;
    text-decoration: none; 
    transition: color 0.2s;
}

.action-btn:hover {
    color: var(--pink-accent); 
}

/* --- 메뉴 활성화 링크 스타일 추가 (terms.css에서 가져옴) --- */
.action-btn.active-link {
    background-color: var(--pink-accent); 
    color: #ffffff; 
    font-weight: 700;
}

.action-btn.active-link:hover {
    color: #ffffff; 
    background-color: var(--darker-pink);
}

.mobile-menu-dropdown a.active-link {
    background-color: var(--pink-accent); 
    color: #ffffff; 
    border: 1px solid var(--pink-accent);
}

.mobile-menu-dropdown a.active-link:hover {
    background-color: var(--darker-pink);
}
/* ------------------------------------------- */

/* PC 버전 메뉴 링크 컨테이너 (terms.css에서 가져옴) */
.pc-menu-links {
    display: flex; 
    align-items: center; 
    margin-left: 20px; 
}

/* --- 모바일 드롭다운 메뉴 스타일 (terms.css에서 가져옴) --- */
.mobile-menu-dropdown {
    position: fixed;
    top: var(--header-height); 
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    
    max-height: 0;
    opacity: 0;
    border-radius: 0 0 20px 20px; 
    overflow: hidden; 
    
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.1s ease-out,
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    padding: 0 16px; 
}

.mobile-menu-dropdown.is-open {
    max-height: 400px; 
    opacity: 1;
    padding: 10px 16px 16px 16px; 
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease-in, 
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-dropdown a {
    display: block;
    margin-bottom: 10px; 
    padding: 12px 20px;
    text-decoration: none;
    color: var(--accent);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    
    background-color: var(--light-pink); 
    border: 1px solid var(--darker-pink); 
    border-radius: 12px; 
    
    transition: background-color 0.2s, transform 0.1s;
}

.mobile-menu-dropdown a:hover {
    background-color: #ffdaeb; 
    transform: translateY(-1px);
}

.mobile-menu-dropdown a:last-child {
    margin-bottom: 0;
}
/* ------------------------------------------- */


/* 메인 콘텐츠 영역: 배경이 꽉 차도록 max-width와 margin을 제거하거나 조정 */
main {
    padding-top: var(--header-height); 
    padding-bottom: 20px; 
    width: 100%; 
    flex-grow: 1; 
    text-align: left;
    
    /* PC에서도 배경이 꽉 차도록 */
    max-width: none; 
    margin: 0; 
    padding-left: 0; 
    padding-right: 0; 
}

/* --- Team Recore 배경 섹션 (그라데이션 및 넓이 확장) --- */
.title-background {
    /* 배경을 핑크색 그라데이션으로 변경 */
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    
    /* 폰트 색상을 완전 흰색으로 변경 */
    color: #ffffff; 

    /* 배경 섹션은 이제 main의 자식이므로 main의 패딩과 margin-left/right를 신경쓰지 않고 100% 너비 */
    width: 100%; 
    
    /* 상하 패딩을 늘려서 배경 넓이 확장 */
    padding: 40px 16px 40px; /* 좌우 패딩 16px로 콘텐츠 정렬 유지 */
}

/* 'Project' 텍스트 스타일 */
.project-page-title {
    font-size: 2.2em;
    font-weight: 700;
    color: inherit; 
    margin-top: 0; 
    /* 다음 서브타이틀과의 간격을 위해 margin-bottom 조정 */
    margin-bottom: 8px; 
    display: block; 
    text-align: left;
    
    /* 배경 내부에서 텍스트가 중앙에 오도록 최대 너비 설정 및 중앙 정렬 */
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}

/* 새로운 '팀 리코어 구성원' 서브타이틀 스타일 */
.team-member-subtitle {
    font-size: 1.1em;
    font-weight: 400;
    color: inherit; /* 흰색 상속 */
    opacity: 0.9; /* 약간 투명하게 */
    margin-bottom: 0;
    display: block;
    text-align: left;
    
    /* 배경 내부에서 텍스트가 중앙에 오도록 최대 너비 설정 및 중앙 정렬 */
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}


/* --- 프로젝트 카드 컨테이너 (정렬 및 간격 띄우기) --- */
.project-grid {
    display: grid;
    /* 배경 섹션 아래에 20px 띄우기 */
    margin-top: 20px; 
    grid-template-columns: 1fr; 
    gap: 20px;
    width: 100%;

    /* 카드 그리드는 title-background 콘텐츠와 동일한 위치에 맞춤 */
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px; 
    padding-right: 16px; 
}

/* --- 프로젝트 카드 스타일 (애플 스타일 블러 적용) --- */
.project-card {
    /* 카드 배경 투명도를 낮춤 */
    background: rgba(255, 255, 255, 0.7); 
    /* 애플 스타일 블러 적용 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(224, 224, 224, 0.5); /* 테두리도 약간 투명하게 */
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; 
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* --- 프로필 이미지 스타일 --- */
.profile-image {
    width: 80px; 
    height: 80px; 
    border-radius: 50%; /* 둥글게 처리 */
    object-fit: cover; 
    margin-bottom: 15px; 
    border: 3px solid #f0f0f0; 
}

.card-title {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 5px;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

/* 상태별 색상 */
.status-text.developing { color: var(--blue-accent); } /* 사장 CEO */
.status-icon.developing { color: var(--blue-accent); }

.status-text.discussing { color: var(--yellow-accent); } /* 기존 논의중 색상 유지 */
.status-icon.discussing { color: var(--yellow-accent); }

.card-description {
    color: #555;
    font-size: 1em;
    line-height: 1.5;
    flex-grow: 1; 
}

/* --- 미디어 쿼리 (terms.css 및 team.css 통합) --- */

/* 모바일 환경 (768px 이하): 메뉴 아이콘 표시, PC 버튼 숨김 */
@media (max-width: 768px) {
    /* Header (terms.css) */
    .pc-menu-links {
        display: none; 
    }
    .mobile-only {
        visibility: visible;
        display: flex; 
    }
    
    /* Team Content (team.css) */
    .title-background {
        padding: 30px 16px 30px; 
    }

    .project-page-title { 
        font-size: 1.8em; 
        margin-top: 0; 
        margin-bottom: 8px;
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
    }

    .team-member-subtitle {
        font-size: 1em;
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
    }
    
    .project-grid {
        grid-template-columns: 1fr; /* 모바일에서 1열로 변경 */
        margin-top: 20px; 
        max-width: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        padding-left: 16px; 
        padding-right: 16px;
    }
    
    .card-title { font-size: 1.5em; }
    .card-description { font-size: 0.9em; }
    
    .profile-image {
        width: 60px; 
        height: 60px; 
    }
}

/* PC 환경 (769px 이상): 메뉴 아이콘 숨김, PC 버튼 표시 */
@media (min-width: 769px) {
    /* Header (terms.css) */
    .menu-icon {
        display: none !important; 
    }
    .pc-menu-links {
        display: flex; 
    }
    .header {
        justify-content: flex-start; 
        padding: 10px 30px; 
    }
    .mobile-menu-dropdown {
        display: none !important; 
    }

    /* Team Content (team.css) */
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px; 
        margin-left: auto; 
        margin-right: auto;
        padding-left: 16px; 
        padding-right: 16px;
        margin-top: 20px;
    }
}