:root{
  --navy: rgb(0,33,79);
  --yellow: rgb(207,179,51);
  --bg: #ffffff;
  --text: rgba(0,33,79,.92);
  --muted: rgba(0,33,79,.70);
  --line: rgba(0,33,79,.12);
  --shadow: 0 22px 80px rgba(0,0,0,.10);
  --radius: 28px;
  --radius-sm: 16px;
  --container: 1800px;

  /* Typography 규격 */
  --font-main: "NanumSquareNeo", "NanumSquare", "NanumSquareOTF", "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-hero-title: 64px;
  --fw-hero-title: 700;
  --fs-hero-sub: 24px;
  --fs-nav: 20px;
  --fs-container-title: 58px;
  --fw-container-title: 800;
}

/* Responsive container width scale */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}

@media (min-width:1400px){
  .container{max-width:1400px;}
}
@media (min-width:1600px){
  .container{max-width:1600px;}
}
@media (min-width:1900px){
  .container{max-width:1800px;}
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x:hidden;
  word-break: keep-all;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
::selection{ background: rgba(207,179,51,.30); }

/* Container */
.container{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--navy);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(0,0,0,.10);
  border-color: rgba(0,33,79,.22);
}
.btn--ghost{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color:#fff; }
.btn--ghost:hover{ background: rgba(255,255,255,.16); }
.btn--nav{ background: var(--navy); border-color: var(--navy); color:#fff; }
.btn--nav:hover{ box-shadow: 0 18px 54px rgba(0,33,79,.22); }

/* Cursor follower */
.cursor{
  position: fixed;
  left:0;
  top:0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--yellow);
  pointer-events:none;
  transform: translate3d(-999px,-999px,0);
  z-index: 3000;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .18s ease;
}
.cursor.is-visible{ opacity: 1; }

/* Header */
.header{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index: 2000;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,33,79,.08);
  transition: background .18s ease, box-shadow .18s ease;
}
.header.is-scrolled{
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.header__inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.header .header__inner.container{width:100%;max-width:none;margin:0;padding:0 24px;}
.nav{font-size:20px;}

.brand{
  display: inline-flex;
  align-items:center;
  gap: 12px;
  align-items: center;
  color: var(--navy);
}

.brand__img{
  height: 48px;
  width: auto;
  display: block;
}

@media (max-width: 980px){
  .header__inner{ height: 64px; }
  .brand__img{ height: 36px; } /* 모바일 로고 높이 */
}

/* Nav font size = 17px */
.nav{
  display:flex;
  align-items:center;
  gap: 14px;
  color: rgba(0,33,79,.82);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.nav a{
  padding: 5px 25px;
  border-radius: 10px;
  transition: background .16s ease;
}
.nav a:hover{ background: rgba(0,33,79,.06); }

.hamburger{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,33,79,.14);
  background:#fff;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  gap: 5px;
  flex-direction:column;gap:5px;
}
.hamburger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(0,33,79,.78);
  border-radius: 999px;
}
@media (max-width: 980px){
  .nav{ display:none; }
  .hamburger{ display:flex; }
}

/* Mobile nav */
.mnav{
  position: fixed;
  inset: 72px 0 auto 0;
  height: calc(100vh - 72px);
  background: rgba(0,0,0,.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.mnav.is-open{ opacity: 1; pointer-events: auto; }
.mnav__panel{
  margin-left: auto;
  width: min(360px, 92vw);
  height: 100%;
  background: #fff;
  border-left: 1px solid rgba(0,33,79,.10);
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.mnav__link{
  padding: 14px 12px;
  border-radius: 12px;
  color: rgba(0,33,79,.86);
  border: 1px solid rgba(0,33,79,.10);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
}
.mnav__link:hover{ background: rgba(0,33,79,.04); }
.mnav__cta{ background: var(--navy); color:#fff; border-color: var(--navy); }

/* Main: add top space for fixed header */
main{ padding-top: 72px; }

/* HERO */
.hero{
  position: relative;
  min-height: calc(100vh - 72px);
  background:#000;
  overflow:hidden;
}
.hero__videoWrap{ position:absolute; inset:0; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.hero__content{
  position: relative;
  height: calc(100vh - 72px);
  display:flex;
  align-items:flex-end;
  padding: 120px 0 92px;
  width: 100%;
}
/*
.hero__content{
  background: radial-gradient(circle at center, rgba(0,0,0,.50) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.70) 100%);
}
*/
.hero__content{
  background:
    radial-gradient(circle at center, rgba(0,0,0,.0) 0%, rgba(0,0,0,.3) 100%),
    radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:
    cover,
    6px 6px;
}

.hero__copy{
  /*max-width: 760px;*/
  color:#fff;
  text-align:center; margin: auto;
}

/* 큰 텍스트: 64px / 700 */
.hero__copy h1{
  margin:0;
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-hero-title);
  letter-spacing: -0.03em;
  line-height: 1.22;
  text-shadow: 1px 1px black;
}
.hero__copy b{ color: var(--yellow); }

/* 작은 텍스트: 24px */
.hero__sub{
  margin-top: 14px;
  font-size: var(--fs-hero-sub);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  letter-spacing: -0.02em;
}

.hero__cta{
  margin-top: 30px;
  /*display:flex; gap: 10px; flex-wrap: wrap;*/
}

.scrollHint{
  position:absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  border: none;
  background: transparent;
  color: rgba(255,255,255,.78);
  cursor:pointer;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
  z-index: 5;
}
.scrollHint__text{
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .85;
}
.mouse{
  width: 30px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  position: relative;
}
.wheel{
  position:absolute;
  left: 50%;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  transform: translateX(-50%);
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{
  0%{ transform: translate(-50%,0); opacity: 1; }
  70%{ transform: translate(-50%,18px); opacity: .25; }
  100%{ transform: translate(-50%,18px); opacity: 0; }
}

/* Responsive: 모바일에서 64px 그대로면 과할 수 있어 최소한만 줄이기 */
@media (max-width: 980px){
  .hero__copy h1{ font-size: 40px; }
  .hero__sub{ font-size: 18px; }
}

/* ABOUT: 회사소개(텍스트 + 우측 배경 이미지) */
.about{ background:#fff; padding: 92px 0; /*border-bottom: 1px solid rgba(0,33,79,.08);*/ }
.about__layout{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 4px; align-items: center; }
.about__text{ min-width: 0; }
.about__eyebrow{ margin:0; color: rgba(255,255,255,.98); font-size: 26px; font-weight: 800; line-height: 1.6; text-align:left; }
.about__title{ margin: 0; font-size: 44px; font-weight: 900; letter-spacing:-0.03em; color: rgba(255,255,255,.98);; text-align:left; }
.about__p{ margin: 12px 0 0; color: rgba(255,255,255,.88); line-height: 1.6; font-size: 20px; text-align:left; }
.about__media{ border-radius: 22px; min-height: 360px; background: url('assets/img/responsive-web-helloweb.png') no-repeat center / contain; filter: drop-shadow(0 28px 90px rgba(0,0,0,.18)); }

@media (max-width: 980px){
  .about{ padding: 70px 0; }
  .about__layout{ grid-template-columns: 1fr; }
  .about__media{ min-height: 260px; }
  .about__title{ font-size: 34px; }
  .about__eyebrow,.about__p,.about__title{ text-align:center; }
}

/* Wave wrapper */
.waveWrap{
  position:absolute;
  left:0;
  right:0;
  bottom:0px;
  width:100%;
  overflow:hidden;
  pointer-events:none;
}

/* SVG */
.waves{
  position:relative;
  width:100%;
  height:15vh;
  min-height:40px;
  max-height:80px;
  margin-bottom:-7px; /* safari gap fix */
}

/* Parallax animation */
.parallax > use{
  animation: waveMove 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

/* layer timing */
.parallax > use:nth-child(1){ animation-delay:-1s; animation-duration:7s; }
.parallax > use:nth-child(2){ animation-delay:-2.5s; animation-duration:10s; }
.parallax > use:nth-child(3){ animation-delay:-4s; animation-duration:13s; }
.parallax > use:nth-child(4){ animation-delay:-5s; animation-duration:20s; }

/* 핵심 애니메이션 */
@keyframes waveMove{
  0%   { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

/* Mobile */
@media (max-width:768px){
  .waves{ height:40px; min-height:40px; }
}

/* Logos marquee */
.logos{
  padding: 22px 0;
  border-top: 1px solid rgba(0,33,79,.08);
  border-bottom: 1px solid rgba(0,33,79,.08);
  overflow:hidden;
}
.logos__track{
  display:flex;
  gap: 44px;
  width: max-content;
  animation: marquee 20s linear infinite;
}
.logos__row{ display:flex; align-items:center; gap: 44px; }
.logos__row span{
  min-width: 120px;
  opacity: .82;
  filter: grayscale(1);
  transition: opacity .18s ease, filter .18s ease;
}
.logos__row span:hover{ opacity: 1; filter: none; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* SHOWCASE2 */
.showcase2{ padding: 64px 0 86px; background:#fff; }
.showcase2__banner{
  position: relative;
  height: clamp(280px, 52vw, 680px);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--navy);
}
.showcase2__bg{ position:absolute; inset:0; background-size: cover; background-position: center; transform: scale(1.03); filter: saturate(1.02) contrast(1.02) blur(3px) brightness(0.7);}
.showcase2__dim{
  position:absolute;
  inset:0;
  background: radial-gradient(900px 500px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28));
}

.showcase2__controlsTop{ position:absolute; bottom:10px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:12px; z-index:6; pointer-events:auto; }
.showcase2__controlsTop::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,calc(100% - 24px)); height:54px; border-radius:999px; background:rgba(0,0,0,.28); backdrop-filter:blur(8px); box-shadow:0 16px 40px rgba(0,0,0,.20); pointer-events:none; }
.showcase2__controlsTop > *{ position:relative; z-index:1; }
.showcase2__controlsTop .dot{ background:rgba(255,255,255,.46); }
.showcase2__controlsTop .dot.is-active{ background:rgba(255,255,255,.92); }
.showcase2__controlsTop .navBtn{ background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.22); }
.showcase2__controlsTop .navBtn span{ color:rgba(0,33,79,.86); }
.showcase2__hint{ color: rgba(0,33,79,.60); font-size:14px; font-weight:700; }

.mockups{ position:absolute; inset:0; pointer-events:none; }
.mockups--pc{ display:flex; align-items:center; justify-content:flex-start; padding: 0 clamp(14px, 3vw, 36px); }
.mockups--mo{ display:flex; align-items:flex-end; justify-content:flex-end; padding-right: clamp(12px, 3vw, 30px); padding-bottom: clamp(12px, 3vw, 30px); }

.mockupFrame--pc{
  width: min(980px, 78%);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 6px solid rgba(0,0,0,.72);
  background: rgba(255,255,255,.06);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  overflow:hidden;
  position:relative;
}
.mockupFrame--pc::after{ content:""; position:absolute; inset:0; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.10); }

.mockupFrame--mo{
  width: clamp(160px, 19vw, 290px);
  aspect-ratio: 9 / 19.5;
  border-radius: 34px;
  border: 6px solid rgba(0,0,0,.78);
  background: rgba(255,255,255,.06);
  box-shadow: 0 28px 90px rgba(0,0,0,.32);
  overflow:hidden;
  position:relative;
  transform: translateX(-10%) translateY(-6%);
}
.mockupFrame--mo::after{ content:""; position:absolute; inset:0; border-radius: 28px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.10); }

.mockupScreen{ position:absolute; inset:0; background-size: cover; background-position: center; transform: scale(1.02); }

.showcase2__info{ margin-top: 18px; display:flex; gap: 18px; align-items:flex-start; justify-content:space-between; }
.showcase2__left{ flex: 1 1 auto; min-width: 0; }
.hashTags{ display:flex; gap: 14px; flex-wrap: wrap; color: rgba(0,33,79,.65); font-size: 16px; }

.showcase2__title{
  margin: 16px 0 0;
  font-size: var(--fs-container-title);
  font-weight: var(--fw-container-title);
  letter-spacing: -0.03em;
  color: var(--navy);
  position: relative;
  display:inline-block;
}
.showcase2__underline{ display:block; margin: 10px auto; width: 46px; height: 4px; border-radius: 999px; background: rgba(125,170,230,.85); }
.showcase2__desc{ margin: 12px 0 0; color: rgba(0,33,79,.70); line-height: 1.75; max-width: 78ch; font-size: 18px; }

.showcase2__right{ flex: 0 0 auto; display:flex; flex-direction: column; align-items:flex-end; gap: 12px; }
.showcase2__nav{ display:flex; gap: 10px; }
.navBtn{
  width: clamp(44px, 4.2vw, 74px);
  height: clamp(44px, 4.2vw, 74px);
  border-radius: 999px;
  border: 1px solid rgba(0,33,79,.22);
  background: #fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.navBtn:hover{ transform: translateY(-1px); border-color: rgba(0,33,79,.35); box-shadow: 0 16px 44px rgba(0,0,0,.10); }
.navBtn span{ font-weight: 900; color: rgba(0,33,79,.82); font-size: 18px; }

.dots{ display:flex; gap: 8px; align-items:center; justify-content:flex-end; }
.dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(0,33,79,.22); transition: width .18s ease, background .18s ease; border:none;}
.dot.is-active{ width: 22px; background: rgba(0,33,79,.70); }

@media (max-width: 980px){
  .showcase2__info{ flex-direction: column; align-items: stretch; }
  .showcase2__right{ align-items: flex-start; flex-direction: row; justify-content: space-between; }
  .mockupFrame--pc{ width: 100%; }
  .mockupFrame--mo{ transform: translateX(-2%) translateY(-8%); }
}

.container .headline{
    margin: 18px 0 0;
    font-size: var(--fs-container-title);
    font-weight: var(--fw-container-title);
    color: rgb(0, 0, 0);
    letter-spacing:-0.03em;
    line-height: 1.25;
    letter-spacing: 1.5px;
    text-align: center;
}

.container .desc{
    margin: 14px auto 0;
    max-width: 860px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 1.6;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

/* Services */
.services{ position: relative; background:#fff; padding: 88px 0 170px; /*border-bottom: 1px solid rgba(0,33,79,.08); overflow:hidden; --svc-bg: url("assets/slides/s1.jpg");*/ }
/*
.services::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--svc-bg) no-repeat center bottom / cover; /*
  opacity:.5; filter:blur(1px) saturate(1.02) contrast(1.02) brightness(.95);
}
.services::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top, rgba(255,255,255,0.5) 35%, rgba(255,255,255,1) 85%);
}
*/
.services > .container{ position:relative; z-index:2; }

.services__dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3; pointer-events:auto;
}
.services__dots .dot{
  width:8px; height:8px; border-radius:999px; border:none; cursor:pointer;
  background: rgba(0,33,79,.22); transition: width .18s ease, background .18s ease;
}
.services__dots .dot.is-active{ width:22px; background: rgba(0,33,79,.70); }

.services p{
  font-size: 18px;
  line-height: 1.6;
}
.sectionHead{ display:flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.sectionHead h2{ margin:0; font-size: var(--fs-container-title); font-weight: var(--fw-container-title); letter-spacing:-0.03em; color: rgba(255,255,255,.9); text-align: center;}
.sectionHead p{ margin:0; max-width: 70ch; color: rgba(255,255,255,.9); line-height: 1.8; font-size: 20px; text-align: center;}

.svcGroup{ padding-top:30px; }
.svcGrid{ margin-top: 16px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svcCard{
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  padding: 25px;
  background:rgba(0,0,0,.5);
  box-shadow: 0 18px 58px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svcCard:hover{ transform: translateY(-2px); box-shadow: 0 22px 70px rgba(0,0,0,.08); border-color: rgba(0,33,79,.18); }
.svcIcon{ width: 44px; height: 44px; border-radius: 14px; background: rgba(0,33,79,.08); display:grid; place-items:center; color: var(--navy); margin: 0 auto 14px; }
.svcCard h3{ margin:0; font-size: 22px; font-weight: 800; letter-spacing:-0.02em; color: rgba(255,255,255,.89); text-align: center;}
.svcCard p{ margin: 10px 0 0; color: rgba(255,255,255,.72); line-height: 1.8; font-size: 20px; text-align: center;}
.svcCard ul{ margin-top: 12px; padding-left: 18px; list-style: disc; color: rgba(0,33,79,.66); }
.svcCard li{ margin: 6px 0; }

@media (max-width: 980px){
  .sectionHead{ flex-direction: column; /*align-items: flex-start;*/ }
  .svcGrid{ grid-template-columns: 1fr; }
}

/* Portfolio (cards) */
.portfolio{ position:relative; padding: 92px 0 142px; background:#fff; /*border-top: 1px solid rgba(0,33,79,.08); border-bottom: 1px solid rgba(0,33,79,.08);*/ }
.pCards{ margin-top: 26px; display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pCard{ border: 1px solid rgba(0,0,0,.85); border-radius: 12px; background:#fff; overflow:hidden; box-shadow: 0 18px 58px rgba(0,0,0,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pCard:hover{ box-shadow: 0 22px 70px rgba(0,0,0,.08); border-color: rgba(0,33,79,.18); }
.pCard__top{padding:16px 12px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.pCard__logo{width:min(200px,72%);height:40px;border:0;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pCard__logo img{width:auto;height:100%;object-fit:contain;padding:0;display:block;}
.pCard__txt{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:unset;text-align:center;}
.pCard__title{display:block; width:100%; align-self:stretch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pCard__desc{ margin: 6px 0 0; color: rgba(0,33,79,.72); font-size: 14px; line-height: 1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; display:none;}
.pCard__thumb{ aspect-ratio: 16 / 9; background: rgba(0,33,79,.04); border-top: 1px solid rgba(0,33,79,.10); overflow:hidden; }
.pCard__thumb img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .22s ease; }

.pCard:hover .pCard__thumb img{ transform: scale(1.06); }
.pMoreWrap{ margin-top: 22px; text-align:center; }
.pMoreWrap.is-hidden{ display:none; }

@media (max-width: 1100px){ .pCards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .pCards{ grid-template-columns: 1fr; } }


/* Contact */
.contact{ background:#fff; padding: 96px 0; /*border-top: 1px solid rgba(0,33,79,.08);*/ }
.contact__inner{ display:grid; /*grid-template-columns: 1.1fr .9fr;*/ gap: 22px; align-items:start; }
.contact h2{ margin:0; font-size: var(--fs-container-title); font-weight: var(--fw-container-title); letter-spacing: -0.03em; text-align:center;}
.contact__left p{ margin: 10px 0 0; color: var(--muted); line-height: 1.6; font-size: 16px; }
.contact__meta{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metaBox{ border: 1px solid rgba(0,33,79,.12); border-radius: 16px; padding: 14px; background:#fff; box-shadow: 0 14px 42px rgba(0,0,0,.05); }
.metaBox .k{ font-size: 12px; color: rgba(0,33,79,.60); }
.metaBox .v{ margin-top: 6px; font-weight: 400; color: rgba(0,33,79,.88); }

.contact__form{ border: 1px solid rgba(0,33,79,.12); border-radius: 20px; padding: 18px; background:#fff; box-shadow: 0 18px 58px rgba(0,0,0,.06); }
.contact__form label{ display:block; margin-top: 12px; }
.contact__form span{ display:block; font-size: 12px; color: rgba(0,33,79,.66); margin-bottom: 6px; }
.contact__form input,.contact__form textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,33,79,.16);
  padding: 12px 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.contact__form input:focus,.contact__form textarea:focus{ border-color: rgba(0,33,79,.38); box-shadow: 0 0 0 4px rgba(0,33,79,.10); }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formActions{ margin-top: 14px; display:flex; flex-direction: column; gap: 10px; }
.note{ margin:0; font-size: 12px; color: rgba(0,33,79,.60); }
.toast{ margin-top: 10px; font-size: 13px; color: rgba(0,33,79,.80); }

/* Footer */
.footer{ padding: 52px 0; border-top: 1px solid rgba(255,255,255,.10); background: var(--navy); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap; }
.footer__brand{ font-weight: 500; color: rgba(255,255,255,.88); }
.footer__copy{ margin-top: 6px; color: rgba(255,255,255,.62); font-size: 12px; }
.footer__right{ display:flex; gap: 14px; color: rgba(255,255,255,.72); }
.footer__right a{ padding: 8px 10px; border-radius: 10px; }
.footer__right a:hover{ background: rgba(255,255,255,.06); }

@media (max-width: 980px){
  .contact__inner{ grid-template-columns: 1fr; }
  .contact__meta{ grid-template-columns: 1fr; }
  .row2{ grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wheel{ animation: none; }
  .logos__track{ animation: none; }
  .parallax > use{ animation:none; }

}

.partnerLogo{
  height: 34px;     /* 여기만 원하는 높이로 */
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 980px){
  .partnerLogo{ height: 26px; }
}

.mapWrap{position:relative; padding-top: 30px;}
/*
#map{width: 100%; min-height: 340px; border: none; border-radius: 20px;}
.mapLabel{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-120%);
  background:#111;color:#fff;
  padding:6px 12px;border-radius:6px;
  font-size:14px;white-space:nowrap;
}
*/
#map{width:100%;height:450px;border:0;border-radius:14px;overflow:hidden}
.mapTooltip{background:#111;color:#fff;border:0;border-radius:10px;padding:6px 10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.leaflet-tooltip-top:before{border-top-color:#111}

/* Portfolio Lightbox */
.lb{position:fixed;inset:0;z-index:5000;display:none}
.lb.is-open{display:block}
.lb__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.lb__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,92vw);max-height:86vh;background:#0b0f1a;border-radius:18px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 120px rgba(0,0,0,.55);padding:14px;display:flex;flex-direction:column;gap:10px}
.lb__close{position:absolute;right:10px;top:8px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:26px;line-height:1}
.lb__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 46px 0 6px}
.lb__title{color:rgba(255,255,255,.92);font-size:17px;font-weight:500;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb__count{color:rgba(255,255,255,.68);font-size:13px;font-weight:700;flex:0 0 auto}
.lb__stage{position:relative;flex:1 1 auto;min-height:240px;border-radius:14px;overflow:hidden;background:#000;display:grid;place-items:center}
.lb__img{max-width:100%;max-height:calc(86vh - 130px);object-fit:contain}
.lb__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  color:transparent; /* 기존 ‹ › 문자 숨김 */
}
.lb__nav:hover{
  background:rgba(0,0,0,.75);
}
.lb__nav::before{
  content:"";
  width:10px;
  height:10px;
  border-top:2.5px solid #fff;
  border-right:2.5px solid #fff;
  display:block;
}
/* 왼쪽 화살표 */
.lb__prev{
  left:14px;
}
.lb__prev::before{
  transform:rotate(-135deg);
}

/* 오른쪽 화살표 */
.lb__next{
  right:14px;
}
.lb__next::before{
  transform:rotate(45deg);
}

.lb__nav:disabled{opacity:.35;cursor:default}
.lb__prev{left:10px}
.lb__next{right:10px}
.lb__dots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:2px 0 6px}
.lb__dot{width:8px;height:8px;border-radius:999px;border:none;background:rgba(255,255,255,.26);cursor:pointer;transition:width .18s ease,background .18s ease}
.lb__dot.is-active{width:22px;background:rgba(255,255,255,.86)}
@media (max-width:640px){.lb__panel{padding:12px}.lb__nav{width:40px;height:40px}.lb__img{max-height:calc(86vh - 140px)}}
@media (max-width:768px){
  .lb__nav{
    width:40px;
    height:40px;
  }
}

.about{background: url("assets/img/bg1.jpeg") no-repeat center / cover;}
.services{background: url("assets/img/bg2.jpeg") no-repeat center / cover;}
.portfolio{background: url("assets/img/bg3.jpeg") no-repeat center / cover;}

/* 상단 대메뉴 활성화 표시 */
.nav a.is-active{
  background: rgba(0,33,79,.06);
}

/* FIX: pCard title ellipsis가 카드 폭 기준으로 동작하도록(부모 stretch) */
.pCard__top{align-items:stretch;} /* ← 핵심: 자식들이 카드 폭을 꽉 쓰게 함 */
.pCard__logo{margin:0 auto;}      /* 로고는 계속 중앙 */
.pCard__txt{align-items:center;}  /* 텍스트 블록은 중앙 정렬 유지 */
.pCard__title{
  margin:0;display:block;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
}

/* Mobile nav: 모바일 헤더(64px)와 정확히 맞추기 */
@media (max-width: 980px){
  .mnav{inset:64px 0 auto 0;height:calc(100vh - 64px);}
  main{padding-top:64px;}
  .hero{min-height:calc(100vh - 64px);}
  .hero__content{height:calc(100vh - 64px);}
}

:root{--headerH:72px;}
@media (max-width:980px){:root{--headerH:64px;}}

/* header / main offset */
.header{height:var(--headerH);}
main{padding-top:var(--headerH);}


/* container: base 1200, grow with viewport up to 1800 */
.container{width:min(100% - 48px, clamp(1200px, 86vw, 1800px));margin:0 auto;}

/* portfolio: add bottom space +50px (wave area roomy) */
.portfolio{padding:92px 0 142px;}