@charset "utf-8";

/* ==========================================================================
   SENTIENT SYSTEMS — One Page
   Main color : PANTONE 7699 C (#00637C)

   01 Tokens          02 Reset          03 Type & Utility
   04 Loader/Grain    05 Header/Nav     06 Buttons
   07 Hero            08 Statement      09 Company
   10 Business(Pin)   11 Technology     12 Portfolio
   13 News/Band       14 Contact        15 Footer
   16 Motion          17 Responsive     18 A11y
   ========================================================================== */

/* ==========================================================================
   01. Tokens
   ========================================================================== */
:root {
    /* Brand — Pantone 7699 C 계열 */
    --brand: #00637c; /* MAIN */
    --brand-dk: #01475a;
    --brand-deep: #012a36;
    --brand-lt: #2e93ac;
    --brand-pale: #9fcdd8;

    /* Neutral */
    --ink: #04141a; /* 최심부 */
    --ink-2: #072027;
    --ink-3: #0b2c35;
    --paper: #e9eeef;
    --paper-2: #dbe4e6;
    --white: #f7fafa;

    /* 다크 기준 (라이트 섹션에서 재정의) */
    --bg: var(--ink);
    --fg: var(--white);
    --fg-dim: #96b2b9;
    --fg-mute: #5e8290;
    --line: rgba(159, 205, 216, 0.16);
    --line-2: rgba(159, 205, 216, 0.34);
    --surface: rgba(159, 205, 216, 0.045);

    /* Type */
    --kr:
        "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Noto Sans KR", system-ui, sans-serif;
    --en: "Montserrat", var(--kr);

    --fs-hero: clamp(2.6rem, 7.2vw, 7rem);
    --fs-h2: clamp(1.95rem, 4.4vw, 4.1rem);
    --fs-h3: clamp(1.35rem, 2.5vw, 2.3rem);
    --fs-lead: clamp(1rem, 1.35vw, 1.1875rem);
    --fs-body: clamp(0.9375rem, 1.1vw, 1.0625rem);
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
    --fs-mono: 0.6875rem;

    /* Layout */
    --gut: clamp(1.25rem, 4.2vw, 5rem);
    --max: 1520px;
    --pad: clamp(6rem, 14vh, 12rem);
    --head-h: 82px;

    /* Motion */
    --e-out: cubic-bezier(0.16, 1, 0.3, 1);
    --e-io: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ==========================================================================
   02. Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--head-h);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--white);
    font-family: var(--kr);
    font-size: var(--fs-body);
    line-height: 1.7;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.is-loading,
body.is-locked {
    overflow: hidden;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
img,
canvas,
svg {
    display: block;
    max-width: 100%;
}
em,
i {
    font-style: normal;
}
::selection {
    background: var(--brand);
    color: var(--white);
}

/* ==========================================================================
   03. Type & Utility
   ========================================================================== */
.shell {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.section {
    position: relative;
    padding-block: var(--pad);
    background: var(--bg);
    color: var(--fg);
}

/* 라이트(페이퍼) 섹션 — 토큰만 반전해 재사용 */
.section--paper {
    --bg: var(--paper);
    --fg: var(--ink);
    --fg-dim: #4c6a73;
    --fg-mute: #7d949b;
    --line: rgba(4, 20, 26, 0.14);
    --line-2: rgba(4, 20, 26, 0.3);
    --surface: rgba(4, 20, 26, 0.03);
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.042em;
}
.h2--big {
    font-size: clamp(2.1rem, 5vw, 4.6rem);
}

.mark {
    position: relative;
    display: inline-block;
    color: var(--brand-lt);
}
.mark::after {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.06em;
    height: 0.3em;
    background: var(--brand);
    opacity: 0.38;
    z-index: -1;
}

.lead {
    margin: 1.7rem 0;
    max-width: 40ch;
    font-size: var(--fs-lead);
    line-height: 1.82;
    color: var(--fg-dim);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.6rem;
    font-family: var(--en);
    font-size: var(--fs-mono);
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--brand-lt);
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
}
.section--paper .eyebrow {
    color: var(--brand);
}
.eyebrow--on {
    color: rgba(247, 250, 250, 0.78);
}

.head {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    border-bottom: 2px solid var(--line-2);
}
.head__note {
    color: var(--fg-dim);
    line-height: 1.85;
}

.arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    font-family: var(--en);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--line-2);
    transition:
        color 0.35s,
        border-color 0.35s;
}
.arrow i {
    transition: transform 0.45s var(--e-out);
}
.arrow:hover {
    color: var(--brand-lt);
    border-color: var(--brand-lt);
}
.arrow:hover i {
    transform: translateX(8px);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 500;
    padding: 0.65rem 1.1rem;
    background: var(--brand);
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 700;
    transform: translateY(-180%);
    transition: transform 0.3s var(--e-out);
}
.skip-link:focus {
    transform: none;
}

/* ==========================================================================
   04. Loader & Grain
   ========================================================================== */
.loader {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-content: center;
    background: var(--ink);
    transition: transform 1.1s var(--e-io);
}
/* 카운터가 100에 도달하면 위로 걷힘 */
.loader.is-done {
    transform: translateY(-100%);
}

.loader__inner {
    text-align: center;
}
.loader__brand {
    display: grid;
    gap: 0.1em;
    font-family: var(--en);
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    line-height: 1;
    color: var(--white);
}
.loader__brand span {
    display: block;
    overflow: hidden;
}
.loader__brand span:nth-child(2) {
    color: var(--brand-lt);
}
.loader__meta {
    margin-top: 1.4rem;
    font-family: var(--en);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--fg-mute);
}
.loader__count {
    position: absolute;
    right: var(--gut);
    bottom: clamp(1.5rem, 5vh, 3rem);
    font-family: var(--en);
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: rgba(159, 205, 216, 0.14);
    font-variant-numeric: tabular-nums;
}
.loader__bar {
    position: absolute;
    left: var(--gut);
    right: var(--gut);
    bottom: clamp(1.5rem, 5vh, 3rem);
    height: 2px;
    background: rgba(159, 205, 216, 0.14);
}
.loader__bar i {
    display: block;
    height: 100%;
    background: var(--brand-lt);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* 필름 그레인 — 화면에 무게와 질감을 더함 */
.grain {
    position: fixed;
    inset: -120px;
    z-index: 300;
    pointer-events: none;
    opacity: 0.38;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
    animation: grain 6s steps(6) infinite;
    mix-blend-mode: overlay;
}

.progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 210;
    width: 100%;
    height: 3px;
}
.progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand), var(--brand-lt) 70%, var(--brand-pale));
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* ==========================================================================
   05. Header & Nav
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    height: var(--head-h);
    border-bottom: 1px solid transparent;
    transition:
        transform 0.6s var(--e-out),
        background 0.5s,
        border-color 0.5s;
}
.header__inner {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    height: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gut);
}
.header_logo {
    width: 130px;
}
.header.is-solid {
    background: rgba(4, 20, 26, 0.78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--line);
}
.header.is-hidden {
    transform: translateY(-101%);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-right: auto;
}
.logo__mark {
    position: relative;
    width: 26px;
    height: 26px;
    background: var(--brand);
    clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%);
}
.logo__mark::after {
    content: "";
    position: absolute;
    inset: 34%;
    background: var(--brand-pale);
    border-radius: 50%;
}
.logo__text {
    font-family: var(--en);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}
.logo__text em {
    font-weight: 400;
    opacity: 0.55;
}

.gnb ul {
    display: flex;
    gap: clamp(1rem, 2.6vw, 2.6rem);
}
.gnb a {
    position: relative;
    display: block;
    padding: 0.5rem 0;
    font-family: var(--en);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(247, 250, 250, 0.62);
    transition: color 0.3s;
}
.gnb a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--brand-lt);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.45s var(--e-out);
}
.gnb a:hover,
.gnb a.is-current {
    color: var(--white);
}
.gnb a:hover::after,
.gnb a.is-current::after {
    transform: scaleX(1);
}

.burger {
    display: none;
    width: 46px;
    height: 46px;
    margin-right: -10px;
}
.burger span[aria-hidden] {
    display: block;
    width: 26px;
    height: 2px;
    margin: 5px auto;
    background: var(--white);
    transition: transform 0.45s var(--e-out);
}
.burger[aria-expanded="true"] span[aria-hidden]:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}
.burger[aria-expanded="true"] span[aria-hidden]:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--head-h) var(--gut) 3rem;
    background: var(--brand-deep);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s var(--e-io);
}
.mobile-menu[hidden] {
    display: none;
}
.mobile-menu.is-open {
    clip-path: inset(0 0 0 0);
}
.mobile-menu a {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding: 0.85rem 0;
    font-family: var(--en);
    font-size: clamp(1.9rem, 9vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    border-bottom: 1px solid rgba(159, 205, 216, 0.2);
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s var(--e-out),
        transform 0.7s var(--e-out);
}
.mobile-menu.is-open a {
    opacity: 1;
    transform: none;
}
.mobile-menu li:nth-child(1) a {
    transition-delay: 0.18s;
}
.mobile-menu li:nth-child(2) a {
    transition-delay: 0.24s;
}
.mobile-menu li:nth-child(3) a {
    transition-delay: 0.3s;
}
.mobile-menu li:nth-child(4) a {
    transition-delay: 0.36s;
}
.mobile-menu li:nth-child(5) a {
    transition-delay: 0.42s;
}
.mobile-menu li:nth-child(6) a {
    transition-delay: 0.48s;
}
.mobile-menu i {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--brand-pale);
}
.mobile-menu__foot {
    margin-top: 2.5rem;
    font-family: var(--en);
    font-size: var(--fs-sm);
    color: var(--brand-pale);
}

/* ==========================================================================
   06. Buttons
   ========================================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding-inline: 2.1rem;
    border: 2px solid transparent;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    transition:
        color 0.4s var(--e-out),
        border-color 0.4s,
        transform 0.5s var(--e-out);
    will-change: transform;
    border-radius: 12px;
}
/* 호버 시 색면이 아래에서 올라옴 */
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateY(101%);
    transition: transform 0.55s var(--e-io);
}
.btn:hover::after {
    transform: translateY(0);
}

.btn--fill {
    background: var(--brand);
    color: var(--white);
}
.btn--fill::after {
    background: var(--white);
}
.btn--fill:hover {
    color: var(--brand-deep);
}

.btn--line {
    border-color: var(--line-2);
    color: var(--fg);
}
.btn--line::after {
    background: var(--brand-lt);
}
.btn--line:hover {
    color: var(--ink);
    border-color: var(--brand-lt);
}

.btn--dark {
    background: var(--ink);
    color: var(--white);
}
.btn--dark::after {
    background: var(--white);
}
.btn--dark:hover {
    color: var(--ink);
}

.btn--sm {
    height: 46px;
    padding-inline: 1.35rem;
    font-size: var(--fs-xs);
}
.btn--full {
    width: 100%;
}

/* ==========================================================================
   07. Hero — 창(window)이 전체 화면으로 확장
   ========================================================================== */
.hero {
    position: relative;
    height: 260vh; /* 확장에 필요한 스크롤 여유 */
    background: var(--ink);
}
.hero__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
}

/* 확장 대상 : JS가 --hs(스케일) / --hm(마스크 반경)만 갱신.
   경계가 보이는 border-radius 대신, 중심에서 부드럽게 번지는
   radial-gradient 마스크로 테두리 없는 원형 → 전체 배경 확장을 표현.
   shape는 반드시 ellipse여야 한다 — circle로 하면 가로로 넓은 박스에서
   반경이 커질 때 위아래 변에는 먼저 닿고 좌우 변에는 늦게 닿아서, 다
   커지기 전인 중간 단계에 모서리가 각지게 잘린 알약 모양이 보인다.
   ellipse + farthest-corner(기본값)는 박스 비율에 맞춰 자라서 그 문제가 없고,
   --hm이 100%를 넘어서는 순간(완전히 펼쳐졌을 때)에만 사각 모서리가
   또렷하게 드러난다. */
.hero__window {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* 마스크 중심(50% 46%)에 실제로 밝은 글로우가 있어야 마스크가 자라는 게
       눈에 보인다 — 이 글로우가 없으면 중심부는 --brand-deep 단색이라 배경의
       --ink와 명도 차이가 거의 없어서, 마스크가 맞게 계산돼도 "경계 없이
       번지는 그라데이션"이 아니라 그냥 아무 변화 없는 것처럼 보인다. */
    background:
        radial-gradient(60% 55% at 50% 46%, var(--brand-lt) 0%, transparent 72%),
        radial-gradient(120% 90% at 70% 10%, #0a5a70 0%, transparent 56%),
        radial-gradient(90% 80% at 10% 90%, #013a4a 0%, transparent 60%), var(--brand-deep);
    -webkit-mask-image: radial-gradient(
        ellipse at 50% 46%,
        #000 var(--hm, 6%),
        transparent calc(var(--hm, 6%) + 14%)
    );
    mask-image: radial-gradient(
        ellipse at 50% 46%,
        #000 var(--hm, 6%),
        transparent calc(var(--hm, 6%) + 14%)
    );
    transform: scale(var(--hs, 0.46));
    transform-origin: 50% 46%;
    will-change: transform;
}
.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(1, 22, 28, 0.92) 0%,
            rgba(1, 22, 28, 0.1) 46%,
            rgba(1, 22, 28, 0.55) 100%
        ),
        radial-gradient(70% 60% at 50% 45%, transparent 30%, rgba(1, 22, 28, 0.6) 100%);
}
.hero__ticker {
    position: absolute;
    left: clamp(1rem, 2.5vw, 2.2rem);
    bottom: clamp(1rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--en);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--brand-pale);
    font-variant-numeric: tabular-nums;
}
.hero__ticker .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-pale);
    box-shadow: 0 0 0 0 rgba(159, 205, 216, 0.7);
    animation: ping 2.6s var(--e-out) infinite;
}
/* 창이 다 열린 뒤 드러나는 대형 레터링 */
.hero__stamp {
    position: absolute;
    right: clamp(1rem, 3vw, 3rem);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--en);
    font-size: clamp(1.6rem, 4.6vw, 4.2rem);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.03em;
    text-align: right;
    color: rgba(247, 250, 250, 0.2);
    opacity: var(--stamp, 0);
    transition: opacity 0.4s linear;
}

.hero__copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-inline: var(--gut);
    max-width: var(--max);
    margin-inline: auto;
    will-change: transform, opacity;
}
.hero__eyebrow {
    margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
    font-family: var(--en);
    font-size: var(--fs-mono);
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--brand-pale);
}
.hero__title {
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.05em;
}
.hero__title em {
    color: var(--brand-pale);
    -webkit-text-stroke: 0;
}
.hero__lead {
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    max-width: 44ch;
    font-size: var(--fs-lead);
    color: rgba(247, 250, 250, 0.74);
}
.hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.cue {
    position: absolute;
    right: var(--gut);
    bottom: clamp(2rem, 6vh, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.cue span {
    font-family: var(--en);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: rgba(247, 250, 250, 0.6);
    writing-mode: vertical-rl;
}
.cue i {
    position: relative;
    width: 2px;
    height: 70px;
    background: rgba(159, 205, 216, 0.25);
    overflow: hidden;
}
.cue i::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: var(--brand-pale);
    animation: cue 2.4s var(--e-io) infinite;
}

/* ==========================================================================
   08. Statement — 스크롤에 따라 단어가 점등
   ========================================================================== */
.statement {
    position: relative;
    height: 250vh;
    background: linear-gradient(to bottom, var(--ink), var(--ink-2) 40%, var(--ink));
}
.statement__stage {
    position: sticky;
    top: 0;
    display: grid;
    align-content: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    height: 100svh;
    padding-inline: var(--gut);
    max-width: var(--max);
    margin-inline: auto;
}
.statement__label {
    font-family: var(--en);
    font-size: var(--fs-mono);
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--brand-lt);
}
.statement__text {
    font-size: clamp(1.6rem, 4.4vw, 4rem);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.04em;
    max-width: 26ch;
}
.statement__text .w {
    color: rgba(247, 250, 250, 0.13);
    transition: color 0.28s linear;
}
.statement__text .w.on {
    color: var(--white);
}
.statement__text .w.hl.on {
    color: var(--brand-lt);
}

/* ==========================================================================
   09. Company — 지표 오도미터
   ========================================================================== */
.company {
    background: var(--ink);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 6vw, 6.5rem);
}
.split__fix {
    position: sticky;
    top: calc(var(--head-h) + clamp(1rem, 6vh, 4rem));
}

.metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 2px solid var(--line-2);
}
.metric {
    padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem) clamp(1.6rem, 3vw, 2.2rem) 0;
    border-bottom: 1px solid var(--line);
}
.metric:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: clamp(1rem, 2vw, 1.8rem);
}
.metric:nth-child(even) {
    padding-left: clamp(1rem, 2vw, 1.8rem);
}
.metric p {
    margin-top: 1rem;
    font-size: var(--fs-sm);
    color: var(--fg-dim);
}

/* 오도미터 : 숫자가 릴처럼 굴러 올라감 */
.odo {
    display: inline-flex;
    align-items: flex-start;
    font-family: var(--en);
    font-size: clamp(2.8rem, 6.4vw, 5.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}
.odo__d {
    height: 1em;
    overflow: hidden;
}
.odo__reel {
    display: block;
    transform: translateY(calc(var(--n, 0) * -1em));
    transition: transform 1.5s var(--e-out);
    transition-delay: var(--dd, 0ms);
}
.odo__reel i {
    display: block;
    height: 1em;
}
.odo__suf {
    color: var(--brand-lt);
}

.values {
    margin-top: 0;
}
.value {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0.6rem 2rem;
    padding: 1.7rem 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.4s var(--e-out);
}
.value:hover {
    background: var(--surface);
}
.value h3 {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}
.value h3 em {
    font-family: var(--en);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--brand-lt);
}
.value p {
    font-size: var(--fs-sm);
    color: var(--fg-dim);
}

/* -------------------- 사업영역 정리 (개요 미리보기) -------------------- */
.biz-index {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.biz-index__item a {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "no title arrow" "no desc arrow";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--line);
    transition:
        border-color 0.35s,
        background 0.35s;
}
.biz-index__item a:hover {
    border-color: var(--brand-lt);
    background: var(--surface);
}
.biz-index__no {
    grid-area: no;
    font-family: var(--en);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-lt);
}
.biz-index__title {
    grid-area: title;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.biz-index__desc {
    grid-area: desc;
    font-size: var(--fs-xs);
    line-height: 1.5;
    min-height: 3em;
    color: var(--fg-dim);
}
.biz-index__item i {
    grid-area: arrow;
    font-size: 1.1rem;
    color: var(--fg-mute);
    transition:
        transform 0.4s var(--e-out),
        color 0.3s;
}
.biz-index__item a:hover i {
    transform: translateX(6px);
    color: var(--brand-lt);
}

/* 연혁 — Business/Company 다크 구간 사이를 끊어주는 브랜드 컬러 블록.
   .contact와 같은 방식으로 --fg 계열 토큰을 화이트로 재정의한다. */
.history {
    --fg: var(--white);
    --fg-dim: rgba(247, 250, 250, 0.76);
    --fg-mute: rgba(247, 250, 250, 0.58);
    --line: rgba(247, 250, 250, 0.24);
    --line-2: rgba(247, 250, 250, 0.4);
    background: var(--brand);
    color: var(--white);
}

/* -------------------- 연혁 타임라인 -------------------- */
.timeline {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}
.timeline__item {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line);
}
.timeline__year {
    font-family: var(--en);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-pale);
}
.timeline__desc {
    font-size: var(--fs-sm);
    color: var(--fg-dim);
}

/* -------------------- 조직도 -------------------- */
.orgchart {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    justify-items: center;
}
.orgchart__tier {
    display: flex;
    gap: 1.2rem;
}
.orgchart__node {
    padding: 0.9rem 1.6rem;
    border: 1px solid var(--line-2);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
}
.orgchart__node--top {
    margin-bottom: 2.2rem;
}
.orgchart__tier--children {
    position: relative;
    padding-top: 2.2rem;
}
.orgchart__tier--children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1.1rem;
    background: var(--line-2);
    transform: translateX(-50%);
}
.orgchart__tier--children::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--line-2);
}
.orgchart__tier--children .orgchart__node {
    position: relative;
}
.orgchart__tier--children .orgchart__node::before {
    content: "";
    position: absolute;
    top: -1.1rem;
    left: 50%;
    width: 1px;
    height: 1.1rem;
    background: var(--line-2);
    transform: translateX(-50%);
}

/* -------------------- 조직장 소개 -------------------- */
.leaders {
    margin: clamp(2.5rem, 5vw, 4rem) 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.leader {
    padding: 1.8rem 1.4rem;
    text-align: center;
    border: 1px solid var(--line);
    transition:
        border-color 0.35s,
        background 0.35s;
}
.leader:hover {
    /* border-color: var(--brand-lt);
    background: var(--surface); */
}
.leader__avatar {
    display: grid;
    place-content: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    font-family: var(--en);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.leader__role {
    font-weight: 700;
    letter-spacing: -0.02em;
}
.leader__note {
    margin-top: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--fg-mute);
}

/* ==========================================================================
   10. Business — Sticky Pin
   ========================================================================== */
.business {
    background: var(--ink);
    padding-top: var(--pad);
}
.business__intro {
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.pin {
    position: relative;
    height: 460vh;
}
.pin__stage {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100svh;
    overflow: hidden;
    border-top: 1px solid var(--line);
}

/* 배경 교차 페이드 */
.pin__bgs {
    position: absolute;
    inset: 0;
}
.pin__bg {
    /* opacity/transform은 initPin()이 스크롤 위치에 맞춰 매 프레임 인라인으로
       계산한다 — CSS transition을 쓰면 클래스가 바뀌는 "순간"부터 정해진
       시간(1.1s/2.6s) 동안 애니메이션되어, 빠르게 스크롤하면 화면이 실제
       스크롤 위치보다 한참 뒤처져서 "중간까지 비어 있다가 갑자기 나타나는"
       것처럼 보였다. 지금은 bars/ring과 같은 방식(스크롤 위치의 순수 함수)
       이라 지연이 없다. */
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.14);
}
.pin__bg.is-on {
    opacity: 1;
    transform: scale(1);
}
.pin__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(4, 20, 26, 0.95) 0%,
        rgba(4, 20, 26, 0.78) 46%,
        rgba(4, 20, 26, 0.3) 100%
    );
}
.pin__bg[data-bg="1"] {
    background:
        repeating-linear-gradient(0deg, rgba(159, 205, 216, 0.1) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(159, 205, 216, 0.1) 0 1px, transparent 1px 44px),
        radial-gradient(80% 70% at 78% 30%, #075e76, var(--brand-deep) 70%);
}
.pin__bg[data-bg="2"] {
    background:
        conic-gradient(
            from 200deg at 76% 42%,
            rgba(46, 147, 172, 0.55),
            transparent 40%,
            rgba(1, 71, 90, 0.8)
        ),
        radial-gradient(70% 70% at 70% 50%, #05485c, var(--brand-deep) 72%);
}
.pin__bg[data-bg="3"] {
    background:
        radial-gradient(circle at 68% 34%, rgba(159, 205, 216, 0.85) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 52%, rgba(159, 205, 216, 0.6) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 68%, rgba(159, 205, 216, 0.45) 0 2px, transparent 3px),
        conic-gradient(from 40deg at 74% 50%, rgba(0, 99, 124, 0.6), transparent 34%),
        radial-gradient(80% 80% at 74% 50%, #04475a, var(--brand-deep) 74%);
}
.pin__bg[data-bg="4"] {
    background:
        repeating-linear-gradient(118deg, rgba(159, 205, 216, 0.12) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(62deg, rgba(0, 99, 124, 0.3) 0 1px, transparent 1px 40px),
        radial-gradient(80% 80% at 72% 46%, #03566c, var(--brand-deep) 76%);
}

.pin__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
}

.pin__side {
    display: grid;
    gap: 2.2rem;
}
.ring {
    position: relative;
    width: 68px;
    height: 68px;
}
.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ring circle {
    fill: none;
    stroke-width: 2;
}
.ring__track {
    stroke: rgba(159, 205, 216, 0.22);
}
.ring__fill {
    stroke: var(--brand-lt);
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    transition: stroke-dashoffset 0.15s linear;
}
.ring span {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    font-family: var(--en);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.pin__index button {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.15rem 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
    color: rgba(247, 250, 250, 0.4);
    transition:
        color 0.5s var(--e-out),
        padding-left 0.5s var(--e-out);
}
.pin__index button span {
    font-family: var(--en);
    font-size: clamp(0.95rem, 1.5vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.pin__index i {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--brand-lt);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}
.pin__index button:hover {
    color: rgba(247, 250, 250, 0.72);
}
.pin__index button[aria-selected="true"] {
    color: var(--white);
    padding-left: 0.7rem;
}

.pin__panels {
    position: relative;
    min-height: 26rem;
}
.panel {
    /* opacity도 pin__bg와 같은 이유로 CSS transition을 쓰지 않는다 —
       initPin()이 스크롤 위치로 직접 계산해서 인라인으로 넣는다. */
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 1.4rem;
    opacity: 0;
    pointer-events: none;
}
.panel.is-active {
    opacity: 1;
    pointer-events: auto;
}
/* 활성 패널의 제목은 라인 마스크로 다시 올라옴.
   transform은 initPin()이 스크롤 위치로 직접 계산해서 인라인으로 넣는다 —
   pin__bg/panel opacity와 같은 이유로 CSS transition을 쓰지 않는다(안 그러면
   빠르게 스크롤할 때 텍스트가 스크롤과 무관한 고정 시간(0.9s+지연) 동안
   계속 올라오는 중이라, 배경/패널은 이미 다 바뀌었는데 글자만 뒤늦게
   "갑자기" 채워지는 것처럼 보였다). 모바일/reduced-motion 폴백에서는
   `.panel .line i{transform:none !important}`(767px 블록) /
   `.line > i{transform:none !important}`(reduced-motion 블록)가 인라인
   스타일보다 우선해서 항상 텍스트를 그대로 보여준다.
   기본값(transform:translateY(105%))은 JS가 아직 실행되기 전 첫 페인트에서만
   보인다. */
.panel .line i {
    transform: translateY(105%);
}

.panel__title {
    font-size: clamp(1.7rem, 3.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.042em;
}
.panel__title .line {
    display: block;
    overflow: hidden;
}
.panel__title .line i {
    display: block;
}
.panel__desc {
    max-width: 50ch;
    color: rgba(247, 250, 250, 0.72);
    line-height: 1.85;
}
.panel__spec {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem clamp(1.5rem, 4vw, 3.4rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}
.panel__spec li {
    display: grid;
    gap: 0.25rem;
}
.panel__spec b {
    font-family: var(--en);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--brand-pale);
}
.panel__spec span {
    font-size: var(--fs-xs);
    color: var(--fg-mute);
}

/* 사업영역 패널의 하위 서비스 2개 목록 (안전관리/품질관리/운영관리/공정제어) */
.panel__items {
    display: grid;
    gap: 1.3rem;
    max-width: 50ch;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}
.panel__items li {
    display: grid;
    gap: 0.35rem;
}
.panel__items b {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-pale);
}
.panel__items span {
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: rgba(247, 250, 250, 0.72);
}

/* ==========================================================================
   11. Technology — 가로 트랙
   ========================================================================== */
.technology {
    background: linear-gradient(to bottom, var(--ink), var(--brand-deep) 60%, var(--ink));
}
.hscroll {
    position: relative;
    height: 380vh;
}
.hscroll__stage {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2rem, 4vw, 3.2rem);
    height: 100svh;
    overflow: hidden;
}
.hscroll__head {
    position: relative;
}
.hscroll__gauge {
    display: block;
    width: min(280px, 40vw);
    height: 3px;
    margin-top: 1.8rem;
    background: var(--line);
}
.hscroll__gauge i {
    display: block;
    height: 100%;
    background: var(--brand-lt);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

.track {
    display: flex;
    justify-content: space-between;
    gap: clamp(1rem, 1.6vw, 1.6rem);
    will-change: transform;
    max-width: var(--max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gut);
}
.tcard {
    width: 100%;
    flex: 1;
    display: grid;
    align-content: start;
    gap: 1rem;
    width: clamp(17rem, 27vw, 25rem);
    padding: clamp(1.7rem, 2.6vw, 2.4rem);
    background: rgba(4, 20, 26, 0.5);
    border: 1px solid var(--line);
    transform: scale(calc(0.94 + var(--near, 0) * 0.06));
    transition:
        transform 0.5s var(--e-out),
        opacity 0.5s var(--e-out),
        background 0.4s,
        border-color 0.4s;
    will-change: transform, opacity;
}
.tcard:hover {
    background: rgba(0, 99, 124, 0.34);
    border-color: var(--brand-lt);
}
.tcard__no {
    font-family: var(--en);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--brand-pale);
}
.tcard__title {
    display: grid;
    gap: 0.4rem;
    font-family: var(--en);
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}
.tcard__title span {
    font-family: var(--kr);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--brand-pale);
}
.tcard__desc {
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: rgba(247, 250, 250, 0.68);
}
.tcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.tcard__tags li {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    font-family: var(--en);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(247, 250, 250, 0.6);
}

/* ==========================================================================
   12. Portfolio
   ========================================================================== */
.works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.6rem);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.work a {
    display: block;
}
.work__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3.1;
    overflow: hidden;
    background: var(--ink);
}
/* 패럴랙스 이동 레이어 (JS transform) */
.work__shift {
    position: absolute;
    top: -14%;
    left: 0;
    width: 100%;
    height: 128%;
    will-change: transform;
}
/* 실제 운영 시 <img>로 교체 */
.work__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition:
        transform 1s var(--e-out),
        filter 0.8s;
}
.work__img[data-img="1"] {
    background-image: linear-gradient(150deg, #04141a, #01475a 52%, #2e93ac);
}
.work__img[data-img="2"] {
    background-image: linear-gradient(150deg, #04141a, #00637c 55%, #6fb8c8);
}
.work__img[data-img="3"] {
    background-image: linear-gradient(150deg, #021016, #013d4d 50%, #4fa6bc);
}
.work__img[data-img="4"] {
    background-image: linear-gradient(150deg, #04141a, #075e76 58%, #9fcdd8);
}
.work__img[data-img="5"] {
    background-image: linear-gradient(150deg, #02121a, #01516a 54%, #3c9eb6);
}
.work__img[data-img="6"] {
    background-image: linear-gradient(150deg, #04141a, #00637c 60%, #88c6d3);
}
.work__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(233, 238, 239, 0.3) 1px, transparent 1px);
    background-size: 18px 18px;
    mix-blend-mode: overlay;
}
/* Hover : 브랜드 색면이 아래에서 덮음 */
.work__veil {
    position: absolute;
    inset: 0;
    background: var(--brand);
    opacity: 0.82;
    transform: translateY(101%);
    transition: transform 0.75s var(--e-io);
}
.work__tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    padding: 0.4rem 0.8rem;
    background: rgba(4, 20, 26, 0.6);
    border: 1px solid rgba(159, 205, 216, 0.34);
    font-family: var(--en);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--white);
}
.work__go {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    font-family: var(--en);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--white);
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.5s var(--e-out) 0.12s,
        transform 0.6s var(--e-out) 0.12s;
}
.work__client {
    display: block;
    margin-top: 1.4rem;
    font-family: var(--en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--fg-mute);
}
.work__title {
    display: block;
    margin-top: 0.55rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.5;
    transition: color 0.35s;
}
.work a:hover .work__veil {
    transform: translateY(0);
}
.work a:hover .work__go {
    opacity: 1;
    transform: none;
}
.work a:hover .work__img {
    transform: scale(1.08);
}
.work a:hover .work__title {
    color: var(--brand);
}

/* ==========================================================================
   13. News & Band
   ========================================================================== */
.news {
    /* padding-top: 0; */
}
.news-list {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.row a {
    position: relative;
    display: grid;
    grid-template-columns: 8rem 6rem 1fr;
    align-items: center;
    gap: 1.6rem;
    padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
    border-bottom: 1px solid var(--line);
    transition:
        padding-left 0.55s var(--e-out),
        color 0.4s;
}
/* hover 시 밑줄이 브랜드 색으로 굵어짐 */
.row a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.7s var(--e-io);
}
.row a:hover {
    padding-left: 1.2rem;
}
.row a:hover::before {
    transform: scaleX(1);
}
.row time {
    font-family: var(--en);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg-mute);
    font-variant-numeric: tabular-nums;
}
.row__cat {
    justify-self: start;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line-2);
    font-family: var(--en);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}
.row__title {
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* 스크롤 속도에 반응하는 띠 */
.band {
    padding-block: clamp(1.2rem, 2.6vw, 2rem);
    background: var(--brand);
    overflow: hidden;
}
.band__track {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    width: max-content;
    will-change: transform;
}
.band__track span {
    font-family: var(--en);
    font-size: clamp(1.1rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--white);
    white-space: nowrap;
}
.band__track i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(4, 20, 26, 0.45);
    flex: 0 0 auto;
}

/* ==========================================================================
   14. Contact — 브랜드 단색 블록
   ========================================================================== */
.contact {
    --fg: var(--white);
    --fg-dim: rgba(247, 250, 250, 0.76);
    --fg-mute: rgba(247, 250, 250, 0.58);
    --line: rgba(247, 250, 250, 0.24);
    --line-2: rgba(247, 250, 250, 0.4);
    background: var(--brand);
    color: var(--white);
}
.contact .mark {
    color: var(--white);
}
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(2.5rem, 6vw, 6rem);
}
.contact__info {
    display: grid;
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 2.2rem;
    border-top: 2px solid var(--line-2);
}
.contact__info dt {
    font-size: var(--fs-xs);
    color: var(--fg-mute);
}
.contact__info dd {
    margin: 0.4rem 0 0;
    font-family: var(--en);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.contact__info a {
    transition: opacity 0.3s;
}
.contact__info a:hover {
    opacity: 0.68;
}

.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    align-content: start;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    background: rgba(4, 20, 26, 0.22);
    border: 1px solid var(--line);
}
.field {
    display: grid;
    gap: 0.5rem;
}
.field--full {
    grid-column: 1 / -1;
}
.field label {
    font-size: var(--fs-xs);
    color: var(--fg-dim);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.95rem 1.1rem;
    background: rgba(4, 20, 26, 0.34);
    border: 1px solid var(--line);
    color: var(--white);
    font-family: var(--kr);
    font-size: var(--fs-sm);
    appearance: none;
    transition:
        border-color 0.3s,
        background 0.3s;
}
.field textarea {
    min-height: 7.5rem;
    resize: vertical;
    line-height: 1.7;
}
.field select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--white) 50%),
        linear-gradient(135deg, var(--white) 50%, transparent 50%);
    background-position:
        calc(100% - 21px) 50%,
        calc(100% - 15px) 50%;
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
}
.field input::placeholder,
.field textarea::placeholder {
    color: rgba(247, 250, 250, 0.45);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--white);
    background: rgba(4, 20, 26, 0.48);
}
.field.has-error input,
.field.has-error textarea {
    border-color: #ffc9c9;
}
.form__status {
    grid-column: 1 / -1;
    min-height: 1.2rem;
    font-size: var(--fs-xs);
    color: var(--white);
}
.form__status.is-error {
    color: #ffd9d9;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */
.footer {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem;
    background: var(--ink);
    overflow: hidden;
}
.footer__big {
    font-family: var(--en);
    font-size: clamp(2.2rem, 11.4vw, 11rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.055em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(159, 205, 216, 0.3);
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
}
.footer__big .line {
    display: block;
    overflow: hidden;
}
.footer__big .line i {
    display: block;
    transform: translateY(102%);
    transition: transform 1.2s var(--e-out);
}
.footer.is-in .footer__big .line i {
    transform: none;
}

.footer__mid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__slogan,
.footer__nav > div,
.footer__bot {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 1s var(--e-out),
        transform 1s var(--e-out);
}
.footer.is-in .footer__slogan {
    opacity: 1;
    transform: none;
    transition-delay: 0.22s;
}
.footer.is-in .footer__nav > div:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 0.32s;
}
.footer.is-in .footer__nav > div:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 0.4s;
}
.footer.is-in .footer__bot {
    opacity: 1;
    transform: none;
    transition-delay: 0.5s;
}

.footer__slogan {
    font-family: var(--en);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.04em;
}
.footer__slogan em {
    color: var(--brand-lt);
}

.footer__nav {
    display: flex;
    gap: clamp(2rem, 5vw, 4.5rem);
}
.footer__nav > div > p {
    margin-bottom: 1.1rem;
    font-family: var(--en);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--brand-lt);
}
.footer__nav ul {
    display: grid;
    gap: 0.7rem;
}
.footer__nav a {
    font-size: var(--fs-sm);
    color: var(--fg-dim);
    transition: color 0.3s;
}
.footer__nav a:hover {
    color: var(--white);
}

.footer__bot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2.2rem;
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    line-height: 1.85;
    color: var(--fg-mute);
}
.footer__copy {
    font-family: var(--en);
    letter-spacing: 0.04em;
}

.totop {
    position: fixed;
    right: clamp(1rem, 2.5vw, 2rem);
    bottom: clamp(1rem, 2.5vw, 2rem);
    z-index: 180;
    display: grid;
    place-content: center;
    width: 52px;
    height: 52px;
    background: var(--brand);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition:
        opacity 0.4s var(--e-out),
        transform 0.4s var(--e-out),
        visibility 0.4s,
        background 0.3s;

    border-radius: 50%;
}
.totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.totop:hover {
    background: var(--white);
    color: var(--brand);
}

/* ==========================================================================
   16. Motion
   ========================================================================== */
/* 라인 마스크 등장 */
.line {
    display: block;
    overflow: hidden;
}
.line > i {
    display: inline-block;
    transform: translateY(108%);
    transition: transform 1.15s var(--e-out);
    transition-delay: var(--d, 0s);
}
.is-ready .hero .line > i {
    transform: none;
}

[data-fade] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 1s var(--e-out),
        transform 1s var(--e-out);
    transition-delay: var(--d, 0s);
}
.is-ready [data-fade] {
    opacity: 1;
    transform: none;
}

/* 스크롤 진입 리빌 */
.reveal {
    opacity: 0;
    transform: translateY(42px);
    transition:
        opacity 1.05s var(--e-out),
        transform 1.05s var(--e-out);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
}
.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* 스크롤 속도에 따른 미세 기울기 */
[data-skew] {
    will-change: transform;
}

@keyframes ping {
    0% {
        box-shadow: 0 0 0 0 rgba(159, 205, 216, 0.55);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(159, 205, 216, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(159, 205, 216, 0);
    }
}
@keyframes cue {
    0% {
        transform: translateY(-110%);
    }
    100% {
        transform: translateY(240%);
    }
}
@keyframes grain {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-6%, 4%);
    }
    40% {
        transform: translate(4%, -6%);
    }
    60% {
        transform: translate(-4%, -4%);
    }
    80% {
        transform: translate(6%, 6%);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    :root {
        --head-h: 72px;
    }
    .gnb,
    .header__cta {
        display: none;
    }
    .burger {
        display: grid;
        place-content: center;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }
    .split__fix {
        position: static;
    }
    .head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pin {
        height: 420vh;
    }
    .pin__grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
    .pin__side {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1.5rem;
    }
    .pin__panels {
        min-height: 22rem;
    }

    .works {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact__grid {
        grid-template-columns: 1fr;
    }
    .footer__mid {
        grid-template-columns: 1fr;
    }

    .biz-index {
        grid-template-columns: 1fr;
    }
    .leaders {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    :root {
        --pad: clamp(4.5rem, 11vh, 7rem);
    }

    .leaders {
        grid-template-columns: 1fr;
    }
    .orgchart__tier {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 히어로 : 확장 폭을 줄이고 스크롤 길이 단축 */
    .hero {
        height: 200vh;
    }
    .hero__title {
        line-height: 1.06;
    }
    .hero__lead {
        font-size: 1rem;
    }
    .hero__btns .btn {
        flex: 1 1 auto;
    }
    .hero__stamp {
        display: none;
    }
    .cue {
        display: none;
    }

    .statement {
        height: 210vh;
    }
    .statement__text {
        max-width: none;
    }

    .metrics {
        grid-template-columns: 1fr;
    }
    .metric,
    .metric:nth-child(odd),
    .metric:nth-child(even) {
        padding: 1.5rem 0;
        border-right: 0;
    }
    .value {
        grid-template-columns: 1fr;
    }

    /* Pin 해제 → 세로 스택 */
    .pin {
        height: auto;
    }
    .pin__stage {
        position: static;
        height: auto;
        display: block;
        padding-block: 2.5rem 0;
    }
    .pin__bgs {
        display: none;
    }
    .pin__side {
        display: none;
    }
    .pin__panels {
        min-height: 0;
        display: grid;
        gap: 2.8rem;
    }
    .panel {
        position: static;
        opacity: 1;
        pointer-events: auto;
        padding-bottom: 2.5rem;
        border-bottom: 1px solid var(--line);
    }
    .panel .line i {
        transform: none !important;
    }

    /* 가로 트랙 해제 → 네이티브 스와이프 */
    .technology {
        padding-block: var(--pad);
    }
    .hscroll {
        height: auto;
    }
    .hscroll__stage {
        position: static;
        height: auto;
        display: grid;
        gap: 2rem;
        overflow: visible;
    }
    .track {
        transform: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-direction: column;
    }
    .track::-webkit-scrollbar {
        display: none;
    }
    .tcard {
        width: 80vw;
        scroll-snap-align: center;
        transform: none;
        opacity: 1;
    }

    .works {
        grid-template-columns: 1fr;
    }
    .work__shift {
        transform: none !important;
    }

    .row a {
        grid-template-columns: auto 1fr;
        grid-template-areas: "date cat" "title title";
        gap: 0.6rem 1rem;
    }
    .row time {
        grid-area: date;
    }
    .row__cat {
        grid-area: cat;
    }
    .row__title {
        grid-area: title;
    }

    .form {
        grid-template-columns: 1fr;
    }
    .footer__bot {
        flex-direction: column;
    }
}

/* ==========================================================================
   18. A11y
   ========================================================================== */
:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--brand-lt);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .loader {
        display: none;
    }
    .grain {
        display: none;
    }
    .reveal,
    [data-fade],
    .footer__slogan,
    .footer__nav > div,
    .footer__bot {
        opacity: 1 !important;
        transform: none !important;
    }
    .line > i {
        transform: none !important;
    }
    .hero {
        height: 100svh;
    }
    .hero__window {
        --hs: 1;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .work__shift,
    .track,
    .band__track {
        transform: none !important;
    }
    .statement {
        height: auto;
    }
    .statement__stage {
        height: auto;
        padding-block: var(--pad);
    }
    .statement__text .w {
        color: var(--white);
    }
    .pin__bg {
        opacity: 1;
    }

    /* Business(Pin) — 767px 모바일 폴백과 동일한 정적 스택 레이아웃을
       뷰포트 폭과 무관하게 적용 (스크럽이 꺼지면 sticky/절대배치로는
       패널 2~4가 영영 가려지므로) */
    .pin {
        height: auto;
    }
    .pin__stage {
        position: static;
        height: auto;
        display: block;
        padding-block: 2.5rem 0;
    }
    .pin__bgs,
    .pin__side {
        display: none;
    }
    .pin__grid {
        grid-template-columns: 1fr;
    }
    .pin__panels {
        min-height: 0;
        display: grid;
        gap: 2.8rem;
    }
    .panel {
        position: static;
        opacity: 1;
        pointer-events: auto;
        padding-bottom: 2.5rem;
        border-bottom: 1px solid var(--line);
    }

    /* Technology(HScroll) — 같은 이유로 네이티브 가로 스와이프로 전환 */
    .technology {
        padding-block: var(--pad);
    }
    .hscroll {
        height: auto;
    }
    .hscroll__stage {
        position: static;
        height: auto;
        display: grid;
        gap: 2rem;
        overflow: visible;
    }
    .track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .track::-webkit-scrollbar {
        display: none;
    }
    .tcard {
        scroll-snap-align: center;
        opacity: 1;
    }
}