@charset "utf-8";

/* ============================================================================
   CEO 인사말 (page/greeting.php)

   공통 조각(인트로 격자 · 섹션 면색 · 제목 · 버튼 · 물결 · 마무리 CTA)은
   css/pnf-sub.css 가 쥔다. 이 파일은 이 페이지에만 있는 짜임만 다룬다.
   - 왼쪽 대표 사진 + 오른쪽 인사말
   - 인사 첫머리 · 본문 · 서명
   ========================================================================== */

/* --- 사진과 인사말 -----------------------------------------------------------
   사진은 왼쪽에서 자리를 지키고 글이 그 옆을 흐른다.
   본문은 680px 로 묶는다 — 한 줄이 그보다 길어지면 다음 줄 첫 글자를 놓친다.
   -------------------------------------------------------------------------- */
#pnf-sub .pnf-ceo-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
    align-items: start;
    gap: 82px;
}
/* 사진이 아직 없을 때. 글만 한 줄기로 세우고 가운데에 놓는다 */
#pnf-sub .pnf-ceo-grid--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* 글이 길어 사진이 먼저 끝난다. 읽는 동안 대표 얼굴이 옆에 남아 있게 붙잡아 둔다.
   (sticky 도 위치 지정 요소라 뒤에 겹치는 골드 면의 기준이 되어 준다) */
#pnf-sub .pnf-ceo-visual {
    position: sticky;
    top: calc(var(--gw-header-h) + 40px);
}

/* 사진 뒤에 겹치는 옅은 골드 면 — 흰 바탕에서 사진이 떠 보이게 받쳐 준다 */
#pnf-sub .pnf-ceo-blob {
    position: absolute;
    z-index: 0;
    left: -7%;
    top: -6%;
    width: 46%;
    aspect-ratio: 1;
    background: var(--pnf-gold-100);
    border-radius: 46% 54% 38% 62% / 58% 44% 56% 42%;
}
/* 세로로 긴 조약돌. 인물 사진이라 가로로 넓은 블롭 대신 위아래로 길게 잡는다 */
#pnf-sub .pnf-ceo-photo {
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 1.16;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(20,35,27,.14);
}
#pnf-sub .pnf-ceo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 인사말 본문 ------------------------------------------------------------- */
#pnf-sub .pnf-ceo-body { max-width: 680px; }

/* 인사 첫머리. 본문보다 한 단계 크게 두어 말이 시작되는 자리를 표시한다 */
#pnf-sub .pnf-ceo-hello {
    margin: 0 0 34px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}

#pnf-sub .pnf-ceo-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.95;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}
#pnf-sub .pnf-ceo-text p + p { margin-top: 20px; }

/* --- 서명 --------------------------------------------------------------------
   본문과 가는 선으로만 끊는다. 이름은 먹색으로 한 번 더 눌러 준다.
   -------------------------------------------------------------------------- */
#pnf-sub .pnf-ceo-sign {
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid var(--pnf-line);
}
#pnf-sub .pnf-ceo-corp {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}
#pnf-sub .pnf-ceo-name {
    margin: 0;
    font-size: 20px;
    color: var(--pnf-ink);
    letter-spacing: -0.02em;
}
#pnf-sub .pnf-ceo-name strong { font-weight: 800; }
/* 서명 이미지가 올라오면 이름 아래에 붙는다 */
#pnf-sub .pnf-ceo-sign-art { margin-top: 14px; }
#pnf-sub .pnf-ceo-sign-art img { width: auto; max-width: 240px; height: auto; display: block; }

/* ----------------------------------------------------------------------------
   반응형 — responsive.css 의 분기(1440 / 1280 / 1024 / 768 / 576)를 따라간다
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
    #pnf-sub .pnf-ceo-grid { gap: 56px; }
}

@media screen and (max-width: 1024px) {
    /* 사진 → 인사 → 본문 → 서명 순으로 쌓는다 */
    #pnf-sub .pnf-ceo-grid { grid-template-columns: 1fr; gap: 46px; justify-items: center; }
    #pnf-sub .pnf-ceo-visual { position: static; max-width: 420px; width: 100%; }
    #pnf-sub .pnf-ceo-body { max-width: 680px; width: 100%; }
}

@media screen and (max-width: 768px) {
    #pnf-sub .pnf-ceo-grid { gap: 38px; }
    #pnf-sub .pnf-ceo-hello { font-size: 22px; margin-bottom: 26px; }
    #pnf-sub .pnf-ceo-text p { font-size: 16px; }
}

/* ============================================================================
   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-greeting {
    --pnf-inner: 1280px;
    --pnf-gap: 112px;
    --pnf-gap-sm: 80px;
    background: #fff;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-greeting .pnf-grain::before,
#pnf-sub.pnf-greeting .pnf-wave { display: none; }
#pnf-sub.pnf-greeting .pnf-sec--cream,
#pnf-sub.pnf-greeting .pnf-sec--white { background: #fff; }
#pnf-sub.pnf-greeting .pnf-h2,
#pnf-sub.pnf-greeting .pnf-h2--lg {
    font-size: 40px;
    line-height: 1.25;
}
#pnf-sub.pnf-greeting a:focus-visible,
#pnf-sub.pnf-greeting button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--main-color) 45%, #fff);
    outline-offset: 4px;
}

/* 인트로 ------------------------------------------------------------------ */
#pnf-sub.pnf-greeting .pnf-intro {
    display: flex;
    align-items: center;
    min-height: 500px;
    padding-block: 104px;
    background: var(--pnf-cream);
    color: var(--pnf-ink);
}
#pnf-sub.pnf-greeting .pnf-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 24px;
    text-align: center;
}
#pnf-sub.pnf-greeting .pnf-intro .pnf-eyebrow { display: none; }
#pnf-sub.pnf-greeting .pnf-intro .pnf-h2 { color: var(--pnf-ink); }
#pnf-sub.pnf-greeting .pnf-intro .pnf-em { color: var(--pnf-green-700); }
#pnf-sub.pnf-greeting .pnf-intro .pnf-lead {
    max-width: 760px;
    margin-inline: auto;
    padding-bottom: 0;
    color: var(--pnf-ink-sub);
    font-size: 17px;
    line-height: 1.8;
}

/* 대표 메시지 -------------------------------------------------------------- */
/* 섹션 사이 구분선은 두지 않는다. 구획은 면색과 여백으로만 갈린다 */
#pnf-sub.pnf-greeting .pnf-ceo {
    padding-bottom: var(--pnf-gap);
    border-bottom: 0;
}
#pnf-sub.pnf-greeting .pnf-ceo-grid--solo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: none;
    margin-inline: auto;
}
#pnf-sub.pnf-greeting .pnf-ceo-grid--solo .pnf-ceo-body {
    display: block;
    width: 100%;
    max-width: 680px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#pnf-sub.pnf-greeting .pnf-ceo-hello {
    margin: 0 0 34px;
    font-size: 26px;
    line-height: 1.6;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-greeting .pnf-ceo-text p {
    font-size: 17px;
    line-height: 1.9;
    color: #666;
}
#pnf-sub.pnf-greeting .pnf-ceo-text p + p { margin-top: 22px; }
#pnf-sub.pnf-greeting .pnf-ceo-sign {
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid #dedede;
}
#pnf-sub.pnf-greeting .pnf-ceo-corp { color: #666; }

/* 실제 대표 사진이 등록된 상태 ------------------------------------------- */
/* 사진+인사말을 한 덩어리로 묶어 페이지 가운데에 정렬한다.
   (본문 칸을 680px로 고정하고 트랙 전체를 justify-content로 가운데로) */
#pnf-sub.pnf-greeting .pnf-ceo-grid:not(.pnf-ceo-grid--solo) {
    grid-template-columns: 300px minmax(0, 680px);
    justify-content: center;
    gap: 56px;
    align-items: start;
}
#pnf-sub.pnf-greeting .pnf-ceo-blob { display: none; }
/* 사진 칸은 사진보다 커지지 않게 묶는다 */
#pnf-sub.pnf-greeting .pnf-ceo-visual { max-width: 300px; width: 100%; }
/* 사진은 원본 비율 그대로(크롭 없이), 테두리·그림자는 제거하되 둥근 모서리는 유지.
   (윗변에 있던 선은 CSS가 아니라 원본 PNG 가장자리에 박힌 검은 라인이라 이미지에서 잘라냄) */
#pnf-sub.pnf-greeting .pnf-ceo-photo {
    aspect-ratio: auto;
    border: 0 !important;
    border-radius: 14px;
    box-shadow: none !important;
    overflow: hidden;
    background: transparent;
}
#pnf-sub.pnf-greeting .pnf-ceo-photo img {
    height: auto;
    object-fit: initial;
    border: 0 !important;
    display: block;
}
/* 인사말 본문 — 테두리·배경 프레임 없이 글만 흐르게 */
#pnf-sub.pnf-greeting .pnf-ceo-grid:not(.pnf-ceo-grid--solo) .pnf-ceo-body {
    max-width: 680px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#pnf-sub.pnf-greeting .pnf-ceo-grid:not(.pnf-ceo-grid--solo) .pnf-ceo-sign { margin-top: 40px; }

/* CTA --------------------------------------------------------------------- */
#pnf-sub.pnf-greeting .pnf-cta .pnf-eyebrow { display: none; }
#pnf-sub.pnf-greeting .pnf-cta .pnf-btn {
    height: 54px;
    padding-inline: 26px;
    border-radius: 10px;
    font-size: 15px;
}
/* 호버는 메인 '제품 비교하기'와 동일하게 — 흰색이 아니라 밝은 골드(--pnf-btn-hover)로
   튕겨 채워진다. 글씨는 골드 위 먹색으로 통일. */
#pnf-sub.pnf-greeting .pnf-cta .pnf-btn--gold { color: var(--pnf-ink); }
#pnf-sub.pnf-greeting .pnf-cta .pnf-btn--gold::before { background: var(--main-color); }
#pnf-sub.pnf-greeting .pnf-cta .pnf-btn--gold::after { background: var(--pnf-btn-hover); box-shadow: none; }
#pnf-sub.pnf-greeting .pnf-cta .pnf-btn--gold:hover { color: var(--pnf-ink); }

@media screen and (max-width: 1024px) {
    #pnf-sub.pnf-greeting { --pnf-gap: 88px; --pnf-gap-sm: 68px; }
    #pnf-sub.pnf-greeting .pnf-intro { min-height: 440px; padding-block: 88px; }
    #pnf-sub.pnf-greeting .pnf-intro-grid { grid-template-columns: 1fr; }
    /* 사진 → 인사말 순으로 한 줄기로 쌓는다 */
    #pnf-sub.pnf-greeting .pnf-ceo-grid:not(.pnf-ceo-grid--solo) {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 38px;
    }
    #pnf-sub.pnf-greeting .pnf-ceo-grid:not(.pnf-ceo-grid--solo) .pnf-ceo-body {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #container_title { height: 300px; }
    #container_title .gw-sub-theme-title { font-size: 40px; }
    #pnf-sub.pnf-greeting { --pnf-gap: 72px; --pnf-gap-sm: 56px; }
    #pnf-sub.pnf-greeting .pnf-h2,
    #pnf-sub.pnf-greeting .pnf-h2--lg { font-size: 32px; }
    #pnf-sub.pnf-greeting .pnf-intro { min-height: 380px; padding-block: 72px; }
    #pnf-sub.pnf-greeting .pnf-intro-grid { gap: 22px; }
    #pnf-sub.pnf-greeting .pnf-ceo-hello { font-size: 23px; }
    #pnf-sub.pnf-greeting .pnf-ceo-text p { font-size: 16px; line-height: 1.85; }
}

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