/* =========================================================
   DIQUEST · 메인 리뉴얼 v2
   레퍼런스: Cohere(여백·시네마틱 이미지·스택 카드) / Upstage(업종 단어 박스) / Saltlux(라운드 배너·산업 카드)
   규칙: homepage-rules-final.md (12컬럼 / Pretendard / 16px 이상)
   ========================================================= */
:root{
  --point:#4330E6; --point-deep:#2F1FC4; --point-light:#ECEAFD; --point-soft:#F4F3FE;
  --deep:#2A1BA8; --point-on-dark:#A79EFF;
  --cyan:#3FC8FF;
  --text-strong:#121022; --text-body:#3D3A50; --text-sub:#6C6981;
  --bg-white:#FFFFFF; --bg-light:#F3F4FA; --bg-dark:#0E0C1C; --bg-darker:#09081A;
  --line:#E6E4EC; --line-strong:#D2CFDC; --line-dark:rgba(255,255,255,.1);

  --pad:60px; --gap:20px; --header:80px; --sec:168px;
  --r-xl:32px; --r-lg:24px; --r-md:16px;
  --opt-xl:calc(var(--r-xl) * .55); --opt-lg:calc(var(--r-lg) * .55);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (max-width:1024px){ :root{ --sec:132px; --r-xl:28px } }
@media (max-width:767px){ :root{ --pad:20px; --gap:12px; --header:64px; --sec:100px; --r-xl:20px; --r-lg:18px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header) }
body{ margin:0; background:var(--bg-light); color:var(--text-body);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px; line-height:1.7; letter-spacing:-.02em; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; overflow-x:clip }
@media (max-width:767px){ body{ font-size:16px } }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; letter-spacing:inherit }
ul,ol,dl,dd,figure,h1,h2,h3,p{ margin:0; padding:0 }
ul,ol{ list-style:none }
p{ text-wrap:pretty }
:focus-visible{ outline:2px solid var(--point); outline-offset:3px; border-radius:8px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:fixed; left:16px; top:12px; z-index:200; background:var(--point); color:#fff; padding:10px 18px; border-radius:999px; font-size:16px; translate:0 -200% }
.skip:focus{ translate:0 0 }
.pc{ display:inline }
@media (max-width:767px){ .pc{ display:none } }

.wrap{ max-width:calc(1600px + var(--pad)*2); margin:0 auto; padding:0 var(--pad) }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap) }
@media (max-width:767px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
section{ padding:var(--sec) 0; position:relative }

/* ---------- 타이포 ---------- */
.eyebrow{ font-size:16px; font-weight:600; line-height:1.5; letter-spacing:.08em; color:var(--deep); padding-left:3px }
.eyebrow--dark{ color:var(--point-on-dark) }
@media (max-width:767px){ .eyebrow{ padding-left:2px } }
.sec-head{ display:flex; flex-direction:column; gap:20px; grid-column:1 / -1 }
.sec-head--center{ align-items:center; text-align:center }
.sec-title{ font-size:52px; font-weight:700; line-height:1.3; letter-spacing:-.04em; color:var(--text-strong); text-wrap:balance }
.sec-title em{ font-style:normal; color:var(--point) }
.sec-lead{ font-size:18px; line-height:1.7; color:var(--text-sub); max-width:560px }
/* 한글 줄바꿈: 제목은 줄 길이를 고르게, 본문은 마지막 줄이 한 단어로 남지 않게 */
h1,h2,h3,h4,.sec-lead,.sub-lead,.cta__lead,.sec-row__lead,figcaption{ text-wrap:balance }
li,dd,dt,blockquote{ text-wrap:pretty }
/* 시각 보정: 바로 아래 둥근 카드가 오는 제목은 모서리 곡선이 시작되는 지점에 맞춰 안쪽으로 */
.opt-xl{ padding-left:var(--opt-xl) } .opt-lg{ padding-left:var(--opt-lg) }
/* 태블릿·모바일에서 제목 아래로 내려오는 설명·버튼도 같은 선에 맞춤 */
@media (max-width:1024px){ .opt-xl ~ :is(.sec-lead,.btn){ margin-left:var(--opt-xl) } .opt-lg ~ :is(.sec-lead,.btn){ margin-left:var(--opt-lg) } }
@media (max-width:1024px){ .sec-title{ font-size:44px } }
@media (max-width:767px){ .sec-title{ font-size:30px } .sec-lead{ font-size:16px } .sec-head{ gap:14px } }

/* ---------- 버튼 ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:58px; padding:0 30px; border-radius:999px;
  font-size:17px; font-weight:600; white-space:nowrap;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease) }
.btn--sm{ height:46px; padding:0 22px; font-size:16px }
.btn--point{ background:var(--point); color:#fff }
.btn--point:hover{ background:var(--point-deep) }
.btn--ink{ background:var(--text-strong); color:#fff }
.btn--ink:hover{ background:var(--point) }
.btn--line{ border:1.5px solid var(--line-strong); color:var(--text-strong) }
.btn--line:hover{ border-color:var(--text-strong) }
.btn--white{ background:#fff; color:var(--text-strong) }
.btn--white:hover{ background:var(--point-light) }
.btn--glass{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.btn--glass:hover{ background:rgba(255,255,255,.22) }
@media (max-width:767px){ .btn{ height:52px; padding:0 24px; font-size:16px } }
.ico-arrow{ display:inline-block; width:18px; height:18px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:translate .3s var(--ease) }
a:hover .ico-arrow{ translate:4px 0 }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:17px; font-weight:600; color:var(--text-strong) }
.link-arrow:hover{ color:var(--point) }

/* =========================================================
   HEADER
   ========================================================= */
.hd{ position:fixed; inset:0 0 auto; z-index:100; height:var(--header); transition:background-color .4s var(--ease), box-shadow .4s var(--ease) }
.hd.is-scrolled{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 1px 0 rgba(18,16,34,.06) }
.hd__in{ height:100%; display:flex; align-items:center; gap:40px }
.hd__logo img{ width:142px }
.gnb{ margin-left:auto }
.gnb__list{ display:flex; gap:4px }
.gnb__item{ position:relative }
.gnb__btn{ height:var(--header); padding:0 16px; font-size:17px; font-weight:500; color:var(--text-strong); transition:color .3s var(--ease) }
.gnb__item:hover .gnb__btn,.gnb__item.is-open .gnb__btn{ color:var(--point) }
.gnb__panel{ position:absolute; top:calc(var(--header) - 10px); left:50%; translate:-50% 6px; min-width:250px; padding:8px;
  background:#fff; border-radius:var(--r-md); box-shadow:0 30px 60px -24px rgba(18,16,34,.28), 0 0 0 1px rgba(18,16,34,.05);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), translate .3s var(--ease), visibility .3s }
.gnb__item:hover .gnb__panel,.gnb__item.is-open .gnb__panel{ opacity:1; visibility:visible; translate:-50% 0 }
.gnb__panel a{ display:flex; flex-direction:column; padding:12px 16px; border-radius:12px; transition:background-color .25s var(--ease) }
.gnb__panel a:hover{ background:var(--point-soft) }
.gnb__panel strong{ font-size:17px; font-weight:600; color:var(--text-strong); line-height:1.4 }
.gnb__panel span{ font-size:16px; color:var(--text-sub); line-height:1.5 }
.hd__toggle{ display:none; width:44px; height:44px; position:relative; margin-left:auto }
.hd__toggle span{ position:absolute; left:11px; right:11px; top:50%; height:2px; background:var(--text-strong); border-radius:2px; transition:rotate .3s var(--ease), translate .3s var(--ease) }
.hd__toggle span:first-child{ translate:0 -4px } .hd__toggle span:last-child{ translate:0 4px }
.hd__toggle[aria-expanded="true"] span:first-child{ translate:0 0; rotate:45deg }
.hd__toggle[aria-expanded="true"] span:last-child{ translate:0 0; rotate:-45deg }
@media (max-width:1024px){ .gnb,.hd__cta{ display:none } .hd__toggle{ display:block } }
@media (max-width:767px){ .hd__logo img{ width:120px } }

.drawer{ position:fixed; inset:var(--header) 0 0; z-index:99; background:var(--bg-light); height:calc(100dvh - var(--header));
  overflow-y:auto; overscroll-behavior:contain; padding:8px var(--pad) calc(32px + env(safe-area-inset-bottom)); display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s }
.drawer.is-open{ opacity:1; visibility:visible }
.drawer__nav details{ border-bottom:1px solid var(--line) }
.drawer__nav summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:64px; font-size:20px; font-weight:700; color:var(--text-strong); cursor:pointer }
.drawer__nav summary::-webkit-details-marker{ display:none }
.drawer__nav summary::after{ content:"+"; font-size:24px; font-weight:400; color:var(--text-sub); transition:rotate .25s var(--ease) }
.drawer__nav details[open] summary::after{ rotate:45deg; color:var(--point) }
.drawer__nav .sub{ padding:0 0 16px; display:grid }
.drawer__nav .sub a{ display:flex; justify-content:space-between; gap:12px; min-height:48px; align-items:center; font-size:17px; color:var(--text-body) }
.drawer__nav .sub a span{ font-size:16px; color:var(--text-sub) }
.drawer__foot{ margin-top:auto; padding-top:24px } .drawer__foot .btn{ width:100% }
body.is-locked{ overflow:hidden }

/* =========================================================
   HERO — 다크 배경 + WebThreads
   ========================================================= */
.hero{ position:relative; min-height:100svh; padding:calc(var(--header) + 40px) 0 120px; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 50%, #17123F 0%, #0B0920 60%, #07061A 100%); color:#fff }
.hero__fx{ position:absolute; inset:0; z-index:0 }
.hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(42% 36% at 50% 50%, rgba(7,6,26,.72), rgba(7,6,26,.25) 60%, transparent 80%),
             linear-gradient(180deg, rgba(7,6,26,.5) 0%, transparent 22%, transparent 78%, rgba(7,6,26,.7) 100%) }
.hero__top{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center }
.notice{ display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:6px 18px 6px 6px; border-radius:999px;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:16px; font-weight:500; color:#fff; transition:background-color .3s var(--ease) }
.notice:hover{ background:rgba(255,255,255,.14) }
.notice__tag{ padding:4px 12px; border-radius:999px; background:var(--point); color:#fff; font-size:16px; font-weight:700; letter-spacing:.04em }
.notice .ico-arrow{ width:16px; height:16px; color:rgba(255,255,255,.7) }

.hero__title{ margin-top:36px; font-size:clamp(60px,5.8vw,84px); font-weight:700; line-height:1.18; letter-spacing:-.045em; color:#fff }
.hero__line{ display:flex; justify-content:center; align-items:center; gap:.24em; white-space:nowrap }
.reel{ display:inline-flex }
.reel__box{ position:relative; display:inline-block; height:1.3em; overflow:hidden; padding:0 .28em; width:3.6em;
  border-radius:.24em; color:#fff;
  background:linear-gradient(135deg, rgba(67,48,230,.55), rgba(127,216,255,.18));
  box-shadow:inset 0 0 0 1.5px rgba(167,158,255,.55), 0 20px 60px -20px rgba(67,48,230,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:width .7s var(--ease) }
.reel__w{ position:absolute; left:.28em; top:.06em; white-space:nowrap; line-height:1.18;
  opacity:0; translate:0 100%; transition:translate .8s var(--ease), opacity .5s var(--ease) }
.reel__w.is-on{ opacity:1; translate:0 0 }
.reel__w.is-out{ opacity:0; translate:0 -100% }
.hero__lead{ margin-top:28px; font-size:19px; line-height:1.7; color:rgba(255,255,255,.72) }
.hero__ctas{ margin-top:44px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.hero__scroll{ position:absolute; z-index:2; left:50%; bottom:36px; translate:-50% 0; width:44px; height:44px; display:grid; place-items:center }
.hero__scroll span{ width:26px; height:40px; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); position:relative }
.hero__scroll span::after{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:wheel 2s ease-in-out infinite }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(0) } 30%{ opacity:1 } 100%{ opacity:0; transform:translateY(12px) } }

/* 다크 히어로 위 헤더 */
body.is-top .hd:not(.is-scrolled) .gnb__btn{ color:#fff }
body.is-top .hd .logo-dark{ display:none }
.hd .logo-light{ display:none }
body.is-top .hd .logo-light{ display:block }
body.is-top .hd.is-scrolled{ background:rgba(9,8,26,.55); box-shadow:0 1px 0 rgba(255,255,255,.08) }
body.is-top .hd.is-scrolled .gnb__btn{ color:#fff }
body.is-top .hd__cta{ background:#fff; color:var(--text-strong) }
body.is-top .hd__toggle span{ background:#fff }
body.is-top .gnb__item:hover .gnb__btn{ color:var(--point-on-dark) }

/* 고객사 로고 — 두 줄을 여백 없이 붙임 */
.logos{ padding:96px 0 104px; background:var(--bg-light) }
.logos__label{ text-align:center; font-size:17px; color:var(--text-sub) }
.logos__label b{ color:var(--text-strong); font-weight:700 }
.marquee{ margin-top:40px; display:grid; gap:0; overflow:hidden; background:var(--bg-light);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent) }
.marquee__row{ display:flex; width:max-content; background:var(--bg-light); animation:mq 90s linear infinite }
.marquee__row--rev{ animation-direction:reverse; animation-duration:100s }
.marquee__logo{ width:180px; height:72px; flex:none; display:grid; place-items:center; overflow:hidden }
.marquee__logo img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.05); opacity:.62; transition:opacity .3s var(--ease), filter .3s var(--ease) }
.marquee__logo:hover img{ filter:none; opacity:1 }
@keyframes mq{ to{ transform:translateX(-50%) } }

@media (max-width:1024px){ .hero__title{ font-size:64px } }
@media (max-width:767px){
  .hero{ min-height:100svh; padding:calc(var(--header) + 24px) 0 96px }
  .notice > span:nth-child(2){ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .hero__title{ margin-top:24px; font-size:clamp(34px,10.8vw,42px) }
  .hero__lead{ margin-top:18px; font-size:16px }
  .hero__ctas{ margin-top:32px; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .hero__ctas .btn{ width:100%; padding:0 12px }
  .logos{ padding:72px 0 80px }
  .logos__label{ font-size:16px }
  .marquee__logo{ width:140px; height:56px }
}

/* =========================================================
   STATEMENT
   ========================================================= */
.state{ background:#fff }
.state__eye{ grid-column:1 / 4; padding-top:14px }
.state__body{ grid-column:4 / 13 }
.state__title{ font-size:44px; font-weight:600; line-height:1.45; letter-spacing:-.035em; color:var(--text-strong); max-width:1000px }
.state__title span{ color:var(--point) }
.stats{ margin-top:96px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.stat{ border-top:1px solid var(--line-strong); padding-top:24px; display:flex; flex-direction:column-reverse; gap:8px }
.stat dt{ font-size:17px; color:var(--text-sub) }
.stat dd{ font-size:80px; font-weight:600; line-height:1; letter-spacing:-.05em; color:var(--text-strong); font-variant-numeric:tabular-nums; white-space:nowrap }
.stat dd small{ font-size:26px; font-weight:600; margin-left:6px; color:var(--point); letter-spacing:-.02em }
@media (max-width:1024px){ .state__eye,.state__body{ grid-column:1 / -1 } .state__eye{ margin-bottom:24px } .state__title{ font-size:36px } .stat dd{ font-size:60px } }
@media (max-width:767px){
  .state__title{ font-size:24px }
  .stats{ margin-top:48px; grid-template-columns:1fr; gap:0 }
  .stat{ flex-direction:row-reverse; justify-content:space-between; align-items:baseline; padding:20px 0 }
  .stat dd{ font-size:40px } .stat dd small{ font-size:20px }
}

/* =========================================================
   PLATFORM — 스크롤하면 겹쳐 쌓이는 카드
   ========================================================= */
.plat{ background:var(--bg-dark); color:rgba(255,255,255,.72) }
.plat .sec-title{ color:#fff } .plat .sec-title em{ color:var(--point-on-dark) } .plat .sec-lead{ color:rgba(255,255,255,.6) }
.stack{ margin-top:80px; display:grid; gap:32px }
.sc{ position:sticky; top:calc(var(--header) + 24px); height:min(640px, calc(100svh - var(--header) - 48px)); min-height:540px;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); padding:16px;
  border-radius:var(--r-xl); background:#17142C; box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 -30px 60px -30px rgba(0,0,0,.6);
  transform-origin:50% 0; overflow:hidden }
.sc--2{ top:calc(var(--header) + 40px); background:#1C1640 }
.sc--3{ top:calc(var(--header) + 56px); background:#141228 }
.sc--4{ top:calc(var(--header) + 72px); background:#EFEDF9; color:var(--text-body) }
.sc::after{ content:""; position:absolute; inset:0; background:#000; opacity:var(--dim,0); pointer-events:none; border-radius:inherit }
.sc__text{ grid-column:1 / 6; padding:40px 24px 40px 40px; display:flex; flex-direction:column }
.sc__no{ font-size:16px; font-weight:600; letter-spacing:.08em; color:var(--point-on-dark) }
.sc__title{ margin-top:18px; font-size:40px; font-weight:700; line-height:1.3; letter-spacing:-.04em; color:#fff }
.sc__desc{ margin-top:16px; font-size:17px; line-height:1.7; color:rgba(255,255,255,.66) }
.sc__list{ margin-top:auto; padding-top:28px }
.sc__list li + li{ border-top:1px solid var(--line-dark) }
.sc__list a{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; min-height:60px; padding:8px 0; color:#fff; transition:color .3s var(--ease) }
.sc__list b{ font-size:18px; font-weight:600 }
.sc__list span{ font-size:16px; color:rgba(255,255,255,.55) }
.sc__list a:hover{ color:var(--point-on-dark) }
.sc--4 .sc__no{ color:var(--deep) } .sc--4 .sc__title{ color:var(--text-strong) } .sc--4 .sc__desc{ color:var(--text-sub) }
.sc--4 .sc__list li + li{ border-color:var(--line-strong) } .sc--4 .sc__list a{ color:var(--text-strong) } .sc--4 .sc__list span{ color:var(--text-sub) }
.sc--4 .sc__list a:hover{ color:var(--point) }
.sc__vis{ grid-column:6 / 13; position:relative; border-radius:calc(var(--r-xl) - 10px); overflow:hidden; background:#000 }
.sc__vis--light{ background:radial-gradient(70% 70% at 50% 60%, #fff, #DCD8F5) }
.sc__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92 }
.boxes{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center }
.boxes img{ width:40%; max-width:330px; filter:drop-shadow(0 40px 40px rgba(0,0,0,.45)); transition:translate .6s var(--ease) }
.boxes--3 img:nth-child(1){ translate:24% 6%; scale:.86 }
.boxes--3 img:nth-child(2){ position:relative; z-index:2 }
.boxes--3 img:nth-child(3){ translate:-24% 6%; scale:.86 }
.boxes--2 img:nth-child(1){ translate:10% 0; position:relative; z-index:2 }
.boxes--2 img:nth-child(2){ translate:-10% 8%; scale:.9 }
.sc__vis--light .boxes img{ filter:drop-shadow(0 40px 36px rgba(47,31,196,.28)) }
.sc:hover .boxes--3 img:nth-child(1){ translate:18% 4% } .sc:hover .boxes--3 img:nth-child(3){ translate:-18% 4% }

@media (max-width:1024px){
  .sc{ position:relative; top:auto; height:auto; min-height:0 }
  .sc__text,.sc__vis{ grid-column:1 / -1 }
  .sc__text{ padding:24px 16px 8px; order:2 }
  .sc__vis{ height:380px }
  .sc__title{ font-size:34px }
}
@media (max-width:767px){
  .stack{ margin-top:48px; gap:16px }
  .sc{ grid-template-columns:1fr; padding:10px }
  .sc__vis{ height:260px }
  .sc__text{ padding:20px 10px 4px }
  .sc__title{ font-size:26px }
  .sc__desc{ font-size:16px }
  .sc__list a{ grid-template-columns:1fr auto; gap:2px 12px; min-height:auto; padding:14px 0 }
  .sc__list span{ grid-column:1; grid-row:2 }
  .sc__list .ico-arrow{ grid-column:2; grid-row:1 / 3 }
  .sc__list b{ font-size:17px }
}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.ind{ background:var(--bg-light) }
.ind__head{ align-items:end; row-gap:24px }
.ind__head .sec-head{ grid-column:1 / 8 }
.ind__lead{ grid-column:9 / 13 }
.ind__grid{ margin-top:72px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap) }
.ic a{ display:flex; flex-direction:column; height:100% }
.ic__img{ aspect-ratio:3 / 4; border-radius:var(--r-lg); overflow:hidden; background:#ddd }
.ic__img img{ width:100%; height:100%; object-fit:cover; transition:scale 1s var(--ease) }
.ic a:hover .ic__img img{ scale:1.05 }
.ic:nth-child(1) .ic__img img{ object-position:30% 50% }
.ic:nth-child(2) .ic__img img{ object-position:50% 50% }
.ic:nth-child(3) .ic__img img{ object-position:76% 50% }
.ic:nth-child(4) .ic__img img{ object-position:62% 40% }
.ic__body{ padding:26px 4px 0; display:flex; flex-direction:column; gap:8px }
.ic__no{ font-size:16px; font-weight:600; color:var(--deep); font-variant-numeric:tabular-nums }
.ic__body h3{ font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1.3; color:var(--text-strong) }
.ic__body p{ font-size:16px; line-height:1.65; color:var(--text-sub) }
.ic__more{ margin-top:8px; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:16px; font-weight:600; color:var(--text-strong); transition:color .3s var(--ease) }
.ic a:hover .ic__more{ color:var(--point) }
@media (max-width:1024px){ .ind__head .sec-head,.ind__lead{ grid-column:1 / -1 } .ind__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:48px } .ic__img{ aspect-ratio:4 / 3 } }
@media (max-width:767px){
  .ind__grid{ margin-top:36px; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); padding:0 var(--pad); scroll-padding-inline:var(--pad); scrollbar-width:none }
  .ind__grid::-webkit-scrollbar{ display:none }
  .ic{ flex:0 0 80%; scroll-snap-align:start }
  .ic__img{ aspect-ratio:4 / 5 }
  .ic__body h3{ font-size:24px }
}

/* =========================================================
   CUSTOMER STORIES
   ========================================================= */
.cases{ background:#fff }
.cases__head{ align-items:end; row-gap:24px }
.cases__head .sec-head{ grid-column:1 / 9 }
.cases__all{ grid-column:9 / 13; justify-self:end }
.feat{ margin-top:72px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); padding:16px; border-radius:var(--r-xl); background:var(--bg-light) }
.feat__video{ grid-column:1 / 8 }
.yt{ position:relative; display:block; width:100%; aspect-ratio:16 / 9; border-radius:calc(var(--r-xl) - 10px); overflow:hidden; background:#000 }
.yt img{ width:100%; height:100%; object-fit:cover; transition:scale .8s var(--ease) }
.yt:hover img{ scale:1.03 }
.yt__play{ position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:scale .3s var(--ease) }
.yt__play::after{ content:""; position:absolute; left:36px; top:29px; border-left:22px solid var(--point); border-top:15px solid transparent; border-bottom:15px solid transparent }
.yt:hover .yt__play{ scale:1.08 }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.feat__body{ grid-column:8 / 13; padding:24px 28px 24px 16px; display:flex; flex-direction:column; align-items:flex-start }
.badge{ font-size:16px; font-weight:600; color:var(--deep); padding:6px 14px; border-radius:999px; background:var(--point-light) }
.feat__client{ margin-top:22px; font-size:18px; font-weight:600; color:var(--text-sub) }
.feat__title{ margin-top:6px; font-size:32px; font-weight:700; letter-spacing:-.04em; line-height:1.3; color:var(--text-strong) }
.feat__rows{ margin-top:24px; display:grid; gap:14px }
.feat__rows > div{ display:grid; grid-template-columns:56px 1fr; gap:12px }
.feat__rows dt{ font-size:16px; font-weight:700; color:var(--deep); line-height:1.65 }
.feat__rows dd{ font-size:16px; line-height:1.65 }
.feat__body .link-arrow{ margin-top:auto; padding-top:20px }
.cs{ margin-top:var(--gap); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.cs__card a{ height:100%; display:flex; flex-direction:column; gap:22px; padding:32px; border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .35s var(--ease), background-color .35s var(--ease) }
.cs__card a:hover{ box-shadow:inset 0 0 0 1.5px var(--point); background:var(--point-soft) }
.cs__top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.cs__top h3{ font-size:24px; font-weight:700; letter-spacing:-.04em; color:var(--text-strong) }
.cs__chip{ font-size:16px; font-weight:600; padding:4px 12px; border-radius:999px; background:var(--bg-light); color:var(--text-sub) }
.cs__card dl{ display:grid; gap:14px }
.cs__card dt{ font-size:16px; font-weight:700; color:var(--deep) }
.cs__card dd{ font-size:16px; line-height:1.65 }
.outc{ margin-top:112px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.outc__item{ border-top:1px solid var(--text-strong); padding-top:28px; display:flex; flex-direction:column; gap:4px }
.outc__item p{ font-size:24px; font-weight:600; line-height:1.5; letter-spacing:-.035em; color:var(--text-strong); margin-bottom:20px }
.outc__item span{ font-size:16px; color:var(--text-sub) }
.outc__item b{ font-size:16px; font-weight:600; color:var(--deep) }
@media (max-width:1024px){
  .cases__head .sec-head,.cases__all{ grid-column:1 / -1; justify-self:start }
  .feat__video,.feat__body{ grid-column:1 / -1 } .feat__body{ padding:16px 8px 8px }
  .cs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .outc{ grid-template-columns:1fr; gap:36px }
}
@media (max-width:767px){
  .feat{ margin-top:36px; padding:10px; grid-template-columns:1fr }
  .feat__title{ font-size:24px }
  .feat__rows > div{ grid-template-columns:1fr; gap:2px }
  .yt__play{ width:64px; height:64px; margin:-32px 0 0 -32px }
  .yt__play::after{ left:26px; top:20px; border-left-width:18px; border-top-width:12px; border-bottom-width:12px }
  .cs{ grid-template-columns:1fr; gap:12px } .cs__card a{ padding:24px }
  .outc{ margin-top:72px } .outc__item p{ font-size:20px }
}

/* =========================================================
   NEWSROOM
   ========================================================= */
.news{ background:var(--bg-light) }
.news__head{ grid-column:1 / 5; align-self:start; position:sticky; top:calc(var(--header) + 40px) }
.news__main{ grid-column:6 / 13; display:grid; gap:40px }
.nf{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--gap); align-items:center; padding:12px; border-radius:var(--r-xl); background:#fff;
  transition:box-shadow .35s var(--ease) }
.nf:hover{ box-shadow:0 30px 60px -36px rgba(18,16,34,.35) }
.nf__img{ grid-column:1 / 4; position:relative; aspect-ratio:1 / 1; border-radius:calc(var(--r-xl) - 8px); overflow:hidden; background:#111 }
.nf__img > img:first-child{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.nf__box{ position:absolute; left:50%; top:54%; width:62%; translate:-50% -50%; filter:drop-shadow(0 30px 30px rgba(0,0,0,.5)); transition:scale .6s var(--ease) }
.nf:hover .nf__box{ scale:1.04 }
.nf__body{ grid-column:4 / 8; padding:16px 24px 16px 8px; display:flex; flex-direction:column; gap:14px }
.nf__cat{ font-size:16px; font-weight:600; color:var(--deep) }
.nf__body h3{ font-size:26px; font-weight:700; line-height:1.45; letter-spacing:-.035em; color:var(--text-strong) }
.nl li a{ display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:20px; min-height:76px; padding:18px 0; border-bottom:1px solid var(--line-strong) }
.nl li:first-child a{ border-top:1px solid var(--text-strong) }
.nl__cat{ justify-self:start; font-size:16px; font-weight:600; color:var(--deep) }
.nl__cat--n{ color:var(--text-sub) }
.nl__t{ font-size:17px; font-weight:500; color:var(--text-strong); line-height:1.55; transition:color .3s var(--ease) }
.nl li a:hover .nl__t{ color:var(--point) }
.nl time{ font-size:16px; color:var(--text-sub); font-variant-numeric:tabular-nums }
@media (max-width:1024px){ .news__head,.news__main{ grid-column:1 / -1; position:static } .news__main{ margin-top:48px } }
@media (max-width:767px){
  .nf{ grid-template-columns:1fr; padding:10px }
  .nf__img,.nf__body{ grid-column:1 / -1 } .nf__img{ aspect-ratio:16 / 10 } .nf__box{ width:40% }
  .nf__body{ padding:12px 10px 14px } .nf__body h3{ font-size:20px }
  .nl li a{ grid-template-columns:1fr auto; gap:4px 12px }
  .nl__cat{ grid-column:1 } .nl time{ grid-column:2; grid-row:1 } .nl__t{ grid-column:1 / -1; font-size:16px }
}

/* =========================================================
   CTA
   ========================================================= */
.cta{ background:var(--bg-light); padding-top:0 }
.cta__panel{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--bg-dark); isolation:isolate }
.cta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; z-index:-2 }
.cta__panel::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,14,70,.78), rgba(14,12,28,.9)) }
.cta__in{ padding:160px 40px; display:flex; flex-direction:column; align-items:center; text-align:center; color:#fff }
.cta__title{ margin-top:22px; font-size:64px; font-weight:700; line-height:1.25; letter-spacing:-.045em }
.cta__lead{ margin-top:22px; font-size:18px; color:rgba(255,255,255,.78) }
.cta__btns{ margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.cta__note{ margin-top:24px; font-size:16px; color:rgba(255,255,255,.6) }
@media (max-width:1024px){ .cta__title{ font-size:52px } .cta__in{ padding:120px 32px } }
@media (max-width:767px){
  .cta__in{ padding:80px 20px } .cta__title{ font-size:32px } .cta__lead{ font-size:16px }
  .cta__btns{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px } .cta__btns .btn{ width:100%; padding:0 12px }
}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{ background:var(--bg-darker); color:rgba(255,255,255,.62); padding:88px 0 48px; font-size:16px; line-height:1.7 }
.ft__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:40px; border-bottom:1px solid var(--line-dark) }
.ft__brand img{ width:140px } .ft__brand p{ margin-top:14px; color:rgba(255,255,255,.8) }
.ft__social{ display:flex; gap:10px }
.ft__social a{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; transition:background-color .3s var(--ease) }
.ft__social a:hover{ background:var(--point) }
.ft__social svg{ width:18px; height:18px } .ft__social b{ font-size:18px; font-weight:800 }
.ft__info{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); padding:40px 0 }
.ft__col{ grid-column:1 / 8; display:grid; gap:6px } .ft__contact{ grid-column:8 / 13 }
.ft__col strong{ font-size:17px; color:#fff; margin-bottom:6px } .ft__col strong span{ font-weight:400; color:rgba(255,255,255,.6); margin-left:6px }
.ft__col b{ font-weight:600; color:rgba(255,255,255,.85); margin-right:10px } .ft__col a:hover{ color:#fff }
.ft__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:28px; border-top:1px solid var(--line-dark) }
.ft__bottom a{ margin-left:16px; display:inline-flex; min-height:44px; align-items:center } .ft__bottom a b{ color:#fff; font-weight:600 }
@media (max-width:1024px){ .ft__col,.ft__contact{ grid-column:1 / -1 } }
@media (max-width:767px){ .ft{ padding:64px 0 36px } .ft__top{ flex-direction:column } .ft__info{ grid-template-columns:1fr; gap:24px } .ft__bottom a{ margin-left:0; margin-right:16px } }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important } }

/* 아직 만들지 않은 페이지 링크: 메뉴에는 보이지만 이동하지 않음 */
[data-soon]{ cursor:default }
.soon-toast{ position:fixed; left:50%; bottom:32px; z-index:300; translate:-50% 16px; padding:14px 22px; border-radius:999px; font-size:16px; font-weight:600;
  color:#fff; background:var(--text-strong); box-shadow:0 20px 40px -16px rgba(18,16,34,.5); opacity:0; pointer-events:none; transition:opacity .35s var(--ease), translate .35s var(--ease) }
.soon-toast.is-on{ opacity:1; translate:-50% 0 }

/* 도입 사례: 로고 이미지가 있는 고객사는 이름 대신 로고 표시 */
.cs__logo{ height:36px; display:flex; align-items:center }
.cs__logo img{ width:auto; height:auto; max-height:32px; max-width:150px; mix-blend-mode:multiply }
.feat__client--logo{ height:40px; display:flex; align-items:center }
.feat__client--logo img{ height:30px; width:auto; mix-blend-mode:multiply }

@media (max-width:767px){ .sec-head{ gap:12px } .sc__title{ margin-top:12px } .sc__desc{ margin-top:10px } .ic__body{ gap:6px; padding-top:20px } }

/* 메인: 서브 텍스트는 제목 아래 */
.grid.ind__head{ row-gap:0 }
.grid.ind__head > .sec-head,.grid.ind__head > .ind__lead{ grid-column:1 / 9 }
.grid.ind__head > .ind__lead{ margin-top:24px; max-width:640px }
@media (max-width:1024px){ .grid.ind__head > *{ grid-column:1 / -1 } }
@media (max-width:767px){ .grid.ind__head > .ind__lead{ margin-top:14px } }

/* 제목을 카드 모서리에 맞춰 들인(opt-*) 경우, 아래 서브 텍스트도 같은 시작점 (모든 폭) */
.opt-xl ~ .sec-lead{ margin-left:var(--opt-xl) } .opt-lg ~ .sec-lead{ margin-left:var(--opt-lg) }
.opt-xl > .sec-lead{ margin-left:0 } .opt-lg > .sec-lead{ margin-left:0 }

/* 한글 서브 텍스트는 글자 모양 때문에 왼쪽으로 치우쳐 보여 2px 보정 (왼쪽 정렬일 때만) */
.sec-lead{ padding-left:2px }
.sec-head--center .sec-lead,.sec-row--center .sec-lead,.sec-lead[style*="center"]{ padding-left:0 }