/* ============================================================
   tpr_bright.css — TPR 페이지 bright 통일 (초안, 리뷰용)
   2026-05-26 · Claude Code
   - home_bright_renewal.css 패턴 확장(lp_v4 클래스 !important 오버라이드).
   - 하이브리드: 밝은 본문 셸 + 액션 스테이지(.hero)는 다크 유지(=의도).
   - 적용 대상: tpr.html (lp_v4 클래스). tpr_multimodal은 §3 참고(별도 시스템).
   ⚠️ 라이브 미적용. 동시 작업자(home_bright_renewal 소유)와 통합/검토 후 적용.
   ⚠️ 스크린샷 검증 불가 상태에서 작성 → 적용 시 실기기 시각 확인 필수.
   ============================================================ */

/* ---- 1. 공통 셸 (home_bright_renewal과 동일 톤) ---- */
body{ background:#eef3fb!important; color:#0f172a!important; }
body:has(.frame){
  background:
    linear-gradient(90deg,rgba(28,94,168,.05) 1px,transparent 1px),
    linear-gradient(rgba(28,94,168,.05) 1px,transparent 1px),
    #f4f7fb!important;
  background-size:44px 44px!important;
}
.frame{
  background:#f5f7fb!important; color:#0f172a!important;
  box-shadow:0 18px 50px rgba(31,78,121,.16)!important;
}
.status,.signals{ color:#475569!important; }

/* ---- 2. 학습 페이지 공용 (tpr.html · words.html · learn.html) ---- */

/* 헤더(.head-back / .head) + 섹션 제목 */
.head-back h1,.head h1,.sec h3{ color:#0f172a!important; }
.head-back .back{ color:#1f4e79!important; }
.eyebrow{ color:#1f4e79!important; letter-spacing:.08em!important; }
.sec .sub,.h-row .sub{ color:#667085!important; }

/* 코인/스트릭 pill */
.pill-coin{ background:#fff!important; color:#9a6b00!important; border:1px solid rgba(255,193,7,.4)!important; }
.pill-fire{ background:#fff4e6!important; color:#c2570c!important; }

/* 액션 스테이지(.hero) — 다크 유지(하이브리드 핵심) */
.hero{
  background:
    radial-gradient(circle at 82% 12%,rgba(45,229,210,.24),transparent 25%),
    linear-gradient(145deg,#164f91,#081735 72%)!important;
  border:1px solid rgba(45,229,210,.22)!important;
  box-shadow:0 18px 34px rgba(8,23,53,.22)!important;
  color:#fff!important;
}
.hero .lv{ color:#5df4e4!important; }
.hero h2{ color:#fff!important; }
.hero p{ color:rgba(255,255,255,.78)!important; }
/* 히어로 내부 인라인 박스(background:var(--card-2)/rgba(0,0,0,.25))는 다크 위라 그대로 가독 OK */

/* 액션 미션 카드(.tile / .tile.lg) — home의 .row/.stat 대응 */
.tile,.tile.lg,.row{
  background:#fff!important; color:#0f172a!important;
  border:1px solid rgba(31,78,121,.1)!important;
  box-shadow:0 10px 24px rgba(31,78,121,.08)!important;
}
.tile .t,.row .t{ color:#0f172a!important; }
.tile .m,.row .m{ color:#667085!important; }
/* 카드 내 +20L(mint)·BEST(gold)·HOT(pink) 배지는 액센트 유지 */

/* 카테고리 칩(.chip) */
.chip{ background:#fff!important; color:#475569!important; border:1px solid rgba(31,78,121,.12)!important; }
.chip.on{ background:#1f4e79!important; color:#fff!important; border-color:#1f4e79!important; }

/* 상태 안내 박스(#wordStatus 등) — 라이트로 */
#wordStatus{ background:rgba(54,199,189,.08)!important; color:#0f6e56!important; border-color:rgba(54,199,189,.3)!important; }
/* 채팅 입력 인풋 라이트 (conversation) */
.input{ background:#fff!important; color:#0f172a!important; border:1px solid #dbe3ef!important; }

/* 탭바 */
.tabbar{ background:rgba(255,255,255,.94)!important; border-top:1px solid rgba(31,78,121,.12)!important; box-shadow:0 -14px 32px rgba(31,78,121,.12)!important; }
.tabbar .tab{ color:#667085!important; }
.tabbar .tab.on{ color:#1f4e79!important; }

/* btn-mint(시작하기)는 mint 액센트 유지 — 별도 변경 불필요 */

/* ============================================================
   3. tpr_multimodal.html (레거시 lp_design 시스템 — 별도)
   - 이미 라이트 카드 기반 + brand 색 mint 정합 완료(라이브 반영됨).
   - bright 통일 추가 점검 항목(여기 규칙은 미작성, 실측 후 보강 권장):
     · 전체 body/.lp-app 배경을 위 셸 톤(#f4f7fb)으로 맞춤
     · .ae-mini-hero / .lp-header 가 라이트인지(외부 lp_design 클래스라 소스 확인 필요)
     · 카메라 스테이지(.mm-stage)는 다크 유지(영상 스테이지)
     · 결과 모달(.mm-result-card)은 라이트 유지 + mint/gold 액센트(정합됨)
   - lp_design 외부 클래스 의존이라 lp_v4-only 재구축 또는 실기기 검증 후 보강.
   ============================================================ */

/* ============================================================
   4. 데스크톱 폰 프레임 양옆 브랜드 워터마크 (≥1100px)
   - 앱 화면은 모바일 폰 프레임 유지(부분 분리 전략). 데스크톱 넓은 여백을
     은은한 브랜드 요소로 채워 "빈 그리드" 허전함 완화. 폰 프레임/콘텐츠 무간섭.
   ============================================================ */
@media (min-width:1100px){
  .frame{ position:relative; z-index:1; }
  body:has(.frame)::before{
    content:"⚡ 액션영어";
    position:fixed; left:6vw; top:50%; transform:translateY(-50%) rotate(-2deg);
    font-family:'Black Han Sans','Jua',sans-serif; font-size:54px; line-height:1.1;
    color:#1f4e79; opacity:.13; white-space:nowrap; pointer-events:none; z-index:0;
  }
  body:has(.frame)::after{
    content:"몸으로 배우는\00000a진짜 영어.\00000a\00000a📱 휴대폰에 최적화";
    position:fixed; right:6vw; top:50%; transform:translateY(-50%);
    font-family:'Pretendard',sans-serif; font-size:19px; font-weight:700; line-height:1.7;
    color:#475569; opacity:.5; white-space:pre; text-align:right; pointer-events:none; z-index:0;
  }
}