/* ======================================== 0) Base / Reset / Tokens
======================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--body)/1.65 "pretendard","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{max-width:100%;}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

/* 공통 컨테이너 */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto;}

/* 유틸리티 */
.u-center{text-align:center}
.u-mt-8{margin-top:8px}
.u-mt-12{margin-top:12px}
.u-mt-16{margin-top:16px}
.u-mt-20{margin-top:20px}
.u-mb-20{margin-bottom:20px}

/* ======================================== 1) Components
======================================== */
/* 1-1) Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid transparent;transition:transform .18s ease,border-color .18s ease,background .18s ease;font-weight:600;}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:#fff}
@media (min-width:768px){
   .btn{height:46px;padding:0 18px} 
  }

/* ======================================== 2) Global Section scaffold
======================================== */
.section{padding-top:var(--section-pt);padding-bottom:var(--section-pb);background:var(--bg-black);}
.section__head{margin-bottom:16px;text-align:center}
.section__title{font-size: 64px;color: #2b2f55;font-family: 'Noto Serif KR', serif;font-weight: 900;margin-bottom: 24px;}
.section__desc{color:var(--muted);margin-top:8px;font-size:clamp(14px,3.6vw,16px)}
@media (min-width:768px){
  .section__head{margin-bottom:22px}
  .section__desc{margin-top:10px}
}
@media (min-width:1280px){
  .section__head{margin-bottom:26px}
}

/* ========================================  
          Main Visual (slick)
======================================== */
.slider-wrap {position: relative;width: 100%;margin: 0 auto;}

/* 슬라이드 기본 */
.slider-wrap .slk .slick-slide {position: relative;width: 100%;max-width: 100vw;min-height: clamp(420px, 70vh, 780px);}

/* 배경 오버레이 */
.slider-wrap .slk .slick-slide::after {content: "";position: absolute;inset: 0;z-index: 0;background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45));pointer-events: none;}

/* 텍스트 컨테이너 */
.slider-wrap .slk .slick-slide .slide-inner {position: relative;z-index: 1;display: grid;align-content: center;justify-items: start;gap: clamp(10px, 2vh, 20px);
width: min(1400px, 92vw);margin: 0 auto;min-height: clamp(420px, 70vh, 780px);padding-block: clamp(60px, 15vh, 160px);text-align: left;}

/* 텍스트 */
.slider-wrap .slk .slick-slide .slide-inner h2 {color: var(--white);font-size: clamp(40px, 4.2vw, 84px);line-height: 1.05;}
.slider-wrap .slk .slick-slide .slide-inner p {color: var(--white);font-size: clamp(20px, 1.8vw, 36px);line-height: 1.7;margin-top: clamp(8px, 1.4vh, 14px);margin-bottom: clamp(8px, 1.6vh, 16px);}

@media (max-width: 767px){
  /* slick 컨테이너 전부 뷰포트 높이 고정 */
  .slider-wrap .slk,
  .slider-wrap .slk .slick-list,
  .slider-wrap .slk .slick-track,
  .slider-wrap .slk .slick-slide{
    height: calc(100svh - 88px);          /* iOS 주소창 대응 */
    min-height: calc(100svh - 88px);
  }

  /* 오버레이도 전체 덮도록 보장 */
  .slider-wrap .slk .slick-slide::after{ inset:0; }

  /* 텍스트 영역 정렬 및 상하 패딩 보정
     고정헤더(--bar-h) + 노치(safe-area) 고려 */
  .slider-wrap .slk .slick-slide .slide-inner{
    width: 100%;
    min-height: calc(100svh - var(--bar-h));
    padding-inline: 24px;
    padding-top:  calc(12vh + env(safe-area-inset-top) + var(--bar-h));
    padding-bottom: calc(10vh + env(safe-area-inset-bottom));
    display:grid; align-content:center; justify-items:center; text-align:center;
  }

  /* 필요 시 dvh 대체도 허용(일부 브라우저) */
  @supports (height: 100dvh){
    .slider-wrap .slk,
    .slider-wrap .slk .slick-list,
    .slider-wrap .slk .slick-track,
    .slider-wrap .slk .slick-slide{
      height: calc(100dvh - 88px);          /* iOS 주소창 대응 */
    min-height: calc(100dvh - 88px);
    }
    .slider-wrap .slk .slick-slide .slide-inner{
      min-height: calc(100dvh - var(--bar-h));
      padding-top:  calc(12vh + env(safe-area-inset-top) + var(--bar-h));
      padding-bottom: calc(10vh + env(safe-area-inset-bottom));
    }
  }
}

/* ---------- 네비게이션 ---------- */
.slider-nav {position: absolute;left: 50%;bottom: 6px;transform: translateX(-50%);display: flex;align-items: center;gap: 14px;pointer-events: auto;z-index: 2;}
.slider-nav button {width: 36px;height: 36px;border: 0;background: transparent;display: grid;place-items: center;color: #fff;opacity: .8;cursor: pointer;}
.slider-nav svg {width: 28px;height: 28px;stroke: currentColor;stroke-width: 2;fill: none;}
.slider-nav .counter {font-family: "Times New Roman", serif;font-size: 20px;color: #fff;padding: 6px 0;}


/* ======================================== 4) Materials (카드 1→2→4)
======================================== */
.section-material {width: 100%;background: #fff;padding: 120px 0;}

.section-material .inner {width: 1400px;margin: 0 auto;}

.section-material .inner > h2 {font-size: 64px;color: #2b2f55;font-family: 'Noto Serif KR', serif;font-weight: 900;margin-bottom: 24px;}

.section-material .inner > p {font-size: 32px;color: #111;font-weight: 400;line-height: 1.25;}

.material-list {display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 80px;gap: 20px;}

.material-list li {position: relative;width: calc(25% - 30px); /* 4열 기본 */overflow: hidden;border-radius: 10px;}

.material-list .img img {width: 100%;display: block;}

.material-list .overlay {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.75);opacity: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--white);transition: opacity 0.5s ease;}

.material-list li:hover .overlay {opacity: 1;}

.material-list .overlay .name {font-size: 28px;font-weight: 700;margin-bottom: 8px;color: var(--white);}

.material-list .overlay .desc {font-size: 22px;font-weight: 400;color: var(--white);}

/* 반응형 - 2열 고정 */
@media (max-width: 1280px) {
  .section-material .inner { width: 92%; }
  .section-material .inner > h2 { font-size: 48px; }
  .section-material .inner > p { font-size: 24px; }
  .material-list li { width: calc(50% - 10px); } /* 2열 */
}

@media (max-width: 600px) {
  .section-material .inner > h2 { font-size: 36px; }
  .section-material .inner > p { font-size: 20px; }
  .material-list li { width: calc(50% - 10px); } /* 여전히 2열 유지 */
}

/* ======================================== 5) Values (2×2 카드)
======================================== */
/* 섹션 배경 */
.kaltek-values{background:url('/imgs/sec_02_bg.png') no-repeat center/cover; padding:clamp(40px,5vw,72px) 0;}
/* 컨테이너 */
.kv-inner {width: min(1400px, 92%);margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;gap: clamp(20px, 3vw, 40px);flex-wrap: wrap; /* 줄바꿈 허용 */}

/* 헤드: 로고 + 타이틀 */
.kv-head {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;white-space: nowrap;flex: 0 0 auto;min-width: 300px; /* 최소 보장 */}

/* 로고 크기 고정 비율 + 축소 방지 */
.kv-logo {width: clamp(200px, 18vw, 274px);height: auto;flex-shrink: 0;}

/* 타이틀: 반응형 비율 폰트 */
.kv-title {margin: 0;font-weight: 700;font-size: clamp(36px, 5vw, 64px);line-height: 1.1;color: var(--white);flex-shrink: 0;}
.kv-title .kaltek-name {color: var(--white);font-family: 'Noto Serif KR', serif;font-weight: 900;}

/* 리스트 */
.kv-list {display: grid;grid-template-columns: repeat(2, minmax(320px, 1fr));max-width: 1020px;gap: 20px;list-style: none;padding: 0;margin: 0;flex: 1 1 auto; /* 남은공간 사용 */}


/* 카드: 좌우 32px, 동일 높이 */
.kv-item{display:flex; align-items:flex-start; gap:16px;background:rgba(255,255,255,.25);border:3px solid transparent; border-radius:12px;padding:0 32px;min-height:var(--card-min-h);transition:all .25s ease;}

/* 아이콘: 상단 40px, 80×80, contain */
.kv-ico{flex:0 0 80px; width:80px; height:80px; margin-top:40px;background-repeat:no-repeat; background-position:center; background-size:contain;}

/* 텍스트 블록: 위 64px, 아래 48px */
.kv-body{padding:64px 0 48px;}
.kv-body h3{margin:0 0 8px; font-weight:700; font-size:32px; color:var(--white);}
.kv-body p{margin:0; font-size:24px; line-height:1.6; color:var(--white);}

/* 호버: 흰 배경, 유색 테두리, 텍스트/아이콘 변경 */
.kv-item:hover{background:#fff; border-color:var(--brand); transform:translateY(-2px);}
.kv-item:hover .kv-body h3{color:var(--brand);}
.kv-item:hover .kv-body p{color:#111;}

.ico-customer{background-image:url('/imgs/icons/customer_focus_w.png');}
.ico-tech{background-image:url('/imgs/icons/tech_innovation_w.png');}
.ico-quality{background-image:url('/imgs/icons/quality_first_w.png');}
.ico-trust{background-image:url('/imgs/icons/trust_accountability_w.png');}

.kv-item:hover .ico-customer{background-image:url('/imgs/icons/customer_focus_blue.png');}
.kv-item:hover .ico-tech{background-image:url('/imgs/icons/tech_innovation_blue.png');}
.kv-item:hover .ico-quality{background-image:url('/imgs/icons/quality_first_blue.png');}
.kv-item:hover .ico-trust{background-image:url('/imgs/icons/trust_accountability_blue.png');}

/* 반응형 */
@media (max-width:1200px){
   .kv-title{font-size:56px;} 
  }
@media (max-width: 960px) {
  .kv-inner {  flex-direction: column;  align-items: center;}
  .kv-head {  flex-direction: row;  align-items: center;  justify-content: center;  gap: 20px;}
  .kv-logo {  width: clamp(180px, 25vw, 240px);}
  .kv-title {  font-size: clamp(32px, 6vw, 48px);}
}
@media (max-width:720px){
  .kv-list{grid-template-columns:1fr; width:100%;}
  .kv-title{font-size:30px;}
  .kv-body h3{font-size:28px;} .kv-body p{font-size:20px;}
  .kv-item{min-height:160px; padding:0 24px;}
  .kv-ico{width:64px; height:64px; margin-top:32px;}
  .kv-body{padding:48px 0 36px;}
}

/* ======================================== 6) News (행형 리스트)
======================================== */
.section--news{background:#fff;color:#222}
.section--news .section__desc {font-size: 32px;color: #111;font-weight: 400;line-height: 1.25;margin-bottom: 40px;}
#newsTitle {font-size: 64px;color: #2b2f55;font-family: 'Noto Serif KR', serif;font-weight: 900;margin-bottom: 24px;line-height: 1;}
#newsTitle img {transform: translateY(-7px);}
/* ======================================== 7) Footer Top Navigation
======================================== */
.footer-top{background:#000;color:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.footer-top__inner{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:24px var(--gutter);display:grid;grid-template-columns:1fr;gap:16px;}
.footer-top__heading{font-size:15px;font-weight:900;margin-bottom:8px;letter-spacing:.01em}
.footer-top__heading-link{color:#fff}
.footer-top__list{display:grid;gap:8px}
.footer-top__link{color:var(--muted);font-size:14.5px}
.footer-top__link:hover{color:#fff}

@media (min-width:768px){
  .footer-top__inner{grid-template-columns:repeat(3,1fr);gap:18px;padding:28px var(--gutter)}
}
@media (min-width:1024px){.footer-top__inner{grid-template-columns:repeat(5,1fr);gap:22px;padding:34px var(--gutter)}
.footer-top__heading{margin-bottom:10px;font-size:16px}
.footer-top__link{font-size:15px}}
@media (min-width:1280px){
   .footer-top__inner{gap:24px;padding:38px var(--gutter)} 
  }

/* ======================================== 8) Footer Bottom (회사 정보)
======================================== */
.site-footer{background:#000;color:#cfd6e4}
.footer__inner{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:22px var(--gutter) 56px;}
.corp-info__brand{font-weight:1000;font-size:22px;color:#fff;margin-bottom:12px;letter-spacing:.02em}
.corp-info__grid{display:grid;gap:10px}
.corp-info__dl{display:grid;gap:6px;font-size:14px}
.corp-info__dl dt{opacity:.8}
.corp-info__dl dd{opacity:.95}
.corp-info__copy{margin-top:16px;font-size:13px;color:#9aa2b2}

@media (min-width:768px){
  .footer__inner{padding:26px var(--gutter) 64px}
.corp-info__grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (min-width:1024px){
  .footer__inner{padding:30px var(--gutter) 72px}
.corp-info__brand{font-size:24px;margin-bottom:14px}
.corp-info__dl{font-size:14.5px}
}
@media (min-width:1280px){
  .footer__inner{padding:32px var(--gutter) 80px}
  .corp-info__grid{grid-template-columns:repeat(3,1fr)}
}


/* ===================================================== TYPOGRAPHY TEMPLATE OVERRIDES - 요청 템플릿 변수 적용 - 기존 값은 그대로 두고, 아래에서 일괄 덮어쓰기
===================================================== */

/* 3) 섹션 공통 */
.section__title{font-size: var(--fs-sec-title);line-height: var(--lh-sec-title);}
.section__desc{font-size: var(--fs-sec-desc);line-height: var(--lh-sec-desc);}

/* 4) 메인 비주얼(슬라이더) 텍스트 */
.slider-wrap .slk .slick-slide .slide-inner h2{font-size: var(--fs-sec-title);line-height: var(--lh-sec-title);}
.slider-wrap .slk .slick-slide .slide-inner p{font-size: var(--fs-sec-desc);line-height: var(--lh-sec-desc);}

/* 5) Materials 섹션 */
.section-material .inner > h2{font-size: var(--fs-sec-title);line-height: var(--lh-sec-title);}
.section-material .inner > p{font-size: var(--fs-sec-desc);line-height: var(--lh-sec-desc);font-weight: 500;}
.material-list .overlay .name{font-size: var(--fs-head);line-height: var(--lh-head);}
.material-list .overlay .desc{font-size: var(--fs-body);line-height: var(--lh-body);}

/* 6) Values 섹션 */
.kv-title{font-size: var(--fs-sec-title);line-height: var(--lh-sec-title);}
.kv-body h3{font-size: var(--fs-head);line-height: var(--lh-head);}
.kv-body p{font-size: var(--fs-body);line-height: var(--lh-body);}

/* 7) News 섹션 */
.section--news .section__desc{font-size: var(--fs-sec-desc);line-height: var(--lh-sec-desc);font-weight: 500;}
#newsTitle{font-size: var(--fs-sec-title);line-height: var(--lh-sec-title);}

/* 8) Footer */
.footer-top__heading{font-size: var(--fs-head);line-height: var(--lh-head);}
.footer-top__link{font-size: var(--fs-body);line-height: var(--lh-body);}
.corp-info__brand{font-size: var(--fs-head);line-height: var(--lh-head);}
.corp-info__dl{font-size: var(--fs-body);line-height: var(--lh-body);}
.corp-info__copy{font-size: clamp(12px, 1.2vw, 14px); /* 카피라이트는 한 단계 더 작게 */line-height: 1.5;}