/* WTP painted-door — 홈 준비도 카드 하단(무료 정보 아래). plan/wtp-purrfect-marble.md
   카드-내부 보조 톤(§4.13: 홈 강 CTA 1개, 추천 카드 CTA와 시각 경쟁 금지). 토큰 전용.
   버튼은 약하게(홈 primary=문제풀이와 경쟁 방지). */

.rl-wtp-door {
    margin-top: var(--rl-sp-4);
    padding-top: var(--rl-sp-4);
    border-top: 1px solid var(--rl-line);
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-2);
}

.rl-wtp-door__title {
    margin: 0;
    font-size: var(--rl-fs-body);
    font-weight: 700;
    color: var(--rl-text);
    letter-spacing: var(--rl-ls-body);
}

.rl-wtp-door__desc {
    margin: 0;
    font-size: var(--rl-fs-caption);
    line-height: var(--rl-lh-relaxed);
    color: var(--rl-text-3);
}

.rl-wtp-door__points {
    margin: 0;
    padding-left: var(--rl-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-1);
    font-size: var(--rl-fs-caption-sm);
    color: var(--rl-text-2);
}
.rl-wtp-door__points li { list-style: disc; }

.rl-wtp-door__price {
    margin: var(--rl-sp-1) 0 0;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
}
.rl-wtp-door__price b {
    font-size: var(--rl-fs-body);
    font-weight: 800;
    color: var(--rl-text);
    letter-spacing: var(--rl-ls-tight);
}

.rl-wtp-door__ask {
    margin: 0;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-2);
}

.rl-wtp-door__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rl-sp-2);
    margin-top: var(--rl-sp-1);
}

/* 단계 스택 — 숨김 단계도 공간 점유(그리드 겹침) → 전환 시 높이 불변·레이아웃 흔들림 0.
   버튼은 셀 하단 고정(align-self:end) → stage2의 "알림?" 문구가 버튼 위에 붙어도 버튼 위치 불변.

   모션 방향(절제): 조용한 "검토 중" 프롬프트라 세일즈 위젯처럼 튀지 않게.
   컨트롤(버튼)은 제자리에서 크로스페이드(opacity)만, 새로 등장하는 텍스트(질문·완료)만 아주 살짝
   떠올라 정착 → 질문 단계가 앞으로 진행되는 느낌을 담백하게. transform은 리플로 없음(흔들림 0). */
.rl-wtp-door__interact { display: grid; }
/* iOS WebKit: 자체 합성 레이어 미승격 다행 텍스트의 opacity 페이드는 매 프레임 재래스터로 잔상·버벅임(뚝딱)을
   낸다(스터디룸 롤링 rl_home_command.css 동일 원인). 크로스페이드되는 각 단계를 translateZ(0)으로 GPU 레이어에
   승격 → 텍스트 1회 래스터 후 레이어 통째로 페이드해 잔상 제거(will-change:opacity 힌트·backface 안정화 동반). */
.rl-wtp-door__interact > * {
    grid-area: 1 / 1;
    align-self: end;
    transition: opacity var(--rl-dur-base) var(--rl-ease-out);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}
.rl-wtp-door__interact [hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 페이드아웃 끝난 뒤 visibility 적용(0s 지연) — 페이드 잘림 방지. */
    transition: opacity var(--rl-dur-base) var(--rl-ease-out), visibility 0s linear var(--rl-dur-base);
}
/* 새로 등장하는 텍스트만 살짝 떠오르며 정착(버튼은 안 건드림).
   rise(translate)+fade 내내 자체 GPU 레이어 유지 → 페이드 잔상 제거 + rise를 GPU 합성으로(위 승격과 동일 원리).
   rise는 translate3d로 두 상태 모두 3D 승격 유지(2D↔3D 왕복 시 레이어 재생성 히컵 방지). */
.rl-wtp-door__ask,
.rl-wtp-door__done {
    transition: opacity var(--rl-dur-base) var(--rl-ease-out),
                transform var(--rl-dur-base) var(--rl-ease-out);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}
.rl-wtp-door__interact [hidden] .rl-wtp-door__ask,
.rl-wtp-door__interact > [hidden].rl-wtp-door__done {
    transform: translate3d(0, var(--rl-sp-1), 0);
}
@media (prefers-reduced-motion: reduce) {
    .rl-wtp-door__interact > *,
    .rl-wtp-door__interact [hidden],
    .rl-wtp-door__ask,
    .rl-wtp-door__done { transition: none; transform: none; }
}

/* 버튼 — 누르기 전 두 버튼 완전 동일(텍스트만 다름), 좌우 폭 동일(각 50%), 낮은 톤. */
.rl-wtp-door__btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: var(--rl-sp-2) var(--rl-sp-3);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-sm);
    background: transparent;
    color: var(--rl-text-2);
    font-size: var(--rl-fs-caption);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--rl-dur-micro) var(--rl-ease-out),
                background var(--rl-dur-micro) var(--rl-ease-out),
                color var(--rl-dur-micro) var(--rl-ease-out);
}
.rl-wtp-door__btn:hover { border-color: var(--rl-primary); }
/* 누름 표시(:active 즉시 + .is-selected 전환 직전). */
.rl-wtp-door__btn:active,
.rl-wtp-door__btn.is-selected {
    border-color: var(--rl-primary);
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

.rl-wtp-door__done {
    margin: 0;
    align-self: center;
    padding: var(--rl-sp-2) var(--rl-sp-3);
    background: var(--rl-good-soft);
    border-radius: var(--rl-r-sm);
    font-size: var(--rl-fs-caption);
    color: var(--rl-good-text);
    text-align: center;
}

.rl-wtp-door__notice {
    margin: var(--rl-sp-1) 0 0;
    font-size: var(--rl-fs-caption-sm);
    line-height: var(--rl-lh-relaxed);
    color: var(--rl-text-3); /* 반발 방지 핵심 문구 — 너무 흐리지 않게(가독성 확보). */
}