/* =========================================================
   Octoev — shared stylesheet
   Palette: navy base #070B16/#0A0F1C · teal #2BE3C0 · navy accent #2E5090
   Fonts: Pretendard (전체 통일)
   ========================================================= */

:root{
  --bg:#070B16;
  --bg-2:#0A0F1C;
  --bg-3:#0b1426;
  --ink:#11162A;
  --ink-2:#2A3142;
  --ink-3:#454C61;
  --ink-4:#5A6173;
  --paper:#ffffff;
  --paper-2:#F4F6FA;
  --paper-3:#FAFBFD;
  --line:#E7ECF3;
  --line-2:#EDF1F6;
  --teal:#2BE3C0;
  --teal-ink:#04221d;
  --navy:#2E5090;
  --navy-2:#4A6FB5;
  --amber:#F5A623;
  --soft:#B4C0D6;    /* 다크 배경 대비 4.5:1+ 확보 (기존 #9AA6BE 는 약 2.8:1) */
  --soft-2:#A2AEC6;  /* 보조 회색도 함께 상향 */
  /* 전체 Pretendard 통일 — display/mono도 동일 패밀리를 가리킵니다 */
  --body:'Pretendard',system-ui,-apple-system,sans-serif;
  --display:var(--body);
  --mono:var(--body);
  --maxw:1200px;
  --nav-h:66px;

  /* ---- design tokens (정밀 점검으로 정리된 스케일) ---- */
  /* 본문 글자 크기 3단 */
  --fs-body:16px;     /* 카드·항목 본문 (가독성 우선 상향) */
  --fs-md:17px;       /* 일반 본문 */
  --fs-lead:19px;     /* 리드 문단 */
  /* 카드 제목 / 큰 숫자 */
  --fs-card-h3:18px;
  --fs-stat:clamp(32px,4vw,52px);
  /* 히어로 제목 2단 (홈 / 내부 페이지) */
  --fs-hero-home:clamp(40px,5.5vw,80px);
  --fs-hero-page:clamp(32px,4vw,56px);
  /* 줄간격 3단 */
  --lh-tight:1.5;
  --lh-body:1.65;
  --lh-loose:1.75;
  /* 자간 3단 (mono·대문자용) */
  --ls-1:.06em;
  --ls-2:.12em;
  --ls-3:.18em;
  /* 모서리 둥글기 4단 */
  --r-xs:6px;   /* 배지·태그 */
  --r-sm:10px;  /* 폼·작은 요소 */
  --r-md:14px;  /* nav·중간 카드 */
  --r-lg:18px;  /* 카드·패널 */
  /* 소형 UI 텍스트 2단 (9~13.5px mono 마이크로라벨은 의도적 타이포 — 개별 유지) */
  --fs-micro:12px;     /* 반복되는 12px 배지 번호·캡션 */
  --fs-small:15px;     /* 버튼·입력·아이브로 등 소형 UI */
  --lh-display:1.1;    /* 대형 디스플레이 제목 (히어로·스탯의 1/1.04/1.05/1.16은 의도적 타이트 — 유지) */
  /* 보조 회색·상태색 */
  --soft-3:#8A93A6;    /* 라이트 배경 보조 회색 (날짜·메타·플레이스홀더) */
  --soft-4:#5E6B82;    /* 다크 배경 마이크로 라벨 회색 */
  --navy-soft:#EAF0F9; /* 네이비 배지·알림 배경 */
  --danger:var(--danger);       /* 폼 오류 */
  --navy-deep:#14213e; /* 다크 그라디언트 상단 네이비 (히어로·CTA 공용) */
}

*{box-sizing:border-box;}
/* 앵커 이동 시 고정 nav(--nav-h) + 18px 여백만큼 띄운다 */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;line-height:1.5;
  /* 한국어 어절 단위 줄바꿈 — 단어 중간에서 끊기는 것을 방지(긴 영문/URL은 anywhere로 보조) */
  word-break:keep-all;overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
::selection{background:var(--teal);color:var(--teal-ink);}

@keyframes octBlink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes octFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes octFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes octCue{0%{transform:translateY(0);opacity:.3}50%{opacity:1}100%{transform:translateY(8px);opacity:.3}}
@keyframes octGlow{0%,100%{opacity:.5}50%{opacity:.9}}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:40px;padding-right:40px;}
/* 키보드 사용자용 본문 바로가기 — 포커스 시에만 화면 안으로 (nav z-index 60 위) */
.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:var(--teal);color:var(--teal-ink);
  font-weight:700;text-decoration:none;padding:10px 16px;border-radius:var(--r-sm);
  transform:translateY(calc(-100% - 16px));transition:transform .15s ease;}
.skip-link:focus{transform:none;}
/* 2단 분할 레이아웃 (회사개요·연혁 등 인라인 그리드 대체) — 880px 이하 1단 스택 */
.split-2{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:stretch;}
.split-2--history{grid-template-columns:.85fr 1.15fr;align-items:start;}
.section{padding:clamp(76px,9vw,124px) 0;}
.section--light{background:var(--paper);color:var(--ink);}
.section--paper{background:var(--paper-2);color:var(--ink);}
.section--dark{background:var(--bg-2);color:#fff;position:relative;overflow:hidden;}
.section--gradient{background:linear-gradient(180deg,var(--navy-deep),var(--bg-2));color:#fff;}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-small);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;}
.eyebrow .num{color:#9FB1CE;}
.eyebrow .line{width:20px;height:1px;background:#C7D2E2;}
.section--dark .eyebrow,.section--gradient .eyebrow{color:var(--teal);}
.section--dark .eyebrow .num,.section--gradient .eyebrow .num{color:var(--soft-4);}
.section--dark .eyebrow .line,.section--gradient .eyebrow .line{background:rgba(255,255,255,.2);}
.section--light .eyebrow,.section--paper .eyebrow{color:var(--navy);}

.h2{font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.16;letter-spacing:-.03em;margin:0 0 16px;}
.lede{font-size:var(--fs-lead);line-height:var(--lh-loose);color:var(--ink-4);margin:0;}
.section--dark .lede,.section--gradient .lede{color:var(--soft);}
.head{max-width:680px;margin-bottom:52px;}

.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 0%,#000,transparent);
  mask-image:radial-gradient(100% 70% at 50% 0%,#000,transparent);pointer-events:none;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;
  font-size:var(--fs-small);padding:15px 26px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;font-family:var(--body);}
.btn-primary{background:var(--teal);color:var(--teal-ink);box-shadow:0 10px 30px -8px rgba(43,227,192,.5);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(43,227,192,.6);}
.btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;font-weight:600;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 30px -10px rgba(46,80,144,.6);}
.btn-navy:hover{transform:translateY(-2px);background:#34579c;}
/* 라이트 배경용 보조(아웃라인) 버튼 */
.btn-line{background:transparent;border-color:var(--line);color:var(--navy);font-weight:600;}
.btn-line:hover{transform:translateY(-2px);border-color:var(--navy);background:var(--paper-2);}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:13px 28px;
  background:rgba(7,11,22,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);}
.brand{justify-self:start;display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand .mark{position:relative;width:26px;height:26px;flex:none;}
.brand .mark::before{content:"";position:absolute;inset:0;border:2px solid var(--navy-2);border-radius:var(--r-xs);transform:rotate(45deg);}
.brand .mark::after{content:"";position:absolute;inset:7px;background:var(--teal);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 12px rgba(43,227,192,.7);}
.brand .name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:#fff;}
.brand .name b{color:var(--teal);font-weight:700;}

/* 헤더 우측 정렬: 로고만 좌측, 메뉴+버튼은 우측으로 (epsai식) */
.menu{justify-self:end;display:flex;align-items:center;gap:10px;}
.navlink{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:rgba(255,255,255,.85);
  font-size:var(--fs-body);font-weight:500;padding:10px 14px;border-radius:var(--r-sm);transition:color .15s,background .15s;white-space:nowrap;}
.navlink:hover{color:#fff;background:rgba(255,255,255,.06);}
.navlink.is-active{color:var(--teal);}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:9px;}
.nav-cta{text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  background:var(--teal);color:var(--teal-ink);font-size:14px;font-weight:700;padding:10px 16px;border-radius:var(--r-sm);
  transition:transform .15s ease;white-space:nowrap;}
.nav-cta:hover{transform:translateY(-1px);}
.nav-cta.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:600;}
.nav-cta.ghost:hover{background:rgba(255,255,255,.12);}
.hamburger{justify-self:end;display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;}
.hamburger span{display:block;width:18px;height:2px;background:#fff;position:relative;transition:transform .25s,opacity .2s;}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:transform .25s;}
.hamburger span::before{top:-6px;}.hamburger span::after{top:6px;}
.nav.menu-open .hamburger span{background:transparent;}
.nav.menu-open .hamburger span::before{transform:translateY(6px) rotate(45deg);}
.nav.menu-open .hamburger span::after{transform:translateY(-6px) rotate(-45deg);}

/* mobile drawer */
.drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:55;background:rgba(7,11,22,.98);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px 28px 60px;overflow-y:auto;
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;}
.nav.menu-open ~ .drawer{opacity:1;visibility:visible;transform:none;}
.drawer .single{display:block;padding:16px 4px;color:#fff;font-size:var(--fs-body);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);}
.drawer .single:hover{color:var(--teal);}
.drawer .btn{width:100%;justify-content:center;margin-top:24px;}

/* ---------- reveal / tilt ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
[data-reveal].in{opacity:1;transform:none;}
[data-tilt]{transition:transform .25s ease;will-change:transform;}

/* ---------- hero shared bits (live dot + scroll cue) ---------- */
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:octBlink 1.4s ease-in-out infinite;}
.scroll-cue{position:absolute;left:40px;bottom:34px;z-index:4;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4);}
.scroll-cue .mouse{display:inline-block;width:16px;height:24px;border:1px solid rgba(255,255,255,.3);border-radius:9px;position:relative;}
.scroll-cue .mouse i{position:absolute;left:50%;top:5px;width:3px;height:5px;border-radius:2px;background:var(--teal);transform:translateX(-50%);animation:octCue 1.6s ease-in-out infinite;}

/* ---------- neural hero (homepage) ---------- */
.hero-neural{position:relative;min-height:100vh;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,var(--navy-deep),var(--bg-2) 55%,var(--bg));}
.hero-neural #neural-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.hero-neural .hn-glow{position:absolute;width:760px;height:760px;border-radius:50%;top:-22%;left:50%;
  transform:translateX(-50%);z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(43,227,192,.16),transparent 62%);animation:octGlow 6s ease-in-out infinite;}
.hero-neural .hn-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(75% 75% at 50% 35%,#000,transparent);
  mask-image:radial-gradient(75% 75% at 50% 35%,#000,transparent);}
.hero-neural .hn-inner{position:relative;z-index:5;max-width:960px;margin:0 auto;padding:120px 40px 84px;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.hn-chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  color:#bdeee6;border:1px solid rgba(43,227,192,.35);background:rgba(43,227,192,.08);padding:8px 16px;border-radius:999px;margin-bottom:30px;}
.hn-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:octBlink 1.4s ease-in-out infinite;}
.hero-neural h1{font-weight:800;font-size:var(--fs-hero-home);line-height:1.04;letter-spacing:-.04em;margin:0 0 24px;}
.hero-neural h1 .grad{background:linear-gradient(100deg,#2BE3C0,#6ad0ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-neural .hn-sub{font-size:var(--fs-lead);color:var(--soft);max-width:580px;line-height:var(--lh-body);margin:0 0 38px;}
.hero-neural .cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:56px;}
.hn-stats{display:flex;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(10,15,28,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.hn-stats .c{flex:1;padding:40px 56px;border-right:1px solid rgba(255,255,255,.1);text-align:center;transition:background .2s ease;}
.hn-stats .c:hover{background:rgba(43,227,192,.05);}
.hn-stats .c:last-child{border-right:0;}
.hn-stats .v{font-family:var(--display);font-size:var(--fs-stat);font-weight:800;line-height:1.05;letter-spacing:-.02em;white-space:nowrap;}
.hn-stats .v span{color:var(--teal);}
.hn-stats .k{font-size:var(--fs-small);color:var(--soft-2);margin-top:14px;letter-spacing:-.01em;white-space:nowrap;}
@media (max-width:680px){
  .hero-neural .hn-inner{padding-top:108px;}
  .hn-stats{flex-direction:column;width:100%;max-width:320px;}
  .hn-stats .c{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;}
  .hn-stats .c:last-child{border-bottom:0;}
}

/* page hero (inner pages) */
.page-hero{position:relative;padding:calc(var(--nav-h) + 70px) 0 52px;background:radial-gradient(120% 120% at 80% 0%,var(--navy-deep),var(--bg-2) 60%,var(--bg));color:#fff;overflow:hidden;}
.page-hero h1{font-weight:800;font-size:var(--fs-hero-page);line-height:var(--lh-display);letter-spacing:-.03em;margin:0 0 16px;}
.page-hero p{font-size:var(--fs-lead);line-height:var(--lh-loose);color:var(--soft);max-width:640px;margin:0;}

/* ---------- generic cards ---------- */
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:stretch;grid-auto-rows:1fr;}
.ov-card{display:flex;gap:14px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-3);}
.ov-card .no{font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;color:var(--teal);background:var(--bg-2);width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex:none;}
.ov-card .txt{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);font-weight:600;}

.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.biz-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;}
.biz-card .ph{position:relative;aspect-ratio:16/10;background:var(--bg-3);overflow:hidden;}
/* 카드 사진 cover·하단 셰이드 공통 (biz/feature/news/core/case — 중복 5곳/4곳 통합) */
.biz-card .ph img,.feature .media img,.news-card .ph img,.core-card .ph img,.case-card .ph img{width:100%;height:100%;object-fit:cover;}
.biz-card .ph .shade,.feature .media .shade,.core-card .ph .shade,.case-card .ph .shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(7,11,22,.66));pointer-events:none;}
.biz-card .ph .tag{position:absolute;top:11px;left:11px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.85);background:rgba(7,11,22,.45);padding:3px 8px;border-radius:var(--r-xs);letter-spacing:.08em;}
.biz-card .body{padding:24px;}
.biz-card .body h3{font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);margin:0 0 9px;}
.biz-card .body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-4);margin:0;}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;margin-bottom:24px;box-shadow:0 1px 2px rgba(20,33,61,.04);}
.feature .media{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(10,15,28,.12);background:var(--bg-3);aspect-ratio:16/11;}
.feature .media .cap{position:absolute;top:11px;left:13px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.75);letter-spacing:.1em;background:rgba(7,11,22,.4);padding:3px 7px;border-radius:var(--r-xs);}
.feature .media .live{position:absolute;top:11px;right:13px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--teal);letter-spacing:.08em;}
/* 네이비 배지 공통 (feature/sol-card 중복 통합) */
.feature .badge,.sol-card .badge{display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--navy);background:var(--navy-soft);padding:5px 10px;border-radius:var(--r-xs);letter-spacing:.08em;}
.feature .badge{margin-bottom:16px;}
.feature h3{font-weight:800;font-size:clamp(20px,2vw,24px);line-height:1.25;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink);}
.feature p{font-size:var(--fs-md);line-height:var(--lh-loose);color:var(--ink-4);margin:0 0 22px;}
.feature.reverse .media{order:2;}
.feature.reverse .text{order:1;}
.feat-list{display:flex;flex-direction:column;gap:11px;}
.feat-list li{list-style:none;display:flex;gap:11px;align-items:center;font-size:var(--fs-body);color:var(--ink);}
.feat-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}
.feature .feat-list{padding:0;margin:0;}
/* feat-list 안의 그룹 소제목(예: 원격관리의 AI운영/원격제어 2영역) */
.feat-list li.grp{font-weight:700;color:var(--navy);font-size:var(--fs-small);margin-top:16px;}
.feat-list li.grp:first-child{margin-top:0;}
.feat-list li.grp::before{display:none;}
/* 라벨(<b>솔루션</b> 등)이 flex shrink 로 단어 중간에서 꺾이지 않게 고정 */
.feat-list li b{flex:none;}
/* 항목이 2줄 이상일 때 점(∙)과 라벨이 첫 줄 기준으로 정렬되도록 */
.feature .feat-list li{align-items:flex-start;}
.feature .feat-list li::before{margin-top:9px;}

.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sol-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-3);padding:30px 28px;display:flex;flex-direction:column;}
a.sol-card{text-decoration:none;} /* 링크형 sol-card (index) — 인라인 스타일 대체 */
.sol-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.sol-card .diamond{width:9px;height:9px;border-radius:2px;background:var(--teal);transform:rotate(45deg);box-shadow:0 0 10px rgba(43,227,192,.6);}
.sol-card h3{font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);margin:0 0 10px;}
.sol-card .desc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-4);margin:0 0 18px;}
.sol-card .feats{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding:0;}
.sol-card .feats li{list-style:none;display:flex;gap:9px;align-items:center;font-size:var(--fs-body);color:var(--ink-2);}
.sol-card .feats li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none;}

.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);overflow:hidden;}
.diff-cell{background:var(--bg-3);padding:32px 28px;}
.diff-cell .no{font-family:var(--mono);font-size:var(--fs-micro);color:var(--teal);letter-spacing:.12em;margin-bottom:16px;}
.diff-cell h3{font-size:var(--fs-card-h3);font-weight:700;margin:0 0 9px;line-height:1.35;color:#fff;}
.diff-cell p{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--soft);margin:0;}

.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:40px;}
.stat-cell{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);
  padding:40px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:transform .2s ease,border-color .2s ease;}
.stat-cell:hover{transform:translateY(-3px);border-color:rgba(43,227,192,.4);}
.stat-cell .v{font-family:var(--display);font-size:var(--fs-stat);font-weight:700;line-height:1;}
.stat-cell .v span{color:var(--teal);}
.stat-cell .k{font-size:var(--fs-body);color:var(--soft);margin-top:12px;}

.timeline .row{display:grid;grid-template-columns:108px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line-2);align-items:baseline;}
.timeline .yr{font-family:var(--display);font-size:var(--fs-card-h3);font-weight:700;color:var(--navy);}
.timeline .ev{font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.5;}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.news-card{text-decoration:none;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:block;transition:transform .2s ease,box-shadow .2s ease;}
.news-card:hover,.case-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(20,33,61,.25);}
.news-card .ph{position:relative;aspect-ratio:16/9;background:var(--bg-3);overflow:hidden;}
.news-card .ph .tag{position:absolute;top:11px;left:11px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);box-shadow:0 4px 12px -3px rgba(7,11,22,.45);}
.news-card .ph .tag svg{display:block;}
.news-card .ph .tag-blog{background:#03C75A;}
.news-card .ph .tag-youtube{background:#FF0000;}
.news-card .body{padding:22px;}
.news-card .body .date{font-family:var(--mono);font-size:11.5px;color:var(--soft-3);letter-spacing:.06em;margin-bottom:10px;}
.news-card .body .title{font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);line-height:1.42;}
/* 외부 링크 표시(↗) + 영상 재생(▶) 오버레이 */
.news-card .title .ext{font-size:13px;color:var(--ink-4);font-weight:600;}
.news-card:hover .title .ext{color:var(--navy);}
.news-card .ph .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(7,11,22,.55);
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.news-card .ph .play::before{content:"";border-style:solid;border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;margin-left:3px;}
.news-card:hover .ph .play{background:rgba(43,227,192,.9);}
.news-card:hover .ph .play::before{border-left-color:var(--teal-ink);}

/* ---------- contact form (#2E5090) ---------- */
.contact-split{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;}
.contact-info .row{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.contact-info .row .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--soft-4);margin-bottom:7px;}
.contact-info .row .v{font-size:var(--fs-body);color:#fff;font-weight:600;}
.contact-info .row .v a{color:var(--teal);text-decoration:none;}

.form-card{background:#fff;border-radius:var(--r-lg);padding:34px;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(7,11,22,.6);}
.form-card .form-title{font-size:20px;font-weight:800;color:var(--ink);margin:0 0 6px;}
.form-card .form-sub{font-size:var(--fs-body);color:var(--ink-4);margin:0 0 22px;}
.field{margin-bottom:16px;}
.field label{display:flex;align-items:center;gap:4px;font-size:var(--fs-body);font-weight:600;color:var(--navy);margin-bottom:7px;}
.field label .req{color:var(--danger);line-height:1;}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:var(--fs-small);color:var(--ink);
  padding:13px 14px;border:1px solid #D5DCEA;border-radius:var(--r-sm);background:#fff;transition:border-color .15s,box-shadow .15s;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,80,144,.15);}
.field .err{display:none;font-size:12.5px;color:var(--danger);margin-top:6px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger);}
.field.invalid .err{display:block;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body);color:var(--ink-4);margin-bottom:20px;}
.check input{width:16px;height:16px;margin-top:2px;accent-color:var(--navy);flex:none;}
.check a{color:var(--navy);}
.form-card .btn-navy{width:100%;justify-content:center;font-size:var(--fs-body);padding:16px;}
.form-note{margin-top:14px;font-size:12.5px;color:var(--ink-4);text-align:center;}
.form-ok{display:none;background:var(--navy-soft);border:1px solid #cdddf5;color:var(--navy);border-radius:var(--r-sm);padding:16px;font-size:14px;font-weight:600;margin-bottom:18px;}
.form-ok.show{display:block;}

/* map placeholder */
.map-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);}
.map-ph{aspect-ratio:16/7;background:repeating-linear-gradient(45deg,#eef2f8,#eef2f8 14px,#e6ecf6 14px,#e6ecf6 28px);
  display:flex;align-items:center;justify-content:center;color:var(--soft-3);font-family:var(--mono);font-size:13px;text-align:center;padding:20px;}
.map-embed{display:block;width:100%;aspect-ratio:16/7;border:0;}
.map-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.map-meta .cell{background:#fff;padding:18px 20px;}
.map-meta .cell .k{font-family:var(--mono);font-size:11px;color:var(--soft-3);letter-spacing:.08em;margin-bottom:6px;}
.map-meta .cell .v{font-size:var(--fs-body);font-weight:600;color:var(--ink);}

/* contact CTA band */
.cta-band{background:radial-gradient(110% 120% at 50% 0%,var(--navy-deep),var(--bg-2) 70%);color:#fff;text-align:center;position:relative;overflow:hidden;}
.cta-band .grid-mask{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);}
.cta-band .inner{position:relative;max-width:780px;margin:0 auto;}
.cta-band .eyebrow{justify-content:center;}
.cta-band h2{font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:var(--lh-display);letter-spacing:-.03em;margin:0 0 20px;}
.cta-band p{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--soft);margin:0 0 38px;}
.cta-band .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- footer ---------- */
.footer{background:var(--bg);color:#fff;padding:58px 0 40px;border-top:1px solid rgba(255,255,255,.07);}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start;}
.footer .brand .name{font-size:var(--fs-card-h3);}
.footer .blurb{font-size:13.5px;line-height:1.6;color:#7A86A0;margin:14px 0 0;max-width:360px;}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:11px;}
.footer-col .h{font-family:var(--mono);font-size:11px;color:var(--soft-4);letter-spacing:.1em;margin-bottom:4px;}
.footer-col a{text-decoration:none;color:var(--soft-2);font-size:13.5px;}
.footer-col a:hover{color:var(--teal);}

/* ---------- responsive ---------- */
/* ===== 통일 브레이크포인트: 1180(nav 접힘+그리드 3→2) / 880(2단 정리) / 680(1단) ===== */
@media (max-width:1180px){
  .menu,.nav-actions{display:none;}
  .hamburger{display:flex;}
  .contact-split{grid-template-columns:1fr;gap:32px;}
  /* nav가 햄버거로 접히는 순간 3-col 그리드도 함께 2-col로 — 폭 정렬.
     (metric/core/app 엔터프라이즈 그리드는 정의가 파일 하단이라 그 뒤 미디어쿼리에서 처리) */
  .biz-grid,.sol-grid,.diff-grid,.news-grid,.carousel-page{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  .split-2,.split-2--history{grid-template-columns:1fr;gap:36px;}
  .feature{grid-template-columns:1fr;gap:28px;padding:26px;}
  .feature.reverse .media,.feature.reverse .text{order:0;}
  /* 2-col 카드가 넓어진 만큼 간격도 비례 확대 */
  .biz-grid,.sol-grid,.news-grid,.carousel-page{gap:24px;}
}
@media (max-width:680px){
  /* nav 패딩이 줄어 실제 높이가 낮아짐 → --nav-h를 함께 낮춰 drawer·page-hero·앵커 오프셋을 일괄 정렬 */
  :root{--nav-h:58px;}
  .wrap{padding-left:22px;padding-right:22px;}
  .nav{padding:11px 22px;}
  .overview-grid,.biz-grid,.sol-grid,.diff-grid,.news-grid,.stat-row,.carousel-page{grid-template-columns:1fr;}
  .diff-grid{gap:1px;}
  .row-2{grid-template-columns:1fr;}
  .map-meta{grid-template-columns:1fr;}
  .scroll-cue{left:22px;}
  .timeline .row{grid-template-columns:88px 1fr;gap:14px;}
  /* page-hero 모바일 대응 (고정 136px → 축소) */
  .page-hero{padding:calc(var(--nav-h) + 40px) 0 40px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* 키보드 포커스 링: 모든 대화형 요소에 teal outline (요소 고유 radius 유지) */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.navlink:focus-visible,.nav-cta:focus-visible,.btn:focus-visible,
.drawer .single:focus-visible,.app-card:focus-visible,
.sol-card:focus-visible,.news-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* =========================================================
   Enterprise (alchera-style) components — Octoev palette
   ========================================================= */

/* ---- big metrics band ---- */
.metric-band{background:var(--bg-2);color:#fff;position:relative;overflow:hidden;}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);overflow:hidden;}
.metric{background:var(--bg-3);padding:34px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.metric .v{font-family:var(--display);font-size:var(--fs-stat);font-weight:800;line-height:1;color:#fff;letter-spacing:-.02em;}
.metric .v span{color:var(--teal);}
.metric .k{font-size:var(--fs-body);color:var(--soft);margin-top:14px;line-height:1.5;}
.metric .note{display:block;font-size:11px;color:var(--soft-4);margin-top:6px;font-family:var(--mono);}

/* ---- tech core 3-cards ---- */
.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.core-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;}
.core-card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3);}
.core-card .ph .badge{position:absolute;top:11px;left:11px;font-family:var(--mono);font-size:10px;color:var(--teal);background:rgba(7,11,22,.55);border:1px solid rgba(43,227,192,.3);padding:3px 8px;border-radius:var(--r-xs);letter-spacing:.08em;}
.core-card .body{padding:24px;}
.core-card .body h3{margin:0 0 9px;font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);}
.core-card .body p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-4);}

/* ---- application / sector cards ---- */
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.app-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);min-height:230px;display:flex;align-items:flex-end;text-decoration:none;color:#fff;}
.app-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05);transition:transform .4s ease;}
.app-card:hover img{transform:scale(1.06);}
.app-card .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,22,.15) 35%,rgba(7,11,22,.88));}
.app-card .body{position:relative;padding:22px;z-index:2;}
.app-card .body h3{margin:0 0 7px;font-size:var(--fs-card-h3);font-weight:700;}
.app-card .body p{margin:0;font-size:14px;line-height:var(--lh-body);color:var(--soft);}
.app-card .body .go{display:block;margin-top:12px;font-size:var(--fs-micro);font-weight:700;color:var(--teal);}

/* ---- partner logo marquee ---- */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:octMarquee 30s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes octMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 로고 이미지가 대부분 흰 배경이라 칩 자체를 흰색으로 — 다크 섹션 위에서 카드처럼 보이게 */
.logo-chip{flex:none;width:188px;height:74px;padding:0 22px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;background:#fff;}
.logo-chip img{max-width:100%;max-height:36px;width:auto;object-fit:contain;}
.section--light .logo-chip{border-color:var(--line);}

/* ---- mega footer (company info) ---- */
.footer-biz{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:flex-start;}
.footer-biz .info{font-size:12.5px;color:#6E7A93;line-height:1.9;max-width:640px;}
.footer-biz .info b{color:var(--soft-2);font-weight:600;}
/* 항목 라벨(옥토브(주)·본사·연구소·대표이사·TEL·EMAIL) — 값과 확실히 구분되게 굵게 + 밝게 */
.footer-biz .info .lbl{color:#DDE3EE;font-weight:700;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:var(--soft-2);text-decoration:none;font-size:12px;transition:border-color .15s,color .15s;}
.footer-social a:hover{border-color:var(--teal);color:var(--teal);}
.footer-legal{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--soft-4);}
.footer-legal a{color:var(--soft-3);text-decoration:none;}
.footer-legal a:hover{color:var(--teal);}
.footer-legal .sep{color:#3a4458;}

/* ---- drawer dual CTA ---- */
.drawer .cta-2{display:flex;gap:10px;margin-top:24px;}
.drawer .cta-2 .btn{flex:1;justify-content:center;margin-top:0;}

/* 엔터프라이즈 그리드(metric/core/app)의 반응형 — 정의가 위에 있으므로 여기서 cascade가 맞다.
   본 사이트와 동일한 1180/680 브레이크포인트로 통일. */
@media (max-width:1180px){
  .metric-grid,.core-grid,.app-grid{grid-template-columns:1fr 1fr;}
  .core-grid,.app-grid{gap:24px;}
}
@media (max-width:680px){
  .metric-grid,.core-grid,.app-grid{grid-template-columns:1fr;}
  .logo-chip{width:150px;height:64px;}
}

/* =========================================================
   사업실적(track record) page components
   ========================================================= */

/* ---- featured case quote (대표 사례 인용구) ---- */
.case-quote{margin:22px 0 0;padding:14px 0 4px 18px;border-left:3px solid var(--teal);
  font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2);font-style:italic;}
.case-quote cite{display:block;margin-top:8px;font-size:var(--fs-body);font-style:normal;font-weight:600;color:var(--ink-4);}

/* ---- awards (수상·선정 이력) ---- */
.award-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.award-card{display:flex;align-items:center;gap:20px;padding:22px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .2s ease,box-shadow .2s ease;}
.award-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px -22px rgba(20,33,61,.28);}
.award-card .yr{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--navy);flex:none;width:54px;}
.award-card .bd{flex:1;min-width:0;}
.award-card .bd .ttl{font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);line-height:1.4;}
.award-card .bd .org{font-size:var(--fs-body);color:var(--ink-4);margin-top:5px;}
.award-card .rk{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--teal-ink);background:var(--teal);padding:6px 11px;border-radius:999px;white-space:nowrap;}

/* ---- case grid (도입사례) — 추후 사용. 채워지면 .case-empty 대체 ---- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.case-card{text-decoration:none;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;display:block;transition:transform .2s ease,box-shadow .2s ease;}
.case-card .ph{position:relative;aspect-ratio:16/10;background:var(--bg-3);overflow:hidden;}
.case-card .ph .status{position:absolute;top:11px;right:11px;font-family:var(--mono);font-size:9px;font-weight:700;
  color:var(--teal-ink);background:var(--teal);padding:3px 9px;border-radius:999px;letter-spacing:.04em;}
.case-card .body{padding:22px;}
.case-card .meta{font-family:var(--mono);font-size:11.5px;color:var(--soft-3);letter-spacing:.04em;display:flex;align-items:center;gap:7px;}
.case-card .meta .dot-sep{color:var(--line);}
.case-card .ttl{font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);line-height:1.42;margin:9px 0 12px;}
.case-card .sols{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.case-card .sol-tag{font-family:var(--mono);font-size:10px;color:var(--navy);background:var(--navy-soft);padding:4px 9px;border-radius:var(--r-xs);letter-spacing:.04em;}
.case-card .result{font-size:var(--fs-body);font-weight:600;color:var(--ink-2);line-height:1.5;}
.case-card .scale{font-size:var(--fs-micro);color:var(--ink-4);margin-top:7px;}

/* ---- legal pages (개인정보처리방침 · 이용약관) ---- */
.legal{max-width:840px;}
.legal h2{font-size:var(--fs-card-h3);font-weight:700;color:var(--ink);margin:36px 0 10px;}
.legal h2:first-of-type{margin-top:0;}
.legal p{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--ink-3);margin:0 0 10px;}
.legal ul{padding-left:20px;margin:0 0 10px;}
.legal li{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--ink-3);margin:0 0 4px;}
.legal .effective{font-family:var(--mono);font-size:13px;color:var(--soft-3);margin-top:40px;}

/* ---- carousel (도입사례/미디어 6개씩 페이지 전환) ---- */
.carousel{position:relative;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.carousel-page{flex:none;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px;}
.carousel-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s,transform .15s;flex:none;}
.carousel-arrow:hover{background:var(--navy-soft);border-color:var(--navy-2);}
.carousel-arrow:active{transform:scale(.94);}
.carousel-arrow:disabled{opacity:.35;cursor:default;pointer-events:none;}
.carousel-arrow svg{width:18px;height:18px;display:block;}
.carousel-dots{display:flex;align-items:center;gap:8px;}
.carousel-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .15s,transform .15s;}
.carousel-dots button.is-active{background:var(--navy);transform:scale(1.3);}
.section--paper .carousel-arrow{background:var(--paper-3);}

/* ---- case grid empty state (도입사례 준비 중) ---- */
.case-empty{border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper-3);
  padding:56px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;}
.case-empty .ce-mark{position:relative;width:40px;height:40px;}
.case-empty .ce-mark::before{content:"";position:absolute;inset:0;border:2px solid var(--navy-2);border-radius:9px;transform:rotate(45deg);opacity:.5;}
.case-empty .ce-mark::after{content:"";position:absolute;inset:11px;background:var(--teal);border-radius:3px;transform:rotate(45deg);box-shadow:0 0 12px rgba(43,227,192,.6);}
.case-empty p{font-size:var(--fs-md);line-height:var(--lh-loose);color:var(--ink-4);margin:0;}

@media (max-width:1180px){
  .case-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .award-grid,.case-grid{grid-template-columns:1fr;}
  .award-card{gap:14px;padding:18px 18px;}
  .award-card .rk{display:none;}
}