@charset "UTF-8";

/* CSS 추가 */
.kakao-map {
    margin-bottom: 40px;
}

.map-wrapper {
}

#map {
  width: 100%;
  height: 420px;
  border-radius: 12px;        /* 모서리 둥글게 (옵션) */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 그림자 효과 (옵션) */
}


/* ===== 이동 안내(지도 아래) ===== */
.move-section{
	
}
.venue-line{
  color:#0f172a;
  font-size: 18px;
}

.legend {
	margin: 20px 0;
    display: flex;
    gap: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 20px;
    border-radius: 6px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 400;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #eee; 
    color:#374151; 
    border-color:#e5e7eb;
}

.badge.on { 
  background: #0b3ea8;
  color: #fff;
  border: 1px solid #0b3ea8;
}

.badge:hover {
	opacity: 0.8;
}

.notice{
  margin: 2px 0 18px; 
  font-size:14px; 
  color:#0f172a;
  line-height: 1.4rem;
}

.notice span strong { color:var(--primary-color);}

.notice em {
  margin-left: 10px;
}

.notice .pc {
  display: block;
}

.notice .mo {
  display: none;
}

@media (max-width:600px){
  .notice .pc {
    display: none;
  }

  .notice .mo {
    display: block;
  }
}

/* 섹션 제목 (01./02.) */
.route-title{
  margin: 18px 0 10px;
  font-size: 16px; 
  font-weight: 600; 
  color:#0f172a;
}
.route-title .no{
  display:inline-grid; 
  place-items:center;
   border-radius:50%;
  background:#0b3ea8; 
  color:#fff; 
  font-weight:900;
   margin-right:4px;
   width: 30px;
    height: 30px;
}

.route-title.pc {
  display: block;
}

.route-title.mo {
  display: none;
}

.route-title.mo em {
  margin-left: 30px;
}

@media (max-width:600px) {
  .route-title.pc {
    display: none;
  }

  .route-title.mo {
    display: block;
  }
}

/* 표 */
.table-wrap{ margin-bottom: 26px; }

.route-table{
  width:100%; 
  border-collapse: collapse; 
  table-layout: fixed;
  border:1px solid #d8dee9;
  
}
.route-table thead th{
  background:#f8fafc; color:#0f172a; font-weight:800;
  padding:12px 10px; border:1px solid #e5e7eb; text-align:center;
  vertical-align:middle; line-height:1.35;
}
.route-table thead th .sub{
  display:block; margin-top:4px; font-weight:600; color:#fff; font-size:12px;
}
.route-table thead tr th {
  background:#193a8b; 
  color:#fff; 
  border-color:#17367f;
  border: 1px solid #fff;
}

.route-table tbody td{
  text-align:center; padding:14px 10px; color:#111827; font-size:14px;
  border:1px solid #e5e7eb; background:#fff;
  line-height: 1.2rem;
}
.route-table tbody tr:nth-child(odd) td{ background:#fbfdff; }

/* 캠퍼스 이미지 */
.venue-figure{
  margin: 10px 0 18px;
}
.venue-figure img{
  width: 100%;
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.section-title{
  display:flex; 
  align-items:center;
  gap:8px; 
  margin: 18px 0 10px;
  font-size:18px; 
  font-weight:800; color:#0f172a;
}
.section-title .bar{
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* 반응형 */
@media (max-width: 640px){
  .venue-line{ font-size:14px; }
  .route-title{ font-size:15px; }
  .route-table thead th, .route-table tbody td{ font-size:13px; padding:10px 8px; }
  .route-table {width: 700px;}
  .table-wrap {overflow-x: scroll;}
  .legend {flex-direction: column;}
}