/* 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);
}

/* 64px 높이에 맞춰 버튼 폭을 확보하고 제목과의 간격을 줄여 하나의 그룹으로 묶는다. */
.company-cta-button {
    height: var(--spacing-64);
    min-height: var(--spacing-64);
    min-width: 260px;
    margin-top: var(--spacing-40);
}

/* ------------------------------------------------------------
   반응형
------------------------------------------------------------ */
@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;
    }
}