/* =========================================================
   KPLA Timeline Badge Theme – Final (CSS / no-JS line fallback)
   - line left has CSS fallback (no JS required)
   - pointer(삼각형) 전부 제거
   - 나머지는 그대로 유지
   ========================================================= */


/* ---------------------------------------------------------
   0) 최상위 래퍼: .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge
   - 전체 레이아웃 폭, CSS 변수(컬럼 폭/색상/선 위치 등)를 정의한다.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge{
  position:relative;           /* 내부의 .kpla-tl-line(absolute) 기준점을 만든다 */
  margin:0 auto;               /* 가운데 정렬 */
  max-width:1100px;            /* 최대 폭 제한 */

  /* 날짜 컬럼 폭(왼쪽) */
  --kpla-date-col:140px;

  /* 마커 컬럼 폭(가운데: 점/연도 배지 영역) */
  --kpla-marker-col:92px;

  /* marker-col의 절반값을 사파리 호환성/단순 계산용으로 고정(92/2=46) */
  --kpla-marker-half:46px;

  /* 세로 타임라인 선의 두께 */
  --kpla-line-w:3px;

  /* 세로 타임라인 선 색상 */
  --kpla-line:#335588;

  /* 포인트(도트/텍스트) 컬러 기본값 */
  --kpla-accent:#335588;

  /* 연도 배지 배경색 */
  --kpla-year-bg:#446699;

  /* 연도 배지 크기(가로/세로) */
  --kpla-year-size:80px;

  /* (현재는 연도 배지 연결선 등에서 사용하는 오프셋 개념 변수) */
  --kpla-year-offset:14px;


  /* 카드 배경색 */
  --kpla-card-bg:#ffffff;


  /* -------------------------------------------------------
     JS 없이도 선을 "대략" 중앙(마커 컬럼 중심)에 놓기 위한 left 계산값
     - date-col + marker-half (즉, 마커 컬럼의 가운데)
     - line-w/2 보정은 하지 않고 있음(필요하면 여기서 -2px 같은 보정 가능)
     ------------------------------------------------------- */
  --kpla-line-left: calc(var(--kpla-date-col) + var(--kpla-marker-half));

  padding:2.25rem 0;           /* 상하 여백 */
  box-sizing:border-box;       /* padding 포함한 박스 계산 */
}


/* ---------------------------------------------------------
   1) 박스 모델 통일
   - 모든 내부 요소에 box-sizing: border-box 적용
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge *{
  box-sizing:border-box;
}


/* ---------------------------------------------------------
   2) overflow 관련
   - 모바일에서 ::before/::after 등 가상요소가 잘리는 것을 막기 위해
     여러 요소에 overflow: visible을 강제로 준다.
   - 삼각형을 제거했지만, 기존 동작을 유지하기 위해 그대로 둠.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-card,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-head,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-body{
  overflow:visible !important;
}


/* ---------------------------------------------------------
   3) 각 항목(행) 기본 그리드
   - 데스크탑 기준: [날짜 컬럼][마커 컬럼][콘텐츠 컬럼]
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item{
  position:relative;           /* 내부 pseudo/absolute 기준이 될 수 있음 */
  display:grid;                /* 3열 grid */
  grid-template-columns: var(--kpla-date-col) var(--kpla-marker-col) 1fr;
  align-items:start;           /* 위쪽 정렬 */
  gap:0;
  margin:2.1rem 0;             /* 항목 간 세로 간격 */
}


/* ---------------------------------------------------------
   4) 세로 타임라인 선(.kpla-tl-line)
   - wrapper(.kpla-tl)를 기준으로 absolute 배치
   - left는 --kpla-line-left 변수를 사용한다.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-line{
  position:absolute;
  top:0;
  bottom:0;
  width:var(--kpla-line-w);
  background:var(--kpla-line);
  transform:none !important;   /* translateX 같은 브라우저 차이를 피하기 위해 transform 제거 */
  left: var(--kpla-line-left) !important;
  pointer-events:none;         /* 클릭/터치 방해 금지 */
  z-index:-1;                   /* 카드/마커보다 뒤(낮게) */
}


/* ---------------------------------------------------------
   5) 왼쪽 날짜 컬럼(.kpla-tl-side-date) – 데스크탑 표시
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-side-date{
  display:block;               /* 데스크탑에서는 표시 */
  grid-column:1;               /* 첫 번째 컬럼 */
  justify-self:end;            /* 오른쪽 끝 정렬 */
  padding-right:18px;          /* 마커와 거리 */
  font-size:1.05rem;
  font-weight:700;
  color:var(--kpla-accent);
  position:relative;           /* connector ::after용 기준 */
}


/* ---------------------------------------------------------
   6) 가운데 마커 컬럼(.kpla-tl-marker)
   - 점(dot) 등을 표시하는 영역
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-marker{
  grid-column:2;               /* 두 번째 컬럼 */
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;          /* 점을 중앙에 */
  justify-content:flex-start;
  padding-top:.35rem;          /* 위쪽 여백 */
  z-index:2;                   /* 선 위로 */
}


/* ---------------------------------------------------------
   7) 점(.kpla-tl-dot)
   - 배지 테마에서는 아이콘을 숨기고 점만 표시하는 구조
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background: #335588;
  border:3px solid var(--kpla-accent);
  box-shadow:none;
}

/* ---------------------------------------------------------
   8) 콘텐츠 카드(.kpla-tl-card)
   - 배지 테마에서는 카드 외곽(보더/그림자)을 없애고
     내부 제목 배지(색상 박스)로 강조한다.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical .kpla-tl-card{
  grid-column:3;               /* 세 번째 컬럼 */
  justify-self:start;          /* 왼쪽 정렬 */
  max-width:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  background:var(--kpla-card-bg) !important; /* 카드 배경색(현재는 흰색) */
  overflow:visible !important;
  position:relative;           /* 내부 absolute 기준 */
  z-index:3;                   /* 선/마커 위로 */
}


/* ---------------------------------------------------------
   9) 카드 헤더(.kpla-tl-head)
   - 배지 테마에서는 border-left, 배경을 제거
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical .kpla-tl-head{
  border-left:none;
  background:transparent;
  color:#0b1220;
  padding:.2rem 0 0;
}


/* ---------------------------------------------------------
   10) 제목 배지(.kpla-tl-title)
   - alt 클래스에 따라 색상이 바뀐다.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-title{
  display:inline-block;
  color:#fff;
  font-weight:900;
  font-size: 20px;
  letter-spacing:.2px;
  padding:.7rem 1rem;
  border-radius:8px;
  line-height:1.0;
  margin:0;
}

/* 콘텐츠 행의 번갈아 색상(서버에서 kpla-alt-1 / kpla-alt-2를 붙임) */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-alt-1 .kpla-tl-title{ background:#b64463; }
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-alt-2 .kpla-tl-title{ background:#0f766e; }


/* ---------------------------------------------------------
   11) 본문(.kpla-tl-body)
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-body{
  padding:.35rem 1.1rem 0;
}
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-body p{
  margin:0 0 .35rem;
  line-height:1.2;
}


/* ---------------------------------------------------------
   12) 카드 내부 날짜(.kpla-tl-date)
   - 데스크탑에서는 숨김(모바일에서만 표시하도록 후속 media query에서 켬)
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-date{
  display:none;
}


/* ---------------------------------------------------------
   13) 왼쪽 날짜 → 마커 방향 연결선(옵션)
   - left/right 어떤 side여도 동일한 스타일로 18px 선을 그림
   - 배지 테마에서는 실제 콘텐츠 side는 right만 쓰지만,
     구조를 유지하기 위해 left/right 모두 정의해 둠.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-right .kpla-tl-side-date::after,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-left  .kpla-tl-side-date::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:1px;
  background:var(--kpla-line);
  width:18px;
}
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-right .kpla-tl-side-date::after{ right:-18px; }
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-left  .kpla-tl-side-date::after{ left:-18px; }


/* ---------------------------------------------------------
   14) 연도 행(Year Row)
   - 배지 테마에서 연도 변경 시 1번만 출력되는 행
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-item{
  margin:1.6rem 0 1.2rem;
}

/* 연도 행은 카드 컬럼을 비워둔다(aria-hidden) */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-card{
  display:none !important;
}

/* 연도 행에서는 side-date가 의미 없으니 투명 처리 */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-side-date{
  opacity:0 !important;
  pointer-events:none;
}

/* 연도 마커 영역(가운데 컬럼) */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-marker.kpla-tl-year-marker{
  padding-top:0;
  height:84px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}


/* ---------------------------------------------------------
   15) 연도 배지(.kpla-tl-year-badge)
   - 실제 위치(left)는 아래에서 !important로 강제한다.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-badge{
  width:var(--kpla-year-size);
  height:var(--kpla-year-size);
  border-radius:999px;
  background:var(--kpla-year-bg);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:.5px;

  position:absolute;
  top:50%;
}

/* 연도 배지 연결선(기본 정의) – 아래에서 다시 override */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-badge::before{
  content:"";
  position:absolute;
  top:50%;
  height:3px;
  width: var(--kpla-year-offset);
  background:var(--kpla-line);
}


/* ---------------------------------------------------------
   17) reveal 애니메이션
   - JS에서 data-kpla-reveal 요소를 관찰하여 kpla-is-visible 클래스를 붙이는 구조
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item[data-kpla-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s ease, transform .55s ease;
}
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item.kpla-is-visible{
  opacity:1;
  transform:translateY(0);
}


/* ---------------------------------------------------------
   18) (유지) 연도 배지 위치/가로선 강제
   - 현재 연도 배지는 절대좌표로 left를 픽셀로 강제한다.
   - 연결선(::before)도 30px 길이로 강제한다.
   --------------------------------------------------------- */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-badge{
  left: 80px !important;       /* 데스크탑에서 연도 배지 X좌표 고정 */
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-badge::before{
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 50% !important;
  left: -31px !important;      /* 배지 왼쪽으로 연결선 */
  width: 33px !important;      /* 연결선 길이 */
  height: 3px !important;      /* 연결선 두께 */
  background: #7bbab7
  z-index: -1 !important;      /* 배지 뒤로 */
}


/* =========================================================
   19) 모바일(<=860px)
   - 그리드를 2열로 변경: [마커][콘텐츠]
   - side-date 숨김, 카드 내부 날짜 표시
   - 선/연도 배지 위치를 모바일용 값으로 변경
   ========================================================= */
@media (max-width:860px){

  /* 모바일에서 컬럼 폭과 변수 재정의 */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge{
    --kpla-date-col:0px;        /* 날짜 컬럼 제거 */
    --kpla-marker-col:34px;     /* 마커 컬럼 축소 */
    --kpla-marker-half:17px;    /* 34/2 */

    --kpla-year-size:80px;      /* 모바일 연도 배지 크기(현재 80px) */
    --kpla-year-offset:65px;

    padding-left:12px;
    padding-right:12px;

    /* 모바일 선 위치: marker-half만 사용(패딩 보정은 별도 필요할 수 있음) */
    --kpla-line-left: calc(var(--kpla-marker-half));
  }

  /* 모바일 그리드: 2열(마커, 콘텐츠) */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item{
    grid-template-columns: var(--kpla-marker-col) 1fr;
    margin:1.15rem 0;
  }

  /* 모바일에서는 왼쪽 날짜 컬럼 숨김 */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-side-date{
    display:none !important;
  }

  /* 모바일에서는 카드 내부 날짜를 표시 */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-date{
    display:block;
    color:rgba(15,23,42,.72);
    margin:0 0 .45rem;
    font-weight:700;
  }

  /* 모바일 마커 컬럼 정렬(왼쪽 위 기준) */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-marker{
    grid-column:1;
    padding-top:.45rem;
    align-items:flex-start;
  }

  /* 모바일 카드 컬럼은 2번째 */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-card{
    grid-column:2;
  }

  /* 모바일 연도 행 높이 축소 */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-marker.kpla-tl-year-marker{
    height:70px;
  }

  /* 모바일 연도 배지 위치 강제(왼쪽) */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-badge{
    left: 40px !important;      /* 모바일에서 연도 배지 X좌표 고정 */
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    border: 3px solid var(--kpla-accent);
    background: #6ca9a9;
  }

  /* 모바일 연도 연결선 강제 */
  .kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-year-badge::before{
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    left: -35px !important;
    width: 33px !important;
    height: 3px !important;
    border: aqua 3px solid var(--kpla-accent);
    z-index: -1 !important;
  }

}

/* 삼각형(말풍선 포인터) 생성자 차단 */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-card::before,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-card::after,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-head::before,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-head::after{
  content:none !important;
  border:0 !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  mask:none !important;
  -webkit-mask:none !important;
}

/* 혹시 카드가 아니라 item(행) 자체에 포인터를 그리는 경우까지 대비 */
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item::before,
.kpla-tl.kpla-tl-vertical.kpla-tl-theme-badge .kpla-tl-item::after{
  content:none !important;
  border:0 !important;
  background:transparent !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}