/* ==========================================================================
   회사소개 (miracle/introdution.php · assets/js/sx/about.js) — "글자가 창이 되는 MIRACLE"
   ========================================================================== */
.sub--about { --accent: var(--y); }

/* ---------- Hero: 검은 벽에 뚫린 MIRACLE — 글자는 창이고 사진은 그 뒤의 방 ----------
   마우스: 벽(글자)과 방(사진)이 서로 다르게 움직여 깊이가 드러남 / 스크롤: 'I' 획 안으로 걸어 들어감 (about.js) */
.ab-hero { position: relative; height: 240vh; background: var(--k); color: var(--on-dark); }
html:not(.sx-motion) .ab-hero { height: auto; }
.ab-hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.ab-hero__room { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--k2); }
.ab-hero__room img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) scale(var(--rs, 1.12)); filter: brightness(var(--rb, .78)) saturate(.92); will-change: transform; }
.ab-hero__wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.ab-hero__face { fill: var(--k); }
.ab-hero__word { font-family: var(--f-display); font-weight: 800; }
.ab-hero__word { fill: #000; transition: fill 1.8s var(--ease) .25s; }                 /* 마스크: 검정 = 뚫린 곳 */
.sx-motion .ab-hero:not(.is-in) .ab-hero__word { fill: #fff; }                        /* 빛이 걷히면 벽에 글자 모양 구멍이 서서히 열림 */
.ab-hero__sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(5, 5, 5, .55), transparent 24%, transparent 66%, rgba(5, 5, 5, .7)); opacity: var(--hud, 1); }
.ab-hero__marks { position: absolute; inset: calc(var(--hd-h) + 10px) max(16px, var(--gutter) - 24px) 18px; z-index: 1; pointer-events: none; opacity: var(--hud, 1); }
.ab-hero__marks i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--w-mid); }
.ab-hero__marks i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.ab-hero__marks i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.ab-hero__marks i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.ab-hero__marks i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.ab-hero__top, .ab-hero__foot { position: absolute; left: 0; right: 0; z-index: 1; opacity: var(--hud, 1); }
.ab-hero__top { top: calc(var(--hd-h) + 32px); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ab-hero__meta { display: flex; gap: 28px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-2); }
.ab-hero__meta span + span::before { content: ""; display: inline-block; width: 24px; height: 1px; margin: 0 14px 3px 0; vertical-align: middle; background: var(--w-mid); }
.ab-hero__foot { bottom: clamp(36px, 6vh, 64px); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.ab-hero__h1 { display: grid; gap: 12px; font-family: var(--f-display); font-size: max(var(--fs-xl), min(var(--fs-2xl), (100vw - 960px) * 999), min(var(--fs-3xl), (100vw - 1440px) * 999)); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.ab-hero__h1 small { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); }
.ab-hero__h1 small::before { content: ""; width: 8px; height: 8px; background: var(--y); }
.ab-hero__side { display: grid; gap: 20px; max-width: 360px; }
.ab-hero__lead { font-size: var(--fs-sm); line-height: 1.75; color: var(--on-dark-2); }
.ab-hero__cue { display: flex; align-items: center; gap: 14px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-hero__cue i { position: relative; width: 96px; height: 1px; background: var(--w-line); overflow: hidden; }
.ab-hero__cue b { position: absolute; inset: 0; background: var(--y); transform-origin: 0 50%; transform: scaleX(var(--cue, 0)); }
.sx-motion .ab-hero:not(.is-cue) .ab-hero__cue b { animation: ab-cue 2.4s var(--ease) infinite; }
@keyframes ab-cue { 0% { transform: translateX(-100%) scaleX(1); } 100% { transform: translateX(100%) scaleX(1); } }
html:not(.sx-motion) .ab-hero__sticky { position: relative; }
html:not(.sx-motion) .ab-hero__cue { display: none; }

/* ---------- We are Miracle (밝은 면): 읽는 만큼 단어가 진해지고, 문장 사이 사진 칩이 열림 ---------- */
.ab-intro { padding: round(clamp(110px, 12vw, 200px), 4px) 0 round(clamp(100px, 10vw, 160px), 4px); }
.ab-intro__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 20px; margin-bottom: round(clamp(48px, 6vw, 96px), 4px); border-bottom: 1px solid var(--line); }
.ab-intro__head .eyebrow { margin: 0; }
.ab-intro__idx { display: flex; align-items: center; gap: 12px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); }
.ab-intro__idx i { width: 40px; height: 1px; background: currentColor; opacity: .5; }
.ab-intro__text { max-width: 1240px; font-family: var(--f-display); font-size: max(var(--fs-xl), min(var(--fs-3xl), (100vw - 640px) * 999), min(var(--fs-4xl), (100vw - 960px) * 999), min(var(--fs-5xl), (100vw - 1280px) * 999), min(var(--fs-6xl), (100vw - 1680px) * 999)); font-weight: 600; line-height: 1.32; letter-spacing: -.045em; text-wrap: pretty; }
.ab-intro__text .w { color: rgba(5, 5, 5, .14); transition: color .7s var(--ease); }
.ab-intro__text .w.is-on { color: var(--fg); }
.ab-chip { display: inline-block; width: 0; height: .74em; margin: 0 -.13em; vertical-align: -.06em; overflow: hidden; background: var(--paper2); transition: width 1s var(--ease), margin 1s var(--ease); }
.ab-chip img { width: 1.9em; max-width: none; height: 100%; object-fit: cover; transform: scale(1.3); transition: transform 1.4s var(--ease); }
.ab-chip.is-on { width: 1.9em; margin: 0 .06em; }
.ab-chip.is-on img { transform: none; }
html:not(.sx-motion) .ab-intro__text .w { color: var(--fg); }
html:not(.sx-motion) .ab-chip { width: 1.9em; margin: 0 .06em; }
/* 숫자 */
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin-top: round(clamp(80px, 9vw, 140px), 4px); }
.ab-stats li { position: relative; display: grid; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.ab-stats li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease) calc(var(--d, 0s) + .2s); }
.ab-stats li.in::before { transform: none; }
.ab-stats__no { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .2em; color: var(--fg-2); }
.ab-stats__n { display: flex; align-items: baseline; gap: 6px; margin-top: round(clamp(28px, 3vw, 48px), 4px); font-family: var(--f-display); font-size: max(var(--fs-5xl), min(var(--fs-6xl), (100vw - 1280px) * 999), min(var(--fs-8xl), (100vw - 1600px) * 999)); font-weight: 700; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ab-stats__n i { font-family: var(--f-sans); font-style: normal; font-size: var(--fs-md); font-weight: 700; letter-spacing: -.02em; }
.ab-stats__l { margin-top: 14px; font-size: var(--fs-sm); color: var(--fg-2); }

/* ---------- One Team: 트라이비전 간판 — 세로 판 6장, 앞면은 분야마다 자기 장면 / 판이 돌면 뒷면끼리 맞물려 한 장 ---------- */
.ab-team { position: relative; background: var(--k); color: var(--on-dark); }
.ab-team__sticky { display: flex; flex-direction: column; justify-content: center; gap: round(clamp(28px, 4.4vh, 56px), 4px); padding: 120px 0; }
.sx-motion .ab-team { height: 330vh; }
.sx-motion .ab-team__sticky { position: sticky; top: 0; height: 100vh; min-height: 700px; overflow: hidden; padding: calc(var(--hd-h) + 24px) 0 32px; }
.ab-team__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.ab-team__head .h2 { margin: 0; }
.ab-team__aside { display: grid; gap: 22px; max-width: 400px; }
.ab-team__lead { font-size: var(--fs-sm); line-height: 1.8; color: var(--on-dark-2); }
.ab-team__meter { display: flex; align-items: center; gap: 14px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .2em; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.ab-team__meter b:first-child { color: var(--on-dark); }
.ab-team__meter i { position: relative; flex: 1; height: 1px; background: var(--w-line); }
.ab-team__meter em { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--y); }
.ab-team__view { perspective: 2000px; }
.ab-team__row { --sw: 200px; display: flex; height: min(50vh, 31vw); transform-style: preserve-3d; will-change: transform; }
.ab-slat { --t: 0; position: relative; flex: 1; transform-style: preserve-3d; transform: translateZ(calc(var(--sw) / -2)) rotateY(calc(var(--t) * -90deg)); }
.ab-slat > span { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ab-slat__a { transform: translateZ(calc(var(--sw) / 2)); background: var(--k3) var(--own) 50% / cover no-repeat; filter: brightness(calc(.86 - var(--t) * .6)); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(244, 242, 236, .06); }
.ab-slat__a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.ab-slat__a b { position: absolute; left: 14px; top: 12px; z-index: 1; font-family: var(--f-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--on-dark); }
.ab-slat__b { transform: rotateY(90deg) translateZ(calc(var(--sw) / 2)); background: var(--k3) var(--img) calc(var(--i) * 100% / (var(--cols) - 1)) 50% / calc(var(--cols) * 100%) auto no-repeat; filter: brightness(calc(.35 + var(--t) * .65)); }
.ab-team__row:not(.is-one) .ab-slat__b { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .5); }
.ab-team__roles { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 14px; }
.ab-team__roles li { --t: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 12px 12px 0 0; border-top: 1px solid color-mix(in srgb, var(--y) calc(var(--t) * 100%), var(--w-line)); font-size: var(--fs-sm); font-weight: 700; }
.ab-team__roles b { font-size: var(--fs-2xs); color: var(--y); }
.ab-team__roles small { grid-column: 2; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-team__one { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-3); opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s var(--ease); }
.ab-team__one span:first-child { color: var(--y); }
.ab-team__one i { flex: 1; height: 1px; background: var(--w-line); }
.ab-team.is-one .ab-team__one { opacity: 1; transform: none; }
html:not(.sx-motion) .ab-team__one { opacity: 1; transform: none; }


/* ---------- 서비스: 병풍처럼 지그재그로 접힌 6폭 — 펼쳐진 폭만 정면 ---------- */
.ab-svc { position: relative; background: var(--k); color: var(--on-dark); --accent: var(--y); }
.ab-svc__sticky { position: relative; padding: 120px 0; }
.ab-svc__head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ab-svc__head .sx-head { margin: 0; }
.ab-svc__count { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.ab-svc__count b { font-family: var(--f-display); font-size: var(--fs-5xl); letter-spacing: -.04em; color: var(--y); }
.ab-svc__box { position: relative; }
.ab-fold { position: relative; transform-style: preserve-3d; }
.ab-fold__face { position: relative; display: block; overflow: hidden; background: var(--k2); color: var(--on-dark); }
.ab-fold__face img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s, transform 1.2s var(--ease); }
.ab-fold__shade { position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .92)); pointer-events: none; }
.ab-fold__spine { position: absolute; left: 50%; top: 28px; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translateX(-50%); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; writing-mode: vertical-rl; white-space: nowrap; pointer-events: none; }
.ab-fold__spine b { writing-mode: horizontal-tb; color: var(--y); letter-spacing: .06em; }
.ab-fold__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 12px; padding: clamp(28px, 3vw, 48px); pointer-events: none; }
.ab-fold__no { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--y); }
.ab-fold__t { font-family: var(--f-display); font-size: max(var(--fs-3xl), min(var(--fs-4xl), (100vw - 1280px) * 999), min(var(--fs-5xl), (100vw - 1600px) * 999)); font-weight: 800; line-height: 1.1; letter-spacing: -.05em; }
.ab-fold__desc { max-width: 460px; font-size: var(--fs-sm); line-height: 1.7; color: var(--on-dark-2); }
.ab-fold__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--y); }
.ab-fold__more i { font-style: normal; transition: transform .4s var(--ease); }
.ab-fold__face:hover .ab-fold__more i { transform: translateX(6px); }
/* 모션: 고정된 화면에서 병풍 — 폭마다 앞 폭의 오른쪽 끝을 경첩으로 접힘 (JS가 --act·폭·각도를 정함) */
.sx-motion .ab-svc { height: calc(var(--n) * 80vh + 100vh); }
.sx-motion .ab-svc__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; padding: calc(var(--hd-h) + 24px) 0 0; }
.sx-motion .ab-svc__box { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 54%; }
.sx-motion .ab-svc__chain { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.sx-motion .ab-fold { --act: 0; position: absolute; left: 100%; top: 0; width: var(--w, 120px); height: var(--h, 560px); transform-origin: 0 50%; will-change: transform, width; }
.sx-motion .ab-svc__chain > .ab-fold { left: 0; top: calc(var(--h, 560px) / -2); }
.sx-motion .ab-fold__face { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--w-line); }
.sx-motion .ab-fold__face img { filter: grayscale(calc(1 - var(--act))) brightness(calc(.4 + var(--act) * .55)); transform: scale(calc(1.15 - var(--act) * .15)); transition: none; }
.sx-motion .ab-fold__spine { opacity: calc(1 - var(--act) * 1.6); }
.sx-motion .ab-fold__body { opacity: clamp(0, var(--act) * 2.2 - 1.2, 1); transform: translateY(calc((1 - var(--act)) * 30px)); min-width: min(620px, 44vw); }
.sx-motion .ab-fold__shade { opacity: calc(.35 + var(--act) * .65); }
.sx-motion .ab-fold.is-on > .ab-fold__face { box-shadow: inset 0 0 0 1px var(--y-a3), 0 40px 120px -30px rgba(255, 225, 77, .3); }
.sx-motion .ab-fold.is-on > .ab-fold__face .ab-fold__body { pointer-events: auto; }
.ab-svc__dots { position: absolute; left: 0; right: 0; bottom: calc(clamp(24px, 4vh, 40px) + var(--dock-space, 0px)); z-index: 2; display: flex; justify-content: center; gap: 4px; }
.ab-svc__dots button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; color: var(--on-dark-3); transition: color .3s; cursor: pointer; }
.ab-svc__dots b { color: inherit; }
.ab-svc__dots li.is-on button { color: var(--y); }
.ab-svc__dots li.is-on span { color: var(--on-dark); }
/* 모션 없음: 세로로 쌓인 카드 */
html:not(.sx-motion) .ab-svc__box { display: grid; gap: 16px; margin-top: 48px; padding: 0 var(--gutter); }
html:not(.sx-motion) .ab-fold, html:not(.sx-motion) .ab-svc__chain { display: contents; }
html:not(.sx-motion) .ab-fold__face { aspect-ratio: 16 / 9; max-width: var(--wrap); width: 100%; margin: 0 auto; }
html:not(.sx-motion) .ab-fold__spine, html:not(.sx-motion) .ab-svc__dots, html:not(.sx-motion) .ab-svc__count { display: none; }

/* ---------- Miracle History: 왼쪽에 고정된 연도(끝 두 자리가 굴러 바뀜) + 오른쪽 기록 — 기록에 올리면 자료가 커서 곁에 떠오름 ---------- */
.ab-hist { position: relative; padding: round(clamp(120px, 12vw, 200px), 4px) 0; background: var(--k); color: var(--on-dark); border-top: 1px solid var(--w-faint); }
.ab-hist__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 round(clamp(40px, 6vw, 120px), 4px); }
.ab-hist__pin { position: sticky; top: calc(var(--hd-h) + 40px); }
.ab-hist__pin .h2 { margin: 0; }
.ab-hist__year { display: flex; margin: round(clamp(40px, 5vh, 64px), 4px) 0 0; font-family: var(--f-display); font-size: max(var(--fs-9xl), min(var(--fs-11xl), (100vw - 1280px) * 999), min(var(--fs-12xl), (100vw - 1680px) * 999)); font-weight: 800; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.ab-hist__year > span:first-child { color: var(--k4); }
.ab-roll { display: block; height: 1em; overflow: hidden; }
.ab-roll { color: var(--y); -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
.ab-roll > span { display: block; will-change: transform; }   /* 연도 끝 두 자리를 통째로 쌓아 둔 띠 — 스크롤 위치에 붙어 움직임 (about.js) → 빨리 넘겨도 늘 실제 연도만 보임 */
.ab-roll i { display: block; height: 1em; font-style: normal; }
.ab-hist__sum { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; padding-bottom: 28px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-hist__sum b { font-family: var(--f-display); font-size: var(--fs-xl); letter-spacing: -.02em; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.ab-hist__index { display: grid; max-width: 360px; border-top: 1px solid var(--w-line); }
.ab-hist__index button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 9px 0; border-bottom: 1px solid var(--w-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--on-dark-3); font-variant-numeric: tabular-nums; cursor: pointer; transition: color .4s; }
.ab-hist__index i { position: relative; height: 1px; }
.ab-hist__index i::after { content: ""; position: absolute; inset: 0; background: var(--y); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease); }
.ab-hist__index small { font-size: var(--fs-2xs); letter-spacing: .14em; }
.ab-hist__index button:hover { color: var(--on-dark); }
.ab-hist__index li.is-on button { color: var(--on-dark); }
.ab-hist__index li.is-on i::after { transform: none; }
.ab-year + .ab-year { margin-top: round(clamp(56px, 6vw, 96px), 4px); }
.ab-year__h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--w-mid); font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; color: var(--y); font-variant-numeric: tabular-nums; }
.ab-rec__btn { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 52px; align-items: center; gap: 24px; width: 100%; padding: 22px 0; border-bottom: 1px solid var(--w-line); text-align: left; color: inherit; cursor: pointer; isolation: isolate; }
.ab-rec__btn::before { content: ""; position: absolute; inset: 0 -16px; z-index: -1; background: var(--w-faint); opacity: 0; transition: opacity .4s; }
.ab-rec__btn::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--y); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease); }
.ab-rec__m { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.ab-rec__m small { margin-left: 2px; font-family: var(--f-sans); font-size: var(--fs-2xs); font-weight: 700; color: var(--on-dark-3); }
.ab-rec__t { display: grid; gap: 6px; transition: transform .5s var(--ease); }
.ab-rec__t b { font-size: max(var(--fs-md), min(var(--fs-lg), (100vw - 1280px) * 999)); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; transition: color .3s; }
.ab-rec__t em { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-2); }
.ab-rec__doc { justify-self: end; width: 52px; padding: 3px; background: var(--white); box-shadow: var(--sh-sm); transition: opacity .4s, transform .5s var(--ease); }
.ab-rec__doc img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.ab-rec__doc.is-logo img { padding: 4px; }   /* 증빙 사진 대신 가로로 긴 로고(2026~) → 가장자리에 붙지 않게 */
.ab-rec__btn:hover::before, .ab-rec__btn:focus-visible::before { opacity: 1; }
.ab-rec__btn:hover::after, .ab-rec__btn:focus-visible::after { transform: none; }
.ab-rec__btn:hover .ab-rec__t { transform: translateX(8px); }
.ab-rec__btn:hover .ab-rec__t b { color: var(--y); }
.ab-rec__btn:hover .ab-rec__m { color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) { .ab-rec__btn:hover .ab-rec__doc { opacity: 0; transform: scale(.8); } }
/* 커서 곁에 떠오르는 자료 (about.js — 움직이는 방향으로 기울어짐) */
.ab-hist__index { transition: opacity .35s; }
.ab-hist.is-peek .ab-hist__index { opacity: .08; }
.ab-peek { position: fixed; left: 0; top: 0; z-index: var(--z-float); width: clamp(160px, 14vw, 220px); transform-origin: 0 0; margin: 0; padding: 10px; background: var(--white); box-shadow: var(--sh-xl); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.ab-peek.is-on { opacity: 1; visibility: visible; transition: opacity .35s; }
.ab-peek img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }


/* ---------- 지적재산권: 한 장 → 13장 겹침 → 부채 ---------- */
.ab-ip { position: relative; background: var(--k2); color: var(--on-dark); --accent: var(--y); }
.ab-ip__sticky { padding: 120px 0; }
.ab-ip__head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.ab-ip__head .sx-head { margin-bottom: 0; }
.ab-ip__count { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--on-dark-2); white-space: nowrap; }
.ab-ip__count b { font-family: var(--f-display); font-size: var(--fs-5xl); line-height: 1; color: var(--y); font-variant-numeric: tabular-nums; }
.ab-ip__count em { font-style: normal; font-weight: 700; color: var(--on-dark); }
.ab-ip__box { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 48px var(--gutter) 0; }
.ab-ip__stage { display: contents; }
.ab-ip__sheet { display: block; width: 150px; }
.ab-ip__paper { position: relative; display: block; padding: 8px; background: var(--white); box-shadow: var(--sh-lg); transition: transform .5s var(--ease); }
.ab-ip__paper img { width: 100%; aspect-ratio: 422 / 574; object-fit: contain; }

.sx-motion .ab-ip { height: 360vh; }
.sx-motion .ab-ip__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: calc(var(--hd-h) + 24px) 0 0; }
.sx-motion .ab-ip__box { position: absolute; inset: 0; display: block; padding: 0; perspective: 1700px; perspective-origin: 50% 46%; }
.sx-motion .ab-ip__stage { position: absolute; left: 50%; top: 58%; display: block; width: 0; height: 0; transform-style: preserve-3d; }
.sx-motion .ab-ip__sheet { --w: clamp(180px, 17vw, 280px); position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -.68); width: var(--w); transform-style: preserve-3d; will-change: transform; }
.sx-motion .ab-ip__sheet:hover .ab-ip__paper { transform: translateY(-28px) scale(1.04); }

/* ---------- 조직도: 위에서 본 고리 → 옆에서 본 조직도 ---------- */
.ab-org { position: relative; background: var(--k); color: var(--on-dark); --accent: var(--y); }
.ab-org__sticky { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.ab-org__head { position: absolute; left: 0; right: 0; top: calc(var(--hd-h) + 24px); z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; pointer-events: none; }
.ab-org__head .sx-head { margin: 0; }
.ab-org__mode { display: flex; align-items: center; gap: 12px; padding-top: 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-org__mode span:first-child { color: var(--y); }
.ab-org__mode i { width: 48px; height: 1px; background: var(--w-mid); }
.ab-org__view { position: absolute; inset: 0; }
.ab-org__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-org__ring { fill: none; stroke: var(--y-a2); stroke-width: 1; }
.ab-org__svg line { stroke: var(--w-mid); stroke-width: 1; }
.ab-org__svg line.is-trunk { stroke: var(--y); stroke-width: 1.5; }
.ab-org__node { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; padding: 12px 18px; border: 1px solid var(--w-mid); background: var(--k2); text-align: center; white-space: nowrap; will-change: transform; }
.ab-org__node small { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-org__node b { font-size: var(--fs-md); }
.ab-org__node.is-ceo { padding: 16px 32px; border-color: var(--y); background: var(--y); color: var(--k); }
.ab-org__node.is-ceo small { color: var(--k); }
.sx-motion .ab-org { height: 300vh; }
.sx-motion .ab-org__sticky { position: sticky; top: 0; }
/* 모션 없음: 평범한 목록 */
html:not(.sx-motion) .ab-org__sticky { height: auto; padding: calc(var(--hd-h) + 200px) var(--gutter) 120px; }
html:not(.sx-motion) .ab-org__view { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html:not(.sx-motion) .ab-org__node { position: static; }
html:not(.sx-motion) .ab-org__svg { display: none; }

/* ---------- 사무실: 팔각형 방 한가운데에서 둘러봄 ---------- */
.ab-room { position: relative; background: var(--k); color: var(--on-dark); --accent: var(--y); }
.ab-room__sticky { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.ab-room__stage { --fit: 1; position: absolute; left: 50%; top: 52%; width: 1600px; height: 900px; transform: translate(-50%, -50%) scale(var(--fit)); perspective: 1000px; }
.ab-room__cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.ab-room__wall { position: absolute; left: -500px; top: -330px; width: 1000px; height: 660px; margin: 0; overflow: hidden; background: var(--k2); outline: 1px solid var(--w-line); backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(-1207px); }
.ab-room__wall img { width: 100%; height: 100%; object-fit: cover; }
/* 벽 어둡기: filter: brightness(b) 대신 검은 덮개 불투명도 1 − b (filter를 매 프레임 바꾸면 벽 사진을 매번 다시 그림) */
.ab-room__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
.ab-room__floor { position: absolute; left: -1500px; top: -1500px; width: 3000px; height: 3000px; transform: translateY(330px) rotateX(90deg); border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 238px, var(--w-line) 238px 240px), radial-gradient(circle, var(--k3), var(--k) 60%); }
.ab-room__sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 52%, transparent 40%, var(--b-3)), linear-gradient(var(--k) 0, transparent 26%, transparent 70%, var(--k)); }
.ab-room__head { position: absolute; left: 0; right: 0; top: calc(var(--hd-h) + 24px); z-index: 2; }
.ab-room__head .sx-head { margin: 0; }
.ab-room__foot { position: absolute; left: 0; right: 0; bottom: calc(clamp(28px, 5vh, 48px) + var(--dock-space, 0px)); z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ab-room__name { display: grid; gap: 4px; }
.ab-room__name small { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }
.ab-room__name b { font-family: var(--f-display); font-size: var(--fs-3xl); letter-spacing: -.04em; }
.ab-room__compass { display: flex; align-items: center; gap: 16px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.ab-room__compass i { position: relative; width: 56px; height: 56px; border: 1px solid var(--w-mid); border-radius: 50%; }
.ab-room__compass b { position: absolute; left: 50%; top: 6px; bottom: 50%; width: 2px; margin-left: -1px; background: var(--y); transform-origin: 50% 100%; }
.ab-room__list { position: absolute; right: var(--gutter); top: 50%; z-index: 2; display: grid; gap: 4px; transform: translateY(-50%); }
.ab-room__list button { padding: 4px 0; font-size: var(--fs-xs); font-weight: 600; color: var(--on-dark-3); text-align: right; transition: color .3s; }
.ab-room__list button:hover, .ab-room__list button.is-on { color: var(--y); }
.sx-motion .ab-room { height: calc(var(--n) * 55vh + 100vh); }
.sx-motion .ab-room__sticky { position: sticky; top: 0; }
html:not(.sx-motion) .ab-room__stage { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ab-hero__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ab-hero__meta span:first-child { display: none; }
  .ab-stats { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; }
  .ab-team__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ab-team__lead { display: none; }
  .ab-team__aside { width: 100%; max-width: none; }
  .ab-team__row { height: 54vw; }
  .ab-hist__in { grid-template-columns: 1fr; }
  .ab-hist__pin { position: static; margin-bottom: 40px; }
  .ab-hist__year, .ab-hist__sum, .ab-hist__index { display: none; }
  .ab-svc__count { display: none; }
  .ab-svc__dots span { display: none; }
  .ab-ip__head { flex-direction: column; align-items: flex-start; }
  .ab-ip__count { display: none; }
  .ab-room__list { display: none; }
}
@media (max-width: 760px) {
  .ab-hero__marks, .ab-hero__meta { display: none; }
  .ab-team__row { height: 72vw; }
  .ab-team__roles li { grid-template-columns: 1fr; padding-right: 4px; font-size: var(--fs-xs); }
  .ab-team__roles small { display: none; }
  .ab-slat__a b { left: 8px; top: 8px; font-size: 10px; }
  .ab-rec__btn { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 14px; padding: 18px 0; }
  .ab-rec__m { font-size: var(--fs-md); }
  .ab-rec__doc { width: 40px; }
  .sx-motion .ab-fold__body { min-width: 0; padding: 20px; }
  .ab-fold__t { font-size: var(--fs-2xl); }
  .ab-fold__desc { display: none; }
  .ab-fold__spine { font-size: 10px; letter-spacing: .16em; }
  .ab-org__node { padding: 8px 10px; }
  .ab-org__node b { font-size: var(--fs-xs); }
  .ab-org__node small { display: none; }
  .ab-org__mode { display: none; }
  .ab-svc__t { font-size: var(--fs-2xl); }
  .ab-svc__thumb { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 16px; }
}