:root {
    --section-side-content-max: 1600px;
    --section-side-content-gap: 25px;
    --section-side-min-edge: 16px;
    --section-side-width: 28px;
    --section-side-top-offset: 80px;
    --section-side-bottom-offset: 80px;
    --section-side-label-size: 10px;
    --section-side-letter-spacing: .12em;
    --section-side-line-top: 68px;
    --section-side-line-bottom: 54px;
    --section-side-dot-size: 8px;
    --section-side-arrow-size: 18px;
    --section-side-accent: #1476ff;
}

.section-side-ornament {
    position: absolute;
    z-index: 4;
    top: 0;
    right: var(--section-side-min-edge);
    right: max(
        var(--section-side-min-edge),
        calc((100% - var(--section-side-content-max)) / 2 - var(--section-side-width) - var(--section-side-content-gap))
    );
    width: var(--section-side-width);
    height: 100%;
    color: rgba(20, 20, 20, .72);
    font-family: var(--font-sans, Pretendard, sans-serif);
    pointer-events: none;
    user-select: none;
}

.section-side-ornament__top,
.section-side-ornament__bottom {
    position: absolute;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translateX(-50%);
}

.section-side-ornament__top { top: var(--section-side-top-offset); }
.section-side-ornament__bottom { bottom: var(--section-side-bottom-offset); }

.section-side-ornament__label {
    font-size: var(--section-side-label-size);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--section-side-letter-spacing);
    text-orientation: mixed;
    writing-mode: vertical-rl;
}

.section-side-ornament__line {
    display: block;
    width: 1px;
    flex: 0 0 auto;
    background: rgba(20, 20, 20, .35);
}

.section-side-ornament__line--top { height: var(--section-side-line-top); }
.section-side-ornament__line--bottom { height: var(--section-side-line-bottom); }

.section-side-ornament__dot {
    display: block;
    width: var(--section-side-dot-size);
    height: var(--section-side-dot-size);
    border-radius: 50%;
    background: var(--section-side-accent);
}

.section-side-ornament__arrow {
    color: var(--section-side-accent);
    font-size: var(--section-side-arrow-size);
    font-weight: 300;
    line-height: 1;
}

.section-side-ornament--dark { color: rgba(255, 255, 255, .62); }
.section-side-ornament--dark .section-side-ornament__line { background: rgba(255, 255, 255, .4); }

@media (max-width: 767px) {
    .section-side-ornament { display: none; }
}