/* =========================================================
   THEME "Precision" — 아바타메카 홈페이지 테마
   style.css 위에 덮어쓰는 파일입니다.
   예전 모양으로 되돌리려면 index.html 의 theme.css <link> 한 줄만 지우면 됩니다.

   디자인 방향: 정밀 · 신뢰 · 절제
   - 로고 색(네이비 + 그린)은 유지하고, 그린은 '강조'에만 씀
   - 둥근 정도를 줄이고 얇은 선으로 구획해서 엔지니어링 회사다운 단정함을 줌
   - 어두운 영역에는 회로 도면 같은 격자 무늬를 아주 옅게 깜
   - 글자 색은 모두 WCAG AA(4.5:1) 이상 대비로 맞춤
   ========================================================= */
:root {
  --navy: #343c62;
  --navy-deep: #121832;
  --green: #25d560;
  --green-dark: #0a7a33;          /* 흰 배경 위 '글자'용 초록 (대비 5.4:1) */
  --ink: #0e1322;
  --ink-2: #434a5a;
  --ink-3: #666d7b;               /* 보조 글자 (대비 4.8:1 이상) */
  --line: #e3e6ee;
  --surface: #f5f6fa;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --section: clamp(72px, 9vw, 120px);
  --header-h: 68px;
  --shadow: 0 1px 2px rgba(14, 19, 34, .05), 0 14px 34px rgba(14, 19, 34, .08);
}

/* ---------- 바탕 ---------- */
html { scroll-padding-top: calc(var(--header-h) + 8px); }
body { text-rendering: optimizeLegibility; counter-reset: sec; }
::selection { background: rgba(37, 213, 96, .32); }
img { height: auto; }

/* ---------- 헤더 ---------- */
.header { background: rgba(255, 255, 255, .86); border-bottom-color: var(--line); }
.brand { letter-spacing: .16em; }
.gnb a { font-weight: 600; }

/* ---------- 버튼 ---------- */
.btn { font-weight: 600; border-width: 1px; }
.btn:hover { transform: translateY(-1px); }
.link-arrow { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 섹션 제목: 번호 + 구분선 (예: 01 | ABOUT US) ---------- */
.section { counter-increment: sec; }
.section .eyebrow { font-size: 13px; letter-spacing: .14em; margin-bottom: 18px; }
.section .eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  width: auto; height: auto; background: none;
  font-weight: 800; letter-spacing: .06em; line-height: 1.2;
  padding-right: 12px; border-right: 1.5px solid currentColor; opacity: .9;
}
.sec-title { font-weight: 700; letter-spacing: -.03em; }
.sec-desc { color: var(--ink-2); }
.section--dark .sec-desc { color: rgba(255, 255, 255, .72); }

/* ---------- 히어로 ---------- */
.slide h1, .slide h2 { font-weight: 700; letter-spacing: -.04em; }
.slide--a, .slide--c { background: linear-gradient(180deg, #f3f5fb 0%, #ffffff 100%); }
.slide--b {
  position: relative; isolation: isolate;
  background:
    radial-gradient(900px 480px at 82% 8%, rgba(37, 213, 96, .16), transparent 62%),
    linear-gradient(135deg, #0e132b 0%, #232c57 100%);
}
.slide--b::before {            /* 회로 도면 같은 옅은 격자 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 25%, transparent 78%);
}
.slide-visual { border: 1px solid rgba(14, 19, 34, .06); box-shadow: 0 24px 60px rgba(14, 19, 34, .14); }
.slide--b .slide-visual { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.dot { position: relative; }
.dot::after { content: ""; position: absolute; inset: -17px -5px; }   /* 눈에 보이는 크기는 그대로, 누르는 영역만 넓힘 */
.hero-ctrl { width: 44px; height: 44px; }

/* ---------- 카드: 그림자 대신 얇은 선, 올릴 때만 그림자 ---------- */
.stat, .biz, .prod, .news, .res, .faq-item, .steps3 li { border: 1px solid var(--line); box-shadow: none; }
.biz { background: #fff; }
.biz:hover, .prod:hover, .news:hover, .res:hover, .pf:hover {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d2d8e4;
}
.biz-icon { border-radius: 12px; }
.feature { border: 1px solid var(--line); background: linear-gradient(180deg, #f8f9fc 0%, #f1f3f9 100%); }
.tech-strip { border-top-color: var(--line); }
.chip { border: 1px solid var(--line); background: #fff; }
.pf-img { background: var(--surface); }

/* ---------- 어두운 섹션 ---------- */
.section--dark {
  background:
    radial-gradient(820px 360px at 100% 0%, rgba(37, 213, 96, .10), transparent 62%),
    var(--navy-deep);
}
.sol, .contact-card { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }

/* ---------- 연혁·소식 ---------- */
.news time { color: var(--green-dark); }
.year { border-top-color: var(--line); }

/* ---------- 문의 폼 ---------- */
.form input, .form textarea, .form select { border-radius: 10px; }
.form .consent input { width: 20px; height: 20px; }
.copy { min-height: 36px; padding: 0 14px; }

/* ---------- 푸터 ---------- */
.footer { background: #0b1022; }
.footer-copy { color: rgba(255, 255, 255, .62); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------- 지원 센터 페이지 ---------- */
.sup-hero {
  background:
    radial-gradient(900px 440px at 85% 0%, rgba(37, 213, 96, .14), transparent 62%),
    linear-gradient(135deg, #0e132b 0%, #232c57 100%);
}
.faq-item[open] { border-color: var(--navy); }

/* 모바일: 눌러야 하는 곳은 최소 44px */
@media (max-width: 960px) {
  .copy, .btn--sm { min-height: 44px; }
}
@media (max-width: 600px) {
  .slide--b::before { background-size: 40px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .biz:hover, .prod:hover, .news:hover, .res:hover, .pf:hover { transform: none; }
}
@media print {
  .header, .hero-ui, .to-top, .lightbox { display: none !important; }
  .section { padding: 24px 0; }
}