/* ============================================================
   디자인 토큰 (사이트 공통) — 색/간격/모서리 기준값.
   값 하나만 바꾸면 전 페이지에 반영됩니다.
   ============================================================ */
:root{
  /* 포인트색 (브랜드 블루로 통일) */
  --brand:#0066cc;
  --brand-strong:#0053a6;
  /* 텍스트 */
  --text:#1f2a37;
  --text-muted:#5b6572;
  --text-light:#8a939f;
  /* 면 / 카드 / 선 */
  --surface:#f8fafc;
  --card:#ffffff;
  --line:#e5e7eb;
  /* 형태 */
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(20,30,50,.06);
  /* 레이아웃 */
  --content:1024px;
  --section-pad:64px;
}

/* 전역 설정 */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
}

/* Header / Navigation styles are managed in header.css */

/* ==========================================
  2. 콘텐츠 영역
========================================== */

/* ==========================================
   2.1 콘텐츠 메인
========================================== */

/* 전체 콘텐츠 레이아웃 중앙 정렬 */
.layout {
    max-width: var(--content);   /* 사이트 공통 콘텐츠 폭 */
    min-width: 320px;           /* 최소 너비 설정 */
    margin: 0 auto;             /* 가운데 정렬 */    
}

/* 오른쪽에 떠 있는 support 영역 (레이아웃과 분리된 독립 요소) */
.support-floating {
    position: fixed; /* 화면 기준으로 고정 (스크롤 영향 없음) */
    top: 180px; /* 상단에서 180px 아래 위치 */
    right: calc((100% - var(--content)) / 2 - 260px - 10px); /* 메인 레이아웃 기준 오른쪽 바깥 정렬 */

    width: 260px; /* 고정 너비 */
    z-index: 999; /* 다른 요소보다 위에 표시 */
}

/* ============================================================
   공통 Hero  (모든 페이지 공용)
   → base.html 이 불러오는 전역 CSS 에 두세요.
     기존 .hero / .hero-content 규칙이 있으면 이 내용으로 교체.
   ============================================================ */

.hero{
  position:relative;
  background-color:#0e1622;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  margin-bottom: 20px;
}
/* 어두운 그라데이션 오버레이 — 어떤 사진 위에도 글자가 잘 보이도록 */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(13,20,32,.94) 0%,
    rgba(19,29,46,.72) 48%,
    rgba(22,34,54,.50) 100%);
}

.hero-content{
  position:relative;   /* 오버레이 위로 */
  z-index:1;
  max-width:var(--content);
  margin:0 auto;
  padding:42px 24px 52px;
  color:#fff;
}
.hero-content h1{
  font-size:clamp(28px, 4.4vw, 40px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0 0 14px;
}
.hero-content p{
  max-width:560px;
  margin:0;
  font-size:clamp(14px, 1.6vw, 16px);
  line-height:1.65;
  color:#cfd6de;
}

/* ── 메인 카테고리별 배경 이미지 ──────────────────────────────
   경로 앞부분(/static/)은 프로젝트 STATIC_URL 에 맞게 조정하세요.
   해시(Manifest)정적파일을 쓰면 CSS 하드코딩 대신 아래 '방법 B'(템플릿
   인라인 {% static %}) 를 권장합니다. */
.hero--company    { background-image:url("/static/hebizapp/image/hero/company.svg"); }
.hero--business   { background-image:url("/static/hebizapp/image/hero/business.svg"); }
.hero--gmsupplier { background-image:url("/static/hebizapp/image/hero/gmsupplier.svg"); }
.hero--education  { background-image:url("/static/hebizapp/image/hero/education.svg"); }
.hero--notice     { background-image:url("/static/hebizapp/image/hero/notice.svg"); }
.hero--contact    { background-image:url("/static/hebizapp/image/hero/contact.svg"); }

@media (max-width:768px){
  .hero-content{ padding:32px 20px 40px; }
}

/* ==========================================================
   TOGGLE BUTTON
   ========================================================== */

.toggle-button{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    width:100%;
    max-width:220px;

    margin:10px auto;

    padding:14px 22px;

    border:1px solid #d8dde5;

    border-radius:999px;

    background:#fff;

    color:var(--text-muted);

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


/* SVG 회전 */

.toggle-button .toggle-icon{

    transition:transform .3s ease;

}

.toggle-button.open .toggle-icon{

    transform:rotate(180deg);

}


/* Hover는 PC에서만 */

@media (hover:hover){

    .toggle-button:hover{

        background:var(--brand);

        border-color:var(--brand);

        color:#fff;

        transform:translateY(-2px);

        box-shadow:0 10px 25px rgba(0,102,204,.18);

    }
}



/* ==========================================
   2.2 원격지원링크 영역
========================================== */

/* 지원 링크 전체 박스 */
.support_link_wrap {
    width: 200px; /* 내부 콘텐츠 폭 */
    flex-shrink: 0; /* flex 환경에서 크기 줄어들지 않도록 고정 */

    display: flex; /* 세로 배치 */
    flex-direction: column; /* 세로 정렬 */
    gap: 8px; /* 항목 간 간격 */

    background: #ffffff; /* 흰색 배경 */
    border-radius: 14px; /* 둥근 모서리 */
    padding: 10px; /* 내부 여백 */

    box-shadow: 0 6px 16px rgba(0,0,0,0.08); /* 부드러운 그림자 */
}

/* 지원 링크 제목 영역 */
.support_link_title {
    font-size: 14px; /* 글자 크기 */
    font-weight: 600; /* 굵은 글씨 */
    text-align: center; /* 가운데 정렬 */

    padding: 6px 10px; /* 내부 여백 */
    border-radius: 8px; /* 둥근 박스 */

    background: #f5f7ff; /* 연한 배경색 */
    color: #5059C9; /* 포인트 색상 */
}

/* 헬프 영역 구분선 역할 */
.helpu-wrap {
    border-bottom: 1px solid #eee; /* 아래 구분선 */
}

/* 개별 링크 감싸는 영역 */
.support_link {
    margin: 5px 0; /* 위아래 간격 */
}

/* 실제 링크 스타일 */
.support_link a {
    display: flex; /* 아이콘 + 텍스트 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 8px; /* 아이콘과 텍스트 간격 */

    padding: 0px 10px; /* 좌우 여백 */
    border-radius: 10px; /* 둥근 버튼 */

    background: #ffffff; /* 흰 배경 */
    color: #222; /* 글자색 */
    text-decoration: none; /* 밑줄 제거 */

    font-size: 13px; /* 글자 크기 */

    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 긴 텍스트 ... 처리 */

    box-shadow: 0 2px 6px rgba(0,0,0,0.04); /* 은은한 그림자 */
    transition: all 0.2s ease; /* hover 애니메이션 */
}

/* 링크 hover 효과 */
.support_link a:hover {
    transform: translateY(-1px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* 그림자 강조 */
}

/* ==========================================
   2.4 원격지원링크 모바일 대응 (≤768px)
========================================== */
@media (max-width: 768px) {

    /* 지원 링크 영역 숨김 */
    .support_link_wrap {
        display: none; /* 모바일에서는 비노출 */
    }
}


/* ==========================================
   3. 공통 콘텐츠 컴포넌트
   (company.css / business.css 중복 정의를 통합)
========================================== */

/* ------------------------------
   3.1 Overview 섹션
   (회사소개 · 사업분야 상세 페이지 공용)
------------------------------ */
.overview {

    display:flex;
    align-items:center;

    gap:70px;

    padding:40px 0;

}

.overview-image {

    flex:1; /* 기본 비율. 페이지별로 다르면 각 css에서 재정의 */

}

.overview-image img{
    height:460px;          /* [Stage2] company.css 전역값 통합 (전 페이지 공통 높이) */
    object-fit:cover;

    width:100%;
    display:block;

    border-radius:18px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.overview-content {

    flex:1; /* 기본 비율. 페이지별로 다르면 각 css에서 재정의 */

}

.section-title{

    display:inline-block;

    color:var(--brand);

    font-size:14px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1px;

    margin-bottom:12px;

}

.overview-content h2{

    font-size:30px;
    line-height:1.3;

    margin-bottom:28px;

}

.overview-text{

    font-size:17px;
    line-height:1.9;

    color:var(--text-muted);

}

/* ------------------------------
   3.2 스크롤 페이드업 애니메이션
   (introduction.html / plm_service.html 등에서 공용)
------------------------------ */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   3.3 Overview 모바일 대응 (≤768px)
------------------------------ */
@media (max-width:768px){

    .overview{
        flex-direction:column;
        gap:40px;
    }

    .overview-image,
    .overview-content{
        width:100%;
    }

    .overview-content h2{
        font-size:20px;
    }

}

/* ------------------------------
   3.4 CTA (Call To Action)
   (introduction.html / plm_service.html 등에서 공용)
------------------------------ */
.cta {
  text-align: center;          /* 텍스트 중앙 */
  padding: 50px 20px;         /* 여백 */
  background: #edf2f7;            /* 어두운 배경 */
  border-radius: 10px;          /* 둥근 버튼 */
  margin-top: 20px;            /* 위 여백 */
}

.cta h2 {
    color: #1F2937;
}

.cta p {
    color: #4B5563;
}

/* CTA 버튼 */
.cta .btn {
  display: inline-block;       /* 버튼 형태 */
  margin-top: 20px;            /* 위 여백 */
  padding: 12px 24px;          /* 버튼 크기 */
  background:#1F2937;           /* 배경 */
  color:white;                /* 텍스트 */
  border-radius: 8px;          /* 둥근 버튼 */
  text-decoration: none;       /* 밑줄 제거 */
  transition: 0.3s;            /* hover 애니메이션 */
}

/* 버튼 hover */
.cta .btn:hover {
  background: #2563EB;            /* 배경 변경 */
}


/* ============================================================
   [Stage2 이동] 공통 섹션 헤더  (business.css 에서 이동)
   ------------------------------------------------------------
   overview / 핵심역량 등 여러 페이지의 .section-header 공통 기본값.
   페이지별로 다르면 각 CSS에서 스코프(.xxx-page .section-header)로 재정의.
   ============================================================ */
.section-header{
    text-align:center;
    margin-bottom:40px;
}
.section-header h2{
    font-size:30px;
    margin:15px 0;
}
.section-header p{
    font-size:17px;
    color:var(--text-muted);
}

@media (max-width:768px){
    /* [Stage2] 공통 섹션 헤더 모바일 (business.css 에서 이동) */
    .section-header{ margin-bottom:40px; }
    .section-header h2{ font-size:20px; }
    .section-header p{ font-size:15px; }

    /* [Stage2] overview 이미지 모바일 높이 (company.css 에서 이동) */
    .overview-image img{ height:280px; }
}
/* At the minimum supported width, default body margins must not add overflow. */
@media(max-width:336px){body{margin:0}}