@charset "utf-8";

/* ============================================================================
   P&F bio 악센트 레이어

   테마 08 의 구조와 레이아웃은 그대로 두고, 테마가 이미 쓰고 있는 클래스에만
   CI 색을 얹는다. 새 컴포넌트나 새 레이아웃을 만들지 않는다.

   기본색(--main-color)은 테마관리에서 CI 딥그린 #056839 로 설정되어 있으므로
   여기서는 다루지 않는다. 이 파일이 하는 일은 하나뿐이다 —
   테마가 검정으로 처리하던 강조부를 CI 골드로 바꿔 브랜드 인상을 만든다.

   골드를 쓰는 이유: 레거시 사이트는 크림 바탕에 포레스트그린 + 라임을 썼고
   골드는 전혀 쓰지 않았다. CI 의 나머지 절반인 골드를 시그니처로 세우면
   같은 초록 계열이어도 인상이 확실히 갈린다.
   ========================================================================== */


/* --- 버튼 : 메인 '제품 비교하기'(.pnf-btn --solid) 와 100% 동일한 골드 채움+스프링 --
   참조 버튼의 색·애니메이션을 그대로 이식한다:
     · 본체 배경은 투명, 채움은 의사요소가 맡는다
     · ::before = 골드(--pnf-accent) 면(평상시)
     · ::after  = 밝은 골드(--pnf-btn-hover), 호버하면 scale 0→1 로 스프링(--pnf-ease-bounce)
     · 글씨는 먹색(--pnf-ink) 하나
   그누위즈 버튼(.gw-btn01/.gw-btn0102)과 게시판 목록/댓글 버튼에 적용.
   4개 게시판 스킨 모두 이 버튼들에 ::before/::after 를 쓰지 않아 충돌이 없다.
   게시판 스킨이 ID 스코프로 본체 배경색을 강제하는 자리는 !important 로 투명하게
   되돌려(스킨 구조가 달라도) 의사요소 채움이 드러나게 한다.

   대상: .gw-btn01(특허 상세보기·슈퍼희토·닥터희토·로그인·취소·액션바 글쓰기 등) ·
         .gw-btn0102(작성완료·댓글 등록) · 목록으로(.list-btn) ·
         댓글 답변/수정/삭제(#bo_vc .gw-btn03).
   검색(.sch_btn)처럼 입력창에 붙는 컨트롤은 대상이 아니다. */
.gw-btn01,
.gw-btn0102,
#gw-bo-v .list-btn,
#bo_vc .gw-btn03 {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 6px;
    background: transparent;
    /* 골드 면 위 먹색 글씨 — 테마 전역 a{color:#222} 보다 우선하도록 !important */
    color: var(--pnf-ink) !important;
    font-weight: 700;
    text-transform: none;
    transition: color .3s ease;
}
.gw-btn01::before, .gw-btn01::after,
.gw-btn0102::before, .gw-btn0102::after,
#gw-bo-v .list-btn::before, #gw-bo-v .list-btn::after,
#bo_vc .gw-btn03::before, #bo_vc .gw-btn03::after {
    content: "";
    position: absolute;
    /* .gw-btn01 의 대각선 와이프(::before)는 :hover 에서 width:150%·rotate 로 커진다.
       그 형태를 확실히 눌러(!important) 버튼 크기에 딱 맞게 채우도록 고정한다. */
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: -1;
    border-radius: inherit;
    transform: none;
    transition: transform .35s var(--pnf-ease-back);
}
.gw-btn01::before,
.gw-btn0102::before,
#gw-bo-v .list-btn::before,
#bo_vc .gw-btn03::before { background: var(--pnf-accent); transform: none; }
.gw-btn01::after,
.gw-btn0102::after,
#gw-bo-v .list-btn::after,
#bo_vc .gw-btn03::after { background: var(--pnf-btn-hover); transform: scale(0); }
.gw-btn01:hover,
.gw-btn0102:hover,
#gw-bo-v .list-btn:hover,
#bo_vc .gw-btn03:hover { color: var(--pnf-ink); }
.gw-btn01:hover::before,
.gw-btn0102:hover::before,
#gw-bo-v .list-btn:hover::before,
#bo_vc .gw-btn03:hover::before { transform: scale(.97); transition-timing-function: var(--pnf-ease-bounce); }
.gw-btn01:hover::after,
.gw-btn0102:hover::after,
#gw-bo-v .list-btn:hover::after,
#bo_vc .gw-btn03:hover::after { transform: scale(1); transition-timing-function: var(--pnf-ease-bounce); }
.gw-btn01 > i,
.gw-btn0102 > i,
#gw-bo-v .list-btn > i,
#bo_vc .gw-btn03 > i { color: var(--pnf-ink); }

.gw-main-btn01 .gw-ico { color: var(--pnf-gold); }

/* 게시판 스킨이 ID 스코프(일부 !important)로 본체 배경·위치를 강제하는 자리 —
   본체를 투명/relative 로 되돌려 위 골드 의사요소 채움이 드러나게 한다.
   댓글 버튼은 #bo_vc 로 좁혀 임시저장(#autosave_wrapper .gw-btn03) 등은 건드리지 않는다. */
#gw-bo-list .btn_bo_user .gw-btn01,
#gw-bo-v .btn_bo_user .gw-btn01,
#gw-bo-v .gw-btn0102,
#gw-bo-v .bcm-submit-row .gw-btn0102,
#gw-bo-w .gw-btn0102,
#gw-bo-w .gw-btn-wrap .gw-btn0102,
#gw-bo-v .bo_v_nb > li > .list-btn,
#gw-bo-v .bo_v_nb > li > .list-btn:hover,
#bo_vc .gw-btn03 {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--pnf-ink) !important;
}

/* 게시판 액션바 버튼(글쓰기·삭제 등)은 컴팩트 크기로 (색·호버는 위 규칙) */
.btn_bo_user .gw-btn01 {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

/* 모션 최소화 설정에서는 튕김 없이 색만 갈린다 */
@media (prefers-reduced-motion: reduce) {
    .gw-btn01::before, .gw-btn01::after,
    .gw-btn0102::before, .gw-btn0102::after,
    #gw-bo-v .list-btn::before, #gw-bo-v .list-btn::after,
    #bo_vc .gw-btn03::before, #bo_vc .gw-btn03::after { transition: none; }
    .gw-btn01:hover::after, .gw-btn0102:hover::after,
    #gw-bo-v .list-btn:hover::after, #bo_vc .gw-btn03:hover::after { transform: scale(1); }
    .gw-btn01:hover::before, .gw-btn0102:hover::before,
    #gw-bo-v .list-btn:hover::before, #bo_vc .gw-btn03:hover::before { transform: none; }
}

/* --- 게시판 상세(#gw-bo-v) 상단 여백 — 모든 게시판 공통 -----------------------
   각 스킨이 #gw-bo-v padding-top 을 120px 등 제각각으로 잡아 게시판마다 다르다.
   서브내비(브레드크럼 알약) 아래 제목이 붙지 않도록 전역 !important 로 값을 통일한다.
   gw_basic 은 .gw-bbs-con 에서 상단 패딩을 빼 이 규칙을 따르게 했다. */
#gw-bo-v { padding-top: 90px !important; }
@media screen and (max-width: 768px) { #gw-bo-v { padding-top: 60px !important; } }

/* --- 게시판 빈 목록 안내(등록된 게시물이 없습니다) 크기 축소 — 모든 게시판 공통 ---
   제목(24px)·펜 아이콘(42px)이 과하게 커서 줄인다. */
.gw-empty-list > h3 { font-size: 18px !important; }
.gw-empty-list i { font-size: 30px !important; }

/* --- 게시판 검색바·버튼·입력·댓글 UI 라운드 — 모든 게시판 6px 로 통일 --------
   스킨마다 라운드가 제각각(공지=0 강제, 나머지=base 5px/0 등)이라, 완전 각진 것과
   섞여 보인다. 검색 셀렉트/인풋·검색버튼·목록으로(.list-btn)·댓글표시(.cmt_btn)·
   댓글등록(.gw-btn0102)·상세 입력요소·액션버튼을 6px 로 통일한다. 없는 스킨엔 무해. */
#gw-bo-list .sel-wrap,
#gw-bo-list .sel-wrap > select,
#gw-bo-list .sch_input,
#gw-bo-list input[type="text"],
#gw-bo-list select,
#gw-bo-list .sch_btn,
#gw-bo-list .btn_more_opt,
#gw-bo-list .more_opt,
#gw-bo-list .notice_icon,
#gw-bo-list .new_icon,
#gw-bo-v .list-btn,
#gw-bo-v .cmt_btn,
#gw-bo-v .cmt_btn .total,
#gw-bo-v .bcm-submit-row .gw-btn0102,
#gw-bo-v input[type="text"],
#gw-bo-v input[type="password"],
#gw-bo-v textarea,
#gw-bo-v select,
#gw-bo-v .btn_more_opt,
#gw-bo-v .more_opt,
.btn_bo_user .gw-btn01 { border-radius: 6px !important; }

/* --- 댓글 카드·버튼·내용 정리 — 모든 게시판 공통 ------------------------------
   댓글 카드(.gw-box02)를 감싸던 연한 초록 테두리를 없애 배경 위에 자연스럽게 얹는다
   (댓글 사이는 기존 여백으로 구분). 답변달기/수정/삭제(.gw-btn03)는 6px 로 둥글게.
   내용(.cmt_contents.gw-box01)이 카드 안에서 또 테두리 박스에 갇혀 이중 보더로
   어색하던 것도 내부 테두리를 없애 자연스럽게(글자 들여쓰기는 유지). */
#bo_vc .gw-box02 { border: 0 !important; border-radius: 0 !important; }
#bo_vc .gw-btn03 { border-radius: 6px !important; }
#bo_vc .cmt_contents.gw-box01 { border: 0 !important; border-radius: 0 !important; background: transparent !important; }


/* --- 구분선 · 불릿 : 회색 → 골드 ----------------------------------------- */
.gw-sub-title-line:after { background: var(--pnf-gold); width: 2px; height: 34px; }
.gw-list01 > li:before { color: var(--pnf-gold); }
.dot { background: var(--pnf-gold); }


/* --- 섹션 라벨 밑에 골드 헤어라인 ---------------------------------------- */
.gw-sub-title02 { position: relative; display: inline-block; padding-bottom: 10px; }
.gw-sub-title02::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--pnf-gold); }


/* --- 표 머리 : CI 톤으로 ------------------------------------------------- */
.gw-table01 thead th,
.gw-table02 thead th { border-top: 2px solid var(--main-color); }


/* --- 탭 활성 표시선 ------------------------------------------------------ */
.gw-tabs > li > a.active { border-bottom-color: var(--pnf-gold); }


/* --- 딥그린 면(섹션 배경)용 보정 -----------------------------------------
   테마의 .gw-bg-f8 대신 딥그린 면을 쓰고 싶은 섹션에만 붙인다.
   글자색과 링크색을 함께 뒤집어 준다. */
.pnf-bg-deep { background: var(--pnf-green-900); color: #fff; }
.pnf-bg-deep .gw-sub-title,
.pnf-bg-deep .gw-sub-text,
.pnf-bg-deep h2, .pnf-bg-deep h3, .pnf-bg-deep h4, .pnf-bg-deep p { color: #fff; }
.pnf-bg-deep .gw-sub-title02 { color: var(--pnf-gold); }
.pnf-bg-deep .gw-sub-title02::after { background: var(--pnf-gold); }
/* 딥그린 면 위에서도 .gw-btn01 은 골드 채움 버튼이라 글씨는 먹색을 유지한다 */
.pnf-bg-deep .gw-btn01 { color: var(--pnf-ink); }


/* --- 핵심기술 4패널 : 사진이 없을 때의 처리 ------------------------------
   테마는 이 패널을 배경사진 위 어두운 오버레이로 설계했다(.gw-img-box{height:100vh;
   background:#000}). 우리는 쓸 사진이 없어 이미지를 뺐고, 그대로 두면 검정 100vh
   블록 네 개가 남는다. 사진이 들어오기 전까지 딥그린 면으로 대신 세우고
   높이를 줄인다. 구조와 클래스는 건드리지 않는다.
   사진 확보 시 이 블록만 지우면 테마 원래 동작으로 돌아간다. */
/* 목록 자체가 100vh(main.css)라 460px 패널 아래로 흰 여백이 크게 남았다.
   패널 높이에 맞춰 목록도 내용 높이로 접는다. */
#gw-theme08-main-service .gw-service-list { height: auto; }
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-img-box {
    height: 560px;
    background: linear-gradient(160deg, var(--pnf-green-900) 0%, var(--pnf-green-700) 100%);
}
/* hover 로 펼쳐질 때 나오는 상세(gw-thumb-box)는 테마 기본 padding(10rem 5rem)이
   100vh 패널 기준이라, 낮아진 패널에서는 내용이 아래로 밀려 나간다. 패널에 맞게 줄인다. */
#gw-theme08-main-service .gw-thumb-box { padding: 4rem 3rem; }
/* 체크리스트의 nowrap 은 넓은 데모 문구 기준이라 1440px 이하에서 패널 밖으로 흘러넘친다 */
#gw-theme08-main-service .gw-thumb-box .gw-check-list p { white-space: normal; }
#gw-theme08-main-service .gw-service-list .gw-list-item + .gw-list-item .gw-img-box {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12);
}
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-tit {
    position: relative;
    padding-bottom: 14px;
}
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-tit::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 28px;
    height: 2px;
    margin-left: -14px;
    background: var(--pnf-gold);
}
#gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-txt {
    color: rgba(255, 255, 255, .72);
}

@media screen and (max-width: 1024px) {
    #gw-theme08-main-service .gw-service-list .gw-list-item .gw-img-box { height: 300px; }
}


/* --- 메인 히어로 : 흰 글자 가독성 확보 ------------------------------------
   배너 사진의 왼쪽 위가 밝은 하늘이라 흰 카피가 묻힌다.
   사진 위에 딥그린 스크림을 얹어 대비를 만든다. 구조는 건드리지 않는다. */
#gw-theme-main-visual .slide-inner .bg { position: relative; }
#gw-theme-main-visual .slide-inner .bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(2, 54, 29, .82) 0%, rgba(2, 54, 29, .45) 45%, rgba(2, 54, 29, .12) 100%);
    pointer-events: none;
}
/* 스크림 위로 텍스트를 올린다. 테마의 절대중앙 배치(top:50%;translateY(-50%))는 그대로 둔다 —
   position:relative 로 덮으면 중앙정렬이 풀려 카피가 아래로 내려간다 */
#gw-theme-main-visual .gw-main-visual-text-con { z-index: 2; }

/* 히어로 버튼(제품보기·제품문의) 제거. 버튼은 배너 DB(bn_btn) 에서 오므로 여기서 감춘다.
   text-con 은 남은 내용 높이 기준으로 다시 세로 중앙에 맞춰진다(translateY(-50%)). */
#gw-theme-main-visual .gw-slide-btn-container { display: none; }

/* 가운데 구분선: 테마의 진행바(.gw-progress-bar, JS 제어)를 감추고
   그 위로 섬광이 한 번씩 지나가는 연출로 바꾼다. CI 골드에 흰색을 섞은 따뜻한 화이트
   (--pnf-gold-100 #FFF1C2 ~ #FFFDF5)로, 은은한 글로우와 함께 왼→오른쪽으로 흐른다.
   JS 가 건드리지 않는 ::after 로 그려 진행바 로직과 충돌하지 않는다. */
#gw-theme-main-visual .gw-progress-bar { display: none; }
#gw-theme-main-visual .gw-progress-container { overflow: hidden; }
#gw-theme-main-visual .gw-progress-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 200px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(255, 241, 194, 0) 0%,
        rgba(255, 241, 194, .55) 42%,
        #FFFDF5 50%,
        rgba(255, 241, 194, .55) 58%,
        rgba(255, 241, 194, 0) 100%);
    box-shadow: 0 0 10px 1px rgba(255, 241, 194, .45);
    transform: translateX(-200px);
    /* 페이지 진입 직후 딱 한 번만 지나간다. 로딩 화면이 걷힌 뒤 흐르도록 살짝 지연,
       한 번 지난 뒤에는(both) 사라진 상태를 유지한다 */
    animation: pnf-hero-sheen 1.5s cubic-bezier(.4, 0, .2, 1) 0.6s 1 both;
    pointer-events: none;
}
/* -200px 에서 시작해 선을 가로질러 오른쪽 밖으로 한 번 흐른다 */
@keyframes pnf-hero-sheen {
    0%   { transform: translateX(-200px); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #gw-theme-main-visual .gw-progress-container::after { animation: none; opacity: 0; }
}


/* --- 테마 데모 사진이 배경으로 남아 있던 두 곳 ----------------------------
   about 은 추상 실버, quick 은 키보드 스톡 사진이라 회사와 무관하다.
   <img> 가 아니라 CSS 배경이어서 마크업 정리 때 함께 빠지지 않았다.
   우리 사진이 생기면 이 블록을 지우면 테마 원래 배경으로 돌아간다. */
#gw-theme08-main-about .gw-content {
    background: linear-gradient(135deg, var(--pnf-green-050) 0%, #fff 55%, var(--pnf-green-100) 100%);
}
#gw-theme08-main-quick .gw-quick-con {
    background-image: linear-gradient(115deg, var(--pnf-green-900) 0%, var(--pnf-green-700) 62%, var(--pnf-green-600) 100%);
}
#gw-theme08-main-quick .gw-quick-con .gw-tit,
#gw-theme08-main-quick .gw-quick-con .gw-txt { color: #fff; }

/* 스크롤 표시가 카피 위에 겹친다. 테마 데모보다 우리 문구가 한 줄 길어
   중앙에 놓인 표시와 충돌한다. 왼쪽 여백으로 물려 충돌만 해소한다. 오른쪽은 TOP 버튼 자리다. */
#gw-theme-main-visual .scroll { left: 40px; right: auto; transform: none; }


/* --- 사업분야 : 사진이 없을 때의 처리 -------------------------------------
   오른쪽 2/3 는 원래 슬라이드 사진 영역인데(<a class="gw-img"> 안의 <img>),
   쓸 사진이 없어 이미지를 뺐더니 흰 여백 위에 흰 글자가 얹혀 통째로 비어 보였다.
   빈 <span> 을 딥그린 면으로 세워 슬라이드마다 톤을 달리하고,
   테마가 이미 갖고 있는 흰 글자 오버레이(.gw-txt)가 그 위에 보이게 한다.
   사진 확보 시 이 블록만 지우면 테마 원래 동작으로 돌아간다. */
#gw-theme08-main-business .gw-img-box .gw-img-inner,
#gw-theme08-main-business .gw-img-box .slick-list,
#gw-theme08-main-business .gw-img-box .slick-track { height: 100%; }
#gw-theme08-main-business .gw-img-box .gw-img { display: block; height: 100%; }
#gw-theme08-main-business .gw-img-box .gw-img > span {
    display: block;
    height: 100%;
    min-height: 340px; /* 1280px 이하에서 박스가 세로로 쌓여 높이를 잃을 때의 하한 */
    background: linear-gradient(150deg, var(--pnf-green-900) 0%, var(--pnf-green-700) 100%);
}
#gw-theme08-main-business .gw-img-box .gw-img:nth-child(2) > span {
    background: linear-gradient(150deg, var(--pnf-green-800) 0%, var(--pnf-green-600) 100%);
}
#gw-theme08-main-business .gw-img-box .gw-img:nth-child(3) > span {
    background: linear-gradient(150deg, var(--pnf-green-700) 0%, var(--pnf-green-500) 100%);
}


/* --- 오시는길 : 지도가 없을 때의 처리 --------------------------------------
   왼쪽 절반은 원래 지도 영역인데 좌표·지도 이미지가 미확보라 흰 공백으로 남았다.
   지도 칸을 접고 초록 안내 판을 가로 전체로 펴서 배너 형태로 쓴다.
   responsive.css 가 같은 선택자로 50vh/100vh 를 다시 지정하므로
   body 를 앞에 붙여 특이도로 이긴다. 지도 확보 시 이 블록만 지우면 된다. */
body #gw-theme08-main-location { height: auto; }
body #gw-theme08-main-location .gw-left { display: none; }
body #gw-theme08-main-location .gw-right { width: 100vw; height: auto; padding: 9rem 0; }

/* 서브 헤더: 서브 배너 이미지(data/theme/gnuwiz/sub_banner)가 아직 서버에 없으면
   흰 제목·브레드크럼이 테마 기본 배경(#f8f8f8) 위에 묻혀 보이지 않는다.
   딥그린 면을 기본 배경으로 깔아 둔다. 배너가 업로드되면 그 위를 덮으므로 그대로 둬도 된다. */
#container_title { background: linear-gradient(135deg, var(--pnf-green-900) 0%, var(--pnf-green-700) 100%); }

/* 히어로 보조 카피를 골드로.
   배너 스킨의 `... .gw-bottom-container > div` 가 타입 선택자를 포함해
   특이도가 더 높다. 같은 경로에 클래스를 붙여 이긴다. */
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 {
    color: var(--pnf-gold-300);
    font-weight: 600;
}


/* --- 풋터 : 딥그린 면 -------------------------------------------------------
   본문이 흰 면으로 끝나 페이지가 어디서 끝나는지 읽히지 않는다.
   푸터를 CI 딥그린으로 눌러 바닥을 만든다. 그 위 글자는 흰 계열로 되돌린다.
   (풋터 로고는 골드 배지라 딥그린 위에서 그대로 읽힌다)
   -------------------------------------------------------------------------- */
#ft {
    background: var(--pnf-green-900);
    color: rgba(255, 255, 255, .72);
}
#ft a { color: inherit; }
#ft_link a { color: rgba(255, 255, 255, .62); }
#ft_link a:hover { color: #fff; }
#ft_link a:not(:last-child)::after { background-color: rgba(255, 255, 255, .38); }
#ft_company .ft_info { color: rgba(255, 255, 255, .58); }
#ft_company .ft_info a:hover { color: #fff; }
#ft .ft-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
#ft_copy { color: rgba(255, 255, 255, .45); }
#ft .gw-sns-container > li > a { color: rgba(255, 255, 255, .72); }
#ft .gw-sns-container > li > a:hover { color: #fff; }