.func_section {
    padding: clamp(69px, 4.5vw, 103px) 6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 20.77%, rgba(222, 229, 238, 0.80) 100%);
    overflow: hidden;
}

.func_section__label {
    width: clamp(168px, 11vw, 252px);
    height: clamp(30px, 1.8vw, 40px);
    border: 1.5px solid #196FB7;
    border-radius: clamp(65px, 3.9vw, 80px);
    color: #303030;
    text-align: center;
    font-style: normal;
    font-weight: 300;
    display: flex; align-items: center; justify-content: center;
}

.func_section__title {
    margin: clamp(21px, 1.8vw, 49px) 0 clamp(46px, 4vw, 108px);
    color: #212121;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
}

.func_section__label.visible { opacity: 1; transform: translateY(0); }
.func_section__title.visible { opacity: 1; transform: translateY(0); }

.func_text {
    text-align: center;
    margin-bottom: clamp(23px, 1.5vw, 35px);
}

.func_section__subtitle {
    opacity: 0;
    color: #212121;
    text-align: center;
    font-style: normal;
    font-weight: 400;
}

.func_section__headline {
    opacity: 0;
    color: #001B60;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
}

.func_text.tv .func_section__subtitle,
.func_text.tv .func_section__headline { opacity: 1; transform: none; }

.func_text.text-in .func_section__subtitle,
.func_text.text-in .func_section__headline {
    opacity: 1;
    transform: translateY(0);
}

.gallery-stage {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    touch-action: pan-y; /* 세로 스크롤만 허용 */
}
.gallery-stage:active { cursor: grabbing; }

:root {
    --center-w: clamp(756px, 49.6vw, 1134px); /* 중앙 이미지 너비 */
    --near-w: calc(var(--center-w) * 761 / 946); /* 중앙과 가까운 좌우 이미지 너비 */
    --far-w: calc(var(--center-w) * 327 / 473); /* 중앙과 먼 좌우 이미지 너비 */

    --center-h: calc(var(--center-w) * 83 / 108);  /* 중앙 이미지 높이 */
    --near-h: calc(var(--near-w) * 39 / 71);  /* 앙과 가까운 좌우 이미지 높이 */
    --far-h: calc(var(--far-w) * 101 / 184);  /* 중앙과 먼 좌우 이미지 높이 */

    --near-offset: calc(var(--center-w) * 0.4); /* 중앙 이미지와 가까운 이미지 간격 */
    --far-offset: calc(var(--center-w) * 0.8); /* 중앙 이미지와 먼 이미지 간격 */
    --hidden-offset: calc(var(--center-w) * 1.6); /* 화면 밖으로 나가는 숨겨진 아이템의 위치 */
}

.gallery-track {
    position: relative;
    width: 100%;
    height: var(--center-h);
}

/* ════════════════════════════════════════
   CENTER (고정, 움직이지 않음)
   - .ci--center 는 항상 pos 0 위치에 고정
   - 모니터 프레임(.ci__monitor)이 앞에 덮임
   - 화면 영역(.ci__screen)에 슬라이드별 이미지가 들어감
════════════════════════════════════════ */
.ci--center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: var(--center-w);
    height: var(--center-h);
    z-index: 5;
    pointer-events: none;
    /* 움직이지 않으므로 transition 없음 */
}

/* 모니터 안쪽 화면 영역 — 실제 모니터 프레임 이미지에 맞게 top/left/right/bottom 조정 */
.ci__screen {
    position: absolute;
    top: 4.5%;
    left: 7.8%;
    right: 7.8%;
    bottom: 17%;
    overflow: hidden;
    border-radius: 4px;
    background: #1a1c22; /* 이미지 로드 전 배경 */
}

.ci__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
}

/* 모니터 프레임 — 화면 이미지 위에 덮음 */
.ci__monitor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    display: block;
}

/* ════════════════════════════════════════
   SIDE ITEMS (.ci, data-slide 있는 것들)
   lf(5) ln(4) [center] rn(1) rf(2)
════════════════════════════════════════ */
.ci {
    position: absolute;
    top: 50%;
    overflow: hidden;
    will-change: left, width, opacity, transform;
    transition:
        left      0.65s cubic-bezier(0.4, 0, 0.2, 1),
        width     0.65s cubic-bezier(0.4, 0, 0.2, 1),
        height    0.65s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.65s ease;
}

.ci img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.ci:not([data-pos="0"]) {
    background-color: lightgray;
}

/* RIGHT NEAR (pos 1) */
.ci[data-pos="1"] {
    width: var(--near-w);
    height: var(--near-h);
    left: calc(50% + var(--near-offset));
    transform: translateX(-50%) translateY(-52%);
    opacity: 0.7;
    box-shadow: -2px 6px 16px 0 rgba(59, 68, 90, 0.20);
    z-index: 3;
}

/* RIGHT FAR (pos 2) */
.ci[data-pos="2"] {
    width: var(--far-w);
    height: var(--far-h);
    left: calc(50% + var(--far-offset));
    transform: translateX(-50%) translateY(-38%);
    opacity: 0.2;
    box-shadow: 0 4px 4px 0 rgba(59, 68, 90, 0.10);
    z-index: 1;
}

/* HIDDEN RIGHT (pos R) */
.ci[data-pos="R"] {
    width: var(--far-w);
    height: var(--far-h);
    left: calc(50% + var(--hidden-offset));
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* LEFT NEAR (pos 4) */
.ci[data-pos="4"] {
    width: var(--near-w);
    height: var(--near-h);
    left: calc(50% - var(--near-offset));
    transform: translateX(-50%) translateY(-52%);
    opacity: 0.7;
    box-shadow: 2px 6px 16px 0 rgba(59, 68, 90, 0.20);
    z-index: 3;
}

/* LEFT FAR (pos 5) */
.ci[data-pos="5"] {
    width: var(--far-w);
    height: var(--far-h);
    left: calc(50% - var(--far-offset));
    transform: translateX(-50%) translateY(-38%);
    opacity: 0.2;
    box-shadow: 0 4px 4px 0 rgba(59, 68, 90, 0.10);
    z-index: 1;
}

/* HIDDEN LEFT (pos L) */
.ci[data-pos="L"] {
    width: var(--far-w);
    height: var(--far-h);
    left: calc(50% - var(--hidden-offset));
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.ci[data-pos="H"] {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    /* 위치도 숨김 위치로 고정 */
    left: calc(50% + var(--hidden-offset));
    transform: translateX(-50%) translateY(-50%);
    width: var(--far-w);
    height: var(--far-h);
}

/* ══════════════════════════════════════════
   DOTS
══════════════════════════════════════════ */
.slider-dots {
    margin-top: clamp(14px, 0.95vw, 22px);
    display: flex;
    gap: clamp(8px, 0.5vw, 12px);
    justify-content: center;
}
.dot {
    width: clamp(8px, 0.5vw, 12px);
    height: clamp(8px, 0.5vw, 12px);
    border-radius: 50%;
    background: #c0cfe0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}
.dot.active { background: #196FB7; transform: scale(1.4); }
.dot.played { background: #7ba8d0; }

/* ══════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════ */
.slide-progress {
    margin-top: clamp(12px, 0.8vw, 18px);
    width: clamp(207px, 13.6vw, 311px);
    height: 2px;
    background: #dde4ef;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
}
.slide-progress-bar {
    width: 0%;
    height: 100%;
    background: #196FB7;
    border-radius: 2px;
}

@media (max-width: 767px) {
    :root {
        --center-w: 92vw; /* 중앙 이미지 너비 */
    }
}