/* k.html 전용 (다른 페이지에 영향 안 가도록 모두 .k-timeline 범위로 한정) */
.k-timeline {
  background-color: #000;
  color: #fff;
  font-family: "Noto Sans KR", "Open Sans", "Roboto", sans-serif;
  overflow-x: hidden;
}

/* 네비와 겹치지 않게 타임라인 섹션 아래로 내리기 */
.k-timeline #timeline-section {
  padding-top: 230px;   /* 필요하면 140~200px 사이로 조절 */
  padding-bottom: 120px;
  background-color: #000;
  position: relative;
  z-index: 1;
}

/* 타이틀 */
.k-timeline .page-title {
  text-align: center;
  margin: 0 0 50px;
  color: #fff;
  font-weight: 700;
}

/* 타임라인 래퍼 너비 제한 */
.k-timeline .container.narrow {
  max-width: 820px;
  margin: 0 auto;
}

/* 타임라인 수직 라인 */
.k-timeline .timeline {
  position: relative;
  padding: 10px 0 10px;
  min-height: 200px;
}

.k-timeline .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #fff;   /* 선명 */
  transform: translateX(-50%);
  z-index: 1;
}

/* 개별 아이템 */
.k-timeline .timeline-item {
  position: relative;
  padding: 28px 0;      /* 아이템 간 간격 (겹치면 이 값 키워) */
  min-height: 48px;
}

/* 점 */
.k-timeline .timeline-item .dot {
  position: absolute;
  top: 28px;            /* 텍스트 첫 줄과 수평 느낌 */
  left: 50%;
  transform: translate(-50%, 0);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15); /* 약한 링 */
}

/* 텍스트 박스 공통 */
.k-timeline .timeline-item .content {
  position: relative;
  max-width: 42%;
  color: #fff;
  background: transparent;
  line-height: 1.6;
}

/* 왼쪽/오른쪽 배치 */
.k-timeline .timeline-item .content-left {
  text-align: right;
  margin-right: calc(50% + 28px); /* 선에서 28px 떨어짐 */
}

.k-timeline .timeline-item .content-right {
  text-align: left;
  margin-left: calc(50% + 28px);  /* 선에서 28px 떨어짐 */
}

/* 폰트 사이즈 조정 (데스크톱 기본) */
.k-timeline .timeline-item .content {
  font-size: 1.05rem;
}

/* 사이드바(기존 스타일 유지되지만 이 페이지에서 색 살짝 보정해도 OK) */
.k-timeline .sidebar i {
  color: #50b7ef;
}

/* 푸터와 간격 확보 (겹칠 일 방지) */
.k-timeline footer {
  margin-top: 20px;
}

/* ===== 반응형: 모바일(<= 768px)에서 한 줄 레이아웃 ===== */
@media (max-width: 768px) {
  /* 네비가 더 높아지는 경우가 있어서 여유 더 줌 */
  .k-timeline #timeline-section {
    padding-top: 170px;
    padding-bottom: 80px;
  }

  /* 수직선: 화면 왼쪽으로 이동 */
  .k-timeline .timeline::before {
    left: 24px;           /* 화면 왼쪽 여백 + 선 위치 */
    transform: none;
  }

  /* 점: 수직선 위에 정확히 */
  .k-timeline .timeline-item .dot {
    left: 24px;
    transform: translate(-50%, 0);
  }

  /* 텍스트: 선 오른쪽에만 배치 (좌우 교차 X) */
  .k-timeline .timeline-item .content,
  .k-timeline .timeline-item .content-left,
  .k-timeline .timeline-item .content-right {
    max-width: 100%;
    margin: 0 16px 0 56px;  /* 왼쪽은 선/점 피해서 56px, 오른쪽은 16px 여백 */
    text-align: left;       /* 모두 왼쪽 정렬 (모바일 가독성 ↑) */
    font-size: 1rem;        /* 살짝 축소 */
  }

  /* 타이틀 여백 조정 */
  .k-timeline .page-title {
    margin-bottom: 36px;
    font-size: 1.4rem;
  }
}

/* 고해상도 데스크톱에서 글자/간격 보정(optional) */
@media (min-width: 1200px) {
  .k-timeline .timeline-item {
    padding: 32px 0;
  }
  .k-timeline .timeline-item .content {
    font-size: 1.1rem;
  }
}

.back-arrow {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.back-arrow:hover {
  background-color: rgba(255,255,255,0.8);
  color: #000;
}