@charset "utf-8";

/* ============================================================================
   핵심기술 (page/tech.php)

   상자를 쌓지 않는 판이다. 카드 그리드 대신
   - 네 가지 기술 : 좌우를 번갈아 가며 한 단씩 내려가는 기사형
   - 여섯 단계    : 번호 · 이름 · 설명 세 줄기의 가로선 목록
   - 두 제품      : 사진과 글을 좌우로 번갈아 놓는 큰 단
   으로 짠다. 구획은 가는 선과 여백으로만 만든다.

   크림 인트로 띠, 제목 크기, 표, 버튼, 딥그린 문의는 기업개요(company.css)와 같다.
   공통 조각은 css/pnf-sub.css 가 쥔다.
   ========================================================================== */

/* --- 상단 서브 비주얼 --------------------------------------------------------
   기업개요와 같은 높이 · 같은 어두운 막. 제목 아래 영문 표기만 이 페이지에 더한다.
   -------------------------------------------------------------------------- */
#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;
}

/* --- 페이지 공통 값 --------------------------------------------------------- */
#pnf-sub.pnf-tech {
    --pnf-inner: 1280px;
    --pnf-gap: 112px;
    --pnf-gap-sm: 80px;
    background: #fff;
    color: var(--pnf-ink);
}

/* 노이즈 질감과 물결은 쓰지 않는다. 기업개요와 동일 */
#pnf-sub.pnf-tech .pnf-grain::before,
#pnf-sub.pnf-tech .pnf-wave { display: none; }

/* 면색은 흰색과 크림 두 가지만. 경계선 없이 색으로 구획이 갈린다 */
#pnf-sub.pnf-tech .pnf-sec--white { background: #fff; }
#pnf-sub.pnf-tech .pnf-sec--cream { background: var(--pnf-cream); }

#pnf-sub.pnf-tech .pnf-h2,
#pnf-sub.pnf-tech .pnf-h2--lg {
    font-size: 40px;
    line-height: 1.25;
}

#pnf-sub.pnf-tech .pnf-lead {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}
#pnf-sub.pnf-tech .pnf-lead + .pnf-lead { margin-top: 16px; }

#pnf-sub.pnf-tech .pnf-head {
    margin-bottom: 56px;
    text-align: left;
}

#pnf-sub.pnf-tech .pnf-btn {
    height: 54px;
    padding-inline: 26px;
    border-radius: 10px;
    font-size: 15px;
}

#pnf-sub.pnf-tech a:focus-visible,
#pnf-sub.pnf-tech button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--main-color) 45%, #fff);
    outline-offset: 4px;
}

/* --- 인트로 띠 --------------------------------------------------------------
   기업개요 · 인사말 · 연혁과 같은 크림 띠. 제목과 설명을 가운데로 모은다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-intro {
    display: flex;
    align-items: center;
    min-height: 500px;
    padding-block: 104px;
    background: var(--pnf-cream);
}
#pnf-sub.pnf-tech .pnf-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 24px;
    text-align: center;
}
#pnf-sub.pnf-tech .pnf-intro .pnf-em { color: var(--pnf-green-700); }
#pnf-sub.pnf-tech .pnf-intro .pnf-lead {
    max-width: 760px;
    margin-inline: auto;
    padding-bottom: 0;
    color: var(--pnf-ink-sub);
    line-height: 1.9;
}

/* --- 기술이 필요한 이유 ------------------------------------------------------
   제목은 왼쪽 기둥에, 글은 오른쪽에.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
}
#pnf-sub.pnf-tech .pnf-why-body .pnf-lead { max-width: none; }

/* --- 네 가지 기술 : 좌우 교차 기사 -------------------------------------------
   한 기술에 한 단을 내어 준다. 번호는 배경에 크게 눕혀 자리만 잡아 주고,
   글 덩이가 행마다 좌우를 바꿔 앉아 시선이 지그재그로 내려간다.
   행과 행 사이에는 선을 두지 않는다 — 여백만으로 끊긴다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-rows {
    display: grid;
    gap: 0;
}
#pnf-sub.pnf-tech .pnf-row {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 40px 72px;
    padding-block: 56px;
}
#pnf-sub.pnf-tech .pnf-row:first-child { padding-top: 0; }
#pnf-sub.pnf-tech .pnf-row:last-child { padding-bottom: 0; }

/* 짝수 행은 좌우를 뒤집는다 */
#pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-mark { order: 2; }
#pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-body { order: 1; }

#pnf-sub.pnf-tech .pnf-row-mark {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-mark { align-items: flex-end; }
/* 배경에 눕히는 큰 숫자. 읽는 글자가 아니라 자리를 잡아 주는 표식이다 */
#pnf-sub.pnf-tech .pnf-row-num {
    display: inline-flex;
    font-family: "Outfit", sans-serif;
    font-size: clamp(72px, 7vw, 110px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--pnf-cream-deep);
}
/* 스크롤로 화면에 들어오면 위에서 아래로 초록이 내려찬다.
   배경을 글자 모양으로 잘라 쓰므로 채움색은 text-fill 이 아니라 background 다.
   두 자리를 따로 채워 앞자리부터 하나씩 내려차게 한다. */
#pnf-sub.pnf-tech .pnf-row-digit {
    background-color: var(--pnf-cream-deep);
    background-image: linear-gradient(var(--pnf-green-700), var(--pnf-green-700));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-size 1000ms cubic-bezier(.22, .78, .28, 1);
}
#pnf-sub.pnf-tech .pnf-row-digit:first-child { transition-delay: 140ms; }
#pnf-sub.pnf-tech .pnf-row-digit:last-child { transition-delay: 620ms; }
#pnf-sub.pnf-tech .pnf-row.aos-animate .pnf-row-digit { background-size: 100% 100%; }
/* 여러 행이 한 화면에 같이 들어와도 01 → 02 → 03 → 04 순서로 차례로 차오르게 한다 */
#pnf-sub.pnf-tech .pnf-row:nth-child(2) .pnf-row-digit { transition-delay: 220ms; }
#pnf-sub.pnf-tech .pnf-row:nth-child(2) .pnf-row-digit:last-child { transition-delay: 700ms; }
#pnf-sub.pnf-tech .pnf-row:nth-child(3) .pnf-row-digit { transition-delay: 300ms; }
#pnf-sub.pnf-tech .pnf-row:nth-child(3) .pnf-row-digit:last-child { transition-delay: 780ms; }
#pnf-sub.pnf-tech .pnf-row:nth-child(4) .pnf-row-digit { transition-delay: 380ms; }
#pnf-sub.pnf-tech .pnf-row:nth-child(4) .pnf-row-digit:last-child { transition-delay: 860ms; }
@media (prefers-reduced-motion: reduce) {
    #pnf-sub.pnf-tech .pnf-row-digit { transition: none; transition-delay: 0s; }
}

#pnf-sub.pnf-tech .pnf-row-body { max-width: 620px; }
#pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-body { justify-self: start; }
#pnf-sub.pnf-tech .pnf-row-tit {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-tech .pnf-row-txt {
    margin: 0;
    font-size: 17px;
    line-height: 1.85;
    color: #666;
    word-break: keep-all;
}
/* --- 여섯 단계 : 가로선 목록 --------------------------------------------------
   번호 · 이름 · 설명을 세 줄기로 갈라 세로로 쌓는다. 상자가 없으니 훑기 쉽다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-proc {
    margin: 0;
    padding: 0;
    list-style: none;
}
#pnf-sub.pnf-tech .pnf-proc li {
    display: grid;
    grid-template-columns: 90px minmax(180px, 260px) minmax(0, 1fr);
    align-items: baseline;
    gap: 24px;
    padding: 26px 4px;
    border-bottom: 1px solid #e8e8e8;
}
#pnf-sub.pnf-tech .pnf-proc-num {
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pnf-green-700);
}
#pnf-sub.pnf-tech .pnf-proc-tit {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-tech .pnf-proc-txt {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    word-break: keep-all;
}

/* --- 특허 -------------------------------------------------------------------
   왼쪽에 설명, 오른쪽에 서지사항 표. 표는 기업개요 '기업 정보' 와 같다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-patent-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
}
#pnf-sub.pnf-tech .pnf-table {
    max-width: none;
    border-top: 0;
}
#pnf-sub.pnf-tech .pnf-table > div {
    grid-template-columns: 180px minmax(0, 1fr);
    padding: 20px 4px;
    border-color: #e8e8e8;
    background: transparent;
}
#pnf-sub.pnf-tech .pnf-table > div:nth-child(even) { background: transparent; }

/* --- 현장 실증 ---------------------------------------------------------------
   숫자 하나만 키우지 않는다. 규모 · 횟수 · 수량 · 증수율을 같은 크기로 둔다.
   출처와 조건 안내를 표 곁에 붙여 결과만 떼어 인용되지 않게 한다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-evidence-head { margin-bottom: 44px; }
/* 설명은 한 줄로 읽히게 폭을 줄이지 않는다 */
#pnf-sub.pnf-tech .pnf-evidence-head .pnf-lead { max-width: none; }

/* 왼쪽 넓은 자리에 사진, 오른쪽에 여섯 항목 */
#pnf-sub.pnf-tech .pnf-evidence-body {
    display: grid;
    grid-template-columns: 60% minmax(0, 1fr);
    gap: 32px 44px;
    align-items: stretch;
}
#pnf-sub.pnf-tech .pnf-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
    margin: 0;
}
/* 항목마다 라운드 테두리 상자. 여섯 칸이 사진 높이를 고르게 나눠 갖는다 */
#pnf-sub.pnf-tech .pnf-facts > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
}
#pnf-sub.pnf-tech .pnf-facts dt {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #888;
}
#pnf-sub.pnf-tech .pnf-facts dd {
    margin: 10px 0 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}

/* 벼 사진. 오른쪽 지표 줄들과 같은 높이로 늘어난다 */
#pnf-sub.pnf-tech .pnf-fact-art {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 7 / 3;
    border-radius: 20px;
    background: var(--pnf-cream);
}
#pnf-sub.pnf-tech .pnf-fact-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- 두 제품 : 사진과 글의 좌우 교차 ------------------------------------------ */
#pnf-sub.pnf-tech .pnf-prod {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 40px 64px;
    padding-block: 56px;
}
#pnf-sub.pnf-tech .pnf-prod:first-child { padding-top: 0; }
#pnf-sub.pnf-tech .pnf-prod:last-child { padding-bottom: 0; }
#pnf-sub.pnf-tech .pnf-prod--reverse .pnf-prod-art { order: 2; }
#pnf-sub.pnf-tech .pnf-prod--reverse .pnf-prod-body { order: 1; }

#pnf-sub.pnf-tech .pnf-prod-art {
    overflow: hidden;
    border-radius: 12px;
    background: var(--pnf-cream);
}
#pnf-sub.pnf-tech .pnf-prod-art img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
#pnf-sub.pnf-tech .pnf-prod-tit {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-tech .pnf-prod-txt {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    word-break: keep-all;
}
/* 두 제품이 같은 항목을 같은 순서로 보여야 비교가 된다 */
#pnf-sub.pnf-tech .pnf-prod-spec {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px 20px;
    margin: 26px 0 0;
    font-size: 15px;
}
#pnf-sub.pnf-tech .pnf-prod-spec dt { font-weight: 700; color: #555; }
#pnf-sub.pnf-tech .pnf-prod-spec dd { margin: 0; color: var(--pnf-ink); word-break: keep-all; }
#pnf-sub.pnf-tech .pnf-prod-body .pnf-btns { margin-top: 26px; }

/* --- 가로 넘침 방지 ---------------------------------------------------------- */
#pnf-sub.pnf-tech .pnf-why-grid > *,
#pnf-sub.pnf-tech .pnf-patent-grid > *,
#pnf-sub.pnf-tech .pnf-row > *,
#pnf-sub.pnf-tech .pnf-prod > *,
#pnf-sub.pnf-tech .pnf-proc > * { min-width: 0; }

/* ----------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
    #pnf-sub.pnf-tech .pnf-intro { min-height: 440px; padding-block: 88px; }
    #pnf-sub.pnf-tech .pnf-h2,
    #pnf-sub.pnf-tech .pnf-h2--lg { font-size: 34px; }
    #pnf-sub.pnf-tech .pnf-why-grid,
    #pnf-sub.pnf-tech .pnf-patent-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    #pnf-sub.pnf-tech .pnf-row { gap: 24px 48px; padding-block: 52px; }
    #pnf-sub.pnf-tech .pnf-proc li { grid-template-columns: 70px minmax(150px, 220px) minmax(0, 1fr); gap: 18px; }
    #pnf-sub.pnf-tech .pnf-prod { gap: 32px 44px; padding-block: 52px; }
}

@media screen and (max-width: 768px) {
    #container_title { height: 340px; }
    #container_title .gw-sub-theme-title { font-size: 30px; }
    #pnf-sub.pnf-tech { --pnf-gap: 80px; --pnf-gap-sm: 60px; }
    #pnf-sub.pnf-tech .pnf-intro { min-height: 380px; padding-block: 72px; }
    #pnf-sub.pnf-tech .pnf-intro-grid { gap: 22px; }
    #pnf-sub.pnf-tech .pnf-h2,
    #pnf-sub.pnf-tech .pnf-h2--lg { font-size: 27px; }
    #pnf-sub.pnf-tech .pnf-head { margin-bottom: 36px; }

    /* 좌우 교차는 좁은 화면에서 의미가 없다. 번호를 위에 얹고 한 줄로 세운다 */
    #pnf-sub.pnf-tech .pnf-row,
    #pnf-sub.pnf-tech .pnf-prod { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 36px; }
    #pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-mark,
    #pnf-sub.pnf-tech .pnf-prod--reverse .pnf-prod-art { order: 0; }
    #pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-body,
    #pnf-sub.pnf-tech .pnf-prod--reverse .pnf-prod-body { order: 0; }
    #pnf-sub.pnf-tech .pnf-row-mark { flex-direction: row; align-items: baseline; gap: 14px; }
    #pnf-sub.pnf-tech .pnf-row--reverse .pnf-row-mark { align-items: baseline; }
    #pnf-sub.pnf-tech .pnf-row-num { font-size: 44px; }
    #pnf-sub.pnf-tech .pnf-row-tit { font-size: 21px; margin-bottom: 12px; }
    #pnf-sub.pnf-tech .pnf-row-txt { font-size: 16px; }

    /* 여섯 단계는 번호를 제목 위로 올리고 두 줄기로 접는다 */
    #pnf-sub.pnf-tech .pnf-proc li {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 22px 0;
    }
    #pnf-sub.pnf-tech .pnf-proc-txt { margin-top: 4px; font-size: 15px; }

    #pnf-sub.pnf-tech .pnf-table > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
    #pnf-sub.pnf-tech .pnf-prod-tit { font-size: 23px; }
    #pnf-sub.pnf-tech .pnf-prod-spec { grid-template-columns: 92px minmax(0, 1fr); }
}

/* --- 마무리 보정 -------------------------------------------------------------
   검은 굵은 선과 밑줄, 상자 사이 칸막이선을 걷은 뒤 남은 자리들.
   -------------------------------------------------------------------------- */
/* 딥그린 배너 위 본문은 흰색으로. 사진이 밝은 자리라 반투명은 묻힌다 */
#pnf-sub.pnf-tech .pnf-cta .pnf-lead { color: #fff; }

/* 좁아지면 사진 몫을 줄이고, 더 좁아지면 사진과 지표를 위아래로 편다 */
@media screen and (max-width: 1100px) {
    #pnf-sub.pnf-tech .pnf-evidence-body { grid-template-columns: 52% minmax(0, 1fr); gap: 28px 32px; }
    #pnf-sub.pnf-tech .pnf-facts { gap: 12px; }
}
@media screen and (max-width: 768px) {
    #pnf-sub.pnf-tech .pnf-evidence-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    #pnf-sub.pnf-tech .pnf-fact-art { aspect-ratio: 16 / 9; }
    #pnf-sub.pnf-tech .pnf-facts { grid-auto-rows: auto; gap: 12px; }
    #pnf-sub.pnf-tech .pnf-facts dd { font-size: 18px; }
    #pnf-sub.pnf-tech .pnf-evidence-head { margin-bottom: 32px; }
}