/* ══════════════════════════════════════════════════════════
   common.css — MDIS 전 페이지 공통 스타일
   (CSS 변수, 리셋, 배경 그리드, 네비게이션/로고/드롭다운, 푸터, 스크롤 애니메이션)
   index.html, about.html, careers.html, location.html, news.html,
   notice.html, org.html, request.html, solution-inquiry.html,
   tech-support.html 에서 공통으로 사용합니다.
   ══════════════════════════════════════════════════════════ */

/* TODO(추후 진행): <nav>...</nav>, <footer>...</footer> HTML 마크업 자체도
   10개 페이지에 그대로 중복돼 있음. nav.html / footer.html 파샬로 분리해서
   JS(fetch)로 공통 include 하면 마크업 중복도 없앨 수 있음.
   단, fetch()는 file:// 로 직접 열면 브라우저 CORS 정책 때문에 동작하지 않으므로
   실제 서버(www.mdis.ai.kr 등)에 배포하거나 로컬 개발 서버(예: `npx serve`,
   VSCode Live Server)로 열어서 테스트해야 함. */

/* ── CSS 변수 ── */
:root {
  --navy:    #0D1B2A;
  --blue:    #1565C0;
  --cyan:    #00BCD4;
  --teal:    #006D77;
  --white:   #FFFFFF;
  --gray:    #8899AA;
  --lgray:   #F0F4F8;
  --text:    #1A2535;
  --accent:  #00E5FF;
  --gold:    #FFB300;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #FFFFFF;
  color: var(--text);
  overflow-x: hidden;
}

/* ── 배경 그리드 패턴 ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,188,212,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,188,212,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events:none; z-index:0;
}

/* ── 네비게이션 ── */
nav {
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 60px;
  height: 72px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,188,212,0.15);
}

/* ── 로고 ── */
.logo {
  display:flex; align-items:center; gap:14px;
  text-decoration:none;
}
.logo-icon {
  width:40px; height:34px;
  position:relative;
  flex-shrink:0;
}
.logo-icon svg { width:100%; height:100%; display:block; }

.logo-text {
  display:flex; align-items:center; gap:10px; line-height:1;
}
.logo-mdis {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--navy);
}
.logo-mdis span { color: var(--cyan); }
.logo-sub {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px; font-weight:600;
  letter-spacing: 0;
  color: var(--navy);
  line-height:1.3;
}

.nav-links {
  display:flex; gap:36px; list-style:none;
}
.nav-links a {
  font-size:13px; font-weight:500; letter-spacing:0.5px;
  color: rgba(13,27,42,1);
  text-decoration:none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-cta {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  border: none; border-radius: 6px;
  font-size:13px; font-weight:600; color:var(--navy);
  cursor:pointer; text-decoration:none;
  transition: opacity 0.1s;
}
.nav-cta:hover { opacity:0.75; }

/* ── 회사소개 드롭다운 ── */
.nav-dropdown { position:relative; }
.dropdown-trigger {
  display:flex; align-items:center; gap:6px;
  background:none; border:none; padding:0;
  font-family:'Noto Sans KR', sans-serif;
  font-size:13px; font-weight:500; letter-spacing:0.5px;
  color: rgba(13,27,42,0.75);
  cursor:pointer;
  transition: color 0.2s;
}
.dropdown-trigger span { font-size:9px; transition: transform 0.2s; }
.nav-dropdown:hover .dropdown-trigger,
.nav-dropdown.open .dropdown-trigger { color: var(--cyan); }
.nav-dropdown.open .dropdown-trigger span { transform: rotate(180deg); }

.dropdown-panel {
  position:absolute; top:calc(100% + 20px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:170px;
  background: #FFFFFF;
  border:1px solid rgba(13,27,42,0.10);
  border-radius:10px;
  padding:10px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  box-shadow: 0 16px 40px rgba(13,27,42,0.15);
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown.open .dropdown-panel {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown-panel a {
  padding:10px 14px; border-radius:6px;
  font-size:13px; font-weight:500; letter-spacing:0.5px;
  color:rgba(13,27,42,0.75);
  text-decoration:none; white-space:nowrap;
  transition: background 0.2s, color 0.2s;
}
.dropdown-panel a:hover { background:rgba(0,188,212,0.08); color:var(--teal); }

/* ── 푸터 ── */
footer {
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,0.07);
  padding:60px 40px 40px;
  position:relative; z-index:1;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
}
.footer-brand .logo { margin-bottom:16px; }
.footer-brand-desc {
  font-size:13px; color:var(--gray); line-height:1.8; max-width:280px;
}
.footer-col-title {
  font-size:11px; letter-spacing:2px; color:var(--cyan);
  margin-bottom:16px; font-weight:700;
}
.footer-links { list-style:none; }
.footer-links li { margin-bottom:10px; }
.footer-links a {
  font-size:13px; color:rgba(255,255,255,0.5);
  text-decoration:none; transition:color 0.2s;
}
.footer-links a:hover { color:var(--cyan); }
.footer-bottom {
  max-width:1200px; margin:40px auto 0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.07);
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--gray);
}

/* ── 스크롤 애니메이션 ── */
.fade-up {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }