@charset "utf-8";

/* ============================================================================
   희토류 농업 연구 (page/research.php)

   연구 페이지는 주장하는 글이 아니라 정리된 자료다.
   긴 기사형 편집을 걷고, 라벨 붙은 블록을 위에서 아래로 쌓는 짜임으로 바꾼다.

     [크림 인트로 띠]
     ▌연구 개요      설명 한 문단
     ▌농도와 조건    카드 셋 + 마무리 한 줄
     ▌작물 반응 조건  번호 카드 넷
     ▌연구 분야      사진 카드 넷
     ▌근거 구분      표
     ▌주요 문헌      묶음 카드 넷 + 접이식 참고문헌
     ▌현장 연구      지표 표
     ▌연구 방향      번호 목록
     [문의 배너]

   바탕은 크림색 번짐과 옅은 점 격자로만 건드린다. 선 아이콘은 농도와 조건 카드에만 둔다.
   연구 방향 목록은 스크롤하면 한 줄씩 밑으로 쌓인다.
   ========================================================================== */

/* --- 상단 서브 비주얼 -------------------------------------------------------- */
#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-research {
    --pnf-inner: 1200px;
    --pnf-line-soft: #e5e5e5;
    background: #fff;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-research .pnf-grain::before,
#pnf-sub.pnf-research .pnf-wave { display: none; }

#pnf-sub.pnf-research a:focus-visible,
#pnf-sub.pnf-research button:focus-visible,
#pnf-sub.pnf-research summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--main-color) 45%, #fff);
    outline-offset: 4px;
}
#pnf-sub.pnf-research .pnf-btn {
    height: 50px;
    padding-inline: 24px;
    border-radius: 8px;
    font-size: 15px;
}

/* --- 페이지 도입 : 기업개요 · 핵심기술과 같은 크림 띠 -------------------------- */
#pnf-sub.pnf-research .pnf-intro {
    display: flex;
    align-items: center;
    min-height: 460px;
    padding-block: 88px;
    background: var(--pnf-cream);
}
#pnf-sub.pnf-research .pnf-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 22px;
    text-align: center;
}
#pnf-sub.pnf-research .pnf-intro .pnf-h2,
#pnf-sub.pnf-research .pnf-intro .pnf-h2--lg {
    font-size: 38px;
    line-height: 1.28;
}
#pnf-sub.pnf-research .pnf-intro .pnf-em { color: var(--pnf-green-700); }
#pnf-sub.pnf-research .pnf-intro .pnf-lead {
    max-width: 840px;
    margin-inline: auto;
    padding-bottom: 0;
    font-size: 17px;
    line-height: 1.9;
    color: var(--pnf-ink-sub);
}

/* --- 본문 블록 ----------------------------------------------------------------
   블록 사이에 선을 두지 않는다. 라벨과 여백만으로 칸이 갈린다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-body { padding-block: 80px 90px; }
#pnf-sub.pnf-research .pnf-blk + .pnf-blk { margin-top: 68px; }

#pnf-sub.pnf-research .pnf-blk-label {
    margin: 0 0 20px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-blk-lead {
    max-width: 900px;
    margin: 0 0 26px;
    font-size: 16.5px;
    line-height: 1.85;
    color: #666;
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-blk-lead:last-child { margin-bottom: 0; }

/* --- 카드 격자 : 흰 면에 가는 테두리만 --------------------------------------- */
#pnf-sub.pnf-research .pnf-cardgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
#pnf-sub.pnf-research .pnf-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pnf-sub.pnf-research .pnf-card {
    min-width: 0;
    padding: 26px 28px;
    border: 1px solid var(--pnf-line-soft);
    border-radius: 12px;
    background: #fff;
}
/* 번호는 아이콘과 같은 크림 배지 자리에 들어간다 */
#pnf-sub.pnf-research .pnf-card-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: var(--pnf-cream);
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--pnf-green-700);
}
#pnf-sub.pnf-research .pnf-card-tit {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-card-txt {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.8;
    color: #666;
    word-break: keep-all;
}
/* 사진 카드 — 연구 분야. 사진이 카드 위쪽을 꽉 채우고 글은 그 아래에 온다. */
#pnf-sub.pnf-research .pnf-card--photo {
    overflow: hidden;
    padding: 0;
}
#pnf-sub.pnf-research .pnf-card-art {
    margin: 0;
    background: var(--pnf-cream);
}
#pnf-sub.pnf-research .pnf-card-art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}
#pnf-sub.pnf-research .pnf-card-body { padding: 24px 28px 28px; }

/* 마무리 한 줄 — 블록을 닫는 문장 */
#pnf-sub.pnf-research .pnf-blk-close {
    margin: 22px 0 0;
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--pnf-ink-sub);
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-blk-close strong { font-weight: 800; color: var(--pnf-ink); }

/* --- 표 ----------------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-tbl-wrap { overflow-x: auto; }
#pnf-sub.pnf-research .pnf-tbl {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    border-top: 1px solid #dedede;
}
#pnf-sub.pnf-research .pnf-tbl th,
#pnf-sub.pnf-research .pnf-tbl td {
    padding: 15px 18px;
    border: 1px solid var(--pnf-line-soft);
    font-size: 15.5px;
    line-height: 1.7;
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-tbl th {
    background: var(--pnf-cream);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    text-align: center;
}
#pnf-sub.pnf-research .pnf-tbl td { color: #666; }
#pnf-sub.pnf-research .pnf-tbl td:first-child {
    font-weight: 700;
    color: var(--pnf-ink);
}
#pnf-sub.pnf-research .pnf-tbl--facts td { text-align: center; font-weight: 700; color: var(--pnf-ink); }

/* --- 문헌 묶음 ---------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-refs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
#pnf-sub.pnf-research .pnf-ref {
    min-width: 0;
    padding: 26px 28px;
    border: 1px solid var(--pnf-line-soft);
    border-radius: 12px;
}
#pnf-sub.pnf-research .pnf-ref-tit {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-ref-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
#pnf-sub.pnf-research .pnf-ref-list li {
    position: relative;
    padding-left: 14px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--pnf-ink);
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-ref-list li + li { margin-top: 5px; }
#pnf-sub.pnf-research .pnf-ref-list li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pnf-green-700);
}

/* --- 주석과 접이식 참고문헌 ---------------------------------------------------- */
#pnf-sub.pnf-research .pnf-note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: #8a8a8a;
    word-break: keep-all;
}
#pnf-sub.pnf-research .pnf-biblio { margin-top: 18px; }
#pnf-sub.pnf-research .pnf-biblio > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pnf-green-700);
}
#pnf-sub.pnf-research .pnf-biblio > summary::-webkit-details-marker { display: none; }
#pnf-sub.pnf-research .pnf-biblio > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
}
#pnf-sub.pnf-research .pnf-biblio[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
#pnf-sub.pnf-research .pnf-biblio-list {
    margin: 18px 0 0;
    padding: 22px 26px 22px 44px;
    border: 1px solid var(--pnf-line-soft);
    border-radius: 12px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.85;
    color: #7a7a7a;
}
#pnf-sub.pnf-research .pnf-biblio-list li + li { margin-top: 8px; }
#pnf-sub.pnf-research .pnf-biblio-list em { font-style: italic; }

/* --- 번호 목록 (연구 진행 방향) ------------------------------------------------
   한 줄에 하나씩, 스크롤하면 밑으로 쌓인다. 등장은 항목마다 붙인 AOS 가 맡는다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-tasks {
    margin: 0;
    padding: 0;
    list-style: none;
}
#pnf-sub.pnf-research .pnf-tasks li {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    align-items: center;
    gap: 0 6px;
    min-width: 0;
    padding: 22px 2px;
    border-bottom: 1px solid var(--pnf-line-soft);
}
#pnf-sub.pnf-research .pnf-tasks li:first-child { border-top: 1px solid var(--pnf-line-soft); }
#pnf-sub.pnf-research .pnf-task-num {
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pnf-green-700);
}
#pnf-sub.pnf-research .pnf-task-txt {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: var(--pnf-ink);
    word-break: keep-all;
}

/* --- 아이콘 ------------------------------------------------------------------
   아이콘 정의(sprite)는 research.php 맨 위에 한 번만 두고 여기서 색과 굵기를 준다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-icons {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
#pnf-sub.pnf-research .pnf-card-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: var(--pnf-cream);
    color: var(--pnf-green-700);
}
#pnf-sub.pnf-research .pnf-card-ico svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 마우스를 올리면 카드가 살짝 뜬다 */
#pnf-sub.pnf-research .pnf-card {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#pnf-sub.pnf-research .pnf-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pnf-green-700) 26%, #fff);
    box-shadow: 0 14px 30px rgba(20, 35, 27, .07);
}
html.is-scrolling #pnf-sub.pnf-research .pnf-card:hover {
    transform: none;
    border-color: var(--pnf-line-soft);
    box-shadow: none;
}

/* --- 배경 --------------------------------------------------------------------
   흰 바탕만으로는 비어 보인다. 크림색 번짐과 아주 옅은 점 격자를 깔아
   글이 얹힌 면처럼 읽히게 한다. 글자 대비를 해치지 않을 만큼만 쓴다.
   -------------------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-intro { overflow: hidden; }
#pnf-sub.pnf-research .pnf-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(440px 440px at 5% 14%, rgba(5, 104, 57, .07), transparent 68%),
        radial-gradient(480px 480px at 96% 88%, rgba(255, 203, 8, .16), transparent 68%);
}

#pnf-sub.pnf-research .pnf-body {
    background:
        radial-gradient(720px 480px at 94% -6%, color-mix(in srgb, var(--pnf-cream) 88%, #fff), transparent 64%),
        radial-gradient(640px 440px at -10% 30%, color-mix(in srgb, var(--pnf-cream) 72%, #fff), transparent 62%),
        #fff;
}
/* 위쪽에서만 보이다 사라지는 점 격자. 공통 그레인 자리를 다시 쓴다. */
#pnf-sub.pnf-research .pnf-body::before {
    display: block;
    z-index: 0;
    opacity: 1;
    mix-blend-mode: normal;
    background-image: radial-gradient(rgba(5, 104, 57, .09) 1px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 26%);
    mask-image: linear-gradient(180deg, #000, transparent 26%);
}

/* --- 문의 배너 ----------------------------------------------------------------- */
#pnf-sub.pnf-research .pnf-cta .pnf-lead { color: #fff; }

/* ----------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    #pnf-sub.pnf-research .pnf-intro { min-height: 380px; padding-block: 72px; }
    #pnf-sub.pnf-research .pnf-intro .pnf-h2,
    #pnf-sub.pnf-research .pnf-intro .pnf-h2--lg { font-size: 31px; }
    #pnf-sub.pnf-research .pnf-body { padding-block: 60px 70px; }
    #pnf-sub.pnf-research .pnf-blk + .pnf-blk { margin-top: 54px; }
    #pnf-sub.pnf-research .pnf-cardgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 768px) {
    #container_title { height: 340px; }
    #container_title .gw-sub-theme-title { font-size: 30px; }
    #pnf-sub.pnf-research .pnf-intro { min-height: 320px; padding-block: 60px; }
    #pnf-sub.pnf-research .pnf-intro .pnf-h2,
    #pnf-sub.pnf-research .pnf-intro .pnf-h2--lg { font-size: 25px; }
    #pnf-sub.pnf-research .pnf-intro .pnf-lead { font-size: 15.5px; }

    #pnf-sub.pnf-research .pnf-blk-label { font-size: 20px; }
    #pnf-sub.pnf-research .pnf-blk-lead { font-size: 15.5px; }
    #pnf-sub.pnf-research .pnf-cardgrid,
    #pnf-sub.pnf-research .pnf-cardgrid--3,
    #pnf-sub.pnf-research .pnf-refs { grid-template-columns: minmax(0, 1fr); }
    #pnf-sub.pnf-research .pnf-card,
    #pnf-sub.pnf-research .pnf-ref { padding: 22px 20px; }
    #pnf-sub.pnf-research .pnf-card--photo { padding: 0; }
    #pnf-sub.pnf-research .pnf-card-body { padding: 20px 20px 24px; }

    #pnf-sub.pnf-research .pnf-tbl th,
    #pnf-sub.pnf-research .pnf-tbl td { padding: 12px 14px; font-size: 14.5px; }

    #pnf-sub.pnf-research .pnf-biblio-list { padding: 18px 18px 18px 36px; }
}