/* ============================================================
   SULGI Portfolio · dakyoungsnd.css
   다경에스앤디 Case Study 전용 스타일
   ============================================================ */

:root {
    --brand-dakyoungsnd: #0f3460;
    --dakyoungsnd-surface: #ffffff;
    --dakyoungsnd-soft: #f0f4f8;
    --dakyoungsnd-border: #c5d2e0;
    --dakyoungsnd-before: #5a6b7d;
    --dakyoungsnd-after: #1e88e5;
}

.dakyoungsnd-section {
    padding: var(--space-64) 0;
}

.title-wrap {
    width: 100%;
}

.title-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.hero-title {
    color: var(--brand-dakyoungsnd);
}

.card-group {
    display: grid;
    gap: var(--space-24);
}

.intro-card-group,
.problem-card-group {
    grid-template-columns: 1fr;
}

.interview-card-group,
.before-after-card-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-card,
.interview-card,
.problem-card,
.ba-card {
    border: 1px solid var(--dakyoungsnd-border);
    background: var(--dakyoungsnd-surface);
    box-shadow: var(--shadow-soft);
}

.intro-card .card-image,
.problem-card .card-image {
    max-height: 360px;
}

.interview-card .card-image,
.ba-card .card-image {
    max-height: 260px;
}

.project-meta {
    margin-top: 0;
    max-width: 100%;
    padding-top: var(--space-20);
    border-top: 1px dashed var(--dakyoungsnd-border);
}

.project-meta dd {
    color: var(--text-main);
}

.interview-quote {
    font-size: var(--fs-body-lg);
    line-height: 1.7;
}

.interview-profile {
    margin-top: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.interview-name {
    font-weight: 700;
    color: var(--brand-dakyoungsnd);
}

.interview-desc {
    color: var(--text-sub);
}

.ba-card .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: var(--space-16);
    color: #fff;
}

.ba-card[data-state="before"] .label {
    background: var(--dakyoungsnd-before);
}

.ba-card[data-state="after"] .label {
    background: var(--dakyoungsnd-after);
}

.ba-title {
    margin-bottom: var(--space-12);
    font-size: var(--font-size-h4);
}

.ba-caption {
    color: var(--text-sub);
    line-height: 1.7;
}

.card.is-focused {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

@media (max-width: 1024px) {
    .interview-card-group,
    .before-after-card-group {
        grid-template-columns: 1fr;
    }
}