@charset "utf-8";

/* ============================================================================
   연혁 (page/history.php)

   공통 조각(인트로 격자 · 섹션 면색 · 제목 · 버튼 · 물결 · 마무리 CTA)은
   css/pnf-sub.css 가 쥔다. 이 파일은 연표 짜임만 다룬다.

   테마의 좌우 지그재그 연표는 한 해에 항목이 몰리면 한쪽만 길어져 균형이 무너지고,
   눈이 좌우를 오가느라 날짜 순서를 놓친다. 여기서는 한 줄기로 세운다 —
   왼쪽에 연도를 크게 두고 오른쪽에 항목을 쌓으며, 그 사이를 세로선이 지난다.
   ========================================================================== */

#pnf-sub .pnf-tl {
    position: relative;
    /* 연도 칸 폭과 사이 간격. 세로선과 점의 자리를 이 두 값에서 계산한다 */
    --pnf-tl-col: 200px;
    --pnf-tl-gap: 64px;
    /* 화면 폭을 다 쓰면 항목 오른쪽이 텅 빈다. 가장 긴 한 줄이 들어가는 만큼만 잡는다 */
    max-width: 940px;
    margin: 0 auto;
}

/* 세로 한 줄기. 연도 칸과 항목 칸 사이를 위에서 아래로 지난다.
   첫 점 위와 마지막 점 아래를 조금씩 잘라 선이 허공에서 시작하지 않게 한다 */
#pnf-sub .pnf-tl-rail {
    position: absolute;
    top: 14px;
    bottom: 18px;
    left: calc(var(--pnf-tl-col) + var(--pnf-tl-gap) / 2 - 1px);
    width: 2px;
    background: var(--pnf-line);
}

#pnf-sub .pnf-tl-group {
    display: grid;
    grid-template-columns: var(--pnf-tl-col) minmax(0, 1fr);
    gap: 0 var(--pnf-tl-gap);
    align-items: start;
}
#pnf-sub .pnf-tl-group + .pnf-tl-group { margin-top: 72px; }

/* 연도는 그 해의 항목이 지나가는 동안 자리를 지킨다 */
#pnf-sub .pnf-tl-yearbox {
    position: sticky;
    top: calc(var(--gw-header-h) + 40px);
    text-align: right;
}
#pnf-sub .pnf-tl-year {
    display: block;
    font-family: "Outfit", sans-serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--main-color);
}

#pnf-sub .pnf-tl-list { margin: 0; padding: 0; list-style: none; }

/* 한 줄이 곧 한 사건이다. 날짜와 내용을 두 칸으로 갈라 날짜가 세로로 정렬되게 한다 */
#pnf-sub .pnf-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 0 22px;
    padding: 14px 0;
}
/* 세로선 위에 얹히는 점. 항목 첫 줄 높이에 맞춘다 */
#pnf-sub .pnf-tl-item::before {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(-1 * var(--pnf-tl-gap) / 2 - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pnf-gold);
    /* 흰 면을 두르면 선 위에 얹힌 것처럼 보인다 */
    box-shadow: 0 0 0 5px #fff;
}

#pnf-sub .pnf-tl-date {
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: var(--pnf-ink);
    white-space: nowrap;
}
#pnf-sub .pnf-tl-txt {
    font-size: 16px;
    line-height: 1.75;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}

/* ----------------------------------------------------------------------------
   반응형 — responsive.css 의 분기(1440 / 1280 / 1024 / 768 / 576)를 따라간다
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1280px) {
    #pnf-sub .pnf-tl { --pnf-tl-col: 160px; --pnf-tl-gap: 52px; }
    #pnf-sub .pnf-tl-year { font-size: 48px; }
}

@media screen and (max-width: 768px) {
    /* 연도를 항목 위로 올리고 세로선을 왼쪽 끝으로 옮긴다 */
    #pnf-sub .pnf-tl { --pnf-tl-gap: 30px; padding-left: 30px; }
    /* 점(지름 12px)의 한가운데가 6px 자리에 오므로 선도 그 자리에 맞춘다 */
    #pnf-sub .pnf-tl-rail { left: 5px; }
    #pnf-sub .pnf-tl-group { grid-template-columns: 1fr; gap: 14px; }
    #pnf-sub .pnf-tl-group + .pnf-tl-group { margin-top: 48px; }
    #pnf-sub .pnf-tl-yearbox { position: static; text-align: left; }
    #pnf-sub .pnf-tl-year { font-size: 38px; }
    #pnf-sub .pnf-tl-item::before { left: calc(-1 * var(--pnf-tl-gap)); }
}

@media screen and (max-width: 576px) {
    /* 날짜를 내용 위로 올린다. 두 칸으로 두면 내용이 서너 글자씩 끊긴다 */
    #pnf-sub .pnf-tl-item { grid-template-columns: 1fr; gap: 4px; }
    #pnf-sub .pnf-tl-date { font-size: 15px; }
    #pnf-sub .pnf-tl-txt { font-size: 15px; }
}

/* 기업개요와 타이포그래피·색상만 통일한다. 연표 구조와 간격은 유지한다. */
#pnf-sub.pnf-history .pnf-h2,
#pnf-sub.pnf-history .pnf-h2--lg {
    font-size: 40px;
    line-height: 1.25;
}
#pnf-sub.pnf-history .pnf-intro .pnf-eyebrow,
#pnf-sub.pnf-history .pnf-intro .pnf-em { color: var(--main-color); }
#pnf-sub.pnf-history .pnf-intro .pnf-h2 { color: #10261b; }
#pnf-sub.pnf-history .pnf-intro .pnf-lead {
    color: #666;
    font-size: 17px;
    line-height: 1.8;
}
#pnf-sub.pnf-history .pnf-tl-year {
    font-size: 48px;
    color: var(--main-color);
}
#pnf-sub.pnf-history .pnf-tl-date {
    font-size: 16px;
    color: #111;
}
#pnf-sub.pnf-history .pnf-tl-txt {
    font-size: 16px;
    color: #666;
}

@media screen and (max-width: 1280px) {
    #pnf-sub.pnf-history .pnf-tl-year { font-size: 44px; }
}

@media screen and (max-width: 768px) {
    #pnf-sub.pnf-history .pnf-h2,
    #pnf-sub.pnf-history .pnf-h2--lg { font-size: 32px; }
    #pnf-sub.pnf-history .pnf-tl-year { font-size: 36px; }
}

@media screen and (max-width: 576px) {
    #pnf-sub.pnf-history .pnf-tl-date,
    #pnf-sub.pnf-history .pnf-tl-txt { font-size: 15px; }
}

/* ============================================================================
   기업개요 디자인 시스템 동기화
   연표의 정보 구조는 유지하고 페이지 프레임과 시각 토큰을 통일한다.
   ========================================================================== */

/* 상단 서브 비주얼 --------------------------------------------------------- */
#container_title { height: 420px; background: #111; }
#container_title .sub-theme-bg::before { background: rgba(0,0,0,.48); }
#container_title .gw-sub-theme-title {
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
}
/* 서브 위치 내비게이션(알약 UI)은 sub_head.css 로 공통화되어 전 서브페이지에 적용된다. */

/* 페이지 프레임 ------------------------------------------------------------ */
#pnf-sub.pnf-history {
    --pnf-inner: 1280px;
    --pnf-gap: 112px;
    --pnf-gap-sm: 80px;
    background: #fff;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-history .pnf-grain::before,
#pnf-sub.pnf-history .pnf-wave { display: none; }
#pnf-sub.pnf-history .pnf-sec--cream,
#pnf-sub.pnf-history .pnf-sec--white { background: #fff; }
#pnf-sub.pnf-history a:focus-visible,
#pnf-sub.pnf-history button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--main-color) 45%, #fff);
    outline-offset: 4px;
}

/* 기업개요와 같은 포인트 컬러 인트로 ------------------------------------- */
#pnf-sub.pnf-history .pnf-intro {
    display: flex;
    align-items: center;
    min-height: 500px;
    padding-block: 104px;
    background: var(--pnf-cream);
    color: var(--pnf-ink);
}
#pnf-sub.pnf-history .pnf-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 24px;
    text-align: center;
}
#pnf-sub.pnf-history .pnf-intro .pnf-eyebrow { display: none; }
#pnf-sub.pnf-history .pnf-intro .pnf-h2 { color: var(--pnf-ink); }
#pnf-sub.pnf-history .pnf-intro .pnf-em { color: var(--pnf-green-700); }
#pnf-sub.pnf-history .pnf-intro .pnf-lead {
    max-width: 760px;
    margin-inline: auto;
    padding-bottom: 0;
    color: var(--pnf-ink-sub);
}

/* 연표와 CTA --------------------------------------------------------------- */
/* 섹션 사이 구분선은 두지 않는다. 구획은 면색과 여백으로만 갈린다 */
#pnf-sub.pnf-history .pnf-tl-sec {
    padding-bottom: var(--pnf-gap);
    border-bottom: 0;
}
#pnf-sub.pnf-history .pnf-tl-rail { background: #dedede; }
#pnf-sub.pnf-history .pnf-tl-item::before { box-shadow: 0 0 0 5px #fff; }
#pnf-sub.pnf-history .pnf-cta .pnf-eyebrow { display: none; }
#pnf-sub.pnf-history .pnf-cta .pnf-btn {
    height: 54px;
    padding-inline: 26px;
    border-radius: 10px;
    font-size: 15px;
}
/* 호버는 메인 '제품 비교하기'와 동일하게 — 흰색이 아니라 밝은 골드(--pnf-btn-hover)로
   튕겨 채워진다. 글씨는 골드 위 먹색으로 통일. */
#pnf-sub.pnf-history .pnf-cta .pnf-btn--gold { color: var(--pnf-ink); }
#pnf-sub.pnf-history .pnf-cta .pnf-btn--gold::before { background: var(--main-color); }
#pnf-sub.pnf-history .pnf-cta .pnf-btn--gold::after { background: var(--pnf-btn-hover); box-shadow: none; }
#pnf-sub.pnf-history .pnf-cta .pnf-btn--gold:hover { color: var(--pnf-ink); }

@media screen and (max-width: 1024px) {
    #pnf-sub.pnf-history { --pnf-gap: 88px; --pnf-gap-sm: 68px; }
    #pnf-sub.pnf-history .pnf-intro { min-height: 440px; padding-block: 88px; }
    #pnf-sub.pnf-history .pnf-intro-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
    #container_title { height: 300px; }
    #container_title .gw-sub-theme-title { font-size: 40px; }
    #pnf-sub.pnf-history { --pnf-gap: 72px; --pnf-gap-sm: 56px; }
    #pnf-sub.pnf-history .pnf-intro { min-height: 380px; padding-block: 72px; }
    #pnf-sub.pnf-history .pnf-intro-grid { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    #pnf-sub.pnf-history [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}