/* about/history.php 의 인라인 <style> 을 그대로 옮긴 것 (2026-08-20 CSP 강화 — style-src self).
   페이지 전용 규칙이라 다른 페이지에 싣지 않는다. 여기 규칙은 sub.css 보다 늦게 로드되어
   기존 인라인과 같은 캐스케이드 순서를 유지한다. */
/* page-only: history timeline — light, card-based, newest-first */
    .tl-wrap { max-width: 760px; margin-inline: auto; }
    #timeline .tl { padding-left: clamp(30px, 5vw, 54px); }
    #timeline .tl::before {
      left: 11px; top: 6px; bottom: 22px; width: 2px;
      background: linear-gradient(180deg, var(--brand-500), rgba(21,142,206,.10));
    }
    #timeline .tl > li { padding: 0 0 clamp(26px, 4vw, 42px) clamp(20px, 3vw, 32px); }
    #timeline .tl > li:last-child { padding-bottom: 4px; }
    #timeline .tl > li::before {
      left: calc(-1 * clamp(30px, 5vw, 54px) + 4px); top: 3px;
      width: 16px; height: 16px;
      background: #fff; border: 4px solid var(--brand-400);
      box-shadow: 0 0 0 4px rgba(21,142,206,.10);
    }
    #timeline .tl > li:first-child::before {          /* newest = emphasized node */
      background: var(--brand-500); border-color: var(--brand-500);
      box-shadow: 0 0 0 5px rgba(21,142,206,.16);
    }
    #timeline .tl__year {
      font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800;
      color: var(--brand-600); letter-spacing: -.01em; margin: 0 0 14px;
    }
    #timeline .tl__item {
      background: #fff; border: 1px solid var(--line); border-radius: 16px;
      padding: clamp(15px, 2vw, 20px) clamp(17px, 2.4vw, 24px); margin: 0 0 12px;
      box-shadow: 0 2px 10px rgba(16,32,56,.045);
      transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
    }
    #timeline .tl__item strong { color: var(--ink); font-size: 1.05rem; font-weight: 800; margin-bottom: 5px; }
    #timeline .tl__item span { color: var(--gray-600); font-size: .92rem; line-height: 1.68; }
    /* 이 페이지의 유일한 본문인데 14.7px 이라 활자 체계(16px) 밖에 있었다.
       ID 선택자라 mobile.css 가 못 이겨 여기서 직접 올린다. */
    @media (max-width: 900px) { #timeline .tl__item span { font-size: 1rem; line-height: 1.72; } }
    #timeline .tl__badge {
      background: rgba(21,142,206,.1); border: 1px solid rgba(21,142,206,.32);
      color: var(--brand-600);
    }
    #timeline .tl-note { padding-left: clamp(50px, 8vw, 86px); color: var(--gray-400); }
    @media (hover: hover) and (pointer: fine) {
      #timeline .tl__item:hover {
        box-shadow: 0 14px 32px rgba(16,32,56,.10);
        border-color: rgba(21,142,206,.32); transform: translateY(-2px);
      }
    }
    @media (prefers-reduced-motion: reduce) { #timeline .tl__item { transition: none; } }