/* subtitle-seq1-2.css
   - 1280 x 414 Title Section (기업연혁)
   - 중앙 정렬 타이틀 박스 + page_point + 주황 서브타이틀
   - ✅ 모션(data-enter 등)은 submotion.css로 분리
   - 폰트(크기/자간/굵기)는 font.css 유틸 클래스(f-*)로만 관리
*/

/* =========================
   Tokens (Layout only)
========================= */
:root{
  /* Title Section */
  --title-section-h: 414px;
  --title-section-pad-top: 140px;

  --title-box-w: 130px;
  --title-box-h: 90px;
  --title-box-pad-top: 24px;
}

/* =========================
   Title Section (1280 x 414)
========================= */
.sub-title-section{
  width: 100%;
  background: #fff;
}

.sub-title-section__inner{
  width: 100%;
  max-width: 1280px;
  height: var(--title-section-h);
  margin: 0 auto;
  box-sizing: border-box;

  padding-top: var(--title-section-pad-top);
  padding-bottom: var(--title-section-pad-top);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sub-title-box{
  width: var(--title-box-w);
  height: var(--title-box-h);
  position: relative;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: var(--title-box-pad-top);
  box-sizing: border-box;
}

/* page-point 위치/크기만 (모션은 submotion.css) */
.page-point{
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 10%);
  display: block;
  pointer-events: none;
}

/* ✅ 줄바꿈 방지 */
.sub-title-text{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

/* HISTORY 서브타이틀 (박스 아래, 애니메이션 없음) */
.sub-title-sub{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* =========================
   History Intro (1280 x 208)
   - 상단 패딩 없음, 하단 패딩 40
   - 아이템 간격 40 (타임라인 탭 추가 예정)
========================= */
.sub-history{
  width: 100%;
  background: #fff;
}

.sub-history__inner{
  width: 100%;
  max-width: 1280px;
  height: 208px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.sub-history__desc[data-enter]{
  transition-duration: 1000ms;
}

.sub-history__desc{
  font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: 20px;
  font-weight: 300;      /* Light */
  line-height: normal;   /* Auto */
  letter-spacing: 0em;   /* 0% */

  text-align: center;
  margin: 0;
  word-break: keep-all;
}
@media (max-width: 1279px){
  .sub-history__desc{
    font-size: 18px;
    font-weight: 200;    /* ExtraLight */
    /* line-height/letter-spacing는 그대로 */
  }
}

/* =========================
   History Timeline Nav (600 x 80)
========================= */
.history-nav{
  width: 600px;
  display: flex;
  flex-shrink: 0;
}

.history-nav__link{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80px;
  text-decoration: none;
  box-sizing: border-box;

  transition: color 160ms ease;
}

.history-nav__label{
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* 1px 회색 기본선 (항상) */
.history-nav__indicator{
  width: 100%;
  height: 1px;
  background: #A5ABAF;
  flex-shrink: 0;
}

/* 2px 주황 밑줄 (center에서 펼침) */
.history-nav__link::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: #ED7011;
  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.history-nav__link:hover,
.history-nav__link.is-active{
  color: #000;
}

.history-nav__link:hover::after,
.history-nav__link.is-active::after{
  width: 100%;
}

/* 반원 SVG (active only, subnav와 동일 방식) */
.history-nav__point{
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 8px;
  transform: translateX(-50%);
  background: url('/img/active_point.svg') no-repeat center / contain;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.history-nav__link.is-active .history-nav__point{
  opacity: 1;
}

@media (max-width: 799px){

  /* nav는 가운데 정렬 유지 + 가로는 부모폭에 맞게 */
  .history-nav{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    justify-content: center;
  }

  /* 각 탭: 화면에 따라 유동(3등분) + 최대 200까지만 */
  .history-nav__link{
    flex: 1 1 0;
    min-width: 0;       /* overflow 방지 */
    max-width: 200px;
  }

  /* 라벨 텍스트도 각 탭 중앙에 */
  .history-nav__label{
    justify-content: center;
  }
}

/* =========================
   SINCE 1982 섹션 (bg + padding)
========================= */
.history-since{
  position: relative;   /* ✅ 기준점 */
  overflow: hidden;     /* ✅ 200 높이 밖으로 안 새게(선택이지만 추천) */

  width: 100%;
  height: 200px;
  background: url('/img/subtitle_test.png') no-repeat center / cover;
}

.history-since::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  pointer-events: none;
}
/* 태블릿+모바일(<=1279): Figma 방사형 그대로 */
@media (max-width: 1279px){
  .history-since::before{
    background: radial-gradient(
      ellipse at center,
      rgba(102,102,102,0.75) 0%,   /* #666666 75% */
      rgba(0,0,0,0.50)       55%,  /* #000000 50% */
      rgba(0,0,0,0.75)       100%  /* #000000 75% */
    );
  }
}

/* 기본(데스크탑 1280+): 상단 가운데 */
.history-since__inner{
  position: relative;
  z-index: 1;

  height: 100%;
  padding: 24px 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* ✅ 상단 */
  gap: 0;
}

/* 태블릿(800~1279): 간격 24 */
@media (min-width: 800px) and (max-width: 1279px){
  .history-since__inner{
    justify-content: flex-end;   /* ✅ 하단 */
    gap: 24px;
  }
}

/* 모바일(0~799): 간격 6 */
@media (max-width: 799px){
  .history-since__inner{
    justify-content: flex-end;   /* ✅ 하단 */
    gap: 6px;
  }
}

.history-since__since{
  margin: 0;
  text-align: center;
}

.history-since__hanja{
  width: 320px;
  height: 120px;
  object-fit: contain;
  display: block;
}

/* 태블릿(800~1279): 320 x 100 */
@media (min-width: 800px) and (max-width: 1279px){
  .history-since__hanja{
    width: 320px;
    height: 100px;
  }
}

/* 모바일(0~799): 최소 275, 넓어질수록 계속 확장(좌우 50 여백 기준) */
@media (max-width: 799px){
  .history-since__hanja{
    width: calc(100% - 100px); /* 좌우 50px 여백 */
    min-width: 275px;          /* ✅ 최소만 275 */
    height: 100px;             /* 기존 모바일 높이 유지 */
    object-fit: contain;
    display: block;
  }
}
/* =========================
   기업연혁 타임라인 섹션
   1280 x 5595, gap 20, pad 140
========================= */
.history-timeline{
  width: 100%;
  background: #fff;
}

.history-timeline__inner{
  width: 1280px;
  min-height: 5595px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 140px;
  padding-bottom: 140px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* =========================
   서브타이틀_연혁 (공통)
========================= */
.tl-subtitle{
  box-sizing: border-box;
  padding-bottom: 140px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tl-subtitle__icon{
  display: block;
}

.tl-subtitle__label{
  margin: 0;
}

.tl-subtitle__heading{
  margin: 0;
  text-align: center;
}

/* 서브타이틀_연혁 1 (381 x 362) */
.tl-subtitle--1{ width: 381px; height: 362px; }

/* 서브타이틀_연혁 2 (430 x 382) */
.tl-subtitle--2{ width: 430px; height: 382px; padding-top: 80px; padding-bottom: 80px; }

/* 서브타이틀_연혁 3 (492 x 382) */
.tl-subtitle--3{ width: 492px; height: 382px; padding-top: 80px; padding-bottom: 80px; }

/* =========================
   연혁 항목 (600 x 188)
========================= */
.tl-entry{
  width: 600px;
  height: 188px;
  box-sizing: border-box;
  padding-top: 40px;
  padding-bottom: 40px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tl-entry__year{
  margin: 0;
}

.tl-entry__item{
  margin: 0;
  display: flex;
  align-items: center; /* 핵심 */
  gap: 20px;
}

/* 연혁 항목 중간 버전 (600 x 238) */
.tl-entry--md{ height: 238px; }

/* 연혁 항목 중상 버전 (600 x 288) */
.tl-entry--ml{ height: 288px; }

/* 연혁 항목 큰 버전 (600 x 388) */
.tl-entry--lg{ height: 388px; }

/* =========================
   타임라인 fadeup 모션 (Y 40px)
   - tl:     지연 없음
   - tl-100: 100ms 지연
   - tl-200: 200ms 지연
========================= */
[data-enter="fadeup-tl"],
[data-enter="fadeup-tl-100"],
[data-enter="fadeup-tl-200"]{
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  will-change: transform, opacity;
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   600ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-enter="fadeup-tl"].is-in,
[data-enter="fadeup-tl-100"].is-in,
[data-enter="fadeup-tl-200"].is-in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-enter="fadeup-tl"]    { transition-delay: 0ms; }
[data-enter="fadeup-tl-100"]{ transition-delay: 100ms; }
[data-enter="fadeup-tl-200"]{ transition-delay: 200ms; }

/* =========================
   Tablet (800 - 1279px)
========================= */
@media (min-width: 800px) and (max-width: 1279px) {
  /* 타임라인 inner: 고정 1280px → 100% (높이·정렬 유지) */
  .history-timeline__inner{
    width: 100%;
  }
}

/* =========================
   Mobile (0 ~ 799)
   - side padding 20 only
========================= */
@media (max-width: 799px){
  /* ✅ 모바일: 375 컨테이너를 중앙정렬 + 좌우패딩 20 */
  .sub-title-section__inner,
  .history-timeline__inner{
    width: 100%;
    max-width: 375px;
    margin: 0 auto;

    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .tl-entry{
    width: 335px;
    height: 154px; /* 188 -> 154 */
  }
  .tl-entry--md{ height: 202px; } /* 238 -> 202 */
  .tl-entry--ml{ height: 216px; } /* 288 -> 216 */
  .tl-entry--lg{ height: 278px; } /* 388 -> 278 */

  .tl-subtitle--1{ width: 222px; height: 247px; }
  .tl-subtitle--2{ width: 251px; height: 319px; }
  .tl-subtitle--3{ width: 287px; height: 319px; }

  /* 2024 항목: 모바일에서 텍스트 줄바꿈 금지 */
  /* .tl-entry--nowrap .tl-entry__desc{ white-space: nowrap; } */
}