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

/* --------------------------------------------------------------- 1. FONT */
@import url("/api/modules/assets/hwashin-site/dist/sites/HSgroup/css/fonts.css");

/* ------------------------------------- 2. TOKENS / RESET / LAYOUT / 공통 */
:root{
  /* Color */
  --blue:#005BAC;
  --cyan:#00A6C7;
  --ink:#000000;
  --gray:#7D7D7D;
  --sub-bg:#F3F7F9;
  --footer-bg:#171B1F;
  --line:#DFE4E8;

  /* Layout */
  --content:1440px;
  --pad:40px;
  --radius:8px;

  /* Gaps (시안 실측) */
  --gap-24:24px;
  --gap-25:25px;
  --gap-26:26px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html{scroll-padding-top:100px;}
body{
  margin:0;
  font-family:'Noto Sans KR','Poppins',-apple-system,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

.container{
  width:100%;
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--pad);
}
@media (min-width:1520px){ .container{padding:0;} }

/* 영문 라벨 (Poppins) */
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:clamp(15px,1.481vw,21.33px);   /* 16pt */
  letter-spacing:-.015em;
  color:var(--blue);
  margin:0;
}
/* 섹션 헤딩 48px / lh1.4 */
.h2{
  font-weight:700;
  font-size:clamp(28px,3.704vw,53.33px);   /* 40pt */
  line-height:1.256;                        /* 시안 줄간격 67px */
  letter-spacing:normal;
  margin:0;
}
.lead{
  font-weight:500;                          /* Medium */
  font-size:clamp(14px,1.296vw,18.67px);    /* 14pt */
  color:var(--gray);
  margin:0;
}

/* ── view more 버튼 ─────────────────────────── */
/* 시안 실측: 165×54 · 좌패딩25 · 원32(우패딩11) · 텍스트 12pt SemiBold */
.btn-more{
  display:inline-flex;align-items:center;justify-content:space-between;
  width:clamp(126px,11.458vw,165px);
  height:clamp(42px,3.75vw,54px);
  padding:0 clamp(8px,.764vw,11px) 0 clamp(18px,1.736vw,25px);
  border:1px solid var(--line);border-radius:999px;
  background:#fff;
  font-family:'Poppins',sans-serif;font-weight:600;              /* SemiBold */
  font-size:clamp(13px,1.111vw,16px);color:var(--blue);          /* 12pt */
  transition:box-shadow .25s ease, transform .25s ease;
}
.btn-more:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px);}
.btn-more .plus{
  width:clamp(25px,2.222vw,32px);height:clamp(25px,2.222vw,32px);
  flex:none;border-radius:50%;
  background:var(--cyan);color:#fff;
  display:grid;place-items:center;line-height:1;
}
.btn-more .plus svg{width:37.5%;height:37.5%;display:block;}   /* 12 / 32, stroke 2px 고정 */
.plus-circle{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  display:grid;place-items:center;
  color:var(--cyan);line-height:1;
  background:rgba(255,255,255,.9);
  transition:background .25s ease,color .25s ease;
}
.plus-circle svg{width:16px;height:16px;display:block;}   /* + 16px 박스 */
.panel--open .plus-circle svg{width:26.7%;height:26.7%;}  /* 60px 원 기준 16px */

/* --------------------------------------------------- 5-1. 서브페이지 헤더 */
/* 메인 : 투명 헤더(히어로 위) · 서브 : 화이트 고정 헤더 */
.header--solid{
  position:relative;background:#fff;
  border-bottom:1px solid var(--line);
}
.header--solid .logo img{content:url("/api/modules/assets/hwashin-site/dist/sites/HSgroup/assets/icons/logo-blue.svg");}
.header--solid .gnb a{color:var(--ink);}
.header--solid .lang{border-color:var(--line);color:var(--ink);}
.header--solid .lang .globe{filter:none;}
.header--solid .burger span{background:var(--ink);}

/* ------------------------------------------------- 5-2. 전체메뉴(모바일) */
.mobile-menu{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,5.31vw,102px);
  background:var(--footer-bg);color:#fff;
}
.mobile-menu[hidden]{display:none;}
.mobile-menu__nav a{
  display:block;padding:14px 0;
  font-size:clamp(20px,2.4vw,28px);font-weight:700;
  color:rgba(255,255,255,.85);transition:color .2s;
}
.mobile-menu__nav a:hover{color:var(--cyan);}
.mobile-menu__close{
  position:absolute;top:22px;right:clamp(20px,5.31vw,102px);
  width:34px;height:34px;color:#fff;font-size:30px;line-height:1;
}

/* ============================================================
   HEADER
   ============================================================ */
/* 시안 실측 기준 (1920 아트보드)
   header h102 / padding 102 · logo 185×31 · pill 129×42
   globe 22 · KOR 16px · burger 34×25 (line 3px, 34/21/27, 우측정렬) */
.header{
  position:absolute;inset:0 0 auto;z-index:50;
  height:clamp(64px,5.31vw,102px);
  display:flex;align-items:center;
  padding:0 clamp(20px,5.31vw,102px);
  gap:40px;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.header .logo{width:clamp(124px,9.64vw,185px);}
.header .logo img{width:100%;}
.gnb{margin-left:auto;display:flex;align-items:center;gap:clamp(20px,3.1vw,60px);}
.gnb a{
  font-size:clamp(15px,.94vw,18px);font-weight:500;color:#fff;
  white-space:nowrap;transition:color .2s ease;
}
.gnb a:hover,.gnb a.is-active{color:var(--cyan);}
.header-util{
  margin-left:auto;display:flex;align-items:center;
  gap:clamp(14px,1.35vw,26px);
}

/* 다국어 선택 */
.lang{
  width:clamp(102px,6.72vw,129px);
  height:clamp(34px,2.19vw,42px);
  padding:0 clamp(14px,.99vw,19px) 0 clamp(8px,.52vw,10px);
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(255,255,255,.72);border-radius:999px;
  color:#fff;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(13px,.833vw,16px);letter-spacing:.01em;
  transition:background .25s ease;
}
.lang:hover{background:rgba(255,255,255,.12);}
.lang .globe{
  width:clamp(17px,1.146vw,22px);height:clamp(17px,1.146vw,22px);
  flex:none;filter:brightness(0) invert(1);
}
.lang .caret{
  width:clamp(11.2px,.802vw,15.4px);flex:none;display:block;
  color:#fff;
}
.lang .caret svg{width:100%;height:auto;display:block;}

/* 햄버거 — 우측정렬 3줄 (34 / 21 / 27) */
.burger{
  width:clamp(26px,1.77vw,34px);
  height:clamp(19px,1.302vw,25px);
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;padding:0;
}
.burger span{
  display:block;height:clamp(2px,.156vw,3px);
  background:#fff;border-radius:1px;transition:width .25s ease;
}
.burger span:nth-child(1){width:100%;}
.burger span:nth-child(2){width:61.8%;} /* 21 / 34 */
.burger span:nth-child(3){width:79.4%;} /* 27 / 34 */

/* 히어로가 없는 준비 페이지의 기본 흰색 헤더 */
.header.header--solid:not(.is-scrolled){
  position:relative;
  background:#fff;
  border-bottom-color:var(--line);
}
.header--solid .lang .globe{filter:brightness(0);}
.header--solid .lang .caret{color:var(--ink);}

/* 스크롤 고정 헤더 — 데스크톱 흰색 영역 100px */
.header.is-scrolled{
  position:fixed;
  inset:0 0 auto;
  height:100px;
  background:#fff;
  border-bottom-color:#e5e8eb;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.header.is-scrolled .logo img{content:url("/api/modules/assets/hwashin-site/dist/sites/HSgroup/assets/icons/logo-blue.svg");}
.header.is-scrolled .gnb a{color:var(--ink);}
.header.is-scrolled .lang{
  color:var(--ink);
  border-color:#cfd5da;
}
.header.is-scrolled .lang:hover{background:#f5f7f8;}
.header.is-scrolled .lang .globe{filter:brightness(0);}
.header.is-scrolled .lang .caret{color:var(--ink);}
.header.is-scrolled .burger span{background:var(--ink);}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER  — 시안 실측 (footer 5664~6200, h536)
   정책링크 y5709 중앙정렬 gap68 · 로고 185×30 @x240
   dt y5825 / dd y5855 · 컬럼 x525·925·1124·1327
   Family 280×54 @x820,y5943 · SNS y6056 · copy y6128
   ============================================================ */
.footer{background:var(--footer-bg);color:#fff;padding:clamp(26px,2.171vw,33px) 0 clamp(42px,3.487vw,53px);}
.footer__policy{
  display:flex;flex-wrap:wrap;justify-content:center;      /* 중앙정렬 */
  gap:clamp(18px,3.553vw,54px);
  padding-bottom:clamp(20px,2.632vw,40px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.footer__policy a{
  font-size:clamp(13px,1.404vw,21.33px);font-weight:500;line-height:1;  /* 16pt Medium */
  color:rgba(255,255,255,.75);transition:color .2s;
}
.footer__policy a:hover{color:#fff;}
.footer__policy a.is-point{color:var(--cyan);}

.footer__info{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(22px,5.132vw,78px);
  padding:clamp(36px,3.487vw,53px) 0 0;
}
.footer__logo{width:clamp(120px,12.171vw,185px);flex:none;margin-top:10px;margin-right:clamp(0px,1.447vw,22px);}  /* 상단 로고와 동일 */
.footer__logo img{width:100%;}
.finfo{min-width:0;margin:0;}   /* dl 기본 마진 제거 */
.finfo dt{
  font-family:'Poppins',sans-serif;font-weight:600;line-height:1;   /* 14pt SemiBold */
  font-size:clamp(12px,1.228vw,18.67px);letter-spacing:.02em;
  color:rgba(255,255,255,.92);
}
.finfo dd{
  margin:clamp(8px,.789vw,12px) 0 0;line-height:1;font-weight:500; /* 14pt Medium */
  font-size:clamp(13px,1.228vw,18.67px);color:rgba(255,255,255,.62);
  white-space:nowrap;
}

.family{
  margin:clamp(42px,4.605vw,70px) auto 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  width:clamp(200px,18.421vw,280px);
  height:clamp(44px,3.553vw,54px);
  padding:0 clamp(16px,1.579vw,24px);
  border-radius:999px;                                    /* 완전 라운드 */
  background:rgba(255,255,255,.10);
  font-family:'Poppins',sans-serif;font-weight:500;
  font-size:clamp(13px,1.228vw,18.67px);color:rgba(255,255,255,.9);
}
.family .p{
  color:var(--cyan);flex:none;
  width:clamp(13px,1.053vw,16px);height:clamp(13px,1.053vw,16px);   /* 16×16, 두께 2px */
  display:grid;place-items:center;
}
.family .p svg{width:100%;height:100%;display:block;}

.sns{display:flex;justify-content:center;gap:clamp(18px,1.711vw,26px);margin-top:clamp(32px,3.882vw,59px);}
.sns a{width:clamp(17px,1.447vw,22px);opacity:.9;transition:opacity .2s;}
.sns a:hover{opacity:1;}
.sns img{width:100%;filter:brightness(0) invert(1);}

.copy{
  margin:clamp(28px,3.289vw,50px) 0 0;text-align:center;
  font-family:'Poppins',sans-serif;font-weight:500;line-height:1;
  font-size:clamp(12px,1.228vw,18.67px);color:rgba(255,255,255,.62);
}
.copy b{font-weight:500;color:#fff;}


/* Footer policy dialogs: reference corners and inset native scroll region. */
.hs-legal{box-sizing:border-box;width:1280px;max-width:calc(100% - 48px);height:939px;max-height:calc(100dvh - 48px);margin:auto;padding:50px;border:0;border-radius:30px;background:#fff;color:#666;font-family:'Noto Sans KR',sans-serif;overflow:hidden;}
.hs-legal[open]{display:flex;flex-direction:column;gap:17px;}
.hs-legal::backdrop{background:rgba(0,0,0,.8);}
.hs-legal-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;}
.hs-legal-header h2{margin:0;font:700 24px/1.5 'Noto Sans KR',sans-serif;letter-spacing:-.025em;color:#333;}
.hs-legal-close{position:relative;flex:0 0 60px;width:60px;height:60px;border:0;border-radius:15px;background:#ccc;cursor:pointer;}
.hs-legal-close::before,.hs-legal-close::after{content:'';position:absolute;top:28px;left:14px;width:32px;height:4px;background:white;transform:rotate(45deg);}
.hs-legal-close::after{transform:rotate(-45deg);}
.hs-legal-close:hover{background:#aaa;}
.hs-legal :focus-visible{outline:2px solid #888;outline-offset:3px;}
.hs-legal-surface{display:flex;min-height:0;flex:1;padding:30px;overflow:hidden;border-radius:15px;background:#f2f2f2;}
.hs-legal-body{min-height:0;min-width:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 20px 0 0;font-size:16px;font-weight:400;color:#666;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere;scrollbar-color:#999 #fff;scrollbar-width:auto;}
.hs-legal-body::-webkit-scrollbar{width:15px;}
.hs-legal-body::-webkit-scrollbar-track{background:#fff;border-radius:8px;}
.hs-legal-body::-webkit-scrollbar-thumb{background:#999;border:3px solid #fff;border-radius:8px;}
.hs-legal-body p{margin:0 0 16px;}
.hs-legal-section{padding:0;margin-top:32px;border:0;}
.hs-legal-section h3{margin:0 0 14px;font-size:18px;line-height:1.7;font-weight:500;color:#4d4d4d;}
.hs-legal-body h4{margin:22px 0 8px;font-size:17px;line-height:1.7;font-weight:500;color:#555;}
.hs-legal-body .hs-legal-item{padding-left:24px;text-indent:-24px;}
.hs-legal-list{margin:0 0 8px;padding-left:16px;list-style:none;}
.hs-legal-body .hs-legal-contact{margin:0;padding:3px 0 3px 16px;border:0;background:none;}
@media(max-width:640px){.hs-legal{padding:20px;max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:30px;}.hs-legal-close{flex-basis:40px;width:40px;height:40px;border-radius:15px;}.hs-legal-close::before,.hs-legal-close::after{top:18px;left:8px;width:24px;}.hs-legal-surface{padding:20px 16px;}.hs-legal-body{padding-right:12px;font-size:15px;}.hs-legal-section h3{font-size:17px;}.hs-legal-body h4{font-size:16px;}}