@charset "utf-8";
/* ============================================================
   교회 연혁 — sn12 형식 스킨 (연도 탭 + 연도/월일 목록)
   기존 sn12.or.kr 연혁 페이지의 구조를 그대로 따르되
   포인트 색상만 #00a29a 로 맞췄다.

   모든 규칙을 .kso-history-sn12 하위로 한정한다.
   (사이트 자체의 .history_page 스타일과 섞이지 않게 하기 위함)
   ============================================================ */
.kso-history-sn12{
  --hs-accent:#00a29a;
  --hs-accent-soft:#33b8b1;
  --hs-accent-dark:#00776f;
  --hs-line:#e4e4e4;
  --hs-ink:#555;
  --hs-mute:#aaa;
  color:var(--hs-ink);
  -webkit-font-smoothing:antialiased;

  /* 위젯이 놓이는 자리에 col-xs-12 같은 그리드 클래스가 없어도
     부모 폭을 넘지 않도록 스스로 폭을 제한한다.
     (레이아웃에 따라 위젯이 그리드 밖에 놓이는 경우가 있다) */
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:hidden;      /* 어떤 경우에도 가로로 삐져나가지 않게 */
  word-break:break-word;
}
.kso-history-sn12 *{box-sizing:border-box;max-width:100%;}

/* ---------- 머리말 ---------- */
.kso-history-sn12 .hs-head{
  margin:0 0 26px;
  padding-bottom:16px;
  border-bottom:1px solid var(--hs-line);
}
.kso-history-sn12 .hs-head h3{
  margin:0 0 8px;
  font-size:26px;font-weight:700;color:#222;letter-spacing:-.02em;
}
.kso-history-sn12 .hs-head h3 em{font-style:normal;color:var(--hs-accent);}
.kso-history-sn12 .hs-head p{
  margin:0;font-size:14px;line-height:1.75;color:var(--hs-mute);
}

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

/* ---------- 본체 ---------- */
/* 좌측 탭 + 우측 목록.
   연도가 많으면(47개 등) 탭 기둥이 본문보다 훨씬 길어진다.
   예전처럼 absolute + overflow:hidden 으로 두면 탭이 잘리고
   선택한 연도와 본문이 어긋나 보이므로, flex 2단으로 나란히 둔다. */
.kso-history-sn12 .history_page{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:0;
  min-height:300px;
}

/* 연도 탭 (좌측) — 연대별처럼 탭이 적을 때 */
.kso-history-sn12 .history_tab{
  flex:0 0 15.5%;
  max-width:15.5%;
  padding-top:1px;
}

/* ------------------------------------------------------------
   연도별(그룹 단위 = 연도) — 탭이 수십 개가 되므로
   좌측 기둥 대신 상단에 가로로 흘려 배치한다. 스크롤이 생기지 않는다.
   ------------------------------------------------------------ */
.kso-history-sn12 .history_page.hp-top{
  display:block;
}
.kso-history-sn12 .history_page.hp-top .history_tab{
  display:flex;
  flex-wrap:wrap;          /* 넘치면 반드시 다음 줄로 */
  gap:0;
  flex:none;
  max-width:100%;
  width:100%;
  margin-bottom:18px;
  padding-top:0;
  border-top:1px solid var(--hs-line);
  border-left:1px solid var(--hs-line);
  overflow:hidden;         /* 어떤 경우에도 가로로 삐져나가지 않게 */
}
.kso-history-sn12 .history_page.hp-top .history_tab .btn_tab{
  flex:0 0 auto;
  min-width:72px;
  margin-top:0;
  height:38px;line-height:38px;
  font-size:14px;
  border:0;
  border-right:1px solid var(--hs-line);
  border-bottom:1px solid var(--hs-line);
}
.kso-history-sn12 .history_page.hp-top .history_list.active{
  margin-left:0;
}

.kso-history-sn12 .history_tab .btn_tab{
  display:block;position:relative;
  margin-top:-1px;
  height:50px;line-height:50px;
  text-align:center;text-decoration:none;
  font-size:16px;color:#888;
  border-top:1px solid var(--hs-line);
  border-bottom:1px solid var(--hs-line);
  background:#fff;
  z-index:10;
  transition:color .15s ease,background .15s ease;
}
.kso-history-sn12 .history_tab .btn_tab:hover{
  color:var(--hs-accent);text-decoration:none;
}
.kso-history-sn12 .history_tab .btn_tab.active{
  color:#fff;
  border-color:var(--hs-accent);
  background:var(--hs-accent);
  z-index:20;
}

/* 연도별 목록 */
/* 우측 목록 영역 — 활성 연도 하나만 보인다 */
.kso-history-sn12 .history_list{
  display:none;
  margin:0;padding:0;
  border-top:1px solid var(--hs-accent);
}
.kso-history-sn12 .history_list.active{
  display:block;
  flex:1 1 auto;
  min-width:0;
  margin-left:1.5%;
}
.kso-history-sn12 .history_list li{
  position:relative;
  margin:0;
  padding:9px 0 9px 14%;
  border-bottom:1px solid var(--hs-line);
  list-style-type:none;
}

/* 좌측 연도 */
.kso-history-sn12 .history_list .year{
  position:absolute;left:0;top:10px;
  margin:0;
  width:15%;height:30px;line-height:30px;
  text-align:center;
  font-size:28px;font-weight:500;
  color:var(--hs-accent);
}
/* 같은 해가 반복되므로 첫 줄만 보이게 한다 */
.kso-history-sn12 .history_list .year ~ .year{display:none;}

/* 각 항목 */
.kso-history-sn12 .history_list .text{
  position:relative;
  margin:0;
  padding:3px 0 3px 22%;
  line-height:24px;
  font-size:16px;
  color:var(--hs-ink);
  word-break:keep-all;
}
.kso-history-sn12 .history_list .text .month{
  display:block;position:absolute;left:0;top:4px;
  width:20%;height:24px;line-height:24px;
  text-align:center;
  font-size:15px;color:var(--hs-mute);
  letter-spacing:.02em;
}
.kso-history-sn12 .history_list .text .hs-link{
  color:var(--hs-ink);text-decoration:none;
}
.kso-history-sn12 .history_list .text .hs-link:hover{
  color:var(--hs-accent);text-decoration:underline;
}

/* 배지 */
.kso-history-sn12 .hs-badge{
  display:inline-block;
  margin-left:6px;padding:1px 8px;
  border-radius:3px;
  background:rgba(0,162,154,.10);
  color:var(--hs-accent-dark);
  font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.06em;
  vertical-align:middle;
}

/* 보조 설명 (제목과 내용이 다를 때만) */
.kso-history-sn12 .hs-desc{
  display:block;
  margin-top:2px;
  font-size:14px;line-height:1.7;
  color:#888;
}

/* ---------- 반응형 ---------- */
@media only screen and (max-width:768px){
  /* 모바일에서는 위/아래 2단으로 쌓는다 */
  .kso-history-sn12 .history_page{
    display:block;
    padding-left:0;
  }

  /* 모바일도 탭을 가로로 흘려 스크롤이 생기지 않게 한다 */
  .kso-history-sn12 .history_tab{
    display:flex;
    flex-wrap:wrap;
    flex:none;max-width:none;
    padding:0;margin-bottom:3%;
    width:100%;
    max-height:none;
    overflow:visible;
    border-top:1px solid var(--hs-line);
    border-left:1px solid var(--hs-line);
  }
  .kso-history-sn12 .history_list.active{
    margin-left:0;
  }
  /* 탭은 내용 폭만큼만 차지하고 줄바꿈으로 흘린다.
     연도별(hp-top) 규칙이 선택자 우선순위가 높아 모바일에서 덮어쓰지 못하므로
     같은 선택자 깊이로 한 번 더 지정한다. */
  .kso-history-sn12 .history_tab .btn_tab,
  .kso-history-sn12 .history_page.hp-top .history_tab .btn_tab{
    flex:0 0 16.666%;          /* 한 줄에 6개 ('년' 을 뗀 짧은 라벨 기준) */
    width:16.666%;
    min-width:0;               /* 좁은 화면에서 고정폭이 넘치지 않게 */
    margin-top:0;
    padding:0 2px;
    height:34px;line-height:34px;
    font-size:12px;
    border:0;
    border-right:1px solid var(--hs-line);
    border-bottom:1px solid var(--hs-line);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* 연도별 탭 영역도 모바일에서 줄바꿈되게 (hp-top 데스크톱 규칙 덮어쓰기) */
  .kso-history-sn12 .history_page.hp-top .history_tab{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    max-width:none;
    margin-bottom:14px;
  }

  .kso-history-sn12 .history_list li{padding-left:70px;}
  .kso-history-sn12 .history_list .year{
    width:64px;font-size:20px;top:12px;
  }
  .kso-history-sn12 .history_list .text{
    padding-left:88px;font-size:15px;
  }
  .kso-history-sn12 .history_list .text .month{
    width:84px;font-size:13px;
  }
}

@media only screen and (max-width:480px){
  .kso-history-sn12 .hs-head h3{font-size:20px;}
  .kso-history-sn12 .history_list .text{padding-left:80px;}
  .kso-history-sn12 .history_list .text .month{width:76px;font-size:12px;}
}

/* ---------- 인쇄 ---------- */
@media print{
  .kso-history-sn12 .history_tab{display:none;}
  .kso-history-sn12 .history_page{padding-left:0;}
  .kso-history-sn12 .history_list{display:block !important;}
}