@charset "utf-8";
/******************************************************************
    (주)이노비사이언스 — 전역 스타일

    head.sub.php 에서 모든 페이지에 로드된다. 게시판(bbs/board.php)
    처럼 page/css/inob-sub.css 를 로드하지 않는 화면에도 적용된다.

    - 디자인 토큰의 원본 정의는 이 파일이다.
    - 헤더/푸터/게시판 보정만 둔다. 페이지 컴포넌트는 inob-sub.css.
******************************************************************/

/* ================================================================
   1. 디자인 토큰 (원본)
   ================================================================ */
:root {
    --inob-navy:      #0f2137;
    --inob-navy-2:    #17324f;
    --inob-navy-3:    #1e4066;

    --inob-red:       #c8202e;
    --inob-red-dark:  #a4161f;
    --inob-cyan:      #1f8fb0;
    --inob-cyan-lt:   #e6f4f8;

    --inob-green:     #4a6b4a;
    --inob-green-dk:  #35503a;
    --inob-ivory:     #f2efe2;

    --inob-ink:       #111820;
    --inob-body:      #46505c;
    --inob-muted:     #6b7683;
    --inob-line:      #dfe4ea;
    --inob-bg:        #f5f7f9;
    --inob-bg-2:      #eef2f5;
    --inob-white:     #fff;

    --inob-r-sm:      8px;
    --inob-r:         14px;
    --inob-r-lg:      22px;

    --inob-sh:        0 4px 18px rgba(15, 33, 55, .07);
    --inob-sh-lg:     0 14px 44px rgba(15, 33, 55, .13);

    --inob-con:       1200px;
    --inob-con-wide:  1480px;
}

/* 한글 어절이 갈라지지 않게 한다 */
body, h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd {
    word-break: keep-all;
}

/* ================================================================
   1-B. 헤더
   ================================================================ */
#hd .hd_login .inob-hd-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--inob-navy);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    transition: background .25s ease;
}
#hd .hd_login .inob-hd-cta:hover { background: var(--main-color, #00A040); color: #fff; }

/* 로고가 없을 때 대비 — alt 텍스트가 깨져 보이지 않게 */
#hd #logo img { max-height: 42px; width: auto; }

/* ================================================================
   2. 푸터
   ================================================================ */
#ft .inob-ft-logo {
    display: inline-block;
    text-decoration: none;
}
#ft .inob-ft-logo strong {
    display: block;
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
}
#ft .inob-ft-logo span {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .58);
    font-size: 14px;
    letter-spacing: .02em;
}

#ft .ft_info span { display: inline-block; }
#ft .ft_info .inob-ft-addr { display: block; }

/* 벤더 CSS 의 기본 링크색(#222)이 검은 푸터 위에서 사실상 안 보인다.
   푸터 안의 링크는 본문색을 물려받게 한다. */
#ft .ft_info a,
#ft a[href^="mailto:"],
#ft a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
}
#ft .ft_info a:hover,
#ft a[href^="mailto:"]:hover { color: var(--inob-cyan); text-decoration: underline; }

#ft .inob-ft-links { flex-wrap: wrap; }
#ft .inob-ft-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
#ft .inob-ft-link:hover {
    border-color: #fff;
    background: #fff;
    color: var(--inob-navy);
}

/* SNS — 네이버 블로그 · 인스타그램 (새 창) */
#ft .inob-ft-sns { margin-top: 14px; flex-wrap: wrap; }
#ft .inob-ft-sns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: rgba(255, 255, 255, .82);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
#ft .inob-ft-sns-btn:hover {
    border-color: var(--main-color, #00A040);
    background: var(--main-color, #00A040);
    color: #fff;
}

/* ================================================================
   2-B. 메인 배너 텍스트 노출 보정

   design_1 스킨은 swiper 의 `swiper-slide-active` 가 아니라 스킨 JS 가
   직접 붙이는 `.active` 클래스로 텍스트를 드러낸다. 그런데 초기 슬라이드
   이후 `slideChangeTransitionEnd` 에서 `.active` 가 옮겨가지 않는 경우가
   있어 배너 문구가 통째로 사라진다.

   swiper 가 보증하는 `swiper-slide-active` 를 기준으로 같은 상태를
   한 번 더 지정해, JS 클래스가 어긋나도 문구는 항상 보이게 한다.
   ================================================================ */
#gw-theme-main-visual .swiper-slide.swiper-slide-active .gw-main-visual-text01 span {
    transform: translateY(0);
}
#gw-theme-main-visual .swiper-slide.swiper-slide-active .gw-bottom-container > div {
    opacity: 1;
    transform: translateY(0);
    transition: all .6s ease .35s;
}

/* ================================================================
   3. 서브 공통 배너 (#container_title)
   ----------------------------------------------------------------
   게시판과 page/*.php 가 **모두** 이 배너를 쓴다.
   배너 이미지는 관리자 > 테마설정 > 서브배너(theme_adm/sub_banner.php)에서
   대메뉴 코드별로 등록한다:
     data/theme/innobscience/sub_banner/sub_bg_img_{대메뉴코드}.jpg
     10 회사소개 / 20 기술·연구 / 30 사업분야 / 40 제품·브랜드
     50 홍보센터 / 60 고객지원  (미등록 시 sub_bg_img_0.jpg 폴백)

   서브페이지에서 _GNUWIZ_THEME_NONE_SUB_HEAD_ 를 정의하지 않는다.
   정의하면 배너·페이지명·브레드크럼·1·2차 메뉴가 통째로 사라지고
   <div id="container"> 도 열리지 않는다.
   ================================================================ */
#container_title .gw-sub-theme-visual {
    background: var(--inob-navy);
}
/* 이미지 위 오버레이 — 원본은 검정 35%. 브랜드 네이비로 바꿔 글자 대비를 지키면서
   사진이 탁해 보이지 않게 한다. */
#container_title .sub-theme-bg:before {
    background: rgba(9, 20, 34, .5);
}
#container_title .gw-sub-theme-title {
    color: #fff;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
    word-break: keep-all;
}
/* 브레드크럼 — 테마 원본보다 대비를 올린다 */
#container_title .breadcrumb-container > li > a { color: rgba(255, 255, 255, .72); }
#container_title .breadcrumb-container > li > a:hover { color: #fff; }
#container_title .breadcrumb-container > li > a.active { color: #fff; font-weight: 700; }
#container_title .gw-sub-theme-bottom { border-bottom-color: rgba(255, 255, 255, .26); }

/* 1·2차 드롭다운 메뉴 — 원본은 --main-color 단색이라 배너 위에서 뭉친다.
   반투명 + 블러로 띄우고 열렸을 때만 불투명 네이비로 굳힌다. */
/* 안쪽 button 은 border-radius:30px 짜리 pill 이고 hover 시 .gw-fill 이 그 안을
   가득 채운다. 컨테이너 원본 radius(1.2rem)와 어긋나면 채움 모서리가 삐져나와
   겹쳐 보인다. 테마 원본은 컨테이너 배경도 같은 --main-color 라 차이가 안 보였을 뿐이다.
   컨테이너를 같은 pill 로 맞춰 어긋남을 없앤다. overflow 는 숨기지 않는다 —
   드롭다운 ul 이 컨테이너 밖으로 펼쳐지기 때문. */
#container_title .gw-side-menu-container > .gw-flex > div {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    background: rgba(15, 33, 55, .58);
}
/* 버튼 자체도 컨테이너 안쪽선(테두리 1px)에 맞춘다 */
#container_title [class*="gw-side-menu-depth"] > button { border-radius: 30px; }
#container_title [class*="gw-side-menu-depth"] > ul {
    border: 1px solid rgba(255, 255, 255, .16);
    border-top: 0;
    background: var(--inob-navy);
}
#container_title [class*="gw-side-menu-depth"] > ul > li > a { transition: color .2s ease; }
#container_title [class*="gw-side-menu-depth"] > ul > li > a:hover { color: var(--inob-cyan); }
#container_title [class*="gw-side-menu-depth"] > ul > li > a.active { color: var(--inob-cyan); font-weight: 700; }

/* 배너 높이 — 원본 520px 는 본문 진입이 너무 늦다. 대략 절반으로 낮춘다.
   높이만 줄이면 내부 여백(패딩 80px, 제목 아래 여백 80px)이 남아 내용이 넘친다.
   여백도 같이 줄인다. 가로 패딩은 테마의 모바일 거터를 깨뜨리므로
   데스크톱(1025px 이상)에서만 건드린다. */
#container_title .gw-sub-theme-visual { height: 300px; }
#container_title .gw-sub-theme-title { margin-bottom: 24px; }

@media screen and (min-width: 1025px) {
    #container_title .gw-sub-con-1200 { padding: 40px 0; }
}
/* 1024px 이하에서 테마는 하단 패딩 50px + gap 30px 를 잡는다.
   배너를 낮춘 상태에서 그대로 두면 내용이 위로 밀려 제목이 헤더에 잘린다.
   세로 여백만 줄이고 가로 거터(0 20px)는 그대로 둔다. */
@media screen and (max-width: 1024px) {
    #container_title .gw-sub-theme-visual { height: 260px; }
    #container_title .gw-sub-theme-title { margin-bottom: 18px; }
    #container_title .gw-sub-con-1200 { padding-bottom: 28px; gap: 18px; }
}
@media screen and (max-width: 576px) {
    #container_title .gw-sub-theme-visual { height: 220px; }
    #container_title .gw-sub-theme-title { margin-bottom: 12px; }
    #container_title .gw-sub-con-1200 { padding-bottom: 22px; gap: 14px; }
}

/* ================================================================
   4. 게시판 보정
   그누위즈 gw_* 스킨 위에 브랜드 톤만 얹는다. 구조는 건드리지 않는다.
   ================================================================ */
.gw-bbs-con .gw-btn01,
.gw-bbs-con .gw-btn02 {
    border-radius: 999px;
}

/* 목록 헤더 라인 */
.gw-bbs-con .gw-table01 thead th {
    border-top: 2px solid var(--inob-navy);
    color: var(--inob-ink);
}

/* 링크 hover 톤 */
.gw-bbs-con a:hover { color: var(--inob-cyan); }

/* 비밀글 안내 등 강조 텍스트 */
.gw-bbs-con .gw-point { color: var(--inob-red); }

/* ================================================================
   5. 접근성
   ================================================================ */
.inob-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 키보드 포커스 링 — 벤더 CSS 가 outline:none 을 걸어둔 곳 복구 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--inob-cyan);
    outline-offset: 2px;
}

/* ================================================================
   6. 반응형
   ================================================================ */
@media (max-width: 768px) {
    #ft .inob-ft-logo strong { font-size: 21px; }
    #ft .inob-ft-link { padding: 8px 16px; font-size: 13px; }
    #ft .inob-ft-sns-btn { width: 38px; height: 38px; font-size: 18px; }
}