/* ===== 회사 소개 메인 (index.html 전용) ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --navy:#0f172a;
  --navy-card:#1c2c4d;
  --blue:#2563eb;
  --blue-hover:#1d4ed8;
  --blue-soft:#eff6ff;
  --gray-soft:#f8fafc;
  --text:#334155;
  --sub:#64748b;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 4px 24px rgba(15,23,42,.06);
  --shadow-up:0 12px 36px rgba(15,23,42,.10);
  --nav-h:72px;
  --max-w:1120px;
  --head:'Paperlogy','Pretendard',-apple-system,sans-serif;
  --body:'Pretendard','Pretendard Variable',-apple-system,'Apple SD Gothic Neo',sans-serif;
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--body); color:var(--text); background:#fff; line-height:1.7; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,p,li,td,th,span { word-break:keep-all; overflow-wrap:break-word; }
h1,h2,h3 { font-family:var(--head); color:var(--navy); letter-spacing:-.02em; line-height:1.3; }

.wrap { max-width:var(--max-w); margin:0 auto; padding:0 24px; }

/* Nav: 로고 PNG에 남색 배경이 들어 있어 상단 메뉴는 항상 남색 */
.nav { position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:50; background:var(--navy); transition:box-shadow .3s; }
.nav.scrolled { box-shadow:0 4px 20px rgba(15,23,42,.25); }
.nav-inner { max-width:var(--max-w); height:100%; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:40px; }
.nav-logo img { height:30px; width:auto; }
.nav-links { display:flex; gap:32px; font-family:var(--head); font-size:15px; font-weight:500; color:rgba(255,255,255,.78); }
.nav-links a:hover { color:#fff; }
.nav-cta { margin-left:auto; font-family:var(--head); font-size:14px; font-weight:600; padding:10px 22px; border-radius:10px; background:var(--blue); color:#fff; }
.nav-cta:hover { background:var(--blue-hover); }

/* Top */
.top {
  background:radial-gradient(ellipse 60% 70% at 85% 30%, rgba(37,99,235,.28) 0%, transparent 65%), var(--navy);
  color:#fff; padding:calc(var(--nav-h) + 112px) 0 112px;
}
.top-chip { display:inline-block; font-family:var(--head); font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; background:rgba(37,99,235,.28); color:#bfdbfe; }
.top h1 { color:#fff; font-size:clamp(34px,5.4vw,56px); font-weight:700; margin:24px 0 24px; }
.top h1 em { font-style:normal; color:#60a5fa; }
.top-desc { font-size:clamp(16px,2vw,19px); color:rgba(255,255,255,.78); line-height:1.75; max-width:640px; }
.top-en { margin-top:16px; font-size:clamp(14.5px,1.6vw,16px); color:rgba(255,255,255,.6); line-height:1.7; max-width:640px; }

/* Section common */
.sec { padding:112px 0; }
.sec-alt { background:var(--gray-soft); }
.eyebrow { font-family:var(--head); font-size:14px; font-weight:600; color:var(--blue); margin-bottom:12px; }
.sec h2 { font-size:clamp(28px,3.6vw,36px); font-weight:700; }
.sec-desc { margin-top:12px; font-size:17px; color:var(--sub); }
.sec-head { margin-bottom:48px; }

/* AI solutions */
.sol-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sol { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; display:flex; flex-direction:column; }
.sol-top { display:flex; align-items:center; gap:8px; }
.badge { font-family:var(--head); font-size:12.5px; font-weight:600; padding:4px 12px; border-radius:999px; background:var(--blue-soft); color:var(--blue); }
.badge-live { background:var(--blue); color:#fff; }
.sol h3 { font-size:22px; font-weight:700; margin:16px 0 8px; }
.sol-desc { font-size:15.5px; color:var(--text); line-height:1.65; }
.sol-link { margin-top:16px; font-family:var(--head); font-size:14px; font-weight:600; color:var(--blue); }
.sol-link:hover { color:var(--blue-hover); }

/* Stats */
.sec-navy { background:radial-gradient(ellipse 50% 80% at 50% 0%, rgba(37,99,235,.22) 0%, transparent 70%), var(--navy); }
.sec-navy h2 { color:#fff; }
.sec-navy h2 em { font-style:normal; color:#60a5fa; white-space:nowrap; }
.sec-navy .eyebrow { color:#93c5fd; }
.sec-head-center { text-align:center; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat { background:var(--navy-card); border-radius:var(--radius); padding:40px 24px; text-align:center; }
.stat-num { font-family:var(--head); font-size:72px; font-weight:700; color:#fff; line-height:1; letter-spacing:-.02em; }
.stat-num small { font-size:28px; margin-left:4px; color:#60a5fa; }
.stat-label { margin-top:16px; font-family:var(--head); font-size:18px; font-weight:600; color:rgba(255,255,255,.82); }

/* 인증·수상 띠 */
.cert-row { margin-top:56px; text-align:center; }
.cert-title { font-family:var(--head); font-size:14px; font-weight:600; color:#93c5fd; margin-bottom:20px; }
.cert-strip { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.cert-strip li { font-family:var(--head); font-size:16px; font-weight:600; color:#fff; background:rgba(255,255,255,.07); padding:14px 26px; border-radius:999px; }

/* Business rows */
.biz { display:grid; gap:16px; }
.biz-row { display:grid; grid-template-columns:56px 1fr auto; gap:24px; align-items:center; background:#fff; box-shadow:var(--shadow); border-radius:var(--radius); padding:28px 32px; }
.biz-no { width:56px; height:56px; border-radius:var(--radius-sm); background:var(--navy); color:#fff; font-family:var(--head); font-size:18px; font-weight:700; display:grid; place-items:center; }
.biz-row h3 { font-size:20px; font-weight:700; margin-bottom:4px; }
.biz-row p { font-size:15.5px; color:var(--text); }

/* 회사 정보(영문): 왼쪽 소개 문단 + 오른쪽 사실 목록 */
.co-grid { display:grid; grid-template-columns:5fr 6fr; gap:72px; align-items:start; }
.co-lead { margin-top:20px; font-size:17px; color:var(--text); line-height:1.75; }
.co-facts { display:grid; gap:10px; }
.co-facts > div { display:grid; grid-template-columns:200px 1fr; gap:16px; background:var(--gray-soft); border-radius:var(--radius-sm); padding:16px 20px; }
.co-facts dt { font-family:var(--head); font-size:14px; font-weight:600; color:var(--sub); }
.co-facts dd { font-size:15.5px; color:var(--navy); }
.co-facts a { color:var(--blue); }

/* 핵심 가치: 왼쪽 큰 글자 고정 + 오른쪽 네 줄, 가운데에 온 줄 강조 */
.values-wrap { display:grid; grid-template-columns:5fr 6fr; gap:72px; align-items:stretch; }
.values-side { position:relative; }
.values-sticky { position:sticky; top:calc(var(--nav-h) + 48px); }
.values .sec-desc { color:rgba(255,255,255,.6); }
.ri-stage { margin-top:36px; min-height:300px; width:280px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.ri-big {
  display:inline-block; font-family:var(--head); font-weight:700; font-size:240px; line-height:.95; letter-spacing:-.02em;
  background:linear-gradient(135deg, #bfdbfe 0%, #60a5fa 40%, #2563eb 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 16px 48px rgba(37,99,235,.45));
}
.ri-big.swap { animation:riSwap .7s var(--ease); }
@keyframes riSwap { from { opacity:0; transform:translateY(28px) scale(.92); } to { opacity:1; transform:none; } }
.ri-big-word { font-family:var(--head); font-size:28px; font-weight:600; color:#fff; margin-top:8px; }
.ri-progress { display:flex; gap:8px; margin-top:28px; width:280px; justify-content:center; }
.ri-progress i { display:block; width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,.16); transition:background .4s var(--ease), width .4s var(--ease); }
.ri-progress i.on { width:64px; background:var(--blue); }
.values-list { list-style:none; display:grid; gap:40px; padding-block:8vh 18vh; }
.value-item { display:grid; grid-template-columns:72px 1fr; gap:24px; align-items:start; padding:40px 40px; border-radius:var(--radius); background:rgba(255,255,255,.03); opacity:.38; transform:scale(.97); transition:opacity .5s var(--ease), transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.value-item.is-active { opacity:1; transform:none; background:var(--navy-card); box-shadow:0 20px 48px rgba(0,0,0,.28); }
.vi-letter { text-align:center; font-family:var(--head); font-size:64px; font-weight:700; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(147,197,253,.7); transition:color .5s var(--ease); }
.value-item.is-active .vi-letter { color:#60a5fa; -webkit-text-stroke-color:#60a5fa; }
.vi-word { font-family:var(--head); font-size:14px; font-weight:600; color:#93c5fd; }
.value-item h3 { color:#fff; font-size:26px; font-weight:700; margin:6px 0 10px; }
.vi-desc { font-size:16px; color:rgba(255,255,255,.75); line-height:1.65; }

/* 채용 */
.careers-box { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:48px; }
.careers-desc { margin-top:10px; font-size:16px; color:var(--sub); }
.careers-status { font-family:var(--head); font-size:15px; font-weight:600; color:var(--navy); background:var(--gray-soft); padding:12px 20px; border-radius:999px; }

/* Contact */
.contact-box { background:radial-gradient(ellipse 60% 80% at 80% 20%, rgba(37,99,235,.30) 0%, transparent 65%), var(--navy); border-radius:24px; color:#fff; padding:72px 48px; text-align:center; }
.contact-box h2 { color:#fff; font-size:clamp(28px,3.6vw,36px); }
.contact-box p { margin-top:12px; font-size:17px; color:rgba(255,255,255,.78); }
.contact-btn { display:inline-block; margin-top:32px; font-family:var(--head); font-size:16px; font-weight:600; background:var(--blue); color:#fff; padding:14px 28px; border-radius:12px; }
.contact-btn:hover { background:var(--blue-hover); }
.contact-addr { margin-top:24px; font-size:14.5px; }

/* Footer */
.footer { background:var(--navy); color:rgba(255,255,255,.55); padding:48px 0 32px; font-size:13px; line-height:1.9; }
.footer-inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-logo { height:22px; width:auto; margin-bottom:12px; }
.footer-links { display:flex; gap:20px; align-items:flex-start; }
.footer-links a:hover { color:#fff; }
.footer-copy { margin-top:24px; font-size:12px; color:rgba(255,255,255,.38); }

/* Motion */
:root { --ease:cubic-bezier(.22,1,.36,1); }

/* 첫 화면: 순서대로 떠오름 */
.hero-in { opacity:0; transform:translateY(28px); animation:heroIn .9s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes heroIn { to { opacity:1; transform:none; } }
.top-chip.hero-in { display:inline-block; }

/* 첫 화면 배경: 파란 빛이 천천히 움직임 */
.top { position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + 72px); }
.top > .wrap, .top > .rion-marquee { position:relative; z-index:1; }
.aurora { position:absolute; inset:0; z-index:0; pointer-events:none; }
.ab { position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.ab1 { width:620px; height:620px; left:-8%; top:-20%; background:#2563eb; animation:drift1 22s ease-in-out infinite alternate; }
.ab2 { width:520px; height:520px; right:-6%; top:10%; background:#1d4ed8; opacity:.45; animation:drift2 26s ease-in-out infinite alternate; }
.ab3 { width:460px; height:460px; left:35%; bottom:-30%; background:#3b82f6; opacity:.30; animation:drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(38vw, 18vh) scale(1.15); } }
@keyframes drift2 { to { transform:translate(-34vw, 22vh) scale(.9); } }
@keyframes drift3 { to { transform:translate(-20vw, -28vh) scale(1.2); } }

/* R·I·O·N 네 단어: 두 줄이 서로 반대 방향으로 흐름 */
.rion-marquee { margin-bottom:64px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-row { overflow:hidden; }
.mq-track { display:flex; width:max-content; will-change:transform; }
.mq-set { display:flex; gap:56px; padding-right:56px; }
.rw { font-family:var(--head); font-weight:700; font-size:clamp(52px,8.4vw,112px); line-height:1.12; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
.rw b { font-weight:700; color:#60a5fa; }
.mq-outline .rw, .mq-outline .rw b { color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.32); }
.mq-outline .rw b { -webkit-text-stroke-color:rgba(96,165,250,.9); }
.mq-l { animation:mqL 48s linear infinite; }
.mq-r { animation:mqR 56s linear infinite; }
@keyframes mqL { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes mqR { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.top h1.hero-in { font-size:clamp(26px,3.4vw,40px); margin:20px 0 16px; }

/* 첫 화면 강조어: 리온 파랑 계열 그라데이션 글자 */
.top h1 em {
  background:linear-gradient(90deg, #2563eb 0%, #60a5fa 55%, #93c5fd 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* 스크롤 진입: 한 번만 */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.reveal.visible { opacity:1; transform:none; }

/* 마우스 올림 */
.sol, .stat, .biz-row { transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow .25s var(--ease); }
.sol.visible:hover, .biz-row.visible:hover { transform:translateY(-6px); box-shadow:var(--shadow-up); transition-delay:0s; }
.stat.visible:hover { transform:translateY(-6px); background:#233660; transition-delay:0s; }
.nav-cta, .contact-btn { transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.nav-cta:hover, .contact-btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,99,235,.35); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-in { opacity:1; transform:none; animation:none; }
  .mq-l, .mq-r, .ab, .ri-big.swap { animation:none; }
  .value-item { transition:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .sol.visible:hover, .biz-row.visible:hover, .stat.visible:hover, .nav-cta:hover, .contact-btn:hover { transform:none; }
}

/* Responsive */
@media (max-width:1024px) {
  .stats, .sol-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  :root { --nav-h:64px; }
  .wrap, .nav-inner { padding:0 20px; }
  .nav-links { display:none; }
  .nav-logo img { height:26px; }
  .top { padding:calc(var(--nav-h) + 40px) 0 72px; }
  .rion-marquee { margin-bottom:40px; }
  .ab { filter:blur(60px); }
  .sec { padding:72px 0; }
  .sol-grid { grid-template-columns:1fr; }
  .stat { padding:28px 16px; }
  .stat-num { font-size:52px; }
  .stat-label { font-size:15px; }
  .sol { padding:24px; }
  .biz-row { grid-template-columns:1fr; gap:14px; padding:24px; }
    .contact-box { padding:48px 24px; }
  .careers-box { padding:32px 24px; }
  .co-grid { grid-template-columns:1fr; gap:32px; }
  .co-facts > div { grid-template-columns:1fr; gap:2px; }
  .values-wrap { grid-template-columns:1fr; gap:24px; }
  .values-sticky { position:static; }
  .ri-stage, .ri-progress { display:none; }
  .values-list { padding-block:0; gap:12px; }
  .values-side { position:static; }
  .value-item { grid-template-columns:52px 1fr; gap:16px; padding:24px 20px; }
  .vi-letter { font-size:44px; }
  .value-item h3 { font-size:20px; }
  .nav-links { display:none; }
}