* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Pretendard', sans-serif; 
}

body { 
    background: #f4f7f6; 
    color: #333; 
    overflow: hidden; 
}

/* 상단바 */

.top-nav {
    display: grid; 
    grid-template-columns: 1fr 2fr 1fr; 
    align-items: center;
    padding: 0 30px; 
    background: #fff; 
    border-bottom: 1px solid #eee;
    height: 60px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000;
}
.nav-left .logo {
    color: #FF7675; 
    font-size: 20px; 
    font-weight: 800; 
}

.search-area { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
}

.search-bar {
    position: relative; 
    width: 100%; 
    max-width: 400px; 
}

.search-bar input {
    width: 100%; 
    padding: 10px 45px 10px 20px; 
    border-radius: 25px; 
    border: 1px solid #ddd; 
    background: #f9f9f9; 
    font-size: 14px; 
}

.icon-button {
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    border: none;
    background: none;
    cursor: pointer; 
    color: #FF7675; 
    display: flex; 
    align-items: center; 
}

.icon-button:hover {
    color: #ff5252; 
    transform: translateY(-50%) scale(1.1); 
}

.location-icon {
    width: 18px;
    height: 18px; 
}

/* 메인 레이아웃 (지도 꽉 차게) */
.main-container {
    display: flex; 
    height: calc(100vh - 60px); 
    margin-top: 60px; 
    width: 100%; 
}

#map { 
    flex: 1; 
    height: 100%; 
    width: 100%; 
    z-index: 1; 
    background-color: #e5e3df; 
}

/* 패널 */
.panel { 
    width: 380px; 
    background: #fff; 
    border-left: 1px solid #eee; 
    overflow-y: auto; 
    z-index: 10; 
    padding: 25px; 
}

.panel-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 20px; 
}

.panel-header h2 { 
    font-size: 20px; 
    font-weight: 700; 
}

.mbti-tag { 
    display: inline-block; 
    background: #FF7675; 
    color: #fff; 
    padding: 3px 8px; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: 600; 
    margin-top: 5px; 
}

.panel-body { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.info-section h4 { 
    font-size: 14px; 
    color: #777; 
    margin-bottom: 5px; 
}

.info-section p { 
    font-size: 13px; 
    line-height: 1.6; 
    color: #555; 
}

.status-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}

.congestion-box, .weather-box { 
    background: #f9f9f9; 
    padding: 15px; 
    border-radius: 12px; 
    border: 1px solid #eee; 
}

.label { 
    font-size: 12px; 
    color: #888; 
    display: block; 
    margin-bottom: 8px; 
}

.status { 
    font-size: 18px; 
    font-weight: 700; 
    color: #333; 
}

.msg { 
    font-size: 11px; 
    color: #777; 
    margin-top: 3px; 
}

.congestion-box.low .status { 
    color: #27ae60; 
}

.congestion-box.medium .status { 
    color: #f39c12; 
}

.congestion-box.high .status { 
    color: #e74c3c; 
}

.w-info { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 3px; 
}

.w-icon {
    font-size: 24px; 
}

.w-temp {
    font-size: 18px; 
    font-weight: 700; 
}

.w-msg { 
    font-size: 12px; 
    font-weight: 600; 
}

.w-dust { 
    font-size: 11px; 
    color: #888; 
    margin-top: 3px; 
}

.recommend-section h4 { 
    font-size: 15px; 
    font-weight: 700; 
    margin-bottom: 12px; 
}

.course-list { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.course-card { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    background: #fff; 
    border: 1px solid #f0f0f0; 
    border-radius: 10px; 
    padding: 12px; 
}

.course-idx { 
    width: 22px; 
    height: 22px; 
    background: #FF7675; 
    color: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    font-weight: 700; 
    flex-shrink: 0; 
}

.course-info strong { 
    font-size: 13px; 
    font-weight: 700; 
}

.course-info p { 
    font-size: 12px; 
    color: #666; 
    margin-top: 2px; 
}

/* MBTI 카드 마커 */
.mbti-marker-card {
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 10px; 
    text-align: center; 
    transition: all 0.3s ease; 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
}

.mbti-marker-card:hover {
    transform: scale(1.1); 
    z-index: 1000 !important; 
    box-shadow: 0 6px 15px rgba(255, 118, 117, 0.3); 
}


.mbti-name { 
    font-size: 16px;           /* 지역명 크기를 키움 */
    font-weight: 800; 
    color: #333; 
    margin-bottom: 2px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.mbti-type { 
    font-size: 12px;           /* MBTI 크기를 줄임 */
    color: #666; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
}

/* 혼잡도 단계별 색상 정의 */
.congestion-box.low .status { 
    color: #27ae60; 
}    /* 여유: 초록색 */

.congestion-box.medium .status { 
    color: #f39c12; 
} /* 보통: 주황색 */

.congestion-box.high .status { 
    color: #e74c3c; 
}   /* 붐빔: 빨간색 */

/* --- 🚀 AI 코스 추천 박스 디자인 추가 --- */

.ai-course-box { 
    margin-top: 15px; 
    /* 상단/하단은 20px, 왼쪽은 15px, 오른쪽은 '10px'로 줄여서 여백을 맞춥니다 */
    padding: 20px 10px 20px 15px; 
    background: #f8f9fa; 
    border-radius: 12px; 
    border-left: 5px solid #ff6b6b; 
    
    /* 🚀 핵심: 내부 요소들이 밖으로 튀어나가지 않게 계산 */
    box-sizing: border-box; 
}

.ai-course-title { 
    font-weight: 800; 
    color: #333; 
    margin-bottom: 12px; 
    font-size: 16px; 
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-course-content { 
    font-size: 14px; 
    color: #555; 
    line-height: 1.7; 
    white-space: pre-line; /* AI가 주는 줄바꿈(엔터)을 화면에 그대로 반영 */
    word-break: keep-all; /* 단어가 잘리지 않게 예쁘게 줄바꿈 */
}

/* AI가 답변을 불러오는 동안 보여줄 로딩 텍스트 스타일 */
.ai-course-content:empty::before {
    content: "지도에서 장소를 선택하면 AI가 코스를 추천해 드립니다!";
    color: #bbb;
}

/* style.css 하단에 추가 */

.course-item {
    background-color: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 12px;
    
    /* 🚀 강력 처방: 다른 모든 너비 제한을 무시하고 무조건 100%로 꽉 채워라! */
    width: 100% !important; 
    max-width: 100% !important; /* 혹시나 걸려있을 max-width까지 무력화 */
    
    /* 패딩 때문에 상자가 부모를 뚫고 나가지 않도록 방어 */
    box-sizing: border-box !important; 
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.course-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.course-number {
    background: #ff6b6b;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-place {
    font-weight: bold;
    color: #333;
}

course-reason {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.6; /* 줄 간격을 살짝 넓혀서 가독성을 높입니다. */
    
    /* 사진 속 텍스트가 정중앙이라 어색할 수 있으니, 왼쪽 정렬로 바꿔봅니다. */
    text-align: left; 
    
    /* 단어가 잘리지 않게 예쁘게 줄바꿈 */
    word-break: keep-all; 
    
    /* 위쪽 제목과의 간격을 줍니다. */
    margin-top: 10px;
}