a.link_btn.col1.bg {  margin: 0 0 40px 0; margin-left: auto;}
.chron_wrap { width:1300px; max-width:100%; margin:0 auto; font-family:'Pretendard', sans-serif; }
.chron_tab_wrap { position:relative; }
.chron_tab_toggle { display:none; }
.chron_tab { display:grid; grid-template-columns:repeat(5, 1fr); border-bottom:1px solid #000; }
.chron_tab li { position:relative; text-align:center; padding-bottom:20px; }
.chron_tab li a { display:block; font-size:18px; font-weight:600; color:#333; letter-spacing:-0.36px; }
.chron_tab li.active a { font-weight:700; }
.chron_tab li.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#C51064; }
.chron_panel { padding-top:40px; }
.chron_panel[hidden] { display:none; }
.chron_placeholder { padding:140px 0; text-align:center; font-size:18px; font-weight:500; color:#999; }
.chron_badge { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:50px; background:#F9F8F6; margin-bottom:24px; }
.chron_badge span { font-size:20px; font-weight:700; color:#C8005F; letter-spacing:-0.4px; line-height:1.4; }
.chron_heading { margin-bottom:40px; }
.chron_heading .tit { font-size:32px; font-weight:700; line-height:36px; color:#000; letter-spacing:-0.64px; }
.chron_heading .desc { margin-top:24px; font-size:23px; font-weight:700; line-height:36px; color:#000; letter-spacing:-0.46px; }

/* item마다 독립된 grid: 사진 / 연도 / 라인(점) / 본문 - Figma처럼 연도·점·월/제목이 한 줄에 나란히 온다.
   선은 사진+본문 전체 높이를 span해서 사진 옆에도 끊기지 않고 이어진다 */
.chron_body { display:block; }
.chron_item { display:grid; grid-template-columns:510px 85px 28px 1fr; column-gap:16px; }
.chron_item + .chron_item { margin-top:48px; }

.chron_media { grid-column:1; grid-row:1; position:relative; width:100%; aspect-ratio:510 / 280; border-radius:20px; overflow:hidden; }
.chron_media img { display:block; width:100%; height:100%; object-fit:cover; }
.chron_media::after { content:''; position:absolute; inset:0; background:rgba(0, 0, 0, 0.15); }

.chron_year { grid-column:2; grid-row:1; padding-top:2px; text-align:right; font-size:32px; font-weight:700; line-height:1; color:#C51064; letter-spacing:-0.64px; }

.chron_marker { grid-column:3; grid-row:1; position:relative; }
.chron_marker .line { position:absolute; top:25px; left:50%; width:1px; height:0; background:#E0E0E0; transition:height 0.3s; transform:translateX(-50%); }
.chron_item:last-child .chron_marker .line { display:none; }
.chron_item.active .chron_marker .line { height:calc(100% + 48px); }

.chron_dot { grid-column:3; grid-row:1; align-self:start; justify-self:center; margin-top:10px; width:13px;
    height:13px; border-radius:50%; background:#fff; border:3px solid #C8005F; box-sizing:border-box;
     opacity:0; transition:opacity 0.3s;    z-index: 1;}
.chron_item.top .chron_dot,
.chron_item.active .chron_dot,
.chron_item.active + .chron_item .chron_dot { opacity:1; }

.chron_content { grid-column:4; grid-row:1; min-width:0; }
.chron_head { display:flex; align-items:flex-start; }
.chron_month { flex:none; width:44px; font-size:18px; font-weight:700; line-height:1.3; color:#333; letter-spacing:-0.36px; white-space:nowrap; }
.chron_sep { flex:none; width:3px; height:3px; margin:10px 12px 0; background:#000; }
.chron_tit { flex:1; min-width:0; font-size:18px; font-weight:700; line-height:1.3; color:#555; letter-spacing:-0.36px; }
/* Figma 기준 설명 문단은 제목(chron_tit)과 같은 들여쓰기에서 시작한다 (월 폭 44px + 구분점 좌우 여백 27px) */
.chron_desc { margin-top:12px; padding-left:71px; max-width:531px; font-size:16px; font-weight:500; line-height:1.6; color:#666; letter-spacing:-0.32px; word-break:keep-all; }
.chron_group + .chron_group { margin-top:24px; }

/* 모바일: 사진(1행) / 본문(2행), 점은 항상 본문 행 상단, 선은 두 행을 모두 span */
@media (max-width: 1400px) {
    a.link_btn.col1.bg { margin: 20px 0; margin-left: auto;}
	.chron_item:last-child .chron_marker .line { display:block;   height: 100%; }
    .chron_tab_toggle { display:flex; align-items:center; justify-content:space-between; width:100%; height:50px; padding:0 20px; border-top:1px solid #000; border-bottom:1px solid #000; background:#C51064; color:#fff; font-size:15px; font-weight:700; }
    .chron_tab_toggle::after { content:''; width:8px; height:8px; margin-left:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); transition:transform 0.2s; }
    .chron_tab_wrap.show .chron_tab_toggle::after { transform:rotate(-135deg); }

    .chron_tab { display:none; position:absolute; top:100%; left:0; right:0; z-index:5; flex-direction:column; margin-top:4px; padding:12px 20px; border:1px solid #ddd; border-radius:8px; background:#fff; box-shadow:0 10px 25px rgba(0, 0, 0, 0.15); }
    .chron_tab_wrap.show .chron_tab { display:flex; }
    .chron_tab li { text-align:left; padding-bottom:0; }
    .chron_tab li.active::after { display:none; }
    .chron_tab li a { padding:10px 0; font-size:15px; white-space:nowrap; }
    .chron_tab li.active a { color:#C51064; text-decoration:underline; text-underline-offset:3px; }

    .chron_heading .tit { font-size:24px; line-height:30px; }
    .chron_heading .desc { font-size:17px; line-height:26px; }

    /* 모바일: 사진(1행) / 연도(2행) / 본문(3행). 마커(점+선)는 세 행을 모두 span해서
       사진 구간에도 선이 끊기지 않는다 */
    .chron_item { grid-template-columns:36px 1fr; column-gap:16px; }
    .chron_item + .chron_item { margin-top:40px; }

    .chron_media { grid-column:2; grid-row:1; margin-bottom:20px; }
    .chron_year { grid-column:2; grid-row:2; margin-bottom:12px; text-align:left; font-size:22px; }
    .chron_marker { grid-column:1; grid-row:1 / span 3; }
    .chron_dot { grid-column:1; grid-row:2; margin-top:4px; }
    .chron_content { grid-column:2; grid-row:3; }

    /* 모바일은 스크롤 애니메이션 없이 처음부터 라인/점을 항상 표시한다.
       다음 항목의 사진 높이까지 포함해 다음 점에 정확히 닿도록, JS가 실측한
       점-점 거리(--chron-line-h)를 쓴다 */
    .chron_marker .line { height:var(--chron-line-h, calc(100% + 40px)); transition:none; }
    .chron_dot { opacity:1; }

    .chron_desc { max-width:100%; padding-left:20px; }
}