@charset "utf-8";

/* =========================================================
   jaewoo CI page
   Font  : NanumSquare(KR) + Roboto(EN)  - 바텍 사이트와 동일 조합
   Color : Jaewoo RED #db082f (Pantone 186C)
   ========================================================= */

:root{
  --red:#db082f;
  --black:#1a1a1a;
  --gray-900:#333;
  --gray-600:#666;
  --gray-400:#999;
  --gray-200:#ddd;
  --gray-100:#f0f0f0;
  --gray-050:#f7f7f7;
}

*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;height:auto;vertical-align:top;border:0;}
ul,li{list-style:none;}
a{color:inherit;text-decoration:none;}
em{font-style:normal;}

html{-webkit-text-size-adjust:100%;}

body{
  font-family:'NanumSquare', 'Roboto', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--gray-900);
  background:#fff;
  letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;
}

.inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- 헤더 ---------- */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--gray-200);
}
.header .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.header__logo img{height:30px;width:auto;mix-blend-mode:multiply;}

.gnb ul{display:flex;gap:40px;}
.gnb a{
  position:relative;
  display:block;
  padding:6px 0;
  font-size:16px;
  font-weight:700;
  color:var(--gray-600);
  transition:color .2s;
}
.gnb a:hover{color:var(--red);}
.gnb .on a{color:var(--black);}
.gnb .on a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:3px;
  background:var(--red);
}

/* ---------- 페이지 타이틀 ---------- */
.page-head{
  background:var(--gray-050);
  border-bottom:1px solid var(--gray-200);
  padding:64px 0 60px;
  text-align:center;
}
.page-head__title{
  font-family:'Roboto','NanumSquare',sans-serif;
  font-size:52px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:0.02em;
  color:var(--black);
}
.page-head__path{
  margin-top:16px;
  font-size:14px;
  font-weight:400;
  color:var(--gray-400);
}
.page-head__path span{margin:0 8px;color:var(--gray-200);}
.page-head__path strong{font-weight:700;color:var(--red);}

/* ---------- PDF 다운로드 버튼 ---------- */
.page-head .inner{position:relative;}
.btn-pdf{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 22px;
  border:1.5px solid var(--red);
  border-radius:3px;
  background:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--red);
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.btn-pdf:hover{background:var(--red);color:#fff;}
.btn-pdf__icon{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- 슬로건 ---------- */
.slogan{
  padding:110px 0 90px;
  text-align:center;
}
.slogan__role{
  font-size:15px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--red);
}
.slogan__kr{
  margin-top:20px;
  font-size:42px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-0.035em;
  color:var(--black);
}
.slogan__catch{
  margin-top:24px;
  font-size:28px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-0.035em;
  color:var(--red);
}

/* ---------- 섹션 공통 ---------- */
.section{padding:90px 0 110px;}
.section--gray{background:var(--gray-050);border-top:1px solid var(--gray-200);}

.section__title{
  position:relative;
  padding-left:20px;
  margin-bottom:48px;
  font-family:'Roboto','NanumSquare',sans-serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--black);
}
.section__title::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:26px;
  background:var(--red);
}

/* ---------- 이미지 쇼케이스 ---------- */
.showcase{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  padding:70px 40px;
  background:#fff;
  border:1px solid var(--gray-200);
}
.showcase__img{max-width:560px;width:100%;mix-blend-mode:multiply;}
.showcase--color{padding:0;overflow:hidden;}
.showcase--color .showcase__img{max-width:100%;}

/* ---------- 설명 문단 ---------- */
.desc{
  max-width:860px;
  margin:56px auto 0;
  text-align:center;
}
.desc p{
  font-size:19px;
  font-weight:400;
  line-height:1.85;
  letter-spacing:-0.03em;
  color:var(--gray-600);
}
.desc p + p{margin-top:26px;}
.desc em{font-weight:800;color:var(--black);}

/* ---------- 유의사항 ---------- */
.notice{
  position:relative;
  max-width:860px;
  margin:44px auto 0;
  padding-left:20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--gray-400);
  text-align:left;
}
.notice::before{
  content:'*';
  position:absolute;
  left:4px;
  top:0;
  color:var(--red);
}

/* ---------- 푸터 ---------- */
.footer{
  padding:44px 0;
  background:#fff;
  border-top:1px solid var(--gray-200);
  text-align:center;
}
.footer__logo{
  height:22px;
  width:auto;
  mix-blend-mode:multiply;
  opacity:.75;
}
.footer__copy{
  margin-top:16px;
  font-family:'Roboto','NanumSquare',sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:var(--gray-400);
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:900px){
  .header .inner{height:68px;}
  .header__logo img{height:24px;}
  .gnb ul{gap:22px;}
  .gnb a{font-size:14px;}

  .page-head{padding:48px 0 44px;}
  .page-head__title{font-size:40px;}
  .btn-pdf{position:static;transform:none;margin-top:24px;height:42px;font-size:14px;}

  .slogan{padding:76px 0 64px;}
  .slogan__role{font-size:13px;letter-spacing:0.06em;}
  .slogan__kr{font-size:30px;margin-top:14px;}
  .slogan__catch{font-size:21px;margin-top:18px;}

  .section{padding:64px 0 76px;}
  .section__title{font-size:24px;margin-bottom:32px;}
  .section__title::before{height:22px;width:4px;}

  .showcase{min-height:0;padding:48px 24px;}
  .showcase--color{padding:0;}
  .desc{margin-top:40px;}
  .desc p{font-size:16px;line-height:1.8;}
  .notice{font-size:13px;}
}

@media (max-width:560px){
  .gnb{display:none;}
  .page-head__title{font-size:32px;}
  .slogan__kr{font-size:25px;letter-spacing:-0.04em;}
  .slogan__catch{font-size:18px;}
  .slogan__role{font-size:12px;}
  .showcase{padding:36px 18px;}
  .showcase--color{padding:0;}
}

/* =========================================================
   인쇄 / PDF 저장용
   ========================================================= */
@media print{
  @page{size:A4;margin:14mm 12mm;}

  html,body{background:#fff;}
  body{
    font-size:11pt;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .inner{max-width:none;padding:0;}
  a{color:inherit;text-decoration:none;}

  /* 종이에 나오면 안 되는 요소 */
  .header,.btn-pdf,.page-head__path{display:none;}

  .page-head{
    padding:0 0 16pt;
    background:#fff;
    border-bottom:1px solid var(--gray-200);
  }
  .page-head__title{font-size:30pt;}

  .slogan{padding:26pt 0 20pt;}
  .slogan__role{font-size:9pt;}
  .slogan__kr{font-size:22pt;margin-top:12pt;}
  .slogan__catch{font-size:15pt;margin-top:12pt;}

  .section{padding:22pt 0 24pt;}
  .section--gray{background:#fff;border-top:0;break-before:page;}
  .section__title{font-size:15pt;margin-bottom:14pt;}
  .section__title::before{height:15pt;width:3pt;}

  .showcase{min-height:0;padding:30pt 20pt;}
  .showcase__img{max-width:360px;}

  .desc{margin-top:20pt;}
  .desc p{font-size:10.5pt;line-height:1.7;}
  .desc p + p{margin-top:12pt;}
  .notice{margin-top:14pt;font-size:8.5pt;}

  .footer{padding:16pt 0 0;border-top:1px solid var(--gray-200);}
  .footer__logo{height:13pt;opacity:1;}
  .footer__copy{margin-top:8pt;font-size:8.5pt;}
}