@charset "utf-8";
/* =====================================================
   회사연혁 — company/css/history.css
   ===================================================== */
.hisSecArea {}
.hisArea { position:relative; }

/* ── 가운데 sticky 로고 워터마크 ── */
.hisMark { position:sticky; top:50vh; z-index:0; height:0; pointer-events:none; }
.hisMark img { position:absolute; left:50%; transform:translate(-50%, -50%); width:min(64%, 300px); height:auto; opacity:.9; }

.hisWrap { position:relative; z-index:1; display:grid; gap:34px; }

/* ── 시대 구분 헤더 ── */
.hisEra { position:relative; }
.eraHead { padding-bottom:2px; }
.eraYear { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; color:var(--c_ink); font-size:var(--fs28); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.eraYear i { margin:0 2px; color:#9fb0c4; font-style:normal; font-weight:600; }

/* ── 타임라인 ── */
.eraBody { position:relative; margin-top:16px; padding-left:16px; }

/* 기본 트랙(회색) */
.eraBody:before { content:""; position:absolute; left:3px; top:4px; bottom:4px; width:2px; border-radius:2px; background:#e2e9f2; }

/* 스크롤 진행 라인(파랑) — 높이는 JS 가 제어 */
.railFill { position:absolute; left:3px; top:4px; z-index:1; width:2px; height:0; border-radius:2px; background:linear-gradient(180deg, var(--c_base2) 0%, var(--c_base1) 100%); }

/* 진행 지점 마커 */
.railFill i { position:absolute; left:50%; bottom:0; width:11px; height:11px; margin:0 0 -5px -5px; border-radius:50%; background:var(--c_base1); box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(27,84,178,.14); opacity:0; transition:opacity .3s; }
.railFill i:after { content:""; position:absolute; left:-3px; top:-3px; right:-3px; bottom:-3px; border-radius:50%; background:rgba(27,84,178,.28); }
.eraBody.on .railFill i { opacity:1; }
.eraBody.on .railFill i:after { animation:railPulse 1.9s ease-out infinite; }

@keyframes railPulse {
	0%   { transform:scale(1);   opacity:.5; }
	70%  { transform:scale(2.7); opacity:0; }
	100% { transform:scale(2.7); opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
	.eraBody.on .railFill i:after { animation:none; }
}

.hisList li { display:grid; grid-template-columns:47px 44px 1fr; align-items:start; gap:0 8px; padding:9px 0; }
.hisList li .y,
.hisList li .m { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; font-size:var(--fs13); font-weight:700; line-height:1.5; letter-spacing:-.02em; white-space:nowrap; }
.hisList li .y { color:var(--c_ink); }
.hisList li .m { color:#7f8fa2; }
.hisList li p { color:#39485a; font-size:var(--fs13); line-height:1.5; letter-spacing:-.02em; word-break:keep-all; }

/* 같은 시점 추가 항목 */
.hisList li p em { position:relative; display:block; margin-top:4px; padding-left:9px; font-style:normal; }
.hisList li p em:before { content:""; position:absolute; left:0; top:9px; width:4px; height:1px; background:#a9b8ca; }

.hisList li p a { display:block; margin-top:3px; color:var(--c_base1); font-weight:700; text-decoration:underline; text-underline-offset:2px; word-break:break-all; }

/* ── 태블릿 이상 (600px~) ── */
@media screen and (min-width: 600px) {
	.hisMark img { width:min(52%, 380px); }
	.hisWrap { gap:44px; }
	.eraYear { font-size:var(--fs36); }
	.eraBody { margin-top:20px; padding-left:22px; }
	.eraBody:before,
	.railFill { left:4px; }
	.railFill i { width:13px; height:13px; margin:0 0 -6px -6px; }
	.hisList li { grid-template-columns:60px 56px 1fr; gap:0 12px; padding:11px 0; }
	.hisList li .y, .hisList li .m { font-size:var(--fs15); }
	.hisList li p { font-size:var(--fs14); }
}