@charset "utf-8";

/* ============================================================================
   기업개요 (page/company.php)

   공통 조각(인트로 격자 · 섹션 면색 · 제목 · 버튼 · 카드 · 번호 목록 · 정보 표)은
   css/pnf-sub.css 가 쥔다. 이 파일은 이 페이지에만 있는 짜임만 다룬다.
   - 기업 소개 : 왼쪽 블롭 그림 + 오른쪽 글
   - 핵심 경쟁력 : 왼쪽 제목이 따라오고 오른쪽에 번호 목록
   - 기업 정보 : 표의 폭 제한
   ========================================================================== */

/* --- 기업 소개 ---------------------------------------------------------------
   그림은 정사각 일러스트를 블롭으로 깎아 얹고, 뒤에 옅은 골드 면을 겹쳐
   배경에서 떠 보이게 받쳐 준다. 메인 히어로·제품 도형과 같은 방식이다.
   -------------------------------------------------------------------------- */
#pnf-sub .pnf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: center;
    gap: 78px;
}

#pnf-sub .pnf-about-visual { position: relative; }

#pnf-sub .pnf-about-blob {
    position: absolute;
    z-index: 0;
    left: -4%;
    top: -8%;
    width: 44%;
    aspect-ratio: 1;
    background: var(--pnf-gold-100);
    border-radius: 46% 54% 38% 62% / 58% 44% 56% 42%;
}
#pnf-sub .pnf-about-art {
    position: relative;
    z-index: 1;
    aspect-ratio: 1;
    box-shadow: 0 30px 70px rgba(20,35,27,.14);
}
/* 일러스트 윗부분이 흰 하늘이라 흰 면 위에서는 블롭의 위쪽 테두리가 사라져
   반원처럼 보인다. 그림 위로 아주 옅은 선을 한 겹 둘러 형태를 끝까지 보이게 한다.
   (그림 아래 깔리는 inset 그림자로는 <img> 에 가려 보이지 않는다) */
#pnf-sub .pnf-about-art::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(20,35,27,.10);
    pointer-events: none;
}

#pnf-sub .pnf-about-body .pnf-lead { max-width: none; }
#pnf-sub .pnf-about-body .pnf-lead + .pnf-lead { margin-top: 16px; }

/* --- 핵심 경쟁력 -------------------------------------------------------------
   왼쪽 제목은 목록이 지나가는 동안 자리를 지킨다. 다섯 줄을 읽는 내내
   무엇을 읽고 있는지 눈에 남는다.
   -------------------------------------------------------------------------- */
#pnf-sub .pnf-edge-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 82px;
}
#pnf-sub .pnf-edge-grid .pnf-head {
    position: sticky;
    top: calc(var(--gw-header-h) + 40px);
    margin-bottom: 0;
}
/* 목록 첫 줄의 윗선이 제목 첫 줄과 나란히 서게 살짝 끌어올린다 */
#pnf-sub .pnf-edge-grid .pnf-steps { margin-top: -8px; }

/* --- 기업 정보 ---------------------------------------------------------------
   표가 화면 폭을 다 쓰면 항목과 내용 사이가 지나치게 벌어져 눈이 건너뛴다.
   -------------------------------------------------------------------------- */
#pnf-sub .pnf-info .pnf-table { max-width: 960px; margin: 0 auto; }
#pnf-sub .pnf-info .pnf-table a { color: inherit; font-weight: inherit; }
#pnf-sub .pnf-info .pnf-table a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   반응형 — responsive.css 의 분기(1440 / 1280 / 1024 / 768 / 576)를 따라간다
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
    #pnf-sub .pnf-about-grid { gap: 56px; }
    #pnf-sub .pnf-edge-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; }
}

@media screen and (max-width: 1024px) {
    /* 그림을 위로 올리고 글을 그 아래에 세운다 */
    #pnf-sub .pnf-about-grid { grid-template-columns: 1fr; gap: 46px; }
    #pnf-sub .pnf-about-visual { max-width: 520px; margin: 0 auto; width: 100%; }

    /* 제목이 따라올 자리가 없어진다. 목록 위에 그냥 세운다 */
    #pnf-sub .pnf-edge-grid { grid-template-columns: 1fr; gap: 40px; }
    #pnf-sub .pnf-edge-grid .pnf-head { position: static; }
    #pnf-sub .pnf-edge-grid .pnf-steps { margin-top: 0; }
}

@media screen and (max-width: 768px) {
    #pnf-sub .pnf-about-grid { gap: 36px; }
}

/* ============================================================================
   2026 메인페이지 디자인 시스템 동기화
   회사소개에만 적용해 다른 서브페이지의 기존 레이아웃은 유지한다.
   ========================================================================== */

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

#pnf-sub.pnf-company {
    --pnf-inner: 1280px;
    --pnf-gap: 112px;
    --pnf-gap-sm: 80px;
    --pnf-r-card: 12px;
    background: #fff;
    color: var(--pnf-ink);
}

#pnf-sub.pnf-company .pnf-grain::before,
#pnf-sub.pnf-company .pnf-wave { display: none; }

#pnf-sub.pnf-company .pnf-sec--cream,
#pnf-sub.pnf-company .pnf-sec--soft,
#pnf-sub.pnf-company .pnf-sec--white { background: #fff; }

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

#pnf-sub.pnf-company .pnf-lead {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}

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

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

/* 인트로 ------------------------------------------------------------------- */
#pnf-sub.pnf-company .pnf-intro {
    display: flex;
    align-items: center;
    min-height: 500px;
    padding-block: 104px;
    background: var(--pnf-cream);
    color: var(--pnf-ink);
}

#pnf-sub.pnf-company .pnf-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 24px;
    text-align: center;
}

#pnf-sub.pnf-company .pnf-intro .pnf-eyebrow { display: none; }
#pnf-sub.pnf-company .pnf-intro .pnf-h2 { color: var(--pnf-ink); }
#pnf-sub.pnf-company .pnf-intro .pnf-em { color: var(--pnf-green-700); }
#pnf-sub.pnf-company .pnf-intro .pnf-lead {
    max-width: 760px;
    margin-inline: auto;
    padding-bottom: 0;
    color: var(--pnf-ink-sub);
    line-height: 1.9;
}

/* 기업 소개 ---------------------------------------------------------------- */
/* 제목과 설명을 왼쪽에 세우고 그 아래 전체 폭으로 사진 한 장을 눕힌다.
   항공 사진이라 좁은 칸에 세로로 세우면 무엇을 찍은 것인지 읽히지 않는다 */
#pnf-sub.pnf-company .pnf-about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
/* 한 줄이 너무 길면 눈이 다음 줄 첫 글자를 못 찾는다. 인트로 띠와 같은 폭으로 묶는다 */
#pnf-sub.pnf-company .pnf-about-body { max-width: 760px; }

#pnf-sub.pnf-company .pnf-about-blob { display: none; }
#pnf-sub.pnf-company .pnf-about-visual { position: static; }
#pnf-sub.pnf-company .pnf-about-art {
    aspect-ratio: 1340 / 500;
    border: 1px solid #dedede;
    border-radius: 24px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}
#pnf-sub.pnf-company .pnf-about-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 주요 사업 ---------------------------------------------------------------- */
/* 섹션 사이 구분선은 두지 않는다. 구획은 면색과 여백으로만 갈린다 */
#pnf-sub.pnf-company .pnf-biz { border-block: 0; }
#pnf-sub.pnf-company .pnf-biz .pnf-head {
    margin-bottom: 48px;
    text-align: left;
}
#pnf-sub.pnf-company .pnf-cards--4 {
    gap: 24px;
    padding-top: 28px;
}
#pnf-sub.pnf-company .pnf-card {
    min-height: 260px;
    padding: 56px 32px 32px;
    border: 1px solid #dedede;
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
}
#pnf-sub.pnf-company .pnf-card:hover {
    transform: translateY(-6px);
    border-color: var(--pnf-gold);
    box-shadow: 0 16px 34px rgba(0,0,0,.08);
}
#pnf-sub.pnf-company .pnf-card .pnf-numchip {
    position: absolute;
    top: -28px;
    left: 28px;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 10px;
    background: var(--pnf-gold);
    color: var(--pnf-on-accent);
    font-size: 24px;
    transform: none;
    box-shadow: 0 8px 20px rgba(20,35,27,.10);
}
#pnf-sub.pnf-company .pnf-card-tit { font-size: 19px; }
#pnf-sub.pnf-company .pnf-card-txt { color: #666; }

/* 핵심 경쟁력 -------------------------------------------------------------- */
#pnf-sub.pnf-company .pnf-edge-grid {
    display: block;
}
#pnf-sub.pnf-company .pnf-edge-grid .pnf-head {
    position: static;
    margin-bottom: 48px;
}
#pnf-sub.pnf-company .pnf-edge-grid .pnf-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
#pnf-sub.pnf-company .pnf-steps li {
    position: relative;
    display: block;
    grid-column: span 2;
    min-height: 220px;
    padding: 32px;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease;
}
#pnf-sub.pnf-company .pnf-steps li:first-child,
#pnf-sub.pnf-company .pnf-steps li:nth-child(2) { grid-column: span 3; }
#pnf-sub.pnf-company .pnf-steps li:first-child {
    background: var(--pnf-cream);
    border-color: var(--pnf-cream-deep);
    color: var(--pnf-ink);
}
#pnf-sub.pnf-company .pnf-steps li:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--main-color) 38%, #dedede);
    box-shadow: 0 16px 34px rgba(0,0,0,.08);
}
#pnf-sub.pnf-company .pnf-step-num {
    position: absolute;
    top: 28px;
    right: 28px;
    color: var(--main-color);
    font-size: 14px;
}
#pnf-sub.pnf-company .pnf-step-tit {
    max-width: calc(100% - 48px);
    margin: 88px 0 12px;
    font-size: 20px;
}
#pnf-sub.pnf-company .pnf-step-txt { color: #666; line-height: 1.75; }
#pnf-sub.pnf-company .pnf-steps li:first-child .pnf-step-num { color: var(--pnf-ink-sub); }
#pnf-sub.pnf-company .pnf-steps li:first-child .pnf-step-tit { color: var(--pnf-green-700); }
#pnf-sub.pnf-company .pnf-steps li:first-child .pnf-step-txt { color: #666; }

/* 기업 정보 ---------------------------------------------------------------- */
#pnf-sub.pnf-company .pnf-info { border-top: 0; }
#pnf-sub.pnf-company .pnf-info .pnf-head {
    margin-bottom: 48px;
    text-align: left;
}
#pnf-sub.pnf-company .pnf-info .pnf-table {
    max-width: none;
    border-top: 0;
}
#pnf-sub.pnf-company .pnf-table > div {
    grid-template-columns: 220px minmax(0, 1fr);
    padding: 20px 24px;
    border-color: #dedede;
}
#pnf-sub.pnf-company .pnf-table > div:nth-child(even) { background: #f7f7f7; }

/* 문의 CTA ----------------------------------------------------------------- */
#pnf-sub.pnf-company .pnf-cta {
    padding-block: 56px;
    background: #fff;
    color: #fff;
}
#pnf-sub.pnf-company .pnf-cta > .pnf-inner {
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: center;
    border: 1px solid #d8d8d8;
    border-radius: 24px;
    background: #263b2b url("../../img/cta-banner2.jpg") center / cover no-repeat;
}
#pnf-sub.pnf-company .pnf-cta > .pnf-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(8,17,10,.58);
    pointer-events: none;
}
#pnf-sub.pnf-company .pnf-cta-box { position: relative; z-index: 1; }
#pnf-sub.pnf-company .pnf-cta .pnf-eyebrow { display: none; }
#pnf-sub.pnf-company .pnf-cta .pnf-h2 { color: #fff; }
#pnf-sub.pnf-company .pnf-cta .pnf-lead { color: rgba(255,255,255,.82); }
/* 호버는 메인 '제품 비교하기'와 동일하게 — 흰색이 아니라 밝은 골드(--pnf-btn-hover)로
   튕겨 채워진다. 글씨는 골드 위 먹색으로 통일. */
#pnf-sub.pnf-company .pnf-cta .pnf-btn--gold { color: var(--pnf-ink); }
#pnf-sub.pnf-company .pnf-cta .pnf-btn--gold::before { background: var(--main-color); }
#pnf-sub.pnf-company .pnf-cta .pnf-btn--gold::after { background: var(--pnf-btn-hover); box-shadow: none; }
#pnf-sub.pnf-company .pnf-cta .pnf-btn--gold:hover { color: var(--pnf-ink); }

@media screen and (max-width: 1024px) {
    #pnf-sub.pnf-company { --pnf-gap: 88px; --pnf-gap-sm: 68px; }
    #pnf-sub.pnf-company .pnf-intro { min-height: 440px; padding-block: 88px; }
    #pnf-sub.pnf-company .pnf-intro-grid,
    #pnf-sub.pnf-company .pnf-about-grid { grid-template-columns: 1fr; }
    #pnf-sub.pnf-company .pnf-about-visual { max-width: none; }
    #pnf-sub.pnf-company .pnf-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pnf-sub.pnf-company .pnf-edge-grid .pnf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pnf-sub.pnf-company .pnf-steps li,
    #pnf-sub.pnf-company .pnf-steps li:first-child,
    #pnf-sub.pnf-company .pnf-steps li:nth-child(2) { grid-column: auto; }
}

@media screen and (max-width: 768px) {
    #container_title { height: 300px; }
    #container_title .gw-sub-theme-title { font-size: 40px; }
    #pnf-sub.pnf-company { --pnf-gap: 72px; --pnf-gap-sm: 56px; }
    #pnf-sub.pnf-company .pnf-h2,
    #pnf-sub.pnf-company .pnf-h2--lg { font-size: 32px; }
    #pnf-sub.pnf-company .pnf-intro { min-height: 380px; padding-block: 72px; }
    #pnf-sub.pnf-company .pnf-intro-grid { gap: 22px; }
    #pnf-sub.pnf-company .pnf-about-grid { gap: 36px; }
    #pnf-sub.pnf-company .pnf-cards--4 { grid-template-columns: 1fr; gap: 16px; }
    #pnf-sub.pnf-company .pnf-card { min-height: 0; }
    #pnf-sub.pnf-company .pnf-edge-grid .pnf-steps { grid-template-columns: 1fr; }
    #pnf-sub.pnf-company .pnf-steps li { min-height: 200px; padding: 28px; }
    #pnf-sub.pnf-company .pnf-step-num { top: 24px; right: 24px; }
    #pnf-sub.pnf-company .pnf-step-tit { margin-top: 52px; }
    #pnf-sub.pnf-company .pnf-table > div { grid-template-columns: 1fr; }
    #pnf-sub.pnf-company .pnf-cta > .pnf-inner { min-height: 420px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #pnf-sub.pnf-company .pnf-card,
    #pnf-sub.pnf-company .pnf-steps li { transition: none; }
}