/* =========================================================
   회사소개 (about-overview) — main.css 위에 얹는 페이지 전용 스타일
   ========================================================= */

/* ---------- 서브 히어로 ---------- */
.hero--sub{ min-height:auto; padding:calc(var(--header) + 120px) 0 140px }
.hero--sub .hero__top{ align-items:flex-start; text-align:left }
.hero--sub .hero__veil{ background:linear-gradient(90deg, rgba(7,6,26,.75) 0%, rgba(7,6,26,.35) 55%, transparent 80%), linear-gradient(180deg, rgba(7,6,26,.4), transparent 30%) }
.crumb{ display:flex; gap:10px; align-items:center; font-size:16px; color:rgba(255,255,255,.55) }
.crumb a{ min-height:44px; display:inline-flex; align-items:center; transition:color .3s var(--ease) }
.crumb a:hover{ color:#fff }
.crumb [aria-current]{ color:rgba(255,255,255,.9) }
.hero--sub .eyebrow{ margin-top:40px }
.sub-title{ margin-top:20px; font-size:clamp(40px,5vw,72px); font-weight:700; line-height:1.2; letter-spacing:-.045em; color:#fff; text-wrap:balance }
.grad{ background:linear-gradient(90deg,#B3A9FF 0%,#7FD8FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.sub-lead{ margin-top:28px; font-size:19px; line-height:1.7; color:rgba(255,255,255,.72); max-width:760px }
.sub-tag{ margin-top:36px; display:inline-flex; align-items:center; gap:12px; font-size:16px; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.85) }
.sub-tag::before{ content:""; width:32px; height:1px; background:rgba(255,255,255,.5) }
@media (max-width:767px){
  .hero--sub{ padding:calc(var(--header) + 48px) 0 88px }
  .sub-title{ font-size:34px }
  .sub-lead{ font-size:16px; margin-top:20px }
  .hero--sub .eyebrow{ margin-top:24px }
}

/* ---------- 섹션 탭 (스크롤 시 헤더 아래 고정) ---------- */
.subnav{ position:sticky; top:var(--header); z-index:50; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--line) }
.subnav__in{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none }
.subnav__in::-webkit-scrollbar{ display:none }
.subnav a{ position:relative; flex:none; display:inline-flex; align-items:center; min-height:64px; padding:0 18px; font-size:17px; font-weight:600; color:var(--text-sub); transition:color .3s var(--ease) }
.subnav a::after{ content:""; position:absolute; left:18px; right:18px; bottom:0; height:2px; background:var(--point); scale:0 1; transition:scale .4s var(--ease) }
.subnav a:hover{ color:var(--text-strong) }
.subnav a.is-on{ color:var(--text-strong) }
.subnav a.is-on::after{ scale:1 1 }
@media (max-width:767px){ .subnav a{ min-height:56px; padding:0 12px; font-size:16px } .subnav a::after{ left:12px; right:12px } }

/* ---------- 숫자 + 핵심역량 ---------- */
.cap{ background:var(--bg-light); padding-top:120px }
.kpi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.kpi__item{ padding:36px 36px 32px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05); display:flex; flex-direction:column }
.kpi__item dt{ order:2; margin-top:16px; font-size:18px; font-weight:600; color:var(--text-strong) }
.kpi__item dd{ order:1; font-size:72px; font-weight:600; line-height:1; letter-spacing:-.05em; color:var(--text-strong); font-variant-numeric:tabular-nums; white-space:nowrap }
.kpi__item dd small{ font-size:24px; margin-left:6px; color:var(--point); letter-spacing:-.02em }
.kpi__item p{ order:3; font-size:16px; color:var(--text-sub) }
.cap__head{ margin-top:var(--sec); align-items:end; row-gap:20px }
.cap__head .sec-head{ grid-column:1 / 8 }
.cap__lead{ grid-column:9 / 13 }

.capmap{ margin-top:72px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr); gap:var(--gap); align-items:center }
.capmap__col{ display:grid; gap:var(--gap) }
.capc{ padding:32px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05) }
.capc__badge{ display:inline-flex; padding:6px 14px; border-radius:999px; background:var(--point-light); color:var(--deep); font-size:16px; font-weight:700 }
.capc h3{ margin-top:18px; font-size:22px; font-weight:700; letter-spacing:-.035em; line-height:1.4; color:var(--text-strong) }
.capc p{ margin-top:10px; font-size:16px; line-height:1.65; color:var(--text-sub) }
.capc--accent{ background:linear-gradient(150deg,var(--point),var(--point-deep) 70%,#1B1460); box-shadow:none }
.capc--accent .capc__badge{ background:rgba(255,255,255,.16); color:#fff }
.capc--accent h3{ color:#fff } .capc--accent p{ color:rgba(255,255,255,.75) }

.orb{ position:relative; aspect-ratio:1 / 1; width:100%; max-width:520px; margin:0 auto; display:grid; place-items:center }
.orb__ring{ position:absolute; inset:6%; border-radius:50%; border:1px dashed rgba(67,48,230,.35); animation:spin 60s linear infinite }
.orb__ring::before{ content:""; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(67,48,230,.12) }
.orb__core{ position:relative; width:46%; aspect-ratio:1 / 1; border-radius:50%; display:grid; place-items:center; z-index:1;
  background:radial-gradient(circle at 35% 30%, #5B47FF, var(--point-deep) 55%, #160F52); box-shadow:0 40px 80px -30px rgba(47,31,196,.7), inset 0 0 0 1px rgba(255,255,255,.18);
  animation:orbBreath 6s var(--ease) infinite }
.orb__core::before,.orb__core::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(91,71,255,.45); z-index:-1; animation:orbWave 6s cubic-bezier(.2,.6,.3,1) infinite; pointer-events:none }
.orb__core::after{ animation-delay:3s }
.orb__core img{ width:62% }
/* 세 원은 중심원에서 같은 거리(오브 지름의 34%)에 120°씩 배치하고, 아주 느리게 공전 (글자는 똑바로 유지) */
.orb__axes{ position:absolute; inset:0; z-index:2; animation:spin 120s linear infinite }
.ax{ --a:0deg; position:absolute; left:50%; top:50%; width:31%; aspect-ratio:1 / 1; margin:-15.5% 0 0 -15.5%;
  transform:rotate(var(--a)) translateX(109.7%) rotate(calc(-1 * var(--a))) }
.ax a{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; text-align:center; font-size:17px; font-weight:700; line-height:1.4; color:var(--text-strong);
  background:#fff; box-shadow:0 20px 50px -24px rgba(18,16,34,.35), 0 0 0 1px rgba(18,16,34,.05); transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  animation:spin 120s linear infinite reverse }
.ax a:hover{ background:var(--text-strong); color:#fff }
.orb:hover .orb__axes,.orb:hover .ax a{ animation-play-state:paused }
.ax--1{ --a:-150deg } .ax--2{ --a:-30deg } .ax--3{ --a:90deg }
@keyframes spin{ to{ rotate:360deg } }
@keyframes orbBreath{ 0%,100%{ scale:1 } 50%{ scale:1.035 } }
@keyframes orbWave{ 0%{ scale:1; opacity:.9 } 100%{ scale:1.75; opacity:0 } }
@media (prefers-reduced-motion:reduce){ .orb__ring,.orb__axes,.ax a,.orb__core,.orb__core::before,.orb__core::after{ animation:none } }

@media (max-width:1024px){
  .kpi__item{ padding:28px } .kpi__item dd{ font-size:56px }
  .cap__head .sec-head,.cap__lead{ grid-column:1 / -1 }
  .capmap{ grid-template-columns:1fr 1fr }
  .orb{ grid-column:1 / -1; grid-row:1; max-width:460px }
}
@media (max-width:767px){
  .cap{ padding-top:64px }
  .kpi{ grid-template-columns:1fr; gap:10px }
  .kpi__item{ padding:22px 24px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px }
  .kpi__item dd{ grid-row:1 / 3; grid-column:2; font-size:40px } .kpi__item dd small{ font-size:18px }
  .kpi__item dt{ margin-top:0 }
  .capmap{ margin-top:40px; grid-template-columns:1fr; gap:12px }
  .capmap__col{ gap:12px }
  .capc{ padding:24px } .capc h3{ font-size:20px }
  .ax a{ font-size:16px }
}

/* ---------- CEO ---------- */
.ceo{ background:#fff }
.ceo__aside{ grid-column:1 / 6; align-self:start; position:sticky; top:calc(var(--header) + 96px) }
.ceo__fig{ border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(180deg,#fff 0%,#fff 55%,#EEECFB 100%); box-shadow:0 0 0 1px var(--line); padding:48px 32px 0; display:flex; justify-content:center }
.ceo__fig img{ width:100%; max-width:440px; mix-blend-mode:multiply }
.ceo__sign{ margin-top:20px; display:flex; flex-direction:column; gap:2px; padding-left:4px }
.ceo__sign span{ font-size:16px; color:var(--text-sub) }
.ceo__sign strong{ font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--text-strong) }
.ceo__body{ grid-column:7 / 13 }
.ceo__quote{ margin-top:20px; font-size:44px; font-weight:700; line-height:1.35; letter-spacing:-.04em; color:var(--text-strong) }
.ceo__quote span{ display:block; margin-bottom:14px; font-size:22px; letter-spacing:-.02em; color:var(--point) }
.ceo__text{ margin-top:48px; padding-top:40px; border-top:1px solid var(--line); display:grid; gap:20px; font-size:18px; line-height:1.85; color:var(--text-body) }
.ceo__text strong{ color:var(--text-strong); font-weight:700; background:linear-gradient(transparent 62%, rgba(67,48,230,.16) 0) }
.ceo__lead{ font-size:22px; font-weight:600; color:var(--text-strong); line-height:1.6 }
.ceo__thanks{ margin-top:8px; font-weight:600; color:var(--text-strong) }
@media (max-width:1024px){
  .ceo__aside,.ceo__body{ grid-column:1 / -1; position:static }
  .ceo__aside{ max-width:520px } .ceo__body{ margin-top:56px }
  .ceo__quote{ font-size:36px }
}
@media (max-width:767px){
  .ceo__fig{ padding:28px 16px 0 }
  .ceo__quote{ font-size:26px } .ceo__quote span{ font-size:18px }
  .ceo__text{ margin-top:32px; padding-top:28px; font-size:16px } .ceo__lead{ font-size:18px }
}

/* ---------- 회사 개요 ---------- */
.facts{ background:var(--bg-light) }
.facts__head{ grid-column:1 / 5 }
.facts__body{ grid-column:5 / 13; display:grid; gap:48px }
.facts__list > div{ display:grid; grid-template-columns:160px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--line-strong) }
.facts__list > div:first-child{ border-top:1px solid var(--text-strong) }
.facts__list dt{ font-size:17px; font-weight:600; color:var(--text-sub) }
.facts__list dd{ font-size:19px; font-weight:600; color:var(--text-strong) }
.facts__list dd span{ font-weight:400; color:var(--text-sub); margin-left:6px }
.facts__list .sep{ margin:0 6px }
.offices{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.office{ padding:32px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05); display:flex; flex-direction:column; align-items:flex-start }
.office__tag{ font-size:16px; font-weight:700; letter-spacing:.08em; color:var(--deep) }
.office h3{ margin-top:10px; font-size:24px; font-weight:700; letter-spacing:-.035em; color:var(--text-strong) }
.office p{ margin-top:10px; font-size:16px; line-height:1.65; color:var(--text-sub); flex:1 }
.office .link-arrow{ margin-top:16px }
@media (max-width:1024px){ .facts__head,.facts__body{ grid-column:1 / -1 } .facts__body{ margin-top:40px } }
@media (max-width:767px){
  .facts__list > div{ grid-template-columns:1fr; gap:4px; padding:18px 0 }
  .facts__list dd{ font-size:17px }
  .offices{ grid-template-columns:1fr; gap:12px } .office{ padding:24px }
}

/* ---------- 연혁 ---------- */
.hist{ background:var(--bg-dark); color:rgba(255,255,255,.72) }
.hist .sec-title{ color:#fff } .hist .sec-title em{ color:var(--point-on-dark) }
.hist__head{ align-items:end; row-gap:32px }
.hist__head .sec-head{ grid-column:1 / 8 }
.eras{ grid-column:8 / 13; justify-self:end; display:flex; gap:6px; padding:6px; border-radius:999px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.eras button{ min-height:48px; padding:0 20px; border-radius:999px; font-size:16px; font-weight:600; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; transition:background-color .3s var(--ease), color .3s var(--ease) }
.eras button:hover{ color:#fff }
.eras button[aria-selected="true"]{ background:#fff; color:var(--text-strong) }
.tl{ margin-top:72px; border-top:1px solid rgba(255,255,255,.18) }
.tl > li{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); padding:36px 0; border-bottom:1px solid var(--line-dark) }
.tl > li[hidden]{ display:none }
.tl b{ grid-column:1 / 4; font-size:48px; font-weight:600; line-height:1; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums }
.tl ul{ grid-column:4 / 13; display:grid; gap:12px; padding-top:6px }
.tl ul li{ position:relative; padding-left:22px; font-size:18px; line-height:1.6; color:rgba(255,255,255,.8) }
.tl ul li::before{ content:""; position:absolute; left:0; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--point-on-dark) }
.tl > li:first-child b{ color:var(--point-on-dark) }
@media (max-width:1024px){ .hist__head .sec-head,.eras{ grid-column:1 / -1; justify-self:start } }
@media (max-width:767px){
  .eras{ width:100%; overflow-x:auto } .eras button{ flex:1; padding:0 12px; white-space:nowrap }
  .tl{ margin-top:40px }
  .tl > li{ grid-template-columns:1fr; gap:14px; padding:28px 0 }
  .tl b,.tl ul{ grid-column:1 / -1 } .tl b{ font-size:34px }
  .tl ul li{ font-size:16px }
}

/* ---------- CI ---------- */
.ci{ background:#fff }
.ci__text{ grid-column:1 / 6 }
.ci__meaning{ margin-top:28px; font-size:18px; line-height:1.85; color:var(--text-body) }
.ci__meaning strong{ color:var(--text-strong) }
.ci__btns{ margin-top:36px; display:flex; flex-wrap:wrap; gap:10px }
.ico-dl{ display:inline-block; width:18px; height:18px; 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='M12 4v12M6 11l6 6 6-6M5 20h14'/%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='M12 4v12M6 11l6 6 6-6M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat }
.ci__main{ grid-column:7 / 13; align-self:stretch; min-height:360px; border-radius:var(--r-xl); background:var(--bg-light); display:grid; place-items:center; padding:48px }
.ci__main img{ width:72%; max-width:460px }
.ci__logos{ grid-column:1 / -1; margin-top:var(--gap); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.ci__logos figure > div{ height:200px; border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; padding:32px }
.ci__logos img{ max-width:70%; max-height:90px; width:auto }
.ci__logos li:nth-child(2) img{ max-height:64px }
.ci__logos figcaption{ margin-top:14px; font-size:16px; font-weight:600; color:var(--text-sub) }
@media (max-width:1024px){ .ci__text,.ci__main{ grid-column:1 / -1 } .ci__main{ margin-top:48px; min-height:280px } }
@media (max-width:767px){
  .ci__meaning{ font-size:16px }
  .ci__btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px } .ci__btns .btn{ padding:0 12px }
  .ci__main{ min-height:200px; padding:28px }
  .ci__logos{ grid-template-columns:1fr; gap:12px } .ci__logos figure > div{ height:150px }
}

/* CTA는 main.css 공용 스타일 사용, 위쪽 여백만 조정 */
.page-about .cta{ background:#fff; padding-top:0 }
html:has(.page-about){ scroll-padding-top:calc(var(--header) + 64px) }
.cap{ overflow:clip }
@media (min-width:1025px){ .ceo__quote{ font-size:40px } }
.grad{ white-space:nowrap }
@media (max-width:767px){ .sub-title{ font-size:30px } }

/* 공통: 섹션 머리 2단 (특허·채용 등 서브페이지 공용) */
.sec-row{ align-items:end; row-gap:20px }
.sec-row .sec-head{ grid-column:1 / 8 }
.sec-row__lead{ grid-column:9 / 13 }
@media (max-width:1024px){ .sec-row .sec-head,.sec-row__lead{ grid-column:1 / -1 } }

@media (max-width:767px){ .capc h3{ margin-top:12px } .capc p{ margin-top:6px } }

/* =========================================================
   섹션 제목 공통: 서브 텍스트는 제목 아래 (전 페이지)
   .sec-row--center 를 붙이면 가운데 정렬
   ========================================================= */
.grid.sec-row,.grid.cap__head{ row-gap:0 }
.grid.sec-row > .sec-head,.grid.sec-row > .sec-row__lead,.grid.sec-row > .gsx__side,
.grid.cap__head > .sec-head,.grid.cap__head > .cap__lead{ grid-column:1 / 9 }
.grid.sec-row > .sec-row__lead,.grid.cap__head > .cap__lead,.grid.sec-row > .gsx__side{ margin-top:24px; max-width:640px }
.grid.sec-row > .gsx__side{ max-width:760px }
.grid.sec-row--center > .sec-head{ grid-column:1 / -1; align-items:center; text-align:center }
.grid.sec-row--center > .sec-row__lead{ grid-column:1 / -1; justify-self:center; text-align:center }
@media (max-width:1024px){ .grid.sec-row > *,.grid.cap__head > *{ grid-column:1 / -1 } }
@media (max-width:767px){ .grid.sec-row > .sec-row__lead,.grid.cap__head > .cap__lead,.grid.sec-row > .gsx__side{ margin-top:14px } }