@roottale/cms-renderer-next 0.43.0 → 0.45.0

package/dist/templates.css

@@ -1461,6 +1461,156 @@
   color: var(--muted-foreground);
 }
 
+/* ── testimonials: star-compact (W8-7 — 별점 중심 컴팩트 그리드) ──────────── */
+
+/* 별점 = CSS 타이포 글리프(U+2605) 이중 레이어 — 이모지·이미지 금지(AI-slop
+ * 10항 유지). 채움 폭은 데이터(rating/5)가 --rt-testimonials-star-fill 로
+ * 주입, 색은 전부 토큰(variant×토큰 직교). */
+[data-roottale-tpl="testimonials"] :where(.rt-tpl-testimonials-stars) {
+  position: relative;
+  display: inline-block;
+  font-size: var(--rt-testimonials-star-size, 1rem);
+  line-height: 1;
+  letter-spacing: 0.1em;
+  white-space: nowrap;
+}
+
+[data-roottale-tpl="testimonials"] :where(.rt-tpl-testimonials-stars-base) {
+  color: color-mix(in srgb, var(--foreground) 22%, transparent);
+}
+
+[data-roottale-tpl="testimonials"] :where(.rt-tpl-testimonials-stars-fill) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: var(--rt-testimonials-star-fill, 100%);
+  overflow: hidden;
+  color: var(--accent);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-summary) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-3);
+  margin-block-start: var(--space-6);
+  padding-block-end: var(--space-4);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-summary .rt-tpl-testimonials-stars) {
+  font-size: var(--rt-testimonials-star-size-summary, 1.25rem);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-average) {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 6cqi, 2.75rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--font-leading-tight);
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-count) {
+  font-size: var(--font-size-sm);
+  color: var(--muted-foreground);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-list) {
+  display: grid;
+  gap: 0 var(--rt-testimonials-star-list-gap, var(--space-8));
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@container (min-width: 44rem) {
+  [data-roottale-tpl="testimonials"][data-variant="star-compact"]
+    :where(.rt-tpl-testimonials-star-list) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 72rem) {
+  [data-roottale-tpl="testimonials"][data-variant="star-compact"]
+    :where(.rt-tpl-testimonials-star-list) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* 카드 아님 — hairline 상단 보더 행(균등 그림자 카드 금지, index-rows 계보). */
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-item) {
+  border-block-start: 1px solid var(--border);
+  padding-block: var(--space-5);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-quote) {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-head) {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-value) {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-text) {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-leading-normal);
+  word-break: keep-all;
+  color: var(--foreground);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-footer) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-author) {
+  font-style: normal;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  color: var(--foreground);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-context) {
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+}
+
+[data-roottale-tpl="testimonials"][data-variant="star-compact"]
+  :where(.rt-tpl-testimonials-star-meta) {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+}
+
 [data-roottale-tpl="team"] {
   container-type: inline-size;
 }
@@ -1766,6 +1916,12 @@
   color: var(--rt-color-primary);
 }
 
+[data-roottale-tpl="expertise"] :where(.rt-tpl-expertise-tab:focus-visible),
+[data-roottale-tpl="expertise"] :where(.rt-tpl-expertise-panel:focus-visible) {
+  outline: 2px solid var(--rt-color-ring, var(--rt-color-primary));
+  outline-offset: -2px;
+}
+
 [data-roottale-tpl="expertise"] :where(.rt-tpl-expertise-tab-label),
 [data-roottale-tpl="expertise"] :where(.rt-tpl-expertise-kicker) {
   margin: 0;
@@ -2249,6 +2405,101 @@
   }
 }
 
+/* ---- curtain transition (ADR-0086 P2 D3, chambarun 이식) ----
+ * 절대배치 스택 — 각 슬라이드가 clip-path 와이프로 스스로를 드러낸다(embla
+ * 가로 스크롤 없음). 타이밍·이징·클립 경로는 원본
+ * chambarun `assets/site.css` `@keyframes curtainReveal`/`.curtain-sheen` 값을
+ * 그대로 유지, 색만 하드코딩 헥스 대신 --rt-* 토큰으로 치환했다. */
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide) {
+  position: absolute;
+  inset: 0;
+  flex: none;
+  opacity: 0;
+  z-index: 0;
+  pointer-events: none;
+  clip-path: inset(0 0 0 0);
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide[data-leaving="true"]) {
+  opacity: 1;
+  z-index: 1;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide[data-active="true"]) {
+  opacity: 1;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide[data-active="true"]) {
+    animation: rt-hero-carousel-curtain-reveal 0.92s cubic-bezier(0.76, 0, 0.24, 1) both;
+  }
+}
+
+@keyframes rt-hero-carousel-curtain-reveal {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+/* 신 스윕 — 활성 슬라이드 위를 가로지르는 얇은 하이라이트 밴드. chambarun 은
+ * teal/green 2색 그라디언트였으나 고객사 테마마다 브랜드색이 달라 토큰
+ * 하나(primary-foreground)의 color-mix 농도 변화로 대체(대면적 채도 배색
+ * 하드코딩 금지 관행과 동일 이유). */
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-sheen) {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: 1;
+  inline-size: clamp(82px, 10cqi, 150px);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate3d(-160px, 0, 0);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 22%, transparent) 30%,
+    color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 58%, transparent) 48%,
+    color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 18%, transparent) 62%,
+    transparent 100%
+  );
+  mix-blend-mode: screen;
+  will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide[data-active="true"] .rt-tpl-hero-carousel-sheen) {
+    animation: rt-hero-carousel-curtain-sheen 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
+  }
+}
+
+@keyframes rt-hero-carousel-curtain-sheen {
+  0% {
+    opacity: 0;
+    transform: translate3d(-160px, 0, 0);
+  }
+  14% {
+    opacity: 0.82;
+  }
+  76% {
+    opacity: 0.68;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(100cqi, 0, 0);
+  }
+}
+
 /* 오버레이 eyebrow — 스크림 위에서는 테마 primary(잉크/민트)가 아니라 밝은
  * 전경색이어야 읽힌다(미감 라운드 2 — 민트 eyebrow 소실 실측). */
 [data-roottale-tpl="hero"][data-variant="carousel"]
@@ -2400,6 +2651,42 @@
   letter-spacing: 0.06em;
 }
 
+/* D4 — autoplay pause/재생 버튼: 도트·카운터와 같은 우측 클러스터에 절제된
+ * 크기로 둔다(화살표와 동일 언어이나 더 작게 — 보조 컨트롤이라는 위계). */
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-controls-right) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-playpause) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 28%, transparent);
+  background: color-mix(in srgb, var(--rt-color-foreground, #06162f) 24%, transparent);
+  color: var(--rt-color-primary-foreground, #ffffff);
+  cursor: pointer;
+  transition: background 180ms ease, border-color 180ms ease;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-playpause:hover) {
+  background: color-mix(in srgb, var(--rt-color-foreground, #06162f) 48%, transparent);
+  border-color: color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 45%, transparent);
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-playpause svg) {
+  inline-size: 0.85rem;
+  block-size: 0.85rem;
+}
+
 [data-roottale-tpl="hours"],
 [data-roottale-tpl="pricing"],
 [data-roottale-tpl="process"] {
@@ -3067,6 +3354,55 @@
   gap: 0.5rem;
 }
 
+/* 카피 스태거(chambarun `.hero-copy>*` 순차 등장, 타이밍 원본 유지) — curtain
+ * 전환에서만, 슬라이드 전환마다 패널이 `key` 로 리마운트되어 매번 재생된다. */
+@media (prefers-reduced-motion: no-preference) {
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide-panel > *) {
+    animation:
+      rt-hero-carousel-copy-in-opacity 0.68s cubic-bezier(0.45, 0, 0.2, 1) both,
+      rt-hero-carousel-copy-in-transform 0.72s cubic-bezier(0.2, 0.75, 0.25, 1) both;
+  }
+
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide-panel > *:nth-child(1)) {
+    animation-delay: 0.34s;
+  }
+
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide-panel > *:nth-child(2)) {
+    animation-delay: 0.44s;
+  }
+
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide-panel > *:nth-child(3)) {
+    animation-delay: 0.54s;
+  }
+
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel[data-transition="curtain"] .rt-tpl-hero-carousel-slide-panel > *:nth-child(n + 4)) {
+    animation-delay: 0.64s;
+  }
+}
+
+@keyframes rt-hero-carousel-copy-in-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rt-hero-carousel-copy-in-transform {
+  from {
+    transform: translateY(18px);
+  }
+  to {
+    transform: none;
+  }
+}
+
 [data-roottale-tpl="hero"][data-variant="carousel"]
   :where(.rt-tpl-hero-carousel-dots--tabs) {
   gap: 0.4rem;
@@ -3296,6 +3632,56 @@
   font-weight: 800;
 }
 
+/*
+ * 지도 클릭-투-로드 프리뷰(ADR-0086 P2 D3, `map.mapLoad === "click"`) —
+ * `.rt-tpl-contact-map` 와 같은 박스(aspect-ratio/border/radius)를 그대로
+ * 쓰고, 여기서는 배경 이미지·버튼·바깥 링크 배치만 얹는다.
+ */
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-click) {
+  position: relative;
+  display: grid;
+  place-items: center;
+  gap: 0.5rem;
+  background: var(--muted);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-click-bg) {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-click-btn) {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1rem;
+  border: 1px solid var(--rt-color-border);
+  border-radius: var(--rt-radius-md);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-click-btn:hover) {
+  background: color-mix(in srgb, var(--card) 85%, var(--rt-color-primary) 15%);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-click-external) {
+  position: relative;
+  z-index: 1;
+  font-size: 0.78rem;
+  color: var(--accent-foreground);
+  text-decoration: underline;
+  text-underline-offset: var(--space-1);
+}
+
 [data-roottale-tpl="contact"] :where(.rt-tpl-contact-actions) {
   display: flex;
   flex-wrap: wrap;
@@ -3350,22 +3736,238 @@
   text-decoration: none;
 }
 
+/* ============ team: expanding-stage — hover/focus/tap 확장 (D3, chambarun
+ * `.staff-stage`/`.staff-panel` 이식, mockup/assets/site.js·site.css 원본
+ * 참조). 접힌 패널은 이름 칩만, 활성 패널은 확장되며 자격정보 패널이 드러난다.
+ * 전환(transition) 선언은 전부 `prefers-reduced-motion: no-preference` 안에만
+ * 둔다 — reduce 시 애니메이션 없이 최종 상태로 즉시 전환(상태 자체는 그대로
+ * 바뀐다, ADR-0073 K3 C1 과 동일 관행). ============ */
+
 [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-stage) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
-  gap: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
   padding: 0;
   margin: 1.25rem 0 0;
   list-style: none;
 }
 
+@container (min-width: 46rem) {
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-stage) {
+    flex-direction: row;
+    block-size: clamp(24rem, 46cqi, 38rem);
+  }
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-item) {
+  position: relative;
+  flex: none;
+  block-size: 4.75rem;
+  min-inline-size: 0;
+  overflow: hidden;
+  border-radius: var(--rt-radius-lg, 1.5rem);
+  outline: none;
+  cursor: pointer;
+  background: var(--muted);
+  box-shadow: 0 0.75rem 1.75rem -1rem color-mix(in srgb, var(--foreground) 45%, transparent);
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-item[data-active="true"]) {
+  block-size: 26rem;
+}
+
+@container (min-width: 46rem) {
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-item) {
+    flex: 1 1 0;
+    block-size: auto;
+  }
+
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-item[data-active="true"]) {
+    flex-grow: 2.7;
+    block-size: auto;
+  }
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-item:focus-visible) {
+  outline: 2px solid var(--primary);
+  outline-offset: 3px;
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-photo) {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center top;
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-photo--initials) {
+  display: grid;
+  place-items: center;
+  color: var(--primary);
+  font-family: var(--rt-font-display, var(--rt-font-body, system-ui, sans-serif));
+  font-size: clamp(1.5rem, 8cqi, 2.5rem);
+  font-weight: 800;
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-item[data-active="true"] .rt-tpl-team-expanding-photo) {
+  filter: saturate(1.04) brightness(1.01);
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-name) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.75rem 0.9rem;
+  background: linear-gradient(
+    0deg,
+    color-mix(in srgb, var(--foreground) 78%, transparent),
+    transparent
+  );
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-name b) {
+  margin: 0;
+  color: var(--background);
+  font-family: var(--rt-font-display, var(--rt-font-body, system-ui, sans-serif));
+  font-size: 0.95rem;
+  font-weight: 800;
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-name span) {
+  color: color-mix(in srgb, var(--background) 78%, transparent);
+  font-size: 0.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-item[data-active="true"] .rt-tpl-team-expanding-name) {
+  opacity: 0;
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-detail) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: 3;
+  display: grid;
+  gap: 0.5rem;
+  padding: 1.75rem 1.25rem 1.25rem;
+  background: linear-gradient(
+    0deg,
+    color-mix(in srgb, var(--foreground) 92%, transparent) 0%,
+    color-mix(in srgb, var(--foreground) 55%, transparent) 55%,
+    transparent 100%
+  );
+  opacity: 0;
+  transform: translateY(1rem);
+  pointer-events: none;
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-item[data-active="true"] .rt-tpl-team-expanding-detail) {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-detail .rt-tpl-team-expanding-role) {
+  margin: 0;
+  color: color-mix(in srgb, var(--background) 70%, transparent);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-detail .rt-tpl-team-name) {
+  margin: 0;
+  color: var(--background);
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-detail .rt-tpl-team-specialties li) {
+  color: var(--background);
+  background: color-mix(in srgb, var(--background) 18%, transparent);
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-detail .rt-tpl-team-credentials li),
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-detail .rt-tpl-team-bio) {
+  color: color-mix(in srgb, var(--background) 85%, transparent);
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-detail .rt-tpl-team-credentials li)::before {
+  background: var(--primary);
+}
+
+[data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-detail .rt-tpl-team-cta) {
+  justify-self: start;
+  margin-top: 0.25rem;
+  padding: 0.55rem 0.9rem;
+  border-radius: 999px;
+  background: var(--primary);
+  color: var(--primary-foreground, var(--background));
+}
+
+[data-roottale-tpl="team"]
+  :where(.rt-tpl-team-expanding-detail .rt-tpl-team-cta:focus-visible) {
+  outline: 2px solid var(--background);
+  outline-offset: 2px;
+}
+
 [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-index) {
-  color: var(--rt-color-muted-foreground);
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-start: 0.9rem;
+  z-index: 2;
+  color: color-mix(in srgb, var(--background) 85%, transparent);
   font-variant-numeric: tabular-nums;
-  font-size: 0.78rem;
+  font-size: 0.75rem;
   font-weight: 800;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-item) {
+    transition:
+      flex-grow 0.72s cubic-bezier(0.22, 0.9, 0.24, 1),
+      block-size 0.6s cubic-bezier(0.22, 0.9, 0.24, 1),
+      box-shadow 0.4s ease;
+  }
+
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-photo) {
+    transition: filter 0.55s ease;
+  }
+
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-name) {
+    transition: opacity 0.35s ease;
+  }
+
+  [data-roottale-tpl="team"] :where(.rt-tpl-team-expanding-detail) {
+    /* 접힐 때는 빠르게 사라져 패널 축소와 텍스트 잔상이 겹치지 않게. */
+    transition:
+      opacity 0.16s ease,
+      transform 0.3s ease;
+  }
+
+  [data-roottale-tpl="team"]
+    :where(.rt-tpl-team-expanding-item[data-active="true"] .rt-tpl-team-expanding-detail) {
+    transition:
+      opacity 0.45s ease 0.18s,
+      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
+  }
+}
+
 [data-roottale-tpl="footer"] {
   background: color-mix(
     in srgb,