/* ===== Theme & Reset (scoped, upgraded) ===== */
#history{
  /* Brand */
  --brand-1: rgb(168,85,247);
  --brand-1-08: rgba(168,85,247,.08);
  --brand-1-10: rgba(168,85,247,.10);
  --brand-1-12: rgba(168,85,247,.12);
  --brand-1-25: rgba(168,85,247,.25);
  --brand-1-35: rgba(168,85,247,.35);

  --brand-2: #0b32bd;
  --brand-2-08: rgba(11,50,189,.08);
  --brand-2-10: rgba(11,50,189,.10);
  --brand-2-12: rgba(11,50,189,.12);
  --brand-2-25: rgba(11,50,189,.25);
  --brand-2-35: rgba(11,50,189,.35);

  --ink-900:#0b1220;
  --ink-700:#334155;
  --ink-500:#64748b;

  --paper:#ffffff;

  /* Glass */
  --card:#ffffffcc;
  --glass-blur:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);

  /* Timeline geometry */
  --line-w: 2px;
  --node: 14px;               /* inner circle diameter */
  --node-border: 3px;         /* ring width */
  --year-gap: clamp(36px, 6vw, 72px);    /* line ↔ year-chip gap (wider) */

  /* Arms */
  --arm-w: clamp(0px, 10vw, 64px);         /* longer for nicer reach */
  --arm-h: 2px;
  --arm-gap: 6px;
}
#history, #history *{ box-sizing:border-box }

/* ===== Title ===== */
/* =========================
   KPI HERO (등불 합격자)
   ========================= */
#history .hero-kpi{
  --hero-radius: 26px;
  position: relative;
  max-width: 1100px;
  margin: 14px auto 30px;
  padding: clamp(26px, 6vw, 48px) clamp(18px, 4vw, 40px);
  border-radius: var(--hero-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.28)) ,
    radial-gradient(70% 120% at 0% 0%, var(--brand-1-12), transparent 60%),
    radial-gradient(70% 120% at 100% 0%, var(--brand-2-12), transparent 60%);
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:
    0 18px 42px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
  text-align: center;
  isolation: isolate; /* 내부 글로우가 밖으로 번지지 않도록 */
}

/* 은은한 장식 글로우 */
#history .hero-kpi::before,
#history .hero-kpi::after{
  content:'';
  position:absolute;
  width:420px; height:420px; border-radius:50%;
  filter: blur(42px);
  opacity:.35; z-index:0;
}
#history .hero-kpi::before{ left:-160px; top:-160px; background: radial-gradient(closest-side, var(--brand-1-25), transparent 70%) }
#history .hero-kpi::after{ right:-160px; top:-180px; background: radial-gradient(closest-side, var(--brand-2-25), transparent 70%) }

/* 상단 라벨/칩 */
#history .hero-kpi__label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--ink-700);
  letter-spacing: .06em;
}

#history .hero-kpi__chip{
  padding: .35rem .7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1-10), var(--brand-2-10));
  color: var(--ink-700);
  font-weight: 700;
  font-size: 14px;
}

/* 메인 숫자 */
#history .hero-kpi__value{
  position: relative;
  z-index:1;
  margin-top: clamp(8px, 1.6vw, 12px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
}
#history .hero-kpi__value .count-number{
  font-size: clamp(38px, 9vw, 92px);
  line-height: 1.05;
  font-weight: 900;
  background: linear-gradient(90deg, #8b5cf6 0%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  font-variant-numeric: tabular-nums;
}

/* 단위 */
#history .hero-kpi__unit{
  font-size: clamp(16px, 3.4vw, 24px);
  color: #0b32bd;
  font-weight: 800;
  letter-spacing: .02em;
}

/* 서브 텍스트 */
#history .hero-kpi__sub{
  margin-top: clamp(6px, 1.4vw, 10px);
  font-size: clamp(12px, 2.6vw, 14px);
  color: var(--ink-500);
  margin-top: 20px;
}

/* 아랫줄 포커스 라인 */
#history .hero-kpi:after{
  content:'';
  position:absolute; left: 10%; right:10%; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, transparent, var(--brand-1), var(--brand-2), transparent);
  opacity:.45;
}

/* 가벼운 등장 애니메이션 */
@keyframes kpiPop {
  0%   { transform: translateY(8px) scale(.98); opacity:0 }
  100% { transform: translateY(0)   scale(1);    opacity:1 }
}
#history .hero-kpi{ animation: kpiPop .6s cubic-bezier(.2,.7,.2,1) both }

/* 모바일 간격 튜닝 */
@media (max-width:480px){
  #history .hero-kpi{ margin: 6px auto 20px; }
}

/* ===== Timeline wrapper ===== */
#history .timeline{
  position:relative; z-index:0;
  max-width:1100px; margin:0 auto; padding:72px 0 96px;
  isolation:isolate; overflow:visible;
}

/* Center vertical line (with subtle flow) */
#history .timeline::before{
  content:''; position:absolute; inset:0 auto 0 50%;
  width:var(--line-w); transform:translateX(calc(-1 * var(--line-w) / 2));
  background:linear-gradient(180deg, var(--brand-1-12), var(--brand-2-35), var(--brand-1-12));
  background-size:100% 200%;
  animation:flowLine 7s linear infinite;
  box-shadow:0 0 20px var(--brand-1-12);
  z-index:0; pointer-events:none;
}
@keyframes flowLine{
  0%{ background-position:0 0 }
  100%{ background-position:0 200% }
}

/* ===== Items ===== */
#history .timeline-item{
  position:relative; width:50%; padding:48px 32px;
  opacity:0; transform:translateY(60px);
  transition:opacity .7s ease, transform .7s ease;
  overflow:visible; z-index:2;
}
#history .timeline-item.visible{ opacity:1; transform:translateY(0) }
#history .timeline-item.left{ left:0; text-align:right }
#history .timeline-item.right{ left:50%; text-align:left }

/* ===== Node (circle) ===== */
#history .timeline-item::after{
  content:''; position:absolute; top:0;
  width:var(--node); height:var(--node); border-radius:50%;
  /* inner white with soft brand glow */
  background:#fff;
  z-index:4;
}
#history .timeline-item.left::after{
  left:100%;
  border:var(--node-border) solid var(--brand-1);
  transform:translate(calc(-50% - var(--line-w)/2), -50%);
  box-shadow:0 0 0 6px var(--brand-1-08), 0 0 14px var(--brand-1-25), 0 4px 10px rgba(0,0,0,.12);
}
#history .timeline-item.right::after{
  left:0;
  border:var(--node-border) solid var(--brand-2);
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 6px var(--brand-2-08), 0 0 14px var(--brand-2-25), 0 4px 10px rgba(0,0,0,.12);
}

/* Ring pulse */
#history .timeline-item.visible::before{
  content:''; position:absolute; top:0;
  width:var(--node); height:var(--node); border-radius:50%;
  background:transparent; z-index:3; animation:ping 1.8s ease-out forwards;
  box-shadow:0 0 0 0 var(--brand-1-35);
}
#history .timeline-item.left.visible::before{ left:100%; transform:translate(calc(-50% - var(--line-w)/2), -50%) }
#history .timeline-item.right.visible::before{
  left:0; transform: translate(-50%, -50%); animation:ping2 1.8s ease-out forwards; box-shadow:0 0 0 0 var(--brand-2-35);
}

/* ===== Arms (require .arm element in DOM) ===== */
#history .timeline-item .arm{
  position:absolute; top:0; height:var(--arm-h); width:var(--arm-w);
  transform:translateY(-50%); z-index:2; pointer-events:none;
}
/* left: from centerline inward until node outer edge + gap */
#history .timeline-item.left .arm{
  right: calc((var(--line-w)/2) + (var(--node)/2 + var(--node-border)) + var(--arm-gap));
  background:linear-gradient(90deg, var(--brand-1), transparent);
}
/* right */
#history .timeline-item.right .arm{
  left: calc((var(--line-w)/2) + (var(--node)/2 + var(--node-border)) + var(--arm-gap));
  background:linear-gradient(90deg, transparent, var(--brand-2));
}

/* ===== Glass content card (stronger) ===== */
#history .content{
  position:relative; z-index:3;
  background: rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border:1px solid rgba(255,255,255,.45);
  border-radius:18px; padding:20px 30px;
  box-shadow: 0 10px 34px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
}
#history .content:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.36);
  box-shadow: 0 16px 44px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.55);
}
#history .content::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
  border-radius:inherit; pointer-events:none;
}
#history .content h3{ display:none !important }

/* Body text */
.timeline .content p:nth-of-type(1){ font-size:clamp(15px, 3vw, 22px);; font-weight:500; color:#1d1d1d; line-height:1.7 }
.timeline .content p:nth-of-type(2){ font-size:clamp(12px, 2.4vw, 16px); color:#555; margin-top:6px; line-height:1.7 }
.timeline .content p:nth-of-type(3){ font-size:clamp(12px, 2.4vw, 16px); color:#555; margin-top:6px; line-height:1.7 }

/* ===== Year chips (glow) ===== */
#history .timeline-item .year{
  position:absolute; top:0; z-index:5; display:inline-block;
  padding:.7rem 3.0rem; min-width:3.8em; text-align:center;
  font-weight:900; font-size:clamp(16px, 3.2vw, 22px); line-height:1; border-radius:999px; white-space:nowrap;
  letter-spacing:.02em;
}
#history .timeline-item.left .year{
  right: calc(var(--year-gap) + var(--line-w)/2);
  transform:translateY(-50%);
  color:#3b1c7a;
  background:linear-gradient(135deg, var(--brand-1-12), var(--brand-1-35));
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px var(--brand-1-25);
}
#history .timeline-item.right .year{
  left: calc(var(--year-gap) + var(--line-w)/2);
  transform:translateY(-50%);
  color:#0b2a94;
  background:linear-gradient(135deg, var(--brand-2-12), var(--brand-2-35));
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px var(--brand-2-25);
}

#history .count-number {
  font-size: clamp(16px, 3.4vw, 24px);
  color: #0b32bd;
  font-weight: 800;                 /* 원하면 굵게 */
  line-height: 1;                   /* 숫자 상하 여백 줄이기 */
  font-variant-numeric: tabular-nums;
}

.join-icon {
  height: 2.0rem;
  margin-right: 8px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); /* 약한 입체감 */
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* hover 시 살짝 반짝이는 느낌 */
.join-icon:hover {
  transform: scale(1.10);
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(11,50,189,0.6));
}

/* ===== Desktop hover micro interactions ===== */
@media (hover:hover) and (pointer:fine){
  #history .timeline-item.left .content:hover{  transform:translateY(-4px) translateX(-2px) }
  #history .timeline-item.right .content:hover{ transform:translateY(-4px) translateX( 2px) }
}

/* ===== Mobile ===== */
@media (max-width:768px){

  /* 모바일 전용 간격 */
  #history{
    --year-gap: 44px;    /* 연도칩을 라인에서 얼마나 떼는지 */
  }

  /* 타임라인 여백 & 라인 위치 고정 */
  #history .timeline{ padding:40px 0 64px }
  #history .timeline::before{
    left:24px;           /* 모바일 중심선 x = 24px */
    transform:none;
    z-index:0;
  }

  /* 아이템 공통: 전폭 + 좌측 여백 확보 */
  #history .timeline-item,
  #history .timeline-item.left,
  #history .timeline-item.right{
    width:100%;
    left:0;
    text-align:left;
    padding:36px 18px 36px 70px;  /* 카드가 라인/연도칩과 겹치지 않게 */
    z-index:2;
  }

  /* 노드/링: 라인 기준으로 고정 */
  #history .timeline-item::after{
    left:24px !important;
    transform:translate(-50%,-50%) !important;
    z-index:4;
  }
  #history .timeline-item.visible::before{
    left:24px !important;
    transform:translate(-50%,-50%) !important;
    z-index:3;
  }

  /* ⭐ 연도칩: 수평만 고정, 가로 가운데 이동(translateX 제거!) */
  /* 좌/우 아이템 모두 같은 규칙을 쓰도록 덮어쓰기 */
  #history .timeline-item .year{
    left: calc(24px + var(--year-gap)) !important; /* 라인에서 오른쪽으로 */
    right: auto !important;
    transform: translateY(-50%) !important;        /* X축 이동 제거 */
    display: inline-block !important;
    width: auto !important;
    z-index: 10;                                    /* 무엇보다 위 */
    white-space: nowrap;
  }

  /* 📌 arm(가로선) 완전 비표시 — 남는 보라 막대 원천 차단 */
  #history .timeline-item .arm,
  #history .timeline-item .arm::before,
  #history .timeline-item .arm::after{
    display:none !important;
  }

  /* 카드 모양: 데스크톱과 동일한 글래스 카드 유지 */
  #history .timeline-item .content{
    border-left:none !important;
    border-right:none !important;
    padding: 12px 18px;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  #history .timeline-item{ transition:none !important; transform:none !important; opacity:1 !important }
  #history .timeline-item.visible::before{ animation:none !important }
  #history .timeline::before{ animation:none !important }
}

/* ===== Print ===== */
@media print{
  #history .timeline::before{ background:#bbb !important; box-shadow:none !important }
  #history .content{
    background:#fff !important; border:1px solid #ddd !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
}

/* Pulse */
@keyframes ping{
  0%{   box-shadow:0 0 0 0 var(--brand-1-35) }
  80%{  box-shadow:0 0 0 18px var(--brand-1-10) }
  100%{ box-shadow:0 0 0 22px rgba(0,0,0,0) }
}
@keyframes ping2{
  0%{   box-shadow:0 0 0 0 var(--brand-2-35) }
  80%{  box-shadow:0 0 0 18px var(--brand-2-10) }
  100%{ box-shadow:0 0 0 22px rgba(0,0,0,0) }
}