@charset "utf-8";
/* ==========================================================================
   HWASHIN GROUP — responsive.css
   ※ 항상 마지막에 로드합니다.
   1521↑     시안 1:1 (콘텐츠 1440 고정)
   1520~1025 콘텐츠 유동 · clamp() 로 타이포/여백 비례 축소
   1024~769  태블릿 — GNB → 전체메뉴, 그리드 재구성
   768↓      모바일 — 전 섹션 1단
   ========================================================================== */

/* ============================================================
   TABLET  ≤1024
   ============================================================ */
@media (max-width:1024px){
  :root{--pad:32px;}
  .gnb{display:none;}
  .header-util{margin-left:auto;}
  .header.is-scrolled{height:76px;}

  .hero{height:auto;min-height:0;aspect-ratio:16/12;max-height:none;}
  .hero__title{font-size:clamp(40px,7.4vw,76px);}
  .hero__desc{font-size:clamp(14px,1.7vw,18px);}

  .about{padding-top:80px;}
  .stats{grid-template-columns:repeat(2,1fr);gap:24px;}
  .stat__num{font-size:clamp(40px,6.0vw,58px);}

  .product__head{flex-direction:column;align-items:flex-start;gap:16px;}
  .product__head .h2{text-align:left;}
  .panels{grid-template-columns:1fr 1fr;}
  .panel--open{grid-column:1 / -1;aspect-ratio:16/10;}

  .esg__grid{grid-template-columns:1fr;gap:24px;}
  .esg__main{min-height:0;aspect-ratio:16/9;}
  .esg__right{grid-template-columns:repeat(3,1fr);gap:20px;}
  .esg__banner{aspect-ratio:16/6;}

  .news__grid{grid-template-columns:1fr;gap:36px;}
  .ir__grid{grid-template-columns:1fr;gap:20px;}
  .ir-card{aspect-ratio:16/6;}
  .ir-card strong{font-size:clamp(18px,3.2vw,30px);}

  .footer__info{gap:24px 36px;}
}

/* ============================================================
   MOBILE  ≤768
   ============================================================ */
@media (max-width:768px){
  :root{--pad:20px;--radius:6px;}
  .btn-more{min-width:140px;white-space:nowrap;}
  .header{height:60px;padding:0 20px;gap:16px;}
  .header.is-scrolled{height:60px;}
  .header .logo{width:112px;}
  .header-util{gap:12px;}
  .lang{width:88px;height:30px;padding:0 10px 0 7px;font-size:11px;}
  .lang .globe{width:15px;height:15px;}
  .lang .caret{width:9.1px;}
  .burger{width:24px;height:18px;}
  .burger span{height:2px;}

  .hero{aspect-ratio:9/13;}
  .hero__inner{padding:0 20px;justify-content:flex-end;padding-bottom:120px;}
  .hero__title{font-size:clamp(34px,10.5vw,52px);}
  .hero__desc{margin-top:18px;font-size:14px;}
  .hero__tabs{width:calc(100% - 40px);gap:5px;}
  .hero__tabs button{width:auto;flex:1;}
  .hero__tabs .label{font-size:11px;}
  .hero__tabs .bar{margin-top:8px;height:2px;}

  .about{padding-top:60px;}
  .about .btn-more{width:max-content;height:48px;padding:0 5px 0 22px;gap:10px;}
  .about .btn-more .plus{width:36px;height:36px;font-size:18px;}
  .stats{grid-template-columns:1fr;gap:16px;}
  .stat__img{aspect-ratio:16/9;}
  .stat__num{font-size:44px;}

  .product{padding-top:60px;}
  .product__stage{padding:36px 0;}
  .panels{grid-template-columns:1fr;gap:14px;}
  .panel--open{aspect-ratio:1/1;}
  .panel--glass{aspect-ratio:16/7;}

  .esg{padding-top:60px;}
  .esg__main{aspect-ratio:4/5;padding:28px 24px;}
  .esg__right{grid-template-columns:1fr;gap:14px;}
  .esg-card{aspect-ratio:16/9;}
  .esg-card--active{aspect-ratio:1/1;padding-top:12%;}
  .esg-card .mark{font-size:64px;}
  .esg__banner{aspect-ratio:auto;padding:32px 24px;}
  .esg__banner .btn-more{height:46px;padding:0 6px 0 20px;}
  .esg__banner .btn-more .plus{width:34px;height:34px;font-size:18px;}

  .news{margin-top:60px;padding:56px 0;}
  .notice__list .tit{white-space:normal;}
  .notice__list a{gap:14px;}

  .ir{padding:60px 0;}
  .ir-card{aspect-ratio:auto;padding:26px 24px;}
  .ir-card .arw{margin-top:14px;}

  .footer__policy{gap:12px 22px;}
  .footer__policy a{font-size:13px;}
  .footer__info{flex-direction:column;gap:22px;}
  .finfo dd{white-space:normal;}
  .family{width:100%;min-width:0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .hero__video{display:none;}          /* 배경 이미지로 대체 */
}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}