:root {
    /* 기본값 – 관리자에서 섹션 인라인 스타일로 덮어씁니다 */
    --th2-card-w: clamp(240px, 24vmin, 520px);
    --th2-card-h: clamp(320px, 34vmin, 720px);
    --th2-offset-y: 0px;
}

.th2_stage {
    position: relative;
    width: 100%;
    height: var(--th2-height, 100vh);
    /* 100vh 고정 */
    min-height: 560px;
    user-select: none;
    isolation: isolate;
    background: var(--th2-bg, #f3f4f6);
    color: var(--th2-ink, #0d0f14);
    margin: 0;
    padding: 0;

    /* 영역 밖을 잘라내 피크만 보이게 */
    overflow: clip;
    overscroll-behavior: contain;

    /* 있으면 사용하는 네이티브 스냅(없어도 JS 스냅이 동작) */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.th2_stage.th2_has_peek {
    /* 아래로 갈수록 투명 → 하단만 페이드아웃 */
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) calc(100% - var(--th2-peek, 24px)),
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) calc(100% - var(--th2-peek, 24px)),
            rgba(0, 0, 0, 0) 100%);
}

/* 전역 잠금 중 터치 차단 */
.th2_stage.th2_locking {
    touch-action: none;
}

.th2_card {
    position: absolute;
    width: var(--th2-card-w);
    height: var(--th2-card-h);
    padding: 28px 28px 22px;
    border-radius: 22px;
    background: var(--th2-card-bg, #fff);
    color: var(--th2-ink, #0d0f14);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .12);
    transform-origin: 50% 100%;
    /* 하단 중앙 회전 */
    opacity: 0;
    transform: translate(-50%, -100%) translate3d(-9999px, -9999px, 0);
    transition:
        transform 520ms cubic-bezier(.22, .8, .28, 1),
        opacity 300ms ease,
        filter 300ms ease;
    will-change: transform, opacity, filter;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    contain: layout paint;
    z-index: 1;
}

/* (REPLACE) 태그: 1열 세로 스택 + 박스 스타일 */
.th2_card .th2_tags {
    display: flex;
    flex-direction: column;
    /* 1열 세로 */
    row-gap: var(--th2-tag-gap-v, 10px);
    margin: var(--th2-tag-m, 8px 0 0 0);
    align-items: flex-start;
}

.th2_card .th2_tag {
    /* 각 태그가 ‘자기 콘텐츠 + 패딩’만큼만 차지하도록 */
    display: inline-flex;
    align-self: flex-start;
    /* 부모가 flex여도 가로로 늘어나지 않게 */
    box-sizing: border-box;
    width: fit-content;
    /* 콘텐츠 기반 너비 */
    max-width: 100%;
    /* min-width를 쓰지 말아야 개별 길이 기준으로 줄어듭니다 */
    /* min-width: var(--th2-tag-box-w, auto);  ← 제거 */
    justify-content: center;
    /* 텍스트 중앙 정렬 */
    text-align: center;

    background: var(--th2-tag-bg, var(--th2-chip-bg, #e8f0ff));
    color: var(--th2-tag-fg, var(--th2-chip-fg, #2053c7));
    border-radius: var(--th2-tag-radius, 9999px);
    padding: var(--th2-tag-pad-y, 8px) var(--th2-tag-pad-x, 14px);
    font: inherit;
    font-weight: var(--th2-tag-fw);
    font-size: var(--th2-tag-fs);
    letter-spacing: var(--th2-tag-ls);
    line-height: var(--th2-tag-lh);
}

@media (prefers-reduced-motion: reduce) {
    .th2_card {
        transition: none
    }
}

/* 카드 묶음은 오버레이 아래에 있어도 보이지만, 명시적으로 한 단계 아래 두면 안전 */
.th2_arc_mount {
    position: absolute;
    inset: 0;
    transform: translateY(var(--th2-offset-y, 0px));
    will-change: transform;
    z-index: 1;
}

.th2_card .th2_title {
    font-family: var(--th2-title-ff);
    font-size: var(--th2-title-fs);
    color: var(--th2-title-col);
    letter-spacing: var(--th2-title-ls);
    font-weight: var(--th2-title-fw);
    line-height: var(--th2-title-lh);
    margin: var(--th2-title-m);
}

/* 타이틀 숫자 색상 분리 */
.th2_card .th2_title .th2_title_num {
    color: var(--th2-title-num-col, currentColor);
}

.th2_card .th2_price {
    font-family: var(--th2-price-ff);
    font-size: var(--th2-price-fs);
    color: var(--th2-price-col);
    letter-spacing: var(--th2-price-ls);
    font-weight: var(--th2-price-fw);
    line-height: var(--th2-price-lh);
    margin: var(--th2-price-m, auto 0 0 0);
}

.th2_card .th2_tags,
.th2_card .th2_tag {
    font-family: var(--th2-tag-ff);
    font-size: var(--th2-tag-fs);
    color: var(--th2-tag-col);
    letter-spacing: var(--th2-tag-ls);
    font-weight: var(--th2-tag-fw);
    line-height: var(--th2-tag-lh);
}

.th2_stage[data-price-anchor="top"] .th2_card .th2_price {
    position: absolute;
    top: var(--th2-price-top, 0);
    left: var(--th2-price-left, 0);
    right: var(--th2-price-right, auto);
    margin: 0 !important;
}