/* ============================================================
   company-intro-v2.css — /company/intro-ownerflow-preview 전용
   V3: Apple at Work 블랙&화이트 구조 패리티 (2026-09-14 3차 지시).
   실제 Apple 페이지는 화이트/옅은 회색이 지배적이고, 특정 섹션(사례,
   보안 등)만 블랙을 쓴다 — 이 파일도 같은 원칙을 따른다(보라 브랜드
   컬러는 CTA 버튼에만 최소로 사용, 나머지는 완전 흑백/회색조).
   .of-company-story / body:has(main.of-company-story) 로만 스코프한다.
   운영 페이지·글로벌 헤더·base.css는 건드리지 않는다.
   ============================================================ */

.of-company-story {
   --ap-content: 1180px;
   --ap-grid-max: 1260px;
   --ap-gutter: max(24px, calc((100vw - 1180px) / 2));
   --ap-pad-y: 144px;
   --ap-black: #000;
   --ap-ink: #1d1d1f;
   --ap-sub: #6e6e73;
   --ap-line: #d2d2d7;
   --ap-surface: #f5f5f7;
   --ap-white: #fff;
   --ap-accent: #463eea;
   font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
   background: var(--ap-white);
   color: var(--ap-ink);
}

.of-company-story .ap-wrap {
   max-width: var(--ap-content);
   margin: 0 auto;
}

.of-company-story .ap-h2 {
   font-size: clamp(20px, 3.4vw, 38px);
   line-height: 1.19;
   font-weight: 600;
   letter-spacing: -0.01em;
   margin: 0 0 40px;
   color: var(--ap-ink);
}

.of-company-story .ap-section {
   padding-top: var(--ap-pad-y);
   padding-bottom: var(--ap-pad-y);
}
.of-company-story .ap-section--light {
   background: var(--ap-white);
   color: var(--ap-ink);
}
.of-company-story .ap-section--feature {
   background: var(--ap-surface);
   color: var(--ap-ink);
}
/* 같은 톤 배경이 연달아 나오면(예: light 다음 light) 위아래 144px씩
   합쳐 288px짜리 빈 공백이 생겨 "레이아웃이 비어 보인다"는 문제가
   있었다. 색이 안 바뀌는 경계에서만 위쪽 padding을 줄여 자연스러운
   한 섹션 리듬으로 되돌린다. */
.of-company-story .ap-section--light + .ap-section--light,
.of-company-story .ap-section--feature + .ap-section--feature,
.of-company-story .ap-section--dark + .ap-section--dark {
   padding-top: calc(var(--ap-pad-y) * 0.32);
}
.of-company-story .ap-section--dark {
   background: var(--ap-black);
   color: #f5f5f7;
}
.of-company-story .ap-section--dark .ap-h2 {
   color: #fff;
}

.of-company-story .ap-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 48px;
   padding: 0 28px;
   border-radius: 980px;
   font-size: 16px;
   font-weight: 500;
   text-decoration: none;
   transition:
      opacity 0.15s ease,
      background-color 0.15s ease;
}
.of-company-story .ap-btn--solid {
   background: var(--ap-accent);
   color: #fff;
}
.of-company-story .ap-btn--solid:hover {
   opacity: 0.88;
}
.of-company-story .ap-btn--outline-dark {
   border: 1px solid var(--ap-ink);
   color: var(--ap-ink);
}
.of-company-story .ap-btn--outline-dark:hover {
   background: var(--ap-ink);
   color: #fff;
}

/* ============================================================
   0. Sticky Local Navigation — 화이트, 옅은 하단 보더
   ============================================================ */
.of-company-story .ap-localnav {
   position: sticky;
   top: 0;
   z-index: 40;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: saturate(180%) blur(14px);
   -webkit-backdrop-filter: saturate(180%) blur(14px);
   border-bottom: 1px solid var(--ap-line);
   height: 52px;
}
.of-company-story .ap-localnav__inner {
   max-width: var(--ap-grid-max);
   margin: 0 auto;
   padding: 0 var(--ap-gutter);
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.of-company-story .ap-localnav__brand {
   font-size: 15px;
   font-weight: 600;
   color: var(--ap-ink);
   text-decoration: none;
   white-space: nowrap;
}
.of-company-story .ap-localnav__brand span {
   color: var(--ap-sub);
   font-weight: 400;
}
.of-company-story .ap-localnav__menu {
   display: flex;
   align-items: center;
   gap: 28px;
}
.of-company-story .ap-localnav__menu a {
   font-size: 13px;
   color: var(--ap-ink);
   text-decoration: none;
   white-space: nowrap;
}
.of-company-story .ap-localnav__cta {
   background: var(--ap-accent);
   color: #fff !important;
   padding: 7px 16px;
   border-radius: 980px;
   font-weight: 600;
}
.of-company-story .ap-localnav__toggle {
   display: none;
   align-items: center;
   gap: 6px;
   background: none;
   border: 0;
   font-size: 13px;
   color: var(--ap-ink);
}
.of-company-story .ap-localnav__toggle-icon {
   width: 16px;
   height: 10px;
   position: relative;
}
.of-company-story .ap-localnav__toggle-icon::before,
.of-company-story .ap-localnav__toggle-icon::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   height: 1.5px;
   background: currentColor;
}
.of-company-story .ap-localnav__toggle-icon::before {
   top: 0;
}
.of-company-story .ap-localnav__toggle-icon::after {
   bottom: 0;
}

/* ============================================================
   1. Immersive Hero — 블랙 배경 + 이미지, 화이트 텍스트
   ============================================================ */
.of-company-story .ap-hero {
   position: relative;
   background: var(--ap-black);
   color: #fff;
   min-height: 640px;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 72px;
}
.of-company-story .ap-hero__media {
   position: absolute;
   inset: 0;
}
.of-company-story .ap-hero__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 30%;
   display: block;
   opacity: 0.82;
}
.of-company-story .ap-hero__scrim {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.8) 100%);
}
.of-company-story .ap-hero__copy {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 0 24px;
}
.of-company-story .ap-hero__title {
   max-width: 900px;
   margin: 0 auto 20px;
   font-size: clamp(34px, 5.4vw, 64px);
   line-height: 1.1;
   font-weight: 700;
   letter-spacing: -0.015em;
}
.of-company-story .ap-hero__desc {
   max-width: 640px;
   margin: 0 auto;
   font-size: clamp(16px, 1.6vw, 21px);
   line-height: 1.4;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.86);
}

/* ============================================================
   1-2. 포지셔닝 밴드
   ============================================================ */
.of-company-story .ap-position {
   background: var(--ap-surface);
   padding: 56px 0;
}
.of-company-story .ap-position__lead {
   text-align: center;
   font-size: clamp(17px, 2vw, 22px);
   line-height: 1.6;
   color: var(--ap-ink);
   max-width: 760px;
   margin: 0 auto 28px;
}
.of-company-story .ap-position__lead strong {
   color: var(--ap-accent);
}
.of-company-story .ap-position__badges {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
}
.of-company-story .ap-position__badges li {
   font-size: 13px;
   font-weight: 600;
   color: var(--ap-ink);
   background: #fff;
   border: 1px solid var(--ap-line);
   padding: 9px 18px;
   border-radius: 999px;
}

/* ============================================================
   3-1. 포지셔닝 (secret_introduction.html 콘텐츠를 이 페이지 톤으로
   재구성 — 4개 대안 비교 카드 + 2x2 포지셔닝 맵)
   ============================================================ */
.of-company-story .ap-positioning__lead {
   font-size: 17px;
   line-height: 1.65;
   color: var(--ap-sub);
   max-width: 760px;
   margin: 0 0 48px;
}
.of-company-story .ap-positioning__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 40px;
}
.of-company-story .ap-positioning__card {
   padding: 26px;
   border-radius: 18px;
   background: #fff;
   border: 1px solid var(--ap-line);
   transition:
      transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.3s ease;
}
.of-company-story .ap-positioning__card:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
}
.of-company-story .ap-positioning__label {
   display: inline-block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--ap-sub);
   text-transform: uppercase;
   margin-bottom: 12px;
}
.of-company-story .ap-positioning__card h3 {
   font-size: 18px;
   font-weight: 700;
   margin: 0 0 10px;
   color: var(--ap-ink);
}
.of-company-story .ap-positioning__card p {
   font-size: 13px;
   line-height: 1.6;
   color: var(--ap-sub);
   margin: 0 0 14px;
}
.of-company-story .ap-positioning__card ul {
   list-style: none;
   margin: 0;
   padding: 14px 0 0;
   border-top: 1px solid var(--ap-line);
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.of-company-story .ap-positioning__card li {
   font-size: 12px;
   color: var(--ap-ink);
   padding-left: 14px;
   position: relative;
   line-height: 1.5;
}
.of-company-story .ap-positioning__card li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: var(--ap-accent);
}
.of-company-story .ap-positioning__card--highlight {
   background: var(--ap-ink);
   border-color: var(--ap-ink);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.of-company-story .ap-positioning__card--highlight:hover {
   transform: translateY(-4px);
}
.of-company-story .ap-positioning__card--highlight .ap-positioning__label {
   color: rgba(255, 255, 255, 0.6);
}
.of-company-story .ap-positioning__card--highlight h3 {
   color: #fff;
}
.of-company-story .ap-positioning__card--highlight p {
   color: rgba(255, 255, 255, 0.72);
}
.of-company-story .ap-positioning__card--highlight ul {
   border-top-color: rgba(255, 255, 255, 0.16);
}
.of-company-story .ap-positioning__card--highlight li {
   color: rgba(255, 255, 255, 0.85);
}
.of-company-story .ap-positioning__summary {
   font-size: 17px;
   line-height: 1.7;
   color: var(--ap-ink);
   max-width: 820px;
   margin: 0 0 48px;
}
.of-company-story .ap-positioning__summary strong {
   color: var(--ap-accent);
   font-weight: 600;
}

/* 상세 비교표 */
.of-company-story .ap-comparetable {
   overflow-x: auto;
   border: 1px solid var(--ap-line);
   border-radius: 18px;
   margin-bottom: 40px;
   -webkit-overflow-scrolling: touch;
}
.of-company-story .ap-comparetable table {
   width: 100%;
   border-collapse: collapse;
   min-width: 640px;
}
.of-company-story .ap-comparetable th,
.of-company-story .ap-comparetable td {
   padding: 14px 18px;
   text-align: left;
   font-size: 13px;
   border-bottom: 1px solid var(--ap-line);
}
.of-company-story .ap-comparetable thead th {
   font-size: 12px;
   font-weight: 700;
   color: var(--ap-sub);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   background: var(--ap-surface);
   border-bottom: 1px solid var(--ap-line);
}
.of-company-story .ap-comparetable__crit {
   color: var(--ap-sub);
}
.of-company-story .ap-comparetable tbody th {
   font-weight: 600;
   color: var(--ap-ink);
   white-space: nowrap;
}
.of-company-story .ap-comparetable td {
   color: var(--ap-sub);
}
.of-company-story .ap-comparetable tbody tr:last-child th,
.of-company-story .ap-comparetable tbody tr:last-child td {
   border-bottom: 0;
}
.of-company-story .ap-comparetable__highlight {
   background: var(--ap-ink);
   color: #fff !important;
   font-weight: 600;
}
.of-company-story .ap-comparetable thead .ap-comparetable__highlight {
   background: var(--ap-ink);
   color: #fff;
}

/* 포지셔닝 맵: 실제 X/Y 축을 그린 산점도 */
.of-company-story .ap-posmap {
   background: var(--ap-surface);
   border-radius: 24px;
   padding: clamp(24px, 3vw, 40px);
}
.of-company-story .ap-posmap__title {
   font-size: 13px;
   font-weight: 700;
   color: var(--ap-sub);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 20px;
}
.of-company-story .ap-posmap__chart {
   position: relative;
   max-width: 560px;
   margin: 0 auto;
   padding: 28px 36px;
}
.of-company-story .ap-posmap__chart svg {
   width: 100%;
   height: auto;
   display: block;
   overflow: visible;
}
.of-company-story .ap-posmap__label {
   position: absolute;
   font-size: 11px;
   font-weight: 600;
   color: var(--ap-sub);
   white-space: nowrap;
}
.of-company-story .ap-posmap__label--top {
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}
.of-company-story .ap-posmap__label--bottom {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
}
.of-company-story .ap-posmap__label--left {
   left: 0;
   top: 50%;
   transform: translateY(-50%);
}
.of-company-story .ap-posmap__label--right {
   right: 0;
   top: 50%;
   transform: translateY(-50%);
}
.of-company-story .ap-posmap__pt {
   fill: var(--ap-white);
   stroke: var(--ap-ink);
   stroke-width: 1;
}
.of-company-story .ap-posmap__pt--highlight {
   fill: var(--ap-accent);
   stroke: var(--ap-white);
   stroke-width: 1;
}
.of-company-story .ap-posmap__pt-label {
   font-size: 3.6px;
   font-weight: 700;
   fill: var(--ap-ink);
}
.of-company-story .ap-posmap__pt-label--highlight {
   fill: var(--ap-accent);
}
.of-company-story .ap-posmap__pt-sub {
   font-size: 2.7px;
   fill: var(--ap-sub);
}

/* 포지셔닝 맵 등장 애니메이션 — 축이 그려지고 포인트가 순서대로 찍히는
   연출. 부모(.ap-posmap, of-reveal)가 스크롤로 화면에 들어와 기존
   IntersectionObserver(initReveal)가 is-visible을 붙이는 순간, 자식
   요소들의 애니메이션을 연쇄적으로 트리거한다. `.of-js`가 없으면(JS
   비실행) 즉시 최종 상태로 보이는 progressive enhancement 원칙 유지. */
.of-js .ap-posmap__axis {
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ap-posmap.is-visible .ap-posmap__axis {
   stroke-dashoffset: 0;
}
.ap-posmap.is-visible .ap-posmap__axis:nth-of-type(2) {
   transition-delay: 0.15s;
}

.of-js .ap-posmap__group {
   opacity: 0;
}
.of-js .ap-posmap__pt {
   transform-box: fill-box;
   transform-origin: center;
   transform: scale(0);
   transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.of-js .ap-posmap__pt-label,
.of-js .ap-posmap__pt-sub {
   opacity: 0;
   transform-box: fill-box;
   transform-origin: center;
   transform: translateY(2px);
   transition:
      opacity 0.4s ease,
      transform 0.4s ease;
}
.ap-posmap.is-visible .ap-posmap__group {
   opacity: 1;
}
.ap-posmap.is-visible .ap-posmap__pt {
   transform: scale(1);
}
.ap-posmap.is-visible .ap-posmap__pt-label,
.ap-posmap.is-visible .ap-posmap__pt-sub {
   opacity: 1;
   transform: translateY(0);
}
.ap-posmap.is-visible .ap-posmap__group[data-idx='0'] .ap-posmap__pt,
.ap-posmap.is-visible .ap-posmap__group[data-idx='0'] .ap-posmap__pt-label,
.ap-posmap.is-visible .ap-posmap__group[data-idx='0'] .ap-posmap__pt-sub {
   transition-delay: 0.55s;
}
.ap-posmap.is-visible .ap-posmap__group[data-idx='1'] .ap-posmap__pt,
.ap-posmap.is-visible .ap-posmap__group[data-idx='1'] .ap-posmap__pt-label,
.ap-posmap.is-visible .ap-posmap__group[data-idx='1'] .ap-posmap__pt-sub {
   transition-delay: 0.68s;
}
.ap-posmap.is-visible .ap-posmap__group[data-idx='2'] .ap-posmap__pt,
.ap-posmap.is-visible .ap-posmap__group[data-idx='2'] .ap-posmap__pt-label,
.ap-posmap.is-visible .ap-posmap__group[data-idx='2'] .ap-posmap__pt-sub {
   transition-delay: 0.81s;
}
.ap-posmap.is-visible .ap-posmap__group[data-idx='3'] .ap-posmap__pt,
.ap-posmap.is-visible .ap-posmap__group[data-idx='3'] .ap-posmap__pt-label,
.ap-posmap.is-visible .ap-posmap__group[data-idx='3'] .ap-posmap__pt-sub {
   transition-delay: 0.96s;
}

/* ============================================================
   Gallery engine (shared skeleton)
   ============================================================ */
.of-company-story .ap-gallery {
   position: relative;
   padding: 10px 0 30px;
}
.of-company-story .ap-gallery__track {
   list-style: none;
   margin: 0;
   padding: 0 var(--ap-gutter);
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scroll-padding-left: var(--ap-gutter);
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}
.of-company-story .ap-gallery__track::-webkit-scrollbar {
   display: none;
}
.of-company-story .ap-gallery__track > li {
   scroll-snap-align: start;
   flex: none;
}
.of-company-story .ap-gallery__track > li:last-child {
   scroll-snap-align: end;
}
.of-company-story .ap-gallery__track--static {
   overflow-x: visible;
   scroll-snap-type: none;
   justify-content: center;
   flex-wrap: wrap;
}

.of-company-story .ap-gallery__nav {
   display: flex;
   justify-content: flex-end;
   gap: 18px;
   max-width: var(--ap-content);
   margin: 16px auto 0;
   padding: 0 var(--ap-gutter);
}
.of-company-story .ap-gallery__btn {
   width: 36px;
   height: 36px;
   border-radius: 999px;
   border: 1px solid var(--ap-line);
   background: var(--ap-white);
   color: var(--ap-ink);
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}
.ap-section--dark .ap-gallery__btn {
   border-color: rgba(255, 255, 255, 0.3);
   background: transparent;
   color: #fff;
}
.of-company-story .ap-gallery__btn:disabled {
   opacity: 0.3;
   cursor: default;
}
.of-company-story .ap-gallery__btn:focus-visible {
   outline: 2px solid var(--ap-accent);
   outline-offset: 2px;
}

/* ── 2. News gallery ── */
.of-company-story .ap-gallery--news .ap-news-card {
   width: 420px;
}
.of-company-story .ap-news-card__media {
   width: 100%;
   aspect-ratio: 4/3;
   border-radius: 18px;
   overflow: hidden;
   background: var(--ap-surface);
   margin-bottom: 24px;
}
.of-company-story .ap-news-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
.of-company-story .ap-news-card__eyebrow {
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--ap-sub);
   margin-bottom: 10px;
   text-transform: uppercase;
}
.of-company-story .ap-news-card__title {
   font-size: clamp(20px, 2.2vw, 24px);
   line-height: 1.25;
   font-weight: 700;
   margin: 0 0 10px;
   color: var(--ap-ink);
}
.of-company-story .ap-news-card__desc {
   font-size: 15px;
   line-height: 1.6;
   color: var(--ap-sub);
   margin: 0 0 14px;
}
.of-company-story .ap-news-card__link {
   font-size: 14px;
   font-weight: 600;
   color: var(--ap-ink);
   text-decoration: none;
}
.of-company-story .ap-news-card__link:hover {
   text-decoration: underline;
}

/* ── 3. Feature gallery ── */
.of-company-story .ap-gallery--feature .ap-feature-card {
   position: relative;
   height: 520px;
   width: 380px;
   border-radius: 18px;
   overflow: hidden;
   background: #e8e8ed;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
.of-company-story .ap-feature-card--lg {
   width: 460px;
}
.of-company-story .ap-feature-card__media {
   position: absolute;
   inset: 0;
}
.of-company-story .ap-feature-card__media::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 30%, rgba(0, 0, 0, 0.76) 100%);
}
.of-company-story .ap-feature-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   filter: grayscale(0.15);
}
.of-company-story .ap-feature-card__copy {
   position: relative;
   z-index: 1;
   padding: 30px;
}
.of-company-story .ap-feature-card__label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 8px;
   text-transform: uppercase;
}
.of-company-story .ap-feature-card__headline {
   font-size: clamp(18px, 1.8vw, 21px);
   line-height: 1.3;
   font-weight: 700;
   color: #fff;
   margin: 0;
   max-width: 22ch;
}
.of-company-story .ap-feature-card__more {
   position: absolute;
   right: 18px;
   bottom: 18px;
   z-index: 2;
   width: 40px;
   height: 40px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.6);
   background: rgba(0, 0, 0, 0.35);
   color: #fff;
   font-size: 20px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.15s ease;
}
.of-company-story .ap-feature-card__more:hover {
   background: rgba(0, 0, 0, 0.6);
}
.of-company-story .ap-feature-card__more:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

/* ── 3-2. Stats gallery — 화이트, 실측치 강조 ── */
.of-company-story .ap-stats {
   padding-bottom: 60px;
}
.of-company-story .ap-gallery--stats .ap-stat-card {
   width: 320px;
   padding: 8px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
}
.of-company-story .ap-stat-card__num {
   font-size: clamp(40px, 5vw, 56px);
   font-weight: 700;
   color: var(--ap-ink);
   line-height: 1;
   letter-spacing: -0.02em;
}
.of-company-story .ap-stat-card__unit {
   font-size: 0.4em;
   font-weight: 600;
   color: var(--ap-sub);
   margin-left: 4px;
}
.of-company-story .ap-stat-card__desc {
   font-size: 17px;
   line-height: 1.6;
   color: var(--ap-sub);
   max-width: 26ch;
   margin: 0;
   font-weight: 700;
}
.of-company-story .ap-gallery--stats .ap-gallery__track--static {
   gap: 60px;
}
.of-company-story .ap-stats__note {
   text-align: center;
   font-size: 12px;
   color: var(--ap-sub);
   margin: 8px 0 0;
}

/* ── 4. OwnerFlow 통합 배너 — 단일 카드(재설계, 2026-09-15) ──
   이전 grid 2컬럼은 텍스트/이미지 박스 높이가 달라 정렬이 어긋나
   보였다. 하나의 surface 카드에 flex로 같이 넣고 align-items:center로
   맞춰서 높이 차이와 무관하게 항상 나란히 정렬되게 한다. */
.of-company-story .ap-banner__card {
   background: var(--ap-surface);
   border-radius: 32px;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: clamp(24px, 4vw, 56px);
   padding: clamp(28px, 4vw, 56px);
}
.of-company-story .ap-banner__text {
   flex: 1 1 420px;
   min-width: 0;
}
.of-company-story .ap-banner__desc {
   font-size: 16px;
   line-height: 1.65;
   color: var(--ap-sub);
   margin: 0 0 28px;
   max-width: 46ch;
}
.of-company-story .ap-banner__links {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
}
.of-company-story .ap-banner__media {
   flex: 1 1 340px;
   min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}
.of-company-story .ap-banner__media img {
   width: 100%;
   height: auto;
   max-height: 340px;
   object-fit: contain;
   display: block;
   border-radius: 16px;
}

/* ── 5. 협업 방식 선택 — 가격표형 정적 그리드(재설계, 2026-09-15) ──
   가로 스크롤 카드 4장이 "한눈에 안 들어온다"는 피드백을 받아, 스크롤이
   전혀 필요 없는 4열 그리드로 바꿨다. 정기 유지보수 카드만 어두운
   배경으로 확실히 튀게 만들어 시선을 붙잡는 전형적인 가격표 패턴을
   썼다(모든 카드가 같은 흰 배경이라 "안 들어온다"는 문제의 핵심 원인). */
.of-company-story .ap-tabs {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: -8px;
   margin-bottom: 32px;
}
.of-company-story .ap-tabs__btn {
   height: 40px;
   padding: 0 20px;
   border-radius: 980px;
   border: 1px solid var(--ap-line);
   background: transparent;
   color: var(--ap-ink);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition:
      background-color 0.15s ease,
      color 0.15s ease;
}
.of-company-story .ap-tabs__btn.is-active {
   background: var(--ap-ink);
   color: #fff;
   border-color: var(--ap-ink);
}
.of-company-story .ap-tabs__btn:focus-visible {
   outline: 2px solid var(--ap-accent);
   outline-offset: 2px;
}

.of-company-story .ap-service-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   align-items: stretch;
}
.of-company-story .ap-service-card {
   padding: 28px;
   border-radius: 20px;
   background: #fff;
   border: 1px solid var(--ap-line);
   display: flex;
   flex-direction: column;
   transition:
      transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.3s ease;
}
.of-company-story .ap-service-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}
.of-company-story .ap-service-card.is-tab-hidden {
   display: none;
}
.of-company-story .ap-service-card--highlight {
   background: var(--ap-ink);
   color: #fff;
   border-color: var(--ap-ink);
   box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
   transform: scale(1.04);
   position: relative;
   z-index: 1;
}
.of-company-story .ap-service-card--highlight:hover {
   transform: scale(1.04) translateY(-4px);
}
.of-company-story .ap-service-card--highlight .ap-service-card__title,
.of-company-story .ap-service-card--highlight .ap-service-card__price {
   color: #fff;
}
.of-company-story .ap-service-card--highlight .ap-service-card__desc {
   color: rgba(255, 255, 255, 0.72);
}
.of-company-story .ap-service-card--highlight .ap-service-card__points li {
   color: rgba(255, 255, 255, 0.85);
}
.of-company-story .ap-service-card--highlight .ap-service-card__points {
   border-top-color: rgba(255, 255, 255, 0.16);
}
.of-company-story .ap-service-card--highlight .ap-service-card__tiers {
   background: rgba(255, 255, 255, 0.1);
}
.of-company-story .ap-service-card--highlight .ap-service-card__tiers strong {
   color: rgba(255, 255, 255, 0.6);
}
.of-company-story .ap-service-card--highlight .ap-service-card__tiers span {
   color: #fff;
}
.of-company-story .ap-service-card--highlight .ap-service-card__price small {
   color: rgba(255, 255, 255, 0.6);
}
.of-company-story .ap-service-card__badge {
   align-self: flex-start;
   background: var(--ap-accent);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 999px;
   margin-bottom: 14px;
   letter-spacing: 0.02em;
}
.of-company-story .ap-service-card__price {
   display: flex;
   flex-direction: column;
   gap: 2px;
   font-size: 21px;
   font-weight: 700;
   color: var(--ap-ink);
   margin-bottom: 14px;
}
.of-company-story .ap-service-card__price small {
   font-size: 12px;
   font-weight: 500;
   color: var(--ap-sub);
}
.of-company-story .ap-service-card__title {
   font-size: 18px;
   font-weight: 700;
   margin: 0 0 10px;
}
.of-company-story .ap-service-card__desc {
   font-size: 14px;
   line-height: 1.6;
   color: var(--ap-sub);
   margin: 0 0 16px;
}
.of-company-story .ap-service-card__tiers {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin: 0 0 16px;
   padding: 12px;
   background: var(--ap-surface);
   border-radius: 10px;
}
.of-company-story .ap-service-card__tiers div {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}
.of-company-story .ap-service-card__tiers strong {
   font-size: 12px;
   color: var(--ap-sub);
   font-weight: 600;
}
.of-company-story .ap-service-card__tiers span {
   font-size: 14px;
   font-weight: 700;
   color: var(--ap-ink);
}
.of-company-story .ap-service-card__points {
   list-style: none;
   margin: auto 0 0;
   padding: 16px 0 0;
   border-top: 1px solid var(--ap-line);
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.of-company-story .ap-service-card__points li {
   font-size: 13px;
   color: var(--ap-ink);
   padding-left: 16px;
   position: relative;
}
.of-company-story .ap-service-card__points li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: var(--ap-accent);
}
.of-company-story .ap-service-card__link {
   margin-top: 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ap-accent);
   text-decoration: none;
}
.of-company-story .ap-service-card--highlight .ap-service-card__link {
   color: #fff;
   text-decoration: underline;
}
.of-company-story .ap-service-card__link:hover {
   text-decoration: underline;
}

/* ── 7. Next step ── */
.of-company-story .ap-next__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}
.of-company-story .ap-next__item h3 {
   font-size: 19px;
   font-weight: 700;
   margin: 0 0 10px;
   color: var(--ap-ink);
}
.of-company-story .ap-next__item p {
   font-size: 15px;
   line-height: 1.6;
   color: var(--ap-sub);
   margin: 0 0 12px;
}
.of-company-story .ap-next__item a {
   font-size: 14px;
   font-weight: 600;
   color: var(--ap-accent);
   text-decoration: none;
}
.of-company-story .ap-next__item a:hover {
   text-decoration: underline;
}

/* ── 8. FAQ ── */
.of-company-story .ap-faq__head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 20px;
}
.of-company-story .ap-faq__toggle-all {
   background: none;
   border: 0;
   font-size: 14px;
   font-weight: 600;
   color: var(--ap-accent);
   cursor: pointer;
   white-space: nowrap;
}
.of-company-story .ap-faq__list {
   border-top: 1px solid var(--ap-line);
}
.of-company-story .ap-faq__item {
   border-bottom: 1px solid var(--ap-line);
   padding: 20px 0;
}
.of-company-story .ap-faq__item summary {
   cursor: pointer;
   font-size: 17px;
   font-weight: 600;
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--ap-ink);
}
.of-company-story .ap-faq__item summary::-webkit-details-marker {
   display: none;
}
.of-company-story .ap-faq__item summary::after {
   content: '+';
   font-size: 22px;
   font-weight: 400;
   color: var(--ap-sub);
   margin-left: 16px;
   flex: none;
}
.of-company-story .ap-faq__item[open] summary::after {
   content: '–';
}
.of-company-story .ap-faq__item p {
   font-size: 15px;
   line-height: 1.7;
   color: var(--ap-sub);
   margin: 14px 0 0;
}
.of-company-story .ap-faq__item summary:focus-visible {
   outline: 2px solid var(--ap-accent);
   outline-offset: 4px;
}

/* ── 9. Dark router ── */
.of-company-story .ap-router {
   background: #000;
   color: #d0d0d3;
   padding: 64px 0;
}
.of-company-story .ap-router__grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr;
   gap: 32px;
}
.of-company-story .ap-router__brand {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
}
.of-company-story .ap-router__col h3 {
   font-size: 13px;
   font-weight: 700;
   color: #86868b;
   margin: 0 0 14px;
}
.of-company-story .ap-router__col {
   display: flex;
   flex-direction: column;
}
.of-company-story .ap-router__col a {
   color: #d0d0d3;
   text-decoration: none;
   font-size: 14px;
   margin-bottom: 12px;
}
.of-company-story .ap-router__col a:hover {
   color: #fff;
}

/* ============================================================
   Modals (native <dialog>)
   ============================================================ */
.of-company-story dialog.ap-modal {
   border: 0;
   padding: 0;
   background: transparent;
   max-width: none;
   max-height: none;
   width: 100%;
   height: 100%;
   margin: 0;
   inset: 0;
}
.of-company-story dialog.ap-modal::backdrop {
   background: rgba(0, 0, 0, 0.55);
}
.of-company-story dialog.ap-modal {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   overflow-y: auto;
   padding: 5vh 20px;
}
.of-company-story dialog.ap-modal:not([open]) {
   display: none;
}
.of-company-story .ap-modal__panel {
   width: 100%;
   max-width: 1180px;
   background: #fff;
   border-radius: 28px;
   position: relative;
   padding: 72px clamp(24px, 6vw, 96px) 96px;
   transform: scale(0.92);
   opacity: 0;
   transition:
      transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.22s ease;
}
.of-company-story dialog.ap-modal[open] .ap-modal__panel {
   transform: scale(1);
   opacity: 1;
}
.of-company-story .ap-modal__close {
   position: sticky;
   top: 24px;
   float: right;
   margin-left: 24px;
   width: 40px;
   height: 40px;
   border-radius: 999px;
   border: 1px solid var(--ap-line);
   background: #fff;
   font-size: 16px;
   cursor: pointer;
   z-index: 2;
}
.of-company-story .ap-modal__close:focus-visible {
   outline: 2px solid var(--ap-accent);
   outline-offset: 2px;
}
.of-company-story .ap-modal__eyebrow {
   display: block;
   font-size: 14px;
   font-weight: 700;
   color: var(--ap-accent);
   margin-bottom: 14px;
}
.of-company-story .ap-modal__body h2 {
   font-size: clamp(28px, 3.4vw, 40px);
   line-height: 1.2;
   font-weight: 700;
   margin: 0 0 24px;
   max-width: 20ch;
   color: var(--ap-ink);
}
.of-company-story .ap-modal__lead {
   font-size: 18px;
   line-height: 1.65;
   color: #333;
   margin: 0 0 32px;
   max-width: 64ch;
}
.of-company-story .ap-modal__points {
   list-style: none;
   margin: 0 0 32px;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px 32px;
}
.of-company-story .ap-modal__points li {
   font-size: 15px;
   line-height: 1.6;
   color: #444;
   padding-left: 18px;
   position: relative;
}
.of-company-story .ap-modal__points li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: var(--ap-accent);
}
.of-company-story .ap-modal__emphasis {
   font-size: 22px;
   font-weight: 600;
   line-height: 1.4;
   margin: 0;
   border-top: 1px solid var(--ap-line);
   padding-top: 28px;
   color: var(--ap-ink);
}
body:has(.of-company-story dialog.ap-modal[open]) {
   overflow: hidden;
}

/* ============================================================
   Mobile header simplification (기존 정책 유지)
   ============================================================ */
@media (max-width: 768px) {
   body:has(main.of-company-story) .top-nav .partner-badge,
   body:has(main.of-company-story) .top-nav .nav-right {
      display: none !important;
   }
   body:has(main.of-company-story) .top-nav .brand-block,
   body:has(main.of-company-story) .top-nav .nav-left {
      position: static !important;
      transform: none !important;
      left: auto !important;
   }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1279px) and (min-width: 769px) {
   .of-company-story {
      --ap-pad-y: 96px;
   }
   .of-company-story .ap-h2 {
      font-size: clamp(28px, 3.6vw, 40px);
   }
   .of-company-story .ap-gallery--news .ap-news-card {
      width: 58vw;
   }
   .of-company-story .ap-gallery--feature .ap-feature-card {
      width: 46vw;
   }
   .of-company-story .ap-gallery--feature .ap-feature-card--lg {
      width: 60vw;
   }
   .of-company-story .ap-service-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .of-company-story .ap-service-card--highlight {
      transform: none;
      grid-column: span 2;
   }
   .of-company-story .ap-service-card--highlight:hover {
      transform: translateY(-4px);
   }
   .of-company-story .ap-positioning__grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .of-company-story .ap-positioning__card--highlight {
      grid-column: span 2;
   }
   .of-company-story .ap-hero {
      min-height: 480px;
   }
   .of-company-story .ap-banner__card {
      flex-direction: column;
      text-align: center;
   }
   .of-company-story .ap-banner__links {
      justify-content: center;
   }
}

@media (max-width: 768px) {
   .of-company-story {
      --ap-pad-y: 88px;
   }
   .of-company-story .ap-h2 {
      font-size: clamp(26px, 7vw, 34px);
      margin-bottom: 28px;
   }

   .of-company-story .ap-localnav__menu {
      position: absolute;
      top: 52px;
      left: 0;
      right: 0;
      background: #fff;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 8px var(--ap-gutter) 16px;
      border-bottom: 1px solid var(--ap-line);
      display: none;
   }
   .of-company-story .ap-localnav__menu.is-open {
      display: flex;
   }
   .of-company-story .ap-localnav__menu a {
      padding: 10px 0;
      width: 100%;
   }
   .of-company-story .ap-localnav__cta {
      margin-top: 6px;
      text-align: center;
   }
   .of-company-story .ap-localnav__toggle {
      display: flex;
   }

   .of-company-story .ap-hero {
      min-height: 460px;
      padding: 100px 0 40px;
   }
   .of-company-story .ap-hero__title {
      font-size: clamp(28px, 8vw, 38px);
      padding: 0 12px;
   }
   .of-company-story .ap-hero__desc {
      font-size: clamp(14px, 4.2vw, 16px);
      padding: 0 12px;
   }

   .of-company-story .ap-gallery--news .ap-news-card {
      width: calc(100vw - 48px);
   }
   .of-company-story .ap-gallery--feature .ap-feature-card,
   .of-company-story .ap-gallery--feature .ap-feature-card--lg {
      width: 78vw;
      height: 420px;
   }
   .of-company-story .ap-gallery--stats .ap-gallery__track--static {
      gap: 32px;
   }
   .of-company-story .ap-gallery--stats .ap-stat-card {
      width: 100%;
      max-width: 320px;
   }

   .of-company-story .ap-banner__card {
      flex-direction: column;
      text-align: center;
      padding: 28px;
      border-radius: 24px;
   }
   .of-company-story .ap-banner__links {
      justify-content: center;
   }
   .of-company-story .ap-banner__media img {
      max-height: 220px;
   }
   .of-company-story .ap-service-grid {
      grid-template-columns: 1fr;
   }
   .of-company-story .ap-service-card--highlight {
      transform: none;
      grid-column: auto;
   }
   .of-company-story .ap-service-card--highlight:hover {
      transform: translateY(-4px);
   }
   .of-company-story .ap-positioning__grid {
      grid-template-columns: 1fr;
   }
   .of-company-story .ap-positioning__card--highlight {
      grid-column: auto;
   }
   .of-company-story .ap-posmap__chart {
      padding: 20px 24px;
   }
   .of-company-story .ap-posmap__pt-label {
      font-size: 4.4px;
   }
   .of-company-story .ap-posmap__pt-sub {
      font-size: 3.4px;
   }
   .of-company-story .ap-comparetable table {
      min-width: 560px;
   }
   .of-company-story .ap-next__grid {
      grid-template-columns: 1fr;
      gap: 36px;
   }
   .of-company-story .ap-router__grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px 20px;
   }
   .of-company-story .ap-router__brand {
      grid-column: 1 / -1;
   }

   .of-company-story .ap-modal__panel {
      padding: 64px 20px 64px;
      border-radius: 20px;
   }
   .of-company-story .ap-modal__points {
      grid-template-columns: 1fr;
   }
   .of-company-story dialog.ap-modal {
      padding: 0;
      align-items: stretch;
   }
   .of-company-story dialog.ap-modal .ap-modal__panel {
      border-radius: 0;
      min-height: 100%;
      max-width: none;
   }
}

/* ============================================================
   Scroll reveal + micro-interactions (동적 모션)
   `.of-js`가 붙어야(JS 실행 시에만) 초기 숨김 상태가 적용된다 —
   JS 미실행/에러 시에는 항상 보임(progressive enhancement).
   ============================================================ */
:root.of-js .of-company-story .of-reveal {
   opacity: 0;
   transform: translateY(22px);
   transition:
      opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
   will-change: opacity, transform;
}
:root.of-js .of-company-story .of-reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
}
:root.of-js .of-company-story .of-reveal--card {
   transform: translateY(28px) scale(0.98);
}
:root.of-js .of-company-story .of-reveal--card.is-visible {
   transform: translateY(0) scale(1);
}

.of-company-story .ap-hero__title,
.of-company-story .ap-hero__desc {
   animation: ap-hero-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.of-company-story .ap-hero__desc {
   animation-delay: 0.12s;
}
@keyframes ap-hero-in {
   from {
      opacity: 0;
      transform: translateY(18px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.of-company-story .ap-hero__media img {
   transform: scale(1.06);
   animation: ap-hero-media-fade 1.2s ease both;
}
@keyframes ap-hero-media-fade {
   from {
      opacity: 0;
   }
   to {
      opacity: 0.82;
   }
}
/* transform은 JS 패럴랙스(initHeroParallax)가 매 프레임 인라인으로 갱신한다 —
   CSS 애니메이션과 transform을 동시에 걸면 서로 덮어써 튀는 현상이 생기므로
   opacity만 CSS에서 처리한다. */

/* 카드 hover: 살짝 떠오르는 느낌 (ap-service-card 자체 hover는 5번
   섹션에서 이미 정의돼 있어 여기서 다시 덮어쓰지 않는다) */
.of-company-story .ap-news-card,
.of-company-story .ap-feature-card {
   transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.of-company-story .ap-news-card:hover .ap-news-card__media {
   transform: translateY(-2px);
}
.of-company-story .ap-news-card__media {
   transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.of-company-story .ap-feature-card:hover {
   transform: translateY(-6px);
}
.of-company-story .ap-feature-card:hover .ap-feature-card__media img {
   transform: scale(1.04);
}
.of-company-story .ap-feature-card__media img {
   transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* stat 숫자 카운트업 느낌(reveal과 함께 살짝 확대되며 등장) */
:root.of-js .of-company-story .of-reveal.ap-stat-card .ap-stat-card__num {
   transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ============================================================
   PC 마우스 클릭+드래그 스크롤
   ============================================================ */
.of-company-story .ap-gallery__track.is-drag-scroll {
   cursor: grab;
   user-select: none;
}
.of-company-story .ap-gallery__track.is-drag-scroll.is-dragging {
   cursor: grabbing;
   scroll-snap-type: none;
   scroll-behavior: auto;
}
.of-company-story .ap-gallery__track.is-drag-scroll.is-dragging * {
   pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
   .of-company-story * {
      transition: none !important;
      animation: none !important;
   }
   .of-company-story .ap-hero__media img {
      transform: none;
   }
}