@charset "utf-8";

/* ============================================================================
   제품 상세 공통 레이어 (page/superheeto.php · page/drheeto.php)

   제품 상세는 읽는 글이 아니라 확인하는 자료다. 그래서 기사형 편집을 걷고
   농자재 카탈로그의 짜임을 따른다.

     [제품 머리 상자]  사진 | 제품명 · 한 줄 요약 · 핵심 포인트 · 포장단위
     제품 특징      (짧은 문장 목록)
     권장 사용량과 사용 방법 (표)
     사용 순서 · 확인사항
     현장 자료 · 제품 정보 (표)
     [문의 배너]

   면색을 번갈아 칠하지 않고 칸막이선도 두지 않는다. 흰 면 하나에
   제목과 여백만으로 칸을 갈라 위에서 아래로 훑어 내려가게 한다.
   글자 · 색 · 버튼은 다른 페이지와 같은 값을 쓴다(css/pnf-sub.css).
   ========================================================================== */

/* --- 상단 서브 비주얼 -------------------------------------------------------- */
#container_title { height: 420px; background: #111; }
#container_title .sub-theme-bg::before { background: rgba(0,0,0,.48); }
#container_title .gw-sub-theme-title {
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
}

/* --- 페이지 공통 값 --------------------------------------------------------- */
#pnf-sub.pnf-prodpage {
    --pnf-inner: 1200px;
    --pnf-line-soft: #e5e5e5;
    background: #fff;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-prodpage .pnf-grain::before,
#pnf-sub.pnf-prodpage .pnf-wave { display: none; }

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

/* --- 제품 머리 상자 ----------------------------------------------------------
   사진과 요약을 한 상자에 묶는다. 여기만 읽어도 무엇을 어디에 쓰는 제품인지 끝난다.
   -------------------------------------------------------------------------- */
/* 사이드 메뉴 알약이 서브 비주얼 아래로 32px 내려와 있다.
   보이는 간격이 48px 이 되도록 그만큼 더한다 */
#pnf-sub.pnf-prodpage .pnf-top { padding: 80px 0 0; }
#pnf-sub.pnf-prodpage .pnf-card-top {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 16px;
    background: #fff;
}
#pnf-sub.pnf-prodpage .pnf-card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dedede;
    background: var(--pnf-cream);
}
#pnf-sub.pnf-prodpage .pnf-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
#pnf-sub.pnf-prodpage .pnf-card-body {
    min-width: 0;
    padding: 44px 48px;
}
#pnf-sub.pnf-prodpage .pnf-card-name {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.2;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-prodpage .pnf-card-sum {
    margin: 14px 0 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pnf-green-700);
    word-break: keep-all;
}
/* 핵심 포인트 — 짧게 끊어 한눈에 훑게 한다 */
#pnf-sub.pnf-prodpage .pnf-card-points {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
#pnf-sub.pnf-prodpage .pnf-card-points li {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    line-height: 1.85;
    color: #555;
    word-break: keep-all;
}
#pnf-sub.pnf-prodpage .pnf-card-points li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b0b0b0;
}
/* 포장단위처럼 한 줄로 못 박는 값 */
#pnf-sub.pnf-prodpage .pnf-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--pnf-line-soft);
}
#pnf-sub.pnf-prodpage .pnf-card-meta > div { min-width: 0; }
#pnf-sub.pnf-prodpage .pnf-card-meta dt {
    display: inline;
    font-size: 15px;
    font-weight: 700;
    color: #888;
}
#pnf-sub.pnf-prodpage .pnf-card-meta dt::after { content: " : "; }
#pnf-sub.pnf-prodpage .pnf-card-meta dd {
    display: inline;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-prodpage .pnf-card-body .pnf-btns { margin-top: 30px; }
#pnf-sub.pnf-prodpage .pnf-btn {
    height: 50px;
    padding-inline: 24px;
    border-radius: 8px;
    font-size: 15px;
}
/* 밝은 면 위의 ghost 버튼은 테두리가 없으면 그냥 글자로 읽힌다 */
#pnf-sub.pnf-prodpage .pnf-sec:not(.pnf-sec--deep) .pnf-btn--ghost::before {
    box-shadow: inset 0 0 0 1.5px var(--pnf-line);
}

/* --- 본문 블록 ----------------------------------------------------------------
   블록 사이에 선을 두지 않는다. 제목과 여백만으로 칸이 갈린다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-blk { padding-block: 30px 34px; }
#pnf-sub.pnf-prodpage .pnf-blk:first-of-type { padding-top: 60px; }

/* 제목 · 설명 왼쪽, 곁들이는 버튼은 같은 줄 오른쪽 끝에 */
#pnf-sub.pnf-prodpage .pnf-blk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 40px;
    margin-bottom: 26px;
}
#pnf-sub.pnf-prodpage .pnf-blk-head > div:first-child { min-width: 0; }
#pnf-sub.pnf-prodpage .pnf-blk-head .pnf-blk-tit { margin-bottom: 10px; }
#pnf-sub.pnf-prodpage .pnf-blk-head .pnf-blk-lead { margin: 0; }
#pnf-sub.pnf-prodpage .pnf-blk-head .pnf-btns { flex: none; margin: 0; }

#pnf-sub.pnf-prodpage .pnf-blk-tit {
    margin: 0 0 26px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-prodpage .pnf-blk-lead {
    margin: -14px 0 26px;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    word-break: keep-all;
}

/* --- 문장 목록 (제품 특징 · 확인사항) ----------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-points {
    margin: 0;
    padding: 0;
    list-style: none;
}
#pnf-sub.pnf-prodpage .pnf-points li {
    position: relative;
    padding: 0 0 0 18px;
    font-size: 17px;
    line-height: 1.9;
    color: #444;
    word-break: keep-all;
}
#pnf-sub.pnf-prodpage .pnf-points li + li { margin-top: 10px; }
#pnf-sub.pnf-prodpage .pnf-points li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pnf-green-700);
}
#pnf-sub.pnf-prodpage .pnf-points strong { font-weight: 800; color: var(--pnf-ink); }

/* --- 표 : 이 페이지의 주인공 --------------------------------------------------
   확인하러 온 사람에게는 문장보다 칸이 빠르다. 머리줄은 크림으로 눌러 둔다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-tbl-wrap { overflow-x: auto; }
#pnf-sub.pnf-prodpage .pnf-tbl {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    border-top: 1px solid #dedede;
}
#pnf-sub.pnf-prodpage .pnf-tbl th,
#pnf-sub.pnf-prodpage .pnf-tbl td {
    padding: 15px 18px;
    border: 1px solid #e8e8e8;
    font-size: 16px;
    line-height: 1.7;
    word-break: keep-all;
}
#pnf-sub.pnf-prodpage .pnf-tbl th {
    background: var(--pnf-cream);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    text-align: center;
}
#pnf-sub.pnf-prodpage .pnf-tbl td {
    color: #555;
    text-align: center;
}
/* 항목 이름이 왼쪽 기둥에 서는 표(제품 정보) */
#pnf-sub.pnf-prodpage .pnf-tbl--rows th {
    width: 220px;
    text-align: left;
}
#pnf-sub.pnf-prodpage .pnf-tbl--rows td { text-align: left; }
#pnf-sub.pnf-prodpage .pnf-tbl .pnf-pending { color: #999; font-weight: 400; }

/* --- 순서 목록 : 첫 단계부터 마지막까지 한 줄로 -------------------------------
   위에서 아래로 읽는 목록이 아니라 왼쪽에서 오른쪽으로 흐르는 순서다.
   칸을 나란히 세우기만 한다 — 사이에 선이나 기호를 두지 않는다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-steps-line {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#pnf-sub.pnf-prodpage .pnf-steps-line li {
    position: relative;
    min-width: 0;
}
#pnf-sub.pnf-prodpage .pnf-step-n {
    display: block;
    margin-bottom: 10px;
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pnf-green-700);
}
#pnf-sub.pnf-prodpage .pnf-step-t {
    display: block;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pnf-ink);
    word-break: keep-all;
}

/* --- 두 칸 설명 (토양 조건) ---------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-quad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 64px;
}
#pnf-sub.pnf-prodpage .pnf-quad > article {
    min-width: 0;
    padding: 26px 0;
    border-top: 1px solid var(--pnf-line-soft);
}
#pnf-sub.pnf-prodpage .pnf-quad > article:nth-child(-n+2) { border-top: 0; padding-top: 0; }
#pnf-sub.pnf-prodpage .pnf-quad-tit {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-prodpage .pnf-quad-txt {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    word-break: keep-all;
}

/* --- 출처 표시와 주석 ---------------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-source {
    display: inline-block;
    margin: -14px 0 22px;
    padding: 7px 13px;
    border: 1px solid #dedede;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #555;
}
#pnf-sub.pnf-prodpage .pnf-note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: #8a8a8a;
    word-break: keep-all;
}
/* 상자로 감싸면 본문과 성격이 다른 공지처럼 읽힌다. 글만 남긴다 */
#pnf-sub.pnf-prodpage .pnf-callout {
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    word-break: keep-all;
}

/* --- 두 제품 비교 -------------------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-tbl--compare th:first-child { width: 200px; text-align: left; }
#pnf-sub.pnf-prodpage .pnf-tbl--compare td:first-child {
    text-align: left;
    font-weight: 700;
    color: #888;
}
/* 지금 보고 있는 제품 열을 진하게 둔다 */
#pnf-sub.pnf-prodpage .pnf-tbl--compare .is-this { color: var(--pnf-green-700); }
#pnf-sub.pnf-prodpage .pnf-tbl--compare td.is-this { color: var(--pnf-ink); font-weight: 700; }
#pnf-sub.pnf-prodpage .pnf-blk .pnf-btns { margin-top: 28px; }

/* --- 문의 배너 ----------------------------------------------------------------- */
#pnf-sub.pnf-prodpage .pnf-cta { margin-top: 20px; }
#pnf-sub.pnf-prodpage .pnf-cta .pnf-lead { color: #fff; }

/* ----------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    #pnf-sub.pnf-prodpage .pnf-card-top { grid-template-columns: minmax(0, 1fr); }
    #pnf-sub.pnf-prodpage .pnf-card-art {
        border-right: 0;
        border-bottom: 1px solid #dedede;
    }
    #pnf-sub.pnf-prodpage .pnf-card-art img { aspect-ratio: 16 / 10; }
    #pnf-sub.pnf-prodpage .pnf-card-body { padding: 32px 28px; }
    #pnf-sub.pnf-prodpage .pnf-quad { gap: 0 40px; }
    #pnf-sub.pnf-prodpage .pnf-steps-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
}

@media screen and (max-width: 768px) {
    #container_title { height: 340px; }
    #container_title .gw-sub-theme-title { font-size: 30px; }
    #pnf-sub.pnf-prodpage .pnf-top { padding-top: 64px; }
    #pnf-sub.pnf-prodpage .pnf-blk { padding-block: 40px; }
    #pnf-sub.pnf-prodpage .pnf-card-name { font-size: 27px; }
    #pnf-sub.pnf-prodpage .pnf-card-sum { font-size: 17px; }
    #pnf-sub.pnf-prodpage .pnf-blk-tit { font-size: 21px; margin-bottom: 20px; }
    #pnf-sub.pnf-prodpage .pnf-points li { font-size: 16px; }

    #pnf-sub.pnf-prodpage .pnf-steps-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }

    #pnf-sub.pnf-prodpage .pnf-quad { grid-template-columns: minmax(0, 1fr); }
    #pnf-sub.pnf-prodpage .pnf-quad > article { padding: 22px 0; border-top: 1px solid var(--pnf-line-soft); }
    #pnf-sub.pnf-prodpage .pnf-quad > article:first-child { border-top: 0; padding-top: 0; }
    #pnf-sub.pnf-prodpage .pnf-quad > article:nth-child(2) { border-top: 1px solid var(--pnf-line-soft); padding-top: 22px; }

    #pnf-sub.pnf-prodpage .pnf-tbl th,
    #pnf-sub.pnf-prodpage .pnf-tbl td { padding: 12px 14px; font-size: 15px; }
    #pnf-sub.pnf-prodpage .pnf-tbl--rows th { width: 120px; }
}