@charset "utf-8";
/* ============================================================
   교회 연혁 타임라인 위젯 (church_history / default skin)
   대표색 #e36209 · KSO_Blooming 레이아웃 토큰 상속
   ============================================================ */
.kso-history{
  --hi-accent:#e36209;
  --hi-accent-soft:#f08437;
  --hi-accent-dark:#c25107;
  --hi-ink:#333;
  --hi-mute:#888;
  --hi-line:#e3e3e3;
  --hi-bg-soft:#fdf7f2;
  color:var(--hi-ink);
  -webkit-font-smoothing:antialiased;
}
.kso-history *{box-sizing:border-box;}

/* ---------- 머리말 ---------- */
.kso-history .hi-head{
  position:relative;
  padding:54px 0 40px;
  text-align:center;
  margin-bottom:52px;
  overflow:hidden;
}
.kso-history .hi-head:before{
  content:"";position:absolute;left:50%;top:0;
  width:620px;height:620px;margin-left:-310px;margin-top:-430px;
  background:radial-gradient(circle,rgba(227,98,9,.10) 0%,rgba(227,98,9,0) 68%);
  pointer-events:none;
}
.kso-history .hi-eyebrow{
  position:relative;
  display:inline-block;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--hi-accent);font-weight:700;margin-bottom:14px;
}
.kso-history .hi-head h2{
  position:relative;
  font-size:38px;line-height:1.25;margin:0 0 16px;color:#222;letter-spacing:-.02em;
}
.kso-history .hi-head h2 em{font-style:normal;color:var(--hi-accent);}
.kso-history .hi-head p{
  position:relative;
  font-size:15px;line-height:1.85;color:var(--hi-mute);margin:0 auto;max-width:620px;
}
.kso-history .hi-head .hi-rule{
  position:relative;display:block;width:56px;height:3px;
  margin:26px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--hi-accent) 0%,var(--hi-accent-soft) 100%);
}

/* ---------- 연혁 없음 ---------- */
.kso-history .hi-empty{
  padding:60px 0;text-align:center;color:var(--hi-mute);font-size:15px;
}

/* ---------- 타임라인 ---------- */
.kso-history .hi-timeline{position:relative;padding:0 0 30px;margin:0;list-style:none;}
.kso-history .hi-timeline:before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:2px;margin-left:-1px;
  background:linear-gradient(180deg,
    rgba(227,98,9,0) 0%,
    var(--hi-line) 6%,
    var(--hi-line) 94%,
    rgba(227,98,9,0) 100%);
}

/* 연대 라벨 */
.kso-history .hi-era{
  position:relative;z-index:2;
  text-align:center;margin:0 0 40px;
}
.kso-history .hi-era span{
  display:inline-block;
  padding:9px 26px;border-radius:999px;
  background:var(--hi-accent);color:#fff;
  font-size:19px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(227,98,9,.28);
}
.kso-history .hi-era.is-first{margin-top:0;}
.kso-history .hi-era:not(.is-first){margin-top:56px;}

/* 개별 항목 — 좌/우 교차는 .hi-right 로 제어
   (:nth-child 는 연대 라벨까지 세어 교차가 어긋나므로 쓰지 않는다) */
.kso-history .hi-item{
  position:relative;
  width:50%;padding:0 46px 34px 0;
  text-align:right;
}
.kso-history .hi-item.hi-right{
  margin-left:50%;
  padding:0 0 34px 46px;
  text-align:left;
}
.kso-history .hi-item:after{
  content:"";position:absolute;top:22px;right:-7px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--hi-accent-soft);
  box-shadow:0 0 0 4px #fff;
  transition:all .2s ease;
  z-index:3;
}
.kso-history .hi-item.hi-right:after{right:auto;left:-7px;}
.kso-history .hi-item:hover:after{
  background:var(--hi-accent);border-color:var(--hi-accent);
  transform:scale(1.18);
}

/* 카드 */
.kso-history .hi-card{
  display:block;position:relative;
  background:#fff;
  border:1px solid var(--hi-line);
  border-radius:6px;
  padding:22px 24px;
  text-decoration:none;color:inherit;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.kso-history a.hi-card:hover,
.kso-history a.hi-card:focus{
  text-decoration:none;color:inherit;
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:0 14px 32px rgba(74,40,14,.14);
}
.kso-history .hi-date{
  display:block;font-size:13px;font-weight:700;
  color:var(--hi-accent);letter-spacing:.04em;margin-bottom:8px;
}
.kso-history .hi-title{
  display:block;font-size:17px;font-weight:700;line-height:1.5;
  color:#222;margin:0 0 8px;letter-spacing:-.01em;
}
.kso-history .hi-desc{
  font-size:14px;line-height:1.75;color:#777;margin:0;
  word-break:keep-all;
}
/* 임직·은퇴 명단처럼 목록 구조인 본문 */
.kso-history .hi-desc.is-list{
  line-height:1.9;
}
.kso-history .hi-desc.is-list br + *,
.kso-history .hi-desc.is-list{
  word-break:keep-all;
}

/* 강조 */
.kso-history .hi-item.is-key .hi-card{
  background:linear-gradient(180deg,var(--hi-bg-soft) 0%,#fff 100%);
  border-color:rgba(227,98,9,.32);
}
.kso-history .hi-item.is-key:after{background:var(--hi-accent);border-color:var(--hi-accent);}
.kso-history .hi-badge{
  display:inline-block;margin-bottom:10px;
  padding:3px 10px;border-radius:3px;
  background:rgba(227,98,9,.10);color:var(--hi-accent-dark);
  font-size:11px;font-weight:700;letter-spacing:.06em;
}

/* 사진 */
.kso-history .hi-thumb{
  display:block;width:100%;height:auto;
  border-radius:4px;margin-bottom:14px;
  background:#f4efea;
  aspect-ratio:16/9;object-fit:cover;
}

/* 등장 애니메이션
   기본은 '보임'. JS 가 .js-anim 을 붙인 경우에만 숨겼다가 등장시킨다.
   (JS 실패·크롤러·구형 브라우저에서도 연혁이 항상 보이도록) */
.kso-history .hi-item .hi-card,
.kso-history .hi-era span{
  transition:opacity .55s ease,transform .55s ease,box-shadow .22s ease,border-color .22s ease;
}
.kso-history.js-anim .hi-item:not(.is-in) .hi-card,
.kso-history.js-anim .hi-era:not(.is-in) span{
  opacity:0;transform:translateY(18px);
}
@media (prefers-reduced-motion:reduce){
  .kso-history.js-anim .hi-item .hi-card,
  .kso-history.js-anim .hi-era span{opacity:1!important;transform:none!important;transition:none;}
}

/* 맺음 */
.kso-history .hi-end{
  position:relative;z-index:2;text-align:center;padding-top:8px;
}
.kso-history .hi-end i{
  display:inline-block;width:46px;height:46px;line-height:44px;
  border-radius:50%;background:#fff;
  border:2px solid var(--hi-line);color:var(--hi-accent-soft);font-size:17px;
}
.kso-history .hi-end p{margin:16px 0 0;font-size:14px;color:var(--hi-mute);}

/* ---------- 모바일: 좌측 단일 축 ---------- */
@media (max-width:767px){
  .kso-history .hi-head{padding:36px 0 28px;margin-bottom:34px;}
  .kso-history .hi-head h2{font-size:26px;}
  .kso-history .hi-head p{font-size:14px;}
  .kso-history .hi-head .hi-rule{margin-top:20px;}

  .kso-history .hi-timeline:before{left:9px;margin-left:0;}
  .kso-history .hi-item,
  .kso-history .hi-item.hi-right{
    width:100%;margin-left:0;
    padding:0 0 24px 34px;
    text-align:left;
  }
  .kso-history .hi-item:after,
  .kso-history .hi-item.hi-right:after{
    left:3px;right:auto;top:20px;
    width:12px;height:12px;
  }
  .kso-history .hi-era{text-align:left;margin-left:0;}
  .kso-history .hi-era span{font-size:16px;padding:7px 20px;}
  .kso-history .hi-era:not(.is-first){margin-top:40px;}
  .kso-history .hi-card{padding:18px 18px;}
  .kso-history .hi-title{font-size:16px;}
  .kso-history .hi-end{text-align:left;padding-left:0;}
}

/* ---------- 인쇄 ---------- */
@media print{
  .kso-history.js-anim .hi-item .hi-card,
  .kso-history.js-anim .hi-era span{opacity:1!important;transform:none!important;}
  .kso-history .hi-card{box-shadow:none;border:1px solid #ccc;}
}