@charset "UTF-8";
/* =========================================================
   Template: page-history.php
   Scope: 스크롤 타임라인 스타일
   ========================================================= */

/* 스크롤 타임라인 */
.ee-history-timeline { margin: 40px 0 80px; position: relative; transform: none !important; }
:root { --hist-sticky-top: 100px; }
/* utility: mobile-only helper */
.mobile-only{ display:none; }
:root { --hist-sticky-top: 100px; }
.site-main, .site-content, .content-area, .wrap, .entry-content, .hentry { overflow: visible; }
.ee-history-timeline .ee-container { overflow: visible; position: relative; transform: none !important; }
.eht-grid { display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: start; overflow: visible; position: relative; transform: none !important; isolation: isolate; }
/* 좌측 고정 비주얼 */
.eht-visual-sticky { position: sticky; top: var(--hist-sticky-top); z-index: 3; width: 420px; box-sizing: border-box; transition: transform 0.2s ease-out; grid-column: 1; will-change: top; }
/* 스크롤 구간에서는 JS가 .is-fixed를 붙여 position: fixed로 전환 */
.eht-visual-sticky.is-fixed { position: fixed; top: var(--hist-sticky-top); width: 420px; right: auto; z-index: 3; }
.eht-visual-box { position: relative; width: 100%; height: 315px; border-radius: 12px; overflow: hidden; background: #111827; }
.eht-visual { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .4s ease; }
.eht-visual.is-active { opacity: 1; }
.eht-visual img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95); }
.eht-year-indicator { margin-top: 12px; font-size: 48px; font-weight: 800; color:#111827; line-height: 1; }
.eht-stream { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 2; grid-column: 2 !important; min-width: 0; isolation: isolate; }
.eht-year { margin: 0 0 8px; font-size: 28px; font-weight: 800; }
.eht-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.eht-item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; padding: 16px; border-radius: 10px; background:#fff; }
.eht-item__meta { color:#374151; font-weight: 600; }
.eht-item__content { display: grid; grid-template-columns: 1fr minmax(180px, 260px); gap: 16px; align-items: start; }
.eht-text { min-width: 0; }
.eht-photo img { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (max-width: 1023.98px) {
  .eht-grid { grid-template-columns: 340px 1fr; gap: 24px; }
  .eht-visual-sticky { width: 340px; }
  .eht-visual-sticky.is-fixed { width: 340px; }
  .eht-visual-box { height: 255px; }
}
@media (max-width: 639.98px) {
  .eht-grid { grid-template-columns: 1fr; }
  :root { --hist-sticky-top: 56px; }
  .eht-visual-sticky { position: static; width: 100%; }
  .eht-visual-sticky.is-fixed { position: static; width: 100%; }
  .eht-visual-box { height: auto; aspect-ratio: 16/9; }
  .eht-year-indicator { font-size: 32px; margin: 8px 0 0; }
  .eht-item { grid-template-columns: 1fr; }
  .eht-item__content { grid-template-columns: 1fr; }
  /* show mobile-only figure above year */
  .mobile-only{ display:block; margin: 0 0 12px 0; }
  .eht-year-photo img{ width:100%; height:auto; display:block; border-radius:12px; }
}
@media (min-width: 1024px) {
  .ehc-item__date { width: 140px; }
}