/*------------------------------------------------------
· apmedia Ver 2.0
· Type : contents.css
· Author : Albatrosss Pictures Kim Hyun Gyu
· Data : 2026-04-13
· Copyright @ 2026 apmedia all rights reserved
---------------------------------------------------------
· SUMMARY:
0) 공통 (서브 페이지)
1) About
2) Service
3) Portfolio
4) Contact
---------------------------------------------------------*/

@charset "utf-8";

/* #################################### 00.공통 #################################### */
.apmedia-page-section { padding: var(--section-padding) 0; }
.apmedia-page-section-alt { padding: var(--section-padding) 0; background: var(--background-color-secondary); }

/* 서브 페이지 공통 CTA (Service) */
.apmedia-service-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xl-narrow); }
.apmedia-service-cta h3 { font-size: var(--fs-h2-sub); font-weight: var(--fw-bold); color: var(--text-color); line-height: var(--lh-snug); }

/* #################################### 02.Service #################################### */

/* Process Flow */
.apmedia-service-process {
    display: flex; flex-direction: column; gap: var(--section-gap);
}

.apmedia-service-process h3 {
    font-size: var(--fs-h2-sub);
    font-weight: var(--fw-bold); color: var(--text-color); line-height: var(--lh-snug);
}

.apmedia-service-process-flow {
    display: flex; align-items: center;
    gap: 0;
}

.apmedia-service-process-step {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-sm-loose);
    text-align: center;
}

.apmedia-service-process-num {
    font-family: var(--set-font-en);
    font-size: var(--fs-h3-base);
    font-weight: var(--fw-extrabold); color: var(--signature-color);
    width: var(--size-circle-lg); height: var(--size-circle-lg);
    border-radius: 50%;
    border: var(--line-mid) solid var(--signature-color);
    display: flex; align-items: center; justify-content: center;
}

.apmedia-service-process-step--result .apmedia-service-process-num {
    background: var(--signature-color); color: var(--color-white);
}

.apmedia-service-process-name {
    font-size: var(--fs-body-em-sm);
    font-weight: var(--fw-semibold); color: var(--text-color);
}

.apmedia-service-process-line {
    flex: 0 0 auto;
    width: var(--space-decor-line); height: var(--line-mid);
    background: var(--border-color-strong);
    margin-bottom: var(--space-xl);
}

@media (max-width: 640px) {
    .apmedia-service-process-flow {
        flex-direction: column; gap: 0;
    }
    .apmedia-service-process-line {
        width: var(--line-mid); height: var(--space-xl);
        margin-bottom: 0;
    }
}

/* Service Detail */
.apmedia-service-detail {
    display: flex; flex-direction: column; gap: var(--section-gap);
}

.apmedia-service-detail-head {
    display: flex; align-items: flex-start;
    gap: var(--space-xl-2);
}

.apmedia-service-detail-num {
    font-family: var(--set-font-en);
    font-size: var(--fs-sub-h2);
    font-weight: var(--fw-extrabold); color: var(--signature-color);
    line-height: var(--lh-1); flex-shrink: 0;
    opacity: 0.3;
}

.apmedia-service-detail h3 {
    font-size: var(--fs-h3-card-mid-narrow);
    font-weight: var(--fw-bold); color: var(--text-color); line-height: var(--lh-snug);
}

.apmedia-service-detail p {
    font-size: var(--fs-body-em);
    color: var(--text-color-secondary); line-height: var(--lh-relaxed);
    margin-top: var(--space-sm-loose);
}

.apmedia-service-detail-list {
    display: flex; flex-direction: column;
    gap: var(--space-card-list-gap);
    padding-left: var(--service-detail-list-padding-l);
}

.apmedia-service-detail-list li {
    font-size: var(--fs-body-em);
    color: var(--text-color); line-height: var(--lh-body);
    padding-left: var(--space-md-lg);
    border-left: var(--line-mid) solid var(--signature-color);
}

/* Government Support */
.apmedia-service-gov {
    display: flex; flex-direction: column;
    gap: var(--space-xl-narrow);
    text-align: center; align-items: center;
}

.apmedia-service-gov h3 {
    font-size: var(--fs-h2-sub);
    font-weight: var(--fw-bold); color: var(--text-color); line-height: var(--lh-snug);
}

.apmedia-service-gov p {
    font-size: var(--fs-body-em);
    color: var(--text-color-secondary); line-height: var(--lh-relaxed);
}

.apmedia-service-gov-links {
    margin-top: var(--space-sm-md);
}


/* #################################### 03.Portfolio #################################### */

/* 탭 */
.apmedia-portfolio-tabs {
    display: flex; flex-wrap: wrap;
    gap: var(--space-xs-sm);
    margin-bottom: var(--section-gap);
}

.apmedia-portfolio-tab {
    font-family: var(--set-font-en);
    font-size: var(--fs-caption-md);
    font-weight: var(--fw-semibold);
    color: var(--text-color-secondary);
    padding: var(--space-xs-sm) var(--space-md-lg);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color-strong);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-base);
}

.apmedia-portfolio-tab.active {
    color: var(--color-white);
    background: var(--text-color);
    border-color: var(--text-color);
}

@media (hover: hover) {
    .apmedia-portfolio-tab:hover:not(.active) {
        border-color: var(--text-color);
    }
}

/* 그리드 */
.apmedia-portfolio-grid {
    display: flex; flex-wrap: wrap;
    gap: var(--card-gap);
}

.apmedia-portfolio-item {
    flex: 0 0 calc(33.333% - var(--card-gap) * 2 / 3);
}

.apmedia-portfolio-link {
    display: flex; flex-direction: column;
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .apmedia-portfolio-link:hover { transform: translateY(calc(-1 * var(--lift-sm))); }
    .apmedia-portfolio-link:hover .apmedia-portfolio-thumb img { transform: scale(1.05); }
    .apmedia-portfolio-link:hover .apmedia-portfolio-overlay { opacity: 1; }
}

.apmedia-portfolio-thumb {
    position: relative; overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--background-color-tertiary);
}

.apmedia-portfolio-thumb img {
    width: 100%; height: auto; display: block;
    transition: transform var(--transition-slow);
}

.apmedia-portfolio-overlay {
    position: absolute; inset: 0;
    background: var(--color-overlay-dark);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--transition-base);
}

.apmedia-portfolio-play {
    width: var(--size-circle-lg); height: var(--size-circle-lg);
    border-radius: 50%; background: var(--color-white-90);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-black-soft);
}

.apmedia-portfolio-info {
    padding: var(--space-md) 0;
}

.apmedia-portfolio-cate {
    font-family: var(--set-font-en);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold); color: var(--signature-color);
    letter-spacing: var(--ls-loose);
}

.apmedia-portfolio-title {
    font-size: var(--fs-body-em-sm);
    font-weight: var(--fw-semibold); color: var(--text-color);
    margin-top: var(--space-2xs);
    line-height: var(--lh-snug);
}

@media (max-width: 1024px) {
    .apmedia-portfolio-item { flex: 0 0 calc(50% - var(--card-gap) / 2); }
}
@media (max-width: 640px) {
    .apmedia-portfolio-item { flex: 0 0 100%; }
}


/* #################################### 04.Contact #################################### */
.apmedia-contact-wrap {
    display: flex;
    gap: var(--contact-wrap-gap);
}

.apmedia-contact-left { flex: 1.2; }

.apmedia-contact-form {
    display: flex; flex-direction: column;
    gap: var(--space-lg-spread-narrow);
}

.apmedia-contact-field {
    display: flex; flex-direction: column;
    gap: var(--space-xs);
}

.apmedia-contact-field label {
    font-size: var(--fs-label-sm);
    font-weight: var(--fw-semibold); color: var(--text-color);
}

.apmedia-contact-optional {
    font-weight: var(--fw-regular); color: var(--text-color-tertiary);
}

.apmedia-contact-agree {
    display: flex; align-items: center;
}

.apmedia-contact-agree label {
    display: flex; align-items: center;
    gap: var(--space-xs-sm);
    font-size: var(--fs-label-sm);
    color: var(--text-color-secondary);
    cursor: pointer;
}

.apmedia-contact-agree input[type="checkbox"] {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    accent-color: var(--signature-color);
    border-bottom: none;
    padding: 0;
}

.apmedia-contact-submit {
    width: 100%; justify-content: center;
    margin-top: var(--space-sm-md);
}

/* 우측 정보 */
.apmedia-contact-right {
    flex: 0.8;
    display: flex; flex-direction: column;
    gap: var(--space-2xl);
    padding-top: var(--space-sm-md);
}

.apmedia-contact-info {
    display: flex; flex-direction: column;
    gap: var(--space-2xs);
}

.apmedia-contact-info h4 {
    font-family: var(--set-font-en);
    font-size: var(--size-icon-lg);
    font-weight: var(--fw-extrabold); color: var(--text-color);
}

.apmedia-contact-info-label {
    font-family: var(--set-font-en);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold); color: var(--signature-color);
    letter-spacing: var(--ls-extra-loose); text-transform: uppercase;
}

.apmedia-contact-info p, .apmedia-contact-info a { font-size: var(--fs-body-em-sm); color: var(--text-color-secondary); line-height: var(--lh-normal); }

.apmedia-contact-info a {
    transition: color var(--transition-base);
}

@media (hover: hover) {
    .apmedia-contact-info a:hover { color: var(--signature-color); }
}

@media (max-width: 768px) {
    .apmedia-contact-wrap { flex-direction: column; }
    .apmedia-contact-right {
        flex-direction: row; flex-wrap: wrap;
        gap: var(--space-xl);
    }
    .apmedia-contact-info { flex: 1 1 calc(50% - var(--space-xl) / 2); }
}

/* ==================== About 재구축 (apmedia-about-* — 라이트 에디토리얼: 대형 타이포 대비 · 러닝 마퀴 · 오버사이즈 넘버 · 스티키 인덱스 · 오프셋 콜라주 · 라인 장식 0(톤·여백으로 구분) · 시원한 여백 · 국문 위주 · 2026-07-06 레퍼런스 Basic/DEPT·Locomotive·awwwards editorial) ==================== */
/* reveal — 기본 노출, JS(apmedia-about-anim) 시에만 숨김 (진행적 향상). 스태거는 --abt-i 인덱스 × step */
.apmedia-about.apmedia-about-anim [data-about-rise] { opacity: 0; transform: translateY(var(--abt-rise-shift)); transition: opacity var(--dur-intro-slow) var(--about-reveal-ease), transform var(--dur-intro-slow) var(--about-reveal-ease); transition-delay: calc(var(--abt-i, 0) * var(--abt-r-stagger)); }
.apmedia-about.apmedia-about-anim [data-about-rise].apmedia-about-in { opacity: 1; transform: none; }
.apmedia-about.apmedia-about-anim [data-about-line] .apmedia-about-line-in { transform: translateY(110%); transition: transform var(--dur-intro-slow) var(--about-reveal-ease); }
.apmedia-about.apmedia-about-anim [data-about-line].apmedia-about-in .apmedia-about-line-in { transform: none; }
.apmedia-about-line + .apmedia-about-line .apmedia-about-line-in { transition-delay: var(--dur-fast); }

/* 공통 — 라이트 배경 · 라인 마스크 · 컨테이너 · 레드 액센트 (.apmedia-about 안에서 --color-white* 를 다크 잉크로 재매핑) */
.apmedia-about { background: var(--abt-r-bg); color: var(--abt-r-ink); overflow: hidden; --color-white: var(--abt-r-ink); --color-white-72: var(--abt-r-body); --color-white-60: var(--abt-r-muted); }
.apmedia-about [data-about-line] { display: block; overflow: hidden; }
.apmedia-about-line-in { display: inline-block; will-change: transform; }
.apmedia-about-inner { width: var(--content-width); margin: 0 auto; }
.apmedia-about-accent { color: var(--signature-color); font-style: normal; }
.apmedia-about-kicker { font-size: var(--abt-r-eyebrow-fs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); color: var(--signature-color); }
.apmedia-about-eyebrow { font-family: var(--set-font-en); font-size: var(--abt-r-eyebrow-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-loose); text-transform: uppercase; color: var(--signature-color); }

/* 1. HERO — 좌측 초대형 헤드라인 + 하단 리드/메타(양끝 정렬) + 풀블리드 와이드 이미지 스트립 */
.apmedia-about-hero { padding-top: calc(var(--header-height) + var(--abt-sec-pad)); }
.apmedia-about-hero-title { font-family: var(--set-font-family); font-weight: var(--fw-bold); font-size: var(--abt-r-display-fs); line-height: var(--lh-tight-loose); letter-spacing: var(--ls-tight); color: var(--color-white); margin-top: var(--space-xl); text-wrap: balance; }
.apmedia-about-hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--abt-r-row-gap) var(--abt-r-sec-gap); margin-top: var(--abt-r-sec-gap); }
.apmedia-about-hero-lead { flex: 1 1 var(--abt-r-statement-w); font-size: var(--abt-r-body-fs); line-height: var(--lh-relaxed); color: var(--color-white-72); word-break: keep-all; }
.apmedia-about-hero-meta { flex: 0 1 auto; font-size: var(--abt-r-eyebrow-fs); line-height: var(--lh-relaxed); color: var(--color-white-60); text-align: right; }
.apmedia-about-hero-band { position: relative; width: 100%; height: var(--abt-r-band-h); margin-top: var(--abt-r-sec-gap); overflow: hidden; }
.apmedia-about-hero-band img { position: absolute; inset: 0; object-fit: cover; will-change: transform; }

/* 2. INTRO — 풀블리드 러닝 마퀴(전문영역, 레드 도트 구분) + 비대칭 에토스(좁은 라벨 : 넓은 대형 문장) */
.apmedia-about-intro { padding-top: var(--abt-sec-pad); padding-bottom: var(--abt-sec-pad); }
.apmedia-about-marquee { width: 100%; overflow: hidden; margin-bottom: var(--abt-r-sec-gap); }
.apmedia-about-marquee-track { display: inline-flex; animation: apmedia-about-marquee var(--abt-r-marquee-dur) linear infinite; }
.apmedia-about-marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: var(--abt-r-marquee-gap); padding-right: var(--abt-r-marquee-gap); }
.apmedia-about-marquee-word { font-family: var(--set-font-en); font-size: var(--abt-r-marquee-fs); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--color-white); white-space: nowrap; }
.apmedia-about-marquee-dot { font-size: var(--abt-r-title-fs); line-height: var(--lh-1); color: var(--signature-color); }
.apmedia-about-ethos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--abt-r-row-gap) var(--abt-r-sec-gap); }
.apmedia-about-ethos-side { flex: 0 1 auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.apmedia-about-ethos-tag { font-size: var(--abt-r-body-fs); color: var(--color-white-60); }
.apmedia-about-ethos-main { flex: 1 1 var(--abt-r-text-col-w); display: flex; flex-direction: column; gap: var(--space-lg); }
.apmedia-about-ethos-statement { font-family: var(--set-font-family); font-weight: var(--fw-semibold); font-size: var(--abt-r-statement-fs); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--color-white); word-break: keep-all; }
.apmedia-about-ethos-body { font-size: var(--abt-r-body-fs); line-height: var(--lh-relaxed); color: var(--color-white-72); word-break: keep-all; width: min(var(--abt-r-desc-w), 100%); }

/* 3. APPROACH — 오버사이즈 고스트 넘버 + 국문 태도 3연 (톤 밴드, 미디어 없음) */
.apmedia-about-approach { background: var(--abt-r-tint); padding-top: var(--abt-sec-pad); padding-bottom: var(--abt-sec-pad); }
.apmedia-about-approach-lead { font-family: var(--set-font-family); font-weight: var(--fw-semibold); font-size: var(--abt-r-statement-fs); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--color-white); word-break: keep-all; width: min(var(--abt-r-statement-w), 100%); }
.apmedia-about-approach-list { display: flex; flex-direction: column; gap: var(--abt-r-approach-gap); margin-top: var(--abt-r-sec-gap); }
.apmedia-about-approach-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md) var(--abt-r-sec-gap); }
.apmedia-about-approach-num { font-family: var(--set-font-en); font-size: var(--abt-r-ghostnum-fs); font-weight: var(--fw-bold); line-height: var(--lh-1); letter-spacing: var(--ls-tight); color: var(--abt-r-ghost); flex: 0 0 auto; }
.apmedia-about-approach-text { flex: 1 1 var(--abt-r-approach-title-w); display: flex; flex-direction: column; gap: var(--space-md); }
.apmedia-about-approach-title { font-family: var(--set-font-family); font-size: var(--abt-r-title-fs); font-weight: var(--fw-bold); line-height: var(--lh-tight-loose); letter-spacing: var(--ls-snug); color: var(--color-white); }
.apmedia-about-approach-desc { font-size: var(--abt-r-body-fs); line-height: var(--lh-relaxed); color: var(--color-white-72); word-break: keep-all; width: min(var(--abt-r-desc-w), 100%); }
.apmedia-about-approach-row:nth-child(2) { --abt-i: 1; }
.apmedia-about-approach-row:nth-child(3) { --abt-i: 2; }

/* 4. SERVICES — 계단식 오프셋 콜라주 (이미지+텍스트 블록 2컬럼 masonry, 컬럼 수직 오프셋 · 이미지 높이 제각각) */
.apmedia-about-svc { padding-top: var(--abt-sec-pad); padding-bottom: var(--abt-sec-pad); }
.apmedia-about-svc-title { font-family: var(--set-font-family); font-weight: var(--fw-bold); font-size: var(--abt-r-statement-fs); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--color-white); word-break: keep-all; width: min(var(--abt-r-statement-w), 100%); }
.apmedia-about-svc-collage { display: flex; align-items: flex-start; gap: var(--abt-r-sec-gap); margin-top: var(--abt-r-sec-gap); }
.apmedia-about-svc-col { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--abt-r-sec-gap); }
.apmedia-about-svc-col--offset { margin-top: var(--abt-r-gal-offset); }
.apmedia-about-svc-block { display: flex; flex-direction: column; gap: var(--space-md); }
.apmedia-about-svc-media { position: relative; border-radius: var(--radius-sm-md); overflow: hidden; }
.apmedia-about-svc-media--tall { height: var(--abt-r-gal-h-lg); }
.apmedia-about-svc-media--short { height: var(--abt-r-gal-h-sm); }
.apmedia-about-svc-media img { position: absolute; inset: 0; object-fit: cover; transition: transform var(--transition-slow); }
.apmedia-about-svc-en { font-family: var(--set-font-en); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-loose); text-transform: uppercase; color: var(--signature-color); margin-top: var(--space-sm); }
.apmedia-about-svc-name { font-family: var(--set-font-family); font-size: var(--abt-r-title-fs); font-weight: var(--fw-bold); line-height: var(--lh-tight-loose); letter-spacing: var(--ls-snug); color: var(--color-white); margin-top: var(--space-2xs); transition: color var(--transition-base); }
.apmedia-about-svc-sub { font-size: var(--abt-r-body-fs); line-height: var(--lh-body); color: var(--color-white-60); word-break: keep-all; margin-top: var(--space-2xs); }

/* 5. PROCESS — 스티키 인덱스 헤딩 + 우측 스크롤 5스텝 (라인 없이 여백 구분, 톤 밴드) */
.apmedia-about-process { background: var(--abt-r-tint); padding-top: var(--abt-sec-pad); padding-bottom: var(--abt-sec-pad); }
.apmedia-about-process-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--abt-r-row-gap) var(--abt-r-sec-gap); }
.apmedia-about-process-aside { flex: 1 1 var(--abt-r-aside-w); position: sticky; top: calc(var(--header-height) + var(--space-xl)); display: flex; flex-direction: column; gap: var(--space-md); }
.apmedia-about-process-title { font-family: var(--set-font-family); font-weight: var(--fw-bold); font-size: var(--abt-r-statement-fs); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--color-white); word-break: keep-all; }
.apmedia-about-process-steps { flex: 2 1 var(--abt-r-steplist-w); display: flex; flex-direction: column; gap: var(--abt-r-step-gap); }
.apmedia-about-process-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-xl); }
.apmedia-about-process-num { font-family: var(--set-font-en); font-size: var(--abt-r-num-fs); font-weight: var(--fw-bold); line-height: var(--lh-1); color: var(--signature-color); flex: 0 0 auto; }
.apmedia-about-process-body { flex: 1 1 var(--abt-r-desc-w); display: flex; flex-direction: column; gap: var(--space-sm); }
.apmedia-about-process-name { font-family: var(--set-font-family); font-size: var(--abt-r-title-fs); font-weight: var(--fw-bold); line-height: var(--lh-tight-loose); color: var(--color-white); }
.apmedia-about-process-desc { font-size: var(--abt-r-body-fs); line-height: var(--lh-relaxed); color: var(--color-white-60); word-break: keep-all; }
.apmedia-about-process-step:nth-child(2) { --abt-i: 1; }
.apmedia-about-process-step:nth-child(3) { --abt-i: 2; }
.apmedia-about-process-step:nth-child(4) { --abt-i: 3; }
.apmedia-about-process-step:nth-child(5) { --abt-i: 4; }

/* 6. CTA — 풀블리드 다크 이미지 밴드 + 좌측 오버레이 텍스트 (밴드 안에서 텍스트 흰색 재매핑) */
.apmedia-about-cta-band { position: relative; width: 100%; min-height: var(--abt-r-cta-h); padding-top: var(--abt-sec-pad); padding-bottom: var(--abt-sec-pad); overflow: hidden; display: flex; align-items: center; }
.apmedia-about-cta-band img { position: absolute; inset: 0; object-fit: cover; will-change: transform; }
.apmedia-about-cta-band::after { content: ""; position: absolute; inset: 0; background: var(--abt-r-cta-scrim); pointer-events: none; }
.apmedia-about-cta-overlay { position: relative; z-index: 1; --color-white: var(--abt-r-on-media); --color-white-72: var(--abt-r-on-media-soft); }
.apmedia-about-cta-title { font-family: var(--set-font-family); font-weight: var(--fw-bold); font-size: var(--abt-r-display-fs); line-height: var(--lh-tight-loose); letter-spacing: var(--ls-tight); color: var(--color-white); word-break: keep-all; }
.apmedia-about-cta-desc { font-size: var(--abt-r-body-fs); line-height: var(--lh-relaxed); color: var(--color-white-72); word-break: keep-all; width: min(var(--abt-r-desc-w), 100%); margin-top: var(--abt-r-row-gap); }
.apmedia-about-cta-link { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--abt-r-sec-gap); font-family: var(--set-font-en); font-size: var(--abt-label-fs); font-weight: var(--fw-semibold); letter-spacing: var(--abt-ls); color: var(--abt-on-accent); padding: var(--padding-btn-y) var(--space-xl); border-radius: var(--radius-pill); background: var(--signature-color); transition: background var(--transition-base), transform var(--transition-base); }

/* 모션 — 러닝 마퀴 무한 루프 (2그룹 동일 → -50% 이동 seamless) */
@keyframes apmedia-about-marquee { to { transform: translateX(-50%); } }

/* hover (PC 전용) — 서비스 이미지 줌 + 네임 레드 · CTA lift · 마퀴 일시정지 (섹션별 다른 모션) */
@media (hover: hover) {
    .apmedia-about-svc-block:hover .apmedia-about-svc-media img { transform: scale(1.05); }
    .apmedia-about-svc-block:hover .apmedia-about-svc-name { color: var(--signature-color); }
    .apmedia-about-cta-link:hover { background: var(--signature-color-hover); transform: translateY(calc(-1 * var(--lift-sm))); }
    .apmedia-about-marquee:hover .apmedia-about-marquee-track { animation-play-state: paused; }
}

/* 모션 저감 — 마퀴 정지 (접근성) */
@media (prefers-reduced-motion: reduce) {
    .apmedia-about-marquee-track { animation: none; }
}

/* 반응형 — 콜라주 오프셋 완화 · 스티키 해제 · 좁을 때 세로 스택 */
@media (max-width: 1024px) {
    .apmedia-about-svc-col--offset { margin-top: 0; }
    .apmedia-about-process-aside { position: static; }
}
@media (max-width: 768px) {
    .apmedia-about-hero-meta { text-align: left; }
    .apmedia-about-svc-collage { flex-direction: column; align-items: stretch; }
    .apmedia-about-svc-col { flex: 0 0 auto; }
    .apmedia-about-approach-num { font-size: var(--abt-r-num-fs); }
}