/* ==============================
   1. CSS 변수 설정 (색상 통합 관리)
   ============================== */
:root {
    /* 브랜드 컬러 */
    --primary-color: #7db4e6;   /* 쿠모 블루 */

    /* [라이트 모드] 기본 색상 */
    --bg-color: #fcfcfc;        /* 전체 배경 */
    --text-main: #333333;       /* 기본 글씨 */
    --text-strong: #000000;     /* 강조 글씨 (제목, 이름) */
    --text-desc: #888888;       /* 설명 글씨 (회색) */

    --card-bg: #ffffff;         /* 카드 배경 */
    --card-border: #f0f0f0;     /* 카드 테두리 */
    --card-shadow: rgba(0,0,0,0.03); /* 카드 그림자 */
}

/* [다크 모드] 색상 재정의 */
body.dark-mode {
    --bg-color: #1a1a1a;
    --text-main: #e0e0e0;       /* 어두운 배경 위엔 밝은 회색 */
    --text-strong: #ffffff;     /* 제목은 완전 흰색 */
    --text-desc: #a0a0a0;       /* 설명은 좀 더 밝은 회색 */

    --card-bg: #2d2d2d;         /* 카드 배경은 어두운 회색 */
    --card-border: #444444;     /* 테두리도 어둡게 */
    --card-shadow: rgba(0,0,0,0.5);
}

/* ==============================
   2. 기본 설정 & 레이아웃
   ============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
}

body {
    background-color: var(--bg-color); /* 변수 적용 */
    color: var(--text-main);           /* 변수 적용 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* 다크모드 전환 시 부드럽게 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 메인 컨테이너 */
.info-container {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 40px 60px; /* [수정] 상단 여백을 60px에서 100px로 늘림 (고정 헤더 대응) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==============================
   3. 상단 히어로 섹션
   ============================== */
.info-hero {
    text-align: center;
    margin-bottom: 80px;
    margin-top: 40px;
}

.cloud-icon-wrapper {
    margin-bottom: 20px;
}

.cloud-img-small {
    width: 100px;
    opacity: 0.8;
}

.main-copy {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;

    /* [수정] #000 -> 변수 사용 */
    color: var(--text-strong);
}

.main-copy .highlight {
    color: var(--primary-color);
}


/* ==============================
   4. 서비스 설명 섹션
   ============================== */
.service-desc-section {
    width: 100%;
}

.section-header {
    margin-bottom: 30px;
    text-align: left;
    padding-left: 10px;
}

.section-header h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 5px;

    /* [수정] #000 -> 변수 사용 */
    color: var(--text-strong);
}

.section-header p {
    font-size: 14px;
    font-weight: 400;

    /* [수정] #888 -> 변수 사용 */
    color: var(--text-desc);
}

/* ==============================
   5. 개발자 카드 & 애니메이션
   ============================== */
/* 스크롤 마스크 */
.scroller-container {
    width: 100%;
    overflow: hidden;
    /* 양 옆을 자연스럽게 흐릿하게 (다크모드에서도 자연스럽게 보이도록 투명도 조절) */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* 움직이는 트랙 */
.developer-cards.scroller-track {
    display: flex;
    gap: 20px;
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll-loop 30s linear infinite;
}

/* 마우스 올리면 멈춤 */
.scroller-container:hover .scroller-track {
    animation-play-state: paused;
}

/* 카드 디자인 */
.dev-card {
width: 280px;
    /* 🌟 240px에서 살짝 넓혀주면 훨씬 예쁩니다! */
    min-height: 200px;
    padding: 25px;
    border-radius: 16px;

    /* [수정] 배경, 테두리, 그림자 전부 변수로 교체 */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px var(--card-shadow);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;

    transition: transform 0.2s, background-color 0.3s, border-color 0.3s;
}

.dev-card:hover {
    transform: translateY(-5px);
    /* 호버 시 그림자 살짝 진하게 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* 카드 내부 멘트 */
.dev-card .comment {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;

    /* 🌟 핵심 수정: 폭주하는 일본어 텍스트 가두기 */
    word-break: break-word;
    /* 단어가 너무 길면 강제로 쪼개서 줄바꿈 */
    overflow-wrap: break-word;
    /* 박스를 넘어가는 텍스트 강제 줄바꿈 */

    /* [수정] #333 -> 변수 사용 */
    color: var(--text-main);
}

/* 프로필 영역 */
.dev-card .profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 아바타 아이콘 */
.profile .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

/* 아바타 색상 (얘네는 포인트 컬러라 유지) */
.avatar.orange { background-color: #ffebd9; color: #ff8b7b; }
.avatar.blue   { background-color: #e3f1fc; color: #7db4e6; }
.avatar.green  { background-color: #e6f6e8; color: #6ddb77; }
.avatar.gray   { background-color: #f0f3f5; color: #9aa5b1; }

.profile .info {
    display: flex;
    flex-direction: column;
}

.profile .info .name {
    font-size: 13px;
    font-weight: 800;

    /* [수정] #000 -> 변수 사용 (이름 흰색으로) */
    color: var(--text-strong);
}

.profile .info .role {
    font-size: 10px;
    margin-top: 2px;

    /* [수정] #999 -> 변수 사용 */
    color: var(--text-desc);
}

/* 애니메이션 키프레임 */
@keyframes scroll-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
}