@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700;900&display=swap');

/* =========================
   SACT Basic Styles v1
   - clean, readable, B2B tone
   - minimal but polished
   ========================= */

:root {
  --bg: #0f172a;         /* dark slate */
  --bg2: #111827;        /* deep gray */
  --text: #0b1220;       /* body text */
  --muted: #4b5563;      /* gray */
  --card: #ffffff;       /* card bg */
  --line: #e5e7eb;       /* border */
  --accent: #2563eb;     /* blue */
  --accent2: #1d4ed8;
  --heroText: #ffffff;
  --heroMuted: rgba(255,255,255,0.78);
  --max: 1040px;
  --navMax: 1180px;

  /* ✅ Section title (h2) upgrade A */
  --sectionTitle: #0b2a5b;                   /* deep navy */
  --sectionTitleLine: rgba(11, 42, 91, .22); /* subtle navy line */

  /* ✅ (1안) full-width divider line */
  --sectionDividerLine: rgba(15, 23, 42, 0.10); /* very subtle gray line */
}

/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ✅ Avoid any smooth-scroll side effects across navigation */
html{ scroll-behavior: auto; }

/* ✅ Page navigation jank fix: keep scrollbar space stable (prevents layout shift) */
html{
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  color: var(--text);
  background: #f3f5f8;  /* ✅ 순백 제거, 아주 연한 쿨그레이 */
  line-height: 1.6;
}

/* ✅ Non-home pages background (exclude index/index_en) */
body:not([data-page="home"]) {
  background: #1f2937; /* 살짝 밝은 다크 */
}

/* Links */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout helpers */
section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 18px;
}

footer { /* 기본 footer 스타일은 유지해도 됨 */ }

#site-footer{
  text-align: initial;  /* ✅ 전역 center 느낌 제거 */
}

/* Header / Nav */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;          /* ✅ solid white */
  border-bottom: 1px solid var(--line);
}
nav {
  max-width: var(--navMax);
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ===== Header upgrade A: Desktop one-line nav (no wrap) ===== */
@media (min-width: 769px){

  .mnav-brand{ display: none !important; }

  nav{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
    flex-wrap: nowrap;
    padding: 10px 24px;
  }

  .nav-left{
    gap: 8px;
    flex: 0 0 auto;
    min-width: max-content;
    align-self: center;
  }

  .nav-panel{
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  .nav-panel > a,
  .nav-panel > .nav-dd,
  .nav-panel > .nav-dd > summary{
    white-space: nowrap;
    word-break: keep-all;
    flex: 0 0 auto;
  }

  .nav-right{
    margin-left: 0;
    justify-self: end;
    align-items: center;
    align-self: center;
    gap: 8px;
    flex: 0 0 auto;
  }
}

/* Mobile hamburger button */
.nav-toggle{
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}
.nav-toggle:hover{
  background: #ffffff;          /* keep white */
  border-color: rgba(37,99,235,0.22);
}

/* ===== Top-level nav links (Main menu) ===== */
nav a {
  color: #111827;
  font-weight: 650;        /* ✅ 600 → 750 (메인 메뉴 무게감) */
  font-size: 15px;         /* ✅ 메인만 살짝 크게 */
  padding: 9px 12px;       /* ✅ 버튼(캡슐) 느낌 강화 */
  border-radius: 12px;
  letter-spacing: 0.2px;  /* ✅ 미세하게 정돈 */
  transition: color 0.18s ease; /* ✅ hover 세련되게 */
}

/* ✅ (A안) 배경 없음 + 텍스트색만 변화 */
nav a:hover {
  background: transparent;        /* ✅ 배경 제거 */
  color: var(--accent2);          /* ✅ 텍스트만 강조 */
  text-decoration: none;
}

/* ===== Header upgrade B: Active link highlight (Refined) ===== */
nav a.is-active,
nav summary.is-active{
  background: transparent;   /* ✅ 배경 제거 */
  color: var(--accent2);     /* ✅ 네이비 강조 */
  position: relative;
  text-decoration: none;
}

/* ✅ 얇은 하단 라인 */
nav a.is-active::after,
nav summary.is-active::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  background: var(--accent2);
  border-radius: 2px;
}

/* 드롭다운(소제목)에는 active 밑줄 제거 */
.nav-dd-menu a.is-active::after{
  display: none !important;
  content: none !important;
}

/* hover 시에도 동일하게 유지(요란해지지 않게) */
nav a.is-active:hover,
nav summary.is-active:hover{
  background: transparent;
  text-decoration: none;
}

/* Hero */
.hero {
  max-width: none;
  margin: 0;
  padding: 56px 18px;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  color: var(--heroText);
}

/* ✅ Hero height lock (all pages EXCEPT home/index) */
body:not([data-page="home"]) .hero{
  min-height: 320px;
}

@media (max-width: 768px){
  body:not([data-page="home"]) .hero{
    min-height: 200px;
  }
}

.hero > h1 {
  max-width: var(--max);
  margin: 0 auto 12px auto;
  padding: 0 0;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.hero > p {
  max-width: var(--max);
  margin: 10px auto 0 auto;
  color: var(--heroMuted);
  font-size: 16px;
}

/* ✅ Hero text alignment: match the header logo line (ALL pages except home/index) */
body:not([data-page="home"]) .hero > h1,
body:not([data-page="home"]) .hero > p{
  padding-left: 12px;  /* 8~16px에서 취향대로 미세조정 */
}


/* =====================================================
   ✅ Mobile: Non-home hero 줄바꿈 자연화 (index 제외)
   - 모바일에서 p 내의 <br> 강제 줄바꿈을 제거하고 자동 줄바꿈 사용
   - <br><br> 문단 구분은 유지
   ===================================================== */
@media (max-width: 768px){

  body:not([data-page="home"]) .hero > h1{
    line-height: 1.28;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  body:not([data-page="home"]) .hero > p{
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* 강제 <br> 줄바꿈 제거 */
  body:not([data-page="home"]) .hero > p br{
    display: none;
  }

  /* 문단 구분용 <br><br>은 1번만 남김 */
  body:not([data-page="home"]) .hero > p br + br{
    display: block;
    margin-top: 10px;
  }
}

/* =========================================================
   Hero → Body 경계(페이드) 추가
   - 홈(home)은 hero 슬라이더(::before/::after)를 쓰므로 제외
   ========================================================= */
body:not([data-page="home"]) .hero{
  position: relative;
  overflow: hidden;
}

/* 히어로 하단을 본문 배경색(#1f2937)으로 자연스럽게 페이드 */
body:not([data-page="home"]) .hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* 1px 틈 방지 */
  height: 56px;            /* 40~72px 사이 취향 조절 */
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    to bottom,
    rgba(31, 41, 55, 0) 0%,
    rgba(31, 41, 55, 1) 100%
  );
}

/* 히어로 안의 텍스트가 페이드보다 위에 보이도록 */
body:not([data-page="home"]) .hero > *{
  position: relative;
  z-index: 1;
}

/* Headings */
h1, h2, h3 { margin: 0 0 12px 0; }

/* ✅ h2 Upgrade (1안): full-width thin divider + short accent line */
h2 {
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--sectionTitle);
  font-weight: 900;
  margin-bottom: 16px;     /* 섹션 시작 느낌 강화 */
  position: relative;
  padding-bottom: 12px;    /* 라인과 간격 */
}

/* full-width subtle divider */
h2::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sectionDividerLine);
  border-radius: 1px;
}

/* short navy accent line on top of divider */
h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;                  /* 짧은 라인(포인트) */
  height: 2px;
  background: var(--sectionTitleLine);
  border-radius: 2px;
}

h3 {
  font-size: 16px;
  color: #111827;
}

/* Content blocks look like cards */
section:not(.hero):not(.cta) {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-top: 18px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* 2x2 / 3-card grids */
.card-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr; /* ✅ 데스크톱 3열 */
}

@media (max-width: 900px){
  .card-grid{ grid-template-columns: repeat(2, 1fr); } /* 태블릿 */
}

@media (max-width: 640px){
  .card-grid{ grid-template-columns: 1fr; } /* 모바일 */
}

/* ✅ Building Automation page only: make the 2-col detail cards stack on mobile */
@media (max-width: 640px){
  body[data-page="business-automation"] .card-grid[style*="grid-template-columns: repeat(2"]{
    grid-template-columns: 1fr !important;
  }
}

/* ✅ Communication page only: force Key Scope grid to 1 column on mobile
   (Overrides inline grid-template-columns in HTML) */
@media (max-width: 640px){
  body[data-page="business-communication"] .card-grid[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}

/* ✅ Fire / Security pages: make the 2-col detail cards stack on mobile */
@media (max-width: 640px){
  body[data-page="business-fire"] .card-grid[style*="grid-template-columns: repeat(2"]{
    grid-template-columns: 1fr !important;
  }

  body[data-page="business-security"] .card-grid[style*="grid-template-columns: repeat(2"]{
    grid-template-columns: 1fr !important;
  }
}

/* ===== Card Title Header Bar (B-Option) ===== */
.card-title,
.philosophy-card h3,
.guide-card h3,
.timeline-block h3 {
  position: relative;
  padding-left: 14px;
  margin-bottom: 12px;
  font-weight: 600;
}

.card-title::before,
.philosophy-card h3::before,
.guide-card h3::before,
.timeline-block h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 4px;
  height: 1.2em;
  background: var(--brand-blue, #1e3a8a); /* 네이비 계열 */
  border-radius: 2px;
}

/* Home quick-link cards (refined background) */
body[data-page="home"] .card-grid > div{
  background: linear-gradient(
    180deg,
    #f8fafc 0%,
    #f1f5f9 100%
  );
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

body[data-page="home"] .card-grid > div::before{
  content:"";
  display:block;
  width:32px;
  height:3px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 12px;
  opacity: 0.6;
}

body[data-page="home"] .card-grid > div:hover{
  background: #ffffff;
  transform: translateY(-4px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
}

body[data-page="home"] .card-grid a{
  font-weight: 700;
}

/* Lists */
ul { margin: 0; padding-left: 18px; }
li { margin: 6px 0; }

/* Timeline blocks */
.timeline-block {
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 12px 0;
  background: #fafafa;
}
.timeline-block h3 {
  margin-bottom: 8px;
}

/* Philosophy cards */
.philosophy-card {
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 12px 0;
  background: #fafafa;
}

/* ✅ split(좌 텍스트 + 우 이미지)에서 좌측 카드 높이를 우측 이미지와 동일하게 */
.split .philosophy-card{
  margin: 0;      /* 기존 12px 0 때문에 높이가 달라 보이던 현상 제거 */
  height: 100%;   /* grid stretch에 확실히 따라가게 */
}

.philosophy-card p { margin: 0; color: #374151; }

/* Mobile */
@media (max-width: 640px) {
  .hero > h1 { font-size: 26px; }
  nav { gap: 8px; }
  nav a { padding: 7px 9px; }

  /* ✅ (1안) 모바일: 포인트 라인만 살짝 짧게 */
  h2::after{ width: 64px; }
}

/* Language switch */
.nav-right {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}
.lang-btn:hover {
  background: #ffffff;                 /* ✅ keep white on hover */
  border-color: rgba(37,99,235,0.25);  /* subtle accent */
  color: var(--accent2);
  text-decoration: none;
}

/* Dropdown (details/summary) */
.nav-dd { position: relative; display: inline-block; }

.nav-dd > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.nav-dd > summary::-webkit-details-marker { display: none; }

.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  display: none;
  z-index: 999;
}

.nav-dd[open] .nav-dd-menu { display: block; }

.nav-dd-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

/* ===== Dropdown group title (Sub menu grouping) ===== */
.nav-dd-menu .nav-group-title{
  margin: 6px 8px 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(17,24,39,0.55);
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* 첫 그룹은 위 구분선이 과하니 제거 */
.nav-dd-menu .nav-group-title:first-child{
  border-top: 0;
  margin-top: 2px;
  padding-top: 6px;
}

/* ✅ 드롭다운 hover: 배경 없이 텍스트 색만 통일 */
.nav-dd-menu a:hover {
  background: transparent;
  color: var(--accent2);
}

/* Make dropdown summary look like nav links */
nav .nav-dd > summary{
  color: #111827;
  font-weight: 650;      /* ✅ 600 → 750 (메인 메뉴와 동일) */
  font-size: 15px;       /* ✅ 추가: 메인 메뉴와 동일 */
  padding: 9px 12px;     /* ✅ 메인 메뉴와 동일 */
  border-radius: 12px;   /* ✅ 메인 메뉴와 동일 */
  display: inline-block;
  letter-spacing: 0.2px;
  transition: color 0.18s ease; /* ✅ hover 세련되게 */
}

/* ✅ (A안) 드롭다운 summary도 배경 제거 + 색상만 변화 */
nav .nav-dd > summary:hover{
  background: transparent;        /* ✅ 배경 제거 */
  color: var(--accent2);          /* ✅ 텍스트만 강조 */
}
nav .nav-dd > summary:focus{
  outline: none;
}

/* =========================
   PC ONLY: Main vs Sub menu hierarchy
   ========================= */
@media (min-width: 769px){

  /* (A) 메인 메뉴(상위): 균형형 간격으로 재조정 */
  nav a,
  nav .nav-dd > summary{
    font-weight: 700;
    font-size: 14px;
    padding: 8px 10px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    line-height: 1.15;
    transition: color 0.18s ease; /* ✅ 통일 */
  }

  /* (B) 세부 메뉴(드롭다운 안): 확실히 가볍고 작게 */
  .nav-dd-menu a{
    font-weight: 550;
    font-size: 14px;
    padding: 10px 12px 10px 16px; /* 왼쪽 들여쓰기 살짝 */
    border-radius: 10px;
    min-height: 0;
    display: block;
  }

  .nav-right .gw-btn{
    min-width: 106px;
    padding: 7px 14px;
  }

  .lang-btn{
    min-width: 52px;
    text-align: center;
  }
}

/* ===== Desktop: dropdown shows on hover (JS also toggles open) ===== */
@media (min-width: 769px) {
  /* 기본 숨김 */
  .nav-dd .nav-dd-menu {
    display: none;
    pointer-events: auto;   /* ✅ 클릭 가능 */
    z-index: 99999;         /* ✅ 덮임 방지 */
  }

  /* hover 또는 open(=JS가 켜줌)일 때 표시 */
  .nav-dd:hover .nav-dd-menu,
  .nav-dd[open] .nav-dd-menu {
    display: block;
  }
}

/* =================================================
   FINAL MOBILE HEADER & MENU (<= 768px)
   - 기본: 언어(EN/KR) + 햄버거만 표시
   - 열림: 언어 버튼도 유지 (언제든 언어 전환 가능)
   ================================================= */

@media (max-width: 768px) {

  /* ✅ Mobile top buttons: 햄버거(토글) + 언어버튼 디자인 완전 통일 */
  .nav-toggle,
  nav .nav-right a.lang-btn {
    height: 38px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .nav-toggle:hover,
  nav .nav-right a.lang-btn:hover {
    background: #ffffff;          /* ✅ keep white */
    border-color: rgba(37,99,235,0.22);
    text-decoration: none;
  }

  header { position: sticky; top: 0; z-index: 1000; }

  /* 상단 nav: 좌(로고) / 우(버튼) */
  nav{
    max-width: none;
    margin: 0;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between; /* ✅ 핵심: flex-end → space-between */
    align-items: flex-end;
    gap: 10px;
    position: relative;
    z-index: 1000;
    background: #ffffff;
  }

  /* 로고는 왼쪽 고정, 오른쪽 버튼은 끝으로 */
  .nav-left{ flex: 0 0 auto; }
  .nav-right{ margin-left: auto; }

  /* ✅ 메뉴 패널 기본 상태(닫힘): 애니메이션 가능하도록 display 토글 제거 */
  .nav-panel{
    display: flex;                 /* ← display:none 제거 */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    /* 기존 absolute 패널이므로 공간 차지 없음 */
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: auto;

    width: min(86vw, 300px); /* A안: 모바일 메뉴 패널 폭 축소 */
    padding: 10px 10px 12px;
    gap: 8px;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.14);
    z-index: 9999;

    /* ✅ 닫힘 상태: 보이지 않게 + 클릭 불가 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* ✅ 모션: 오른쪽에서 살짝 들어오며 페이드 */
    transform: translateX(14px);
    transition:
      transform 0.22s ease,
      opacity 0.22s ease,
      visibility 0s linear 0.22s; /* 닫힐 때만 늦게 숨김 */
  }

  /* ✅ 열림 상태 */
  nav.open .nav-panel{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
    transition:
      transform 0.22s ease,
      opacity 0.22s ease,
      visibility 0s;  /* 열릴 땐 즉시 보이게 */
  }

  nav.open .nav-panel a,
  nav.open .nav-panel details{
    display: block;
    width: 100%;
  }

  /* 상단 버튼(언어 + 햄버거)만 표시 */
  .nav-right { display: flex !important; gap: 8px; margin-left: 0; }
  .nav-toggle { display: inline-flex !important; }

  /* 드롭다운(details) 계층 스타일 */
  .nav-dd { width: 100%; }

  .nav-dd > summary{
    display: block;
    width: 100%;
    font-weight: 800;          /* 상위 메뉴 더 굵게 */
    font-size: 1.05rem;        /* 상위 메뉴 더 크게 */
    padding: 12px 10px;
    cursor: pointer;
  }

  /* 하위 메뉴는 오버레이 안에서 "일반 리스트"로 */
  .nav-dd-menu{
    position: static;
    min-width: auto;
    box-shadow: none;
    padding: 6px 0 0 0;
    display: block;            /* details 열림/닫힘은 브라우저가 처리 */
  }

  /* ✅ Mobile: hide dropdown group titles to keep menu short */
  .nav-dd-menu .nav-group-title{
    display: none;
  }

  /* ✅ Mobile only: 사업분야(드롭다운) 안의 설치실적/면허·인증만 숨김 (href가 달라도 잡힘) */
  @media (max-width: 768px){
    nav.open .nav-dd--business .nav-dd-menu a[href*="project"],
    nav.open .nav-dd--business .nav-dd-menu a[href*="certification"]{
      display: none !important;
    }
  }

  .nav-dd-menu a{
    font-size: 0.95rem;        /* 하위 메뉴는 약간 작게 */
    font-weight: 600;
    padding: 10px 10px 10px 28px; /* 들여쓰기 */
    opacity: 0.95;
    border-radius: 10px;
  }

  /* ✅ Mobile 드롭다운 hover도 배경 제거 + 텍스트만 */
  .nav-dd-menu a:hover{
    background: transparent;
    color: var(--accent2);
  }

  /* (C1) panel padding/spacing refined */
  nav.open .nav-panel{
    padding: 10px 10px 12px;
    gap: 8px;
  }

  /* (C2) Brand header block (injected by JS) */
  nav.open .nav-panel .mnav-brand{
    padding: 12px 12px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 6px;
  }
  nav.open .nav-panel .mnav-brand .mnav-brand-title{
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #0b1220;
    line-height: 1.1;
    font-size: 16px;
  }
  nav.open .nav-panel .mnav-brand .mnav-brand-sub{
    margin-top: 6px;
    font-size: 12.5px;
    color: rgba(17,24,39,0.68);
    line-height: 1.35;
  }
  nav.open .nav-panel .mnav-brand .mnav-divider{
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin-top: 10px;
    border-radius: 1px;
  }

  /* (C3) Top-level items become "section headers" */
  nav.open .nav-panel > a,
  nav.open .nav-panel > details{
    position: relative;
    border-radius: 12px;
  }

  /* ✅ FIX: 하위 메뉴(드롭다운 안 a)에는 세로 바가 나오면 안 됨 */
  nav.open .nav-panel .nav-dd-menu a::before{
    display: none !important;
    content: none !important;
  }

  /* top-level link look */
  nav.open .nav-panel > a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px 10px 20px; /* ✅ spacing tightened */
    font-weight: 900;
    font-size: 1.02rem;
    color: #0b1220;
    background: #ffffff;
  }
  nav.open .nav-panel > a:hover{
    background: rgba(15,23,42,0.04);
    text-decoration: none;
  }

  /* top-level dropdown summary look */
  nav.open .nav-panel > details > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px 10px 20px; /* ✅ spacing tightened */
    font-weight: 900;
    font-size: 1.02rem;
    color: #0b1220;
    border-radius: 12px;
  }

  /* ✅ Mobile overlay: right-side indicators
     - links: › (static)
     - dropdowns: ▸ rotates when open
  */
  nav.open .nav-panel > a::after{
    content: "›";
    opacity: 0.55;
    font-weight: 900;
  }

  nav.open .nav-panel > details > summary::after{
    content: "▸";
    opacity: 0.55;
    font-weight: 900;
    transition: transform 0.2s ease;
  }

  /* open state: rotate */
  nav.open .nav-panel > details[open] > summary::after{
    transform: rotate(90deg);
  }

  /* ✅ Align text and chevron vertically (fix baseline mismatch) */
  nav.open .nav-panel > a,
  nav.open .nav-panel > details > summary{
    line-height: 1.2;          /* prevent inherited 1.6 from body */
    min-height: 44px;          /* stable touch target & vertical centering */
  }

  nav.open .nav-panel > a::after,
  nav.open .nav-panel > details > summary::after{
    line-height: 1;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
  }

  /* (C4) Sub menu links: cleaner list */
  nav.open .nav-panel .nav-dd-menu a{
    padding: 10px 10px 10px 30px; /* indent stays */
    font-weight: 650;
    color: rgba(11,18,32,0.92);
    background: transparent;
  }

  /* ✅ Mobile 오버레이 드롭다운 hover도 배경 제거 + 텍스트만 */
  nav.open .nav-panel .nav-dd-menu a:hover{
    background: transparent;
    color: var(--accent2);
    text-decoration: none;
  }

  /* =========================================================
     ✅ Mobile Active UI (Color only)
     - 모바일 오버레이에서는 밑줄/배경/세로바 전부 제거
     - 글자색만 네이비로 표시
     ========================================================= */

  nav.open .nav-panel > a.is-active,
  nav.open .nav-panel > details > summary.is-active,
  nav.open .nav-panel .nav-dd-menu a.is-active{
    color: var(--accent2) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  /* ✅ Mobile: active 상태에서도 오른쪽 표시 유지 + PC용 밑줄 효과 무력화 */
  nav.open .nav-panel > a.is-active::after{
    content: "›";
    position: static;
    width: auto;
    height: auto;
    background: none;
    opacity: 0.55;
    border-radius: 0;

    line-height: 1;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
  }

  /* dropdown summary는 기존 ▸ 표시를 그대로 쓰고(열리면 회전), PC용 밑줄만 무력화 */
  nav.open .nav-panel > details > summary.is-active::after{
    position: static;
    width: auto;
    height: auto;
    background: none;
    opacity: 0.55;
    border-radius: 0;

    line-height: 1;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
  }

  /* ✅ Mobile: active 세로바(::before)도 강제로 끔 */
  nav.open .nav-panel > a.is-active::before,
  nav.open .nav-panel > details > summary.is-active::before,
  nav.open .nav-panel .nav-dd-menu a.is-active::before{
    display: none !important;
    content: none !important;
  }

  /* (C6) Contact link: quiet CTA (text-link style) */
  nav.open .nav-panel a[href*="contact"]{
    margin-top: 6px;
    padding-top: 14px;
    position: relative;
  }
  nav.open .nav-panel a[href*="contact"]::after{
    content: "›"; /* chevron */
    opacity: 0.85;
  }
  nav.open .nav-panel a[href*="contact"]{
    border-top: 1px solid rgba(0,0,0,0.10);
    border-radius: 0 0 12px 12px;
  }

  /* (선택) 접근성: 모션 줄이기 설정 대응 */
  @media (prefers-reduced-motion: reduce){
    @media (max-width: 768px){
      .nav-panel{
        transition: none !important;
        transform: none !important;
      }
    }
  }
}

/* ✅ Mobile: active 밑줄(PC용 ::after) 완전 차단 → 잔상 방지 */
@media (max-width: 768px){
  /* 모바일에서는 PC용 active 밑줄을 사용하지 않음(오버레이 chevron과 충돌 방지) */
  nav a.is-active::after,
  nav summary.is-active::after{
    content: none !important;
    background: none !important;
    height: 0 !important;
  }
}

/* Logo in header */
.nav-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-logo img{
  height:34px;     /* 필요하면 30~40 사이로 조정 */
  width:auto;
  display:block;
}

/* ===== Logo capsule refinement (Option B) ===== */
.site-logo{
  padding: 6px 6px !important;   /* 좌측 여백 축소 */
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
}

.site-logo:hover{
  background: rgba(255,255,255,0.92); /* ✅ keep white (no grey flash) */
}

/* ===== Global spacing: ensure breathing room before footer ===== */
main { display: block; }

body > section:last-of-type{
  margin-bottom: 18px; /* 혹시 body 직속 section 구조일 경우 보완 */
}

/* 공통 패턴: 마지막 콘텐츠 섹션(카드)과 푸터 사이 여백 확보 */
section:not(.hero){
  margin-bottom: 0;
}

section:not(.hero):last-of-type{
  margin-bottom: 22px; /* ✅ 핵심: 푸터와 살짝 분리 */
}

/* ===== Footer (final compact + icon version) ===== */
#site-footer{
  margin-top: 22px;
  padding: 34px 18px 24px;
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(37,99,235,0.12), transparent 60%),
    linear-gradient(180deg, #0c1a33 0%, #0a1630 100%);
  color: rgba(255,255,255,0.78);
  border-top: 1px solid rgba(255,255,255,0.10);
}

#site-footer .footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 22px;
  align-items: start;
}

#site-footer .footer-left,
#site-footer .footer-right{
  min-width: 0;
}

#site-footer .footer-brand{
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  font-size: 20px;
  line-height: 1.15;
}

#site-footer .footer-note{
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.58;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
}

#site-footer .footer-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

#site-footer .footer-contact{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

#site-footer .footer-contact-icon{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  line-height: 1;
}

#site-footer .footer-contact a,
#site-footer .footer-contact span{
  color: rgba(255,255,255,0.94);
  text-decoration: none;
  word-break: break-all;
}

#site-footer .footer-contact a:hover{
  color: #ffffff;
  text-decoration: underline;
}

#site-footer .footer-mini-links{
  max-width: var(--max);
  margin: 18px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

#site-footer .footer-mini-links a{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.74);
  text-decoration: none;
}

#site-footer .footer-mini-links a:hover{
  color: #ffffff;
  text-decoration: underline;
}

#site-footer .footer-bottom{
  max-width: var(--max);
  margin: 14px auto 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,0.54);
}

/* Mobile */
@media (max-width: 760px){
  #site-footer{
    padding: 20px 14px 16px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }

  #site-footer .footer-inner{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #site-footer .footer-brand{
    font-size: 21px;
    letter-spacing: 0.1px;
  }

  #site-footer .footer-note{
    margin-top: 5px;
    font-size: 12.8px;
    line-height: 1.5;
  }

  #site-footer .footer-right{
    align-items: stretch;
    gap: 7px;
  }

  #site-footer .footer-contact{
    justify-content: flex-start;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(4px);
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  #site-footer .footer-contact-icon{
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  #site-footer .footer-mini-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
  }

  #site-footer .footer-mini-links a{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 11px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    text-align: center;
    font-size: 12.5px;
    line-height: 1.15;
  }

  #site-footer .footer-bottom{
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    font-size: 11.5px;
  }
}

/* ===== Page-specific hero backgrounds (images) ===== */

body[data-page="home"] .hero-home-inner{
  max-width: 920px;
  padding: 0 18px;
}

body[data-page="home"] .hero.hero-home h1{
  font-size: 48px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);

  word-break: keep-all;   /* ← 추가 */
  overflow-wrap: normal;  /* ← 추가 */

}

body[data-page="home"] .hero.hero-home p{
  font-size: 18px;
  margin: 0;
  opacity: 0.92;
}

body[data-page="home"] .hero-badge{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

@media (max-width: 768px){
  body[data-page="home"] .hero.hero-home{ 
    min-height: 72vh; 
  }

  body[data-page="home"] .hero.hero-home h1{ 
    font-size: 34px;
    line-height: 1.32;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  body[data-page="home"] .hero.hero-home p{ 
    font-size: 16px; 
  }
}

/* Home hero – compact & impactful */
body[data-page="home"] .hero{
  padding: 72px 18px;   /* 기존보다 여백 조금 증가 */
}

body[data-page="home"] .hero h1{
  font-size: 38px;
  max-width: 720px;
}

body[data-page="home"] .hero p{
  font-size: 18px;
  margin-top: 12px;
}

/* COMPANY (company) */
body[data-page="company"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-company.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* HISTORY (history) */
body[data-page="history"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-history.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ORGANIZATION (organization) */
body[data-page="organization"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-organization.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* VISION (vision) */
body[data-page="vision"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-vision.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* BUSINESS - Building Automation (business-automation) */
body[data-page="business-automation"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-business-automation.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* BUSINESS - Fire & Life Safety (business-fire) */
body[data-page="business-fire"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-business-fire.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* BUSINESS - Security System (business-security) */
body[data-page="business-security"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-business-security.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* BUSINESS - Communication System (business-communication) */
body[data-page="business-communication"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-business-communication.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* OVERSEAS (overseas) */
body[data-page="overseas"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-overseas.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* OVERSEAS - Bangladesh */
body[data-page="overseas-bangladesh"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-overseas-bangladesh.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* OVERSEAS - India */
body[data-page="overseas-india"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-overseas-india.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* OVERSEAS - Vietnam */
body[data-page="overseas-vietnam"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-overseas-vietnam.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* PROJECTS (projects) */
body[data-page="projects"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-projects.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



/* FEATURED (featured) */
body[data-page="featured"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-featured.jpg'); /* ✅ Featured 전용 히어로 이미지 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* LOCATION (location) */
body[data-page="location"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-location.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CERTIFICATION (certification) */
body[data-page="certification"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-certification.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CONTACT (contact) */
body[data-page="contact"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-contact.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   ✅ Split sections (text + image) — UPDATED (Organization image optimized)
   - prevent forced tall columns (removes top/bottom blank space)
   - remove outer frame around the organization chart image
   ========================================================= */
.split{
  display: grid;
  grid-template-columns: 1.0fr 1.0fr; /* 좌/우 균형 */
  gap: 18px;
  align-items: start; /* ✅ stretch 제거 → 우측 공란(위/아래) 최소화 */
}

.split-text{
  min-width: 0;
}

.split-media{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start; /* ✅ 이미지 상단 정렬 */
}

.split-media img{
  width: 100%;
  max-width: 760px;     /* ✅ 조직도 가로 폭 확보 */
  max-height: 560px;    /* ✅ 불필요한 위/아래 공란 체감 축소 */
  height: auto;
  object-fit: contain;

  /* ✅ 외곽선/프레임 제거 */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: block;
}

/* Mobile: stack */
@media (max-width: 768px){
  .split{ grid-template-columns: 1fr; }
  .split-media{ justify-content: flex-start; }
  .split-media img{
    max-width: 100%;
    max-height: none;
  }
}

/* =========================================================
   ✅ Business / Overseas pages: Overview image normalization
   - Fixed visual size across pages (16:9)
   - Vertical centering (equal top/bottom space when text is taller)
   - Rounded corners consistent with other cards
   ========================================================= */
body[data-page="business-automation"] .split,
body[data-page="business-fire"] .split,
body[data-page="business-security"] .split,
body[data-page="business-communication"] .split,
body[data-page="overseas"] .split,
  body[data-page="overseas-bangladesh"] .split,
  body[data-page="overseas-india"] .split,
  body[data-page="overseas-vietnam"] .split{
  align-items: stretch;          /* ✅ allow vertical centering in the row */
}

body[data-page="business-automation"] .split-media,
body[data-page="business-fire"] .split-media,
body[data-page="business-security"] .split-media,
body[data-page="business-communication"] .split-media,
body[data-page="overseas"] .split-media,
  body[data-page="overseas-bangladesh"] .split-media,
  body[data-page="overseas-india"] .split-media,
  body[data-page="overseas-vietnam"] .split-media{
  justify-content: flex-end;     /* keep current right alignment */
  align-items: center;           /* ✅ vertical center */
}

body[data-page="business-automation"] .split-media img,
body[data-page="business-fire"] .split-media img,
body[data-page="business-security"] .split-media img,
body[data-page="business-communication"] .split-media img,
body[data-page="overseas"] .split-media img,
  body[data-page="overseas-bangladesh"] .split-media img,
  body[data-page="overseas-india"] .split-media img,
  body[data-page="overseas-vietnam"] .split-media img{
  width: 100%;
  max-width: 560px;              /* ✅ fixed max width (tune 520~620 if needed) */
  max-height: none;              /* override global max-height */
  aspect-ratio: 16 / 9;          /* ✅ consistent visual height */
  height: auto;
  object-fit: cover;             /* fill neatly */

  border-radius: 14px;           /* ✅ match inner cards (philosophy-card etc.) */
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  overflow: hidden;
  display: block;
}

@media (max-width: 768px){
  body[data-page="business-automation"] .split-media,
  body[data-page="business-fire"] .split-media,
  body[data-page="business-security"] .split-media,
  body[data-page="business-communication"] .split-media,
  body[data-page="overseas"] .split-media,
  body[data-page="overseas-bangladesh"] .split-media,
  body[data-page="overseas-india"] .split-media,
  body[data-page="overseas-vietnam"] .split-media{
    justify-content: flex-start; /* mobile: align with text */
  }

  body[data-page="business-automation"] .split-media img,
  body[data-page="business-fire"] .split-media img,
  body[data-page="business-security"] .split-media img,
  body[data-page="business-communication"] .split-media img,
  body[data-page="overseas"] .split-media img,
  body[data-page="overseas-bangladesh"] .split-media img,
  body[data-page="overseas-india"] .split-media img,
  body[data-page="overseas-vietnam"] .split-media img{
    max-width: 100%;
  }
}


/* =========================================================
   ✅ Company page: make right media match left card
   - Greeting photo / Principles SVG / Workflow SVG
   - Same height, same rounded corner, same border
   ========================================================= */
body[data-page="company"] .split{
  align-items: stretch;           /* ✅ 좌/우 동일 높이 */
}

body[data-page="company"] .split-media{
  justify-content: flex-end;
  align-items: stretch;           /* ✅ 이미지가 컬럼 높이를 채움 */
}

/* 공통: 오른쪽 이미지를 "카드"로 */
body[data-page="company"] .split-media img{
  width: 100%;
  max-width: none;                /* ✅ 왼쪽 박스와 동일하게 컬럼 폭 채움 */
  max-height: none;               /* ✅ 높이 제한 제거 */
  height: 100%;                   /* ✅ 왼쪽 카드 높이에 맞춤 */
  min-height: 260px;              /* ✅ 너무 낮게 찌그러지는 경우 방지(필요시 220~320) */
  display: block;

  border-radius: 14px;            /* ✅ 왼쪽 philosophy-card와 동일 */
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);

  object-fit: cover;              /* ✅ CEO 사진은 꽉 차게 */
}

/* SVG(수행원칙/업무수행방식)는 contain + 여백 */
body[data-page="company"] .split-media img[src$=".svg"]{
  object-fit: contain;
  padding: 0;                  /* ✅ 카드 내부 여백 */
}

/* 모바일: 자연스럽게 높이 자동 */
@media (max-width: 768px){
  body[data-page="company"] .split-media{
    justify-content: flex-start;
  }
  body[data-page="company"] .split-media img{
    height: auto;
    min-height: 0;
  }
  body[data-page="company"] .split-media img[src$=".svg"]{
    padding: 14px;
  }
}

/* ===== Timeline 2-column layout ===== */
.timeline-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: start;
}

.timeline-side-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafafa;
  padding: 14px;
}

.timeline-side-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 10px;
  display: block;
}

/* Mobile: stack */
@media (max-width: 768px){
  .timeline-grid{ grid-template-columns: 1fr; }
  .timeline-side-card img{ height: 200px; }
}

/* ===== Projects list (year + title) ===== */
.project-list{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0 0;
}
.project-list li{
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.project-list .year{
  min-width: 86px;
  font-weight: 800;
  color: #111827;
}
.project-list .dot{ opacity: 0.6; }
.project-sub{ margin-top: 18px; }
.project-sublist{ margin-top: 6px; }

/* =========================
   Certification (Partners + Certificates)
   ========================= */

/* ===== Contact: Inquiry guide ===== */
.guide-card{
  margin-top: 12px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fafafa;
}

.guide-list{
  margin: 0;
  padding-left: 18px;
}

.guide-list li{
  margin: 8px 0;
  color: #374151;
}

.guide-note{
  margin: 10px 0 0 0;
  color: #374151;
  font-size: 14px;
}

.section-lead{
  margin: 6px 0 14px 0;
  color: #374151;
}

/* ✅ 여기(바로 아래)에 추가 */
.partner-groups{
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.partner-group{
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fafafa;
}

.partner-title{
  margin: 0 0 6px 0;
}

.partner-desc{
  margin: 0 0 10px 0;
  color: #374151;
  font-size: 14px;
}

/* Partner logo grid (B option: unified upgrade) */
.logo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .logo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 640px){
  .logo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.logo-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  min-height: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.logo-card::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0.28), rgba(37,99,235,0.10));
  opacity: 0.9;
}

.logo-card::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.logo-card:hover{
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.14);
  text-decoration: none;
}

.logo-card img{
  max-height: 28px;
  max-width: 112px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  filter: saturate(0.98) contrast(1.02);
  transition: transform 0.22s ease, filter 0.22s ease, opacity 0.22s ease;
}

.logo-card:hover img{
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.04);
}
/* Certificates grid */
.cert-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .cert-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cert-grid{ grid-template-columns: 1fr; }
}

.cert-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* cert-thumb: 인증서 비율 고정 (세로형 기준) */
.cert-thumb{
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* ❗ cover → contain */
  display: block;
}

.cert-caption{
  display: block;
  margin-top: 8px;
  font-weight: 800;
  color: #111827;
  font-size: 14px;
  text-align: center;
}

/* Note box */
.note-box{
  margin-top: 14px;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafafa;
  color: #374151;
}

/* Modal */
body.modal-open{
  overflow: hidden;
}

.img-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.img-modal.is-open{
  display: block;
}
.img-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.img-modal__panel{
  position: relative;
  width: min(92vw, 980px);
  max-height: 86vh;
  margin: 6vh auto 0 auto;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
.img-modal__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}
.img-modal__title{
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.2px;
}
.img-modal__close{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 900;
  cursor: pointer;
}
.img-modal__close:hover{ background: #f3f4f6; }

.img-modal__body{
  padding: 12px 14px 14px 14px;
  background: #ffffff;
}
.img-modal__body img{
  width: 100%;
  max-height: calc(86vh - 64px);
  object-fit: contain;
  display: block;
}

/* ===== HOME HERO : Crossfade Slider ===== */

body[data-page="home"] .hero.hero-home{
  position: relative;
  overflow: hidden;
  min-height: calc(92svh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Layer A */
body[data-page="home"] .hero.hero-home::before,
body[data-page="home"] .hero.hero-home::after{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.4s ease;
  z-index: 0;
}

body[data-page="home"] .hero.hero-home::before{
  background-image:
    linear-gradient(rgba(15,23,42,0.74), rgba(17,24,39,0.70)),
    var(--hero-bg-a);
  opacity: 1;
}

body[data-page="home"] .hero.hero-home::after{
  background-image:
    linear-gradient(rgba(15,23,42,0.74), rgba(17,24,39,0.70)),
    var(--hero-bg-b);
  opacity: 0;
}

/* when B is active */
body[data-page="home"] .hero.hero-home.show-b::before{ opacity: 0; }
body[data-page="home"] .hero.hero-home.show-b::after{ opacity: 1; }

/* text always on top */
body[data-page="home"] .hero-home-inner{
  position: relative;
  z-index: 1;
}

body[data-page="home"] .hero.hero-home h1,
body[data-page="home"] .hero.hero-home p{
  text-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

/* ===== Highlight Card : Greeting (Base) ===== */
.philosophy-card.highlight {
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid rgba(30, 58, 138, 0.25);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  padding: 28px;
}

.philosophy-card.highlight h3::before {
  background: #1e3a8a; /* 더 진한 네이비 */
}

.philosophy-card.highlight p {
  font-size: 15.5px;
  line-height: 1.75;
}

/* ===== Greeting Card : Letter Paper (B안) =====
   - 종이 질감(미세 라인) + 가장자리 그림자 + 상단 레터헤드 라인
   - 너무 감성적으로 과해지지 않게 "공식 문서" 톤 유지
*/
.philosophy-card.highlight.greeting-card{
  position: relative;
  background: #fffaf2;                       /* 아이보리 종이톤 */
  border: 1px solid rgba(15, 23, 42, 0.18);  /* 과하지 않은 라인 */
  border-radius: 16px;

  /* 종이 + 눌림 느낌 */
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.14),
    inset 0 0 40px rgba(0, 0, 0, 0.03);

  padding: 34px 34px 32px;
  overflow: hidden;
}

/* 종이 결(가로 미세 라인) */
.philosophy-card.highlight.greeting-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.012) 0px,
      rgba(0,0,0,0.012) 1px,
      transparent 1px,
      transparent 5px
    );
  opacity: 0.75;
  pointer-events: none;
}

/* 레터헤드 상단 라인 */
.philosophy-card.highlight.greeting-card::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
  background: #0b2a5b;
  opacity: 0.95;
}

/* 텍스트가 질감 위로 올라오도록 */
.philosophy-card.highlight.greeting-card > *{
  position: relative;
  z-index: 1;
}

/* 제목/본문은 '서신' 톤(세리프) */
.philosophy-card.highlight.greeting-card h3{
  font-family: "Noto Serif KR", Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}

.philosophy-card.highlight.greeting-card p{
  font-family: "Noto Serif KR", Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11, 18, 32, 0.92);
}

/* 서명(대표명) 느낌 강화 */
.philosophy-card.highlight.greeting-card p strong{
  font-family: "Noto Serif KR", Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #0b2a5b;
}

/* 서명 문단은 아래로 */
.split-text.philosophy-card{
  display: flex;
  flex-direction: column;
}

.split-text.philosophy-card p:last-child{
  margin-top: auto;
  text-align: right;
}

/* Mobile tune */
@media (max-width: 768px){
  .philosophy-card.highlight.greeting-card{
    padding: 24px 22px;
  }
  .philosophy-card.highlight.greeting-card p{
    font-size: 15.2px;
    line-height: 1.85;
  }
}
/* 왼쪽 카드(인사말 카드) 내부를 세로 레이아웃으로 */
.split-text.philosophy-card{
  display: flex;
  flex-direction: column;
}

/* 마지막 strong(대표명) 문단을 맨 아래로 */
.split-text.philosophy-card p:last-child{
  margin-top: auto;
}

/* ===== Company Greeting Card Final Upgrade =====
   - 문단형 인사말 구조
   - 줄바꿈 자연화
   - 대표 서명 강조
   - 다른 페이지 영향 없도록 company 페이지에만 적용
*/
body[data-page="company"] .greeting-card{
  background:
    linear-gradient(180deg, #fbf8f2 0%, #f4efe7 100%);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.12),
    inset 0 0 28px rgba(255, 255, 255, 0.35);
}

body[data-page="company"] .greeting-card h3{
  margin-bottom: 18px;
}

body[data-page="company"] .greeting-card p{
  margin: 0 0 18px 0;
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

body[data-page="company"] .greeting-card .ceo-sign{
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 22px;
  text-align: right;
}

body[data-page="company"] .greeting-card .ceo-sign strong{
  display: inline-block;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 42, 91, 0.18);
  font-size: 18px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px){
  body[data-page="company"] .greeting-card{
    padding: 24px 22px;
  }

  body[data-page="company"] .greeting-card p{
    font-size: 15.6px;
    line-height: 1.82;
    margin-bottom: 16px;
  }

  body[data-page="company"] .greeting-card .ceo-sign{
    padding-top: 18px;
  }

  body[data-page="company"] .greeting-card .ceo-sign strong{
    font-size: 17px;
  }
}

/* =========================================================
   Card polish for DARK body background (A안: #1f2937)
   - border: 조금 더 또렷하지만 과하지 않게
   - shadow: 더 깊고 고급스럽게
   - light panels(#fafafa): 톤 정리
   ========================================================= */

/* 1) 메인 콘텐츠 카드(섹션 카드) */
section:not(.hero):not(.cta) {
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* 2) 내부의 연회색 패널들(#fafafa) — 다크 배경에서 더 깨끗하게 */
.timeline-block,
.philosophy-card,
.guide-card,
.partner-group,
.timeline-side-card,
.logo-card,
.note-box {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* 3) 카드 hover (선택이지만 추천: 다크 배경에서 반응이 더 세련됨) */
.timeline-block:hover,
.philosophy-card:hover,
.guide-card:hover,
.partner-group:hover,
.timeline-side-card:hover,
.logo-card:hover,
.cert-card:hover,
.note-box:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* 4) 작은 카드(인증/로고) 테두리도 통일감 있게 */
.cert-card,
.logo-card {
  border-color: rgba(15, 23, 42, 0.12);
}

/* 5) 모바일에서는 hover “뜀”을 약하게(터치 환경) */
@media (max-width: 768px){
  .timeline-block:hover,
  .philosophy-card:hover,
  .guide-card:hover,
  .partner-group:hover,
  .timeline-side-card:hover,
  .logo-card:hover,
  .cert-card:hover,
  .note-box:hover {
    transform: none;
  }
}

/* ===== Page transition (soft) ===== */
html{ background: #1f2937; } /* 다음 페이지 로딩 중 하얀 번쩍임 방지 */

/* ✅ 전환 효과는 제거(클릭/페이지 이동 시 '덜컹' 체감 감소) */
body{
  opacity: 1;
  transition: none;
}

/* ✅ leaving 클래스가 붙어도 투명해지지 않도록 고정 */
body.is-leaving{
  opacity: 1;
}

/* =========================================================
   CONTACT page (A+B): two-column layout + side cards
   ========================================================= */
.contact-grid,
.inquiry-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 12px;
}
@media (max-width: 768px){
  .contact-grid,
  .inquiry-grid{ grid-template-columns: 1fr; }
}
.side-card{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  padding: 14px 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}
.side-card h3{
  position: relative;
  padding-left: 34px;
  margin: 0 0 10px 0;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.2px;
}
.side-card h3::before{
  content: "V";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #b91c1c;
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(185, 28, 28, 0.22);
}
.side-list{ margin: 0; padding-left: 18px; }
.side-list li{ margin: 8px 0; color: #374151; }
.side-note{
  margin: 10px 0 0 0;
  color: #374151;
  font-size: 13.8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.contact-info .guide-card{ margin-top: 12px; }

/* =========================================================
   CONTACT page: fix equal-height alignment inside grids
   - guide-card has margin-top by default, which breaks row alignment
   ========================================================= */
.contact-grid > .guide-card,
.inquiry-grid > .guide-card{
  margin-top: 0 !important;
  height: 100%;
}

/* contact page: avoid extra guide-card top margin rule inside grid */
.contact-info .contact-grid .guide-card{
  margin-top: 0 !important;
}

/* =========================================================
   HISTORY: Featured Projects Timeline (NEW)
   - Alternating layout (text ↔ image)
   - Mobile: stacked
   ========================================================= */

.project-timeline{
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.project-item{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: stretch;

  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

.project-item:nth-child(even){
  grid-template-columns: 0.9fr 1.1fr;
}
.project-item:nth-child(even) .project-text{
  order: 2;
}
.project-item:nth-child(even) .project-media{
  order: 1;
}

.project-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-meta{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.project-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #0b2a5b;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.22);
}

.project-sub{
  font-size: 13px;
  font-weight: 800;
  color: rgba(17, 24, 39, 0.62);
}

.project-title{
  margin: 6px 0 8px 0;
  font-size: 16px;
  color: #111827;
  letter-spacing: -0.2px;
}

.project-points{
  margin: 0;
  padding-left: 18px;
  color: #374151;
}

.project-points li{
  margin: 8px 0;
}

.project-media{
  margin: 0;
  display: flex;
  align-items: stretch;
}

.project-media img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  display: block;
}

/* Mobile: stack */
@media (max-width: 768px){
  .project-item{
    grid-template-columns: 1fr !important;
  }
  .project-item:nth-child(even) .project-text,
  .project-item:nth-child(even) .project-media{
    order: initial;
  }
  .project-media img{
    min-height: 200px;
  }
}

/* ===============================
   Organization Page Optimization
   =============================== */

.split-org{
  grid-template-columns: 0.9fr 1.1fr; /* 조직도 비중 확대 */
  gap: 20px;
  align-items: center; /* 상하 중앙 정렬 */
}

/* 좌측 텍스트 컴팩트화 */
.split-text.compact ul{
  margin: 8px 0 0 0;
}
.split-text.compact li{
  margin: 6px 0;
  font-size: 14.5px;
}

/* 조직도 중앙 정렬 + 최대 확장 */
.center-media{
  justify-content: center;
  align-items: center;
}

.center-media img{
  width: 100%;
  max-width: 980px;  /* 기존보다 확장 */
  max-height: none;  /* 상하 제한 제거 */
  object-fit: contain;
}

/* 모바일 */
@media (max-width: 768px){

  .split-org{
    grid-template-columns: 1fr;
  }

  .center-media img{
    max-width: 100%;
  }

  /* 모바일 로고 크기 조정 */
  .site-logo img{
    height: 26px;
  }

}

/* ===============================
   Organization: Operating Principles grid
   =============================== */
.org-method .philosophy-card{
  margin: 0;       /* grid에서 불필요한 상하 여백 제거 */
  height: 100%;    /* 카드 높이 균일 */
}

/* ===== Mobile Menu Brand Upgrade ===== */
.mnav-brand{
  padding: 20px 18px 14px;
}

.mnav-brand-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #111;
}

.mnav-brand-title .corp{
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.7;
}

.mnav-brand-sub{
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  letter-spacing: 0.3px;
}

.mnav-divider{
  margin-top: 14px;
  height: 1px;
  background: linear-gradient(to right, #ddd, #f5f5f5);
}

/* =========================================================
   HISTORY Timeline: 4-stage + section background (v11)
   - Timeline 섹션만 배경을 깔아 '빈 공간'을 디자인으로 처리
   - 대표 수행 프로젝트 등 다른 섹션에는 영향 없음
   ========================================================= */

.timeline-section{
  position: relative;
  border-radius: 18px;
  padding: 22px 18px;
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(900px 260px at 85% 100%, rgba(37, 99, 235, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.035), rgba(15, 23, 42, 0.015));
  border: 1px solid rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

.timeline-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(15, 23, 42, 0.025) 0px, rgba(15, 23, 42, 0.025) 1px, transparent 1px, transparent 14px);
  opacity: .35;
  pointer-events:none;
}

.timeline-section > *{
  position: relative;
  z-index: 1;
}

/* 카드(박스) 크기는 건드리지 않고, 화이트 → 아주 옅은 틴트 */
.timeline-section .timeline-block{
  background: linear-gradient(180deg, #ffffff 0%, #f1f6ff 100%);
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: 0 10px 22px rgba(15, 27, 45, 0.07);
}

/* 화살표(A안): ‘연결선 + 큰 화살표’로 PC에서도 확실히 보이게 */
.timeline-section .timeline-arrow{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 12px 0 16px;
  opacity: 1;
}

/* 화살표 사이 ‘세로 연결선’ 보강 */
.timeline-section .timeline-arrow::before{
  content:"";
  position:absolute;
  top:-10px;
  bottom:-10px;
  left:50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0.35) 50%, rgba(37,99,235,0.10) 100%);
  border-radius: 999px;
}

.timeline-section .timeline-arrow svg{
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 18px rgba(15,27,45,0.10);
  color: rgba(11, 42, 91, 0.95);
}

.timeline-section .timeline-arrow svg path{
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* =========================================================
   HISTORY Timeline A+ (v13)
   - "허전함" 개선: 데스크톱에서 bullet을 2열로 배치해 가로 폭을 활용
   - Timeline 섹션의 빈 공간은 배경 패턴/톤으로 자연스럽게 채움
   - 연결(원/화살표) 가시성 강화
   ========================================================= */

.timeline-section{
  /* 기존 v11/v12 배경보다 살짝 더 존재감 있게 */
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(37, 99, 235, 0.12), transparent 62%),
    radial-gradient(900px 320px at 88% 100%, rgba(37, 99, 235, 0.10), transparent 64%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.055), rgba(15, 23, 42, 0.020));
  border-color: rgba(37, 99, 235, 0.16);
}

.timeline-section::before{
  opacity: .42;
}

/* 카드(박스)는 크기(폭) 유지 + 내부 밀도만 약간 올리기 */
.timeline-section .timeline-block{
  background:
    linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
  border-color: rgba(37, 99, 235, 0.20);
  box-shadow: 0 12px 26px rgba(15, 27, 45, 0.08);
}

/* ✅ 데스크톱: bullet을 2열로 (허전함 해소) */
@media (min-width: 900px){
  .timeline-section .timeline-block ul{
    columns: 2;
    column-gap: 44px;
  }
  .timeline-section .timeline-block li{
    break-inside: avoid;
  }
}

/* 간격(화살표/원 포함) 살짝 컴팩트하게 */
.timeline-section .timeline-block{
  margin: 10px 0;
}
.timeline-section .timeline-arrow{
  margin: 10px 0 14px;
}

/* 연결선 + 원(또는 화살표 원형) 가시성 강화 */
.timeline-section .timeline-arrow::before{
  width: 3px;
  background: linear-gradient(180deg,
    rgba(37,99,235,0.10) 0%,
    rgba(37,99,235,0.42) 50%,
    rgba(37,99,235,0.12) 100%
  );
}

.timeline-section .timeline-arrow svg{
  width: 40px;
  height: 40px;
  padding: 12px;
  border: 2px solid rgba(37, 99, 235, 0.34);
  box-shadow: 0 12px 22px rgba(15,27,45,0.12);
}

.timeline-section .timeline-arrow svg path{
  stroke-width: 5.2;
}



/* Timeline 헤더(연도 + 단계명) 한 줄/두 줄 자연스러운 줄바꿈 */
.timeline-section .timeline-block h3{
  margin-bottom: 10px;
  white-space: normal;
  line-height: 1.25;
}

/* ============================= */
/*   Timeline (History page)     */
/* ============================= */
.timeline-section{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

/* subtle pattern/gradient only for Timeline section background */
.timeline-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(17, 68, 153, 0.06), transparent 55%),
    radial-gradient(900px 500px at 85% 55%, rgba(17, 68, 153, 0.05), transparent 60%),
    repeating-linear-gradient(135deg, rgba(17, 68, 153, 0.03) 0px, rgba(17, 68, 153, 0.03) 2px, transparent 2px, transparent 14px);
  pointer-events:none;
}

.timeline-section > *{
  position: relative;
  z-index: 1;
}

/* Timeline cards: stronger but still premium */
.timeline-section .timeline-block{
  background: linear-gradient(180deg, rgba(240, 247, 255, 0.92), rgba(235, 244, 255, 0.92));
  border: 1px solid rgba(17, 68, 153, 0.22);
  box-shadow: 0 10px 28px rgba(15, 27, 45, 0.10);
}

/* Stage accent (optional stronger tint per stage) */
.timeline-section .timeline-block.stage-1{ background: linear-gradient(180deg, rgba(242, 249, 255, 0.95), rgba(235, 244, 255, 0.95)); }
.timeline-section .timeline-block.stage-2{ background: linear-gradient(180deg, rgba(242, 250, 255, 0.92), rgba(233, 244, 255, 0.92)); }
.timeline-section .timeline-block.stage-3{ background: linear-gradient(180deg, rgba(240, 248, 255, 0.90), rgba(231, 242, 255, 0.90)); }
.timeline-section .timeline-block.stage-4{ background: linear-gradient(180deg, rgba(238, 247, 255, 0.90), rgba(229, 241, 255, 0.90)); }

/* H3 split: year | title */
.timeline-section .timeline-block h3{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.timeline-section .timeline-block h3 .tl-year{
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #0f1b2d;
  white-space: nowrap;
}

.timeline-section .timeline-block h3 .tl-sep{
  color: rgba(15, 27, 45, 0.35);
  font-weight: 700;
}

.timeline-section .timeline-block h3 .tl-title{
  font-weight: 800;
  color: #0f1b2d;
}

/* Arrow circle / icon: make sure it is visible on PC */
.timeline-section .timeline-arrow{
  color: #0f1b2d;
}

.timeline-section .timeline-arrow svg{
  width: 26px;
  height: 26px;
}

/* On small screens, stack h3 nicely */
@media (max-width: 768px){
  .timeline-section .timeline-block h3{
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* =========================================================
   PROJECTS page - Final B Option
   ========================================================= */
body[data-page="projects"] .project-category-grid,
body[data-page="projects"] .project-country-grid{
  display:grid;
  grid-template-columns: 1fr; /* ✅ PC에서도 1×3(세로형) */
  gap:18px;
  margin-top: 14px;
}

body[data-page="projects"] .project-category-card,
body[data-page="projects"] .project-country-card{
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  padding: 18px 18px 16px;
  height: 100%;
}

body[data-page="projects"] .project-category-card h3,
body[data-page="projects"] .project-country-card h3{
  margin-bottom: 8px;
}

body[data-page="projects"] .project-category-desc{
  margin: 0 0 12px 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="projects"] .project-country-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 4px;
}

body[data-page="projects"] .project-country-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
  color: #0b2a5b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="projects"] .project-list.compact li{
  padding: 7px 0;
  font-size: 14px;
}

body[data-page="projects"] .project-list.compact .year{
  min-width: 88px;
}

body[data-page="projects"] .project-fold{
  margin-top: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

body[data-page="projects"] .project-fold summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 900;
  color: #0f1b2d;
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

body[data-page="projects"] .project-fold summary::-webkit-details-marker{
  display:none;
}

body[data-page="projects"] .project-fold summary::after{
  content: "+";
  position:absolute;
  right:18px;
  top:50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: #1d4ed8;
}

body[data-page="projects"] .project-fold[open] summary::after{
  content: "−";
}

body[data-page="projects"] .project-fold-body{
  padding: 0 18px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

body[data-page="projects"] .project-sublist-columns{
  margin-top: 14px;
  columns: 2;
  column-gap: 30px;
}

body[data-page="projects"] .project-sublist-columns li{
  break-inside: avoid;
  margin: 0 0 8px 0;
  color: #374151;
}

@media (max-width: 768px){
  body[data-page="projects"] .project-category-grid,
  body[data-page="projects"] .project-country-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="projects"] .project-sublist-columns{
    columns: 1;
  }

  body[data-page="projects"] .project-list.compact li{
    font-size: 13.5px;
  }

  body[data-page="projects"] .project-fold summary{
    padding: 14px 16px;
  }

  body[data-page="projects"] .project-fold-body{
    padding: 0 16px 16px;
  }
}


/* =========================================================
   Organization page final tune-up
   - shorter left content
   - same visual media width for chart and vision image
   - philosophy cards 3x1 on PC
   ========================================================= */
body[data-page="organization"] .split-org,
body[data-page="organization"] .split-vision-org{
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

body[data-page="organization"] .org-text-block{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[data-page="organization"] .org-lead{
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 14.5px;
  line-height: 1.65;
}

body[data-page="organization"] .org-key-list{
  margin: 0;
  padding-left: 18px;
}

body[data-page="organization"] .org-key-list li{
  margin: 6px 0;
  font-size: 14.5px;
  line-height: 1.55;
}

body[data-page="organization"] .org-chart-media,
body[data-page="organization"] .org-vision-media{
  justify-content: center;
  align-items: center;
}

body[data-page="organization"] .org-chart-media img,
body[data-page="organization"] .org-vision-media img{
  width: 100%;
  max-width: 560px;
  display: block;
}

body[data-page="organization"] .org-chart-media img{
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="organization"] .org-vision-media img{
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  overflow: hidden;
}

body[data-page="organization"] .philosophy-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  body[data-page="organization"] .philosophy-grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  body[data-page="organization"] .split-org,
  body[data-page="organization"] .split-vision-org{
    grid-template-columns: 1fr;
    align-items: start;
  }

  body[data-page="organization"] .org-chart-media,
  body[data-page="organization"] .org-vision-media{
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  body[data-page="organization"] .philosophy-grid-3{
    grid-template-columns: 1fr;
  }

  body[data-page="organization"] .org-chart-media img,
  body[data-page="organization"] .org-vision-media img{
    max-width: 100%;
  }
}
/* =========================================================
   FINAL FIX — Business Automation / HVAC
   - prevent recurring regressions by scoping page-specific rules
   ========================================================= */

/* Building Automation: keep 5 partner logos on a single row on desktop */
body[data-page="business-automation"] .logo-grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px){
  body[data-page="business-automation"] .logo-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body[data-page="business-automation"] .logo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fire: keep 5 partner logos on a single row on desktop without affecting other pages */
body[data-page="business-fire"] .logo-grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px){
  body[data-page="business-fire"] .logo-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body[data-page="business-fire"] .logo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Security: 3 logos with Hanwha Vision */
body[data-page="business-security"] .logo-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
}

body[data-page="business-security"] .logo-card{
  height: 78px;
}

body[data-page="business-security"] .logo-card img{
  max-width: 126px;
}

@media (max-width: 900px){
  body[data-page="business-security"] .logo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 640px){
  body[data-page="business-security"] .logo-grid{
    grid-template-columns: 1fr;
  }
}

/* HVAC: restore hero image and keep overview image/card behavior stable */
body[data-page="business-hvac"] .hero{
  background-image:
    linear-gradient(rgba(15,23,42,0.45), rgba(17,24,39,0.45)),
    url('/assets/img/hero-business-hvac.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body[data-page="business-hvac"] .split{
  align-items: stretch;
}

body[data-page="business-hvac"] .split-media{
  justify-content: flex-end;
  align-items: center;
}

body[data-page="business-hvac"] .split-media img{
  width: 100%;
  max-width: 560px;
  max-height: none;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  overflow: hidden;
  display: block;
}

@media (max-width: 768px){
  body[data-page="business-hvac"] .split-media{
    justify-content: flex-start;
  }
  body[data-page="business-hvac"] .split-media img{
    max-width: 100%;
  }
}

/* HVAC: 3 logos need slightly wider cards for better balance */
body[data-page="business-hvac"] .logo-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
}

body[data-page="business-hvac"] .logo-card{
  height: 78px;
}

body[data-page="business-hvac"] .logo-card img{
  max-width: 118px;
}

@media (max-width: 900px){
  body[data-page="business-hvac"] .logo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 640px){
  body[data-page="business-hvac"] .logo-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Overseas Bangladesh - Featured Projects
   ========================================================= */
body[data-page="overseas-bangladesh"] .featured-project-list,
body[data-page="overseas-vietnam"] .featured-project-list{
  display: grid;
  gap: 18px;
}

body[data-page="overseas-bangladesh"] .featured-project-card,
body[data-page="overseas-vietnam"] .featured-project-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

body[data-page="overseas-bangladesh"] .featured-project-text,
body[data-page="overseas-vietnam"] .featured-project-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

body[data-page="overseas-bangladesh"] .featured-project-label,
body[data-page="overseas-vietnam"] .featured-project-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
  color: #0b2a5b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="overseas-bangladesh"] .featured-project-card h3,
body[data-page="overseas-vietnam"] .featured-project-card h3{
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.4;
}

body[data-page="overseas-bangladesh"] .featured-project-meta,
body[data-page="overseas-vietnam"] .featured-project-meta{
  margin: 0;
  padding-left: 18px;
}

body[data-page="overseas-bangladesh"] .featured-project-meta li,
body[data-page="overseas-vietnam"] .featured-project-meta li{
  margin: 8px 0;
  color: #374151;
}

body[data-page="overseas-bangladesh"] .featured-project-media,
body[data-page="overseas-vietnam"] .featured-project-media{
  margin: 0;
  display: flex;
  align-items: stretch;
}

body[data-page="overseas-bangladesh"] .featured-project-media img,
body[data-page="overseas-vietnam"] .featured-project-media img{
  width: 100%;
  height: 100%;
  min-height: 240px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  display: block;
  background: #e5e7eb;
}

@media (max-width: 768px){
  body[data-page="overseas-bangladesh"] .featured-project-card,
body[data-page="overseas-vietnam"] .featured-project-card{
    grid-template-columns: 1fr;
  }

  body[data-page="overseas-bangladesh"] .featured-project-media img,
body[data-page="overseas-vietnam"] .featured-project-media img{
    min-height: 200px;
  }
}


/* =========================================================
   Overseas Vietnam - Featured Projects FINAL FIX
   - Match Bangladesh stable layout
   - Scoped ONLY to Vietnam page
   ========================================================= */
body[data-page="overseas-vietnam"] .featured-project-card{
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  align-items: center;
}

body[data-page="overseas-vietnam"] .featured-project-text{
  justify-content: center;
}

body[data-page="overseas-vietnam"] .featured-project-media{
  display: block;
  align-self: center;
}

body[data-page="overseas-vietnam"] .featured-project-media img{
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 768px){
  body[data-page="overseas-vietnam"] .featured-project-card{
    grid-template-columns: 1fr;
    align-items: start;
  }

  body[data-page="overseas-vietnam"] .featured-project-media{
    align-self: auto;
  }

  body[data-page="overseas-vietnam"] .featured-project-media img{
    min-height: 200px;
  }
}


/* =========================================================
   Overseas page - Simple office cards
   - Keep the section minimal because each office has its own page
   - Scoped ONLY to overseas overview page
   ========================================================= */
body[data-page="overseas"] .office-section-lead{
  margin-top: -2px;
  margin-bottom: 16px;
}

body[data-page="overseas"] .office-simple-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

body[data-page="overseas"] .office-simple-card{
  padding: 18px 18px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body[data-page="overseas"] .office-simple-card h3{
  margin-bottom: 8px;
}

body[data-page="overseas"] .office-simple-desc{
  margin: 0 0 10px 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="overseas"] .office-simple-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #2563eb;
  text-decoration: none;
}

body[data-page="overseas"] .office-simple-link:hover{
  color: #1d4ed8;
  text-decoration: none;
}

body[data-page="overseas"] .office-simple-card:hover{
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}

@media (max-width: 900px){
  body[data-page="overseas"] .office-simple-grid{
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
  }
}

@media (max-width: 768px){
  body[data-page="overseas"] .office-simple-card:hover{
    transform: none;
  }

  body[data-page="overseas"] .office-simple-card{
    padding: 16px 16px 14px;
  }

  body[data-page="overseas"] .office-simple-desc{
    font-size: 13.5px;
  }
}


/* =========================================================
   Groupware button/link
   - PC: right-side button in header
   - Mobile: link inside hamburger menu
   ========================================================= */
.desktop-only{ display: inline-flex; }
.mobile-only{ display: none !important; }

.gw-btn{
  white-space: nowrap;
  font-weight: 800;
}

@media (min-width: 769px){
  .nav-right .gw-btn{
    height: 40px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(37,99,235,0.20);
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .nav-right .gw-btn:hover{
    background: #ffffff;
    border-color: rgba(37,99,235,0.32);
    color: var(--accent2);
    text-decoration: none;
  }
}

@media (max-width: 768px){
  .desktop-only{ display: none !important; }
  .mobile-only{ display: flex !important; }
}

@media (max-width: 768px){
  nav.open .nav-panel > a.mobile-only{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
}


@media (max-width: 768px){
  .logo-card:hover{
    transform: none;
  }
  .logo-card:hover img{
    transform: none;
  }
}