@charset "utf-8";

/* ============================================================================
   P&F bio 메인 페이지

   레퍼런스 두 축을 섞는다.
   - 색 : 도쿄도사학재단 — 딥그린 색면 + 포인트색 강조 + 그레인(noise) 질감 + 사선 리본
   - 형태 : 야마우치노토리 — 크림 바탕, 불규칙 블롭 마스크, 웨이브 경계, 넓은 여백

   색은 전부 pnf-tokens.css 의 변수를 통해서만 쓴다.
   포인트색(--pnf-gold 계열)은 pnf-tokens.css 에 고정돼 있다. 이 파일에 hex 를 직접 쓰지 않는다.
   이 파일은 메인(index.php)에서만 로드되며 서브페이지에 영향을 주지 않는다.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. 레이아웃 리셋
   gw.css 는 고정 헤더만큼 #wrapper 에 위쪽 여백을 준다(서브페이지 기준).
   메인은 히어로가 헤더 아래까지 차 있어야 하므로 그 여백을 걷고,
   대신 히어로 자신이 헤더 높이만큼 안쪽 여백을 갖는다.
   (이 파일은 메인에서만 로드되므로 서브페이지에는 영향이 없다)
   -------------------------------------------------------------------------- */
#wrapper { padding-top: 0; padding-bottom: 0; background: #fff; }
#container_wr { padding: 0; background: #fff; }

/* gw.css 는 가로 스크롤을 막으려고 body 에 overflow-x:hidden 을 건다.
   그런데 그것이 body 를 스크롤 컨테이너로 만들어 핵심기술의 position:sticky 가
   전혀 걸리지 않는다. 같은 목적을 유지하면서 스크롤 컨테이너를 만들지 않는
   clip 으로 바꾼다. clip 을 모르는 구형 브라우저는 hidden 이 남아
   카드가 겹치지 않고 세로로 늘어설 뿐 레이아웃은 깨지지 않는다. */
body { overflow-x: clip; }

/* ----------------------------------------------------------------------------
   1. 메인 전용 토큰
   -------------------------------------------------------------------------- */
#pnf-main {
    /* 바탕 — 야마우치의 크림. 흰색보다 따뜻해 일러스트가 떠 보이지 않는다 */
    --pnf-cream: #F5F2E9;
    --pnf-cream-deep: #EBE6D8;

    /* 섹션 리듬 */
    --pnf-gap: 140px;
    --pnf-gap-sm: 96px;

    /* 라운드 — 카드는 크게, 칩은 작게 */
    --pnf-r-card: 32px;
    --pnf-r-chip: 10px;

    /* 본문 최대폭. gw.css 의 --gw-con-width 보다 좁게 잡아 여백을 벌었다 */
    --pnf-inner: 1360px;

    position: relative;
    background: var(--pnf-cream);
    color: var(--pnf-ink);
    font-family: "Noto Sans KR", sans-serif;
    /* 여기에 overflow 를 걸지 않는다.
       overflow:hidden 은 스크롤 컨테이너를 만들어 핵심기술의 position:sticky 를 죽이고,
       overflow-x:clip 만 주면 스펙상 overflow-y 가 auto 로 계산돼 결국 같은 문제가 생긴다.
       배경 장식은 그것을 담은 섹션(#pnf-hero, #pnf-field)에서 각자 잘라낸다. */
}

/* 메인에서는 테마 기본 여백을 쓰지 않는다 */
#pnf-main * { box-sizing: border-box; }

/* ----------------------------------------------------------------------------
   2. 공통 조각
   -------------------------------------------------------------------------- */

/* --- 그레인 -----------------------------------------------------------------
   사학재단의 질감. 평평한 색면 위에 아주 옅은 노이즈를 얹어
   벡터 일러스트가 "인쇄된" 느낌이 나게 한다. 클릭을 막지 않도록 pointer-events 해제.
   -------------------------------------------------------------------------- */
.pnf-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
/* 어두운 색면 위에서는 곱하기 대신 밝게 섞어야 질감이 보인다 */
.pnf-sec--deep.pnf-grain::before { mix-blend-mode: overlay; opacity: .38; }

/* --- 섹션 ------------------------------------------------------------------ */
.pnf-sec { position: relative; padding: var(--pnf-gap) 0; }
.pnf-sec--tight { padding: var(--pnf-gap-sm) 0; }
.pnf-sec--cream { background: var(--pnf-cream); }
.pnf-sec--soft  { background: var(--pnf-cream-deep); }
.pnf-sec--white { background: #fff; }
.pnf-sec--deep  { background: var(--pnf-green-900); color: #fff; }

.pnf-inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 var(--gw-padding);
    width: 100%;
    max-width: calc(var(--pnf-inner) + var(--gw-padding) * 2);
}

/* --- 제목 묶음 --------------------------------------------------------------
   영문 라벨(CORE TECHNOLOGY 같은 것)은 쓰지 않는다. 제목만으로 섹션을 연다.
   ---------------------------------------------------------------------------- */
.pnf-h2 {
    margin: 0;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
.pnf-sec--deep .pnf-h2 { color: #fff; }

.pnf-lead {
    margin: 22px 0 0;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.9;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}
.pnf-sec--deep .pnf-lead { color: rgba(255,255,255,.78); }

.pnf-head { margin-bottom: 64px; }
.pnf-head--center { text-align: center; }
.pnf-head--center .pnf-lead { margin-left: auto; margin-right: auto; }
.pnf-head--sm { margin-bottom: 28px; }

/* --- 버튼 ------------------------------------------------------------------
   tsuklio.com 의 btn-common 방식. 색면을 두 겹 깔아 두고, 호버하면 아래 겹이
   살짝 줄고(.97) 위 겹이 scale(0) 에서 튕기며 펴져 색이 갈린다.

   원본은 span 두 개를 깔지만 우리는 마크업을 건드리지 않으려고 ::before/::after
   를 쓴다. z-index:-1 이 버튼 밖으로 빠지지 않게 isolation 으로 쌓임 맥락을 만든다.
   -------------------------------------------------------------------------- */
#pnf-main {
    /* 원본에서 그대로 가져온 두 곡선. 들어갈 땐 되감기듯, 나올 땐 튕기듯 */
    --pnf-ease-bounce: linear(0,.0486,.0959,.1418,.1864,.2297,.2717,.3125,.352,.3903,.4273,.4632,.4979,.5314,.5638,.595,.6252,.6542,.6822,.7092,.735,.7599,.7838,.8067,.8286,.8495,.8696,.8887,.9069,.9242,.9407,.9563,.9711,.9851,.9983,1.0108,1.0224,1.0334,1.0436,1.0531,1.0619,1.0701,1.0776,1.0844,1.0907,1.0963,1.1014,1.1059,1.1099,1.1133,1.1163,1.1187,1.1206,1.1221,1.1232,1.1238,1.1241,1.1239,1.1234,1.1225,1.1213,1.1197,1.1179,1.1158,1.1134,1.1108,1.1079,1.1049,1.1016,1.0982,1.0946,1.0909,1.087,1.083,1.079,1.0748,1.0707,1.0664,1.0622,1.058,1.0538,1.0496,1.0454,1.0414,1.0374,1.0335,1.0298,1.0262,1.0227,1.0195,1.0164,1.0135,1.0109,1.0085,1.0063,1.0045,1.0029,1.0017,1.0007,1.0002,1);
    --pnf-ease-back: cubic-bezier(.37,-.47,.91,.65);
}

.pnf-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 34px;
    height: 62px;
    /* 알약이 아니라 모서리만 둥근 사각 */
    border-radius: 12px;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .3s ease;
}
.pnf-btn::before,
.pnf-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transition: transform .35s var(--pnf-ease-back);
}
.pnf-btn::after { transform: scale(0); }

.pnf-btn:hover::before { transform: scale(.97); transition-timing-function: var(--pnf-ease-bounce); }
.pnf-btn:hover::after  { transform: scale(1);  transition-timing-function: var(--pnf-ease-bounce); }

/* 면색 버튼 — 글씨는 흰색 하나로.
   테마 전역의 a{color:#222} 가 더 세서 #pnf-main 으로 명시도를 올린다 */
#pnf-main .pnf-btn--solid { color: #fff; }
#pnf-main .pnf-btn--solid::before { background: var(--main-color); }
/* 호버하면 흰 면이 펴지고 글씨가 초록으로 뒤집힌다.
   흰 면만 두면 밝은 섹션에서 가벼워 보여 초록 얇은 선을 같이 얹는다.
   (테두리 대신 inset 그림자라 자리가 밀리지 않는다) */
#pnf-main .pnf-btn--solid::after  { background: #fff; box-shadow: inset 0 0 0 1.5px var(--main-color); }
#pnf-main .pnf-btn--solid:hover   { color: var(--main-color); }

/* 고스트 — 평소엔 글씨만, 호버하면 포인트색 면이 펴진다.
   노란 면 위에서는 먹색이라야 읽힌다(흰 글씨는 대비 1.5:1) */
#pnf-main .pnf-btn--ghost { color: var(--pnf-ink); }
#pnf-main .pnf-btn--ghost::before { background: transparent; }
#pnf-main .pnf-btn--ghost::after  { background: var(--pnf-gold); }
#pnf-main .pnf-btn--ghost:hover   { color: var(--pnf-ink); }

#pnf-main .pnf-sec--deep .pnf-btn--ghost { color: #fff; }
#pnf-main .pnf-sec--deep .pnf-btn--ghost:hover { color: var(--pnf-ink); }

/* 모션을 줄이라고 한 브라우저에서는 튕기지 않고 색만 갈린다 */
@media (prefers-reduced-motion: reduce) {
    .pnf-btn::before,
    .pnf-btn::after { transition: none; }
    .pnf-btn:hover::after { transform: scale(1); }
    .pnf-btn:hover::before { transform: none; }
}

/* ============================================================================
   2026-09 미니멀 프로페셔널 리디자인
   선택 시안 2의 직선형 그리드와 CI 골드를 메인 포인트로 적용한다.
   기존 데이터·링크·폼 동작은 유지하고 레이아웃과 노출 방식만 재정의한다.
   ========================================================================== */

body:has(#pnf-main) {
    background: #fff;
}

#pnf-main {
    --pnf-accent: #FFCB08;
    --pnf-deep: #0F3327;
    --pnf-ink: #10281F;
    --pnf-ink-sub: #526159;
    --pnf-line: #D9E0DC;
    --pnf-surface: #F5F6F5;
    --pnf-inner: 1280px;
    --pnf-gap: 112px;
    background: #fff;
}

/* 밝은 분할형 Hero 위 헤더 */
#hd.hd-transparent:not(.is-scrolled):not(.on) {
    background: rgba(255,255,255,.96) !important;
    background-color: rgba(255,255,255,.96) !important;
    box-shadow: 0 1px 0 rgba(16,40,31,.08);
    backdrop-filter: blur(12px);
}
#hd.hd-transparent:not(.is-scrolled):not(.on) .light-mode-logo { opacity: 1 !important; visibility: visible; }
#hd.hd-transparent:not(.is-scrolled):not(.on) .dark-mode-logo { opacity: 0 !important; visibility: hidden; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #gnb .gnb_1da { color: #14231B !important; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #menu-btn .gw-line { background: #14231B !important; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #menu-btn .gw-line:nth-child(3) { background: var(--pnf-accent) !important; }

#pnf-main .pnf-inner {
    max-width: calc(var(--pnf-inner) + 48px);
    padding-inline: 24px;
}
#pnf-main .pnf-sec { padding-block: var(--pnf-gap); }
#pnf-main .pnf-head { margin-bottom: 44px; }
#pnf-main .pnf-head--center { text-align: left; }
#pnf-main .pnf-h2 {
    color: var(--pnf-ink);
    font-size: clamp(36px, 3.1vw, 48px);
    line-height: 1.2;
    letter-spacing: -.045em;
}
#pnf-main .pnf-lead {
    margin-top: 14px;
    color: var(--pnf-ink-sub);
    font-size: 17px;
    line-height: 1.7;
}
#pnf-main .pnf-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--pnf-deep);
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

#pnf-main .pnf-btn {
    min-width: 0;
    height: 50px;
    padding-inline: 24px;
    border-radius: 4px;
    color: var(--pnf-ink);
    font-size: 15px;
}
#pnf-main .pnf-btn--solid,
#pnf-main .pnf-btn--light { color: var(--pnf-ink); }
#pnf-main .pnf-btn--solid::before,
#pnf-main .pnf-btn--light::before { background: var(--pnf-accent); }
#pnf-main .pnf-btn--solid::after,
#pnf-main .pnf-btn--light::after { background: #FFE06B; box-shadow: none; }
#pnf-main .pnf-btn--solid:hover,
#pnf-main .pnf-btn--light:hover { color: var(--pnf-ink); }
#pnf-main a:focus-visible,
#pnf-main button:focus-visible,
#pnf-main input:focus-visible,
#pnf-main select:focus-visible,
#pnf-main textarea:focus-visible {
    outline: 3px solid #C18D00;
    outline-offset: 3px;
}

/* Hero: 왼쪽 카피, 오른쪽 관리자 등록 이미지 */
#pnf-hero {
    padding-top: var(--gw-header-h);
    background: #fff;
}
.pnf-hero-stage {
    min-height: min(680px, calc(100svh - var(--gw-header-h)));
    background: #fff;
}
.pnf-hero-slide { background: #fff; }
.pnf-hero-media {
    left: 42%;
    background: #E9ECEA;
}
.pnf-hero-media img,
.pnf-hero-media video { object-fit: cover; }
.pnf-hero-shade {
    left: 42%;
    background: linear-gradient(90deg, rgba(16,40,31,.08), rgba(16,40,31,0) 36%);
}
.pnf-hero-copy {
    left: max(24px, calc((100vw - 1280px) / 2));
    top: 50%;
    bottom: auto;
    width: min(34vw, 460px);
    max-width: none;
    color: var(--pnf-ink);
    transform: translateY(-50%);
}
.pnf-hero-copy::before {
    content: "AGRICULTURE FOR A BETTER TOMORROW";
    display: block;
    margin-bottom: 28px;
    color: var(--pnf-deep);
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}
#pnf-main .pnf-hero-title {
    max-width: 9em;
    color: var(--pnf-ink);
    font-size: clamp(46px, 4.4vw, 68px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.06em;
}
.pnf-hero-sub {
    max-width: 390px;
    margin-top: 22px;
    color: var(--pnf-ink-sub);
    font-size: 18px;
    line-height: 1.65;
}
.pnf-hero-copy .pnf-btns { margin-top: 34px; }
.pnf-hero-copy .pnf-btn { height: 52px; padding-inline: 26px; }
.pnf-hero-controls {
    right: max(24px, calc((100vw - 1280px) / 2));
    bottom: 24px;
    color: #fff;
}
.pnf-hero-arrow {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: rgba(15,51,39,.82);
}

/* Hero 하단 신뢰 근거 */
.pnf-proof {
    border-top: 1px solid var(--pnf-line);
    border-bottom: 1px solid var(--pnf-line);
    background: #fff;
}
.pnf-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pnf-proof-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 18px;
    min-width: 0;
    padding: 30px 28px;
    border-right: 1px solid var(--pnf-line);
}
.pnf-proof-item:first-child { padding-left: 0; }
.pnf-proof-item:last-child { border-right: 0; padding-right: 0; }
.pnf-proof-item strong {
    color: var(--pnf-deep);
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
}
.pnf-proof-item span { color: var(--pnf-ink-sub); font-size: 13px; line-height: 1.55; }
.pnf-proof-item b { display: block; margin-bottom: 4px; color: var(--pnf-ink); font-size: 15px; }

/* 제품: 이미지와 정보를 동시에 보여주는 비교 카드 */
#pnf-product .pnf-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
#pnf-product .pnf-head { grid-column: 1 / -1; }
#pnf-product .pnf-product-row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    min-height: 390px;
    overflow: hidden;
    border: 1px solid var(--pnf-line);
    border-radius: 0;
    background: #fff;
    color: var(--pnf-ink);
}
#pnf-product .pnf-product-visual {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 100%;
    background: var(--pnf-surface);
}
#pnf-product .pnf-product-visual::after { display: none; }
#pnf-product .pnf-product-shape,
#pnf-product .pnf-product-shape--b { background: var(--pnf-surface); }
#pnf-product .pnf-product-shape img {
    filter: none;
    object-fit: cover;
    transition: transform .5s ease;
}
#pnf-product .pnf-product-body {
    position: relative;
    display: flex;
    justify-content: center;
    width: auto;
    padding: 34px 30px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
#pnf-product .pnf-product-row:hover .pnf-product-shape img,
#pnf-product .pnf-product-row:focus-within .pnf-product-shape img { filter: none; transform: scale(1.025); }
#pnf-product .pnf-product-tit { color: var(--pnf-ink); font-size: 30px; }
#pnf-product .pnf-product-txt { margin-top: 10px; color: var(--pnf-ink-sub); font-size: 15px; }
#pnf-product .pnf-product-spec {
    margin-top: 24px;
    padding-top: 18px;
    border-color: var(--pnf-line);
    color: var(--pnf-ink-sub);
    font-size: 13px;
}
#pnf-product .pnf-product-spec dt { color: var(--pnf-ink-sub); }
#pnf-product .pnf-product-spec dd { color: var(--pnf-ink); }
#pnf-product .pnf-product-body .pnf-btns { margin-top: 24px; }
#pnf-product .pnf-product-row--reverse .pnf-product-visual,
#pnf-product .pnf-product-row--reverse .pnf-product-body { order: initial; }

/* 기술: 이미지 카드 대신 4단계 선형 프로세스 */
#pnf-tech { border-top: 1px solid var(--pnf-line); background: #fff; }
#pnf-tech .pnf-tech-layout { display: block; }
#pnf-tech .pnf-deck { display: none; }
#pnf-tech .pnf-tech-body { width: 100%; max-width: none; }
#pnf-tech .pnf-tech-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 40px;
    border-top: 1px solid var(--pnf-line);
    border-bottom: 1px solid var(--pnf-line);
}
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:last-child {
    position: relative;
    display: block;
    min-height: 250px;
    padding: 34px 30px;
    border: 0;
    border-right: 1px solid var(--pnf-line);
}
#pnf-tech .pnf-tech-steps li:last-child { border-right: 0; }
#pnf-tech .pnf-tech-step-num {
    display: block;
    margin-bottom: 28px;
    color: var(--pnf-deep);
    font-size: 28px;
    font-weight: 700;
}
#pnf-tech .pnf-tech-step-tit { font-size: 19px; line-height: 1.35; }
#pnf-tech .pnf-tech-step-txt { margin-top: 14px; color: var(--pnf-ink-sub); font-size: 14px; line-height: 1.7; }
#pnf-tech .pnf-tech-body > .pnf-btns { margin-top: 28px; }

/* 협력: 일러스트 대신 향후 실사진 교체용 비율 박스 */
#pnf-partner { border-top: 1px solid var(--pnf-line); }
#pnf-partner .pnf-inner {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
#pnf-partner .pnf-head { margin: 0; }
#pnf-partner .pnf-head .pnf-h2 br { display: initial; }
#pnf-partner .pnf-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#pnf-partner .pnf-biz-card {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 184px;
    border-radius: 0;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
#pnf-partner .pnf-biz-card:hover {
    transform: translateY(-3px);
    border-color: #C18D00;
    box-shadow: 0 12px 28px rgba(16,40,31,.08);
}
#pnf-partner .pnf-biz-art {
    position: relative;
    aspect-ratio: auto;
    min-height: 100%;
    overflow: hidden;
    background: #E9ECEA;
}
#pnf-partner .pnf-biz-art img { display: none !important; }
#pnf-partner .pnf-biz-art::after {
    content: "PARTNER IMAGE\A3 : 2";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #6A7770;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    white-space: pre;
}
#pnf-partner .pnf-biz-body { padding: 26px 22px; }
#pnf-partner .pnf-biz-tit { font-size: 18px; }
#pnf-partner .pnf-biz-txt { margin-top: 10px; font-size: 14px; line-height: 1.65; }
#pnf-partner .pnf-biz-go {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--pnf-accent);
    color: var(--pnf-ink);
}

/* 실증·소식·문의: 기존 기능을 유지하며 동일한 토큰으로 정돈 */
#pnf-field { padding-block: var(--pnf-gap); border-top: 1px solid var(--pnf-line); }
#pnf-field .pnf-inner { border-radius: 0; }
#pnf-field .pnf-inner::before { background: rgba(10,35,26,.58); }
#pnf-news { padding-top: var(--pnf-gap); }
#pnf-award { border-top: 1px solid var(--pnf-line); }
#pnf-award .pnf-award-card > a,
#pnf-contact .pnf-form { border-radius: 0; }
#pnf-contact {
    border-top: 1px solid var(--pnf-line);
    background: #F7F8F7;
}
#pnf-contact .pnf-contact-grid { gap: 64px; }
#pnf-contact .pnf-field input[type="text"],
#pnf-contact .pnf-field select,
#pnf-contact .pnf-field textarea { border-radius: 2px; }
#pnf-main > .pnf-marquee--even { display: none; }

@media screen and (max-width: 1100px) {
    #pnf-main { --pnf-gap: 88px; }
    .pnf-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pnf-proof-item:nth-child(2) { border-right: 0; }
    .pnf-proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--pnf-line); }
    .pnf-proof-item:first-child,
    .pnf-proof-item:last-child { padding-inline: 28px; }
    #pnf-product .pnf-product-row { grid-template-columns: 1fr; }
    #pnf-product .pnf-product-visual { min-height: 330px; }
    #pnf-tech .pnf-tech-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pnf-tech .pnf-tech-steps li:nth-child(2) { border-right: 0; }
    #pnf-tech .pnf-tech-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--pnf-line); }
    #pnf-partner .pnf-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media screen and (max-width: 768px) {
    #pnf-main { --pnf-gap: 72px; }
    #pnf-main .pnf-h2 { font-size: 34px; }
    #pnf-main .pnf-sec { padding-block: var(--pnf-gap); }
    #pnf-hero { padding-top: var(--gw-header-h); }
    .pnf-hero-stage { min-height: 720px; }
    .pnf-hero-media { inset: 300px 0 0; }
    .pnf-hero-shade { inset: 300px 0 0; background: linear-gradient(180deg, rgba(16,40,31,.04), rgba(16,40,31,.12)); }
    .pnf-hero-copy {
        left: 24px;
        right: 24px;
        top: 50px;
        bottom: auto;
        width: auto;
        transform: none;
    }
    .pnf-hero-copy::before { margin-bottom: 16px; font-size: 10px; }
    #pnf-main .pnf-hero-title { max-width: 9em; font-size: 42px; }
    .pnf-hero-sub { margin-top: 14px; font-size: 16px; line-height: 1.55; }
    .pnf-hero-copy .pnf-btns { margin-top: 20px; }
    .pnf-hero-copy .pnf-btn { width: auto; height: 48px; }
    .pnf-hero-controls { right: 16px; bottom: 16px; }
    .pnf-proof-grid { grid-template-columns: 1fr; }
    .pnf-proof-item,
    .pnf-proof-item:first-child,
    .pnf-proof-item:last-child {
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--pnf-line);
    }
    .pnf-proof-item:last-child { border-bottom: 0; }
    #pnf-product .pnf-inner { grid-template-columns: 1fr; gap: 16px; }
    #pnf-product .pnf-head { grid-column: auto; }
    #pnf-product .pnf-product-row { min-height: 0; }
    #pnf-product .pnf-product-visual { min-height: 360px; }
    #pnf-product .pnf-product-body { padding: 28px 24px; }
    #pnf-tech .pnf-tech-steps { grid-template-columns: 1fr; }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:nth-child(2) {
        min-height: 0;
        padding: 26px 0;
        border-right: 0;
        border-bottom: 1px solid var(--pnf-line);
    }
    #pnf-tech .pnf-tech-steps li:last-child { border-bottom: 0; }
    #pnf-tech .pnf-tech-step-num { margin-bottom: 14px; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: 1fr; }
    #pnf-partner .pnf-biz-card { min-height: 168px; }
    #pnf-field .pnf-inner { min-height: 390px; }
    #pnf-contact .pnf-contact-grid { gap: 40px; }
}

@media screen and (max-width: 480px) {
    #pnf-main .pnf-inner { padding-inline: 20px; }
    #pnf-main .pnf-h2 { font-size: 30px; }
    #pnf-main .pnf-lead { font-size: 15px; }
    .pnf-hero-stage { min-height: 660px; }
    .pnf-hero-media,
    .pnf-hero-shade { top: 286px; }
    #pnf-main .pnf-hero-title { font-size: 36px; }
    .pnf-proof-item strong { font-size: 23px; }
    #pnf-product .pnf-product-visual { min-height: 300px; }
    #pnf-partner .pnf-biz-card { grid-template-columns: 38% minmax(0, 1fr); }
    #pnf-partner .pnf-biz-body { padding: 22px 18px; }
}

.pnf-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* --- 블롭 마스크 ------------------------------------------------------------
   야마우치가 사진을 자르는 방식. 정사각 이미지를 유기적인 형태로 깎는다.
   각도가 다른 두 종류를 번갈아 써야 반복돼 보이지 않는다.
   -------------------------------------------------------------------------- */
.pnf-blob   { border-radius: 62% 38% 46% 54% / 54% 42% 58% 46%; overflow: hidden; }
.pnf-blob-b { border-radius: 42% 58% 62% 38% / 46% 58% 42% 54%; overflow: hidden; }
.pnf-blob img, .pnf-blob-b img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 번호칩 -----------------------------------------------------------------
   사학재단의 기울어진 포인트색 카드. 01~04 를 붙여 순서를 눈에 박는다.
   -------------------------------------------------------------------------- */
.pnf-numchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 74px;
    border-radius: var(--pnf-r-chip);
    background: var(--pnf-gold);
    color: var(--pnf-on-accent);
    font-family: "Outfit", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 10px 24px rgba(20,35,27,.10);
}

/* --- 사선 리본 --------------------------------------------------------------
   사학재단의 섹션 경계. 색면을 비스듬히 잘라 화면에 속도를 준다.
   -------------------------------------------------------------------------- */
.pnf-ribbon {
    position: absolute;
    left: -4%;
    width: 108%;
    height: 190px;
    z-index: 0;
    pointer-events: none;
}
.pnf-ribbon--top    { top: -70px; transform: rotate(-2.4deg); }
.pnf-ribbon--bottom { bottom: -70px; transform: rotate(2deg); }

/* --- 웨이브 경계 ------------------------------------------------------------ */
.pnf-wave { position: absolute; left: 0; width: 100%; line-height: 0; z-index: 1; }
.pnf-wave--bottom { bottom: -1px; }
.pnf-wave--top { top: -1px; }
.pnf-wave svg { display: block; width: 100%; height: auto; }

/* ----------------------------------------------------------------------------
   3. 히어로
   -------------------------------------------------------------------------- */
#pnf-hero {
    position: relative;
    padding: calc(var(--gw-header-h) + 72px) 0 200px;
    background: var(--pnf-cream);
    overflow: hidden;
}

.pnf-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
}

.pnf-hero-title {
    margin: 0;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -0.035em;
    word-break: keep-all;
}
/* 카피 안에서 딱 한 덩어리만 브랜드색으로 집는다 */
.pnf-hero-title .pnf-em { color: var(--main-color); }

.pnf-hero-sub {
    margin: 30px 0 0;
    /* 줄바꿈을 <br> 로 직접 정하므로 폭으로 다시 끊지 않는다 */
    max-width: none;
    font-size: 18px;
    line-height: 1.95;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}


/* --- 히어로 이미지 묶음 ----------------------------------------------------- */
.pnf-hero-visual { position: relative; }

/* 히어로 일러스트. 아래 섹션의 플랫 SVG 와 같은 결로 보이도록
   사진 대신 직접 그린 그림을 블롭에 담는다. */
/* 히어로 마스크. 세로로 긴 짜부 원형이다 — 벼가 자라는 세로 영상을 담는 자리라
   가로로 넓은 블롭 대신 위아래로 길게 잡는다.
   .pnf-blob 의 기본 반경보다 뒤에 와야 하므로 여기서 다시 정한다. */
.pnf-hero-art {
    position: relative;
    z-index: 2;
    aspect-ratio: 1 / 1.32;
    /* 매끈한 타원이 아니라 한쪽이 눌린 조약돌. 네 모서리 반경을 크게 벌린다 */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(20,35,27,.14);
}
.pnf-hero-art svg,
.pnf-hero-art img,
.pnf-hero-art video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 영상 파일이 16:9 안에 세로 화면을 넣은 레터박스라 좌우에 검은 띠가 있다.
   cover 만으로는 양쪽에 31px 씩 남아 조금 더 당겨서 잘라낸다.
   (마스크 비율 1/1.32 기준이다. 비율을 바꾸면 이 배율도 다시 잡아야 한다) */
.pnf-hero-art video { transform: scale(1.14); }

/* 뒤에 겹치는 포인트색 블롭 — 화면에 깊이를 만든다 */
.pnf-hero-blob {
    position: absolute;
    z-index: 1;
    right: -6%;
    top: -8%;
    width: 46%;
    aspect-ratio: 1;
    background: var(--pnf-gold-100);
    border-radius: 46% 54% 38% 62% / 58% 44% 56% 42%;
}


/* ----------------------------------------------------------------------------
   4. 마퀴 — 딥그린 띠 (히어로 물결 아래, 그리고 공급·협력 다음)
   -------------------------------------------------------------------------- */
.pnf-marquee {
    position: relative;
    padding: 26px 0 56px;
    background: var(--pnf-green-900);
    overflow: hidden;
}
/* 같은 묶음을 두 벌 이어 붙이고 정확히 절반만 밀어야 이음매 없이 계속 돈다.
   한 벌이 끝나는 순간 두 번째 벌이 같은 자리에 와 있어 되돌아가는 점프가 보이지 않는다.
   flex-shrink 를 막지 않으면 좁은 화면에서 span 이 눌려 절반이 어긋난다. */
/* 공급·협력 아래 띠는 아래를 물결로 넘긴다.
   물결은 히어로 것과 같은 비율(1440:120)로 폭을 따라 커지므로,
   아래 여백도 같은 비율(8.4vw)로 잡아야 글자를 덮지 않는다 */
.pnf-marquee--even { padding: 56px 0 max(112px, 8.4vw); }

.pnf-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    /* 한 겹이 약 4,000px 이라 이 시간이라야 초당 90px 남짓으로 흐른다 */
    animation: pnf-marquee 45s linear infinite;
    will-change: transform;
}
.pnf-marquee-track span {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 30px;
    padding-right: 30px;
    font-family: "Outfit", sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .06em;
    white-space: nowrap;
    color: rgba(255,255,255,.85);
}
.pnf-marquee-track span::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pnf-gold);
    flex: none;
}
@keyframes pnf-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .pnf-marquee-track { animation: none; }
}

/* ----------------------------------------------------------------------------
   5. 현장 실증 — 밝은 면 위에 글과 버튼만 가운데로
   -------------------------------------------------------------------------- */
#pnf-field { overflow: hidden; }

/* 기록 카드를 걷고 글과 버튼만 가운데에 모은다 */
.pnf-stats-layout { display: block; }
.pnf-stats-copy {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.pnf-stats-copy .pnf-lead { max-width: none; }
.pnf-stats-copy .pnf-btns { justify-content: center; }


/* ----------------------------------------------------------------------------
   6. 제품 — 블롭에 담은 두 가지, 좌우 교대
   -------------------------------------------------------------------------- */
/* 카드가 아니라 큰 도형에 제품을 담고 옆에 설명을 세운다.
   두 번째 줄은 좌우를 뒤집어 시선이 지그재그로 내려가게 한다. */
.pnf-product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
}
.pnf-product-row + .pnf-product-row { margin-top: 110px; }
.pnf-product-row--reverse .pnf-product-visual { order: 2; }
.pnf-product-row--reverse .pnf-product-body   { order: 1; }

.pnf-product-visual { position: relative; }

/* 도형 뒤에 겹치는 옅은 색면 — 도형이 배경에서 떠 보이게 받쳐 준다 */
.pnf-product-blob {
    position: absolute;
    z-index: 0;
    right: 2%;
    top: -7%;
    width: 42%;
    aspect-ratio: 1;
    background: var(--pnf-gold-100);
    border-radius: 52% 48% 42% 58% / 46% 56% 44% 54%;
}
.pnf-product-row--reverse .pnf-product-blob { right: auto; left: 2%; }

/* 야마우치식 유기적 도형. 정사각형이 아니라 가로로 넉넉한 비율로 잡는다 */
.pnf-product-shape {
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 0.86;
    background: #fff;
    border-radius: 44% 56% 48% 52% / 52% 44% 56% 48%;
    overflow: hidden;
}
.pnf-product-shape--b { border-radius: 56% 44% 52% 48% / 46% 54% 46% 54%; }
/* 제품 사진은 흰 배경 위에서 찍힌 누끼라 도형 위에 흰 사각형이 떠 보인다.
   곱하기로 섞어 흰 부분을 배경에 녹인다. */
.pnf-product-shape img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 13%;
    display: block;
    mix-blend-mode: multiply;
}

.pnf-product-body { display: flex; flex-direction: column; align-items: flex-start; }
.pnf-product-body .pnf-btns { margin-top: 32px; }


.pnf-product-tit {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
/* 대문자로 늘리지 않고 적힌 그대로(Doctor Rare Earth Element) 둔다 */
.pnf-product-en {
    margin: 0 0 4px;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pnf-ink-sub);
}
.pnf-product-txt {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}
.pnf-product-spec {
    width: 100%;
    max-width: 460px;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    font-size: 14.5px;
}
.pnf-product-spec dt { font-weight: 700; color: var(--pnf-ink); }
.pnf-product-spec dd { margin: 0; color: var(--pnf-ink-sub); }

/* 두 번째 줄은 이미지가 오른쪽이라 글이 왼쪽 끝에 홀로 남는다.
   글 덩어리를 오른쪽 가장자리에 붙여 이미지와 마주 보게 한다. */
@media screen and (min-width: 769px) {
    .pnf-product-row--reverse .pnf-product-body {
        align-items: flex-start;
        text-align: left;
    }
    .pnf-product-row--reverse .pnf-product-spec {
        grid-template-columns: 1fr auto;
        justify-items: end;
    }
    /* 항목 이름과 값의 자리를 맞바꿔야 이름이 값 왼쪽에 그대로 온다 */
    .pnf-product-row--reverse .pnf-product-spec dt { grid-column: 1; }
    .pnf-product-row--reverse .pnf-product-spec dd { grid-column: 2; }
}

/* ----------------------------------------------------------------------------
   7. 핵심기술 — 네 항목을 짧게. 여기서 공정을 다 설명하지 않는다.
   -------------------------------------------------------------------------- */
/* --- 카드 기둥 — 사학재단 p-home-about__img-box 방식 -------------------------
   원본은 카드를 가로로 늘어놓지 않는다. 왼쪽에 좁은 기둥을 세우고 그 안에
   카드를 위에서 아래로 지그재그로 겹쳐 떨어뜨린다. 오른쪽에는 글이 붙는다.
   (원본: .p-home-about__inner { display:flex; gap:82px }
          .p-home-about__img-box { width:44%; padding-bottom:66% }
          카드는 top 0 / 21% / 51% 에 절대배치)

   각 카드는 제 자리가 화면에 들어올 때 각도 0 에서 제 각도까지 돌아 들어온다.
   한꺼번에가 아니라 스크롤을 내리는 대로 한 장씩 차례로 열린다.
   축은 카드 아래 좌우 모서리를 번갈아 잡는다 — 제자리에서 도는 것이 아니라
   책상에 카드를 툭 내려놓는 손짓이 된다.
   ---------------------------------------------------------------------------- */
.pnf-tech-layout { display: block; }
.pnf-deck { position: relative; }
.pnf-deck-stage { position: relative; }
.pnf-deck-item { margin: 0; }
.pnf-deck-item + .pnf-deck-item { margin-top: 20px; }

@media screen and (min-width: 1025px) {
    .pnf-tech-layout { display: flex; gap: 82px; align-items: flex-start; }

    /* 왼쪽 기둥. 카드 크기와 내려오는 간격을 여기서 한 번에 정한다 */
    .pnf-deck {
        --pnf-card-w: 360px;
        --pnf-card-h: calc(var(--pnf-card-w) * 7 / 5);
        --pnf-card-step: 330px;
        width: 46%;
        flex: none;
    }
    /* 위로 60px, 아래로 110px 은 카드가 돌면서 삐져나갈 자리 */
    .pnf-deck-stage {
        height: calc(3 * var(--pnf-card-step) + var(--pnf-card-h) + 170px);
    }

    /* 오른쪽 글. 기둥이 훨씬 기니까 따라 내려오게 붙여 둔다 */
    .pnf-tech-body {
        flex: 1 1 auto;
        min-width: 0;
        position: sticky;
        top: calc(var(--gw-header-h) + 70px);
    }

    .pnf-deck-item {
        position: absolute;
        width: var(--pnf-card-w);
        margin: 0;
        transition: opacity 1.2s cubic-bezier(0.213, 0.62, 0.353, 1),
                    transform 1.2s cubic-bezier(0.213, 0.62, 0.353, 1);
        backface-visibility: hidden;
    }
    .pnf-deck-item + .pnf-deck-item { margin-top: 0; }

    /* 좌우를 오가며 한 장씩 아래로 떨어진다.
       각도는 스크립트가 없어도 이대로 보이는 최종 모습이다. */
    .pnf-deck-item:nth-child(1) { top: 60px;   left: 22%; transform-origin: bottom left;  transform: rotate(-13deg); }
    .pnf-deck-item:nth-child(2) { top: 390px;  left:  2%; transform-origin: bottom right; transform: rotate(11deg); }
    .pnf-deck-item:nth-child(3) { top: 720px;  left: 30%; transform-origin: bottom left;  transform: rotate(-9deg); }
    .pnf-deck-item:nth-child(4) { top: 1050px; left:  6%; transform-origin: bottom right; transform: rotate(14deg); }

    /* 나중 장이 앞 장의 빈 아래쪽을 덮는다 */
    .pnf-deck-item:nth-child(1) { z-index: 1; }
    .pnf-deck-item:nth-child(2) { z-index: 2; }
    .pnf-deck-item:nth-child(3) { z-index: 3; }
    .pnf-deck-item:nth-child(4) { z-index: 4; }

    /* 감추기는 스크립트가 .is-armed 를 붙인 뒤부터다. JS 가 죽어도 카드는 보인다 */
    .pnf-deck.is-armed .pnf-deck-item { opacity: 0; transform: rotate(0); }

    /* 카드마다 따로 열린다 — 스크롤을 내리는 대로 한 장씩 */
    .pnf-deck.is-armed .pnf-deck-item.is-start { opacity: 1; }
    .pnf-deck.is-armed .pnf-deck-item.is-start:nth-child(1) { transition-duration: .5s; transform: rotate(-13deg); }
    .pnf-deck.is-armed .pnf-deck-item.is-start:nth-child(2) { transition-duration: .7s; transform: rotate(11deg); }
    .pnf-deck.is-armed .pnf-deck-item.is-start:nth-child(3) { transition-duration: .6s; transform: rotate(-9deg); }
    .pnf-deck.is-armed .pnf-deck-item.is-start:nth-child(4) { transition-duration: .8s; transform: rotate(14deg); }
}

/* 노트북 폭 — 카드와 간격만 줄이고 짜임은 그대로 */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .pnf-deck { --pnf-card-w: 300px; --pnf-card-step: 280px; }
    .pnf-tech-layout { gap: 52px; }
    .pnf-deck-item:nth-child(2) { top: 340px; }
    .pnf-deck-item:nth-child(3) { top: 620px; }
    .pnf-deck-item:nth-child(4) { top: 900px; }
}

/* 1024px 아래 — 원본이 SP 에서 그러듯 글을 위로 올리고 카드를 아래에 편다 */
@media screen and (max-width: 1024px) {
    .pnf-award-card { flex-basis: calc((100% - 48px) / 3); }
    .pnf-tech-layout { display: flex; flex-direction: column-reverse; gap: 44px; }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .pnf-deck-stage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
    .pnf-deck-item + .pnf-deck-item { margin-top: 0; }
}

/* 모션을 줄이라고 한 브라우저에서는 돌리는 과정 없이 결과만 보여 준다 */
@media (prefers-reduced-motion: reduce) {
    .pnf-deck-item { transition: none !important; }
    .pnf-deck.is-armed .pnf-deck-item { opacity: 1; }
}

/* --- 오른쪽 네 단계 목록 ---------------------------------------------------- */
.pnf-tech-steps { margin: 36px 0 0; padding: 0; list-style: none; }
.pnf-tech-steps li {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--pnf-line);
}
.pnf-tech-steps li:last-child { border-bottom: 1px solid var(--pnf-line); }
.pnf-tech-step-num {
    flex: none;
    padding-top: 3px;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--main-color);
}
.pnf-tech-step-tit {
    margin: 0 0 7px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
.pnf-tech-step-txt {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}

/* --- 카드 --------------------------------------------------------------------
   트럼프 카드처럼 세로로 긴 비율. 내용은 위에서 아래로 흐른다.
   배경이 불투명해야 겹쳤을 때 맨 위 장만 읽힌다.
   ---------------------------------------------------------------------------- */
.pnf-tech-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 5 / 7;
    padding: 34px 32px 30px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--pnf-line);
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(20,35,27,.14);
}


.pnf-tech-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
/* 일러스트가 카드의 남은 아래쪽을 채운다. 번호·라벨·제목이 위에 모여 있어야
   카드가 겹쳐도 무엇에 관한 장인지 읽힌다. */
.pnf-tech-art {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin: 20px 0 0;
}
/* 흰 바탕 그림이라 카드 배경과 이어진다. 잘리지 않게 통째로 앉힌다 */
.pnf-tech-art img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pnf-tech-tit {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}

.pnf-tech-body > .pnf-btns { margin-top: 34px; }

/* ----------------------------------------------------------------------------
   8. 공급·협력 — 네 갈래 경로
   -------------------------------------------------------------------------- */
/* 사학재단 Information 의 짜임.
   왼쪽은 카드 테두리 없이 색면 위에 큰 그림을 얹고 그 아래에 글을 붙이고,
   오른쪽에는 색면 머리를 가진 카드 두 장을 쌓는다. 크기가 달라 무엇이
   중심인지 먼저 읽힌다. */
.pnf-biz-grid {
    /* 오른쪽 줄을 이만큼 내려 카드가 어긋나게 흐른다 */
    --pnf-stagger: 120px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: start;
}
/* 두 줄이 반 칸씩 어긋난다.
     [ 1     ]
     [    2  ]
     [ 3     ]
     [    4  ]
   2 를 내리면 첫 행이 그만큼 높아지므로 3 을 같은 값만큼 끌어올려
   1 바로 아래에 붙인다. 순서(1·2·3·4)는 마크업 그대로라 좁은 화면에서도 안 꼬인다. */
.pnf-biz-grid > :nth-child(2) { margin-top: var(--pnf-stagger); }
.pnf-biz-grid > :nth-child(3) { margin-top: calc(-1 * var(--pnf-stagger)); }

.pnf-biz-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}

/* 그림은 상자에 담지 않는다. 색면 위에 그대로 두고, 글만 흰 상자에 담는다.
   호버하면 그림과 상자가 함께 떠오른다 */
.pnf-biz-card { background: none; }
/* AOS 가 .aos-animate 에 transform 을 걸어 두어 그냥 두면 호버가 먹지 않는다 */
#pnf-main .pnf-biz-card:hover { transform: translateY(-18px); }
.pnf-biz-card .pnf-biz-body {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    /* 그림 바로 아래에 붙여 흰 면이 이어지게 한다. 위 모서리는 각지게 */
    padding: 42px 30px 30px;
    background: #fff;
    border-radius: 0 0 var(--pnf-r-card) var(--pnf-r-card);
    transition: box-shadow .35s ease;
}
.pnf-biz-card:hover .pnf-biz-body { box-shadow: 0 20px 42px rgba(20,35,27,.10); }
.pnf-biz-card .pnf-biz-text { flex: 1; }

/* 그림은 색면 없이 제 비율대로 카드 폭을 가득 채운다 */
.pnf-biz-art { width: 100%; }
.pnf-biz-art img { width: 100%; height: auto; display: block; }

.pnf-biz-tit {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.pnf-biz-txt {
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}

/* 카드 오른쪽 끝의 동그란 화살표 */
.pnf-biz-go {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pnf-cream);
    color: var(--main-color);
    font-size: 15px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pnf-biz-card:hover .pnf-biz-go {
    background: var(--main-color);
    color: #fff;
    transform: translateX(4px);
}

/* ----------------------------------------------------------------------------
   9. 공지사항 + 인증·수상
   -------------------------------------------------------------------------- */

/* --- 왼쪽(또는 가운데) 라벨 : 영문 큰 글자 + 국문 작은 글자 ------------------ */
/* 섹션 이름은 한글 한 줄로만 세운다 */
.pnf-label-tit {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}

/* --- 화살표 칩 : 목록 줄 끝과 카드 아래에 붙는 작은 사각 버튼 --------------- */
/* 공급·협력 카드의 동그란 화살표와 같은 색·같은 호버로 둔다 */
.pnf-arrow {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 32px;
    border-radius: 6px;
    background: var(--pnf-cream);
    color: var(--main-color);
    font-size: 14px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
a:hover .pnf-arrow { background: var(--main-color); color: #fff; transform: translateX(4px); }

/* --- 공지사항 --------------------------------------------------------------- */
.pnf-news-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px 70px;
    align-items: start;
}

/* 최신글 스킨(skin/latest/pnf_news)이 이 안을 채운다 */
.pnf-news-list { margin: 0; padding: 0; list-style: none; }
.pnf-news-list li { border-bottom: 1px solid var(--pnf-line); }
.pnf-news-list a {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 2px 24px 0;
    text-decoration: none;
    color: inherit;
}
.pnf-news-text { flex: 1 1 auto; min-width: 0; }
.pnf-news-tit {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.02em;
    word-break: keep-all;
    transition: color .25s ease;
}
.pnf-news-list a:hover .pnf-news-tit { color: var(--main-color); }
.pnf-news-date {
    display: block;
    margin-top: 10px;
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #A6B1AB;
}
.pnf-news-more { display: flex; justify-content: flex-end; margin-top: 34px; }
.pnf-news-more a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--pnf-ink);
}
.pnf-news-empty {
    padding: 40px 0;
    font-size: 15px;
    color: var(--pnf-ink-sub);
}

/* --- 인증·수상 가로 레일 -----------------------------------------------------
   공지사항과 같은 .pnf-inner 폭 안에 가둔다. 카드는 그 폭을 정확히 나눠 채우고,
   더 있는 장은 컨테이너 안에서 옆으로 넘긴다.
   ---------------------------------------------------------------------------- */
.pnf-award-railwrap {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: calc(var(--pnf-inner) + var(--gw-padding) * 2);
    padding: 0 var(--gw-padding);
}
.pnf-award-rail {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 26px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* 막대 대신 제목 옆 버튼으로 넘긴다 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.pnf-award-rail::-webkit-scrollbar { display: none; }

/* --- 머리줄 : 제목 + 넘김 버튼 + 전체 보기 ---------------------------------- */
.pnf-award-head {
    display: flex;
    align-items: center;
    gap: 34px;
    /* 아래 레일과 같은 컨테이너 폭 */
    margin: 0 auto 46px;
    width: 100%;
    max-width: calc(var(--pnf-inner) + var(--gw-padding) * 2);
    padding: 0 var(--gw-padding);
}
.pnf-award-head .pnf-label { flex: none; }

/* 전체 보기는 기본(면색) 버튼 그대로 쓰고 오른쪽 끝에만 붙인다 */
.pnf-award-all { margin-left: auto; }

/* --- 레일 조작부 -------------------------------------------------------------
   동그란 [ ◀ ] [ ▶ ] 둘을 제목 옆에 둔다. 눌렀을 때만 한 장씩 넘어간다.
   ---------------------------------------------------------------------------- */
.pnf-rail-nav {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pnf-rail-nav[hidden] { display: none; }

.pnf-rail-btn {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1.5px solid var(--pnf-line);
    border-radius: 50%;
    background: #fff;
    color: var(--pnf-ink);
    font-size: 18px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.pnf-rail-btn:hover { background: var(--main-color); border-color: transparent; color: #fff; }
.pnf-rail-btn:active { transform: scale(.94); }

.pnf-award-track {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 사이 간격 24px 세 번을 뺀 나머지를 넷이 나눠 갖는다 — 컨테이너가 정확히 찬다 */
.pnf-award-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }
.pnf-award-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px 18px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--pnf-line);
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
}
.pnf-award-card > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(20,35,27,.05);
}
.pnf-award-shot {
    position: relative;
    aspect-ratio: 1 / 1.28;
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pnf-cream);
}
.pnf-award-shot img {
    width: 100%;
    height: 100%;
    /* 인증서는 위쪽에 제목이 있다. 잘려도 위는 남게 한다 */
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .5s ease;
}
.pnf-award-card > a:hover .pnf-award-shot img { transform: scale(1.04); }
.pnf-award-shot--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pnf-green-050);
    color: var(--pnf-green-300);
    font-size: 30px;
}
.pnf-award-tit {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.pnf-award-meta {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}
/* 설명 길이가 달라도 아래 줄은 카드 바닥에 붙는다 */
.pnf-award-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--pnf-line);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------------
   10. 오시는길 + 문의
   -------------------------------------------------------------------------- */
.pnf-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
}

.pnf-contact-list { margin: 34px 0 0; padding: 0; list-style: none; }
.pnf-contact-list li {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px dashed rgba(255,255,255,.18);
    font-size: 15.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.82);
    word-break: keep-all;
}
.pnf-contact-list i {
    flex: none;
    margin-top: 3px;
    font-size: 18px;
    color: var(--pnf-gold);
}
.pnf-contact-list a { color: inherit; text-decoration: none; }
.pnf-contact-list a:hover { color: var(--pnf-gold-300); }

/* --- 문의 폼 ---------------------------------------------------------------
   필드 이름과 검증 스크립트는 기존 그대로 두고 겉모습만 바꾼다.
   (interface/main_inquiry_write.php 가 wr_name·wr_1·wr_2 등을 그대로 받는다)
   -------------------------------------------------------------------------- */
.pnf-form {
    padding: 46px;
    border-radius: var(--pnf-r-card);
    background: #fff;
}
.pnf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.pnf-field { display: flex; flex-direction: column; gap: 9px; }
.pnf-field--full { grid-column: 1 / -1; }
.pnf-field label {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pnf-ink);
}
/* 테마 전역 input 규칙(all:unset + 2px #ddd)을 메인 안에서만 덮는다 */
#pnf-main .pnf-field input[type="text"],
#pnf-main .pnf-field select,
#pnf-main .pnf-field textarea {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--pnf-line);
    border-radius: 14px;
    background: var(--pnf-cream);
    font-family: "Noto Sans KR", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pnf-ink);
    transition: border-color .25s ease, background .25s ease;
}
#pnf-main .pnf-field input[type="text"],
#pnf-main .pnf-field select { height: 54px; }
#pnf-main .pnf-field textarea { min-height: 168px; resize: vertical; }
#pnf-main .pnf-field input[type="text"]:focus,
#pnf-main .pnf-field select:focus,
#pnf-main .pnf-field textarea:focus { border-color: var(--main-color); background: #fff; }
#pnf-main .pnf-field input::placeholder,
#pnf-main .pnf-field textarea::placeholder { color: var(--pnf-ink-sub); opacity: .7; }

/* all:unset 을 걸면 select 의 화살표도 사라진다. 배경으로 직접 그린다 */
#pnf-main .pnf-field select {
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5A51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}



.pnf-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 14.5px;
    color: var(--pnf-ink-sub);
}
.pnf-agree label { cursor: pointer; }
.pnf-agree .pnf-privacy {
    margin-left: 2px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--main-color);
    font-weight: 600;
    cursor: pointer;
}
.pnf-form .pnf-btns { margin-top: 28px; }
.pnf-form .pnf-btn { width: 100%; }

/* ----------------------------------------------------------------------------
   11. 반응형
   responsive.css 의 분기(1440 / 1280 / 1024 / 768 / 576)를 그대로 따라간다.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
    #pnf-main { --pnf-gap: 118px; --pnf-gap-sm: 82px; }
    .pnf-hero-grid { gap: 52px; }
    .pnf-product-row { gap: 52px; }
    .pnf-product-row + .pnf-product-row { margin-top: 88px; }

    .pnf-biz-grid { gap: 44px; --pnf-stagger: 90px; }
    .pnf-stats-layout { gap: 52px; }
}

@media screen and (max-width: 1280px) {
    #pnf-main { --pnf-gap: 100px; --pnf-gap-sm: 72px; --pnf-r-card: 26px; }
    #pnf-hero { padding: calc(var(--gw-header-h) + 56px) 0 160px; }
    /* 네 칸이 좁아지면 두 칸씩 두 줄로 */


    .pnf-news-row { grid-template-columns: 1fr; gap: 30px; }
    .pnf-contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .pnf-head { margin-bottom: 48px; }
}

@media screen and (max-width: 1024px) {
    .pnf-hero-grid { grid-template-columns: 1fr; gap: 54px; }
    /* 좁아지면 이미지를 아래로 내리고 카피를 먼저 읽게 한다 */
    .pnf-hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
    .pnf-hero-sub { max-width: none; }
    /* 타일과 카피를 위아래로 나눈다 */
    .pnf-stats-layout { grid-template-columns: 1fr; gap: 44px; }
    /* 어긋남을 풀고 넷을 위아래로 세운다 */
    .pnf-biz-grid { grid-template-columns: 1fr; gap: 24px; }
    .pnf-biz-grid > * { margin-top: 0 !important; }
    .pnf-form { padding: 34px; }
}

@media screen and (max-width: 768px) {
    #pnf-main { --pnf-gap: 76px; --pnf-gap-sm: 60px; }
    #pnf-hero { padding: calc(var(--gw-header-h) + 40px) 0 120px; }
    .pnf-product-row { grid-template-columns: 1fr; gap: 34px; }
    .pnf-product-row + .pnf-product-row { margin-top: 64px; }
    /* 좌우를 뒤집던 줄도 좁은 화면에서는 이미지가 먼저 오게 통일한다 */
    .pnf-product-row--reverse .pnf-product-visual { order: 0; }
    .pnf-product-row--reverse .pnf-product-body   { order: 0; }
    .pnf-award-card { flex-basis: calc((100% - 18px) / 2); }
    /* 좁은 화면 — 제목 아래로 버튼과 전체 보기를 내린다 */
    .pnf-award-head { flex-wrap: wrap; gap: 20px 18px; margin-bottom: 32px; }
    .pnf-award-head .pnf-label { flex: 1 0 100%; }
    .pnf-rail-btn { width: 46px; height: 46px; }
    .pnf-label-tit { font-size: 30px; }
    .pnf-form-grid { grid-template-columns: 1fr; }
    .pnf-btn { height: 56px; padding: 0 26px; font-size: 15px; }
    .pnf-marquee-track span { font-size: 17px; gap: 20px; padding-right: 20px; }
}

@media screen and (max-width: 576px) {
    #pnf-main { --pnf-gap: 62px; --pnf-gap-sm: 50px; --pnf-r-card: 22px; }
    .pnf-biz-card .pnf-biz-body { padding: 38px 24px 26px; }
    .pnf-form { padding: 26px 20px; }
    /* 폭이 좁아 버튼 두 개가 한 줄에 안 들어가는 구간부터 전체폭으로 편다.
       768px 대에서 이걸 켜면 버튼 하나가 화면을 가로지른다 */
    .pnf-btns .pnf-btn { flex: 1 1 100%; }
    /* 제품 사진 선반은 한 줄에 둘이 들어가지 않으므로 위아래로 세운다 */
    .pnf-product-spec { grid-template-columns: 1fr; gap: 4px 0; }
    .pnf-product-spec dt { margin-top: 10px; }
}

/* ============================================================================
   12. 2026-09 나인트리형 에디토리얼 리뉴얼

   기존 P&F 콘텐츠와 운영 데이터를 유지하면서 레이아웃 문법만 재구성한다.
   - 고정 흰 헤더
   - 검은 캔버스 안의 대형 관리자 Hero 이미지
   - 직선형 카드·굵은 타이포·넓은 여백
   - 제품 → 기술 → 협력 → 실증 → 소식 → 문의의 전환 흐름
   ========================================================================== */

/* 전역 테마의 outline 제거를 메인 인터랙션에서 복구한다. */
#pnf-main a:focus-visible,
#pnf-main button:focus-visible,
#pnf-main input:focus-visible,
#pnf-main select:focus-visible,
#pnf-main textarea:focus-visible {
    outline: 3px solid var(--pnf-gold);
    outline-offset: 4px;
}

/* 메인 헤더: 최상단에서는 Hero 위에 투명하게 겹치고, 스크롤 후 흰색으로 전환한다. */
body:has(#pnf-main) { background: #fff; }
#hd.hd-transparent:not(.is-scrolled):not(.on) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
}
#hd.hd-transparent:not(.is-scrolled):not(.on) .light-mode-logo { opacity: 0 !important; visibility: hidden; }
#hd.hd-transparent:not(.is-scrolled):not(.on) .dark-mode-logo { opacity: 1 !important; visibility: visible; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #gnb .gnb_1da { color: #fff !important; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #menu-btn .gw-line { background: #fff !important; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #menu-btn .gw-txt { color: #fff !important; }
#hd.hd-transparent.is-scrolled {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
#hd.hd-transparent.is-scrolled .light-mode-logo { opacity: 1 !important; visibility: visible; }
#hd.hd-transparent.is-scrolled .dark-mode-logo { opacity: 0 !important; visibility: hidden; }
#hd.hd-transparent.is-scrolled #gnb .gnb_1da { color: #111 !important; }
#hd.hd-transparent.is-scrolled #menu-btn .gw-line { background: #111 !important; }
#hd.hd-transparent.is-scrolled #menu-btn .gw-txt { color: #111 !important; }
#hd #menu-btn { padding: 0; border: 0; background: transparent; cursor: pointer; }
#hd #menu-btn:focus-visible {
    outline: 3px solid var(--pnf-gold);
    outline-offset: 5px;
}

#pnf-main {
    --pnf-inner: 1280px;
    --pnf-gap: 150px;
    --pnf-gap-sm: 96px;
    background: #fff;
}

#pnf-main .pnf-inner { padding-inline: clamp(24px, 4vw, 72px); }
#pnf-main .pnf-h2 {
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -.055em;
}
#pnf-main .pnf-lead { font-size: 19px; line-height: 1.85; }
#pnf-main .pnf-head { margin-bottom: 72px; }
#pnf-main .pnf-head--center { text-align: left; }

#pnf-main .pnf-btn {
    min-width: 176px;
    height: 64px;
    border-radius: 8px;
    padding-inline: 34px;
    font-size: 17px;
}
#pnf-main .pnf-btn--light { color: #111; }
#pnf-main .pnf-btn--light::before { background: #fff; }
#pnf-main .pnf-btn--light::after { background: var(--pnf-gold); }
#pnf-main .pnf-btn--light:hover { color: #111; }

/* Hero --------------------------------------------------------------------- */
#pnf-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #000;
}
.pnf-hero-stage {
    position: relative;
    max-width: none;
    min-height: 100svh;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
    border: 0;
}
.pnf-hero-slides,
.pnf-hero-slide { position: absolute; inset: 0; }
.pnf-hero-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s ease;
}
.pnf-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.pnf-hero-media { position: absolute; inset: 0; display: block; overflow: hidden; }
.pnf-hero-media img,
.pnf-hero-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1);
}
.pnf-hero-slide.is-active .pnf-hero-media img {
    animation: pnf-hero-zoom-in 7s ease-out both;
}
@keyframes pnf-hero-zoom-in {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}
.pnf-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.23) 57%, rgba(0,0,0,.08) 100%);
}
.pnf-hero-copy {
    position: absolute;
    z-index: 2;
    left: clamp(28px, 6vw, 108px);
    bottom: clamp(54px, 8vw, 118px);
    max-width: 830px;
    color: #fff;
}
#pnf-main .pnf-hero-title {
    margin: 0;
    max-width: 12em;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.065em;
    word-break: keep-all;
}
.pnf-hero-sub {
    max-width: 660px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.86);
    font-size: 24px;
    line-height: 1.75;
    word-break: keep-all;
}
.pnf-hero-copy .pnf-btns { margin-top: 36px; }
.pnf-hero-copy .pnf-btn {
    min-width: 164px;
    height: 56px;
    padding-inline: 30px;
    font-size: 16px;
}
.pnf-hero-controls {
    position: absolute;
    z-index: 3;
    right: 40px;
    bottom: 36px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}
.pnf-hero-arrow {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    color: #fff;
    background: rgba(0,0,0,.2);
    font-size: 24px;
    cursor: pointer;
}
.pnf-hero-count { display: flex; gap: 8px; min-width: 68px; font-family: "Outfit", sans-serif; }

/* 제품 — 두 개의 큰 에디토리얼 카드 -------------------------------------- */
#pnf-product {
    --pnf-product-dim-color: var(--main-color);
    background: #fff;
}
#pnf-product .pnf-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
#pnf-product .pnf-head { grid-column: 1 / -1; }
#pnf-product .pnf-product-row {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(560px, 48vw, 680px);
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    border-radius: 24px;
    background: #0a0a0a;
    color: #fff;
}
#pnf-product .pnf-product-row + .pnf-product-row { margin-top: 0; }
#pnf-product .pnf-product-visual { position: absolute; inset: 0; width: 100%; }
#pnf-product .pnf-product-blob { display: none; }
#pnf-product .pnf-product-shape,
#pnf-product .pnf-product-shape--b {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: #fff;
    border: 0;
}
#pnf-product .pnf-product-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 구형 브라우저 fallback 뒤에 메인 컬러 기반 딤을 선언한다. */
    background: linear-gradient(0deg, rgba(0,45,24,.82) 0%, rgba(0,38,20,.72) 44%, rgba(0,30,16,.62) 100%);
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--pnf-product-dim-color) 82%, transparent) 0%,
        color-mix(in srgb, var(--pnf-product-dim-color) 72%, transparent) 44%,
        color-mix(in srgb, var(--pnf-product-dim-color) 62%, transparent) 100%
    );
    opacity: 1;
    transition: opacity .4s ease;
    pointer-events: none;
}
#pnf-product .pnf-product-shape img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    background: #fff;
    mix-blend-mode: normal;
    filter: grayscale(1) contrast(1.06);
    transition: transform .65s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
#pnf-product .pnf-product-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(34px, 4vw, 56px);
}

/* 마우스 환경에서는 원본 이미지를 먼저 보여주고 상호작용할 때 정보를 연다. */
@media (hover: hover) and (pointer: fine) {
    #pnf-product .pnf-product-visual::after { opacity: 0; }
    #pnf-product .pnf-product-shape img { filter: none; }
    #pnf-product .pnf-product-body {
        opacity: 0;
        transform: translateY(18px);
        pointer-events: none;
        transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1);
    }
    #pnf-product .pnf-product-row:hover .pnf-product-visual::after,
    #pnf-product .pnf-product-row:focus-within .pnf-product-visual::after { opacity: 1; }
    #pnf-product .pnf-product-row:hover .pnf-product-shape img,
    #pnf-product .pnf-product-row:focus-within .pnf-product-shape img {
        filter: grayscale(1) contrast(1.06);
        transform: scale(1.035);
    }
    #pnf-product .pnf-product-row:hover .pnf-product-body,
    #pnf-product .pnf-product-row:focus-within .pnf-product-body {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}
#pnf-product .pnf-product-tit { color: #fff; font-size: 32px; }
#pnf-product .pnf-product-txt,
#pnf-product .pnf-product-spec { color: rgba(255,255,255,.92); }
#pnf-product .pnf-product-spec { border-color: rgba(255,255,255,.28); }
#pnf-product .pnf-product-spec dt { color: rgba(255,255,255,.72); }
#pnf-product .pnf-product-spec dd { color: #fff; }
#pnf-product .pnf-btn--solid { color: #fff; }
#pnf-product .pnf-btn {
    min-width: 168px;
    height: 52px;
    padding-inline: 24px;
    border-radius: 10px;
    font-size: 15px;
}
#pnf-product .pnf-btn--solid::before { background: var(--main-color); }
#pnf-product .pnf-btn--solid::after { background: #fff; box-shadow: inset 0 0 0 1px var(--main-color); }
#pnf-product .pnf-btn--solid:hover { color: var(--main-color); }
#pnf-product .pnf-product-row--reverse .pnf-product-visual,
#pnf-product .pnf-product-row--reverse .pnf-product-body { order: initial; }

/* 핵심기술 — 큰 이미지 덱 + 단계 목록 ------------------------------------- */
#pnf-tech { background: #fff; color: var(--pnf-ink); }
#pnf-tech .pnf-h2,
#pnf-tech .pnf-tech-step-tit { color: var(--pnf-ink); }
#pnf-tech .pnf-tech-layout { gap: 48px; }
#pnf-tech .pnf-head { text-align: left; }
#pnf-tech .pnf-tech-body > .pnf-btns { justify-content: flex-start; }
#pnf-tech .pnf-tech-card { border-radius: 8px; border: 1px solid #dedede; background: #fff; box-shadow: none; }
#pnf-tech .pnf-tech-steps li { height: auto; min-height: 0; border-color: #dedede; }
#pnf-tech .pnf-tech-step-num { color: #111; font-family: "Outfit", sans-serif; }
#pnf-tech .pnf-tech-step-txt { color: #666; font-size: 17px; line-height: 1.8; }

/* 공급·협력 — 균일한 4열 이미지 카드 ------------------------------------- */
#pnf-partner { background: #fff; }
#pnf-partner .pnf-biz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#pnf-partner .pnf-biz-grid > * { margin-top: 0 !important; }
#pnf-partner .pnf-biz-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}
#pnf-partner .pnf-biz-card:hover { transform: translateY(-8px); box-shadow: 0 16px 34px rgba(0,0,0,.10); }
#pnf-partner .pnf-biz-art { aspect-ratio: 1 / 1; }
#pnf-partner .pnf-biz-art img { width: 100%; height: 100%; object-fit: cover; }
#pnf-partner .pnf-head .pnf-h2 { line-height: 1.2; }
#pnf-partner .pnf-head .pnf-h2 br { display: none; }
#pnf-partner .pnf-biz-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-width: 0;
    padding: 22px 18px 20px;
    gap: 12px;
    border-radius: 0;
    box-shadow: none;
}
#pnf-partner .pnf-biz-card:hover .pnf-biz-body { box-shadow: none; }
#pnf-partner .pnf-biz-go { justify-self: end; width: 30px; height: 30px; font-size: 12px; }

/* 현장실증 — 컨테이너 폭 이미지 CTA ----------------------------------------- */
#pnf-field { padding-block: 56px; background: #fff; color: #fff; }
#pnf-field .pnf-inner {
    overflow: hidden;
    min-height: 360px;
    border: 1px solid #d8d8d8;
    border-radius: 24px;
    background: #354c30 url("../img/cta-banner.jpg") center / cover no-repeat;
}
#pnf-field .pnf-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(8, 17, 10, .52);
    pointer-events: none;
}
#pnf-field .pnf-stats-layout { position: relative; z-index: 1; min-height: 358px; display: flex; align-items: center; justify-content: center; }
#pnf-field .pnf-stats-copy { max-width: 1040px; }
#pnf-field .pnf-stats-copy { margin-inline: auto; text-align: center; }
#pnf-field .pnf-h2 { margin-inline: auto; color: #fff; max-width: none; white-space: nowrap; }
#pnf-field .pnf-lead { color: rgba(255,255,255,.86); font-size: 20px; }
#pnf-field .pnf-stats-copy .pnf-btns { justify-content: center; }
#pnf-field .pnf-btn--solid::before { background: var(--main-color); }
#pnf-field .pnf-btn--solid { color: #fff; }

/* 현장 결과 다음의 공지 영역이 과도하게 벌어지지 않도록 첫 여백만 압축한다. */
#pnf-news { padding-top: 72px; }

/* 문의 --------------------------------------------------------------------- */
#pnf-contact { background: #fff; color: var(--pnf-ink); }
#pnf-contact .pnf-contact-grid { gap: 48px; }
#pnf-contact .pnf-h2 { max-width: 12ch; color: var(--pnf-ink); }
#pnf-contact .pnf-form { border: 1px solid #dedede; border-radius: 8px; background: #fff; }
#pnf-contact .pnf-contact-list li { border-color: #dedede; color: #555; }
#pnf-contact .pnf-contact-list i,
#pnf-contact .pnf-contact-list a:hover { color: #111; }
#pnf-contact .pnf-field input[type="text"],
#pnf-contact .pnf-field select,
#pnf-contact .pnf-field textarea { border-radius: 6px; background-color: #fff; }
#pnf-contact .pnf-privacy {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

/* 하단 브랜드 띠는 움직이는 장식 대신 절제된 워드마크 역할만 한다. */
#pnf-main > .pnf-marquee--even { min-height: 64px; padding: 16px 0; display: flex; align-items: center; background: #fff; color: #111; border-top: 1px solid #dedede; }
#pnf-main > .pnf-marquee--even .pnf-wave { display: none; }
#pnf-main > .pnf-marquee--even .pnf-marquee-track span { color: #111; }

/* 밝은 섹션 클래스와 깊은 섹션 클래스를 메인에서 흰색으로 단일화한다. */
#pnf-main .pnf-sec--cream,
#pnf-main .pnf-sec--soft,
#pnf-main .pnf-sec--deep { background: #fff; color: var(--pnf-ink); }

/* 완전한 흰 배경을 위해 기존 노이즈 텍스처를 메인 섹션에서 제거한다. */
#pnf-main .pnf-grain::before { display: none; }

/* 공지사항·인증/수상은 리뉴얼 전 컴포넌트 스타일을 그대로 유지한다. */
#pnf-news .pnf-inner { padding-inline: var(--gw-padding); }
#pnf-award .pnf-btn {
    min-width: 0;
    height: 62px;
    padding-inline: 34px;
    border-radius: 12px;
    font-size: 16px;
}

@media screen and (max-width: 1280px) {
    #pnf-main { --pnf-gap: 118px; }
    #pnf-tech .pnf-tech-layout { gap: 48px; }
}

@media screen and (max-width: 1024px) {
    .pnf-hero-stage { min-height: 100svh; }
    #pnf-tech .pnf-tech-layout { gap: 48px; }
    #pnf-news .pnf-news-row { grid-template-columns: 1fr; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 768px) {
    #pnf-main { --pnf-gap: 84px; }
    /* 섹션 제목이 모바일에서 40px 로 과하게 커 2~4줄을 차지했다 → 한 단계 낮춘다 */
    #pnf-main .pnf-h2 { font-size: 34px; }
    #pnf-hero { padding: 0; }
    .pnf-hero-stage { min-height: 100svh; }
    .pnf-hero-copy { left: 24px; right: 24px; bottom: 72px; }
    #pnf-main .pnf-hero-title { max-width: 12em; font-size: 40px; }
    .pnf-hero-sub { margin-top: 20px; font-size: 24px; }
    .pnf-hero-shade { background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.1) 78%); }
    .pnf-hero-controls { right: 18px; bottom: 16px; }
    .pnf-hero-arrow { width: 44px; height: 44px; }
    #pnf-product .pnf-inner { grid-template-columns: 1fr; }
    #pnf-product .pnf-head { grid-column: auto; }
    #pnf-product .pnf-product-row { display: flex; min-height: 620px; }
    #pnf-product .pnf-product-body { padding: 34px 24px 36px; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: 1fr; }
    #pnf-field { padding-block: 48px; }
    #pnf-field .pnf-inner { min-height: 420px; border-radius: 16px; }
    #pnf-field .pnf-stats-layout { min-height: 418px; }
    #pnf-field .pnf-h2 { white-space: normal; }
    #pnf-news .pnf-news-list a { min-height: 84px; }
    #pnf-news { padding-top: 48px; }
}

@media screen and (max-width: 576px) {
    #pnf-main { --pnf-gap: 68px; }
    /* 더 좁은 화면에서는 섹션 제목을 한 단계 더 낮춰 3~4줄로 길어지지 않게 한다 */
    #pnf-main .pnf-h2 { font-size: 30px; }
    .pnf-hero-stage { min-height: 100svh; }
    #pnf-main .pnf-hero-title { font-size: 40px; }
    .pnf-hero-copy .pnf-btns { margin-top: 26px; }
    #pnf-main .pnf-btn { width: 100%; min-width: 0; height: 58px; }
    /* 모바일에선 카드가 세로로 쌓인다(각 ~460px). 420px 고정 높이면 카드가 스테이지를
       넘쳐 다음 섹션(사업분야) 제목 위로 흘러넘친다 → 카드 높이에 맞춰 auto 로 둔다. */
    #pnf-tech .pnf-deck-stage { height: auto; }
    #pnf-tech .pnf-tech-steps li { height: auto; min-height: 0; padding-block: 20px; }
    #pnf-field .pnf-lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .pnf-hero-slide,
    .pnf-hero-media img { transition: none; }
    .pnf-hero-slide.is-active .pnf-hero-media img {
        animation: none;
        transform: scale(1);
    }
    #pnf-product .pnf-product-visual::after,
    #pnf-product .pnf-product-shape img,
    #pnf-product .pnf-product-body { transition: none; }
    #pnf-main > .pnf-marquee--even .pnf-marquee-track { animation: none; }
}

/* 선택 시안 2 최종 우선순위 보정: 기존 하단 호환 규칙보다 뒤에서 적용한다. */
#pnf-main { --pnf-inner: 1280px; --pnf-gap: 112px; }
#pnf-main .pnf-inner { max-width: 1328px; padding-inline: 24px; }
#pnf-main .pnf-sec { padding-block: var(--pnf-gap); }
#pnf-main .pnf-head { margin-bottom: 44px; }
#pnf-main .pnf-head--center { text-align: left; }
#pnf-main .pnf-lead { margin-top: 14px; font-size: 17px; line-height: 1.7; }
#pnf-main .pnf-btn { width: auto; min-width: 0; height: 50px; padding-inline: 24px; border-radius: 4px; font-size: 15px; color: var(--pnf-ink); }
#pnf-main .pnf-btn--solid::before,
#pnf-main .pnf-btn--light::before { background: var(--pnf-accent); }
#pnf-main .pnf-btn--solid::after,
#pnf-main .pnf-btn--light::after { background: #FFE06B; box-shadow: none; }

#pnf-hero { padding: var(--gw-header-h) 0 0; background: #fff; }
.pnf-hero-stage { min-height: min(680px, calc(100svh - var(--gw-header-h))); background: #fff; }
.pnf-hero-slide { background: #fff; }
.pnf-hero-media { inset: 0 0 0 42%; }
.pnf-hero-shade { inset: 0 0 0 42%; background: linear-gradient(90deg, rgba(16,40,31,.08), rgba(16,40,31,0) 36%); }
.pnf-hero-copy { left: max(24px, calc((100vw - 1280px) / 2)); right: auto; top: 50%; bottom: auto; width: min(34vw, 460px); max-width: none; color: var(--pnf-ink); transform: translateY(-50%); }
#pnf-main .pnf-hero-title { max-width: 9em; color: var(--pnf-ink); font-size: clamp(46px, 4.4vw, 68px); line-height: 1.13; }
.pnf-hero-sub { max-width: 390px; margin-top: 22px; color: var(--pnf-ink-sub); font-size: 18px; line-height: 1.65; }
.pnf-hero-copy .pnf-btns { margin-top: 34px; }
.pnf-hero-copy .pnf-btn { width: auto; height: 52px; padding-inline: 26px; }

#pnf-product .pnf-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#pnf-product .pnf-head { grid-column: 1 / -1; }
#pnf-product .pnf-product-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 390px; border-radius: 0; background: #fff; color: var(--pnf-ink); }
#pnf-product .pnf-product-visual { position: relative; inset: auto; width: auto; min-height: 100%; background: var(--pnf-surface); }
#pnf-product .pnf-product-visual::after { display: none; }
#pnf-product .pnf-product-shape img { filter: none; }
#pnf-product .pnf-product-body { position: relative; width: auto; padding: 34px 30px; opacity: 1; transform: none; pointer-events: auto; }
#pnf-product .pnf-product-row:hover .pnf-product-shape img,
#pnf-product .pnf-product-row:focus-within .pnf-product-shape img { filter: none; transform: scale(1.025); }
#pnf-product .pnf-product-tit { color: var(--pnf-ink); font-size: 30px; }
#pnf-product .pnf-product-txt,
#pnf-product .pnf-product-spec { color: var(--pnf-ink-sub); }
#pnf-product .pnf-product-spec { border-color: var(--pnf-line); }
#pnf-product .pnf-product-spec dt { color: var(--pnf-ink-sub); }
#pnf-product .pnf-product-spec dd { color: var(--pnf-ink); }

#pnf-tech .pnf-tech-layout { display: block; }
#pnf-tech .pnf-deck { display: none; }
#pnf-tech .pnf-tech-body { width: 100%; max-width: none; }
#pnf-tech .pnf-tech-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border-block: 1px solid var(--pnf-line); }
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:last-child { display: block; min-height: 250px; padding: 34px 30px; border: 0; border-right: 1px solid var(--pnf-line); }
#pnf-tech .pnf-tech-steps li:last-child { border-right: 0; }
#pnf-tech .pnf-tech-step-num { display: block; margin-bottom: 28px; color: var(--pnf-deep); font-size: 28px; }
#pnf-tech .pnf-tech-step-txt { margin-top: 14px; font-size: 14px; line-height: 1.7; }

#pnf-partner .pnf-inner { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
#pnf-partner .pnf-head { margin: 0; }
#pnf-partner .pnf-head .pnf-h2 br { display: initial; }
#pnf-partner .pnf-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#pnf-partner .pnf-biz-card { grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: 1fr; min-height: 184px; border-radius: 0; }
#pnf-partner .pnf-biz-art { position: relative; min-height: 100%; aspect-ratio: auto; background: #E9ECEA; }
#pnf-partner .pnf-biz-art img { display: none !important; }
#pnf-partner .pnf-biz-body { padding: 26px 22px; }
#pnf-field { padding-block: var(--pnf-gap); }
#pnf-field .pnf-inner,
#pnf-contact .pnf-form { border-radius: 0; }
#pnf-main > .pnf-marquee--even { display: none; }

@media screen and (max-width: 1100px) {
    #pnf-main { --pnf-gap: 88px; }
    #pnf-product .pnf-product-row { grid-template-columns: 1fr; }
    #pnf-product .pnf-product-visual { min-height: 330px; }
    #pnf-tech .pnf-tech-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pnf-tech .pnf-tech-steps li:nth-child(2) { border-right: 0; }
    #pnf-tech .pnf-tech-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--pnf-line); }
    #pnf-partner .pnf-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media screen and (max-width: 768px) {
    #pnf-main { --pnf-gap: 72px; }
    #pnf-hero { padding-top: var(--gw-header-h); }
    .pnf-hero-stage { min-height: 720px; }
    .pnf-hero-media { inset: 300px 0 0; }
    .pnf-hero-shade { inset: 300px 0 0; background: linear-gradient(180deg, rgba(16,40,31,.04), rgba(16,40,31,.12)); }
    .pnf-hero-copy { left: 24px; right: 24px; top: 50px; bottom: auto; width: auto; transform: none; }
    .pnf-hero-copy::before { margin-bottom: 16px; font-size: 10px; }
    #pnf-main .pnf-hero-title { max-width: 9em; font-size: 42px; }
    .pnf-hero-sub { margin-top: 14px; font-size: 16px; line-height: 1.55; }
    .pnf-hero-copy .pnf-btns { margin-top: 20px; }
    .pnf-hero-copy .pnf-btn { width: auto; height: 48px; }
    #pnf-product .pnf-inner { grid-template-columns: 1fr; }
    #pnf-product .pnf-product-row { display: grid; min-height: 0; }
    #pnf-product .pnf-product-visual { min-height: 360px; }
    #pnf-tech .pnf-tech-steps { grid-template-columns: 1fr; }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:nth-child(2) { min-height: 0; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--pnf-line); }
    #pnf-tech .pnf-tech-steps li:last-child { border-bottom: 0; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 480px) {
    #pnf-main .pnf-inner { padding-inline: 20px; }
    .pnf-hero-stage { min-height: 660px; }
    .pnf-hero-media,
    .pnf-hero-shade { top: 286px; }
    #pnf-main .pnf-hero-title { font-size: 36px; }
    #pnf-product .pnf-product-visual { min-height: 300px; }
    #pnf-partner .pnf-biz-card { grid-template-columns: 38% minmax(0, 1fr); }
}

/* 로컬 프록시가 운영 HTML에 주입하는 제목 구조도 실제 PHP와 동일하게 보이게 한다. */
.pnf-preview-product-title { display: block; }
.pnf-preview-product-lead {
    display: block;
    margin-top: 14px;
    color: var(--pnf-ink-sub);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -.02em;
}

/* QA 보정: 역방향 카드도 동일한 읽기 방향을 유지하고 임시 이미지 표기를 분리한다. */
#pnf-product .pnf-product-row--reverse .pnf-product-body {
    align-items: flex-start;
    text-align: left;
}
#pnf-product .pnf-product-row--reverse .pnf-product-spec { align-self: stretch; text-align: left; }
#pnf-partner .pnf-biz-art::after { content: "PARTNER IMAGE\A 3 : 2"; }

/* 헤더의 마지막 메뉴를 시안과 같은 주요 전환 버튼으로 강조한다. */
@media screen and (min-width: 1281px) {
    #hd #gnb .gnb_1dli:last-child .gnb_1da {
        height: 44px;
        margin-top: calc((var(--gw-header-h) - 44px) / 2);
        padding-inline: 22px;
        line-height: 44px;
        border-radius: 3px;
        background: var(--pnf-gold, #FFCB08);
        color: #14231B !important;
    }
}

/* ============================================================================
   2026-09-09 3차 레이아웃 보정
   ========================================================================== */

/* 제품 정보는 모든 카드에서 동일하게 왼쪽 정렬하고 사선 장식선은 제거한다. */
#pnf-product .pnf-head { max-width: 920px; }
#pnf-product .pnf-product-body,
#pnf-product .pnf-product-row--reverse .pnf-product-body {
    align-items: flex-start;
    text-align: left;
}
#pnf-product .pnf-product-body::before,
#pnf-product .pnf-product-row--reverse .pnf-product-body::before { display: none; }
#pnf-product .pnf-product-spec,
#pnf-product .pnf-product-row--reverse .pnf-product-spec {
    grid-template-columns: 88px minmax(0, 1fr);
    width: 100%;
    align-self: stretch;
    text-align: left !important;
}
#pnf-product .pnf-product-spec dt,
#pnf-product .pnf-product-spec dd,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dt,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dd {
    grid-column: auto;
    text-align: left !important;
}

/* 기술: 컨테이너를 4등분하고 hover/focus 시 상세 설명을 펼친다. */
#pnf-tech .pnf-head {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}
#pnf-tech .pnf-tech-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: var(--pnf-deep);
}
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:last-child,
#pnf-tech .pnf-tech-steps li:nth-child(2) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 38px 28px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    background: var(--pnf-deep);
    text-align: center;
    transition: background-color .35s ease, color .35s ease;
}
#pnf-tech .pnf-tech-steps li:nth-child(even) { background: #174736; }
#pnf-tech .pnf-tech-steps li:last-child { border-right: 0; }
#pnf-tech .pnf-tech-step-num {
    display: flex;
    width: 54px;
    height: 40px;
    margin: 0 0 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--pnf-accent);
    color: var(--pnf-ink);
    text-align: center;
}
#pnf-tech .pnf-tech-step-tit {
    color: #fff;
    font-size: 21px;
    transition: color .35s ease, transform .35s ease;
}
#pnf-tech .pnf-tech-step-txt {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    color: var(--pnf-ink-sub);
    font-size: 14px;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(14px);
    transition: max-height .4s ease, margin .35s ease, opacity .35s ease, transform .35s ease;
}
#pnf-tech .pnf-tech-steps li:hover,
#pnf-tech .pnf-tech-steps li:focus-visible {
    background: var(--pnf-accent);
    outline: none;
}
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-num,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-num {
    background: #fff;
}
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-tit,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-tit {
    color: var(--pnf-ink);
    transform: translateY(-4px);
}
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-txt,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-txt {
    max-height: 150px;
    margin-top: 18px;
    color: var(--pnf-ink);
    opacity: 1;
    transform: translateY(0);
}
#pnf-tech .pnf-tech-steps li:focus-visible {
    box-shadow: inset 0 0 0 3px #8A6500;
}

@media screen and (max-width: 1024px) {
    #pnf-tech .pnf-tech-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pnf-tech .pnf-tech-steps li:nth-child(2) { border-right: 0; }
    #pnf-tech .pnf-tech-steps li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
}

@media screen and (max-width: 768px), (hover: none) {
    #pnf-tech .pnf-tech-steps { grid-template-columns: 1fr; }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) {
        min-height: 240px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }
    #pnf-tech .pnf-tech-steps li:last-child { border-bottom: 0; }
    #pnf-tech .pnf-tech-step-txt {
        max-height: 150px;
        margin-top: 16px;
        color: rgba(255,255,255,.78);
        opacity: 1;
        transform: none;
    }
}

/* ============================================================================
   2026-09-09 사용자 피드백 보정
   ========================================================================== */

/* 영문 섹션 라벨은 노출하지 않는다. */
#pnf-main .pnf-eyebrow { display: none !important; }

/* 헤더: 최상단 투명, 스크롤 이후 흰 배경. 마지막 메뉴도 일반 GNB로 통일한다. */
#hd.hd-transparent:not(.is-scrolled):not(.on) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
}
#hd.hd-transparent:not(.is-scrolled):not(.on) .light-mode-logo { opacity: 0 !important; visibility: hidden; }
#hd.hd-transparent:not(.is-scrolled):not(.on) .dark-mode-logo { opacity: 1 !important; visibility: visible; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #gnb .gnb_1da { color: #fff !important; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #menu-btn .gw-line { background: #fff !important; }
#hd.hd-transparent:not(.is-scrolled):not(.on) #menu-btn .gw-line:nth-child(3) { background: var(--pnf-gold, #FFCB08) !important; }
@media screen and (min-width: 1281px) {
    #hd #gnb .gnb_1dli:last-child .gnb_1da {
        height: auto;
        margin-top: 0;
        padding: 0 40px 0 30px;
        line-height: var(--gw-header-h);
        border-radius: 0;
        background: transparent;
    }
    #hd.hd-transparent:not(.is-scrolled):not(.on) #gnb .gnb_1dli:last-child .gnb_1da { color: #fff !important; }
    #hd.is-scrolled #gnb .gnb_1dli:last-child .gnb_1da { color: #111 !important; }
}

/* Hero를 기존의 전체 이미지 비주얼로 복원한다. */
#pnf-hero { padding: 0; background: #000; }
.pnf-hero-stage { min-height: 100svh; background: #000; }
.pnf-hero-media { inset: 0; }
.pnf-hero-shade {
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.23) 57%, rgba(0,0,0,.08) 100%);
}
.pnf-hero-copy {
    left: clamp(28px, 6vw, 108px);
    right: auto;
    top: auto;
    bottom: clamp(54px, 8vw, 118px);
    width: auto;
    max-width: 830px;
    color: #fff;
    transform: none;
}
.pnf-hero-copy::before { display: none; }
#pnf-main .pnf-hero-title { max-width: 12em; color: #fff; font-size: 40px; line-height: 1.12; }
.pnf-hero-sub { max-width: 660px; margin-top: 24px; color: rgba(255,255,255,.88); font-size: 24px; line-height: 1.65; }
.pnf-hero-copy .pnf-btns { margin-top: 32px; }

/* 버튼 hover에서도 텍스트 대비를 유지한다. */
#pnf-main .pnf-btn,
#pnf-main .pnf-btn:hover,
#pnf-main .pnf-btn:focus-visible,
#pnf-product .pnf-btn--solid:hover { color: #14231B !important; }

/* 제품: 두 제품을 세로로 비교하는 교차형 와이드 카드 */
#pnf-product .pnf-inner { display: block; }
#pnf-product .pnf-head { margin-bottom: 48px; }
#pnf-product .pnf-product-row {
    display: grid;
    grid-template-columns: minmax(360px, 46%) minmax(0, 1fr);
    min-height: 470px;
    border: 1px solid var(--pnf-line);
    border-radius: 20px;
    overflow: hidden;
}
#pnf-product .pnf-product-row + .pnf-product-row { margin-top: 28px; }
#pnf-product .pnf-product-visual { min-height: 470px; }
#pnf-product .pnf-product-body {
    justify-content: center;
    padding: clamp(42px, 6vw, 78px);
}
#pnf-product .pnf-product-row--reverse .pnf-product-visual { order: 2; }
#pnf-product .pnf-product-row--reverse .pnf-product-body { order: 1; }
#pnf-product .pnf-product-tit { font-size: 36px; }
#pnf-product .pnf-product-txt { font-size: 17px; }
#pnf-product .pnf-product-spec { max-width: 560px; font-size: 15px; }

/* 기술: 왼쪽 소개, 오른쪽 2×2 핵심 단계 */
#pnf-tech .pnf-tech-body {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 28px 72px;
}
#pnf-tech .pnf-head { grid-column: 1; grid-row: 1; margin: 0; }
#pnf-tech .pnf-tech-steps {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    border: 0;
}
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:last-child,
#pnf-tech .pnf-tech-steps li:nth-child(2) {
    min-height: 250px;
    padding: 32px;
    border: 1px solid var(--pnf-line);
    border-radius: 16px;
    background: #F7F8F7;
}
#pnf-tech .pnf-tech-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 38px;
    margin-bottom: 32px;
    border-radius: 4px;
    background: var(--pnf-accent);
    color: var(--pnf-ink);
    font-size: 20px;
}
#pnf-tech .pnf-tech-body > .pnf-btns { grid-column: 1; grid-row: 2; align-self: end; margin: 0; }

/* 요청 영역 radius */
#pnf-field .pnf-inner { border-radius: 24px; }
#pnf-partner .pnf-biz-card { border-radius: 16px; }

@media screen and (max-width: 900px) {
    #pnf-product .pnf-product-row { grid-template-columns: 1fr; min-height: 0; }
    #pnf-product .pnf-product-visual { min-height: 420px; }
    #pnf-product .pnf-product-row--reverse .pnf-product-visual { order: 1; }
    #pnf-product .pnf-product-row--reverse .pnf-product-body { order: 2; }
    #pnf-tech .pnf-tech-body { grid-template-columns: 1fr; gap: 36px; }
    #pnf-tech .pnf-head,
    #pnf-tech .pnf-tech-steps,
    #pnf-tech .pnf-tech-body > .pnf-btns { grid-column: 1; grid-row: auto; }
}

@media screen and (max-width: 768px) {
    .pnf-hero-stage { min-height: 100svh; }
    .pnf-hero-media,
    .pnf-hero-shade { inset: 0; }
    .pnf-hero-shade { background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.1) 78%); }
    .pnf-hero-copy { left: 24px; right: 24px; top: auto; bottom: 72px; width: auto; }
    #pnf-main .pnf-hero-title { font-size: 40px; }
    .pnf-hero-sub { margin-top: 20px; font-size: 20px; }
    #pnf-product .pnf-product-visual { min-height: 360px; }
    #pnf-product .pnf-product-body { padding: 34px 24px; }
    #pnf-tech .pnf-tech-steps { grid-template-columns: 1fr; }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) { min-height: 0; padding: 26px; }
    #pnf-field .pnf-inner { border-radius: 16px; }
    #pnf-partner .pnf-biz-card { border-radius: 14px; }
}

/* ============================================================================
   2026-09-09 2차 레이아웃 보정
   ========================================================================== */

/* Hero 하단 근거 스트립 제거 */
#pnf-main .pnf-proof { display: none !important; }

/* 제품: 높이를 줄인 2열 컴팩트 비교 카드 */
#pnf-product .pnf-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
#pnf-product .pnf-head { grid-column: 1 / -1; }
#pnf-product .pnf-product-row,
#pnf-product .pnf-product-row--reverse {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    min-height: 360px;
    margin: 0;
    border-radius: 16px;
}
#pnf-product .pnf-product-row + .pnf-product-row { margin-top: 0; }
#pnf-product .pnf-product-visual,
#pnf-product .pnf-product-row--reverse .pnf-product-visual {
    order: 1;
    min-height: 360px;
}
#pnf-product .pnf-product-body,
#pnf-product .pnf-product-row--reverse .pnf-product-body {
    order: 2;
    justify-content: center;
    padding: 30px 26px;
}
#pnf-product .pnf-product-tit { font-size: 28px; }
#pnf-product .pnf-product-txt { margin-top: 8px; font-size: 14px; }
#pnf-product .pnf-product-spec { margin-top: 20px; padding-top: 16px; font-size: 13px; }
#pnf-product .pnf-product-body .pnf-btns { margin-top: 20px; }
#pnf-product .pnf-btn { height: 46px; padding-inline: 20px; font-size: 14px; }

/* 기술: 카드 대신 4개의 가로 정보 행 */
#pnf-tech .pnf-tech-body { display: block; }
#pnf-tech .pnf-head {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}
#pnf-tech .pnf-head .pnf-lead { margin-inline: auto; }
#pnf-tech .pnf-tech-steps {
    display: block;
    width: 100%;
    margin: 0;
    border-top: 2px solid var(--pnf-ink);
}
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:last-child,
#pnf-tech .pnf-tech-steps li:nth-child(2) {
    display: grid;
    grid-template-columns: 90px minmax(190px, 280px) minmax(0, 1fr);
    align-items: center;
    min-height: 116px;
    padding: 24px 8px;
    border: 0;
    border-bottom: 1px solid var(--pnf-line);
    border-radius: 0;
    background: transparent;
}
#pnf-tech .pnf-tech-step-num {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding-left: 8px;
    background: transparent;
    color: var(--pnf-ink);
    font-size: 20px;
    text-align: left;
}
#pnf-tech .pnf-tech-step-tit { margin: 0; font-size: 19px; }
#pnf-tech .pnf-tech-step-txt { margin: 0; font-size: 15px; line-height: 1.7; }
#pnf-tech .pnf-tech-body > .pnf-btns { display: flex; justify-content: center; margin-top: 32px; }

/* 협력: 제목은 카드 위, 제목·설명·카드 콘텐츠 모두 중앙 정렬 */
#pnf-partner .pnf-inner { display: block; }
#pnf-partner .pnf-head {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}
#pnf-partner .pnf-head .pnf-h2 br { display: none; }
#pnf-partner .pnf-head .pnf-lead { margin-inline: auto; }
#pnf-partner .pnf-biz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#pnf-partner .pnf-biz-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 170px 1fr;
    min-height: 360px;
    text-align: center;
}
#pnf-partner .pnf-biz-art { min-height: 170px; }
#pnf-partner .pnf-biz-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 20px 22px;
}
#pnf-partner .pnf-biz-text { text-align: center; }
#pnf-partner .pnf-biz-go { justify-self: auto; margin: auto auto 0; }

@media screen and (max-width: 1100px) {
    #pnf-product .pnf-inner { grid-template-columns: 1fr; }
    #pnf-product .pnf-head { grid-column: auto; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 768px) {
    #pnf-product .pnf-product-row,
    #pnf-product .pnf-product-row--reverse { grid-template-columns: 42% minmax(0, 1fr); min-height: 320px; }
    #pnf-product .pnf-product-visual,
    #pnf-product .pnf-product-row--reverse .pnf-product-visual { min-height: 320px; }
    #pnf-tech .pnf-head,
    #pnf-partner .pnf-head { margin-bottom: 36px; }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 6px 10px;
        padding: 22px 0;
    }
    #pnf-tech .pnf-tech-step-num { grid-row: 1 / span 2; align-self: start; padding-left: 0; }
    #pnf-tech .pnf-tech-step-txt { grid-column: 2; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: 1fr; }
    #pnf-partner .pnf-biz-card { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: 1fr; min-height: 190px; }
    #pnf-partner .pnf-biz-art { min-height: 190px; }
}

@media screen and (max-width: 560px) {
    #pnf-product .pnf-product-row,
    #pnf-product .pnf-product-row--reverse { grid-template-columns: 1fr; }
    #pnf-product .pnf-product-visual,
    #pnf-product .pnf-product-row--reverse .pnf-product-visual { min-height: 280px; }
    #pnf-product .pnf-product-body,
    #pnf-product .pnf-product-row--reverse .pnf-product-body { padding: 26px 22px; }
}

/* 제품: 참고 이미지처럼 이미지와 정보 면을 사선으로 분할한다. */
#pnf-product .pnf-inner { display: block; }
#pnf-product .pnf-head { margin-bottom: 44px; }
#pnf-product .pnf-product-row,
#pnf-product .pnf-product-row--reverse {
    position: relative;
    display: block;
    min-height: 420px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}
#pnf-product .pnf-product-row + .pnf-product-row { margin-top: 24px; }
#pnf-product .pnf-product-visual,
#pnf-product .pnf-product-row--reverse .pnf-product-visual {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 60%;
    min-height: 0;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
#pnf-product .pnf-product-row--reverse .pnf-product-visual {
    inset: 0 0 0 auto;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
#pnf-product .pnf-product-body,
#pnf-product .pnf-product-row--reverse .pnf-product-body {
    position: absolute;
    inset: 0 5% 0 auto;
    z-index: 2;
    width: 45%;
    padding: 42px 34px;
}
#pnf-product .pnf-product-row--reverse .pnf-product-body {
    inset: 0 auto 0 5%;
}
#pnf-product .pnf-product-body::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--pnf-accent);
}
#pnf-product .pnf-product-row--reverse .pnf-product-body::before { left: auto; right: 0; }
#pnf-product .pnf-product-row--reverse .pnf-product-spec,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dt,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dd { text-align: left !important; }

@media screen and (max-width: 768px) {
    #pnf-product .pnf-product-row,
    #pnf-product .pnf-product-row--reverse { min-height: 620px; }
    #pnf-product .pnf-product-visual,
    #pnf-product .pnf-product-row--reverse .pnf-product-visual {
        inset: 0 0 auto;
        width: 100%;
        height: 320px;
        clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    }
    #pnf-product .pnf-product-row--reverse .pnf-product-visual {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
    }
    #pnf-product .pnf-product-body,
    #pnf-product .pnf-product-row--reverse .pnf-product-body {
        inset: auto 0 0;
        width: 100%;
        height: 330px;
        padding: 44px 24px 28px;
    }
    #pnf-product .pnf-product-body::before,
    #pnf-product .pnf-product-row--reverse .pnf-product-body::before {
        top: 30px;
        left: 24px;
        right: auto;
    }
}

/* 3차 보정 최종 우선순위: 하단 사선 제품 규칙 이후 적용 */
#pnf-product .pnf-product-body,
#pnf-product .pnf-product-row--reverse .pnf-product-body { align-items: flex-start; text-align: left; }
#pnf-product .pnf-product-body::before,
#pnf-product .pnf-product-row--reverse .pnf-product-body::before { display: none; }
#pnf-product .pnf-product-spec,
#pnf-product .pnf-product-row--reverse .pnf-product-spec { grid-template-columns: 88px minmax(0, 1fr); width: 100%; text-align: left !important; }
#pnf-product .pnf-product-spec dt,
#pnf-product .pnf-product-spec dd,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dt,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dd { grid-column: auto; text-align: left !important; }

#pnf-tech .pnf-tech-body { display: block; }
#pnf-tech .pnf-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
#pnf-tech .pnf-head .pnf-lead { margin-inline: auto; }
#pnf-tech .pnf-tech-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin: 0;
    border: 0;
    border-radius: 20px;
    background: var(--pnf-deep);
}
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:last-child,
#pnf-tech .pnf-tech-steps li:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 38px 28px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    background: var(--pnf-deep);
    text-align: center;
    transition: background-color .35s ease;
}
#pnf-tech .pnf-tech-steps li:nth-child(even) { background: #174736; }
#pnf-tech .pnf-tech-steps li:last-child { border-right: 0; }
#pnf-tech .pnf-tech-step-num { display: flex; width: 54px; height: 40px; margin: 0 0 28px; padding: 0; align-items: center; justify-content: center; border-radius: 4px; background: var(--pnf-accent); color: var(--pnf-ink); }
#pnf-tech .pnf-tech-step-tit { color: #fff; font-size: 21px; transition: color .35s ease, transform .35s ease; }
#pnf-tech .pnf-tech-step-txt { max-height: 0; margin: 0; overflow: hidden; color: var(--pnf-ink); font-size: 14px; line-height: 1.7; opacity: 0; transform: translateY(14px); transition: max-height .4s ease, margin .35s ease, opacity .35s ease, transform .35s ease; }
#pnf-tech .pnf-tech-steps li:hover,
#pnf-tech .pnf-tech-steps li:focus-visible { background: var(--pnf-accent); outline: none; }
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-num,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-num { background: #fff; }
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-tit,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-tit { color: var(--pnf-ink); transform: translateY(-4px); }
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-txt,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-txt { max-height: 150px; margin-top: 18px; opacity: 1; transform: none; }
#pnf-tech .pnf-tech-steps li:focus-visible { box-shadow: inset 0 0 0 3px #8A6500; }
#pnf-tech .pnf-tech-body > .pnf-btns { display: flex; justify-content: center; margin-top: 32px; }

@media screen and (max-width: 1024px) {
    #pnf-tech .pnf-tech-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pnf-tech .pnf-tech-steps li:nth-child(2) { border-right: 0; }
    #pnf-tech .pnf-tech-steps li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
}
@media screen and (max-width: 768px), (hover: none) {
    #pnf-tech .pnf-tech-steps { grid-template-columns: 1fr; }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
    #pnf-tech .pnf-tech-steps li:last-child { border-bottom: 0; }
    #pnf-tech .pnf-tech-step-txt { max-height: 150px; margin-top: 16px; color: rgba(255,255,255,.78); opacity: 1; transform: none; }
}

/* 4차 피드백: 제품 스펙 정렬, 기술 패널 높이·색상, 협력 2×2 */
#pnf-product .pnf-product-spec,
#pnf-product .pnf-product-row--reverse .pnf-product-spec {
    grid-template-columns: 72px minmax(0, 380px);
    justify-content: start;
    column-gap: 14px;
    width: auto;
    max-width: 466px;
}
#pnf-product .pnf-product-spec dt,
#pnf-product .pnf-product-spec dd,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dt,
#pnf-product .pnf-product-row--reverse .pnf-product-spec dd {
    justify-self: start !important;
    width: auto;
}

#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:nth-child(even),
#pnf-tech .pnf-tech-steps li:last-child,
#pnf-tech .pnf-tech-steps li:nth-child(2) {
    min-height: 440px;
    background: var(--pnf-deep);
}
#pnf-tech .pnf-tech-steps li:hover,
#pnf-tech .pnf-tech-steps li:focus-visible { background: var(--pnf-accent); }

#pnf-partner .pnf-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#pnf-partner .pnf-biz-card {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 240px;
}
#pnf-partner .pnf-biz-art { min-height: 240px; }

@media screen and (max-width: 768px) {
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:nth-child(even),
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) { min-height: 260px; }
    #pnf-partner .pnf-biz-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   2026-09-10 4차 보정
   협력 카드 정렬·더보기 · 화살표 칩 · 인증 구분선 · 문의 제목 줄수
   ========================================================================== */

/* --- 협력 카드 --------------------------------------------------------------
   가운데로 모아 두면 카드마다 글 길이가 달라 줄 끝이 들쭉날쭉하다.
   왼쪽에 세워 네 장의 첫 글자가 한 축에 놓이게 한다.
   오른쪽 아래 노란 화살표 칩은 무엇을 누르는지 읽히지 않아 "더보기 →" 로 바꾼다.
   -------------------------------------------------------------------------- */
#pnf-partner .pnf-biz-card { text-align: left; }
#pnf-partner .pnf-biz-body { align-items: flex-start; }
#pnf-partner .pnf-biz-text { text-align: left; }
#pnf-partner .pnf-biz-go {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    margin: auto 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--pnf-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: color .3s ease;
}
#pnf-partner .pnf-biz-go i { font-size: 13px; transition: transform .3s ease; }
#pnf-partner .pnf-biz-card:hover .pnf-biz-go {
    background: none;
    color: var(--pnf-green-700);
    transform: none;
}
#pnf-partner .pnf-biz-card:hover .pnf-biz-go i { transform: translateX(4px); }

/* --- 화살표 칩 --------------------------------------------------------------
   공지 줄 끝과 인증 카드 아래의 칩. 옅은 면색이 카드 바탕과 겹쳐 얼룩처럼 보인다.
   면을 걷고 가는 선만 두른다. 호버에서만 면이 찬다.
   -------------------------------------------------------------------------- */
.pnf-arrow {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pnf-line);
    transition: background .3s ease, box-shadow .3s ease, color .3s ease, transform .3s ease;
}
a:hover .pnf-arrow {
    background: var(--main-color);
    box-shadow: inset 0 0 0 1px var(--main-color);
    color: #fff;
}

/* --- 인증·수상 -------------------------------------------------------------
   위 섹션과의 경계선을 지운다. 여백만으로도 구획이 읽힌다.
   -------------------------------------------------------------------------- */
#pnf-award { border-top: 0; }

/* --- 문의 제목 --------------------------------------------------------------
   12ch 로 묶여 있어 네 줄로 쪼개졌다. 폭 제한을 풀고 줄바꿈은 <br> 하나에만 맡겨
   항상 두 줄로 읽히게 한다. 좁은 화면에서는 다시 자동 줄바꿈으로 돌린다.
   -------------------------------------------------------------------------- */
#pnf-contact .pnf-h2 {
    max-width: none;
    font-size: 32px;
    white-space: nowrap;
}
@media screen and (max-width: 768px) {
    #pnf-contact .pnf-h2 { font-size: 30px; white-space: normal; }
}

/* --- 협력 카드 사진 ----------------------------------------------------------
   실사진이 들어왔으므로 회색 자리표시(PARTNER IMAGE 3:2)를 걷고 사진을 드러낸다.
   칸은 265×240 안팎으로 폭에 따라 비율이 바뀌므로 cover 로 채운다.
   -------------------------------------------------------------------------- */
#pnf-partner .pnf-biz-art { background: var(--pnf-cream); }
#pnf-partner .pnf-biz-art img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#pnf-partner .pnf-biz-art::after { content: none; }

/* ============================================================================
   2026-09-10 5차 보정
   제품 글자리 · 핵심기술 재설계 · 메인 구분선 정리
   ========================================================================== */

/* --- 슈퍼희토 : 글을 오른쪽 끝으로 -----------------------------------------
   글 상자가 45% 폭으로 고정돼 있어 왼쪽 모서리가 사선 사진의 아랫자락과 겹쳤다.
   상자를 글 너비(=규격표 너비)만큼 줄여 오른쪽 끝에 붙인다. 상자 안의 제목 · 설명 ·
   버튼은 왼쪽 맞춤이라 규격표 첫 칸과 같은 세로선에서 시작한다.
   (모바일은 사진 아래에 글이 깔리는 구조라 이 규칙에서 뺀다)
   (닥터희토는 사진이 오른쪽이라 지금 자리가 맞다. 건드리지 않는다)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    #pnf-product .pnf-product-row:not(.pnf-product-row--reverse) .pnf-product-body {
        left: auto;
        right: 6%;
        width: auto;
        max-width: 46%;
        padding-inline: 0;
        align-items: flex-start;
        text-align: left;
    }
    #pnf-product .pnf-product-row:not(.pnf-product-row--reverse) .pnf-product-spec {
        width: auto;
        max-width: none;
        grid-template-columns: auto auto;
        justify-items: start;
        justify-content: start;
    }
    #pnf-product .pnf-product-row:not(.pnf-product-row--reverse) .pnf-product-spec dt { text-align: left; }
    #pnf-product .pnf-product-row:not(.pnf-product-row--reverse) .pnf-product-spec dd { text-align: left; }
}

/* --- 핵심기술 : 네 단계 -----------------------------------------------------
   딥그린 색면 넉 장에 번호와 제목만 띄워 두니 면은 큰데 읽을 것이 없었다.
   설명은 호버해야 나와 마우스가 없는 화면에서는 읽을 방법조차 없었다.

   제목 · 리드 · 버튼을 왼쪽 기둥에 모으고 오른쪽에 네 단계를 2×2 로 편다.
   색면과 상자와 칸막이선을 모두 걷고 글만 남긴다. 순서는 번호 아래 짧은
   골드 선으로만 표시한다 — 골드는 글자색으로 쓰지 않는다는 규칙 그대로다.
   섹션은 크림 면으로 둔다. 위아래 흰 면과 색이 갈리므로 경계선이 필요 없다.
   -------------------------------------------------------------------------- */
#pnf-main #pnf-tech { border-top: 0; background: var(--pnf-cream); }
#pnf-tech .pnf-h2 { font-size: 36px; }
#pnf-tech .pnf-tech-body {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 36px 80px;
    align-items: start;
}
#pnf-tech .pnf-head {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
    text-align: left;
}
#pnf-tech .pnf-head .pnf-lead { margin-inline: 0; }
#pnf-tech .pnf-tech-body > .pnf-btns {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
    margin: 0;
}
#pnf-tech .pnf-tech-steps {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px 60px;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
#pnf-tech .pnf-tech-steps li,
#pnf-tech .pnf-tech-steps li:nth-child(even),
#pnf-tech .pnf-tech-steps li:last-child,
#pnf-tech .pnf-tech-steps li:nth-child(2) {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    box-shadow: none;
    transition: none;
}
#pnf-tech .pnf-tech-step-num {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 20px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--pnf-green-700);
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .16em;
}
#pnf-tech .pnf-tech-step-tit {
    margin: 0;
    color: var(--pnf-ink);
    font-size: 20px;
    letter-spacing: -0.03em;
    transform: none;
}
#pnf-tech .pnf-tech-step-txt {
    max-height: none;
    margin: 10px 0 0;
    overflow: visible;
    opacity: 1;
    transform: none;
    color: var(--pnf-ink-sub);
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}
/* 호버로 무엇이 열리지 않는다. 색면이 번쩍이던 동작을 모두 끈다 */
#pnf-tech .pnf-tech-steps li:hover,
#pnf-tech .pnf-tech-steps li:focus-visible {
    background: none;
    box-shadow: none;
    outline: none;
}
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-num,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-num { background: none; }
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-tit,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-tit { color: var(--pnf-ink); transform: none; }
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-txt,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-txt {
    max-height: none;
    margin-top: 10px;
    opacity: 1;
}

@media screen and (max-width: 1100px) {
    #pnf-tech .pnf-tech-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    #pnf-tech .pnf-head { grid-column: 1; grid-row: 1; }
    #pnf-tech .pnf-tech-steps { grid-column: 1; grid-row: 2; gap: 40px 48px; }
    #pnf-tech .pnf-tech-body > .pnf-btns { grid-column: 1; grid-row: 3; }
}
@media screen and (max-width: 640px) {
    #pnf-tech .pnf-tech-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* --- 메인 구분선 정리 -------------------------------------------------------
   섹션 경계와 목록 사이의 가는 선을 모두 걷는다. 구획은 여백과 면색으로 읽힌다.
   -------------------------------------------------------------------------- */
.pnf-proof { border-top: 0; border-bottom: 0; }
.pnf-proof-item,
.pnf-proof-item:first-child,
.pnf-proof-item:nth-child(2),
.pnf-proof-item:nth-child(-n+2),
.pnf-proof-item:last-child { border-right: 0; border-bottom: 0; }
#pnf-partner,
#pnf-field,
#pnf-award,
#pnf-contact { border-top: 0; }
.pnf-news-list li { border-bottom: 0; }
.pnf-award-go { border-top: 0; padding-top: 14px; }
.pnf-contact-list li { border-bottom: 0; padding: 14px 0; }


/* ============================================================================
   6차 보정 (2026-09-11) — 핵심기술을 붙여 두고 그림과 글을 함께 넘긴다

   넷을 2×2 로 펴 두면 넉 장이 한꺼번에 눈에 들어와 하나도 읽히지 않았다.
   제목 · 리드 · 버튼은 위에 한 번 두고 지나가게 하고, 그 아래 긴 자리(stage)에
   판을 붙여(sticky) 왼쪽 그림과 오른쪽 글을 같은 신호로 한 장씩 갈아 끼운다.

   - 자리 높이 = 화면 한 판 + 단계 수 × 한 단계당 스크롤
   - 어느 장을 보일지는 index.php 아래쪽 스크립트가 is-active 로 알려준다
   - 1100px 아래에서는 붙이지 않는다. 좁은 화면에서 스크롤을 붙잡으면 답답하다
   ========================================================================== */

/* 제목 줄 — 제목과 리드는 왼쪽, 버튼은 오른쪽 아래 모서리에 건다 */
#pnf-tech .pnf-tech-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 48px;
}
#pnf-tech .pnf-tech-header .pnf-head {
    max-width: 640px;
    margin: 0;
    text-align: left;
}
#pnf-tech .pnf-tech-header .pnf-head .pnf-lead { margin-inline: 0; }
#pnf-tech .pnf-tech-header .pnf-btns { margin: 0; }

@media screen and (min-width: 1101px) {
    #pnf-main #pnf-tech {
        /* 자리 자체가 아래 여백을 갖는다. 섹션 아래 패딩을 두면 붙는 구간이 어긋난다 */
        padding-top: var(--pnf-gap);
        padding-bottom: var(--pnf-gap-sm);
    }
    #pnf-tech .pnf-tech-header { margin-bottom: 48px; }

    #pnf-tech .pnf-tech-stage {
        --pnf-tech-hold: 76vh;   /* 한 단계가 머무는 스크롤 길이 */
        position: relative;
        height: calc(100vh + 4 * var(--pnf-tech-hold));
    }
    /* 판을 화면 한 판 높이로 늘려 가운데 맞추면, 붙기 전에는 제목 아래가 그만큼 비어 보인다.
       판은 제 높이 그대로 두고 붙는 지점만 위에서 12vh 로 내려 잡는다 —
       붙었을 때의 자리는 가운데와 거의 같고, 붙기 전 제목과의 사이는 위 margin 값 그대로가 된다 */
    #pnf-tech .pnf-tech-sticky {
        position: sticky;
        top: 12vh;
    }
    #pnf-tech .pnf-tech-body {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        grid-template-rows: auto;
        gap: 0 80px;
        align-items: center;
        width: 100%;
    }

    /* --- 그림 : 넉 장을 한 칸에 겹쳐 두고 한 장만 보인다 --------------------- */
    #pnf-tech .pnf-tech-visual {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }
    #pnf-tech .pnf-tech-shot {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        overflow: hidden;
        border-radius: 20px;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: scale(1.015);
        transition: opacity .6s ease, transform .8s cubic-bezier(.22,.78,.28,1), visibility .6s;
    }
    #pnf-tech .pnf-tech-shot.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    /* 판이 화면 한 판(100vh)을 쓰므로 그림도 세로로 세운다.
       사진은 여백 없이 카드를 꽉 채운다. 낮은 화면에서는 74vh 로 잘라 위아래를 덜어 낸다 */
    #pnf-tech .pnf-tech-shot img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 6;
        max-height: 74vh;
        object-fit: cover;
        object-position: center;
    }

    /* --- 글 : 같은 신호로 함께 넘어간다 ------------------------------------- */
    #pnf-tech .pnf-tech-narrative {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    /* 네 장이 한 칸을 나눠 쓰므로 가장 긴 장에 높이가 맞는다 — 넘겨도 판이 흔들리지 않는다 */
    #pnf-tech .pnf-tech-steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        min-height: 240px;
    }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:nth-child(even),
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
        opacity: 0;
        visibility: hidden;
        transform: translateY(22px);
        transition: opacity .5s ease, transform .6s cubic-bezier(.22,.78,.28,1), visibility .5s;
    }
    #pnf-tech .pnf-tech-steps li.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* 한 장만 보이므로 글을 키운다. 멀리서도 한 문장이 읽혀야 한다 */
    #pnf-tech .pnf-tech-step-num { margin-bottom: 26px; }
    #pnf-tech .pnf-tech-step-tit { font-size: 34px; letter-spacing: -0.04em; }
    #pnf-tech .pnf-tech-step-txt {
        margin-top: 18px;
        max-width: 560px;
        font-size: 18px;
        line-height: 1.9;
    }
}

/* 붙는 동작을 끄기로 한 환경에서는 그림 한 장과 넷을 그대로 편다 */
@media screen and (min-width: 1101px) and (prefers-reduced-motion: reduce) {
    #pnf-main #pnf-tech { padding-bottom: var(--pnf-gap); }
    #pnf-tech .pnf-tech-stage { height: auto; }
    #pnf-tech .pnf-tech-sticky { position: static; min-height: 0; }
    #pnf-tech .pnf-tech-shot { opacity: 1; visibility: visible; transform: none; transition: none; }
    #pnf-tech .pnf-tech-shot ~ .pnf-tech-shot { display: none; }
    #pnf-tech .pnf-tech-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 48px;
        min-height: 0;
    }
    #pnf-tech .pnf-tech-steps li,
    #pnf-tech .pnf-tech-steps li:nth-child(even),
    #pnf-tech .pnf-tech-steps li:last-child,
    #pnf-tech .pnf-tech-steps li:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    #pnf-tech .pnf-tech-step-tit { font-size: 20px; }
    #pnf-tech .pnf-tech-step-txt { font-size: 15px; line-height: 1.8; max-width: none; }
}

/* 1100px 아래 : 붙이지 않는다. 그림 한 장을 얹고 넷을 그대로 쌓는다 */
@media screen and (max-width: 1100px) {
    #pnf-tech .pnf-tech-header { margin-bottom: 48px; }
    #pnf-tech .pnf-tech-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    #pnf-tech .pnf-tech-visual {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        max-width: 380px;
    }
    #pnf-tech .pnf-tech-shot {
        margin: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
    }
    #pnf-tech .pnf-tech-shot ~ .pnf-tech-shot { display: none; }
    #pnf-tech .pnf-tech-shot img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 6;
        object-fit: cover;
    }
    #pnf-tech .pnf-tech-narrative { grid-column: 1; grid-row: 2; }
}

/* --- 호버는 아무 일도 하지 않는다 --------------------------------------------
   옛 4분할 판에는 호버로 설명을 여는 동작이 있었다. 그 잔재가 남아
   마우스를 올리면 설명의 윗여백이 18px → 10px 로 줄며 글이 위로 튀었다.
   값을 되돌리고 그 자리의 전환도 끈다.
   -------------------------------------------------------------------------- */
#pnf-tech .pnf-tech-step-tit,
#pnf-tech .pnf-tech-step-txt { transition: none; }
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-tit,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-tit,
#pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-txt,
#pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-txt { transform: none; }

@media screen and (min-width: 1101px) {
    #pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-txt,
    #pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-txt { margin-top: 18px; }
}
@media screen and (max-width: 1100px) {
    #pnf-tech .pnf-tech-steps li:hover .pnf-tech-step-txt,
    #pnf-tech .pnf-tech-steps li:focus-visible .pnf-tech-step-txt { margin-top: 10px; }
}