/* 리치온랩스 홈페이지 시안 — 스타일
   값 출처: ../DESIGN.md (참고 샘플에서 실측한 수치). 코드는 직접 작성. */

:root {
  --c-black: #000;            /* DESIGN.md Black */
  --c-white: #fff;
  --c-ink: #111;              /* Ink */
  --c-gray-700: #777;
  --c-gray-400: #aaa;
  --c-line: rgba(17, 17, 17, .08);
  --c-glass: rgba(255, 255, 255, .05);
  --c-overlay: rgba(31, 31, 31, .5);
  --c-chip: #e0e0e0;
  --primary: #1fa3eb;         /* Accent */
  --grad-accent: linear-gradient(to right, #1febd1 0%, #1996e6 100%);
  --e-font: "Outfit", sans-serif;
  --k-font: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #fff; }
body { font-family: var(--k-font); color: var(--c-ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: keep-all; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

/* Lenis 기본 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* 공통: 그라데이션 글씨 */
.grad-text { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ───────── 시안 안내 배지 ───────── */
.mock-badge { position: fixed; left: 16px; bottom: 16px; z-index: 999; padding: 8px 14px; border-radius: 100px; background: rgba(255, 245, 190, .95); color: #333; font-size: 12px; line-height: 1.3; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

/* ───────── 메인 비주얼(영상 1개, 슬라이드 없음) ───────── */
#mainVisual { position: relative; overflow: hidden; width: 100%; height: 100vh; background: #000; }
#mainVisual::before { content: ""; position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: 360px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 88%); }
#mainVisual::after { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(0, 0, 0, .3); }
.visual-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; will-change: transform; }   /* 스크롤 때 커지는 층을 미리 분리해 매번 다시 그리지 않게 */
.visual-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.visual-media video.ready { opacity: 1; }
.main-txt { position: absolute; z-index: 101; left: 50%; bottom: 100px; display: flex; flex-direction: column; width: 100%; padding: 0 20px; text-align: center; color: #fff; transform: translateX(-50%); }
.main-txt h1 { padding-bottom: 20px; font-size: clamp(36px, 3.65vw, 70px); font-weight: 700; line-height: 1.2; }
.main-txt .txt { font-size: clamp(16px, 1.04vw, 20px); font-weight: 500; line-height: 1.4; }

/* ── 영상 대체 장면(영상 파일이 없을 때만 보임): 하늘 + 고래 ── */
.sky { position: absolute; inset: 0; background: linear-gradient(to bottom, #0a1f4d 0%, #1f5fae 38%, #7fc0ec 72%, #d9eefb 100%); overflow: hidden; }
.sky .cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); animation: drift linear infinite; will-change: transform; }
.sky .c1 { width: 36vw; height: 12vw; top: 56%; left: -10%; animation-duration: 90s; }
.sky .c2 { width: 28vw; height: 9vw; top: 70%; left: 40%; animation-duration: 120s; animation-delay: -40s; }
.sky .c3 { width: 22vw; height: 7vw; top: 44%; left: 70%; animation-duration: 100s; animation-delay: -70s; opacity: .7; }
.sky .whale { position: absolute; top: 20%; left: 0; width: min(46vw, 760px); animation: swim 42s linear infinite; }
.sky .whale svg { width: 100%; height: auto; animation: bob 5s ease-in-out infinite; }
.sky .whale.small { top: 36%; width: min(22vw, 360px); animation-duration: 60s; animation-delay: -25s; opacity: .85; }
@keyframes drift { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes swim { from { transform: translateX(-60vw); } to { transform: translateX(110vw); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3vh) rotate(1.5deg); } }

/* ───────── 가로 이동 고정 구간 (#inc01) ───────── */
#inc01 { background: #000; color: #fff; }
#inc01 .sticky-container { height: 450vh; }
#inc01 .sticky-wrapper { position: sticky; top: 0; overflow: hidden; height: 100vh; }
#inc01 .target { display: flex; align-items: center; flex-wrap: nowrap; width: max-content; height: 100%; padding-right: 50px; will-change: transform; }
#inc01 .target > * { flex-shrink: 0; height: 100%; }

#inc01 .area-title { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100vw; }
#inc01 .title-box { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 20px; }
#inc01 .title-box h2 { padding-bottom: 40px; font-family: var(--e-font); font-size: clamp(84px, 13vw, 250px); font-weight: 700; line-height: 1; }
#inc01 .title-box p { padding-bottom: 40px; font-size: clamp(18px, 1.4vw, 27px); font-weight: 600; line-height: 1.4; white-space: pre-line; }

#inc01 .card-box .item { position: absolute; top: 50%; right: 27%; overflow: hidden; display: flex; flex-direction: column; gap: 45px; width: 100%; max-width: 275px; padding: 26px; border-radius: 10px; background: var(--c-overlay); transition: all .4s; }
#inc01 .card-box .item h3 { font-family: var(--e-font); font-size: 17px; line-height: 1; transition: color .3s; }
#inc01 .card-box .item .desc { font-size: 15px; line-height: 1.3; white-space: pre-line; transition: color .3s; }
#inc01 .card-box .item.on { background: #fff; box-shadow: 0 0 43px rgba(27, 184, 222, .7); }
#inc01 .card-box .item.on h3 { color: var(--primary); }
#inc01 .card-box .item.on .desc { color: #111; }

#inc01 .area-service { display: flex; align-items: center; }
#inc01 .area-service ul { display: flex; gap: clamp(40px, 5.3vw, 102px); }
#inc01 .area-service li { width: 100%; max-width: 638px; flex: 0 0 clamp(300px, 33.2vw, 638px); }
#inc01 .area-service li a { display: flex; flex-direction: column; gap: 45px; color: #fff; }
#inc01 .thumb-box { width: 100%; aspect-ratio: 638 / 637; border-radius: 10px; overflow: hidden; transform-origin: bottom left; }
#inc01 .thumb-art { position: relative; width: 100%; height: 100%; transition: transform .3s; }
#inc01 .area-service li a:hover .thumb-art { transform: scale(1.1); }
#inc01 .text-box h4 { padding-bottom: 12px; font-size: clamp(24px, 1.82vw, 35px); font-weight: 700; line-height: 1.2; }
#inc01 .text-box .desc { font-size: clamp(15px, .94vw, 18px); line-height: 1.4; }

/* 서비스 카드 자리표시 그림(직접 그린 추상 도형 — 실제 사진으로 교체 예정) */
.art { display: flex; align-items: flex-end; padding: 36px; color: rgba(255, 255, 255, .9); font-family: var(--e-font); font-weight: 700; font-size: 20px; }
.art-1 { background: radial-gradient(circle at 25% 20%, #1febd1 0, transparent 45%), radial-gradient(circle at 80% 80%, #1996e6 0, transparent 55%), #08131f; }
.art-2 { background: conic-gradient(from 200deg at 70% 35%, #1996e6, #0a2a5a, #1febd1, #1996e6), #08131f; }
.art-3 { background: radial-gradient(ellipse at 50% 110%, #1febd1 0, transparent 60%), radial-gradient(circle at 20% 15%, #5b7cff 0, transparent 40%), #0a0f1c; }
.art-4 { background: repeating-linear-gradient(115deg, rgba(31, 235, 209, .55) 0 2px, transparent 2px 38px), radial-gradient(circle at 70% 30%, #1996e6 0, transparent 55%), #0b1522; }
.art-5 { background: radial-gradient(circle at 30% 70%, #1febd1 0, transparent 40%), radial-gradient(circle at 75% 25%, #1fa3eb 0, transparent 45%), #0b1620; }

/* ───────── 숫자·링크 구간 (#inc02) ───────── */
#inc02 { position: relative; z-index: 0; background: #000; }
#inc02 .bgwrap { position: absolute; z-index: -1; inset: 0; clip-path: inset(0);
  /* 위(검정 구간)와 아래로 자연스럽게 이어지도록 가장자리를 서서히 검정으로 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12vh, #000 calc(100% - 22vh), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12vh, #000 calc(100% - 22vh), transparent 100%); }
#inc02 .bg { position: sticky; top: 0; width: 100%; height: 100vh; background: radial-gradient(60vw 60vw at 50% 55%, #15181e 0%, #08090c 60%, #000 100%); }
#inc02 .bg::before { content: ""; position: absolute; z-index: 3; inset: 0; background: rgba(0, 0, 0, .12); pointer-events: none; }
#inc02 .bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
#inc02 .bg video.ready { opacity: 1; }

#inc02 .group-achieve { padding-bottom: 170px; }
#inc02 .group-achieve .text-box { display: flex; flex-direction: column; align-items: center; padding: 55vh 20px 0; }
#inc02 .group-achieve h2 { padding-bottom: 75px; font-size: clamp(32px, 3.13vw, 60px); font-weight: 700; line-height: 1.2; white-space: pre-line; text-align: center; color: #fff; }
.achieve-list { width: 100%; max-width: 693px; }
.achieve-list li { display: flex; align-items: center; padding: 40px 40px 35px; border-bottom: 1px solid #fff; color: #fff; opacity: .3; }
.achieve-list .count { display: flex; align-items: flex-end; min-width: 308px; color: #fff; }
.digit-box { overflow: hidden; display: flex; flex-direction: column; height: 70px; text-align: center; font-family: var(--e-font); font-size: 70px; font-weight: 700; line-height: 1; letter-spacing: -2px; }
.digit-box span { display: block; height: 70px; }
.achieve-list .comma { font-family: var(--e-font); font-size: 70px; line-height: 1; letter-spacing: -5px; transform: translateX(-6px); }
.achieve-list .unit { padding-left: 5px; font-size: 30px; font-weight: 700; }
.achieve-list dt { padding-bottom: 10px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.achieve-list dd { font-size: 16px; line-height: 1.3; white-space: pre-line; }

#inc02 .group-linkbox { padding: 0 20px 194px; }
#inc02 .group-linkbox ul { display: flex; justify-content: center; gap: 60px; }
#inc02 .group-linkbox li { width: 100%; max-width: 754px; }
.link-item { display: flex; flex-direction: column; gap: 80px; padding: 60px 70px 63px 58px; color: #fff; border: 1px solid #fff; border-radius: 12px; background: var(--c-glass); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .3s, color .3s; }
.link-item .head { display: flex; align-items: center; justify-content: space-between; }
.link-item .head h2 { font-family: var(--e-font); font-size: 20px; font-weight: 700; text-transform: uppercase; }
.link-item .head span { display: block; width: 47px; height: 47px; transition: transform .3s; }
.link-item .cont h3 { padding-bottom: 20px; font-size: clamp(24px, 1.82vw, 35px); font-weight: 700; line-height: 1.2; }
.link-item .cont .desc { font-size: 18px; line-height: 1.5; white-space: pre-line; }
.link-item:hover { background: #fff; color: #000; }
.link-item:hover .head span { transform: translateX(15px); }

/* ───────── 반응형 (메인 페이지 구간) ───────── */
@media (max-width: 1100px) {
  #inc01 .card-box .item { right: 8%; max-width: 220px; padding: 18px; gap: 28px; }
  #inc02 .group-linkbox ul { flex-direction: column; gap: 24px; }
  .link-item { gap: 48px; padding: 36px 32px; }
  .achieve-list li { padding: 28px 12px 24px; }
  .achieve-list .count { min-width: 200px; }
  .digit-box, .achieve-list .comma { font-size: 46px; height: 46px; }
  .digit-box span { height: 46px; }
  .achieve-list .unit { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky .cloud, .sky .whale, .sky .whale svg { animation: none; }
}