/* company.css */

/* =======================================================================
   회사소개 (company-intro-page)
======================================================================= */
.company-intro-page {--company-hero-min-h: 560px; background-color: var(--color-bg-white);}

.company-intro-page .fade-in-up {transform: translateY(20px); transition-duration: 0.45s;}
.company-intro-page .fade-in-up.is-visible {transform: translateY(0);}

@media (prefers-reduced-motion: reduce) {
    .company-intro-page .fade-in-up,
    .company-intro-page .fade-in-up.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.company-intro-page .section-header-eyebrow-text {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* ------------------------------------------------------------
   1. Hero / 회사소개
------------------------------------------------------------ */
.company-hero {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-100) 0 var(--spacing-100);
}

.company-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 42% 72% at 78% 42%, rgba(174, 231, 209, 0.22), rgba(174, 231, 209, 0) 74%), linear-gradient(180deg, #F8FAFC 0%, #FCFDFD 65%, var(--color-bg-white) 100%);
}

.company-hero .container {position: relative; z-index: 1;}

.company-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--spacing-64);
    min-height: var(--company-hero-min-h);
}

.company-hero-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.18;
    letter-spacing: var(--letter-spacing-tight);
    word-break: keep-all;
}

.company-hero-copy {
    margin-top: var(--spacing-32);
}

.company-hero-lead {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
}

.company-hero-desc {
    max-width: 30em;
    margin: var(--spacing-8) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-loose);
    word-break: keep-all;
}

.company-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.company-hero-video {
    display: block;
    width: 94%;
    max-width: 432px;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------
   섹션 공통 리듬
------------------------------------------------------------ */
.company-section {padding: var(--section-padding-y) 0;}

/* ------------------------------------------------------------
   2. Growth
------------------------------------------------------------ */
.company-growth-grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 128px; align-items: center;}
.company-growth-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-20);
    margin: 0;
    padding: 0;
}
.company-growth-metric {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    padding: var(--spacing-32);
    min-height: 144px;
    justify-content: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}
.company-growth-metric-label {color: var(--color-text-secondary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium);}
.company-growth-metric-value {margin: 0; color: var(--color-text-primary); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: 1.3; letter-spacing: -0.03em; white-space: nowrap;}
.company-growth-chart {min-width: 0; margin: 0; padding: 0;}
.company-growth-chart-legend {display: flex; flex-wrap: wrap; gap: var(--spacing-24); color: var(--color-text-secondary); font-size: var(--font-size-body-sm);}
.company-growth-legend-item {display: inline-flex; align-items: center; gap: var(--spacing-8);}
.company-growth-legend-item::before {content: ""; width: 20px; height: 3px; border-radius: var(--radius-full); background-color: var(--color-primary);}
.company-growth-legend-bar::before {width: 12px; height: 12px; border-radius: var(--radius-sm); background-color: var(--color-primary-20);}
.company-growth-readout {margin: var(--spacing-16) 0 var(--spacing-8); color: var(--color-text-body); font-size: var(--font-size-body-sm); min-height: 1.5em;}
.company-growth-plot {width: 100%; min-width: 0;}
.company-growth-plot svg {display: block; width: 100%; overflow: visible;}
.company-growth-chart-svg text {fill: var(--color-text-secondary); font-family: inherit; font-size: 12px;}
.company-growth-chart-svg .growth-grid-line {stroke: var(--color-border-light); stroke-width: 1;}
.company-growth-chart-svg .growth-line {fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0;}
.company-growth-chart-svg .growth-dot {fill: var(--color-primary); stroke: var(--color-bg-white); stroke-width: 2;}
.company-growth-chart-svg .growth-bar {fill: url(#company-growth-bar-fill); transform-box: fill-box; transform-origin: center bottom;}
.company-growth-chart-svg .growth-latest {fill: url(#company-growth-bar-latest);}
.company-growth-chart-svg .growth-gradient-top {stop-color: var(--color-primary-20);}
.company-growth-chart-svg .growth-gradient-bottom {stop-color: var(--color-primary-10);}
.company-growth-chart-svg .growth-gradient-latest-top {stop-color: var(--color-primary);}
.company-growth-chart-svg .growth-gradient-latest-bottom {stop-color: color-mix(in srgb, var(--color-primary) 75%, var(--color-bg-white));}
.company-growth-plot.is-animation-pending .growth-bar {transform: scaleY(0);}
.company-growth-plot.is-animation-pending .growth-line {stroke-dashoffset: 1;}
.company-growth-plot.is-animation-pending .growth-dot,
.company-growth-plot.is-animation-pending .growth-value-label {opacity: 0;}
@media (prefers-reduced-motion: reduce) {
    .company-growth-plot.is-animation-pending .growth-bar {transform: none;}
    .company-growth-plot.is-animation-pending .growth-line {stroke-dashoffset: 0;}
    .company-growth-plot.is-animation-pending .growth-dot,
    .company-growth-plot.is-animation-pending .growth-value-label {opacity: 1;}
}
.company-growth-chart-svg .growth-value {fill: var(--color-text-primary); font-weight: var(--font-weight-semibold);}
.company-growth-chart-svg .growth-year {font-size: 14px;}
.company-growth-chart-svg .growth-year.growth-value,
.company-growth-chart-svg .growth-value-label {font-size: 16px;}
.company-growth-chart-svg .growth-hit {fill: transparent; cursor: pointer;}
.company-growth-chart-svg .growth-hit:focus-visible {outline: 2px solid var(--color-primary); outline-offset: -2px;}
.company-growth-note {margin: var(--spacing-16) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--line-height-base);}
@media (max-width: 1024px) {
    .company-growth-metrics {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 480px) {
    .company-growth-metrics {gap: var(--spacing-12);}
    .company-growth-metric {padding: var(--spacing-16); gap: var(--spacing-8); min-height: 120px;}
    .company-growth-metric-value {font-size: var(--font-size-h5);}
}

/* ------------------------------------------------------------
   3. Payment Services
------------------------------------------------------------ */
.company-payment .section-header {margin-bottom: var(--spacing-48);}

.company-marquee + .company-marquee {margin-top: var(--spacing-24);}

.company-marquee-label {
    margin: 0 0 var(--spacing-16);
    color: var(--color-text-primary);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
}

.company-marquee-viewport {
    max-width: calc(var(--container-max-width) - var(--container-padding-x) * 2);
    margin: 0 auto;
    overflow: hidden;
}

.company-marquee-track {display: flex; width: max-content;}
.company-marquee-set {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    padding-right: var(--spacing-16);
    flex: 0 0 auto;
    animation: company-marquee-scroll 55s linear infinite;
}
.company-marquee-reverse .company-marquee-set {animation-direction: reverse;}
.company-marquee:hover .company-marquee-set,
.company-marquee:focus-within .company-marquee-set {
    animation-play-state: paused;
}

.company-marquee-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-12);
    flex: 0 0 auto;
    width: 132px;
    min-height: 104px;
    padding: var(--spacing-16) var(--spacing-12);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: #F8FAFC;
    color: var(--color-text-body);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-align: center;
}
.company-marquee-reverse .company-marquee-item {background-color: #EAF2FF;}

.company-marquee-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
}
.company-marquee-ico svg {width: 28px; height: 28px;}
.company-marquee-reverse .company-marquee-ico {color: var(--color-icon-slate-blue);}

@keyframes company-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ------------------------------------------------------------
   4. With Payup / 제휴사
------------------------------------------------------------ */
.company-partners .section-header {margin-bottom: var(--spacing-48);}

.company-partners-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-20);
}

.company-partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 108px;
    padding: var(--spacing-24);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.company-partner-item:hover {border-color: var(--color-gray-30); box-shadow: var(--shadow-sm);}

.company-partner-logo {
    display: block;
    width: calc(var(--partner-logo-width, 180px) * 0.75);
    max-width: 100%;
    height: calc(var(--partner-logo-height, 48px) * 0.75);
    object-fit: contain;
}

.company-partner-logo--danal {--partner-logo-width: 150px; --partner-logo-height: 52px;}
.company-partner-logo--kakaopay {--partner-logo-width: 180px; --partner-logo-height: 42px;}
.company-partner-logo--kcp {--partner-logo-width: 180px; --partner-logo-height: 38px;}
.company-partner-logo--kovan {--partner-logo-width: 160px; --partner-logo-height: 44px;}
.company-partner-logo--galaxia-mt {--partner-logo-width: 152px; --partner-logo-height: 64px;}
.company-partner-logo--dankook-uv {--partner-logo-width: 180px; --partner-logo-height: 44px;}
.company-partner-logo--sogang-uv {--partner-logo-width: 170px; --partner-logo-height: 52px;}
.company-partner-logo--ktb-invest {--partner-logo-width: 170px; --partner-logo-height: 48px;}
.company-partner-logo--kvic {--partner-logo-width: 190px; --partner-logo-height: 38px;}
.company-partner-logo--venture-b-a {--partner-logo-width: 200px; --partner-logo-height: 36px;}
.company-partner-logo--ks_net {--partner-logo-width: 200px; --partner-logo-height: 50px; object-fit: cover;}

/* ------------------------------------------------------------
   5. Payup Timeline
------------------------------------------------------------ */
.company-timeline-wrap {
    display: grid;
    grid-template-columns: minmax(360px, 0.4fr) minmax(0, 0.6fr);
    gap: 144px;
    align-items: start;
}
.company-timeline-sidebar {min-width: 0;}
.company-timeline .company-timeline-sidebar .section-header {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
}
.company-timeline-sidebar .section-header-title {
    --section-header-title-line-height: 1.3;
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
    white-space: nowrap;
}
.company-timeline-content {min-width: 0;}
.company-timeline-controls {
    display: grid;
    grid-template-columns: 44px 88px 44px;
    align-items: center;
    gap: var(--spacing-4);
    width: max-content;
    margin-left: var(--spacing-32);
    margin-bottom: var(--spacing-32);
}
.company-timeline-select-wrap {position: relative; min-width: 0;}
.company-timeline-select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    appearance: none;
    text-align: center;
    text-align-last: center;
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 2rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    letter-spacing: -0.03em;
    cursor: pointer;
}
.company-timeline-select option {font-size: 1rem; color: var(--color-text-primary); background: var(--color-bg-white);}
.company-timeline-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    min-height: var(--touch-target-min);
    padding: 0 var(--spacing-8);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-body);
    font: inherit;
    font-size: var(--font-size-ui);
    cursor: pointer;
    white-space: nowrap;
}
.company-timeline-step:hover:not(:disabled) {background: var(--color-primary-5); color: var(--color-primary);}
.company-timeline-step:disabled {visibility: hidden; pointer-events: none;}
.company-timeline-select:focus-visible,
.company-timeline-step:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 4px;}

.company-timeline-panels {display: grid; min-width: 0; margin-top: 0;}
.company-timeline-panel[hidden] {display: none;}
@media (min-width: 1025px) {
    .company-timeline-panels {min-height: 320px;}
}
.company-timeline-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-40);
    align-items: start;
    grid-area: 1 / 1;
    min-width: 0;
    max-width: none;
    animation: company-timeline-fade 0.2s ease-out;
}
.company-timeline-panel:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 2px;}

@keyframes company-timeline-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.company-timeline-panel-year {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;}

.company-timeline-list {position: relative; max-width: none;}
.company-timeline-list::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 4px;
    width: 2px;
    background-color: var(--color-border-light);
}

.company-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--spacing-16);
    padding: 0 0 var(--spacing-24) var(--spacing-32);
}
.company-timeline-item:last-child {padding-bottom: 0;}
.company-timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-30);
}

.company-timeline-date {
    display: block;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
    letter-spacing: 0;
}

.company-timeline-text {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    word-break: keep-all;
}

/* ------------------------------------------------------------
   6. About Payup
------------------------------------------------------------ */
.company-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--spacing-80) 0;
    background: linear-gradient(135deg, var(--color-bg-white), var(--color-primary-5));
    text-align: center;
}
.company-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 65% at 50% 50%, var(--color-primary-10), transparent 75%);
    animation: company-cta-gradient-loop 10s linear infinite;
}
@keyframes company-cta-gradient-loop {
    0%, 100% {transform: translate(-30%, 25%);}
    25% {transform: translate(-30%, -25%);}
    50% {transform: translate(30%, -25%);}
    75% {transform: translate(30%, 25%);}
}
@media (prefers-reduced-motion: reduce) {
    .company-cta::before {animation: none; transform: translate(20%, -10%);}
}
.company-cta .section-header-eyebrow {background-color: var(--color-bg-white);}

.company-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
}

.company-cta-title {
    margin: var(--spacing-24) 0 0;
    color: var(--color-text-primary);
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.55;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.company-cta-title .cta-title-br-sm {display: none;}

.company-cta-desc {
    margin: var(--spacing-16) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-base);
}

.company-cta-button {margin-top: var(--spacing-64);}

/* ------------------------------------------------------------
   반응형
------------------------------------------------------------ */
@media (max-width: 1280px) {
    .company-hero-title {font-size: 3.25rem;}
}

@media (max-width: 1024px) {
    .company-timeline-wrap {gap: var(--spacing-48);}
    .company-section {padding: var(--section-padding-y-tablet) 0;}
    .company-intro-page .section-header {--section-header-eyebrow-gap: var(--spacing-12);}

    .company-hero {padding: var(--spacing-80) 0;}
    .company-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-40);
        min-height: 0;
    }
    .company-hero-inner > *,
    .company-growth-grid > * {
        min-width: 0;
        max-width: 100%;
    }
    .company-hero-visual {order: -1;}
    .company-hero-video {max-width: 301px;}
    .company-hero-title {font-size: 2.75rem;}

    .company-growth-grid {grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32);}

    .company-partners-wall {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .company-partner-item {min-height: 92px; padding: var(--spacing-20);}

    .company-cta {padding: var(--spacing-64) 0;}
    .company-cta-title {font-size: 1.625rem;}
}

@media (max-width: 768px) {
    .company-timeline-wrap {grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32);}
    .company-timeline .company-timeline-sidebar .section-header {margin-bottom: 0;}
    .company-timeline-panels {padding-left: 0; border-left: 0;}
    .company-timeline-select {min-height: 44px; font-size: 1.75rem;}
    .company-timeline-panel {grid-template-columns: minmax(0, 1fr); gap: var(--spacing-24);}

    .company-section {padding: var(--section-padding-y-mobile) 0;}
    .company-intro-page .section-header {
        align-items: center;
        text-align: center;
        --section-header-eyebrow-gap: var(--spacing-8);
    }

    .company-hero-content {text-align: center;}
    .company-hero-desc {margin-inline: auto;}
    .company-hero {padding: var(--spacing-64) 0;}
    .company-hero-video {max-width: 263px;}
    .company-hero-title {font-size: 2.25rem;}
    .company-hero-lead {font-size: var(--font-size-h6);}

    .company-marquee-item {
        width: 116px;
        min-height: 96px;
        gap: var(--spacing-8);
        font-size: var(--font-size-body-sm);
    }
    .company-marquee-ico {width: 36px; height: 36px;}
    .company-marquee-ico svg {width: 24px; height: 24px;}

    .company-partners-wall {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16);}

    .company-cta {padding: var(--spacing-48) 0;}
    .company-cta-title {font-size: 1.5rem;}
}

@media (max-width: 480px) {
    .company-timeline-controls {grid-template-columns: 44px 80px 44px; margin-left: var(--spacing-24);}
    .company-hero {padding: var(--spacing-48) 0 var(--spacing-64);}
    .company-hero-video {max-width: 226px;}
    .company-hero-title {font-size: 1.875rem;}
    .company-hero-desc {max-width: none;}

    .company-growth-metric-value {font-size: 1.25rem;}

    .company-marquee-label {font-size: var(--font-size-ui);}

    .company-timeline-item {gap: var(--spacing-12); padding-left: var(--spacing-24);}

    .company-cta-button {width: 100%; max-width: 300px;}
    .company-partner-logo {
        width: calc(var(--partner-logo-width, 180px) * 0.6);
        height: calc(var(--partner-logo-height, 48px) * 0.6);
    }
}

@media (max-width: 360px) {
    .company-growth-metric {padding: var(--spacing-12);}
    .company-growth-metric-value {font-size: 1.125rem;}
    .company-hero-title {font-size: 1.75rem;}
    .company-hero-video {max-width: 207px;}

    .company-partners-wall {gap: var(--spacing-12);}
    .company-partner-item {min-height: 80px; padding: var(--spacing-16);}

    .company-cta-title .cta-title-br-sm {display: inline;}
}

@media (max-width: 768px) {
    .main-quick.is-company-content-priority,
    .main-quick.is-company-content-priority .main-quick-top,
    .main-quick.is-company-content-priority .main-quick-rail,
    .main-quick.is-company-content-priority * {visibility: hidden; pointer-events: none;}
}

@media (prefers-reduced-motion: reduce) {
    .company-partner-item {transition: none;}

    .company-marquee-set {animation: none;}
    .company-marquee-viewport {overflow-x: auto;}
    .company-marquee-set[aria-hidden="true"] {display: none;}

    .company-timeline-panel {animation: none;}
}