:root{
      --brand:#4d4d4d;          /* 포인트 블루 */
      --ink:#0b1220;            /* 본문 텍스트 */
      --muted:#6b7684;          /* 보조 텍스트 */
      --line:#e7ecf2;           /* 구분선 */
      --bg:#fff;                /* 배경 */
      --chip:#eef5ff;           /* 라벨/칩 배경 */
      --header-h:96px;          /* 사이트 공통 헤더 높이(필요시 조정) */
      --lpad:24px;              /* 좌우 기본 패딩 */
      --max:1200px;             /* 본문 최대폭 */
    }

    /* 기본 타이포 */
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font:16px/1.6 ui-sans-serif,system-ui,"Apple SD Gothic Neo","Noto Sans KR",Segoe UI,Roboto,Arial,sans-serif;
      letter-spacing:.01em;
    }
    h1,h2,h3{margin:0 0 .5rem}

    /* 페이지 타이틀 */
    .page-hero{padding:calc(var(--header-h) + 24px) var(--lpad) 24px}
    .page-hero h1{
      font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:.01em;
    }
    .page-hero p{color:var(--muted); margin-top:6px}

    /* 레이아웃: 좌측 연도 목록 + 우측 내용 */
    .history-wrap{
      display:grid; grid-template-columns: 200px minmax(0,1fr);
      gap:36px; align-items:start;
      padding-bottom:120px;
      max-width: 1400px;
    }

    /* 왼쪽: 연도 네비 */
    .year-nav{
      position:sticky; top:calc(var(--header-h) + 24px);
      max-height:calc(100dvh - var(--header-h) - 32px); overflow:auto;
      border-left:2px solid var(--line); padding-left:12px;
    }
    .year-nav__title{font-weight:700; color:var(--muted); margin:0 0 10px 8px; font-size:14px}
    .year-nav ul{list-style:none; padding:0; margin:0}
    .year-nav a{
      display:flex; align-items:center; gap:10px;
      padding:8px 10px; margin:4px 0; border-radius:8px; text-decoration:none;
      color:var(--ink); font-weight:700; font-size:18px;
      transition:background .18s ease, color .18s ease;
    }
    .year-nav a::before{
      content:""; width:8px; height:8px; border-radius:50%;
      background:var(--line); flex:0 0 8px; outline:2px solid transparent;
      transition:all .18s ease;
    }
    .year-nav a:hover{background:#f7f9fc}
    .year-nav a.is-active{color:var(--brand); background:var(--chip)}
    .year-nav a.is-active::before{background:var(--brand); outline-color:#cfe0ff}

    /* 오른쪽: 컨텐츠 */
    .history-main{position:relative}

    /* 상단 고정 현재 연도 라벨 */
    .year-sticky{
      position:sticky; top:calc(var(--header-h) + 8px); z-index:2;
      display:inline-flex; align-items:center; gap:10px;
      background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.65) 100%);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      border:1px solid var(--line); padding:8px 14px; border-radius:999px; margin:8px 0 10px;
      box-shadow:0 6px 20px rgba(10,30,60,.06);
    }
    .year-sticky .dot{
      width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px #e3edff inset;
    }
    .year-sticky .label{font-weight:800; letter-spacing:.02em; font-size:18px}


    /* 버튼 기본 스타일 제거 + 기존 year-sticky 스타일 유지 */
.year-sticky{
  appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.65) 100%);
  /* 나머지 year-sticky 기존 속성은 그대로 둬도 OK */
}
.year-sticky:focus-visible{ outline:2px solid #9cc2ff; outline-offset:2px; }



    /* 연혁 섹션 */
    .year-section{padding:12px 0 48px}
    .year-section + .year-section{border-top:1px solid var(--line)}
    .year-section h2{
      /* 실제 헤딩은 스크린리더용으로 숨기고, sticky 라벨로 표시 */
      position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
    }

    /* 연혁 목록 카드 */
    .timeline{
      display:grid; gap:16px;
    }
    .item{
      display:grid; grid-template-columns: 75px 1fr; gap:18px;
      padding:60px 16px; border:1px solid var(--line); border-radius:14px;
      background:#fff; box-shadow:0 6px 22px rgba(20,40,80,.04);
    }
    .item .mon{
      font-weight:800; color:var(--brand); line-height:1;
      padding-left:4px;
    }
    .item .desc{color:var(--ink);
    }
    .item .desc.mot{color:var(--ink);
    display: grid;
    grid-template-columns: 1fr 0.8fr;align-items: center;
    }
    .item .desc small{display:block; color:var(--muted)}
    .item .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
    .tag{
      font-size:12px; font-weight:700; color:var(--brand);
      background:var(--chip); border:1px solid #cfe0ff; padding:4px 8px; border-radius:999px;
    }

    /* 반응형 */
    @media (max-width: 1080px){
      .history-wrap{grid-template-columns: 1fr}
      .year-nav{
        position:sticky; top:calc(var(--header-h) - 4px);
        border-left:0; padding:8px 0 0; background:#fff;
        border-bottom:1px solid var(--line);
      }
      .year-nav ul{display:flex; gap:4px; overflow:auto; padding-bottom:8px}
      .year-nav a{font-size:16px; padding:8px 12px}
    }

    
  /* 페이지 스크립트에서 쓰는 헤더 높이 변수 (테마 높이에 맞게 조정) */
  :root{ --header-h: 80px; }
  /* 상단 고정 연도 버튼(필요 시 조정) */

  .year-sticky .dot{width:8px;height:8px;border-radius:50%;background:#1e3a8a}
  .year-nav a.is-active{color:#1e3a8a; font-weight:700;}



/* 위치/고정은 프로젝트 스타일대로 조정 */
.year-sticky{
    position: sticky;
    top: calc(var(--header-h, 0px) + 12px);
    z-index: 3;
    background: transparent;
    border: 0;
    height: 50px;
    padding: 2rem;
    font-size: 40px;
    font-weight: 800;
}

.year-sticky::after{ content: attr(data-year); } /* 라벨 숫자 표시 */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0;padding:0;}



.history-subtitle{
  margin:0 0 6px; color:var(--ink);
  font-weight:700; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:.6em;
}
.history-subtitle.sty-a{
  font-size: clamp(18px, 2.4vw, 18px);
  position: relative; padding: .15em .2em;
  background: linear-gradient(transparent 60%, rgb(255 111 145 / .22) 0);
  border-radius: 4px;
}

/* ===== Style B. 리본 태그 (브랜드 느낌) */
.history-subtitle.sty-c{
  font-size: clamp(18px, 2.4vw, 22px);
  padding-left: 20px; position: relative;
}
.history-subtitle.sty-c::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:var(--pri); border-radius:50%;
  box-shadow: 0 0 0 6px rgb(255 111 145 / .12);
}
.history-subtitle.sty-c::after{
  content:""; position:absolute; left:-28px; top:50%; transform:translateY(-50%);
  width:20px; height:2px; background:linear-gradient(90deg, var(--pri), transparent);
  border-radius:2px;
}

@media (max-width: 950px) {
.item .desc.mot{
    grid-template-columns: 1fr;
}

}