/* =========================================
   1. 기본 초기화 및 레이아웃
   ========================================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
    padding-top: 70px; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
    flex: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    display: block;
}

/* 스크롤 없는 페이지 전용 (메인, 어휘학습 등) */
.no-scroll-page {
    height: calc(100vh - 70px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================================
   2. 버튼 스타일 통일 (핵심 수정!)
   ========================================= */
.btn-primary, .btn-secondary {
    /* 공통 크기 및 폰트 설정 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;             /* 기본적으로 꽉 차게 (필요시 조정 가능) */
    padding: 15px 30px;      /* 동일한 패딩 */
    border-radius: 12px;     /* 동일한 곡률 */
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    outline: none;
}

/* 메인 버튼: 파란색 */
.btn-primary {
    background-color: #4a90e2;
    color: white;
}
.btn-primary:hover {
    background-color: #357abd;
    transform: translateY(-2px);
}

/* 보조 버튼: 회색 */
.btn-secondary {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}
.btn-secondary:hover {
    background-color: #dbe2e8;
    transform: translateY(-2px);
}

/* 버튼 그룹 (나란히 배치할 때) */
.button-group {
    display: flex;
    gap: 10px;
    width: 100%;
}
.button-group .btn-primary, 
.button-group .btn-secondary {
    flex: 1; /* 가로로 공평하게 나눔 */
}

/* =========================================
   4. 기타 컴포넌트 (네비바, 카드, 챗봇 등 생략 - 기존 유지)
   ========================================= */

/* 네비게이션 바 스타일 */
.navbar {
    width: 100%;
    height: 70px;
    background-color: white;
    border-bottom: 1px solid #eee;
    position: fixed; /* 상단에 고정 */
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-container {
    width: 90%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon { font-size: 1.5rem; }
.logo-text { 
    font-size: 1.2rem; 
    font-weight: 800; 
    color: #4a90e2; 
}

.nav-menu {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: #666;
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-link:hover { color: #4a90e2; }

.nav-back-btn {
    background: #f0f4f8;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #4a90e2;
    cursor: pointer;
    font-weight: bold;
}

.nav-divider { color: #eee; margin: 0 5px; }


/* 4. 메인 화면 그룹핑 디자인 */
.hero-section {
    text-align: center;
    padding: 10px 0 20px; /* 간격 축소 */
}

.hero-section h1 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.menu-section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
    padding-left: 12px;
    border-left: 5px solid #4a90e2;
    text-align: left;
}

/* 5. 카드 그리드 (2열 배치) */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2열 고정 */
    gap: 15px; /* 간격 축소 */
}

.menu-card {
    background: white;
    padding: 15px 10px; /* 카드 내부 여백 축소 */
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.1);
}

.icon { font-size: 2.8rem; margin-bottom: 15px; }
.menu-title { font-weight: bold; font-size: 1.1rem; color: #333; margin-bottom: 8px; }
.menu-desc { font-size: 0.85rem; color: #777; line-height: 1.4; }

/* 6. 서브 페이지 공통 (체크리스트, 결과창) */
.guide-box {
    background-color: #fff;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    text-align: left;
    border-bottom: 3px solid #4a90e2;
}

.age-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.age-card {
    background: white;
    border: 2px solid #e1e4e8;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.age-card:hover {
    border-color: #4a90e2;
    background-color: #f8faff;
    transform: translateY(-3px);
}

.age-icon { font-size: 2rem; }
.age-title { display: block; font-weight: bold; color: #333; }
.age-desc { font-size: 0.8rem; color: #888; }

/* 7. 라디오 버튼 설문 스타일 */
.question-item {
    background: #fdfdfd;
    padding: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.q-text {
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
}

.rating-group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 모바일 대응 */
    gap: 10px;
}

.rating-group label {
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 숨김 처리 클래스 */
.hidden { display: none !important; }

:root {
    --blue: #4a90e2;
    --green: #2ecc71;
    --orange: #f39c12;
    --red: #e74c3c;
    --gray-bg: #f8f9fa;
}

.report-card {
    max-width: 650px;
    margin: 40px auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    padding: 20px;
}

/* 상단 헤더 영역 */
.report-header {
    padding: 40px 20px;
    text-align: center;
    background: #fdfdfd;
    border-bottom: 1px solid #f1f1f1;
}

.grade-badge {
    background: #eee;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 5px;
}

.child-name { font-weight: 700; font-size: 1.1rem; }

.score-section { margin: 10px 0; }

.score-circle {
    width: 130px;
    height: 130px;
    border: 8px solid var(--blue);
    border-radius: 50%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.score-val { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.score-max { font-size: 0.9rem; color: #aaa; margin-top: 5px; }

.status-summary { font-size: 1.8rem; font-weight: 800; margin-top: 30px; }

/* 바디 영역 */
.report-body { padding: 30px; }

.level-indicator {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 25px;
    background: #f0f7ff; /* JS에서 배경색 동적 변경 권장 */
}

.info-box {
    background: var(--gray-bg);
    border-radius: 12px;
    padding: 20px;
}

.info-item { padding: 15px 0; }
.info-item:first-child { padding-top: 0; }
.info-item.border-top { border-top: 1px solid #e5e5e5; }

.info-item label {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 8px;
}

.info-item p {
    margin: 0;
    font-size: 1.05rem;
    color: #333;
    line-height: 1.5;
}

.guide-message {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #999;
    text-align: center;
}

/* 푸터 버튼 */
.report-footer {
    padding: 20px 30px 40px;
    display: flex;
    gap: 12px;
}

.report-footer button {
    flex: 1;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: #357abd; }
.btn-secondary { background: #eee; color: #666; }

/***** 챗봇 스타일 *****/
/* 챗봇 런처(버튼) */
#chatbot-launcher {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #4a90e2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 2000;
    transition: transform 0.2s;
}
#chatbot-launcher:hover { transform: scale(1.1); }
.chat-icon { font-size: 30px; color: white; }

/* 챗봇 윈도우 - 기본(PC) 설정 */
#chatbot-window {
    position: fixed; 
    top: 50%;           /* 화면 세로 중앙 */
    left: 50%;          /* 화면 가로 중앙 */
    transform: translate(-50%, -50%); /* 정확히 정중앙으로 이동 */
    
    width: 90%;
    max-width: 900px;
    height: 80vh;
    background: white;   
    display: flex;
    flex-direction: column;
    z-index: 3000;       
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-radius: 15px;
    overflow: hidden;    
}

/* 2. 챗봇 버튼 본체 */
#chatbot-toggle-btn {
    background-color: #6495ED; /* 다정한 파란색 */
    color: white;              /* 글자는 깔끔한 흰색 */
    border: none;              /* 테두리 없애기 */
    width: 80px;               /* 동그란 모양을 위해 가로세로 고정 */
    height: 80px;
    border-radius: 50%;        /* 완벽한 원형! */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* 부드러운 그림자 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

/* 마우스를 올렸을 때만 아주 살짝 반응 */
#chatbot-toggle-btn:hover {
    background-color: #4169E1;
    transform: scale(1.05); /* 정말 살짝만 커지게! */
}

/* 모바일 환경 최적화 (화면 너비 600px 이하) */
@media (max-width: 600px) {
    #chatbot-window {
        top: 0;
        left: 0;
        transform: none; /* 중앙 정렬 해제 */
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        position: fixed; /* 모바일에서도 고정 */
    }

    #chatbot-launcher {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    /* 모바일에서 헤더를 조금 더 크게 해서 닫기 편하게 */
    .chatbot-header {
        padding: 20px;
        font-size: 1.1rem;
    }

    /* 입력창 여백 조정 */
    #chatbot-input-area {
        padding: 15px;
        padding-bottom: env(safe-area-inset-bottom); /* 아이폰 하단 바 대응 */
    }

    .menu-grid { grid-template-columns: 1fr; }
    .hero-section h1 { font-size: 1.5rem; }

    .question-item {
        padding: 15px; /* 20px에서 15px로 축소 */
        margin-bottom: 5px;
    }
    .rating-group {
        gap: 5px;
    }
    .vocab-container {
        gap: 10px; /* 간격 최소화 */
    }

    .flash-card {
        width: 70vw;       /* 가로를 화면 너비의 70%로 */
        height: 40vh;      /* 높이를 화면 높이의 40%로 대폭 축소! */
        min-height: 250px; /* 너무 작아지진 않게 최소값 설정 */
        border-radius: 20px;
    }

    #word-text {
        font-size: 3rem !important; /* 글자 크기도 카드에 맞게 조절 */
    }

    .vocab-controls {
        margin-top: 10px;
        transform: scale(0.9); /* 버튼 영역 전체를 살짝 축소 */
    }
}
#chatbot-window.hidden {
    display: none; /* 일단 숨겨둠 */
}

/* 챗봇 헤더 */
.chatbot-header {
    background: #4a90e2;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-radius: 10px 10px 0 0; /* 위쪽만 둥글게 */
}
.close-btn { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

/* 메시지 영역 */
#chatbot-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 550px; /* 메시지 영역을 더 크게 */
}
.msg { padding: 10px 15px; border-radius: 15px; max-width: 80%; font-size: 0.9rem; }
.bot { background: #f0f2f5; align-self: flex-start; }
.user { background: #4a90e2; color: white; align-self: flex-end; }

/* 입력 영역 */
#chatbot-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #eee;
}
#chat-input { flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 5px; outline: none; }
#chatbot-input-area button { background: #4a90e2; color: white; border: none; padding: 0 15px; margin-left: 5px; border-radius: 5px; cursor: pointer; }

/* 로딩 애니메이션 스타일 */
.dot-typing {
    display: flex;
    align-items: center;
    justify-content: center; /* 가운데 정렬 추가 */
    gap: 6px;
    padding: 12px;
    width: 60px; /* 로딩 바 크기 고정 */
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #4a90e2; /* 로딩 점 색상 */
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* 로딩 말풍선 전용 배경 (안 보일까봐 추가) */
.msg.loading {
    background-color: #f0f2f5 !important;
    border-radius: 15px 15px 15px 0px;
    margin-bottom: 10px;
    align-self: flex-start;
}

#word-text {
    font-size: clamp(2.5rem, 8vw, 4rem); /* 글자 크기도 유연하게 */
    color: #333;
    font-weight: 800;
}

.tap-guide { color: #888; font-size: 0.9rem; margin-top: 20px; }

/* --- 기초어휘 학습 레이아웃 --- */
/* 1. 전체 사전 틀 */
    .dictionary-wrapper {
        background: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        overflow: hidden;
        max-width: 800px;
        margin: 20px auto;
    }
    
    .dict-header {
        padding: 15px 20px;
        background-color: #f9fafb;
        border-bottom: 1px solid #eee;
    }
    
    .total-count {
        font-size: 0.85rem;
        color: #4a90e2;
        margin-left: 10px;
    }

    /* 2. 단어 카드 디자인 */
    .word-card {
        padding: 25px 30px;
        border-bottom: 1px solid #f1f1f1; /* 깔끔한 구분선 */
        transition: background 0.2s;
        display: flex;
        flex-direction: column;
    }
    
    .word-card:last-child { border-bottom: none; }
    .word-card:hover { background-color: #fcfcfc; }

    .word-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .word-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: #222;
        margin: 0;
    }

    .pos-tag {
        color: #888;
        font-size: 0.9rem;
    }

    .grade-badge {
        font-size: 0.75rem;
        padding: 2px 8px;
        border-radius: 4px;
        background: #f0f0f0;
        color: #666;
    }

    .btn-speaker {
        color: #4a90e2;
        cursor: pointer;
        font-size: 1.2rem;
    }

    .definition-text {
        font-size: 1.05rem;
        line-height: 1.6;
        color: #444;
        margin-top: 5px;
    }

    /* 3. 예쁜 페이징 디자인 */
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .custom-pagination {
        display: flex;
        list-style: none;
        padding: 0;
        gap: 5px;
    }

    .custom-pagination li a {
        display: block;
        padding: 8px 14px;
        border: 1px solid #e1e1e1;
        color: #333;
        text-decoration: none;
        border-radius: 4px;
        font-size: 0.9rem;
        transition: 0.2s;
    }

    .custom-pagination li.active a {
        background-color: #4a90e2;
        color: white;
        border-color: #4a90e2;
    }

    .custom-pagination li a:hover:not(.active) {
        background-color: #f8f9fa;
    }

    .custom-pagination li.disabled a {
        color: #ccc;
        pointer-events: none;
    }

/* 읽기 테스트 */
/* 읽기 연습 페이지 전용 스타일 */
.practice-page {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#full-paragraph {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px; /* 여백 살짝 조절 */
    text-align: left;
}

.reading-line {
    display: block;
    width: 100%;
    text-align: left;        /* 무조건 왼쪽 정렬 */
    font-size: 1.5rem;       /* 너무 크지 않은 적당한 크기 */
    margin-bottom: 12px;     /* 문장 간 여백 */
    color: #2c3e50;
    word-break: keep-all;    /* 단어 안 잘리게 */
    padding-left: 0;         /* 불필요한 여백 삭제 */
}

/* 녹음 컨트롤 버튼 영역 */
.record-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 녹음 시작 버튼 */
#startBtn {
    background-color: #ff4b5c; /* 녹음은 빨간색 계열이 직관적이야 */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px; /* 둥근 버튼 */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

#startBtn:hover {
    background-color: #e04352;
    transform: scale(1.05);
}

/* 녹음 종료 버튼 */
#stopBtn {
    background-color: #495057;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

#stopBtn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 상태 표시 메시지 */
#status {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
    font-style: italic;
}

/* 녹음 중일 때 깜빡이는 효과 (애니메이션) */
.recording-active {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 75, 92, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 75, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 75, 92, 0); }
}

/* 어휘 학습이나 메인처럼 한 화면에 다 보여야 하는 경우 */
.no-scroll-page {
    height: calc(100vh - 60px); /* 화면 높이에서 네비바 제외 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 읽기 테스트 페이지 전용 스타일 */
/* 학년 선택 컨테이너 */
.selection-box {
    text-align: center;
    padding: 40px;
    background-color: #f8f9fa;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}
.simple-big-btn {
    /* 1. 크기 및 폰트 */
    width: 300px;
    height: 80px;
    font-size: 1.5rem;
    font-weight: 800;
    
    /* 2. 색상 (유림아, 여기서 #4A90E2를 유림이 사이트 메인색으로 바꿔!) */
    background-color: #4A90E2; 
    color: white;
    
    /* 3. 테두리 및 모양 */
    border: none;
    border-radius: 15px;
    
    /* 4. 상태 처리 */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

/* 활성화 상태 효과 */
.simple-big-btn:not(:disabled):hover {
    background-color: #357ABD;
}

.simple-big-btn:not(:disabled):active {
    transform: scale(0.98);
}

/* 상태 메시지 스타일 */
.status-msg {
    margin-top: 20px;
    font-size: 18px;
    color: #666;
    height: 24px; /* 메시지가 바뀔 때 레이아웃 흔들림 방지 */
}
/* =========================================
   읽기 테스트 공통 레이아웃
   ========================================= */
   .scroll-viewport {
    width: 100%;
    max-width: 500px; /* 조금 더 넉넉하게 */
    height: 360px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border-radius: 25px;
    border: 5px solid #6495ED;
    margin: 0 auto 30px auto;
}

.word-column {
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding-top: 120px; /* 중앙 정렬용 */
}

/* [중요] 기본 단어 아이템 스타일 */
.word-item {
    width: 100%;
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px; /* 기본 크기 하향 조정 */
    font-weight: bold;
    color: #ddd;     /* 비활성화 상태는 연하게 */
    text-align: center;
    transition: all 0.3s ease;
    word-break: keep-all;
    padding: 0 20px;
    opacity: 0.5;
}

/* [핵심] 현재 활성화된 단어/문장 스타일 */
.word-item.active {
    color: #333 !important;
    opacity: 1 !important;
    transform: scale(1.1); /* 살짝 커지는 효과 */
}

/* 이미 지나간 단어 */
.word-item.passed {
    color: #6495ED;
    opacity: 0.3;
    transform: scale(0.8);
}

/* =========================================
   문장 테스트(Passage Mode) 최적화
   ========================================= */
   .reading-box {
    background-color: #fcfcfc;
    border: 2px solid #eef2f7;
    border-radius: 15px;
    padding: 25px;
    max-height: 400px; /* 높이 약간 조절 */
    
    /* 🔥 스크롤 설정 */
    overflow-y: scroll !important; /* 항상 스크롤 바 공간 확보 */
    line-height: 1.2; 
    font-size: 1.4rem; /* 아이들 읽기 편하게 살짝 조정 */
    
    word-break: keep-all;
    white-space: pre-wrap;
}

/* 크롬/사파리용 스크롤바 디자인 (직관적으로 보이게) */
.reading-box::-webkit-scrollbar {
    width: 12px; /* 스크롤바 너비 */
    display: block !important;
}

.reading-box::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}

.reading-box::-webkit-scrollbar-thumb {
    background: #4A90E2; /* 눈에 띄는 파란색 */
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

.reading-box::-webkit-scrollbar-thumb:hover {
    background: #357ABD;
}

/* 📱 모바일 최적화 */
@media (max-width: 600px) {
    .reading-box {
        font-size: 1.3rem; /* 모바일은 조금만 줄이기 (그래도 커야 함) */
        padding: 15px;
        max-height: 60vh; /* 화면 높이의 60%까지 차지하게 */
    }
}
/* 버튼들을 감싸는 전체 컨테이너 */
.controls {
    display: flex;
    flex-direction: column; /* 세로로 쌓기 */
    align-items: center;    /* 가운데 정렬 */
    gap: 20px;              /* 버튼 사이 간격 */
    margin-top: 40px;
}

/* 버튼 그룹 (가로 정렬) */
#active-controls, #result-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* 시작과 중지 버튼 사이 간격 */
}

/* 버튼 공통 스타일 수정 */
.record-btn, .stop-btn, .retry-btn, .next-btn {
    min-width: 180px; /* 버튼 크기를 일정하게 통일 */
    height: 60px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

/* 중지 버튼 (기본) */
.stop-btn {
    background-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

/* 중지 버튼 (활성) */
.stop-btn.enabled {
    background-color: #4a4a4a;
    color: white;
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 209, 55, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(76, 209, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 209, 55, 0); }
}
.timer-gauge {
    width: 100%;
    height: 6px;
    background: #eee;
    margin-top: 10px;
    overflow: hidden;
}

.timer-fill {
    height: 100%;
    background: #FFD700;
    width: 100%;
    /* 1.5초 동안 너비가 0으로 줄어드는 애니메이션 🐪✨ */
    animation: shrink 1.5s linear infinite;
}

@keyframes shrink {
    from { width: 100%; }
    to { width: 0%; }
}
/* 카운트다운 컨테이너 (단어 카드 위에 겹쳐서 보임) */
.countdown-overlay {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    font-weight: 900;
    color: #FF6B6B;
    z-index: 100;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: none; /* 평소엔 숨김 */
}

/* 숫자가 커졌다 사라지는 애니메이션 */
.countdown-anim {
    animation: zoomInOut 1s ease-in-out;
}

@keyframes zoomInOut {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.reading-unit {
    transition: all 0.3s ease;
    color: #ccc; /* 기본은 연한 회색 (아직 안 읽음) */
    display: inline-block;
    margin-right: 5px;
}

/* 현재 집중해야 할 문장 스타일 */
.reading-unit.active {
    color: #4a90e2;      /* 진한 파란색 */
    font-weight: bold;
    transform: scale(1.05); /* 살짝 커지는 효과 */
    background-color: #eef2f7; /* 배경에 하이라이트 */
    border-radius: 5px;
}

/* 이미 읽은 문장 스타일 */
.reading-unit.done {
    color: #333; /* 다시 검정색으로 */
}

/* 전체 컨테이너는 그대로 유지 */
.main-container {
    max-width: 800px; /* 가로로 넓어졌으니 너비 살짝 조정 */
    margin: 0 auto;
    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;    /* 가로축 가운데 정렬 */
    text-align: center;     /* 텍스트 가운데 정렬 */
    min-height: 80vh;
}

/* 안내 영역 컨테이너 */
.info-text-box {
    display: flex;
    justify-content: center;
    text-align: left;
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 25px;
    border: 1px solid #eee;
}

/* 기본 스타일 (PC 버전) */
.flow-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.guide-item {
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 0.9rem;
    white-space: nowrap; /* 글자 줄바꿈 방지 */
}

.arrow {
    color: #ccc;
}

/* 📱 모바일 버전 (화면 너비가 600px 이하일 때) */
@media (max-width: 600px) {
    .flow-guide {
        flex-direction: column; /* 세로로 쌓기 */
        gap: 5px;
    }
    
    .arrow {
        transform: rotate(90deg); /* ▶ 화살표를 아래 방향(▼)으로 돌리기 */
        margin: 5px 0;
    }

    .guide-item {
        width: 100%; /* 모바일에서 꽉 차게 */
        max-width: 200px;
    }
}

/* 학년 버튼 그리드 (모바일 2열 대응) */
.grade-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
@media (max-width: 480px) { .grade-buttons { grid-template-columns: repeat(2, 1fr); } }
.grade-item { padding: 20px; border: 1px solid #ddd; border-radius: 12px; cursor: pointer; background: white; transition: 0.3s; }
.grade-item:hover { background: #6495ED; color: white; }

.test-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.nav-step {
    font-size: 16px;
    font-weight: 500;
    color: #ccc; /* 기본 회색 */
}

.step-link {
    text-decoration: none;
    color: inherit;
    pointer-events: none; /* 기본적으로 클릭 방지 */
}

/* 현재 진행 중인 스텝 스타일 */
.nav-step.active {
    color: #6495ED; /* 파란색 강조 */
    font-weight: 700;
}

/* 이전 단계 (클릭 가능) 스타일 */
.nav-step.completed {
    color: #333;
    cursor: pointer;
}

.nav-step.completed .step-link {
    pointer-events: auto; /* 링크 활성화 */
    text-decoration: underline;
}

.nav-arrow {
    margin: 0 15px;
    color: #eee;
}
/* 문장 테스트 전용 스타일 */
.passage-mode {
    max-width: 600px; /* 단어보다 조금 더 넓게 */
    height: 400px;
}

.passage-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 22px;
}

/* 독해 전용 레이아웃 */
/* 전체 컨테이너: 중앙 정렬 및 너비 확보 */
#comprehension-inner-wrapper {
    display: flex;
    flex-direction: column; /* 위아래 배치 */
    gap: 30px;
    max-width: 1000px; /* 너무 넓으면 읽기 힘드니 적당히 조절 */
    margin: 0 auto;
    padding: 20px;
}

/* 위: 지문 영역 */
#passage-view {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    /* 지문이 너무 길면 어느 정도 높이에서 스크롤 생기게 */
    max-height: 500px; 
    overflow-y: auto;
}

/* 아래: 질문 영역 */
#question-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 개별 질문 카드 */
.comp-q-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #d1d9e6;
}

/* 음성 인식 버튼 스타일 */
.voice-rec-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    border-radius: 12px;
    border: 2px dashed #4a90e2;
    background: #f0f7ff;
    color: #4a90e2;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-rec-btn:hover {
    background: #e1efff;
}

.voice-rec-btn.recording {
    background: #ffeded;
    border-color: #ff4757;
    color: #ff4757;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/**** 마이페이지 스타일 ****/
.child-list-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.child-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
    border: 1px solid #eee;
    position: relative;
}

.child-info h5 { font-weight: 700; color: #333; margin-bottom: 5px; }
.child-info p { font-size: 0.85rem; color: #777; margin-bottom: 15px; }

.card-actions {
    display: flex;
    gap: 8px;
}

.btn-delete {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ff4d4f;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}

.content-box {
    margin-top: 20px;
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* 두 모달이 똑같은 크기를 갖도록 강제하기 */
.modal-content.content-box {
    width: 100%;             /* 부모(overlay) 안에서 유동적 */
    max-width: 450px;        
    margin: 0 auto;          /* 중앙 정렬 */
    padding: 30px;           /* 안쪽 여백 통일 */
    box-sizing: border-box;  /* 테두리 포함 계산 */
    
    background-color: #fff;
    border-radius: 15px;     
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.child-card {
    border-left: 5px solid #4A90E2; /* 기획안 포인트 컬러 */
    margin-bottom: 15px;
}

.section-title {
    border-left: 4px solid #4A90E2;
    padding-left: 15px;
    margin-bottom: 30px;
    font-weight: 700;
}

th {
    background-color: #f8f9fa !important;
    font-weight: 600;
    color: #555;
    vertical-align: middle;
}

.table {
    border-radius: 10px;
    overflow: hidden;
    border-style: hidden; /* 테두리 둥글게 보이기 위해 */
    box-shadow: 0 0 0 1px #dee2e6;
}

.table td {
    color: #333;
    padding: 12px 15px;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.85rem;
}

/* 테이블 기본 설정 */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

/* PC에서는 한 줄에 두 항목 (2컬럼 그리드) */
.info-table tbody {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 반반씩 나눠 가짐 */
}

/* 모바일/좁은 화면에서는 한 줄에 한 항목 */
@media (max-width: 768px) {
    .info-table tbody {
        grid-template-columns: 1fr;
    }
}

.info-table tr {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.info-table th {
    width: 120px;
    background-color: #f8f9fa;
    padding: 15px;
    text-align: center;
    border-right: 1px solid #eee;
    flex-shrink: 0;
}

.info-table td {
    padding: 15px;
    flex-grow: 1;
    background: white;
}

.child-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #eee;
}
.child-info-table tr {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.child-info-table th {
    width: 120px;
    background-color: #f8f9fa;
    padding: 15px;
    text-align: center;
    border-right: 1px solid #eee;
    flex-shrink: 0;
}

.child-info-table td {
    padding: 15px;
    flex-grow: 1;
    background: white;
}
/* --- 버튼 스타일 개선 --- */
/* 마이페이지 하단 관리 영역 */
.account-settings {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 30px; /* 텍스트 사이 간격 */
}

/* 텍스트 링크 스타일 */
.settings-link {
    background: none;
    border: none;
    padding: 0;
    color: #888; /* 기본은 은은한 회색 */
    font-size: 0.95rem;
    text-decoration: underline; /* 링크 느낌 살리기 */
    cursor: pointer;
    transition: color 0.2s;
}

.settings-link:hover {
    color: #444; /* 마우스 올리면 진해지게 */
}

/* 삭제나 탈퇴는 조금 더 조심스러운 느낌으로 */
.settings-link.danger {
    color: #ffaaaa; /* 연한 빨강으로 경고 느낌만 살짝 */
}

.settings-link.danger:hover {
    color: #ff4757; /* 마우스 올리면 확실한 빨강 */
}

/* 부모 박스 안에서 양 끝 정렬 */
.d-flex.justify-content-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
}

.btn-group {
    display: flex;
    gap: 10px; /* 버튼 사이 띄우기 */
}

/* 차트 캔버스 높이 조절 (너무 커지지 않게) */
canvas {
    max-height: 200px;
    width: 100% !important;
}

/* 자녀가 없을 때 보여주는 컨테이너 */
.no-child-container {
    text-align: center;
    padding: 60px 20px;
    background: #fdfdfd; /* 아주 연한 배경으로 구역만 살짝 표시 */
    border-radius: 15px;
    border: 1px dashed #e0e6ed; /* 점선으로 '비어있음' 느낌 */
    margin: 20px 0;
}

/* 안내 문구 스타일 */
.no-child-msg {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* 자녀 추가 텍스트 버튼 (안 못생긴 버전!) */
.add-child-link {
    background: none;
    border: none;
    padding: 0;
    color: #4a90e2; /* 포인트 컬러만 살짝 */
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline; /* 클릭 가능하다는 표시 */
    text-underline-offset: 5px;  /* 밑줄 간격을 줘서 더 세련되게 */
    cursor: pointer;
    transition: color 0.2s;
}

.add-child-link:hover {
    color: #2c3e50; /* 마우스 올리면 색이 진해짐 */
}

.input-field { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ddd; }

.select-field {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 1rem;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center; /* 화살표 위치 */
    background-size: 12px;
    
    cursor: pointer;
    transition: border-color 0.2s;
}

/* 포커스 되었을 때 input이랑 똑같이 */
.select-field:focus {
    outline: none;
    border-color: #4a90e2; 
}

/* 모달 전체 배경 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 검정 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px); /* 배경 살짝 흐리게  */
}

/* 모달 박스 */
.modal-content {
    background: white;
    padding: 25px;
    border-radius: 20px;
    width: 400px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: modalShow 0.3s ease-out; /* 나타날 때 애니메이션 */
}

@keyframes modalShow {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 취소 버튼 스타일 (회색톤으로 얌전하게) */
.btn-cancel {
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    margin-top: 20px;
}

.btn-cancel:hover {
    background: #bbb;
}

.modal-header h3 { margin: 10px 0; color: #333; }
.modal-icon { font-size: 2rem; }
.modal-body p { color: #666; line-height: 1.5; margin-bottom: 20px; }

/* 확인 버튼 */
.btn-confirm {
    background: #ff7e5f; 
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    margin-top: 20px;
}

.btn-confirm:hover { background: #feb47b; }

.child-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.child-table th {
    background-color: #f8f9fa;
    padding: 12px;
    border-bottom: 2px solid #eee;
    font-size: 0.9rem;
}

.child-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer; /* 마우스 손가락 모양 */
    transition: background 0.2s;
}

.child-table tbody tr:hover {
    background-color: #fff4f0; /* 유림이 포인트 컬러 연하게 */
}

.child-table tbody tr:active {
    background-color: #ffe0d5;
}

.required {
    color: #ff4d4f; 
    font-weight: bold;
    margin-left: 4px;
}

.input-error {
    border: 2px solid #ff4d4f !important;
    background-color: #fff2f0;
}

/* 전체 화면 덮기 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 살짝 투명한 흰색 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 최상단에 띄우기 */
}

/* 스피너 본체 */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #4A90E2; /* 유림이 사이트 메인 컬러로 바꿔도 돼! */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 로딩 텍스트 */
.loading-content p {
    margin-top: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* 회전 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.report-wrapper {
    max-width: 800px; 
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.report-main-title { text-align: center; color: #333; }

/* 점수 카드 디자인 */
.score-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(118, 75, 162, 0.2);
}

.score-card h1 { font-size: 3rem; margin: 10px 0; }
.score-card h1 span { font-size: 1.5rem; margin-left: 5px; }

/* 그래프 영역 */
.chart-section {
    background: white;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.canvas-container {
    position: relative;
    height: 200px; 
    width: 100%;
}

/* AI 코멘트 */
.ai-feedback-card {
    background: #f8faff;
    padding: 30px;
    border-radius: 25px;
    border: 1px solid #e1e8f0;
    line-height: 1.8;
}

/* 📱 모바일 대응 */
@media (max-width: 600px) {
    .report-wrapper { margin: 20px auto; }
    .score-card { padding: 25px; }
    .score-card h1 { font-size: 3rem; }
    .canvas-container { height: 200px; } 
}

/* practice.html 260204 ===================================*/
.practice-page {
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* 안내 */

.guide-box {
    text-align: center;
    margin-bottom: 30px;
}

.guide-box h2 {
    margin-bottom: 10px;
}

/* 문장 */

.sentence-box {
    text-align: center;
    margin-bottom: 25px;
}

.sentence-text {
    background: #f3f6ff;
    padding: 20px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1.6;
}

/* 다음 문장 */

#nextSentenceBtn {
    margin-top: 12px;
    border: none;
    background: #eee;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* 결과 */

#resultBox {
    background: #fafafa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

/* 녹음 버튼 */

.record-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

#startBtn, #stopBtn {
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}

#startBtn {
    background: #4f7cff;
    color: white;
}

#stopBtn {
    background: #ff4f4f;
    color: white;
}

/* 상태 */

#status {
    text-align: center;
    margin-top: 10px;
    color: #666;
}
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-box {
    background: white;
    padding: 30px 40px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px auto;
    border: 4px solid #ddd;
    border-top: 4px solid #4f46e5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* practice.html 260204 ===================================*/

/* footer */
/* 푸터 전체 컨테이너 */
.custom-footer {
    background-color: #fcfcfc;
    border-top: 1px solid #eeeeee;
    padding: 40px 20px 20px 20px;
    font-family: 'Pretendard', sans-serif;
    color: #666;
    margin-top: 50px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 가로 정렬 레이아웃 */
.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 200px; /* 화면 작아지면 자동으로 아래로 떨어짐 */
}

/* 텍스트 스타일 */
.footer-logo { color: #4A90E2; font-weight: bold; margin-bottom: 15px; }
.footer-title { color: #333; font-weight: bold; margin-bottom: 15px; font-size: 16px; }
.footer-text { font-size: 14px; line-height: 1.6; }
.footer-contact { font-size: 14px; margin-bottom: 5px; }

/* 링크 스타일 */
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { 
    text-decoration: none; 
    color: #888; 
    font-size: 14px; 
    transition: 0.3s;
}
.footer-links a:hover { color: #4A90E2; }

/* 하단 카피라이트 */
.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 13px;
    color: #aaa;
}