/* ===================== HISTORY PAGE ===================== */
.history { background: #fff; min-height:100vh; }
 
/* --- 섹션 헤더 --- */
.history .history-header { padding: 0 0 60px; text-align:center; }
.history .history-header .section-en { font-size:var(--fs14); font-weight:700; letter-spacing:.4em; color:var(--c_base2); text-transform:uppercase; display:block; margin-bottom:14px; }
.history .history-header h2 { font-size:var(--fs48); font-weight:800; color:var(--c_base4); line-height:1.15; letter-spacing:0; }
 
/* --- 전체 레이아웃: 2컬럼 --- */
.history .history-body { display:flex; gap:100px;}
 
/* 왼쪽: 연도 네비 고정 */
.history .history-nav { width:300px; flex-shrink:0; position:sticky; top:120px; align-self:flex-start; /*padding:40px 0;*/ }
.history .history-nav ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.history .history-nav ul li {transition:all 0.2s;}
.history .history-nav ul li:hover, .history .history-nav ul li.active {border-left:8px solid var(--c_base2); border-radius:4px;}
.history .history-nav ul li a { display:block; padding:10px 20px; font-size:var(--fs20); font-weight:700; color:#aaa;  transition:all .3s; letter-spacing:.05em; border:1px solid var(--border1); border-radius:8px; }
.history .history-nav ul li a:hover,
.history .history-nav ul li.active a { color:var(--c_base2); border-radius:0 8px 8px 0; }
.history .history-nav ul li a:hover {background:#f9f9f9;}
.history .history-nav .bg-img {margin-top:40px;}
.history .history-nav .bg-img img { border-radius:8px;}
/* 오른쪽: 카드 목록 */
.history .history-content { flex:1; }
 
/* --- 시대 구분 --- */
.history .era-block + .era-block {margin-top:80px;}
.history .era-label { font-size:var(--fs24); font-weight:700; letter-spacing:.3em; color:var(--c_base2); text-transform:uppercase; margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.history .era-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, #e0e0e0 0%, transparent 100%); }
 
/* --- 연도 그룹 --- */
.history .year-group+.year-group { margin-top:16px; }
.history .year-row { display:flex; gap:40px; align-items:flex-start; padding:32px 36px; background:#fff; border:1px solid #ebebeb; border-radius:12px; transition:border-color .3s, background .3s, box-shadow .3s; }
.history .year-row:hover { background:#f9f9f9; border-color:#d0d0d0; box-shadow:0 4px 20px rgba(0,0,0,.06); }
 
/* 연도 숫자 */
.history .yr { font-size:var(--fs36); font-weight:900; color:var(--c_base3); line-height:1; min-width:90px; letter-spacing:-1px; }
 
/* 오른쪽: 이벤트 목록 */
.history .events { flex:1; display:flex; flex-direction:column; gap:0; }
.history .ev-item { display:flex; align-items:baseline; gap:14px; padding:8px 0; border-bottom:1px solid #f0f0f0; }
.history .ev-item:last-of-type { border-bottom:0; }
.history .ev-month { font-size:var(--fs16); font-weight:700; color:var(--c_base2); min-width:28px; letter-spacing:.05em; }
.history .ev-text { font-size:var(--fs16); color:#333; line-height:1.6; }
.history .ev-text strong { color:var(--c_base4); font-weight:600; }
 
/* 로고 뱃지 */
.history .ev-logo { margin-top:10px; }
.history .ev-logo img { height:60px; width:auto; object-fit:contain; filter:grayscale(.2) opacity(.8); transition:filter .3s; mix-blend-mode:multiply;}
.history .year-row:hover .ev-logo img { filter:grayscale(0) opacity(1); }
 
/* --- 애니메이션 --- */
.history .year-row { opacity:0; transform:translateY(28px); }
.history .year-row.is-visible { opacity:1; transform:translateY(0); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.history .era-block { opacity:0; transform:translateY(16px); }
.history .era-block.is-visible { opacity:1; transform:translateY(0); transition:opacity .5s .1s ease, transform .5s .1s ease; }
 
/* 로고 그리드 (인증 로고들) */
.history .logo-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:10px; }
.history .logo-row img { height:60px; width:auto; object-fit:contain; filter:grayscale(.3) opacity(.7); transition:filter .3s; }
.history .year-row:hover .logo-row img { filter:grayscale(0) opacity(1); }
 
/* ===================== RESPONSIVE ===================== */
@media screen and (max-width:1199px) {
	.history .history-nav { display:none; }
	.history .history-header { padding:0 0 40px; }
	.history .year-row { gap:24px; padding:24px 24px; }
	.history .yr { font-size:var(--fs32); min-width:70px; }
	.history .history-body {}
	.history .era-block + .era-block {margin-top:60px;}
}
@media screen and (max-width:767px) {
	.history .history-header { padding:0 20px 30px; }
	.history .history-body { padding:0; }
	.history .era-block+.era-block { margin-top:50px; }
	.history .year-row { flex-direction:column; gap:12px; padding:20px 20px; }
	.history .yr { font-size:var(--fs28); }
	.history .ev-item { gap:10px; }
	.history .ev-text { font-size:var(--fs16); }
	.history .history-body {padding:0;}
}