:root{
    --ink:#12203A;
    --ink2:#1B2E52;
    --teal:#0E7C7B;
    --teal-lt:#12A3A1;
    --coral:#FF6B4A;
    --sun:#FFC93C;
    --mist:#F3F7FA;
    --paper:#FFFFFF;
    --line:#E1E8EF;
    --slate:#5B6B82;
    --pen: 'Nanum Pen Script', cursive;
    --grot: 'Space Grotesk', sans-serif;
    --kr: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--kr); color:var(--ink); background:var(--paper);
    overflow-x:hidden; -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
  section{position:relative;}
  .eyebrow{
    font-family:var(--grot); font-size:12px; font-weight:600; letter-spacing:.16em;
    color:var(--teal); text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
  }
  .eyebrow::before{content:""; width:16px; height:2px; background:var(--coral); display:inline-block; border-radius:2px;}
  h2.h{
    font-size:clamp(24px,3.6vw,38px); font-weight:800; line-height:1.28; margin:10px 0 14px; letter-spacing:-0.01em;
  }
  p.lead{ color:var(--slate); font-size:clamp(14px,1.6vw,16px); line-height:1.65; max-width:620px; }
  .pen{ font-family:var(--pen); color:var(--coral); font-size:1.5em; line-height:1; display:inline-block; }

  /* ===== 버튼 ===== */
  .btn{
    display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px;
    padding:13px 24px; border-radius:100px; cursor:pointer; border:none; white-space:nowrap;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--coral); color:#fff; box-shadow:0 10px 24px -8px rgba(255,107,74,.55); }
  .btn-primary:hover{ box-shadow:0 14px 28px -8px rgba(255,107,74,.7); }
  .btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.35); }
  .btn-ghost:hover{ background:rgba(255,255,255,.16); }
  .btn-dark{ background:var(--ink); color:#fff; }
  .btn-dark:hover{ box-shadow:0 12px 24px -10px rgba(18,32,58,.5); }
  .btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
  .btn-outline:hover{ border-color:var(--teal); color:var(--teal); }

  /* ===== 헤더 ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0; transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
  }
  header.scrolled{ background:rgba(255,255,255,.9); backdrop-filter:blur(14px); padding:12px 0; box-shadow:0 2px 20px rgba(18,32,58,.06); }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; }
  
	.logo {display: flex; align-items: center; text-decoration: none; position: relative;}
	header.scrolled .logo{ color:var(--ink); }
	.logo img {display: block; width: auto; height: 30px; object-fit: contain;}
	.logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--coral); }
/* 두 로고 겹쳐서 전환 */
.logo-default, .logo-white { position: relative; }
.logo-white {  position: absolute;  top: 0; left: 0;  opacity: 0;  visibility: hidden;  transition: opacity .2s ease;}
.logo-default {  opacity: 1;  transition: opacity .2s ease;}
#siteHeader.scrolled .logo-default {  opacity: 0;  visibility: hidden;}
#siteHeader.scrolled .logo-white {  opacity: 1;  visibility: visible;}		
  
  nav.gnb{ display:flex; align-items:center; gap:34px; }
  nav.gnb a{
    font-size:14px; font-weight:600; color:rgba(255,255,255,.85); position:relative; padding:4px 0;
    transition:color .3s;
  }
  header.scrolled nav.gnb a{ color:var(--ink2); }
  nav.gnb a::after{
    content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--coral);
    transition:width .25s ease; border-radius:2px;
  }
  nav.gnb a:hover::after{ width:100%; }
  .header-cta{ display:flex; align-items:center; gap:14px; }
  .hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:120; }
  .hamburger span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
  header.scrolled .hamburger span{ background:var(--ink); }
  .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  
  .header-cta2{ display:flex; align-items:right; gap:14px; }  
  .hamburger2{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:120; }
  .hamburger2 span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
  header.scrolled .hamburger2 span{ background:var(--teal); }
  .hamburger2.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger2.open span:nth-child(2){ opacity:0; }
  .hamburger2.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:0; background:var(--ink); z-index:110; display:flex; flex-direction:column;
    justify-content:center; align-items:center; gap:26px; transform:translateY(-100%); transition:transform .35s ease;
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{ color:#fff; font-size:22px; font-weight:700; }

  /* ===== 히어로 (캔버스 네트워크 애니메이션) ===== */
  .hero{
    background:radial-gradient(ellipse 120% 80% at 20% -10%, #1c3560 0%, var(--ink) 55%, #0c1728 100%);
    min-height:100svh; display:flex; align-items:center; padding:120px 0 80px; overflow:hidden;
  }
  #netCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
  .hero-grid{
    position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%;
  }
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18); padding:7px 16px 7px 8px; border-radius:100px; margin-bottom:22px;
  }
  .hero-badge .tag{ background:var(--coral); color:#fff; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:100px; letter-spacing:.03em; }
  .hero-badge span.txt{ font-size:12.5px; color:#dbe6f5; font-weight:600; }
  .hero h1{
    font-size:clamp(32px,5.2vw,58px); font-weight:800; line-height:1.16; color:#fff; letter-spacing:-.02em; margin-bottom:20px;
  }
  .hero h1 .accent{ color:var(--teal-lt); }
  .hero h1 .strike-wrap{ position:relative; display:inline-block; }
  .hero h1 svg.squiggle{ position:absolute; left:-4px; right:-4px; bottom:-6px; width:calc(100% + 8px); height:14px; }
  .hero p.lead{ color:#b7c6dd; margin-bottom:32px; }
  .hero-cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; }
  .hand-arrow{
    position:absolute; font-family:var(--pen); color:var(--sun); font-size:22px; top:-38px; left:210px;
    transform:rotate(-6deg); display:flex; align-items:center; gap:6px; pointer-events:none;
  }
  .hand-arrow svg{ width:46px; height:34px; }
  .hero-stats{ display:flex; gap:30px; margin-top:44px; flex-wrap:wrap; }
  .hero-stats .st b{ font-family:var(--grot); font-size:26px; color:#fff; display:block; }
  .hero-stats .st span{ font-size:11.5px; color:#93a7c4; }

  /* 떠다니는 아이콘 칩 */
  .orbit{ position:relative; height:460px; }
  .chip{
    position:absolute; width:84px; height:84px; border-radius:22px; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; box-shadow:0 20px 40px -14px rgba(0,0,0,.5);
    animation:floaty 6s ease-in-out infinite;
  }
  .chip svg{ width:36px; height:36px; }
  .chip.c1{ top:6%; left:10%; animation-delay:0s; background:linear-gradient(145deg, rgba(14,124,123,.35), rgba(14,124,123,.08)); }
  .chip.c2{ top:36%; right:2%; animation-delay:1.1s; background:linear-gradient(145deg, rgba(255,107,74,.32), rgba(255,107,74,.08)); }
  .chip.c3{ bottom:22%; left:0%; animation-delay:2s; background:linear-gradient(145deg, rgba(255,201,60,.3), rgba(255,201,60,.08)); }
  .chip.c4{ bottom:2%; right:20%; animation-delay:.6s; background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); }
  .chip.c5{ top:56%; left:38%; animation-delay:1.7s; width:64px; height:64px; background:linear-gradient(145deg, rgba(18,163,161,.4), rgba(18,163,161,.08)); }
  @keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-16px) rotate(4deg);} }
  .center-glow{
    position:absolute; top:50%; left:50%; width:220px; height:220px; transform:translate(-50%,-50%);
    border-radius:50%; background:radial-gradient(circle, rgba(18,163,161,.35), transparent 70%); filter:blur(6px);
  }
  .scroll-cue{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column;
    align-items:center; gap:6px; color:#8ba0bf; font-size:10.5px; letter-spacing:.1em;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(#8ba0bf, transparent); animation:scrolldown 1.8s ease-in-out infinite; }
  @keyframes scrolldown{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

  /* ===== 로고 마퀴 ===== */
  .marquee-sec{ background:var(--mist); padding:28px 0; border-bottom:1px solid var(--line); overflow:hidden; }
  .marquee-label{ text-align:center; font-size:11.5px; color:var(--slate); margin-bottom:16px; font-weight:600; letter-spacing:.04em; }
  .marquee{ display:flex; width:max-content; animation:scroll 26s linear infinite; }
  .marquee:hover{ animation-play-state:paused; }
  .marquee span{
    font-family:var(--grot); font-weight:600; font-size:16px; color:#9aa8bd; padding:0 42px;
    white-space:nowrap; display:flex; align-items:center; gap:10px;
  }
  .marquee span::before{ content:"◆"; font-size:8px; color:var(--coral); }
  @keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ===== 공통 섹션 ===== */
  .section{ padding:100px 0; }
  .section.mist{ background:var(--mist); }
  .head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:48px; flex-wrap:wrap; }

  /* ===== 사업분야 카드 ===== */
  .biz-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
  .biz-card{
    background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px 20px;
    position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  }
  .biz-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(18,32,58,.18); border-color:transparent; }
  .biz-card .scribble{
    position:absolute; top:14px; right:14px; width:54px; height:54px; opacity:0; transform:scale(.6) rotate(-10deg);
    transition:opacity .3s ease, transform .3s ease;
  }
  .biz-card:hover .scribble{ opacity:1; transform:scale(1) rotate(0deg); }
  .biz-ic{
    width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    margin-bottom:18px; transition:transform .3s ease;
  }
  .biz-card:hover .biz-ic{ transform:rotate(-8deg) scale(1.08); }
  .biz-ic svg{ width:24px; height:24px; }
  .biz-card h3{ font-size:15.5px; font-weight:800; margin-bottom:8px; }
  .biz-card p{ font-size:12.5px; color:var(--slate); line-height:1.55; }

  /* ===== 솔루션 스포트라이트 ===== */
  .sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .sol-card{
    border-radius:22px; overflow:hidden; background:var(--paper); border:1px solid var(--line);
    transition:transform .35s ease, box-shadow .35s ease; cursor:pointer;
  }
  .sol-card:hover{ transform:translateY(-8px) rotate(-.3deg); box-shadow:0 30px 50px -22px rgba(18,32,58,.25); }
  .sol-thumb{ position:relative; height:190px; overflow:hidden; }
  .sol-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); transition:transform .5s ease; }
  .sol-card:hover .sol-thumb img{ transform:scale(1.08); }
  .sol-thumb::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(18,32,58,.78), rgba(14,124,123,.62));
    mix-blend-mode:multiply;
  }
  .sol-thumb::before{
    content:""; position:absolute; inset:0; z-index:2;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:18px 18px; opacity:.5;
  }
  .sol-thumb .num{
    position:absolute; z-index:3; bottom:12px; left:16px; font-family:var(--grot); color:#fff; font-size:32px; font-weight:700; opacity:.9;
  }
  .sol-body{ padding:22px; }
  .sol-tag{ font-size:10.5px; font-weight:800; color:var(--teal); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; display:block; }
  .sol-body h3{ font-size:17px; font-weight:800; margin-bottom:8px; }
  .sol-body p{ font-size:12.5px; color:var(--slate); line-height:1.6; margin-bottom:14px; }
  .sol-link{ font-size:12.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:5px; }
  .sol-link svg{ width:13px; height:13px; transition:transform .25s; }
  .sol-card:hover .sol-link svg{ transform:translateX(4px); }

  /* ===== 카운트업 통계 ===== */
  .stats-band{
    background:var(--ink); border-radius:28px; padding:52px 40px; margin-top:80px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; overflow:hidden;
  }
  .stats-band::before{
    content:""; position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(18,163,161,.28), transparent 70%); top:-140px; right:-80px;
  }
  .stat-cell{ text-align:center; position:relative; z-index:2; }
  .stat-cell b{ font-family:var(--grot); font-size:clamp(28px,3.4vw,42px); color:#fff; display:block; }
  .stat-cell span{ font-size:12px; color:#9fb0c9; }

  /* ===== 왜 RGAI인가 ===== */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .why-card{ position:relative; padding:8px; }
  .why-num{ font-family:var(--pen); font-size:52px; color:var(--sun); -webkit-text-stroke:1.5px var(--ink); line-height:1; }
  .why-card h3{ font-size:18px; font-weight:800; margin:14px 0 10px; }
  .why-card p{ font-size:13px; color:var(--slate); line-height:1.65; }
  .why-underline{ width:52px; height:8px; margin-top:10px; }

  /* ===== 마인드맵 배너 ===== */
  .mm-banner{
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    background:linear-gradient(120deg, #EAF6F5, #F3F7FA); border:1px solid var(--line); border-radius:24px;
    padding:30px 34px;
  }
  .mm-left{ display:flex; align-items:center; gap:18px; }
  .mm-ic{
    width:56px; height:56px; border-radius:16px; background:var(--paper); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  }
  .mm-ic svg{ width:28px; height:28px; }
  .mm-left h4{ font-size:16px; font-weight:800; margin-bottom:4px; }
  .mm-left p{ font-size:12.5px; color:var(--slate); }

  /* ===== 고객사 ===== */
  .client-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
  .client-cell{
    aspect-ratio:2/1; border:1px solid var(--line); border-radius:12px; background:var(--paper);
    display:flex; align-items:center; justify-content:center; font-family:var(--grot); font-weight:600;
    font-size:12px; color:#adb9c9; transition:.25s;
  }
  .client-cell:hover{ color:var(--teal); border-color:var(--teal); transform:translateY(-3px); }


  /* ===== 파트너 ===== */
  .partner-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
  .partner-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px 18px; transition:transform .25s ease, box-shadow .25s ease; }
  .partner-card:hover{ transform:translateY(-5px); box-shadow:0 22px 36px -20px rgba(18,32,58,.2); }
  .ptag{ display:inline-block; font-size:10px; font-weight:800; color:var(--teal); background:#E6F4F4; padding:3px 9px; border-radius:100px; margin-bottom:12px; letter-spacing:.03em; }
  .partner-card h4{ font-size:14.5px; font-weight:800; margin-bottom:8px; line-height:1.3; }
  .partner-card p{ font-size:12px; color:var(--slate); line-height:1.55; }

  /* ===== CTA (다크 북엔드) ===== */
  .cta-dark{
    background:radial-gradient(ellipse 100% 100% at 80% 20%, #1c3560 0%, var(--ink) 60%);
    border-radius:32px; padding:80px 50px; text-align:center; position:relative; overflow:hidden;
  }
  #ctaCanvas{ position:absolute; inset:0; opacity:.4; }
  .cta-dark .inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
  .cta-dark h2{ color:#fff; font-size:clamp(24px,3.6vw,36px); font-weight:800; margin-bottom:16px; }
  .cta-dark p{ color:#b7c6dd; margin-bottom:32px; font-size:14.5px; }
  .cta-row2{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ===== 푸터 ===== */
  footer{ padding:60px 0 34px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
  .foot-logo{ font-family:var(--grot); font-weight:700; font-size:19px; margin-bottom:14px; }
  footer p.desc{ font-size:12.5px; color:var(--slate); line-height:1.7; max-width:280px; }
  .foot-col h5{ font-size:12.5px; font-weight:800; margin-bottom:14px; color:var(--ink); }
  .foot-col a{ display:block; font-size:12.5px; color:var(--slate); margin-bottom:10px; transition:color .2s; }
  .foot-col a:hover{ color:var(--teal); }
  .foot-bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:11.5px; color:#9aa8bd; }

  /* ===== 반응형 ===== */
  @media (max-width:980px){
    .hero-grid{ grid-template-columns:1fr; }
    .orbit{ height:280px; }
    .biz-grid{ grid-template-columns:repeat(3,1fr); }
    .sol-grid{ grid-template-columns:repeat(2,1fr); }
    .why-grid{ grid-template-columns:repeat(3,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .client-grid{ grid-template-columns:repeat(4,1fr); }
    .stats-band{ grid-template-columns:repeat(2,1fr); }
    .partner-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:680px){
    nav.gnb, .header-cta .btn{ display:none; }
    .hamburger{ display:flex; }
    .hero{ padding-top:110px; text-align:left; }
    .hand-arrow{ display:none; }
    .biz-grid{ grid-template-columns:repeat(2,1fr); }
    .sol-grid{ grid-template-columns:1fr; }
    .why-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; }
    .client-grid{ grid-template-columns:repeat(3,1fr); }
    .stats-band{ grid-template-columns:1fr 1fr; padding:36px 22px; }
    .partner-grid{ grid-template-columns:1fr 1fr; }
    .mm-banner{ flex-direction:column; align-items:flex-start; }
    .section{ padding:64px 0; }
    .cta-dark{ padding:50px 26px; }
  }

/* ===================== 내부 페이지 공통 ===================== */
nav.gnb a.on::after{ width:100%; }
header.scrolled .btn-primary{ box-shadow:none; }
.page-hero{
  background:radial-gradient(ellipse 120% 90% at 10% -20%, #1c3560 0%, var(--ink) 55%, #0c1728 100%);
  padding:150px 0 70px; position:relative; overflow:hidden; color:#fff;
}
.page-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.45; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--teal-lt); }
.page-hero .eyebrow::before{ background:var(--sun); }
.page-hero h1{ font-size:clamp(30px,4.6vw,48px); font-weight:800; letter-spacing:-.02em; line-height:1.18; margin:10px 0 14px; }
.page-hero p.lead{ color:#b7c6dd; }
.crumb{ font-size:12.5px; color:#8ba0bf; margin-bottom:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumb a{ color:#c9d6e6; } .crumb a:hover{ color:#fff; }
.crumb span.sep{ opacity:.5; }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* 탭 */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.tab{
  font-family:var(--kr); font-size:13px; font-weight:700; padding:9px 18px; border-radius:100px;
  border:1.5px solid var(--line); background:var(--paper); color:var(--slate); cursor:pointer; transition:.2s;
}
.tab:hover{ border-color:var(--teal); color:var(--teal); }
.tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* 솔루션 목록 카드 */
.scard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.scard{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px 24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s; position:relative; overflow:hidden;
}
.scard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); opacity:0; transition:.25s; }
.scard:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(18,32,58,.2); border-color:transparent; }
.scard:hover::before{ opacity:1; }
.stag{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; display:block; margin-bottom:10px; }
.scard h3{ font-size:17px; font-weight:800; margin-bottom:8px; }
.scard p{ font-size:12.5px; color:var(--slate); line-height:1.6; margin-bottom:14px; min-height:40px; }
.scard .sol-link svg{ width:13px; height:13px; }
.scard:hover .sol-link svg{ transform:translateX(4px); }

/* 카테고리 요약 */
.cat-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:44px; }
.cat-tile{ border-radius:16px; padding:18px 16px; color:#fff; cursor:pointer; transition:transform .2s; }
.cat-tile:hover{ transform:translateY(-4px); }
.cat-tile b{ display:block; font-size:14px; margin-bottom:4px; }
.cat-tile span{ font-size:11.5px; opacity:.8; }

/* 솔루션 상세 */
.ov-box{ background:var(--mist); border:1px solid var(--line); border-radius:20px; padding:26px 28px; margin-bottom:20px; position:relative; }
.ov-box .ko{ position:absolute; right:28px; top:24px; font-family:var(--grot); font-size:12px; color:var(--teal); font-weight:600; }
.lbl{ font-size:11.5px; font-weight:800; color:var(--teal); letter-spacing:.05em; margin-bottom:12px; }
.ov-box p{ font-size:14.5px; line-height:1.75; color:var(--ink); max-width:900px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.info-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px 26px; }
.info-card.tint{ background:var(--mist); }
.info-card ul{ list-style:none; }
.info-card li{ font-size:13.5px; line-height:1.6; color:var(--ink); padding-left:16px; position:relative; margin-bottom:9px; }
.info-card li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--teal); }
.info-card p{ font-size:13.5px; line-height:1.7; }
.cta-inline{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--ink); color:#fff; border-radius:20px; padding:26px 30px; flex-wrap:wrap; }
.cta-inline b{ font-size:16px; } .cta-inline span{ font-size:13px; color:#b7c6dd; }
.prevnext{ display:flex; justify-content:space-between; gap:12px; margin-top:26px; font-size:13px; font-weight:700; flex-wrap:wrap; }
.prevnext a{ color:var(--slate); } .prevnext a:hover{ color:var(--teal); }

/* 회사소개 */
.mission-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mcard{ background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:30px; }
.mcard h3{ font-size:18px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.mcard h3 i{ width:10px; height:10px; border-radius:50%; background:var(--coral); display:inline-block; }
.mcard li{ list-style:none; font-size:14px; line-height:1.7; padding-left:18px; position:relative; margin-bottom:8px; }
.mcard li::before{ content:"—"; position:absolute; left:0; color:var(--teal); }
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:var(--line); }
.tl-item{ position:relative; margin-bottom:26px; }
.tl-item::before{ content:""; position:absolute; left:-30px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 0 0 2px var(--teal); }
.tl-item .yr{ font-family:var(--grot); font-weight:700; color:var(--teal); font-size:14px; }
.tl-item h4{ font-size:16px; font-weight:800; margin:4px 0 4px; }
.tl-item p{ font-size:13px; color:var(--slate); }
.overview-table{ width:100%; border-collapse:collapse; font-size:14px; }
.overview-table th{ text-align:left; width:140px; background:var(--ink); color:#fff; padding:14px 18px; font-weight:700; }
.overview-table td{ padding:14px 18px; border-bottom:1px solid var(--line); }
.overview-table tr:nth-child(even) td{ background:var(--mist); }
.map-box{ background:var(--mist); border:1px solid var(--line); border-radius:22px; padding:30px; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; }
.map-ph{ aspect-ratio:16/10; border-radius:16px; background:repeating-linear-gradient(135deg,#dfe6ec,#dfe6ec 8px,#e9eef3 8px,#e9eef3 16px); display:flex; align-items:center; justify-content:center; color:#7f8ea3; font-size:13px; }
.addr h4{ font-size:20px; font-weight:800; margin-bottom:10px; }
.addr p{ font-size:14px; color:var(--slate); line-height:1.7; }

/* 사업분야 상세 */
.biz-rows{ display:grid; gap:18px; }
.biz-row{ display:grid; grid-template-columns:2.2fr 3fr 2.4fr; gap:20px; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:28px; align-items:start; }
.biz-row h3{ font-size:19px; font-weight:800; display:flex; align-items:center; gap:12px; }
.biz-row h3 .n{ font-family:var(--grot); font-size:13px; color:#fff; background:var(--teal); width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; }
.biz-row p{ font-size:13.5px; color:var(--slate); line-height:1.65; margin-top:10px; }
.biz-row ul{ list-style:none; } .biz-row li{ font-size:13.5px; line-height:1.6; padding-left:16px; position:relative; margin-bottom:7px; }
.biz-row li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--coral); }
.biz-row .link-list a{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--teal); background:#E6F4F4; padding:6px 12px; border-radius:100px; margin:0 6px 8px 0; }
.biz-row .link-list a:hover{ background:var(--teal); color:#fff; }

/* 실적 */
table.ref{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--paper); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
table.ref th{ background:var(--ink); color:#fff; text-align:left; padding:13px 16px; font-size:12.5px; }
table.ref td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.ref tr:nth-child(even) td{ background:var(--mist); }
.cgroup{ margin-bottom:28px; } .cgroup h4{ font-size:14px; font-weight:800; color:var(--teal); margin-bottom:12px; }
.table-scroll{ overflow-x:auto; }

/* 고객지원 */
.support-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:start; }
form.cform{ background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:30px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.frow.one{ grid-template-columns:1fr; }
.frow label{ font-size:12.5px; font-weight:700; color:var(--slate); display:block; margin-bottom:6px; }
.frow input, .frow select, .frow textarea{
  width:100%; font-family:var(--kr); font-size:14px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; transition:.2s;
}
.frow input:focus, .frow select:focus, .frow textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,123,.12); }
.frow textarea{ min-height:120px; resize:vertical; }
.side-card{ background:var(--mist); border:1px solid var(--line); border-radius:22px; padding:26px; margin-bottom:18px; }
.side-card h4{ font-size:15px; font-weight:800; margin-bottom:12px; }
.side-card p, .side-card li{ font-size:13.5px; color:var(--slate); line-height:1.7; }
.dl-list a{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; color:var(--ink); }
.dl-list a:hover{ color:var(--teal); }
.dl-list a small{ font-weight:400; color:var(--slate); font-size:12px; }
.notice-list li{ list-style:none; display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.notice-list li span{ color:var(--slate); font-size:12.5px; white-space:nowrap; }
.form-done{ display:none; background:var(--mist); border:1px solid var(--line); border-radius:22px; padding:40px; text-align:center; }
.form-done .pen{ font-size:2.4em; display:block; margin-bottom:8px; }

/* 채용 */
.job-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px 26px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; margin-bottom:14px; }
.job-card h4{ font-size:16px; font-weight:800; margin-bottom:6px; }
.job-card p{ font-size:13px; color:var(--slate); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

@media (max-width:980px){
  .scard-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-strip{ grid-template-columns:repeat(3,1fr); }
  .biz-row{ grid-template-columns:1fr; }
  .support-grid, .mission-grid, .map-box{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .page-hero{ padding:120px 0 50px; }
  .scard-grid, .cat-strip, .two-col{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; }
  .ov-box .ko{ position:static; display:block; margin-bottom:8px; }
  .job-card{ grid-template-columns:1fr; }
}

a.sol-card, a.biz-card{ display:block; color:inherit; }
.marquee-sec{ margin-top:0; }

/* ===================== 마인드맵 (비즈니스 영역) ===================== */
/* markmap.maxWidth(노드 줄바꿈 폭)는 초기화 후 동적 변경이 안 되므로,
   PC용(maxWidth:1200)/모바일용(maxWidth:800) 두 인스턴스를 두고
   화면 폭에 따라 하나만 노출하는 방식으로 처리한다. */
.section-markmap{ padding:0, 0, 0, 350px; }
.section-markmap .wrap{ height:100%; }
.markmap-wrap{
  width: 600vh; height:500vh; min-height:820px; position:relative;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.markmap{ position:absolute; inset:0; }
.markmap-desktop{ display:block; }
.markmap-mobile{ display:none; }

@media (max-width:800px){
  .markmap-wrap{ height:100dvh; min-height:600px; }
  .markmap-desktop{ display:none; }
  .markmap-mobile{ display:block; }
}