/* ═══════════════════════════════════════════════════════════════════
   비전온에이아이 공용 스타일시트 (style.css)
   ───────────────────────────────────────────────────────────────────
   ◆ 이 파일은 무엇인가요?
     사이트의 "생김새" 전부를 담당합니다. 색·글꼴·간격·카드 모양·
     호버 효과가 여기서 정해지고, 5개 페이지가 모두 이 한 파일을 씁니다.
     → 여기서 한 번 고치면 모든 페이지에 동시에 적용됩니다.

   ◆ 가장 자주 할 수정 = 바로 아래 :root 의 변수만 바꾸면 됩니다.
     예) --blue 값을 바꾸면 사이트의 모든 파란색이 한 번에 변경.

   ◆ CSS 기초 미니 사전 (주석 이해용)
     .이름 { ... }      → html에서 class="이름" 인 요소들의 모양 규칙
     color / background → 글자색 / 배경색
     padding / margin   → 안쪽 여백 / 바깥 여백
     display:flex, grid → 요소들을 가로 정렬 / 표처럼 배치하는 도구
     :hover             → 마우스를 올렸을 때의 모양
     @media(max-width:) → 화면이 좁을 때(모바일) 적용되는 규칙
     transition         → 변화를 서서히(애니메이션으로) 보여주는 시간

   ◆ 이 파일의 목차 (Ctrl+F로 "═══ 이름"을 검색해 이동하세요)
     :root 변수 → 기본 리셋 → 헤더 → 히어로 배너 → 공통 섹션/버튼
     → 사업영역(다크) → 슬라이더/제품 카드 → 적용 분야 → 법제화/실적
     → 소식 → 듀얼 게이트 → 푸터 → TOP 버튼 → 스크롤 모션
     → 서브페이지 공용 (회사소개·솔루션·사례·문의)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#171717;          /* 본문 잉크 (한화비전 실측) */
  --ink-2:#5D5D5D;        /* 보조 텍스트 */
  --ink-3:#888888;
  --blue:#1463D8;         /* 유일한 포인트 컬러 */
  --blue-deep:#0B3E8F;
  --yellow:#F5B301;       /* 점자블록 모티프 — 극소량만 사용 */
  --paper:#FFFFFF;--mist:#F7F7F7;--line:#E5E5E5;
  --maxw:1320px;
  --r-sm:4px;--r:8px;     /* 각진 모서리 (한화비전 3.8px 실측) */
  --ease:cubic-bezier(0.4,0,0.2,1);   /* 한화비전 실측 이징 */
  --shadow:0 24px 48px -16px rgba(0,0,0,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;color:var(--ink);
  background:var(--paper);font-size:16.5px;line-height:1.7;letter-spacing:-0.02em;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word}  /* 한국어: 단어 중간에서 줄 안 끊김 */
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;background:#ECEFF3}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:10px 20px;z-index:300}
.skip:focus{left:0;top:0}
::selection{background:var(--blue);color:#fff}
.hidden{display:none!important}

/* 공용 인라인 아이콘 */
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 진행 바 */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:var(--blue)}

/* ═══ 헤더 ═══
   화면 위에 고정된 메뉴 바. .scrolled는 스크롤 시 JS가 붙여주는 이름표로,
   붙는 순간 아래 규칙(그림자)이 적용됩니다. 메뉴 항목 추가는 html에서. */
header{position:fixed;top:0;left:0;right:0;z-index:150;background:#fff;
  border-bottom:1px solid transparent;transition:.25s var(--ease);padding:0}
header.scrolled{border-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
/* 브랜드 배치: 윗줄 [CI 로고 + 장애인기업 마크] / 아랫줄 [(주)비전온에이아이] */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.brand-top{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center}
.logo img{height:46px;width:auto;border-radius:6px}
.logo-name{font-size:13.5px;font-weight:750;line-height:1;color:var(--ink);white-space:nowrap;letter-spacing:-0.01em}
.gnb-mark{height:44px;width:auto}   /* 마크 배경은 투명 PNG 그대로 */
@media(max-width:560px){.logo img{height:38px}.logo-name{font-size:12px}.gnb-mark{height:34px}}
/* 푸터 로고 + 장애인기업 마크 (어두운 배경: 회사명은 흰 글자, 마크는 흰색 칩 위에 올림) */
footer .logo img{height:46px}
footer .logo-name{color:#fff}
footer .gnb-mark{height:46px;background:#fff;border-radius:6px;padding:4px 7px}
.menu{display:flex;gap:2px;font-weight:600;font-size:15.5px;margin-left:auto;margin-right:14px}  /* 메뉴를 우측(문의 버튼 옆)으로 붙임 */
.menu a{padding:26px 18px;color:var(--ink);position:relative;transition:color .2s}
.menu a::after{content:"";position:absolute;left:18px;right:100%;bottom:0;height:2.5px;
  background:var(--blue);transition:right .3s var(--ease)}
.menu a:hover{color:var(--blue)}
.menu a:hover::after{right:18px}
.cta-mini{background:var(--blue);color:#fff;font-weight:700;padding:9px 16px;
  border-radius:var(--r-sm);font-size:13.5px;transition:.25s var(--ease)}  /* 크기 축소 */
.cta-mini:hover{background:var(--blue-deep)}
@media(max-width:900px){.menu{display:none}}

/* ═══ 히어로: 풀블리드 실사 배너 ═══
   메인 최상단 큰 배너. .active가 붙은 슬라이드만 보이며(JS가 6초마다 교체),
   .hc-media의 7s 값 = 사진이 천천히 줌아웃되는 '켄번즈' 효과 시간입니다. */
.hero-carousel{position:relative;margin-top:76px}
.hc-track{position:relative;height:min(78vh,720px);min-height:520px}
.hc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease}
.hc-slide.active{opacity:1;visibility:visible}
.hc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 7s linear}
.hc-slide.active .hc-media{transform:scale(1)}   /* 은은한 켄번즈 줌 */
.hc-shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,16,.78) 0%,rgba(10,12,16,.5) 45%,rgba(10,12,16,.12) 80%),
             linear-gradient(0deg,rgba(10,12,16,.45),transparent 40%)}
.hc-inner{position:relative;height:100%;display:flex;align-items:center}
.hc-copy{max-width:640px;color:#fff}
.hc-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:22px;padding-bottom:8px;
  border-bottom:2px solid var(--blue)}
.hc-slide h1{font-size:clamp(32px,4.2vw,52px);line-height:1.4;font-weight:650;
  letter-spacing:-0.03em;margin-bottom:20px;word-break:keep-all}
.hc-slide p{font-size:17.5px;line-height:1.8;color:rgba(255,255,255,.85);
  max-width:32em;margin-bottom:34px;font-weight:400}
.hc-slide.active .hc-copy>*{animation:hcup .8s var(--ease) both}
.hc-slide.active .hc-copy>*:nth-child(2){animation-delay:.1s}
.hc-slide.active .hc-copy>*:nth-child(3){animation-delay:.2s}
.hc-slide.active .hc-copy>*:nth-child(4){animation-delay:.3s}
@keyframes hcup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 캐러셀 컨트롤 (배너 하단 겹침) */
.hc-ctrl{position:absolute;left:0;right:0;bottom:26px;display:flex;gap:8px;align-items:center;z-index:5}
.hc-dot{width:44px;height:3px;border:none;background:rgba(255,255,255,.35);transition:.3s;
  position:relative;overflow:hidden;border-radius:0}
.hc-dot.active::after{content:"";position:absolute;inset:0;background:#fff;
  transform:scaleX(0);transform-origin:left;animation:dotfill 6s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}
.hc-pause{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:transparent;font-size:9px;color:#fff;margin-left:8px}

/* ═══ 공통 섹션 ═══ */
section{padding:110px 0;position:relative}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:52px;flex-wrap:wrap}
.sec-eyebrow{font-size:12.5px;font-weight:700;color:var(--blue);letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:14px}
h2{font-size:clamp(26px,3vw,38px);font-weight:650;letter-spacing:-0.03em;line-height:1.4;word-break:keep-all}
.sec-sub{color:var(--ink-2);font-size:16.5px;margin-top:12px}
.see-all{font-weight:650;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;
  gap:8px;padding:10px 0;border-bottom:1.5px solid var(--ink);transition:.25s}
.see-all:hover{color:var(--blue);border-color:var(--blue)}
.see-all .ic{transition:transform .3s var(--ease)}
.see-all:hover .ic{transform:translateX(4px)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:16px;
  padding:15px 28px;border-radius:var(--r-sm);transition:.3s var(--ease);border:none}
.btn .ic{transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);box-shadow:0 12px 28px -8px rgba(20,99,216,.55)}
.btn-line{background:transparent;border:1.5px solid rgba(255,255,255,.85);color:#fff}
.btn-line:hover{background:#fff;color:var(--ink)}

/* ═══ 사업영역 게이트 (다크 섹션) ═══
   어두운 배경의 사업영역 소개. hover 시 배경 사진이 1.05배 확대됩니다.
   확대 정도를 바꾸려면 scale(1.05) 숫자를 조절하세요. */
.tech{background:#111214;color:#fff;padding:120px 0}
.tech h2{color:#fff}
.tech .sec-eyebrow{color:#7FA9E8}
.tech-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
@media(max-width:900px){.tech-grid{grid-template-columns:1fr}}
.tech-main{border-radius:var(--r);overflow:hidden;position:relative;display:flex;
  flex-direction:column;justify-content:space-between;min-height:460px;padding:46px;transition:.4s var(--ease)}
.tm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.tech-main:hover .tm-bg{transform:scale(1.05)}
.tm-shade{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,10,14,.82),rgba(8,10,14,.35))}
.tech-main:hover{box-shadow:0 30px 60px rgba(0,0,0,.45)}
.tm-body{position:relative}
.tm-label{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#7FA9E8;margin-bottom:14px}
.tm-body h3{font-size:clamp(24px,2.6vw,34px);font-weight:650;letter-spacing:-0.025em;margin-bottom:10px}
.tm-body p{color:rgba(255,255,255,.72);font-size:16.5px}
.tm-links{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.22);border-radius:var(--r-sm);overflow:hidden;margin-top:40px}
.tm-link{background:rgba(12,14,18,.72);backdrop-filter:blur(8px);padding:18px 20px;transition:.3s var(--ease)}
.tm-link:hover{background:rgba(20,99,216,.55)}
.tm-link b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:650;margin-bottom:2px}
.tm-link small{color:rgba(255,255,255,.6);font-size:13.5px}
@media(max-width:640px){.tm-links{grid-template-columns:1fr}}
.tech-side{display:grid;gap:20px}
.tech-card{border-radius:var(--r);overflow:hidden;position:relative;display:flex;
  align-items:flex-end;min-height:220px;padding:32px;transition:.4s var(--ease)}
.tc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tech-card:hover .tc-bg{transform:scale(1.06)}
.tc-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,14,.85),rgba(8,10,14,.15))}
.tc-body{position:relative}
.tech-card h3{font-size:20px;font-weight:650;display:flex;align-items:center;gap:10px}
.tech-card .ic{transition:transform .3s var(--ease)}
.tech-card:hover .ic{transform:translateX(5px)}
.tech-card p{color:rgba(255,255,255,.68);font-size:15px;margin-top:4px}
.tech-card:hover{box-shadow:0 24px 48px rgba(0,0,0,.4)}

/* ═══ 슬라이더 공통 (제품·적용분야의 ← → 이동) ═══
   overflow-x:auto = 가로로 넘치면 스크롤 가능. scroll-snap = 카드 단위로
   착착 멈추는 효과. 화살표 동작 자체는 js/main.js 3번 구역에 있습니다. */
.slider-arrows{display:flex;gap:8px}
.s-arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  font-size:17px;color:var(--ink);transition:.3s var(--ease)}
.s-arr:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.slider{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.slider>*{scroll-snap-align:start;flex:none}
.slider.autoflow{scroll-snap-type:none}  /* 연속 자동 흐름 중엔 카드 자석 정렬 해제 (JS가 붙임) */

/* 제품 카드 (모노톤 스튜디오 스타일) */
.prod-card{width:256px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;gap:4px;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .3s}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#D5D5D5}
.prod-img{height:160px;border-radius:var(--r-sm);background:linear-gradient(165deg,#F4F5F7,#E9EBEF);
  display:grid;place-items:center;margin-bottom:16px}
.prod-img.photo{padding:0;overflow:hidden;background:#fff;display:block}
.prod-img.photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prod-card:hover .prod-img.photo img{transform:scale(1.06)}
.pi{width:44px;height:44px;fill:none;stroke:#9AA3AF;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.prod-card:hover .pi{stroke:var(--blue)}
.prod-card b{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.prod-card span{font-size:14.5px;color:var(--ink-2)}
.prod-card em{font-style:normal;font-size:14px;font-weight:650;color:var(--blue);
  margin-top:12px;display:inline-flex;align-items:center;gap:6px}
.prod-card em .ic{width:15px;height:15px}

/* 적용 분야: 실사 배경 오버레이 카드 (한화비전 산업분야 스타일) */
.industries{background:var(--mist)}
.ind-card{width:300px;height:380px;border-radius:var(--r);overflow:hidden;position:relative;
  display:flex;transition:.45s var(--ease)}
.ind-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.ind-card:hover img{transform:scale(1.07)}
.ind-card:hover{box-shadow:var(--shadow)}
.ind-shade{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,10,14,.86) 0%,rgba(8,10,14,.32) 55%,rgba(8,10,14,.05))}
.ind-body{position:relative;align-self:flex-end;padding:28px;color:#fff}
.ii{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;margin-bottom:14px;opacity:.9}
.ind-body b{display:block;font-size:19px;font-weight:700;margin-bottom:6px;letter-spacing:-0.01em}
.ind-body span{font-size:14.5px;color:rgba(255,255,255,.78);line-height:1.6}

/* ═══ 법제화 + 실적 ═══ */
.law-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.law-grid.g2{grid-template-columns:repeat(2,1fr)}   /* 2열 변형 — 모바일에선 아래 규칙으로 1열 */
@media(max-width:860px){.law-grid,.law-grid.g2{grid-template-columns:1fr}}
.law-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 30px;
  position:relative;transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.law-card::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.law-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.law-card:hover::before{transform:scaleX(1)}
.law-card .num{font-size:15px;font-weight:700;color:var(--blue);letter-spacing:.12em;margin-bottom:16px}
.law-card h3{font-size:19.5px;font-weight:700;margin-bottom:10px;letter-spacing:-0.015em}
.law-card p{font-size:15px;color:var(--ink-2)}
.stats-inline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:64px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:860px){.stats-inline{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;background:#fff;padding:44px 16px}
.stat .big{font-size:clamp(34px,3.8vw,48px);font-weight:650;letter-spacing:-0.03em;
  line-height:1.05;color:var(--ink)}
.stat .lbl{font-size:14.5px;color:var(--ink-2);font-weight:600;margin-top:10px}

/* ═══ 소식 ═══ */
.news-tabs{display:flex;gap:6px;margin-bottom:36px;flex-wrap:wrap}
.ntab{padding:10px 22px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:15px;font-weight:650;color:var(--ink-2);transition:.25s var(--ease)}
.ntab:hover{border-color:var(--ink);color:var(--ink)}
.ntab.active{background:var(--ink);border-color:var(--ink);color:#fff}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}
.news-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.nc-img{width:100%;height:190px;object-fit:cover;transition:transform 1s var(--ease)}
.news-card:hover .nc-img{transform:scale(1.04)}
.news-card{display:block}
.nc-body{padding:24px 26px 26px}
.nc-cat{font-size:12.5px;font-weight:700;color:var(--blue);letter-spacing:.06em}
.nc-body h3{font-size:17.5px;font-weight:650;line-height:1.55;margin:8px 0 14px;letter-spacing:-0.015em}
.nc-body time{font-size:13.5px;color:var(--ink-3)}

/* ═══ 듀얼 게이트 (하단 자료실/문의 2분할) ═══
   왼쪽 = 어두운 사진 배경, 오른쪽 = 파란 배경. 문구는 html에서 수정. */
.gates{padding:0}
.gates-grid{display:grid;grid-template-columns:1fr 1fr;min-height:400px}
@media(max-width:820px){.gates-grid{grid-template-columns:1fr}}
.gate{position:relative;display:flex;align-items:center;padding:70px clamp(32px,6vw,90px);overflow:hidden}
.gate-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gate-shade.dark{position:absolute;inset:0;background:rgba(10,14,22,.82)}
.gate-body{position:relative;color:#fff;max-width:420px}
.gate h3{font-size:26px;font-weight:650;letter-spacing:-0.02em;margin-bottom:12px}
.gate p{font-size:16px;color:rgba(255,255,255,.8);margin-bottom:28px}
.g-contact{background:linear-gradient(120deg,var(--blue-deep),var(--blue))}

/* ═══ 푸터 ═══ */
footer{background:#111214;color:rgba(255,255,255,.65);font-size:14.5px;padding:64px 0 40px}
footer .logo{color:#fff}
.ft-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.ft-sitemap{display:flex;gap:70px;flex-wrap:wrap}
.ft-sitemap h4{color:#fff;font-size:15px;margin-bottom:14px;font-weight:700}
.ft-sitemap a{display:block;font-size:14px;color:rgba(255,255,255,.55);padding:4px 0;transition:.2s}
.ft-sitemap a:hover{color:#fff}
.ft-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;
  font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.9}

/* TOP 버튼 */
#toTop{position:fixed;right:26px;bottom:26px;width:54px;height:54px;border-radius:50%;z-index:140;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  box-shadow:0 10px 30px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.3s var(--ease)}
#toTop span{font-size:10px;letter-spacing:.08em}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ═══ 스크롤 모션 (리빌) ═══
   .reveal/.stagger 요소는 처음엔 투명·아래로 28px 내려간 상태로 시작하고,
   JS가 'on'을 붙이는 순간 제자리로 떠오릅니다. html에서 class만 붙이면 작동.
   맨 아래 prefers-reduced-motion = 어지러움 방지 설정 사용자는 모션 전체 끔. */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.on{opacity:1;transform:none}
html.js .stagger>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .stagger.on>*{opacity:1;transform:none}
.stagger.on>*:nth-child(1){transition-delay:.05s}.stagger.on>*:nth-child(2){transition-delay:.14s}
.stagger.on>*:nth-child(3){transition-delay:.23s}.stagger.on>*:nth-child(4){transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
  .hc-media{transform:none!important}
  html{scroll-behavior:auto}
}


/* ═══ 서브페이지 공용 ═══ */
.page-head{margin-top:76px;padding:84px 0 56px;background:var(--mist);border-bottom:1px solid var(--line)}
.page-title{font-size:clamp(32px,4vw,46px);font-weight:650;letter-spacing:-0.03em}
.page-sub{color:var(--ink-2);font-size:17px;margin-top:10px}
.prose{max-width:760px;font-size:17px;color:var(--ink);line-height:1.9}
.prose p{margin-bottom:16px}
.prose h3{font-size:20px;font-weight:700;margin-bottom:8px}
.ph{font-size:14px;color:var(--ink-3)}
.info-table{max-width:760px;border-top:2px solid var(--ink)}
.info-table>div{display:flex;gap:20px;padding:16px 6px;border-bottom:1px solid var(--line);font-size:16px}
.info-table b{flex:0 0 110px;font-weight:700}
.info-table span{color:var(--ink-2)}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;margin-bottom:36px}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.duo img{width:100%;border-radius:var(--r);object-fit:cover;max-height:380px}
.duo h3{font-size:21px;font-weight:700;margin-bottom:8px}
.duo p{color:var(--ink-2);font-size:16px}
.duo-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.duo-imgs{grid-template-columns:1fr}}
.duo-imgs img{width:100%;height:220px;object-fit:cover;border-radius:var(--r)}
.duo-imgs figcaption{font-size:14px;color:var(--ink-2);margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}
.g-item{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.g-item img{width:100%;height:250px;object-fit:cover;transition:transform .8s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-item figcaption{padding:14px 16px;font-size:14.5px;font-weight:600;color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.c-card{border:1px solid var(--line);border-radius:var(--r);padding:36px 30px;display:flex;flex-direction:column;gap:6px}
.c-card b{font-size:19px;font-weight:750}
.c-card span{color:var(--ink-2);font-size:15px;margin-bottom:18px}
.c-card .btn{align-self:flex-start}
.btn-ghost2{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost2:hover{border-color:var(--blue);color:var(--blue)}
a.law-card{display:block}

/* ═══ 문의 폼 (contact.html) ═══
   입력칸 모양. 칸 추가는 contact.html에서 <label> 블록 복사. */
.form-wrap{max-width:760px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media(max-width:640px){.f-grid{grid-template-columns:1fr}}
form label{display:block;font-size:14.5px;font-weight:650;color:var(--ink);margin-bottom:14px}
form input[type=text],form input[type=tel],form input[type=email],form select,form textarea{
  display:block;width:100%;margin-top:7px;padding:13px 15px;font:inherit;font-size:15.5px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  transition:border-color .25s var(--ease);box-sizing:border-box}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--blue)}
form textarea{resize:vertical;min-height:130px}
.f-agree{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;
  font-size:13.5px!important;color:var(--ink-2)!important;line-height:1.7}
.f-agree input{margin-top:3px;accent-color:var(--blue)}


/* ═══ 모바일 대응 (햄버거 메뉴 + 여백·글자 보정) ═══
   화면 900px 이하 = 태블릿·모바일. PC 메뉴 대신 ☰ 버튼이 나타나고,
   누르면 아래 .m-nav 패널이 펼쳐집니다 (여닫기는 js/main.js 7번 구역). */
.m-btn{display:none;width:44px;height:44px;border:none;background:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.m-btn span{display:block;width:22px;height:2px;background:var(--ink);
  transition:.3s var(--ease)}
.m-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.m-btn.open span:nth-child(2){opacity:0}
.m-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-nav{display:none;position:fixed;top:76px;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.08);
  padding:8px 0 24px;z-index:149;
  /* 메뉴가 화면보다 길면 패널 안에서 스크롤 — 모바일 주소창 높이까지 반영(dvh) */
  max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.m-nav.open{display:block;animation:mdown .25s var(--ease)}
@keyframes mdown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.m-nav a{display:block;padding:14px 28px;font-size:16.5px;font-weight:650;color:var(--ink)}
.m-nav a:active{background:var(--mist)}
.m-nav .m-cta{margin:10px 24px 0;background:var(--blue);color:#fff;text-align:center;
  border-radius:var(--r-sm);padding:14px}
@media(max-width:900px){
  .m-btn{display:flex}
  .cta-mini{display:none}          /* 상단 문의 버튼은 메뉴 패널 안으로 이동 */
}

/* ── 640px 이하(스마트폰): 여백·글자 크기 촘촘하게 보정 ── */
@media(max-width:640px){
  .wrap{padding:0 20px}            /* 좌우 여백 32→20px */
  section{padding:72px 0}          /* 섹션 상하 여백 110→72px */
  .sec-row{margin-bottom:36px}
  .hc-track{min-height:480px}
  .hc-slide p{font-size:15.5px}
  .hc-copy{padding-right:8px}
  .btn{padding:14px 22px;font-size:15px}
  .page-head{padding:56px 0 40px}
  .prose{font-size:16px}
  .tech-main{padding:30px;min-height:400px}
  .stat .big{font-size:30px}
  .gate{padding:52px 24px}
  .ft-sitemap{gap:36px}
  .info-table>div{flex-direction:column;gap:4px}  /* 회사 개요 표: 세로 쌓기 */
  .info-table b{flex:none}
}


/* ═══ GNB 드롭다운 (2단 메뉴 — 한화비전식) ═══
   마우스를 올리면 하위 메뉴가 내려옵니다. 키보드 포커스에서도 열림(접근성). */
.menu{align-items:center}
.menu .mi{position:relative}
.menu .mi>a{display:block}
.menu .sub{position:absolute;top:100%;left:6px;min-width:220px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 48px -12px rgba(0,0,0,.14);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.25s var(--ease)}
.menu .mi:hover .sub,.menu .mi:focus-within .sub{opacity:1;visibility:visible;transform:none}
.menu .sub a{display:block;padding:11px 14px;font-size:14.5px;font-weight:600;
  color:var(--ink-2);border-radius:var(--r-sm);transition:.2s}
.menu .sub a::after{display:none}   /* 상위 메뉴의 밑줄 효과 제거 */
.menu .sub a:hover{background:var(--mist);color:var(--blue)}

/* ═══ 제품 페이지 그리드 (슬라이더 카드의 "전체 보기" 버전) ═══ */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prod-grid{grid-template-columns:1fr}}
.prod-grid .prod-card{width:auto}
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ind-grid{grid-template-columns:1fr}}
.ind-grid .ind-card{width:auto;height:340px}

/* ═══ 모바일 메뉴 그룹 제목 ═══ */
.m-group{display:block;padding:16px 28px 4px;font-size:12.5px;font-weight:800;
  color:var(--blue);letter-spacing:.14em;text-transform:uppercase}
.m-nav a{padding:12px 28px}


/* ═══ 헤더·서브페이지 배치 보정 (가독성 개선판) ═══ */
.menu .mi:last-child .sub{left:auto;right:0}   /* 맨 오른쪽 드롭다운은 오른쪽 기준 정렬 */
.menu .mi>a{padding:26px 16px}

/* 페이지 머리: 여백·정렬 강화 */
.page-head{padding:96px 0 64px}
.page-title{margin-top:4px}
.page-sub{font-size:17.5px;max-width:640px;line-height:1.8}

/* 카드류: 답답하지 않게 안쪽 여백·줄간격 확대 */
.law-card{padding:42px 36px}
.law-card h3{font-size:20.5px;line-height:1.5}
.law-card p{font-size:15.5px;line-height:1.8}
.law-card .num{margin-bottom:20px}
.c-card{padding:42px 36px}
.c-card b{font-size:20px}
.c-card span{font-size:15.5px;line-height:1.75}
.info-table>div{padding:19px 8px;font-size:16.5px}
.info-table b{flex:0 0 140px}
.prose{font-size:17px;line-height:1.95}
.prose p{margin-bottom:18px}
.duo{gap:44px}
.duo h3{font-size:22px}
.duo p{font-size:16px;line-height:1.85}
.duo-imgs{gap:18px;margin-top:8px}
.duo-imgs figcaption{font-size:14.5px;padding:2px 2px 0}
.g-item figcaption{padding:16px 18px;line-height:1.6}
.gallery{gap:20px}
.prod-grid .prod-card{padding:26px}
.prod-grid .prod-card b{font-size:18.5px;margin-top:2px}
.prod-grid .prod-card span{font-size:15px;line-height:1.65}
.form-wrap h3{margin-bottom:8px}
form label{margin-bottom:16px}

/* 섹션 리듬: 서브페이지 첫 섹션은 위 여백 줄여 페이지헤드와 밀착 */
.page-head + * section:first-child, .page-head ~ main section:first-of-type{padding-top:88px}


/* ═══ 문의 페이지 재설계 (폼 주인공 2단 배치) ═══ */
.contact-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}}
.c-side{display:grid;gap:16px;position:sticky;top:100px}
.c-box{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff;
  display:flex;flex-direction:column;gap:8px}
.c-box b{font-size:16px;font-weight:750;color:var(--ink)}
.c-box span{font-size:14.5px;color:var(--ink-2);line-height:1.7}
.c-big{font-size:24px;font-weight:750;color:var(--blue);letter-spacing:-0.01em}
.c-mail{font-size:16.5px;font-weight:650;color:var(--ink)!important;user-select:all}
.c-copy{align-self:flex-start;padding:9px 16px;font-size:13.5px}
/* 오시는 길 */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.loc-grid{grid-template-columns:1fr}}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px}
.loc-card b{font-size:19px;font-weight:750;display:block;margin-bottom:10px}
.loc-card p{font-size:16.5px;line-height:1.75;margin-bottom:6px}
.map-slot{margin-top:18px;height:220px;border:1.5px dashed #C7CFDB;border-radius:var(--r-sm);
  display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:14.5px;
  background:repeating-linear-gradient(45deg,#FAFBFD,#FAFBFD 12px,#F4F6FA 12px,#F4F6FA 24px)}
.map-slot small{font-size:12.5px}
.map-img{margin-top:18px;width:100%;height:220px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
/* 약도 이미지를 감싸는 카카오맵 링크 — 마우스를 올리면 살짝 밝아져 "클릭 가능"을 알림 */
.map-link{display:block}
.map-link:hover .map-img{opacity:.88}
.map-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm)}
.loc-btns{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* ═══ 연혁 (about.html) ═══
   연도(왼쪽 파란 숫자) + 월별 항목(오른쪽 목록) 표 형태.
   항목 추가법: about.html 연혁 구역에서 <li><em>월</em><span>내용</span></li> 복제 */
.hist{border-top:2px solid var(--ink)}
.hist-row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.hist-row .year{font-size:28px;font-weight:750;color:var(--blue);line-height:1.2}
.hist-row ul{list-style:none;display:grid;gap:10px}
.hist-row li{display:grid;grid-template-columns:36px 1fr;gap:14px;font-size:16.5px;line-height:1.65}
.hist-row li em{font-style:normal;font-weight:650;color:var(--ink-3)}
@media(max-width:640px){.hist-row{grid-template-columns:1fr;gap:10px;padding:22px 0}}

/* ═══ 인증 현황 (about.html) ═══
   위: 인증 배지(알약 모양) / 아래: 마스킹된 인증서 이미지 카드(클릭 시 원본 크게) */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:650;color:var(--ink-2)}
.badge b{color:var(--blue);font-weight:750}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
.cert-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.cert-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.cert-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cert-card .thumb{aspect-ratio:3/4;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--line);padding:10px}
.cert-card .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.cert-card figcaption{padding:14px 16px}
.cert-card figcaption b{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px}
.cert-card figcaption span{display:block;font-size:13px;color:var(--ink-3);line-height:1.55}


/* ═══ 드롭다운 표시 안전장치 ═══
   - z-index: 드롭다운이 다른 요소에 가려지지 않게 최상위로
   - ::before 브리지: 메뉴와 패널 사이 틈에서 마우스가 빠져도 닫히지 않게
   - 오른쪽 끝(Contact us) 패널은 오른쪽 기준 정렬 */
.menu .sub{z-index:200;margin-top:0}
.menu .sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.menu .sub a{color:var(--ink-2)!important;white-space:nowrap}
.menu .mi:last-child .sub{left:auto;right:0}

/* 이메일 카드: 보조 복사 줄 (작게) */
.c-mail-line{font-size:13.5px;color:var(--ink-3)!important;margin-top:10px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.c-mail-line .c-mail{font-size:13.5px;font-weight:650}
.c-copy-mini{border:1px solid var(--line);background:#fff;border-radius:4px;padding:3px 10px;
  font-size:12px;font-weight:650;color:var(--ink-2);cursor:pointer;transition:.2s}
.c-copy-mini:hover{border-color:var(--blue);color:var(--blue)}


/* ═══ 앵커 이동 위치 보정 (전 페이지 공통) ═══
   헤더가 화면 위에 고정되어 있어서, 앵커(#kiosk, #onlineForm 등)로 이동하면
   목적지가 헤더에 가려지는 문제를 해결. 96px = 헤더 높이 + 여유 */
[id]{scroll-margin-top:96px}

/* "직접 보내기" 줄 정렬: 라벨 한 줄 + 주소·복사 한 줄 */
.c-mail-line{flex-direction:column;align-items:flex-start;gap:5px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.c-mail-line em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.04em}
.c-mail-row{display:flex;align-items:center;gap:8px}


/* ═══ 문의 카드 3장 정렬 통일 ═══
   - 설명 영역 높이를 고정(2줄 기준) → 세 카드의 버튼이 같은 높이에서 시작
   - "직접 보내기" 블록은 카드 맨 아래 고정
   - 복사 버튼: 이메일 글자와 세로 중앙 정렬 + 간격 일정 */
.c-card{display:flex;flex-direction:column}
.c-card>b + span{min-height:54px;margin-bottom:6px}   /* 설명글 자리(2줄 기준) 통일 */
.c-card .btn{align-self:flex-start}
.c-mail-line{margin-top:auto}                          /* 이메일 카드: 하단 고정 */
.c-mail-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.c-mail-row .c-mail{font-size:13.5px;line-height:1;color:var(--ink)!important}
.c-copy-mini{line-height:1;padding:6px 11px;flex:none}


/* ═══ 문의 카드: 가운데 정렬 + 버튼 하단 배치 ═══ */
.c-card{align-items:center;text-align:center}
.c-card>b + span{min-height:0;margin-bottom:22px}
.c-card .btn{align-self:center;margin-top:auto}   /* 버튼을 카드 아래쪽으로 */
.c-card{padding:44px 32px 36px}
.c-mail-line{align-items:center;width:100%;margin-top:20px}
.c-mail-row{justify-content:center}


/* ═══ 문의 카드 버튼 위치 재조정: 하단 고정 해제 → 설명 바로 아래 자연 배치 ═══
   (설명 영역만 2줄 기준으로 통일해 세 버튼의 시작 줄을 맞춤) */
.c-card .btn{margin-top:0}
.c-card>b + span{min-height:52px;margin-bottom:10px}