@charset "UTF-8";

/* ══════════════════════════════════════════════════
   FOCUS CAROUSEL
   - 현재 카드: 크게 중앙
   - 첫 장: 오른쪽에 다음 카드 peek
   - 중간 장: 좌우 모두 peek
   - 마지막 장: 왼쪽에 이전 카드 peek
══════════════════════════════════════════════════ */
:root {
    --peek: clamp(40px, 7vw, 120px);
    --gap:  clamp(12px, 1.5vw, 20px);
}

.section-wrap {
    padding-top: clamp(64px, 8vw, 112px);
    padding-bottom: clamp(48px, 6vw, 80px);
    overflow: hidden;
}
.section-wrap + .section-wrap { border-top: 1px solid rgba(0,0,0,.07); }

.section-title {
    padding: 0 var(--peek);
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    color: #111;
    margin-bottom: clamp(28px, 3.5vw, 48px);
    letter-spacing: -.02em;
}

.track-outer {
    overflow: hidden;
    padding: 8px 0 12px;
    margin: -8px 0 -12px;
}

.track {
    display: flex;
    gap: var(--gap);
    transition: transform .52s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.track.is-dragging { cursor: grabbing; transition: none; }

.card {
    flex: 0 0 calc(100vw - 2 * var(--peek) - 2 * var(--gap));
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    outline: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.07);
    transition: opacity .4s ease, box-shadow .3s ease;
    opacity: .55;
}
.card.active {
    opacity: 1;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.08);
}

.card .card-img {
    width: 100%;
    height: clamp(160px, 30vw, 780px);
    object-fit: cover;
    display: block;
}

.card-body  { padding: clamp(16px, 2vw, 28px) clamp(20px, 2.5vw, 32px); }
.card-title { font-size: clamp(15px, 1.4vw, 22px); font-weight: 600; color: #111; line-height: 1.35; text-align: center; }
.card-desc  { margin-top: 8px; font-size: clamp(12px, 1vw, 16px); color: rgba(0,0,0,.48); line-height: 1.6; }

/* ── 컨트롤 (화살표 + 점 + 카운터) ── */
.controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(20px, 3vw, 32px) var(--peek) 0;
}

.arr {
    flex-shrink: 0;
    width: clamp(38px, 4vw, 52px);
    height: clamp(38px, 4vw, 52px);
    border-radius: 50%;
    border: none;
    background: rgba(144,0,206,.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .15s, opacity .2s;
}
.arr:hover:not(:disabled) { background: rgba(144,0,206,.18); transform: scale(1.09); }
.arr:disabled { opacity: .28; cursor: default; transform: none !important; }
.arr svg { width: 18px; height: 18px; stroke: #5d3895; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.dots { flex: 1; display: flex; align-items: center; gap: 7px; }
.dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0,0,0,.18); border: none; padding: 0; cursor: pointer;
    transition: width .28s ease, background .22s ease;
}
.dot.on { width: 26px; border-radius: 4px; background: #5d3895; }

.counter { flex-shrink: 0; font-size: clamp(12px, 1vw, 15px); color: rgba(0,0,0,.38); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 768px) {
    .card { flex-basis: clamp(230px, 76vw, 480px); }
}
@media (max-width: 480px) {
    .card { flex-basis: 83vw; }
}