@charset "utf-8";
/* ==========================================================================
   HWASHIN PRECISION — common.css
   공통 : 폰트 / 리셋 / 디자인 토큰 / 레이아웃 / 헤더 / 푸터
   기준 : 디자인 캔버스 1920 · 콘텐츠 영역 1440 · 1rem = 10px
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONT */
@import url("/api/modules/assets/hwashin-site/dist/sites/HSprec/css/fonts.css");   /* Pretendard(한글) + Rajdhani(영문) — CDN 전환은 fonts.css 상단 주석 참고 */

/* ------------------------------------------------------------- 2. TOKENS */
:root{
  /* color */
  --c-blue:        #0E7DFF;   /* 포인트 블루 (버튼/활성) */
  --c-navy:        #2A5BB7;   /* 딥 블루 (섹션 라벨/활성 버튼/카피라이트) */
  --c-blue-lt:     #87B0FC;   /* 카피라이트 링크 */
  --c-black:       #000000;
  --c-ink:         #313131;
  --c-gray:        #707070;
  --c-gray-lt:     #A0A0A0;
  --c-line:        #DCDCDC;
  --c-line-2:      #D2D2D2;
  --c-bg-soft:     #F3F7F9;   /* 카드 / 푸터 배경 */
  --c-bg-family:   #E8EFF3;   /* FAMILY SITE 배경 */
  --c-white:       #FFFFFF;

  /* font */
  --f-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --f-en: "Rajdhani", var(--f-ko);

  /* layout */
  --content: 144rem;          /* 콘텐츠 영역 1440 */
  --header-h: 10rem;          /* 헤더 높이 100 */
  --dim: rgba(0,0,0,.20);     /* 이미지 위 검정막 20% */
}

/* -------------------------------------------------------------- 3. RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{
  font-size:10px;             /* 1rem = 10px (디자인 1:1) */
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; border:0; vertical-align:top; }
a{ color:inherit; text-decoration:none; }
button{
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; -webkit-appearance:none; appearance:none;
}
address{ font-style:normal; }
b,strong{ font-weight:700; }

body{
  font-family:var(--f-ko);
  font-size:1.6rem;
  line-height:1.5;
  color:var(--c-black);
  background:var(--c-white);
  word-break:keep-all;
  overflow-x:hidden;
}

.blind{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------------------- 4. LAYOUT */
/* 콘텐츠 영역 1440 (1920 캔버스 기준 좌우 240 여백) */
.inner{
  width:var(--content);
  margin:0 auto;
}

/* 이미지 위 검정막 */
.dim::after{
  content:""; position:absolute; inset:0; background:var(--dim); border-radius:inherit;
}

/* 섹션 공통 라벨 (Company / R&D / Product) */
.sec-label{
  font-family:var(--f-en);
  font-weight:700;
  font-size:2.5333rem;
  line-height:1;
  color:var(--c-navy);
}
.sec-title{
  font-weight:700;
  font-size:4.8rem;
  line-height:6rem;
  letter-spacing:0;
  color:var(--c-black);
}

/* 원형 화살표 버튼 (R&D / 제품 / view more 공통)
   기본  : 흰 원 + 라인 + 파란 화살표
   is-fill : 파란 원 + 흰 화살표 */
.circle-arrow{
  display:flex; align-items:center; justify-content:center;
  width:5.2rem; height:5.2rem; border-radius:50%;
  background:var(--c-white); border:1px solid var(--c-line);
  transition:background .3s, border-color .3s;
}
.circle-arrow img{ width:1.4rem; height:auto; }
.circle-arrow .ico-white{ display:none; }
.circle-arrow.is-fill{ background:var(--c-blue); border-color:var(--c-blue); }
.circle-arrow.is-fill .ico-blue{ display:none; }
.circle-arrow.is-fill .ico-white{ display:block; }

/* ------------------------------------------------------------- 5. HEADER */
.header{
  position:fixed; top:0; left:0; z-index:100;
  width:100%; height:var(--header-h);
  border-bottom:1px solid rgba(255,255,255,.20);
  transition:background .35s, border-color .35s;
}
.header__inner{
  position:relative;
  display:flex; align-items:center;
  height:100%;
  padding:0 6.1rem;
}

/* 로고 172 x 35 */
.header__logo{ display:block; width:17.2rem; flex:0 0 auto; }
.header__logo-img{ width:100%; display:block; }
.header__logo-img--blue{ display:none; }

/* GNB : 18.667px / SemiBold / 자간 -25 — 화면 중앙 정렬
   간격 90 (시안은 6개 메뉴 기준 68 이었으나, 4개로 정리되며 헤더 폭에 맞춰 조정) */
.gnb{ position:absolute; left:50%; transform:translateX(-50%); }
.gnb__list{ display:flex; align-items:center; gap:9rem; }
.gnb__link{
  display:block;
  font-size:1.8667rem; font-weight:600; line-height:1;
  letter-spacing:-0.025em; color:var(--c-white);
  padding:1.2rem 0;
  transition:opacity .25s;
}
.gnb__link:hover{ opacity:.65; }

/* 우측 유틸 */
.header__util{ display:flex; align-items:center; margin-left:auto; }

.lang{ display:flex; align-items:center; gap:1.2rem; }
.lang__btn{
  position:relative;
  font-family:var(--f-en); font-weight:700; font-size:1.8667rem; line-height:1;
  color:var(--c-white); opacity:.30; padding-bottom:.7rem;
}
.lang__btn.is-active{ opacity:1; }
.lang__btn.is-active::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:currentColor;
}

/* 언어선택 버튼 141 x 44 / r22 */
.langsel{ margin-left:1.5rem; position:relative; }
.langsel__btn{
  display:flex; align-items:center;
  width:14.1rem; height:4.4rem; padding:0 2rem 0 1.1rem;
  border:1px solid rgba(255,255,255,.9); border-radius:2.2rem;
  color:var(--c-white);
}
.langsel__icon{
  width:2.1rem; height:2.1rem; flex:0 0 auto;
  object-fit:contain; max-width:none;      /* 플렉스 안에서 찌그러짐 방지 */
}
.langsel__text{
  margin-left:1.2rem; font-size:1.6rem; font-weight:600;
  letter-spacing:-0.025em; line-height:1;
}
.langsel__arrow{
  width:1.2rem; height:.6rem; margin-left:auto; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s;
}
.langsel.is-open .langsel__arrow{ transform:rotate(180deg); }

/* 햄버거 30 x 21 (바 3 / 6 간격 / 우측정렬 30·20·24) */
.hamburger{
  width:3rem; height:2.1rem; margin-left:2.7rem;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
}
.hamburger__bar{
  display:block; height:3px; background:var(--c-white); border-radius:1.5px;
  transition:width .3s, background .3s, transform .3s, opacity .3s;
}
.hamburger__bar:nth-child(1){ width:3rem; }
.hamburger__bar:nth-child(2){ width:2rem; }
.hamburger__bar:nth-child(3){ width:2.4rem; }
.hamburger:hover .hamburger__bar{ width:3rem; }

/* 스크롤 시 / 서브페이지 : 화이트 헤더 */
.header.is-scrolled,
.header--solid{
  background:var(--c-white);
  border-bottom-color:var(--c-line);
  box-shadow:0 2px 14px rgba(0,0,0,.05);
}
.header.is-scrolled .header__logo-img--white,
.header--solid .header__logo-img--white{ display:none; }
.header.is-scrolled .header__logo-img--blue,
.header--solid .header__logo-img--blue{ display:block; }
.header.is-scrolled .gnb__link,
.header--solid .gnb__link{ color:var(--c-ink); }
.header.is-scrolled .lang__btn,
.header--solid .lang__btn{ color:var(--c-ink); }
.header.is-scrolled .langsel__btn,
.header--solid .langsel__btn{ color:var(--c-ink); border-color:var(--c-line-2); }
.header.is-scrolled .hamburger__bar,
.header--solid .hamburger__bar{ background:var(--c-ink); }

/* 전체메뉴 열림 상태 */
.is-menu-open{ overflow:hidden; }
.is-menu-open .header{ background:var(--c-white); border-bottom-color:var(--c-line); }
.is-menu-open .header__logo-img--white{ display:none; }
.is-menu-open .header__logo-img--blue{ display:block; }
.is-menu-open .hamburger__bar{ background:var(--c-ink); }
.is-menu-open .hamburger__bar:nth-child(1){ width:3rem; transform:translateY(9px) rotate(45deg); }
.is-menu-open .hamburger__bar:nth-child(2){ opacity:0; }
.is-menu-open .hamburger__bar:nth-child(3){ width:3rem; transform:translateY(-9px) rotate(-45deg); }

/* 모바일 / 전체메뉴 패널 */
.mobile-menu{
  position:fixed; top:var(--header-h); left:0; z-index:99;
  width:100%; height:calc(100vh - var(--header-h));
  background:var(--c-white); overflow-y:auto;
  padding:4rem 4rem 8rem;
  animation:mm-in .3s ease both;
}
@keyframes mm-in{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} }
.mobile-menu__nav li + li{ border-top:1px solid var(--c-line); }
.mobile-menu__nav a{
  display:block; padding:2.4rem 0;
  font-size:2.4rem; font-weight:700; color:var(--c-ink); letter-spacing:-0.025em;
}
.mobile-menu__util{ margin-top:4rem; }
.lang--dark .lang__btn{ color:var(--c-ink); }

/* ------------------------------------------------------------- 6. FOOTER */
.footer{
  position:relative;
  background:var(--c-bg-soft);
  padding-top:10.7rem;    /* 위로가기 버튼(원)이 상단 경계에 걸침 */
}
/* 위로가기 104 x 103 : 푸터 상단선 위로 절반 돌출 */
.footer__top{
  position:absolute; left:50%; top:-5rem; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:10.4rem; height:10.4rem; border-radius:50%;
  background:var(--c-white); border:1px solid var(--c-line);
  transition:background .3s, border-color .3s;
}
.footer__top img{ width:1.6rem; height:auto; transition:transform .3s; }
.footer__top:hover{ border-color:var(--c-navy); }
.footer__top:hover img{ transform:translateY(-.4rem); }

.footer__inner{ width:var(--content); margin:0 auto; }

.footer__row{ display:flex; align-items:center; }
.footer__logo{ display:block; width:17.2rem; flex:0 0 auto; }

.fnb{ margin-left:3.8rem; }
.fnb__list{ display:flex; align-items:center; gap:5.8rem; }
.fnb__link{
  display:inline-flex; align-items:center;
  font-size:2.5333rem; font-weight:700; line-height:1;
  letter-spacing:-0.025em; color:var(--c-ink);
  transition:color .25s;
}
.fnb__link:hover{ color:var(--c-navy); }
.fnb__link--out img{ width:1.9rem; height:1.9rem; margin-left:1rem; }

/* FAMILY SITE 218 x 57 / r27 */
.family{ position:relative; margin-left:auto; width:21.8rem; }
.family__btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; height:5.7rem; padding:0 3.9rem 0 2.6rem;
  background:var(--c-bg-family); border-radius:2.85rem;
  font-family:var(--f-en); font-weight:600; font-size:1.7333rem;
  letter-spacing:0; color:var(--c-ink);
}
/* 목록 미확정 상태 : 외형은 시안 그대로, 동작만 비활성 */
.family[data-ready="false"] .family__btn{ cursor:default; }
.family__arrow{
  width:1.2rem; height:.6rem; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s;
}
.family.is-open .family__arrow{ transform:rotate(180deg); }
.family__list{
  position:absolute; left:0; bottom:calc(100% + .8rem); z-index:5;
  width:100%; padding:1rem 0; border-radius:1.2rem;
  background:var(--c-white); border:1px solid var(--c-line);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.family.is-open .family__list{ opacity:1; visibility:visible; transform:none; }
.family__list a{
  display:block; padding:1rem 2.6rem; font-size:1.6rem; color:var(--c-ink);
}
.family__list a:hover{ background:var(--c-bg-soft); color:var(--c-navy); }

/* 주소 / 연락처 */
.footer__addr{
  margin-top:9.8rem;
  font-size:1.6rem; line-height:1; letter-spacing:-0.025em;
}
.footer__addr-txt{ color:var(--c-gray); }
.footer__addr-name{ margin-left:.8rem; color:var(--c-ink); font-weight:700; }

.footer__contact{
  display:flex; align-items:center;
  margin-top:2.2rem;
  font-family:var(--f-en); font-weight:700; font-size:1.7333rem; line-height:1;
}
.footer__contact > div{ display:flex; align-items:center; }
.footer__contact > div:nth-child(1){ width:21.5rem; }
.footer__contact > div:nth-child(2){ width:21.2rem; }
.footer__contact dt{ color:var(--c-gray-lt); }
.footer__contact dd{ margin-left:2.5rem; color:var(--c-ink); }
.footer__contact dd a:hover{ text-decoration:underline; }

/* 카피라이트 바 1442 x 83 / r13 13 0 0 */
.copyright{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:7.6rem;
  height:8.3rem; padding:0 3.3rem 0 3.3rem;
  background:var(--c-navy); border-radius:1.3rem 1.3rem 0 0;
  color:var(--c-white);
}
.copyright__text{
  font-family:var(--f-en); font-weight:600; font-size:1.6rem; line-height:1;
  letter-spacing:0;
}
.copyright__text b{ font-weight:700; }
.copyright__links{ display:flex; align-items:center; gap:4.4rem; }
.copyright__links a{
  font-size:1.6rem; font-weight:500; line-height:1; letter-spacing:-0.025em;
  color:var(--c-blue-lt); transition:color .25s;
}
.copyright__links a.is-strong{ color:var(--c-white); }
.copyright__links a:hover{ color:var(--c-white); }