@charset "utf-8";

/* 회사연혁 본문 전용: 공통 헤더/사이드/견적문의 구조와 스타일은 유지합니다. */
.ds-history-content { padding-top: 52px; padding-bottom: 52px; }
.ds-history-intro { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); gap: 34px; align-items: center; padding-bottom: 31px; border-bottom: 1px solid #d7e4ed; }
.ds-history-intro-copy { min-width: 0; }
.ds-history-overline { display: flex; align-items: center; gap: 12px; margin-bottom: 22px !important; font-size: max(var(--ds-min-font,12px), 12px); font-weight: 700; letter-spacing: .1em; color: var(--ds-blue); }
.ds-history-overline::before { content: ""; width: 30px; min-width: 30px; height: 3px; background: #087eea; }
.ds-history-intro h2 { margin: 0 0 14px; font-size: clamp(27px, 2.5vw, 32px); font-weight: 750; line-height: 1.42; letter-spacing: -.055em; color: #18344a; }
.ds-history-intro h2 em { font-style: normal; color: #0874c5; }
.ds-history-intro-copy > p:last-child { max-width: 440px; margin: 0; font-size: max(var(--ds-min-font,12px), 13px); line-height: 1.9; color: #526b80; }
.ds-history-visual { position: relative; height: 205px; min-width: 0; margin: 0; overflow: hidden; background: #d7e6f0; }
.ds-history-visual img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ds-history-visual figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 13px 15px; color: #fff; background: linear-gradient(0deg, rgba(7,39,67,.78), rgba(7,39,67,.03)); font-size: max(var(--ds-min-font,12px), 12px); font-weight: 700; letter-spacing: .07em; }
.ds-history-visual figcaption span { color: #d3e8f7; }

.ds-history-record { margin-top: 25px; }
.ds-history-record-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.ds-history-record-heading .ds-eyebrow { margin-bottom: 6px !important; font-weight: 700; }
.ds-history-record-heading h2 { margin: 0; font-size: max(var(--ds-min-font,12px), 24px); font-weight: 750; line-height: 1.35; letter-spacing: -.055em; color: #15354c; }
.ds-history-record-caption { margin: 0 0 3px; color: #718799; font-size: max(var(--ds-min-font,12px), 12px); line-height: 1.55; }
.ds-history-period-nav { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.ds-history-period-nav a { display: inline-flex; padding: 0 0 7px; border-bottom: 2px solid #cedce6; color: #70899f; font-size: max(var(--ds-min-font,12px), 13px); font-weight: 700; line-height: 1.4; text-decoration: none; transition: color .18s, border-color .18s; }
.ds-history-period-nav a:hover, .ds-history-period-nav a:focus-visible { color: #0877c6; border-bottom-color: #0877c6; background: transparent; }
.ds-history-period-nav a:focus-visible { outline: 2px solid #0877c6; outline-offset: 3px; }
/* 주요 연혁 제목 아래 선만 남기고, 연도별 구분은 넉넉한 여백으로 처리합니다. */
/* 연도 간 여백은 유지하되, 모든 연도를 하나의 연속된 타임라인으로 연결합니다. */
.ds-history-periods { --ds-history-year-column: 200px; --ds-history-axis-x: calc(var(--ds-history-year-column) + 21px); position: relative; border-top: 1px solid #d7e4ed; }
.ds-history-periods::before { position: absolute; top: 23px; bottom: 0; left: var(--ds-history-axis-x); width: 1px; background: #b8d2e3; pointer-events: none; content: ""; }
.ds-history-period { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 17px; padding: 23px 0 0; border-top: 0; scroll-margin-top: 28px; }
.ds-history-period + .ds-history-period { margin-top: 50px; }
.ds-history-period-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding-top: 4px; min-width: 0; }
.ds-history-decade { margin: 0; color: #096cba; font-size: clamp(29px, 3vw, 39px); font-weight: 750; line-height: 1.1; letter-spacing: -.055em; overflow-wrap: anywhere; }
.ds-history-period-kicker { font-size: max(var(--ds-min-font,12px), 12px); font-weight: 700; letter-spacing: .09em; color: #71899c; }
/* 참고자료의 타임라인: 세로선·원형 노드·월 숫자를 한 축에 맞춥니다. */
.ds-history-event-list { --ds-history-line-inset: 36px; min-width: 0; margin: 0 0 0 4px; padding: 0 0 0 var(--ds-history-line-inset); list-style: none; border-left: 1px solid transparent; }
.ds-history-event { position: relative; display: grid; grid-template-columns: minmax(44px, 51px) minmax(0, 1fr); align-items: start; gap: 14px; padding: 4px 0; margin-bottom: 18px; border-bottom: 0; min-height: 0; }
.ds-history-event:last-child { padding-bottom: 4px; margin-bottom: 0; }
.ds-history-event::before { position: absolute; top: 9px; left: calc(-1 * var(--ds-history-line-inset) - 6px); width: 10px; height: 10px; border: 2px solid #117ecb; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; content: ""; }
/* 월 표기가 생략된 같은 달의 추가 이력에는 원형 노드를 중복해서 표시하지 않습니다. */
.ds-history-event--no-month::before { content: none; }
.ds-history-event-year { color: #086dba; font-size: max(var(--ds-min-font,12px), 14px); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.ds-history-event-copy { min-width: 0; }
.ds-history-event-copy h4 { margin: 0 0 5px; color: #193d59; font-size: max(var(--ds-min-font,12px), 14px); font-weight: 750; line-height: 1.5; }
.ds-history-event-month { display: block; margin: 0 0 4px; color: #607a8f; font-size: max(var(--ds-min-font,12px), 12px); line-height: 1.55; }
.ds-history-event-copy p { margin: 0; color: #647d90; font-size: max(var(--ds-min-font,12px), 12px); line-height: 1.75; }

/* 기존 제품 견적문의 / 사이드 메뉴 규칙을 변경 없이 보존합니다. */
.ds-history-page .ds-history-inquiry { margin-top: 40px; padding-top: 24px; border-top: 1px solid #d7e4ed; }
.ds-history-page .ds-company-menu > a:hover { color: var(--ds-blue); }
@media (max-width: 1199px) {
 .ds-history-periods { --ds-history-year-column: 175px; }
 .ds-history-intro { gap: 28px; }
 .ds-history-intro h2 { font-size: max(var(--ds-min-font,12px), 29px); }
 .ds-history-period { grid-template-columns: minmax(110px, 175px) minmax(0, 1fr); }
}
@media (max-width: 980px) {
 .ds-history-periods { --ds-history-year-column: 155px; }
 .ds-history-content { padding-top: 34px; padding-bottom: 40px; }
 .ds-history-intro { gap: 20px; }
 .ds-history-period { grid-template-columns: minmax(100px, 155px) minmax(0, 1fr); }
 .ds-history-event-list { --ds-history-line-inset: 26px; }
}
@media (max-width: 700px) {
 .ds-history-periods { --ds-history-year-column: 145px; }
 .ds-history-intro { grid-template-columns: 1fr; gap: 22px; padding-bottom: 24px; }
 .ds-history-intro-copy > p:last-child { max-width: 100%; }
 .ds-history-visual { height: 220px; }
 .ds-history-record-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
 .ds-history-period-nav { gap: 14px; }
 .ds-history-period { grid-template-columns: minmax(96px, 145px) minmax(0, 1fr); }
 .ds-history-page .ds-history-inquiry { margin-top: 32px; padding-top: 20px; }
}
@media (max-width: 480px) {
 /* 모바일 한 열 배치에서는 연도 표기를 축 오른쪽으로 옮겨 세로선이 글자와 겹치지 않게 합니다. */
 .ds-history-periods { --ds-history-axis-x: 4px; }
 .ds-history-periods::before { top: 20px; }
 .ds-history-content { padding-top: 28px; padding-bottom: 36px; }
 .ds-history-intro h2 { font-size: max(var(--ds-min-font,12px), 27px); }
 .ds-history-visual { height: 165px; }
 .ds-history-visual figcaption { padding: 12px 13px; font-size: max(var(--ds-min-font,10px), 10px); }
 .ds-history-record-heading h2 { font-size: max(var(--ds-min-font,10px), 23px); }
 .ds-history-period { grid-template-columns: 1fr; gap: 16px; padding: 20px 0 0; }
 .ds-history-period + .ds-history-period { margin-top: 38px; }
 .ds-history-period-identity { flex-direction: row; align-items: baseline; gap: 13px; padding: 0 0 0 36px; }
 .ds-history-decade { font-size: max(var(--ds-min-font,10px), 32px); }
 .ds-history-event-list { --ds-history-line-inset: 21px; margin-left: 4px; }
 .ds-history-event { grid-template-columns: 45px minmax(0, 1fr); gap: 11px; margin-bottom: 15px; }
 .ds-history-event-copy h4 { font-size: max(var(--ds-min-font,10px), 13px); }
 .ds-history-page .ds-history-inquiry { margin-top: 32px; padding-top: 20px; }
}