/* TP_FX — 레이아웃/성능 힌트만 (색·타이포는 사이트 CSS) */

[data-fx].tp-fx-ready {
    will-change: transform, opacity, filter;
}

/*
 * border-collapse:collapse 는 opacity/visibility 로도 셀 보더가 안 사라짐.
 * data-fx 가 걸린 테이블만 separate + spacing 0 으로 맞춤 (일반 테이블 레이아웃 동일).
 */
table:has([data-fx]),
table:has([data-fx-item]) {
    border-collapse: separate;
    border-spacing: 0;
}

/* blur 종료 후 will-change:filter 잔여 레이어 흐림 방지 */
[data-fx].tp-fx-done {
    will-change: auto;
}

/* grow / shrink — 왼쪽·하단 고정, 우상↔좌하로 크기 변화 */
[data-fx="grow"],
[data-fx="shrink"],
[data-fx="grow-fade"],
[data-fx="shrink-fade"],
.tp-fx-size {
    transform-origin: 0% 100%;
    backface-visibility: hidden;
}

/*
 * TP_FX가 만든 안쪽 span — 사이트 규칙(.title-h4 span 등)에 안 먹히고
 * 부모(h2/h3/h4/a…) 타이포·색 상속 (text-roll / typing / chars-up 공통)
 */
.tp-fx-text-roll > .tp-fx-text-roll-inner,
.tp-fx-text-roll > .tp-fx-text-roll-inner > .tp-fx-text-roll-face,
.tp-fx-chars > .is-line,
.tp-fx-chars .is-char {
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    text-transform: inherit !important;
    text-decoration: inherit !important;
    text-align: inherit !important;
    background: transparent !important;
}

.tp-fx-chars .is-char.is-bold {
    font-weight: 700 !important;
}

/* chars-up / typing — overflow로 클리핑, 정렬은 호스트(h4 등) 상속 */
.tp-fx-chars {
    overflow: hidden;
    text-align: inherit;
}

.tp-fx-chars > .is-line {
    display: block;
    overflow: hidden;
    text-align: inherit;
    width: 100%;
}

.tp-fx-chars .is-char {
    display: inline-block;
    will-change: transform, filter;
    vertical-align: top;
}

/* text-roll — 호버 시 텍스트 롤 */
.tp-fx-text-roll:not(a) {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    max-width: 100%;
}

a.tp-fx-text-roll {
    /* navbar all:unset 등에 덮이지 않게 */
    overflow: hidden !important;
}

.tp-fx-text-roll > .tp-fx-text-roll-inner {
    display: block;
    position: relative;
    will-change: transform;
    box-sizing: border-box;
}

.tp-fx-text-roll > .tp-fx-text-roll-inner > .tp-fx-text-roll-face {
    display: block;
    position: relative;
    box-sizing: border-box;
}

.tp-fx-text-roll > .tp-fx-text-roll-inner > .tp-fx-text-roll-face.is-clone {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}

.tp-fx-text-roll.is-dir-down > .tp-fx-text-roll-inner > .tp-fx-text-roll-face.is-clone {
    top: auto;
    bottom: 100%;
}

/* text-fill — 좌→우 글자색 채움 (와이어드 mask-text) */
.tp-fx-fill {
    display: block;
}

.tp-fx-fill > .tp-fx-fill-line {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: 0;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    text-align: inherit !important;
}

.tp-fx-fill.is-center > .tp-fx-fill-line {
    margin-inline: auto;
}

.tp-fx-fill.is-right > .tp-fx-fill-line {
    margin-inline: 0 0 0 auto;
}

.tp-fx-fill > .tp-fx-fill-line > .tp-fx-fill-base,
.tp-fx-fill > .tp-fx-fill-line > .tp-fx-fill-mask {
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-align: inherit !important;
}

.tp-fx-fill > .tp-fx-fill-line > .tp-fx-fill-base {
    position: relative;
    color: inherit !important;
}

.tp-fx-fill > .tp-fx-fill-line > .tp-fx-fill-mask {
    position: absolute;
    left: 50%;
    top: 0;
    width: 102%;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    will-change: clip-path;
    color: var(--tp-fx-fill-color, #ddd);
    background-color: var(--tp-fx-fill-mask-bg, #fff);
}