@charset "utf-8";



  /* ===== 전역 변수 (네비가 body로 이동해도 사용 가능) ===== */
  :root {
    --hhf-brand: #f77e00;
    --hhf-ink: #f77e00;
    --hhf-mute: #b1b1b1;
    --hhf-panel: #f7f7f8;
    --hhf-bg: #fff;
    --hhf-maxw: 1286px;
    --hhf-navH: 72px;
    --hhf-snapGap: 8px;
    --hhf-wrapPadTop: 24px; /* JS가 상황에 맞게 갱신 */
    --hhf-stickOffset: -80px; /* 고정 위치 오프셋 (조정 가능) - 양수: 아래로, 음수: 위로 */
  }
  
  /* ===== 연혁 헤더 컨테이너 ===== */
  .hhf-header-container {
    background: #fff;
    margin: 0;
    padding: 0;
  }
  
  /* ===== 연혁 제목 ===== */
  .hhf-title-section {
    text-align: left;
    padding: 180px 20px 20px;
    background: #fff;
    margin: 0;
  }
  
  .hhf-main-title {
    font: normal normal bold 35px/55px Pretendard;
    color: #000000;
    margin: 0 !important;
    padding: 0 20px;
    letter-spacing: 0px;
    text-align: left;
    max-width: 1286px !important;
    width: 1286px !important;
    min-width: 1286px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: 1;
  }
  
  /* ===== 네비게이션(포털 이동해도 항상 적용) ===== */
  .hhf-nav {
    position: relative; /* 초기엔 flow 안에서 */
    left: auto;
    right: auto;
    top: auto;
    z-index: auto;
    background: #fff;
    backdrop-filter: none;
    margin-top: 20px;
  }
  
  .hhf-nav__inner {
    max-width: 1286px !important;
    width: 1286px !important;
    min-width: 1286px !important;
    margin: 0 auto;
    padding: 16px 20px 60px;
  }
  
  .hhf-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: center;
  }
  
  .hhf-tab {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 0 2px;
    font: normal normal normal 40px/70px Outfit;
    letter-spacing: 0px;
    color: var(--hhf-mute);
    opacity: 1;
  }
  
  .hhf-tab[aria-selected="true"] {
    color: var(--hhf-ink);
  }
  
  button#hhf-tab-2024 {
    text-align: left;
  }
  
  button#hhf-tab-2013 {
    text-align: right;
  }
  .hhf-progress {
    position: relative;
    height: 2px;
    margin-top: 10px;
    background: #e9eaee;
    border-radius: 3px;
    overflow: visible;
  }
  
  .hhf-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to right, transparent 33.333%, rgba(0,0,0,.08) 33.333%, rgba(0,0,0,.08) 33.9%, transparent 33.9%),
      linear-gradient(to right, transparent 66.666%, rgba(0,0,0,.08) 66.666%, rgba(0,0,0,.08) 67.3%, transparent 67.3%);
    pointer-events: none;
  }
  
  .hhf-progress__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--hhf-brand);
    border-radius: 3px;
    transition: width .12s linear;
  }
  
  .hhf-progress__bar::after {
    content: "";
    position: absolute;
    right: -6px;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #F77E0B;
    border-radius: 50%;
    /* box-shadow:0 0 0 2px #fff, 0 0 0 4px #f77e00; */
  }
  
  /* 네비 고정 시 콘텐츠를 가려주는 흰 마스크(스크립트가 on/off) */
  #hhf-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: -9999px;
    height: 0;
    background: #fff;
    z-index: 2147483646;
    pointer-events: none;
    display: none;
  }
  
  /* ===== 콘텐츠 레이아웃은 hhf-root 내부로 스코프 ===== */
  #hhf-root .hhf-wrap {
    max-width: 1286px !important;
    width: 1286px !important;
    min-width: 1286px !important;
    margin: 0 auto;
    padding: 24px 20px 120px;
  }
  
  #hhf-root .hhf-sec {
    min-height: 70vh;
    scroll-margin-top: calc(var(--hhf-navH) + var(--hhf-snapGap));
    transition: opacity .25s ease, filter .25s ease;
  }
  
  #hhf-root .hhf-sec.is-activated {
    opacity: 1;
    filter: none;
  }
  
  #hhf-root .hhf-sec:not(.is-activated) {
    opacity: .22;
    filter: saturate(.7);
  }
  
  #hhf-root .hhf-title-wrapper {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 24px;
    padding-left: 465px;
  }
  
  #hhf-root .hhf-title {
    font: normal normal bold 40px/70px Outfit;
    letter-spacing: 0px;
    color: #F77E0B;
    opacity: 1;
    margin: 0;
    text-align: left;
  }
  
  #hhf-root .hhf-grid {
    display: grid;
    grid-template-columns: 425px 1.2fr;
    gap: 40px;
    width: 1286px !important;
    max-width: 1286px !important;
    min-width: 1286px !important;
  }
  
  #hhf-root .hhf-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  
  #hhf-root .hhf-photo {
    width: 425px;
    height: 250px;
    border-radius: 15px;
    display: block;
    object-fit: cover;
  }
  
  #hhf-root .hhf-caption {
    margin-top: 10px;
    font: normal normal normal 20px/28px Pretendard;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    text-align: center;
    padding-bottom: 28px;
  }
  
  #hhf-root .hhf-tl {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #hhf-root .hhf-tl li {
    display: flex;
    gap: 25px;
    padding: 16px 0;
  }
  
  #hhf-root .hhf-tl li:last-child {
    border-bottom: none;
  }
  
  #hhf-root .hhf-mon {
    width: 48px;
    flex: 0 0 auto;
    font: normal normal bold 20px/28px Pretendard;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    text-align: left;
  }
  
  #hhf-root .hhf-desc {
    flex: 1 1 auto;
    font: normal normal normal 20px/28px Pretendard;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
  }
  
  #hhf-root .hhf-year {
    display: grid;
    grid-template-columns: 425px 1.2fr;
    gap: 40px;
    margin: 22px 0;
  }
  
  
  /* 각 .hhf-grid 행에서 두 칼럼을 세로 가운데 정렬 */
  #hhf-root .hhf-grid {
    align-items: center;  /* ← 핵심 */
    margin-bottom: 63px;
  }
  
  #hhf-root .hhf-year {
    align-items: center;
    margin-bottom: 63px;
  }
  
  /* figure(.hhf-card)가 셀 안에서 살짝 더 중앙에 오도록 보조 */
  #hhf-root .hhf-grid > figure.hhf-card {
    display: flex;
    flex-direction: column;
    justify-content: center; /* figure 내부(이미지+캡션)도 세로 중앙 */
  }
  
  /* 반응형 */
  @media (max-width: 960px) {
    /* 네비게이션 width 조정 */
    .hhf-nav__inner {
      max-width: 960px !important;
      width: 960px !important;
      min-width: 960px !important;
    }
    
    /* 메인 타이틀 width 조정 */
    .hhf-main-title {
      max-width: 960px !important;
      width: 960px !important;
      min-width: 960px !important;
    }
    
    /* 콘텐츠 wrap width 조정 */
    #hhf-root .hhf-wrap {
      max-width: 960px !important;
      width: 960px !important;
      min-width: 960px !important;
    }
    
    /* 그리드 width 조정 */
    #hhf-root .hhf-grid {
      width: 960px !important;
      max-width: 960px !important;
      min-width: 960px !important;
    }
  }
  
  /* ===== 440px 이하(모바일) 전용 ===== */
  @media (max-width: 440px) {
    /* ── 우측 세로 프로그래스바 위치/길이 조정용 변수 ─────────────── */
    :root {
      /* 시작 위치 보정값: +값 = 더 아래, -값 = 더 위 */
      --hhf-mobile-progress-offset: -80px;      /* ← 시작 위치를 내리고 싶으면 값 키우세요 */
      /* 세로바 전체 높이 */
      --hhf-mobile-progress-height: calc(100vh - 400px);
    }
  
    /* 상단 네비 간단화 */
    .hhf-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: transparent;
      margin: 0;
      z-index: 2147483647;
    }
    
    .hhf-nav__inner {
      max-width: none !important;
      width: auto !important;
      min-width: auto !important;
      padding: 14px 16px;
    }
    
    .hhf-tabs {
      display: none;
    }
  
    /* 데스크탑용 가로 진행바 숨김 */
    .hhf-progress {
      display: none !important;
    }
  
    /* 우측 고정 레일(컨테이너) - viewport 기준 고정 */
    #hhf-mobile-progress {
      position: fixed;                 /* ← 스크롤해도 그대로 */
      right: var(--rail-right, 9px);
      top: var(--rail-top, 286px);   /* ← 시작 위치: 필요시 숫자만 조절 */
      width: 4px;
      height: var(--rail-height, calc(100vh - 400px));
      background: #e9eaee;
      border-radius: 2px;
      z-index: 2147483648;
      pointer-events: none;            /* ← 스크롤 제스처 방해하지 않음 */
    }
    
    /* 채워지는 주황색(세로 진행) */
    #hhf-mobile-progress > i {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0%;
      background: #f77e00;
      border-radius: 2px;
      transition: height .08s linear;
    }
  
  
    /* 레이아웃/타이틀(모바일에서 세로 스택) */
    .hhf-title-section {
      padding: 80px 20px 0;
    }
    
    .hhf-main-title {
      font-size: 20px;
      line-height: 36px;
      max-width: none !important;
      width: auto !important;
      min-width: auto !important;
      padding: 0;
    }
    
    #hhf-root .hhf-wrap {
      max-width: none !important;
      width: auto !important;
      min-width: auto !important;
      padding: 10px 20px;
    }
    
    #hhf-root .hhf-title-wrapper {
      padding-left: 0;
      margin-bottom: 10px;
    }
    
    #hhf-root .hhf-title {
      font-size: 23px;
      line-height: 40px;
    }
  
    /* 카드/연도 블록을 세로로 */
    #hhf-root .hhf-grid,
    #hhf-root .hhf-year {
      display: block;
      grid-template-columns: none;
      gap: 0;
      width: auto !important;
      max-width: none !important;
      min-width: auto !important;
      margin-bottom: 20px;
    }
  
    /* 요소 크기 */
    #hhf-root .hhf-photo {
      width: 100%;
      height: 189px;
      border-radius: 12px;
    }
    
    #hhf-root .hhf-caption {
      font-size: 14px;
      line-height: 22px;
      padding-bottom: 20px;
    }
    
    #hhf-root .hhf-mon {
      width: 40px;
      font-size: 16px;
      line-height: 22px;
    }
    
    #hhf-root .hhf-desc {
      font-size: 16px;
      line-height: 22px;
    }
    
    #hhf-root .hhf-tl li {
      gap: 15px;
      padding: 12px 0;
    }
    
    #hhf-root .hhf-whitespace {
      height: 50px;
    }
  }
  
  
  /* 떨림 방지: 고정 직후 잠깐 헤더 transition 비활성화 */
  html.hhf-no-anim header.header {
    transition: none !important;
  }
  
  /* (비주얼 헤더에도 트랜지션이 있다면 같이) */
  html.hhf-no-anim #contents > header.vi_01 {
    transition: none !important;
  }
  
  /* 네비가 상단에 고정된 동안에는 제목 위 여백을 줄임 */
  html.hhf-sticky .hhf-title-section {
    padding-top: 10px;
  }