:root{
  --yearbar-width: 800px;
}


/* 연도 스와이프 컨테이너 폭 제한 + 중앙 정렬 */
.yearbar{
  width: 100%;
  max-width: var(--yearbar-width);
  margin: 30px auto 12px;
}

/* 실제 스와이퍼 영역도 동일하게 맞춰주면 레이아웃이 안정적입니다 */
.year-swiper{
  width: 100%;
  max-width: var(--yearbar-width);
  margin: 0 auto;
  overflow: hidden;
}

.filter-buttons {
  max-width: 800px;
  margin: 0 auto 20px;
  display: flex;
  text-align: center;
  font-family: var(--font-main);
  font-size: 15px;
}

.filter-btn {
  flex: 1;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background: #ddd;
  color: #333;
  cursor: pointer;
  border-radius: 5px;
  font-family: var(--font-main);
  transition: background 0.5s, transform 0.5s, color 0.5s;
  font-weight: bold;
}

.filter-btn:hover {
  background: var(--color-main);
  color: #fff;
  transform: scale(1.05);
}

.filter-buttons button.active {
  background: var(--color-main);
  color: white;
  font-weight: bold;
}

.timeline {
  max-width: var(--yearbar-width);
  margin: 0 auto;
}

.year-group {
  margin-bottom: 30px;
}

.year-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-main);
  margin: 30px 0 10px;
  border-bottom: 3px solid #ccc;
  padding-bottom: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.timeline-item {
  background: white;
  margin-bottom: 15px;
  padding: 15px 20px;
  border-left: 5px solid var(--color-main);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.timeline-item h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-family: var(--font-main);
}

.timeline-item time {
  font-size: 14px;
  color: #888;
}

@media (max-width: 820px) {
  .ctt_history{
  padding: 16px;
}
}

@media (max-width: 600px) {
  .timeline-item {
    padding: 10px;
  }

  .timeline-item h3 {
    font-size: 16px;
  }

  .filter-buttons {
    flex-direction: column;
    gap: 5px;
  }
}


.yearbar-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.yearbar-head strong { font-weight:700; }
.yearbar-head .hint { font-size:12px; color:#6b7280; }

.year-swiper { padding: 4px 0; }
.year-swiper .swiper-slide {
  width: auto; white-space: nowrap;
  padding: 8px 14px; border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; cursor:pointer; user-select:none;
  font-size: 1em;
}
.year-swiper .swiper-slide.active {
  background: var(--color-main, #0ea5e9);
  color:#fff; border-color: transparent;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

.year-photo { margin: 14px 0 18px; text-align:center; }
.year-photo img { max-width:100%; height:auto; display:block; margin:0 auto; border-radius:10px; }
.year-photo figcaption { font-size: 13px; color:#6b7280; margin-top:6px; }

/* 연도 스와이프 힌트 화살표 */
.yearbar-hint {
  position: relative;
  width: var(--yearbar-width);
  margin: auto;
}
.yearbar-hint .hint-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;      /* 드래그 방해 안 함 */
  opacity: 0;                /* 기본은 숨김, JS가 보여줌 */
  transition: opacity .25s ease;
  z-index: 2;
}
.yearbar-hint .hint-left  { left: -40px; }   /* ⬅ 완전 왼쪽에 겹치지 않게 */
.yearbar-hint .hint-right { right: -40px; }  /* ⬅ 오른쪽도 동일 */

.yearbar-hint .hint-arrow svg {
  width: 16px; height: 16px;
  opacity: .8;
}

/* 깜빡이며 좌우 살짝 이동하는 힌트 애니메이션 */
@keyframes nudge-left  { 0% { transform: translate(-2px,-50%);} 50%{transform:translate(-6px,-50%);} 100%{transform:translate(-2px,-50%);} }
@keyframes nudge-right { 0% { transform: translate( 2px,-50%);} 50%{transform:translate( 6px,-50%);} 100%{transform:translate( 2px,-50%);} }

.yearbar-hint .hint-left.show  { opacity: 1; animation: nudge-left 1.2s ease-in-out infinite; }
.yearbar-hint .hint-right.show { opacity: 1; animation: nudge-right 1.2s ease-in-out infinite; }

/* 사용자 선호: 모션 감소 */
@media (prefers-reduced-motion: reduce) {
  .yearbar-hint .hint-arrow { animation: none !important; }
}

/* 사진 영역 통일 */
#year-photo-wrap {
  max-width: 800px;   /* 컨테이너 폭 (필요 시 조정) */
  margin: 20px auto;
  text-align: center;
}

#year-photo {
  width: 100%;
  height: 350px;         /* 원하는 고정 높이 */
  object-fit: cover;     /* 채우되 비율 유지, 넘치는 부분은 잘라냄 */
  border-radius: 8px;    /* 선택: 모서리 둥글게 */
  display: block;
  margin: 0 auto;
}

.yearbar-hint{ position: relative; }
.hint-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index: 2;    /* 스와이퍼 위로 */
  border:0; background:rgba(0,0,0,.06); backdrop-filter:saturate(120%) blur(2px);
  width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:.0; pointer-events:none; transition:opacity .2s;
}
.hint-left{  left: 4px; }
.hint-right{ right: 4px; }
.hint-arrow.show{ opacity:1; pointer-events:auto; }

/* 첫 콘텐츠 상단 여백: status / org_chart와 동일한 시각 간격 */
#ctt.ctt_history > #ctt_con {
  padding-top: 54px;
}

@media (max-width: 820px) {
  /* .ctt_history의 기존 16px 상단 패딩을 포함해 총 54px */
  #ctt.ctt_history > #ctt_con {
    padding-top: 38px;
  }
}
.hint-arrow svg{ width:20px; height:20px; }
.yearbar:hover .hint-arrow{ opacity:1; pointer-events:auto; } /* 호버 시 항상 보이게(선택) */