@charset "utf-8";

/* =========================================================
   GC PARTNERS - main.css (full replacement)
   ========================================================= */

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, Arial, sans-serif;
  color:#111;
  background:#fff;
  line-height:1.5;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

/* ---------- Tokens ---------- */
:root{
  --hdh: 92px;
  --container: 1760px;
  --px: 34px;
  --radius: 18px;
  --shadow: 0 14px 30px rgba(10,12,18,.10);
  --line: rgba(16,18,24,.10);

  --brand: #f00088;
  --blue: #1565ff;
  --text-sub: rgba(16,18,24,.72);

  --header-bg: rgba(245,246,248,.96);
}

/* ---------- Layout Helpers ---------- */
.container{
  max-width: var(--container);
  margin:0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

/* =========================================================
   Header
   ========================================================= */
#header{
  position: fixed;
  top:0; left:0; width:100%;
  z-index: 9999;

  height: var(--hdh);
  display:flex;
  align-items:center;

  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(15, 20, 30, .08);

  color:#111;
}
#header.scrolled{
  background: var(--header-bg);
  box-shadow: 0 6px 22px rgba(15, 20, 30, .10);
}

.header-inr{
  width:100%;
  display:flex;
  align-items:center;
  gap: 22px;
}
.brand{ display:flex; align-items:center; min-width: 260px; }
.brand-logo{
  height: 60px;
  width: auto;
}

/* GNB right-aligned, immediately left of CTA */
.gnb{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.gnb ul{
  display:flex;
  align-items:center;
  gap: 26px;
}
.gnb a{
  display:inline-block;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.02em;
  color:#111;
  padding: 10px 4px;
  opacity: .92;
  transition: opacity .15s ease;
}
.gnb a:hover{ opacity:1; }

/* CTA */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.btn-cta{
  background: var(--brand);
  color:#fff;
  box-shadow: 0 10px 22px rgba(240,0,136,.22);
}
.btn-cta:hover{ filter: brightness(0.98); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  min-height: 100vh;
  height: 100vh;
  color:#fff;
  overflow:hidden;
  padding-top: var(--hdh);

  background-image:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.18) 100%),
    url('/img/hero_main.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-inr{
  height: calc(100vh - var(--hdh));
  display:flex;
  align-items: flex-start;
  justify-content:flex-start;
  padding-top: 120px;   
  padding-bottom: 56px;
}
.hero-copy{ max-width: 1240px; }
.eyebrow{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .92;
  margin-bottom: 10px;
}
.hero h1{
  margin:0 0 18px;
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 950;
}
.hero-sub{
  margin:0 0 22px;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(255,255,255,.86);
  max-width: 70ch;
}
.hero-tags{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  font-size: 18px;
  font-weight: 900;
  color:#fff;
}
.tag:nth-child(1){ box-shadow: inset 0 0 0 1px rgba(240,0,136,0.35); }
.tag:nth-child(2){ box-shadow: inset 0 0 0 1px rgba(0,160,240,0.35); }
.tag:nth-child(3){ box-shadow: inset 0 0 0 1px rgba(64,80,88,0.35); }

/* =========================================================
   Sections
   ========================================================= */
.section{
  min-height: 100vh;
  padding: 150px 0;
  background:#fff;
}
.section-mkt{ background:#f7f8fa; }

.section-head{ margin-bottom: 28px; }
.section-label{
  display: inline-block;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--blue);
  margin-bottom: 10px;
}
.section-title{
  margin:0 0 14px;
  font-size: 50px;
  line-height: 1.18;
  letter-spacing: -0.04em;
  font-weight: 950;
}
.section-desc{
  margin:0;
  font-size: 20px;
  color: var(--text-sub);
  line-height: 1.2;
}
.section-desc--long{ max-width: 1800px; }

/* Business Area 01 layout */
.split{
  margin-top: 70px;
  display:grid;
  grid-template-columns: 3fr 1px 2fr;
  gap: 44px;
  align-items: start;
}
.split-divider{
  width:1px;
  height: 100%;
  background: rgba(16,18,24,.10);
}
.subhead h3{
  margin: 0 0 1px;
  font-size: 40px;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.subhead p{
  margin:0 0 18px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-sub);
}

/* --- Minimal additions for the new copy (keep design) --- */
.lead{
  margin: 0 0 14px;
  font-weight: 900;
  color: rgba(16,18,24,.78);
}
.micro-head{
  margin: 6px 0 14px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(16,18,24,.82);
}
.bullet-note{
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(16,18,24,.10);
  border-radius: 14px;
  background: rgba(16,18,24,.02);
  font-size: 18px;
  line-height: 1.45;
  color: rgba(16,18,24,.78);
}

/* Cards */
.cards{
  display:grid;
  gap: 18px;
}
.cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cards-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.mkt-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* 3x2 */

.card{
  background:#fff;
  border: 1px solid rgba(16,18,24,.10);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(15, 20, 30, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover,
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(10,12,18,.10);
}
.card-img{
  aspect-ratio: 16 / 9;
  background:#0b1320;
  overflow:hidden;
}
.card-img img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.card-body{ padding: 16px 16px 18px; }
.card-kicker{
  font-size: 25px;
  font-weight: 900;
  color: rgba(16,18,24,.70);
  margin-bottom: 8px;
  text-align: center;
}
.card-title{
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-align: center;
}
.card-text{
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
  color: rgba(16,18,24,.72);
  text-align: center;

}

/* Business Area 02 header row */
.section-head--mkt .section-mini{
  margin: 0 0 1px;
  font-size: 30px;
  color: rgba(16,18,24,.72);
}
.section-head-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.btn-ghost{
  background:#fff;
  border: 1px solid rgba(16,18,24,.12);
  color:#111;
}
.btn-ghost:hover{
  box-shadow: 0 10px 20px rgba(15, 20, 30, .08);
}

/* empty spacer card for 3x2 grid alignment */
.card-empty{background:transparent;border:0;box-shadow:none;}
.card-empty .card-img{background:transparent;}
.card-empty:hover{transform:none;box-shadow:none;}
@media (max-width: 1200px){ .card-empty{display:none;} }

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:#1f1f1f;
  color: rgba(255,255,255,.88);
  padding: 38px 0;
}
.footer-inr{
  display:flex;
  gap: 24px;
  align-items:stretch;
  justify-content: space-between;
}
.footer-left{
  display: flex;
  flex-direction: column;
}

.footer-logo-box{
  margin-top: auto;
  padding: 12px 18px;
  background: #f4f5f7;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.footer-logo{ height: 56px; width:auto; margin-top: auto; }
.footer-top{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 10px;
}
.footer-link{
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.footer-link:hover{ text-decoration: underline; }
.footer-info{
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255,255,255,.76);
}
.footer-company{
  font-weight: 950;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}
.footer-mail{ color: rgba(255,255,255,.92); text-decoration: underline; }
.footer-note{ margin-top: 8px; color: rgba(255,255,255,.70); }
.footer-copy{ margin-top: 10px; color: rgba(255,255,255,.60); }

/* =========================================================
   Responsive
   ========================================================= */

/* 기본(PC 포함)에서는 모바일 메뉴 숨김 */
.mnav-btn{ display:none; }
.mnav{ display:none; }

@media (max-width: 1200px){
  :root{ --px: 22px; --hdh: 86px; }
  .gnb a{ font-size: 18px; }
  .brand{ min-width: 210px; }
  .hero h1{ font-size: 56px; }
  .split{ grid-template-columns: 1fr; gap: 26px; }
  .split-divider{ display:none; }
  .cards-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mkt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){

  /* 카드 1열 */
  .cards-3, .cards-2, .mkt-grid{ grid-template-columns: 1fr; }

  /* 1) 토큰 */
  :root{
    --px: 16px;
    --hdh: 72px;
  }

  /* 2) Header: 모바일에서는 GNB 숨기고 햄버거 보이기 */
  .gnb{ display:none; }
  .brand-logo{ height: 40px; }
  .btn{ height: 44px; padding: 0 14px; font-weight: 900; }

  /* PC용 CTA 숨기기 */
  .header-cta{ display:none; }

  /* 햄버거 버튼 */
  .mnav-btn{
    display:inline-flex;
    flex-direction: column;
    justify-content:center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(16,18,24,.12);
    background:#fff;
    border-radius: 12px;
    padding:0;
  }
  .mnav-btn span{
    display:block;
    width: 18px;
    height: 2px;
    background:#111;
    margin: 0 auto;
  }

  /* 모바일 메뉴 패널 */
  .mnav{
    display:none;
    position: fixed;
    top: var(--hdh);
    left:0;
    width:100%;
    background:#fff;
    border-top: 1px solid rgba(16,18,24,.10);
    box-shadow: 0 14px 30px rgba(10,12,18,.14);
    z-index: 9998;
  }
  .mnav-inr{
    padding: 14px 16px 18px;
    display:flex;
    flex-direction: column;
    gap: 10px;
  }
  .mnav-link{
    display:block;
    padding: 12px 10px;
    border-radius: 12px;
    font-weight: 950;
    font-size: 16px;
    letter-spacing: -0.02em;
    color:#111;
    background: rgba(16,18,24,.04);
  }
  .mnav-cta{
    width:100%;
    height: 48px;
    margin-top: 6px;
  }
  #header.is-menu-open .mnav{ display:block; }

  /* 3) Hero */
  .hero{ height:auto; min-height:90vh; padding-top:150px; }
  .hero-inr{ height:auto; padding:44px var(--px) 54px; align-items:center; }
  .hero-copy{ max-width:100%; }
  .eyebrow{ font-size:15px; margin-bottom:10px; }
  .hero h1{ font-size:35px; line-height:1.12; margin-bottom:14px; }
  .hero-sub{ font-size:13px; line-height:1.6; margin-bottom:18px; }
  .tag{ font-size:13px; padding:8px 12px; }

  /* 4) Sections */
  .section{ padding:64px 0; min-height:auto; }
  .section-label{ font-size:12px; padding-bottom:2px; border-bottom-width:2px; margin-bottom:10px; }
  .section-title{ font-size:32px; line-height:1.18; margin-bottom:12px; }
  .section-desc{ font-size:15px; line-height:1.7; }

  /* 5) Split */
  .split{ margin-top:32px; gap:20px; }
  .subhead h3{ font-size:22px; margin-bottom:2px; }
  .subhead p{ font-size:14px; line-height:1.3; margin:0 0 14px; }

  /* added elements */
  .lead{ font-size:13px; margin:0 0 12px; }
  .micro-head{ font-size:16px; margin: 2px 0 12px; }
  .bullet-note{ font-size:13px; line-height:1.2; padding: 12px 12px; }

  /* 6) Cards */
  .cards{ gap:14px; }
  .card-body{ padding:14px 14px 16px; }
  .card-kicker{ font-size:22px; margin-bottom:2px;}
  .card-title{ font-size:17px; margin-bottom:2px;}
  .card-text{ font-size:15px; line-height:1.2; }

  /* 7) Marketing mini */
  .section-head--mkt .section-mini{ font-size:16px; margin:0 0 8px; }

  /* 8) Footer: 모바일에서는 로고 숨기고 우측만 */
  .footer-left{ display:none; }
  .footer-inr{ align-items:flex-start; }
  .footer-top{ justify-content:flex-start; }
  .footer-info{ font-size:13px; }
}

/* ===== Modal (force overlay) ===== */
.modal[hidden]{ display:none !important; }

.modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
}

.modal-dim{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
}

.modal-card{
  position: relative !important;
  width: min(560px, calc(100% - 32px)) !important;
  margin: calc(var(--hdh, 88px) + 24px) auto 0 !important; /* 헤더 아래로 */
  background: #fff !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;

/* 연락 링크 2줄 */
.modal-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;     /* 본문 텍스트와 간격 */
  margin-bottom: 18px;  /* 닫기 버튼과 간격 */
}

.modal-link{
  display:inline-block;
  width: fit-content;   /* 텍스트 길이만큼만 밑줄 */
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: #111;
}

.modal-link b{
  font-weight: 800;
}

.modal-link:hover{
  opacity: .85;
}

/* 닫기 버튼: radius 10, 패딩 좁게, 위 텍스트와 간격 */
.modal-foot{
  display:flex;
  justify-content:flex-start; /* 현재 디자인처럼 왼쪽 */
  margin-top: 8px;            /* 링크 영역과 추가 간격 */
}

.modal-foot .btn{
  border-radius: 10px;
  padding: 8px 14px;          /* 좁게 */
  min-height: auto;
  font-size: 14px;
}