@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =========================================================
   SINJIN IT Consulting 
   ========================================================= */

:root{
  /* --- palette --- */
  --canvas:#F1F2F6;         /* 페이지 바탕 (쿨 라이트 그레이) */
  --surface:#FFFFFF;        /* 카드 */
  --ink:#0E1016;            /* 근접 블랙 (헤더/다크 카드/푸터) */
  --ink-2:#171A23;
  --cobalt:#2743FF;         /* 메인 액센트 */
  --cobalt-soft:#6E82FF;
  --lilac:#A78BFA;          /* 그라디언트 파트너 */
  --mint:#12D8A0;           /* 상태 표시용 소량 */

  --text:#0E1016;
  --text-soft:#5C6473;
  --text-faint:#98A0AE;
  --line:rgba(14,16,22,0.08);
  --line-strong:rgba(14,16,22,0.13);
  --fill:#F4F5F8;           /* 인풋 등 은은한 채움 */

  /* 다크 블록 위 텍스트 */
  --on-dark:rgba(255,255,255,0.94);
  --on-dark-soft:rgba(255,255,255,0.62);
  --on-dark-faint:rgba(255,255,255,0.40);
  --line-dark:rgba(255,255,255,0.12);

  /* HTML 인라인 SVG fill이 참조하는 변수 (유지 필수) */
  --accent:var(--cobalt-soft);
  --accent-soft:#ecee75;
  --accent-2:var(--lilac);
  --amber:#FFC44D;
  --line-light:rgba(255,255,255,0.10);
  --surface-alt:var(--canvas);
  --hivis:var(--cobalt);

  --grad:linear-gradient(135deg,#2743FF 0%,#5B4BFF 48%,#A78BFA 100%);

  --font-display:'Manrope','Pretendard',-apple-system,sans-serif;
  --font-body:'Pretendard','Manrope',-apple-system,sans-serif;
  --font-ui:'Space Grotesk','Pretendard',ui-monospace,sans-serif;

  --r-xl:34px;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(14,16,22,.04), 0 6px 16px rgba(14,16,22,.05);
  --shadow-md:0 2px 4px rgba(14,16,22,.03), 0 16px 40px rgba(14,16,22,.08);
  --shadow-lg:0 30px 70px rgba(14,16,22,.14);
  --shadow-cobalt:0 18px 44px rgba(39,67,255,.28);

  --ease:cubic-bezier(.22,.68,.16,1);
  --maxw:1240px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--canvas);
  color:var(--text);
  line-height:1.6;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
::selection{background:var(--cobalt);color:#fff;}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* 다크 블록 위 은은한 도트 그리드 */
.grid-overlay{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.11) 1px,transparent 1px);
  background-size:22px 22px;
}

/* =========================================================
   HEADER — 떠 있는 다크 캡슐
   ========================================================= */
.site-header{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(var(--maxw), calc(100% - 40px));
  height:80px;padding:0 14px 0 26px;
  display:flex;align-items:center;justify-content:space-between;
  /* 쌩까망 대신: 코발트 · 라일락 오로라 + 부드러운 광원이 아주 느리게 흐르는 다크 글라스.
     '번쩍' 지나가는 순간 없이, 바 전체의 색과 밝기가 서서히 이동합니다 */
  background-color:transparent;
  background-image:
    radial-gradient(70% 320% at 50% 0%, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(120% 260% at 8% 0%, rgba(39,67,255,.30) 0%, rgba(39,67,255,0) 58%),
    radial-gradient(120% 240% at 92% 100%, rgba(167,139,250,.26) 0%, rgba(167,139,250,0) 60%),
    linear-gradient(135deg,rgba(16,19,30,0.93) 0%,rgba(10,12,17,0.92) 52%,rgba(14,17,27,0.93) 100%);
  background-size:210% 100%, 175% 100%, 175% 100%, 100% 100%;
  background-position:-15% 0, 0% 0, 100% 0, 0 0;
  background-repeat:no-repeat;
  animation:headerAurora 18s ease-in-out infinite alternate;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border-radius:var(--r-pill);
  box-shadow:0 10px 32px rgba(14,16,22,.18), inset 0 1px 0 rgba(255,255,255,.10);
  transition:height .32s var(--ease), background-image .32s ease, box-shadow .32s ease, top .32s var(--ease);
}
/* 18초에 걸쳐 흘러갔다가 18초에 걸쳐 돌아옵니다 (총 36초 왕복).
   더 잔잔하게: 18s를 키우고 아래 이동값(115%/48%/52%)을 줄이세요 */
@keyframes headerAurora{
  from{background-position:-15% 0, 0% 0, 100% 0, 0 0;}
  to{background-position:115% 0, 48% 0, 52% 0, 0 0;}
}
.site-header.scrolled{
  height:68px;top:12px;
  background-image:
    radial-gradient(70% 320% at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(120% 260% at 8% 0%, rgba(39,67,255,.24) 0%, rgba(39,67,255,0) 58%),
    radial-gradient(120% 240% at 92% 100%, rgba(167,139,250,.20) 0%, rgba(167,139,250,0) 60%),
    linear-gradient(135deg,rgba(21,25,39,0.96) 0%,rgba(12,14,20,0.95) 52%,rgba(18,21,34,0.96) 100%);
  box-shadow:0 14px 40px rgba(14,16,22,.26), inset 0 1px 0 rgba(255,255,255,.11);
}

.logo{display:flex;align-items:center;gap:10px;}
/* 로고 — 어두운 배경용 화이트 버전(img/logo-white.png)을 사용합니다.
   밝은 배경(문서·명함 등)에는 img/logo-color.png 를 쓰세요 */
.logo .logo-chip{
  display:flex;align-items:center;
  transition:opacity .2s ease, transform .22s var(--ease);
}
.logo:hover .logo-chip{opacity:.85;transform:translateY(-1px);}
.logo .logo-chip img{height:54px;width:auto;display:block;transition:height .32s var(--ease);}
.site-header.scrolled .logo-chip img{height:44px;}
@media (max-width:520px), (max-device-width:600px){
  .logo .logo-chip img,
  .site-header.scrolled .logo-chip img{height:38px;}
}

.nav-desktop{display:flex;align-items:center;gap:6px;}
.nav-desktop a{
  font-size:16px;font-weight:600;letter-spacing:-0.015em;
  color:var(--on-dark-soft);
  padding:11px 18px;border-radius:var(--r-pill);
  transition:color .2s ease, background .2s ease;
}
.nav-desktop a:hover{color:#fff;background:rgba(255,255,255,0.08);}

.header-right{display:flex;align-items:center;gap:10px;}
.btn-contact{
  font-size:15px;font-weight:700;letter-spacing:-0.015em;
  color:var(--ink);background:#fff;
  padding:14px 26px;border-radius:var(--r-pill);
  white-space:nowrap;
  transition:background .22s ease, color .22s ease, transform .22s var(--ease), box-shadow .22s ease;
}
.btn-contact:hover{
  background:var(--cobalt);color:#fff;
  transform:translateY(-1px);box-shadow:0 8px 22px rgba(39,67,255,.4);
}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;align-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.08);
}
.nav-toggle span{height:2px;width:16px;background:#fff;border-radius:2px;}

/* =========================================================
   HERO — 벤토 그리드
   ========================================================= */
.hero{
  position:relative;
  padding:146px 0 34px;
  overflow:hidden;
}
/* 배경 오로라 */
.hero::before{
  content:"";position:absolute;pointer-events:none;
  top:-220px;right:-140px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,67,255,.16),transparent 62%);
  filter:blur(20px);
}
.hero::after{
  content:"";position:absolute;pointer-events:none;
  bottom:-320px;left:-200px;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.20),transparent 64%);
  filter:blur(20px);
}
.hero .wrap{position:relative;z-index:2;}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr 320px;
  gap:16px;
  align-items:stretch;
}

/* --- 솔루션 카드 --- */
.hero-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:480px;padding:38px 36px 36px;
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.hero-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}

.hero-card .hc-bg{position:absolute;inset:0;z-index:0;}
.hero-card .hc-grid-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(14,16,22,0.07) 1px,transparent 1px);
  background-size:20px 20px;
  opacity:0;transition:opacity .45s ease;
}
.hero-card:hover .hc-grid-overlay{opacity:1;}
.hero-card .hc-shape{
  position:absolute;z-index:0;pointer-events:none;
  right:-120px;top:-130px;width:420px;height:420px;border-radius:50%;
  filter:blur(6px);
  transition:transform .8s var(--ease);
}
.hero-card:hover .hc-shape{transform:scale(1.12) translate(-14px,14px);}

/* 카드 A — 코발트→라일락 그라디언트 (기존 '무엇이든 물어보세요' 컬러와 교체) */
.hc-solution-a{background:var(--cobalt);box-shadow:var(--shadow-cobalt);}
.hc-solution-a:hover{box-shadow:0 30px 70px rgba(39,67,255,.34);}
.hc-solution-a .hc-bg{
  background:var(--grad);
}
.hc-solution-a .hc-grid-overlay{
  background-image:radial-gradient(rgba(255,255,255,0.14) 1px,transparent 1px);
}
.hc-solution-a .hc-shape{
  background:radial-gradient(circle,rgba(255,255,255,.30),rgba(167,139,250,.28) 45%,transparent 70%);
}

/* 카드 B — 다크 + 라일락 오로라 */
.hc-solution-b{background:#0072BC;}
.hc-solution-b .hc-bg{
  background:linear-gradient(150deg,#1E8FD8 0%,#0072BC 46%,#00A4B5 100%);
}
.hc-solution-b .hc-grid-overlay{
  background-image:radial-gradient(rgba(255,255,255,0.13) 1px,transparent 1px);
}
.hc-solution-b .hc-shape{
  right:auto;top:auto;left:-140px;bottom:-160px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(255,255,255,.30),rgba(0,214,224,.24) 45%,transparent 70%);
}

.hero-card .hc-content{position:relative;z-index:2;}
.hero-card .hc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.5;
  color:var(--text-soft);background:rgba(14,16,22,0.05);
  padding:7px 14px;border-radius:var(--r-pill);
  margin-bottom:20px;max-width:100%;
}
.hero-card h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.6vw,33px);font-weight:800;letter-spacing:-0.045em;line-height:1.26;
  margin-bottom:14px;color:var(--text);
}
.hero-card h2 span{color:var(--cobalt);}
.hero-card p{
  font-size:14.5px;color:var(--text-soft);line-height:1.78;max-width:380px;margin-bottom:28px;
}
.hero-card .hc-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;letter-spacing:-0.015em;
  color:var(--ink);background:rgba(14,16,22,0.06);
  padding:13px 22px;border-radius:var(--r-pill);width:fit-content;
  transition:background .25s ease, color .25s ease, padding .25s var(--ease);
}
.hero-card:hover .hc-btn{background:var(--ink);color:#fff;padding-right:26px;}
.hero-card .hc-btn svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.hero-card:hover .hc-btn svg{transform:translateX(4px);}

/* 카드 A 텍스트 반전 (※ 공통 .hero-card 규칙보다 뒤에 있어야 적용됩니다) */
.hc-solution-a .hc-eyebrow{color:rgba(255,255,255,0.80);background:rgba(255,255,255,0.14);}
.hc-solution-a h2{color:#fff;}
.hc-solution-a h2 span{
  color:#5CF2D6;                                   /* 코발트 위에서 가장 잘 튀는 민트 */
  text-shadow:0 0 24px rgba(92,242,214,.42);
  background:linear-gradient(transparent 68%, rgba(92,242,214,.32) 68%);  /* 형광펜 밑줄 */
  padding:0 2px 1px;
}
.hc-solution-a p{color:rgba(255,255,255,0.80);}
.hc-solution-a .hc-btn{background:rgba(255,255,255,0.16);color:#fff;}
.hc-solution-a:hover .hc-btn{background:#fff;color:var(--ink);}

/* 카드 B 텍스트 반전 */
.hc-solution-b .hc-eyebrow{color:var(--on-dark-soft);background:rgba(255,255,255,0.08);}
.hc-solution-b h2{color:#fff;}
.hc-solution-b h2 span{color:var(--accent-soft);}
.hc-solution-b p{color:var(--on-dark-soft);}
.hc-solution-b .hc-btn{background:rgba(255,255,255,0.12);color:#fff;}
.hc-solution-b:hover .hc-btn{background:#fff;color:var(--ink);}

/* --- 사이드 --- */
.hero-side{display:flex;flex-direction:column;gap:16px;}
.hero-contact{
  flex:1;position:relative;overflow:hidden;
  /* 기존 사피엔스 카드의 라이트 톤을 이어받음 */
  background:linear-gradient(165deg,#FFFFFF 0%,#F3F5FF 58%,#E9ECFF 100%);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:250px;
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.hero-contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(14,16,22,0.07) 1px,transparent 1px);
  background-size:20px 20px;opacity:.7;
}
.hero-contact::after{
  content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,67,255,.20),transparent 66%);
  transition:transform .7s var(--ease);
}
.hero-contact:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.hero-contact:hover::after{transform:scale(1.18);}
.hero-contact h3{
  position:relative;z-index:1;
  font-family:var(--font-display);
  font-size:25px;font-weight:800;letter-spacing:-0.045em;line-height:1.32;
  color:var(--text);
}
.hero-contact .hc-btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;width:fit-content;
  font-size:13.5px;font-weight:700;letter-spacing:-0.015em;
  color:var(--ink);background:rgba(14,16,22,0.06);padding:13px 22px;border-radius:var(--r-pill);
  transition:background .25s ease, color .25s ease, padding .25s var(--ease);
}
.hero-contact:hover .hc-btn{background:var(--ink);color:#fff;padding-right:26px;}
.hero-contact .hc-btn svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.hero-contact:hover .hc-btn svg{transform:translateX(4px);}

.hero-note{
  background:var(--surface);border-radius:var(--r-lg);
  padding:26px 28px;font-size:13px;color:var(--text-soft);line-height:1.8;
  box-shadow:var(--shadow-sm);
}
.hero-note strong{
  display:block;font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:9px;
}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr 1fr;}
  .hero-side{grid-column:1/-1;flex-direction:row;}
  .hero-contact{flex:1.4;min-height:190px;}
  .hero-note{flex:1;display:flex;flex-direction:column;justify-content:center;}
}
@media (max-width:720px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .hero{padding:104px 0 32px;}
  .hero-grid{grid-template-columns:1fr;gap:12px;}
  .hero-card{min-height:auto;padding:30px 26px 28px;border-radius:var(--r-lg);}
  .hero-side{flex-direction:column;}
  .hero-contact{border-radius:var(--r-lg);padding:28px 26px;}
}

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{padding:118px 0;position:relative;}
.section-head{max-width:680px;margin-bottom:52px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--cobalt);
  background:rgba(39,67,255,0.08);
  padding:8px 15px;border-radius:var(--r-pill);
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.6vw,47px);font-weight:800;letter-spacing:-0.05em;line-height:1.2;color:var(--text);
}
.section-head p{color:var(--text-soft);font-size:16px;margin-top:18px;line-height:1.8;}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--canvas);padding-top:60px;}

/* 탭 — 아래 패널과 같은 폭으로 꽉 채우고 01/02가 반반씩 차지 */
.svc-tabs{
  display:flex;gap:10px;
  width:100%;margin-bottom:16px;
}
.svc-tab{
  flex:1 1 0;min-width:0;
  padding:20px 22px;font-size:26px;font-weight:700;letter-spacing:-0.02em;
  color:var(--text-soft);white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:color .25s ease, background .25s ease, box-shadow .25s ease,
             border-color .25s ease, transform .25s var(--ease);
}
.svc-tab .n{
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--text-faint);
  background:rgba(14,16,22,0.05);padding:4px 10px;border-radius:var(--r-pill);
  transition:color .25s ease, background .25s ease;
}
.svc-tab:hover{
  color:var(--text);transform:translateY(-2px);
  border-color:rgba(39,67,255,.34);box-shadow:var(--shadow-md);
}
/* 선택된 탭은 해당 솔루션 카드와 같은 색을 씁니다 */
.svc-tab.active{
  color:#fff;border-color:transparent;transform:none;
  background:var(--grad);
  box-shadow:var(--shadow-cobalt);
}
.svc-tab[data-panel="1"].active{
  background:linear-gradient(135deg,#1E8FD8 0%,#0072BC 52%,#00A4B5 100%);
  box-shadow:0 18px 44px rgba(0,114,188,.30);
}
.svc-tab.active .n{color:#fff;background:rgba(255,255,255,0.20);}

.svc-panels{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.svc-panel{display:none;grid-template-columns:1fr 1fr;align-items:stretch;}
.svc-panel.active{display:grid;animation:panelIn .5s var(--ease);}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.svc-copy{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;}
.svc-copy h3{
  font-family:var(--font-display);
  font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-0.045em;line-height:1.28;
  margin-bottom:18px;color:var(--text);
}
.svc-copy p{color:var(--text-soft);font-size:15.5px;line-height:1.82;margin-bottom:34px;max-width:440px;}

.svc-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:34px;
}
.svc-stats div{
  background:var(--fill);border-radius:var(--r-md);padding:20px 18px;
}
.svc-stats div strong{
  display:block;font-family:var(--font-ui);font-size:20px;font-weight:600;
  letter-spacing:-0.03em;color:var(--cobalt);margin-bottom:4px;line-height:1.1;
}

.svc-stats div span {
    font-size: 14px; /* 기존 12px에서 적절한 크기로 확대 */
    line-height: 1.4; /* 줄 간격 축소 (보통 1.3 ~ 1.5 사이가 적당합니다) */
    color: var(--text-faint);
    letter-spacing: -0.02em;
}
.svc-link{
  display:inline-flex;align-items:center;gap:9px;width:fit-content;
  font-size:14px;font-weight:700;letter-spacing:-0.02em;color:#fff;
  background:var(--ink);padding:14px 24px;border-radius:var(--r-pill);
  transition:background .25s ease, padding .25s var(--ease), box-shadow .25s ease;
}
.svc-link:hover{background:var(--cobalt);padding-right:28px;box-shadow:0 10px 26px rgba(39,67,255,.3);}
.svc-link svg{width:15px;height:15px;}

.svc-visual{
  position:relative;overflow:hidden;min-height:440px;
  background:linear-gradient(150deg,#171A23 0%,#0E1016 62%,#0B0D12 100%);
}
.svc-visual .grid-overlay{
  inset:-20%;width:140%;height:140%;
  background-size:26px 26px;
  animation:gridDrift 26s linear infinite;
}
.svc-visual::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.6),transparent);
}
.svc-visual .glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,67,255,.45),rgba(167,139,250,.18) 48%,transparent 70%);
  filter:blur(14px);
  animation:glowDrift 13s ease-in-out infinite;
}
.svc-visual .particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.svc-visual .particles span{
  position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;
  background:var(--cobalt-soft);opacity:0;
  box-shadow:0 0 12px rgba(110,130,255,.9);
  animation:particleRise 8s linear infinite;
}
.svc-visual .particles span:nth-child(1){left:12%;animation-delay:.2s;}
.svc-visual .particles span:nth-child(2){left:28%;animation-delay:1.9s;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.8);}
.svc-visual .particles span:nth-child(3){left:46%;animation-delay:3.4s;background:var(--lilac);box-shadow:0 0 12px rgba(167,139,250,.9);}
.svc-visual .particles span:nth-child(4){left:64%;animation-delay:.9s;}
.svc-visual .particles span:nth-child(5){left:78%;animation-delay:2.6s;background:var(--lilac);box-shadow:0 0 12px rgba(167,139,250,.9);}
.svc-visual .particles span:nth-child(6){left:90%;animation-delay:4.6s;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.8);}
.svc-visual .badge{
  position:absolute;bottom:26px;left:26px;
  font-family:var(--font-ui);font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--on-dark);
  display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.svc-visual .badge .live{
  width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px rgba(18,216,160,.9);
  animation:blink 1.9s infinite;
}

/* --- 제품 화면 목업 이미지 --- */
.svc-visual .svc-shot{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:contain;object-position:center 44%;
  padding:22px 16px 62px;
  z-index:2;pointer-events:none;
  filter:drop-shadow(0 30px 54px rgba(0,0,0,.5));
  animation:shotFloat 11s ease-in-out infinite;
}
@keyframes shotFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-11px);}
}
.svc-visual .badge{z-index:3;}

.svc-visual .badge .live{
  width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px rgba(18,216,160,.9);
  animation:blink 1.9s infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes glowDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-28px) scale(1.16);}
  66%{transform:translate(-28px,24px) scale(.9);}
}
@keyframes gridDrift{0%{transform:translate(0,0);}100%{transform:translate(26px,26px);}}
@keyframes particleRise{
  0%{transform:translateY(0);opacity:0;}
  12%{opacity:.95;}
  85%{opacity:.35;}
  100%{transform:translateY(-320px);opacity:0;}
}

/* 패널별 강조색 — 탭 버튼 색과 같은 톤으로 맞춥니다
   01 사피엔스: 코발트 · 02 사내(공동)근로복지기금: 블루→청록 */
.svc-panel{
  --svc-accent:var(--cobalt);
  --svc-accent-shadow:rgba(39,67,255,.30);
  --svc-glow:radial-gradient(circle,rgba(39,67,255,.45),rgba(167,139,250,.18) 48%,transparent 70%);
  --svc-hairline:rgba(167,139,250,.6);
  --svc-particle:var(--cobalt-soft);
  --svc-particle-glow:rgba(110,130,255,.9);
  --svc-particle-alt:var(--lilac);
  --svc-particle-alt-glow:rgba(167,139,250,.9);
}
.svc-panel[data-panel="1"]{
  --svc-accent:#0072BC;
  --svc-accent-shadow:rgba(0,114,188,.32);
  --svc-glow:radial-gradient(circle,rgba(0,114,188,.50),rgba(0,164,181,.20) 48%,transparent 70%);
  --svc-hairline:rgba(0,164,181,.60);
  --svc-particle:#39B8E0;
  --svc-particle-glow:rgba(57,184,224,.9);
  --svc-particle-alt:#2FD3DE;
  --svc-particle-alt-glow:rgba(47,211,222,.9);
}
.svc-panel .svc-stats div strong{color:var(--svc-accent);}
.svc-panel .svc-link:hover{background:var(--svc-accent);box-shadow:0 10px 26px var(--svc-accent-shadow);}
.svc-panel .svc-visual::before{background:linear-gradient(90deg,transparent,var(--svc-hairline),transparent);}
.svc-panel .svc-visual .glow{background:var(--svc-glow);}
.svc-panel .svc-visual .particles span{background:var(--svc-particle);box-shadow:0 0 12px var(--svc-particle-glow);}
.svc-panel .svc-visual .particles span:nth-child(3),
.svc-panel .svc-visual .particles span:nth-child(5){background:var(--svc-particle-alt);box-shadow:0 0 12px var(--svc-particle-alt-glow);}
.svc-panel .svc-visual .particles span:nth-child(2),
.svc-panel .svc-visual .particles span:nth-child(6){background:#fff;box-shadow:0 0 12px rgba(255,255,255,.8);}

@media (max-width:900px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .svc-tab{padding:16px 14px;font-size:15px;gap:9px;}
  .svc-panel.active{grid-template-columns:1fr;}
  .svc-copy{padding:40px 28px;}
  .svc-stats{grid-template-columns:1fr;gap:8px;}
  /* 라벨 21px, 설명문 14px 로 크기가 달라 baseline(밑선) 정렬이면
     설명문이 아래로 처져 보입니다. 세로 중앙으로 맞춥니다. */
  .svc-stats div{display:flex;align-items:center;gap:12px;padding:14px 16px;}
  /* 라벨은 줄이지 않고 항상 한 줄로. flex 기본값(flex-shrink:1)이라
     옆 설명문이 길면 라벨까지 같이 눌려서 2줄로 접혔습니다.
     min-width 로 라벨 열 폭을 통일해 설명문 시작 위치를 줄마다 맞춥니다.
     (가장 긴 "전단계 자동화"가 약 127px — 라벨 문구를 늘리면 이 값도 함께 키우세요) */
  .svc-stats div strong{
    margin-bottom:0;font-size:21px;
    flex:0 0 auto;white-space:nowrap;min-width:136px;
  }
  .svc-visual{min-height:280px;}
}

/* =========================================================
   AWARDS / PARTNERS — 인셋 다크 밴드
   ========================================================= */
.awards{
  position:relative;overflow:hidden;
  margin:0 24px;border-radius:var(--r-xl);
  background:linear-gradient(140deg,#171A23 0%,#0E1016 58%,#0B0D12 100%);
  color:#fff;
  padding:80px 0 0;
}
.awards::before{
  content:"";position:absolute;pointer-events:none;
  top:-180px;right:-120px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,67,255,.30),transparent 64%);
  filter:blur(16px);
}
.awards .wrap{position:relative;z-index:2;}
.awards-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding-bottom:30px;
}
.awards-head .eyebrow{
  color:var(--accent-soft) !important;
  background:rgba(255,255,255,0.09);
}
.awards-head h2{
  font-family:var(--font-display);
  font-size:clamp(25px,3vw,38px);font-weight:800;letter-spacing:-0.05em;line-height:1.24;color:#fff;
}
.awards-head > a{
  font-size:13.5px;font-weight:700;letter-spacing:-0.02em;
  color:#fff;white-space:nowrap;
  padding:12px 22px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  transition:background .22s ease, color .22s ease;
}
.awards-head > a:hover{background:#fff;color:var(--ink);}

/* 제품별로 줄을 나눈 로고 밴드 */
.marquee-group{position:relative;z-index:2;}
.marquee-group + .marquee-group{margin-top:34px;}
.marquee-group:last-of-type{padding-bottom:80px;}
.marquee-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-size:17px;font-weight:800;letter-spacing:-0.03em;color:#fff;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.marquee-label .ml-num{
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--accent-soft);
  background:rgba(255,255,255,0.10);padding:5px 11px;border-radius:var(--r-pill);
}

.marquee{
  position:relative;z-index:2;display:flex;overflow:hidden;
  padding:22px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex;flex:0 0 auto;align-items:center;
  /* [Safari] animation 단축속성 안의 var()는 웹킷이 선언을 통째로 무시합니다(iOS 16.3 이하).
     longhand로 분리하면 같은 변수를 그대로 쓰면서 정상 적용됩니다. */
  animation-name:marquee;
  animation-duration:var(--marquee-duration,52s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
/* 두 번째 줄은 반대 방향으로 흘립니다 */
.marquee.reverse .marquee-track{animation-name:marqueeReverse;}
/* [iOS] 터치 기기는 손가락이 닿은 요소에 :hover가 눌러붙어 그대로 남습니다.
   스크롤하다 로고 띠를 지나가면 영구 일시정지가 되므로, 마우스가 있는 기기로 한정합니다. */
@media (hover:hover) and (pointer:fine){
  .marquee:hover .marquee-track{animation-play-state:paused;}
}
/* 트랙 안에 같은 세트가 정확히 2벌 들어 있어 -50%가 한 바퀴입니다 */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqueeReverse{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* 로고 카드 — JPG/PNG 혼용이라 배경을 흰색으로 통일 */
.logo-item{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:198px;height:82px;padding:14px 22px;
  margin-right:16px;   /* gap 대신 마진 — 세트 길이가 정확히 절반이 되도록 */
  background:#fff;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-md);
  box-shadow:0 8px 22px rgba(0,0,0,0.22);
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.logo-item:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,0.32);}
.logo-item img{
  display:block;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
}

@media (max-width:720px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .awards{margin:0 12px;border-radius:var(--r-lg);padding-top:56px;}
  .awards-head{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:28px;}
  .marquee{padding:16px 0 0;}
  .marquee-group + .marquee-group{margin-top:26px;}
  .marquee-group:last-of-type{padding-bottom:56px;}
  .marquee-label{font-size:15px;padding-bottom:14px;}
  .logo-item{width:156px;height:68px;padding:12px 18px;margin-right:12px;border-radius:var(--r-sm);}
}

/* 접근성: 모션 최소화 설정 시 —
   어지럼증을 유발하는 큰 움직임(입자·글로우·목업 플로팅·그리드 드리프트 등)은
   맨 위 * { ... !important } 규칙이 그대로 끕니다.
   로고 띠만 예외로 두어 설정과 무관하게 계속 흐르게 합니다.
   * 는 우선순위가 0이고 .marquee-track 은 0,1,0 이라, 같은 !important 끼리
   비교하면 아래 선언이 이깁니다. animation-name / timing-function 은
   위 * 규칙이 건드리지 않으므로 기본 선언 값이 그대로 유지됩니다. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{
    animation-duration:var(--marquee-duration,52s) !important;
    animation-iteration-count:infinite !important;
  }
  /* 솔루션(사피엔스·웰피스) 비주얼 뒤에 깔리는 움직임도 예외.
     animation-delay 는 * 규칙이 건드리지 않으므로, 여기서도 duration/횟수만
     되돌립니다. 단축속성으로 쓰면 입자 6개의 개별 delay 가 0으로 초기화돼
     한꺼번에 올라가 버립니다.
     ※ 시간 값은 원래 선언(.svc-visual …)과 같아야 하니 함께 수정하세요. */
  .svc-visual .grid-overlay{
    animation-duration:26s !important;
    animation-iteration-count:infinite !important;
  }
  .svc-visual .glow{
    animation-duration:13s !important;
    animation-iteration-count:infinite !important;
  }
  .svc-visual .particles span{
    animation-duration:8s !important;
    animation-iteration-count:infinite !important;
  }
  .svc-visual .svc-shot{
    animation-duration:11s !important;
    animation-iteration-count:infinite !important;
  }
}

/* =========================================================
   COMPANY
   ========================================================= */
.company-section{background:var(--canvas);}
.company-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;
}
.company-copy{
  background:var(--surface);border-radius:var(--r-xl);
  padding:56px 52px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.company-copy h2{
  font-family:var(--font-display);
  font-size:clamp(27px,3.1vw,41px);font-weight:800;letter-spacing:-0.05em;line-height:1.22;
  color:var(--text);margin-bottom:22px;
}
.company-copy p{color:var(--text-soft);font-size:15.5px;line-height:1.85;margin-bottom:34px;max-width:470px;}

.company-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:34px;
}
.company-stats div{background:var(--fill);border-radius:var(--r-md);padding:18px 16px;}
.company-stats div strong{
  display:block;font-family:var(--font-ui);font-size:23px;font-weight:600;
  letter-spacing:-0.03em;color:var(--cobalt);margin-bottom:3px;line-height:1.1;
}
.company-stats div span{font-size:16px;color:var(--text-faint);}

.company-link{
  display:inline-flex;align-items:center;gap:9px;width:fit-content;
  font-size:14px;font-weight:700;letter-spacing:-0.02em;color:#fff;
  background:var(--ink);padding:14px 24px;border-radius:var(--r-pill);
  transition:background .25s ease, padding .25s var(--ease), box-shadow .25s ease;
}
.company-link:hover{background:var(--cobalt);padding-right:28px;box-shadow:0 10px 26px rgba(39,67,255,.3);}
.company-link svg{width:15px;height:15px;}

.company-visual{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#171A23 0%,#0E1016 60%,#0B0D12 100%);
  color:#fff;border-radius:var(--r-xl);
  padding:52px 44px;display:flex;align-items:center;
}
.company-visual .grid-overlay{background-size:24px 24px;}
.company-visual .glow{
  position:absolute;top:8%;right:-14%;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.38),rgba(39,67,255,.16) 46%,transparent 70%);
  filter:blur(14px);animation:glowDrift 15s ease-in-out infinite;
}
.company-values{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;gap:10px;}
.value-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px;border-radius:var(--r-md);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  transition:background .25s ease, transform .25s var(--ease);
}
.value-item:hover{background:rgba(255,255,255,0.10);transform:translateX(4px);}
.value-item .v-num{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:#fff;background:var(--grad);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-top:2px;
}
.value-item h4{
  font-family:var(--font-display);
  font-size:17px;font-weight:800;letter-spacing:-0.04em;color:#fff;margin-bottom:6px;
}
.value-item p{font-size:13.5px;color:var(--on-dark-soft);line-height:1.75;}


/* ---------------------------------------------------------
   COMPANY PROFILE — 회사개요 · 연혁 · 사업내용 · 수행실적
   (기존 .company-grid 아래에 붙는 블록)
   --------------------------------------------------------- */
.cd-intro{margin:64px 0 26px;}
.cd-intro h3{
  font-family:var(--font-display);
  font-size:clamp(23px,2.6vw,32px);font-weight:800;letter-spacing:-0.032em;line-height:1.32;
  color:var(--text);
}
.cd-intro h3 span{
  color:var(--cobalt);
  background:linear-gradient(180deg,transparent 62%,rgba(39,67,255,.16) 62%);
  padding:0 3px;
}

/* 같은 줄(01·02 / 03·04)의 카드 높이를 맞추고, 내용이 짧은 카드는 안쪽에서 고르게 벌어집니다 */
.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
/* 한글은 자간을 과하게 좁히지 않고, 어절 단위로 줄바꿈합니다 */
.cd-grid, .cd-intro{word-break:keep-all;overflow-wrap:break-word;}
.cd-grid :is(.y,.wy,.cd-n){font-variant-numeric:tabular-nums;}

.cd-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:38px 36px 34px;
  box-shadow:var(--shadow-sm);
  transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s ease;
}
/* 우상단 은은한 광원 — hover 시 살짝 커집니다 */
.cd-card::after{
  content:"";position:absolute;right:-90px;top:-110px;
  width:280px;height:280px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(39,67,255,.14),rgba(167,139,250,.08) 46%,transparent 70%);
  opacity:0;transition:opacity .45s ease, transform .7s var(--ease);
}
.cd-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(39,67,255,.18);}
.cd-card:hover::after{opacity:1;transform:scale(1.15);}
.cd-card > *{position:relative;z-index:1;}

.cd-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding-bottom:18px;margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.cd-head .cd-n{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:#fff;background:var(--grad);
  box-shadow:0 6px 16px rgba(39,67,255,.28);
}
.cd-head h4{
  font-family:var(--font-display);
  font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--text);
}

/* --- 01. 회사개요 --- */
.cd-dl{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;}
.cd-dl > div{
  display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;
  padding:16px 0;border-bottom:1px dashed var(--line);
}
.cd-dl > div:first-child{padding-top:2px;}
.cd-dl > div:last-child{border-bottom:none;padding-bottom:0;}
.cd-dl dt{
  font-size:12.5px;font-weight:600;letter-spacing:0;
  color:var(--text-soft);
  background:rgba(14,16,22,.045);
  padding:6px 0;border-radius:var(--r-sm);text-align:center;
}
.cd-dl dd{
  font-size:15px;font-weight:500;color:var(--text);
  line-height:1.72;letter-spacing:-0.012em;padding-top:3px;
}
.cd-tag{
  display:inline-block;margin-left:8px;vertical-align:1px;
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--lilac);background:rgba(167,139,250,.14);
  padding:3px 9px;border-radius:var(--r-pill);
}

/* --- 02. 주요 연혁 --- */
.cd-time{flex:1 1 auto;display:flex;flex-direction:column;}
.cd-time li{
  position:relative;
  display:grid;grid-template-columns:70px 1fr;gap:34px;
  padding:0 0 24px 0;
}
.cd-time li:not(:last-child){flex:1 0 auto;}
.cd-time li:last-child{padding-bottom:0;}
/* 연도 사이를 잇는 세로선 */
.cd-time li::before{
  content:"";position:absolute;left:83px;top:28px;bottom:2px;width:2px;
  background:linear-gradient(180deg,rgba(39,67,255,.30),rgba(39,67,255,.06));
}
.cd-time li:last-child::before{display:none;}
/* 선 위의 점 */
.cd-time li::after{
  content:"";position:absolute;left:78px;top:6px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--cobalt-soft);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.cd-time li.is-now::after{
  border-color:var(--cobalt);
  box-shadow:0 0 0 5px rgba(39,67,255,.14);
}
.cd-time .y{
  font-family:var(--font-ui);font-size:14px;font-weight:500;letter-spacing:0;
  color:var(--text-soft);text-align:right;padding-top:3px;
}
.cd-time li.is-now .y{color:var(--cobalt);font-weight:700;}
.cd-time li > div{padding-top:1px;}
.cd-time li p{
  position:relative;padding-left:13px;
  font-size:14px;font-weight:400;color:var(--text-soft);line-height:1.75;letter-spacing:-0.008em;
}
.cd-time li p + p{margin-top:5px;}
.cd-time li p::before{
  content:"";position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;background:var(--line-strong);
}
/* 각 연도의 첫 줄은 대표 이벤트 — 불릿 없이 진하게 */
.cd-time li p:first-child{
  padding-left:0;font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.015em;
}
.cd-time li p:first-child::before{display:none;}
.cd-time li p + p{margin-top:7px;}
.cd-time li.is-now p{color:var(--cobalt);}
.cd-time li.is-now p:first-child{color:var(--cobalt);}

/* --- 03. 주요 사업내용 --- */
.cd-biz{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,1fr);gap:14px;}
.biz-item{
  --biz:var(--cobalt);
  --biz-soft:rgba(39,67,255,.10);
  position:relative;overflow:hidden;
  background:var(--fill);
  border:1px solid transparent;
  border-radius:var(--r-md);
  padding:26px 22px 24px;
  display:flex;flex-direction:column;
  transition:background .28s ease, border-color .28s ease, transform .28s var(--ease);
}
.biz-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--biz);opacity:.75;
  transform:scaleY(.34);transform-origin:top;
  transition:transform .4s var(--ease), opacity .3s ease;
}
.biz-item:hover{background:var(--surface);border-color:var(--line);transform:translateY(-3px);}
.biz-item:hover::before{transform:scaleY(1);opacity:1;}
.biz-item:nth-child(2){--biz:var(--lilac);--biz-soft:rgba(167,139,250,.15);}
.biz-item:nth-child(3){--biz:#0072BC;--biz-soft:rgba(0,114,188,.10);}
.biz-item:nth-child(4){--biz:#00A4B5;--biz-soft:rgba(0,164,181,.12);}

/* 아이콘 — 남는 여백을 채우면서 항목을 한눈에 구분해 줍니다 */
.biz-ico{
  position:relative;z-index:1;
  width:44px;height:44px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  color:var(--biz);background:var(--biz-soft);
  margin-bottom:16px;
  transition:background .3s ease, color .3s ease, transform .35s var(--ease), box-shadow .35s ease;
}
.biz-ico svg{width:22px;height:22px;}
.biz-item:hover .biz-ico{
  color:#fff;background:var(--biz);
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(14,16,22,.16);
}
/* 카드 우하단의 은은한 도형 */
.biz-item::after{
  content:"";position:absolute;z-index:0;
  right:-56px;bottom:-64px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,var(--biz) 0%,transparent 68%);opacity:.13;
  transition:transform .6s var(--ease), opacity .4s ease;
}
.biz-item:hover::after{opacity:.22;transform:scale(1.12);}
.biz-item h5, .biz-item ul{position:relative;z-index:1;}
.biz-item h5{
  font-family:var(--font-display);
  font-size:15px;font-weight:700;letter-spacing:-0.018em;
  color:var(--text);margin-bottom:14px;
}
.biz-item ul{display:flex;flex-direction:column;gap:9px;}
.biz-item li{
  position:relative;padding-left:13px;
  font-size:13.5px;font-weight:400;color:var(--text-soft);line-height:1.72;letter-spacing:-0.008em;
}
.biz-item li::before{
  content:"";position:absolute;left:0;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--biz);opacity:.7;
}

/* --- 04. 사업수행실적 --- */
.cd-works{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;}
.cd-works li{
  display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start;
  padding:11px 0;border-bottom:1px dashed var(--line);
  transition:background .25s ease;
}
.cd-works li:first-child{padding-top:2px;}
.cd-works li:last-child{border-bottom:none;}
.cd-works .wy{
  font-family:var(--font-ui);font-size:13px;font-weight:500;letter-spacing:0;
  color:var(--text-faint);padding-top:3px;
}
.cd-works li p{
  position:relative;padding-left:13px;
  font-size:14px;font-weight:400;color:var(--text-soft);line-height:1.72;letter-spacing:-0.008em;
}
.cd-works li p + p{margin-top:4px;}
.cd-works li p::before{
  content:"";position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--line-strong);
}
/* 최신 실적 강조 */
.cd-works li.is-new{
  margin-top:10px;padding:15px 18px;border-bottom:none;
  background:linear-gradient(120deg,rgba(39,67,255,.07),rgba(167,139,250,.07));
  border-radius:var(--r-md);
}
.cd-works li.is-new .wy{color:var(--cobalt);font-weight:700;}
.cd-works li.is-new p{color:var(--text);font-weight:600;font-size:14.5px;letter-spacing:-0.015em;}
.cd-works li.is-new p::before{background:var(--cobalt);}
.cd-works li.is-new .sub{
  display:block;margin-top:6px;padding-left:13px;
  font-size:12.5px;font-weight:400;color:var(--text-faint);line-height:1.7;letter-spacing:-0.005em;
}

@media (max-width:1080px){
  .cd-card{padding:32px 28px 28px;}
  .cd-biz{gap:12px;}
  .biz-item{padding:22px 18px 20px;}
}
@media (max-width:900px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .cd-intro{margin:44px 0 20px;}
  /* 1열에서는 높이를 맞출 필요가 없으므로 원래 간격으로 */
  .cd-dl, .cd-works{justify-content:flex-start;}
  .cd-time li:not(:last-child){flex:0 0 auto;}
  .cd-biz{grid-template-rows:auto;}
  .cd-grid{grid-template-columns:1fr;gap:12px;}
  .cd-card{border-radius:var(--r-lg);}
  .cd-biz{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px), (max-device-width:600px){
  .cd-card{padding:28px 22px 24px;}
  .cd-biz{grid-template-columns:1fr;}
  .cd-dl > div{grid-template-columns:80px 1fr;gap:14px;}
  .cd-dl dd{font-size:14px;}
  .cd-time li{grid-template-columns:46px 1fr;gap:32px;}
  .cd-time li::before{left:59px;}
  .cd-time li::after{left:54px;}
  .cd-works li{grid-template-columns:50px 1fr;gap:12px;}
}

@media (max-width:900px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .company-grid{grid-template-columns:1fr;gap:12px;}
  .company-copy{padding:40px 28px;border-radius:var(--r-lg);}
  .company-visual{padding:32px 24px;border-radius:var(--r-lg);}
  .company-stats{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   CONTACT
   ========================================================= */
.cta-banner{
  position:relative;overflow:hidden;
  background:var(--canvas);padding:118px 0;
}
.cta-banner::before{
  content:"";position:absolute;pointer-events:none;
  top:-160px;left:-160px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,67,255,.13),transparent 64%);
  filter:blur(18px);
}
.cta-banner .wrap{position:relative;z-index:2;}
.contact-head{max-width:780px;margin-bottom:48px;}
.contact-head h2{
  font-family:var(--font-display);
  font-size:clamp(27px,3.4vw,44px);font-weight:800;letter-spacing:-0.05em;line-height:1.24;color:var(--text);
}
.contact-head h2 span{
  color:var(--cobalt);
  background:linear-gradient(180deg,transparent 62%,rgba(39,67,255,.16) 62%);
  padding:0 2px;
}
.contact-head p{color:var(--text-soft);font-size:15.5px;margin-top:18px;line-height:1.8;}

.contact-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:16px;align-items:start;}

.contact-form{
  background:var(--surface);border-radius:var(--r-xl);padding:42px 40px;
  display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--shadow-md);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field label{
  font-size:13px;font-weight:700;letter-spacing:-0.02em;color:var(--text);
}
.form-field .req{color:var(--cobalt);margin-left:4px;}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:var(--font-body);font-size:14.5px;color:var(--text);letter-spacing:-0.015em;
  background:var(--fill);
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:14px 16px;width:100%;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-field select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),
    linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  background-color:var(--fill);
}
.form-field textarea{min-height:140px;resize:vertical;line-height:1.75;}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--text-faint);}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;background-color:var(--surface);
  border-color:var(--cobalt);
  box-shadow:0 0 0 4px rgba(39,67,255,.12);
}

.cf-count{margin-top:6px;text-align:right;font-size:12px;color:#8A90A0;letter-spacing:-0.01em;}
.cf-count.over{color:#D93636;font-weight:700;}

/* --- 개인정보 수집 · 이용 동의 --- */
.consent-block{
  display:flex;flex-direction:column;gap:0;
  padding-top:2px;
}
.form-consent{
  display:flex;align-items:flex-start;gap:11px;
  font-size:13px;color:var(--text);line-height:1.7;cursor:pointer;
  letter-spacing:-0.02em;
}
.form-consent b{font-weight:700;color:var(--cobalt);margin-right:2px;}
.form-consent input[type="checkbox"]{
  appearance:none;width:18px;height:18px;flex:0 0 auto;margin-top:1px;
  border:1.5px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
/* 체크 표시는 SVG로 그립니다.
   (기존에는 대각선 그라디언트 2개를 겹쳤는데, 두 선이 상자 전체를 가로질러 X가 됐습니다) */
.form-consent input[type="checkbox"]:checked{
  border-color:var(--cobalt);
  background:var(--cobalt)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.4'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

/* 펼치기 버튼 — 체크박스 label 바깥에 두어야 클릭이 체크로 전달되지 않습니다 */
.consent-toggle{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  margin:9px 0 0 29px;padding:2px 0;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:-0.02em;
  color:var(--text-soft);background:none;border:0;cursor:pointer;
  border-bottom:1px solid var(--line-strong);
  transition:color .18s ease, border-color .18s ease;
}
.consent-toggle:hover{color:var(--cobalt);border-color:var(--cobalt);}
.consent-toggle:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:3px;}
.consent-sign{
  display:inline-block;width:9px;text-align:center;
  font-size:13px;font-weight:700;line-height:1;
}
.consent-sign::before{content:"+";}
.consent-toggle[aria-expanded="true"] .consent-sign::before{content:"\2212";} /* − */

.consent-detail{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .34s var(--ease), opacity .24s ease, margin-top .34s var(--ease);
}
.consent-detail.open{max-height:460px;opacity:1;margin-top:12px;}
.consent-detail-inner{
  background:var(--fill);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 22px;
  margin-left:29px;
}
.consent-dl{display:flex;flex-direction:column;gap:9px;}
.consent-dl > div{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;}
.consent-dl dt{
  font-size:12.5px;font-weight:700;letter-spacing:-0.02em;color:var(--text);
  line-height:1.65;
}
.consent-dl dd{
  font-size:12.5px;color:var(--text-soft);line-height:1.65;letter-spacing:-0.015em;
}
.consent-note{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12px;color:var(--text-faint);line-height:1.7;letter-spacing:-0.015em;
}
.consent-note a{color:var(--text-soft);font-weight:600;border-bottom:1px solid var(--line-strong);}
.consent-note a:hover{color:var(--cobalt);border-color:var(--cobalt);}

@media (prefers-reduced-motion:reduce){
  .consent-detail{transition:none;}
}

.form-submit{
  font-size:15px;font-weight:700;letter-spacing:-0.02em;
  color:#fff;background:var(--ink);padding:18px 24px;width:100%;
  border-radius:var(--r-pill);
  transition:background .22s ease, transform .22s var(--ease), box-shadow .22s ease;
}
.form-submit:hover{background:var(--cobalt);transform:translateY(-2px);box-shadow:var(--shadow-cobalt);}
.form-submit:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;}
.form-submit:disabled:hover{background:var(--ink);transform:none;box-shadow:none;}

.form-success{
  display:none;align-items:center;gap:10px;
  font-size:13.5px;font-weight:700;color:#0B8F6C;
  padding:15px 18px;background:rgba(18,216,160,.10);border-radius:var(--r-md);
}
.form-success.show{display:flex;}
.form-success svg{width:18px;height:18px;flex:0 0 auto;}

.contact-side{display:flex;flex-direction:column;gap:16px;}
.contact-map{
  border-radius:var(--r-lg);height:270px;overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.contact-map iframe{
  width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) contrast(1.03);transition:filter .35s ease;
}
.contact-map:hover iframe{filter:none;}

.contact-info{background:var(--surface);border-radius:var(--r-lg);padding:10px 26px;box-shadow:var(--shadow-sm);}
.contact-info dl{display:flex;flex-direction:column;}
.contact-info .row{
  display:flex;gap:14px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.contact-info .row:last-child{border-bottom:none;}
.contact-info .row svg{
  width:34px;height:34px;padding:8px;flex:0 0 auto;
  color:var(--cobalt);background:rgba(39,67,255,.08);border-radius:var(--r-sm);
}
.contact-info dt{
  font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.10em;
  color:var(--text-faint);margin-bottom:5px;
}
.contact-info dd{font-size:14px;color:var(--text);line-height:1.65;letter-spacing:-0.02em;font-weight:500;}

@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:600px), (max-device-width:600px){
  .form-row{grid-template-columns:1fr;}
  .contact-form{padding:28px 22px;border-radius:var(--r-lg);}
  /* 좁은 화면에서는 들여쓰기를 없애고 항목/내용을 세로로 쌓습니다 */
  .consent-toggle{margin-left:0;}
  .consent-detail-inner{margin-left:0;padding:17px 18px;}
  .consent-detail.open{max-height:620px;}
  .consent-dl > div{grid-template-columns:1fr;gap:2px;}
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:var(--ink);color:var(--on-dark-soft);
  padding:76px 0 0;position:relative;overflow:hidden;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
footer::before{
  content:"";position:absolute;pointer-events:none;
  top:-260px;left:50%;transform:translateX(-50%);width:900px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(39,67,255,.22),transparent 66%);
  filter:blur(18px);
}
footer .wrap{position:relative;z-index:2;}
.footer-top{
  display:grid;grid-template-columns:2.2fr repeat(4,1fr);gap:40px;
  padding-bottom:56px;
}
.footer-brand .logo{margin-bottom:20px;}
/* 브랜드 문구를 지운 뒤 로고가 마지막 요소가 되면, 아래 20px 여백이
   그대로 남아 푸터 높이를 잡아먹습니다. 그때만 여백을 없앱니다.
   나중에 <p> 를 되살리면 위 규칙이 자동으로 다시 적용됩니다. */
.footer-brand .logo:last-child{margin-bottom:0;}
.footer-brand .logo .logo-chip img{height:50px;}
.footer-brand p{font-size:13.5px;line-height:1.85;max-width:320px;color:var(--on-dark-soft);}
.footer-col h5{
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:13.5px;color:var(--on-dark-soft);transition:color .2s ease;}
.footer-col a:hover{color:#fff;}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0;border-top:1px solid var(--line-dark);
}
.footer-bottom p{font-family:var(--font-ui);font-size:11.5px;letter-spacing:.04em;color:var(--on-dark-faint);}
/* 패밀리 사이트 — 푸터 최하단 우측 */
.family-site{position:relative;flex:0 0 auto;}
.family-select{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-0.01em;
  color:var(--on-dark);cursor:pointer;
  padding:12px 44px 12px 18px;min-width:210px;
  background:rgba(255,255,255,0.07);
  border:1px solid var(--line-dark);
  border-radius:var(--r-pill);
  transition:background .2s ease, border-color .2s ease;
}
.family-select:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.28);}
.family-select option{color:var(--text);background:#fff;}
.family-site::after{
  content:"";position:absolute;right:19px;top:50%;
  width:8px;height:8px;margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--on-dark-soft);border-bottom:2px solid var(--on-dark-soft);
  transform:rotate(45deg);
}

.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,0.08);color:var(--on-dark-soft);
  transition:background .2s ease, color .2s ease;
}
.footer-social a:hover{background:#fff;color:var(--ink);}
.footer-social svg{width:15px;height:15px;}

@media (max-width:900px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:520px), (max-device-width:600px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;}
  .family-select{width:100%;}
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s var(--ease), visibility .3s, background .2s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:none;}
.back-to-top:hover{background:var(--cobalt);transform:translateY(-3px);}
.back-to-top svg{width:18px;height:18px;}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}

/* =========================================================
   RESPONSIVE — HEADER / 공통
   ========================================================= */
@media (max-width:900px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .wrap{padding:0 20px;}
  .site-header{
    top:0;left:0;transform:none;width:100%;
    height:64px;padding:0 16px 0 20px;
    border-radius:0;border-left:none;border-right:none;border-top:none;
    background:rgba(14,16,22,0.94);
  }
  .site-header.scrolled{top:0;height:64px;}
  .nav-desktop{display:none;}
  .nav-toggle{display:flex;}
  .btn-contact{padding:10px 18px;font-size:12.5px;}
  .section{padding:76px 0;}
  .cta-banner{padding:76px 0;}
  .section-head{margin-bottom:36px;}
  .svc-tab{padding:11px 20px;font-size:13.5px;}
}

/* =========================================================
   카카오맵css
   ========================================================= */
.map-label {
  padding: 6px 12px;
  background: #000000;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* =========================================================
   MOBILE / WEBVIEW — 공통 보정
   위 모바일 블록과 같은 판정 조건을 씁니다. max-width 하나만으로
   판정하면 viewport 를 무시하는 웹뷰(980px 로 보고)에서 모바일
   규칙이 전부 빗나가, PC 레이아웃이 그대로 축소되어 보입니다.
   ========================================================= */
@media (max-width:900px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){

  /* 장식용 원(width 400~760px)과 마퀴가 가로 스크롤을 만들지 않도록 */
  html,body{max-width:100%;overflow-x:hidden;}
  img,svg,iframe,table{max-width:100%;}

  /* 터치 영역 최소 44px */
  .nav-toggle,.btn-contact,.svc-tab,.family-select,
  .back-to-top,.form-submit,.consent-toggle{min-height:44px;}

  /* iOS 는 입력 폰트가 16px 미만이면 포커스 시 화면을 확대합니다.
     현재 14.5px 이라 주소 입력마다 화면이 튀어 오릅니다. */
  .form-field input,
  .form-field select,
  .form-field textarea{font-size:16px;}

  /* 지도는 세로 화면에서 너무 납작해 보여 조금 키웁니다 */
  .contact-map{height:300px;}

  /* 회사개요 카드 안의 정의목록·연혁이 좁은 화면에서 넘치지 않도록 */
  .cd-grid,.cd-biz,.cd-dl,.cd-time,.cd-works{min-width:0;}
  .cd-dl dd,.cd-time li,.cd-works li{word-break:keep-all;overflow-wrap:break-word;}
}