/* ============================================================
   소중함인사이트 테마엔진 v2 — te-fx 월드클래스 컴포넌트 킷 (2026-07-05)
   Apple/Stripe/Linear급 인터랙션. 전부 바닐라·테마변수(--te-*) 연동.
   theme-engine.css + theme-engine.js 이후 로드. JS는 te-fx.js.
   접근성: prefers-reduced-motion 존중.
   ============================================================ */

/* ---- Glassmorphism 2.0 (Stripe/Linear) ---- */
.te-glass{
  background:color-mix(in srgb,var(--te-card) 66%,transparent);
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid var(--te-line); border-radius:var(--te-radius);
  box-shadow:0 14px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- Bento Grid (Stripe) ---- */
.te-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:minmax(150px,auto)}
.te-bento>*{border-radius:var(--te-radius);overflow:hidden}
.te-bento .b-w2{grid-column:span 2}
.te-bento .b-w3{grid-column:span 3}
.te-bento .b-h2{grid-row:span 2}
@media(max-width:820px){.te-bento{grid-template-columns:1fr 1fr}.te-bento .b-w3{grid-column:span 2}}
@media(max-width:520px){.te-bento{grid-template-columns:1fr}.te-bento .b-w2,.te-bento .b-w3{grid-column:span 1}}

/* ---- Infinite Marquee (신뢰 로고/키워드 스트립) ---- */
.te-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.te-marquee-track{display:flex;gap:44px;width:max-content;align-items:center;animation:te-marq var(--te-marq-dur,28s) linear infinite}
.te-marquee:hover .te-marquee-track{animation-play-state:paused}
@keyframes te-marq{to{transform:translateX(-50%)}}

/* ---- Animated / Dynamic Gradient ---- */
.te-anim-grad{background:linear-gradient(120deg,var(--te-accent),var(--te-accent2),var(--te-accent));background-size:220% 220%;animation:te-grad 9s ease infinite}
.te-anim-grad-text{background:linear-gradient(120deg,var(--te-accent),var(--te-accent2),var(--te-accent));background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:te-grad 6s linear infinite}
@keyframes te-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* mesh/aurora 배경 광 (히어로용) */
.te-aurora{position:relative;overflow:hidden}
.te-aurora::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 40% at 72% 18%,color-mix(in srgb,var(--te-accent) 22%,transparent),transparent 70%),
            radial-gradient(36% 40% at 12% 88%,color-mix(in srgb,var(--te-accent2) 20%,transparent),transparent 70%);
  animation:te-float 14s ease-in-out infinite}
@keyframes te-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2%) scale(1.05)}}

/* ---- Magnetic Button + Tilt Card (JS 연동) ---- */
.te-magnetic{transition:transform .22s cubic-bezier(.2,.7,.2,1);will-change:transform}
.te-tilt{transition:transform .18s ease;will-change:transform;transform-style:preserve-3d}

/* ---- Micro-interaction: active scale (Linear) ---- */
.te-btn:active,.te-magnetic:active,.te-press:active{transform:scale(.97)}

/* ---- Skeleton shimmer (로딩) ---- */
.te-skeleton{background:linear-gradient(90deg,var(--te-card) 25%,var(--te-card2) 50%,var(--te-card) 75%);background-size:200% 100%;animation:te-shimmer 1.4s infinite;border-radius:8px}
@keyframes te-shimmer{to{background-position:-200% 0}}

/* ---- Sticky scroll storytelling (Apple) ---- */
.te-sticky{position:sticky;top:88px}

/* ---- Scroll progress bar (상단) ---- */
.te-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--te-grad);z-index:300;box-shadow:0 0 12px var(--te-line2)}

/* ---- Spotlight hover (카드에 커서 광) ---- */
.te-spot{position:relative;overflow:hidden}
.te-spot::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--te-accent) 16%,transparent),transparent 60%)}
.te-spot:hover::after{opacity:1}

/* ---- Full-bleed hero helper ---- */
.te-hero-full{min-height:min(88vh,760px);display:flex;align-items:center;position:relative}

/* ---- 접근성 ---- */
@media(prefers-reduced-motion:reduce){
  .te-marquee-track,.te-anim-grad,.te-anim-grad-text,.te-aurora::before{animation:none}
  .te-magnetic,.te-tilt{transition:none}
}