@charset "UTF-8";

/* =========================================================
   STANDARD ALL — MAIN HERO
   배경 · 문구 : 관리자 > 사이트관리 > 메인 비주얼
   메인 컬러 : var(--main-color)
   ========================================================= */
.sa-hero{
  --hx-serif:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --hx-sans:"Pretendard","Noto Sans KR",sans-serif;
  --hx-ease:cubic-bezier(.22,.61,.36,1);
  --hx-gutter:clamp(20px,5vw,80px);
  --hx-line:rgba(255,255,255,.32);
  position:relative;width:100%;height:100vh;height:100svh;min-height:640px;overflow:hidden;
  background:color-mix(in srgb, var(--main-color) 55%, #0c0d0b);color:#fff;isolation:isolate
}
.sa-hero *,.sa-hero *::before,.sa-hero *::after{box-sizing:border-box}

/* 세리프 고정 (테마의 *{font-family} 덮어쓰기 방지) */
.sa-hero__brand,.sa-hero__brand *,.sa-hero__num,.sa-hero__scroll{font-family:var(--hx-serif)!important}

/* ---------- 배경 슬라이드 ---------- */
.sa-hero__slides{position:absolute;inset:0;z-index:0}
.sa-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.4s var(--hx-ease),visibility 1.4s;
  background:radial-gradient(120% 90% at 70% 20%, color-mix(in srgb, var(--main-color) 55%, #3a3b36) 0%, color-mix(in srgb, var(--main-color) 35%, #10110f) 100%)}
.sa-hero__slide.is-active{opacity:1;visibility:visible}
.sa-hero__slide::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--sa-overlay,.4);pointer-events:none}
.sa-hero__bg{position:absolute;inset:-4%;display:block;will-change:transform}
.sa-hero__bg img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.sa-hero__slide.is-active .sa-hero__bg img{transform:scale(1)}

/* ---------- 가이드 라인 ---------- */
.sa-hero__line{position:absolute;z-index:1;background:var(--hx-line);pointer-events:none}
.sa-hero__line--x{left:0;right:0;top:50%;height:1px;transform-origin:50% 50%}
.sa-hero__line--y{left:50%;top:50%;bottom:0;width:1px;transform-origin:50% 0}

/* ---------- STANDARD ALL ---------- */
.sa-hero__brand{position:absolute;left:0;right:0;top:30%;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:0 .32em;padding:0 var(--hx-gutter);
  margin-top:-.6em;font-size:clamp(60px,9.2vw,180px);font-weight:500;line-height:1;letter-spacing:.015em;color:#fff;text-align:center;pointer-events:none;
  text-shadow:0 10px 40px rgba(0,0,0,.18)}
.sa-hero__word{display:inline-flex;overflow:hidden;padding:.06em 0 .08em}
.sa-hero__ch{display:inline-block;will-change:transform}

/* ---------- 문구 (관리자 입력) ---------- */
.sa-hero__copy{position:absolute;z-index:3;top:calc(50% + clamp(40px,6vh,64px));left:max(var(--hx-gutter),25%);width:calc(25% - 40px);min-width:300px}
.sa-hero__texts{display:grid}
.sa-hero__text{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .7s var(--hx-ease),transform .9s var(--hx-ease),visibility .7s}
.sa-hero__text.is-active{opacity:1;visibility:visible;transform:none;transition-delay:.35s}
.sa-hero__title{margin:0;font-family:var(--hx-sans);font-size:clamp(17px,1.25vw,21px);font-weight:600;line-height:1.5;letter-spacing:-.01em;color:#fff}
.sa-hero__desc{margin:6px 0 0;font-family:var(--hx-sans);font-size:clamp(16px,1.1vw,19px);font-weight:500;line-height:1.7;letter-spacing:-.03em;color:rgba(255,255,255,.85);word-break:keep-all}
.sa-hero__btn{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.5);font-family:var(--hx-sans);font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff;text-decoration:none;transition:border-color .4s,gap .4s var(--hx-ease)}
.sa-hero__btn i{position:relative;width:22px;height:1px;background:currentColor}
.sa-hero__btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.sa-hero__btn:hover{gap:18px;border-color:#fff}

/* ---------- 슬라이드 진행 ---------- */
.sa-hero__ctrl{display:flex;align-items:center;gap:14px;margin-top:clamp(32px,5vh,52px)}
.sa-hero__num{min-width:22px;font-size:15px;font-variant-numeric:lining-nums;letter-spacing:.04em;color:#fff}
.sa-hero__num--total{color:rgba(255,255,255,.5)}
.sa-hero__bars{display:flex;gap:6px}
.sa-hero__bar{position:relative;width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.sa-hero__bar::before,.sa-hero__bar i{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;margin-top:-.5px;background:rgba(255,255,255,.28)}
.sa-hero__bar i{width:0;background:#fff}
.sa-hero__bar.is-done i{width:100%}
.sa-hero__bar.is-active i{width:var(--fill,100%)}
.sa-hero__bar:focus-visible{outline:1px solid #fff;outline-offset:4px}
.sa-hero__pause{position:relative;width:26px;height:26px;margin-left:4px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:none;cursor:pointer;transition:border-color .3s}
.sa-hero__pause::before,.sa-hero__pause::after{content:"";position:absolute;top:8px;width:2px;height:8px;background:#fff}
.sa-hero__pause::before{left:9px}
.sa-hero__pause::after{right:9px}
.sa-hero__pause.is-paused::before{left:9px;top:7px;width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;background:none}
.sa-hero__pause.is-paused::after{display:none}
.sa-hero__pause:hover{border-color:#fff}

/* ---------- 스크롤 ---------- */
.sa-hero__scroll{position:absolute;left:calc(50% + 18px);bottom:clamp(30px,5vh,50px);z-index:3;font-size:14px;font-style:italic;letter-spacing:.14em;color:rgba(255,255,255,.75);writing-mode:vertical-rl;pointer-events:none}
.sa-hero__line--y::after{content:"";position:absolute;left:-1px;bottom:0;width:3px;height:70px;background:linear-gradient(transparent,#fff);animation:saHeroDrop 2.4s var(--hx-ease) infinite}
@keyframes saHeroDrop{0%{transform:translateY(-120%);opacity:0}30%{opacity:1}100%{transform:translateY(0);opacity:0}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .sa-hero__copy{left:var(--hx-gutter);width:calc(50% - var(--hx-gutter) - 30px);min-width:0}
}
@media (max-width:768px){
  .sa-hero__brand{top:30%;margin-top:-1.1em;flex-direction:column;align-items:center;gap:0;font-size:clamp(54px,16.5vw,120px);line-height:.96}
  .sa-hero__line--x{top:52%}
  .sa-hero__line--y{display:none}
  .sa-hero__copy{top:calc(52% + 34px);left:var(--hx-gutter);right:var(--hx-gutter);width:auto}
  .sa-hero__scroll{left:auto;right:var(--hx-gutter)}
}
@media (prefers-reduced-motion:reduce){
  .sa-hero__slide,.sa-hero__text,.sa-hero__bg img{transition:none}
  .sa-hero__line--y::after{animation:none;display:none}
}

/* =========================================================
   메인 섹션 보완 (사업영역 · 산업분야 · 품질)
   ========================================================= */
/* 영문 보조 서체 : Helvetica Neue Regular (기존 세리프 이탤릭 대체) */
html:root{--sa-serif:"Helvetica Neue",Helvetica,Arial,sans-serif}
html body .sa-script,
html body .sa-script *,
html body .sa-chip em,
html body .sa-industries__bg,
html body .sa-biz__thumb::after,
html body .sa-hero__scroll{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;font-style:normal!important;font-weight:400!important;font-synthesis:none}

/* 산업분야 칩 · 품질 수치 : 카드 전체를 누르면 이동 */
.sa-chip,.sa-stat{position:relative}
.sa-chip{cursor:pointer}
.sa-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.sa-link:focus-visible{outline:2px solid var(--main-color);outline-offset:4px}
.sa-quality .sa-link:focus-visible{outline-color:#fff;outline-offset:-6px}