<c-collection-grade :grade="item.grade_key" :label="item.grade_label" />

{% include 'components/_collection_media.html' with item=row.item locked=row.locked locked_preview_url=row.locked_preview_url media_url=row.media_url only %}

<c-discovered-key-unlock :item="appearance.item" :dialog_key="appearance.item_id" :conversation_id="conversation.pk" />

<c-button variant="secondary"><c-slot name="left_icon"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></c-slot>양피지 전환하기</c-button>
<c-button variant="secondary">계속하기<c-slot name="right_icon"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></c-slot></c-button>
<c-button variant="primary">
  <c-slot name="left_icon"><svg class="nav-icon" aria-hidden="true"><use href="#icon-home"></use></svg></c-slot>
  홈으로 이동
  <c-slot name="right_icon"><svg class="nav-icon" aria-hidden="true"><use href="#icon-arrow"></use></svg></c-slot>
</c-button>

<c-button variant="inline" size="inline">배너 링크<c-slot name="right_icon"><svg class="nav-icon" aria-hidden="true"><use href="#icon-arrow"></use></svg></c-slot></c-button>

<c-button variant="ghost" size="tag">태그</c-button>

<nav aria-label="주요 메뉴">
  <c-navigation-link href="/" icon="nav-home" active_icon="nav-home-filled" label="홈" active current />
  <c-navigation-link href="/explore/" icon="nav-explore" label="탐색" />
  <c-navigation-link href="/rankings/" icon="crown" label="랭킹" />
</nav>

<c-ending-card :card="ending_card" :is_new="is_new" />
EndingCardPresentation은 서버에서 확인한 소유 상태로 만듭니다. 미획득 값에는 이름·미디어 URL·감상 URL을 넣지 않으며, 힌트가 없으면 대화 진행 안내를 표시합니다.

<c-muted-video src="영상 URL" poster="대체 이미지 URL"
  active="index === 0" paused="isVideoPaused()" repeat="true"
  revision="selection" visible="index === 0 && !reduced" />
일시적인 재생 취소는 한 번 자동 재시도하고 실제 오류는 영상만 숨깁니다. 같은 프레임에 대체 이미지를 함께 배치합니다.
active·paused·repeat·revision·visible은 호출자 Alpine 표현식입니다.

<c-muted-video :src="대표_영상_URL" :poster="대표_이미지_URL" repeat="true"
  disablepictureinpicture disableremoteplayback tabindex="-1" class="pointer-events-none absolute inset-0" />
상세 대표 영상은 사용자 조작 없이 음소거 자동 반복 재생하며, 같은 영역의 대표 이미지를 로딩·실패 대체 화면으로 유지합니다.

<c-home-banner-indicator label="배너 1: 이야기 제목"
  selected="index === 0" completed="index > 0" progress="progress()" @click="select(0)" />
selected·completed·progress는 호출자의 Alpine 표현식이며 progress는 지난 시간의 비율(0~1)입니다.
사용자 선택은 select로 보내야 768px 미만에서 직접 고른 뒤 자동 넘김을 멈춥니다. go는 타이머 전환 전용입니다.
completed가 참이면 막대를 모두 채우고, 현재 막대만 전환 시각에 맞춰 채웁니다.
채움은 현재 위치로 계산하므로 역이동·직접 선택·첫 배너로의 순환에도 다시 갱신됩니다.

<c-content-preview-card :href="작품_상세_주소" :title="게시_제목" :description="게시_소개"
  :preview_url="공개_작품_정보창_GET_주소" :image="공개_대표_이미지" :video_url="게시_영상_720_URL" image_sizes="실제_표시_폭"
  :tags="작품_활성_태그" :characters="공개_게시_인물별_사진과_태그" />
preview_url을 주면 첫 열기에만 정보를 받고, 실패 시 다시 시도·작품 상세 이동을 제공합니다. 정적 샘플은 주소 없이 인라인 내용을 씁니다.
tags는 key·label, characters는 character_id·name·tags·portrait(선택 ResponsiveImage)를 가진 표시 값입니다. 비어 있는 절은 생략하고 인물이 여러 장면에 등장해도 한 번만 표시합니다.
영상은 마우스를 올린 카드에서만 무음 반복 재생하고, 주소가 비어 있으면 정지 이미지를 유지합니다. 정보창만 호버·키보드 포커스로 열리며 Escape로 닫습니다.

<c-section-heading title="지금 인기 있는 이야기" variant="rail" more_href="..." title_id="popular-title" />
<c-section-heading title="운영팀 추천" description="이번 주 운영팀이 고른 이야기" variant="rail" more_href="..." />

<c-section-heading variant="detail" title="캐릭터 소개" title_id="introduction-title" />
<c-section-heading variant="detail" title="컬렉션" more_href="..." more_label="모두 보기" />

<c-content-card href="..." title="새벽의 약속" rank="1">
  <c-slot name="media"><img src="..." alt=""></c-slot>
  <c-slot name="metadata"><span>#로맨스</span><span>#일상</span></c-slot>
</c-content-card>

<c-content-card layout="compact" href="..." title="달" description="작은 서점에서 시작하는 대화">
  <c-slot name="metadata">답변 1,204회</c-slot>
</c-content-card>

<c-section-heading title="오늘의 추천" description="나에게 맞는 이야기를 골라 보세요." />
<c-content-card href="/characters/story" title="이야기 이름" description="짧은 소개">
  <c-slot name="media"><img src="/static/story.jpg" alt=""></c-slot>
  <c-slot name="badges"><c-content-badges :badges="content.content_badges" /></c-slot>
</c-content-card>

ContentBadgeCatalog.attach(contents, as_of=request_clock)
카드: content.content_badges (NEW → MULTI → EP+ 최대 두 개)
상세: content.badge_state().for_surface(as_of=request_clock, surface="detail")
선택: content.badged_scenarios(as_of=request_clock)의 scenario.badges
<c-content-badges :badges="scenario.badges" />
기본 select option에는 “ · N”을 붙여 JavaScript 없이도 새 장면을 구분합니다.

변형: variant="bar"는 768px 미만 하단 탭 위 고정 바, "inline"은 768px 이상 히어로 안 묶음입니다.
장면이 하나면(scenario_choices.is_selectable 거짓) 정적 행, 여러 개면 공통 드롭다운의 trigger 슬롯 행입니다.
<c-detail-start variant="bar">
  <c-detail-start-row variant="bar" :title="selected_scenario.title" :progress="collection_preview.progress" />
  <c-dropdown label="시나리오 선택" placement="auto" class="block w-full mb-2" menu_class="w-full">
    <c-slot name="trigger"><c-detail-start-row variant="bar" mode="menu" :title="selected_scenario.title" /></c-slot>
    <c-scenario-menu-item href="?scenario=..." :title="choice.scenario.title" :selected="choice.selected" :progress="choice.progress" hx-get="?scenario=..." hx-target="closest .content-detail-page" hx-select=".content-detail-page" hx-swap="outerHTML" hx-push-url="true" />
  </c-dropdown>
  <c-button href="..." size="lg" full_width data-detail-start-cta>대화 시작하기</c-button>
</c-detail-start>

{% include "characters/_content_favorite_action.html" with content=content is_favorited=is_content_favorited source="detail" csrf_token=csrf_token only %}
등장인물 2명 이상(등장 캐릭터 절): <c-section-heading variant="detail" title="등장 캐릭터" count="2" /> + grid grid-cols-1 gap-2 sm:grid-cols-2 안에 <c-cast-card :revision="revision" />
상세 성격 섹션(consumer-secondary 카드, 등장인물 1명의 "성격" 절): <c-public-profile :revision="revision" />
이미 카드 안(작품 등장인물, 경계선으로만 구분): <c-public-profile :revision="revision" nested />

intro_scenes_payload의 각 장면에 kind, url과 이미지의 image_duration_ms를 전달합니다.
characters/_intro_video_player.html과 scenarioIntro를 함께 사용하고 visibilitychange, pagehide, pageshow로 정지·재개합니다.

<article class="message-row character-message">
  <c-character-message name="하린" :segments="segments" />
</article>

<article class="message-row character-message">
  <c-character-message :bubbles="presentation.bubbles" :structured="presentation.structured" />
</article>
도입·일반 답변·구조화 답변 모두 대사마다 프로필과 이름을 표시합니다. 서술과 대사 속 *지문*은 말풍선 밖의 text-consumer-narrative 문단으로 나눕니다.

<c-responsive-image :asset="asset" sizes="(min-width: 768px) 200px, 150px" alt="" class="h-full w-full object-cover" />

{% include "chat/_composer_toolbar.html" %}   ← 모드 pill(#chat-mode-sheet)·커맨드·상황·추천·설정(#chat-settings-sheet)
<div class="composer-row">
  <div class="composer-field">{% include "chat/_persona_trigger.html" %}{% include "chat/_message_input.html" … %}</div>
  {% include "components/_send_button.html" … %}
</div>

<c-sheet-dialog id="chat-settings-sheet" :title="settings_sheet_title">…</c-sheet-dialog>
여는 쪽: x-on:click="document.getElementById('chat-settings-sheet')?.showModal()"

{% include "chat/_message_row.html" with message_role="user" message_content="* 고개를 끄덕인다 * 그럼 내일도 같이 갈래?" only %}
지문은 별도 문단, 대사는 금색 말풍선으로 원문 순서대로 표시합니다. 상황만 보낼 수도 있습니다.

{% include "chat/_situation_tools.html" with conversation=conversation %}
같은 form의 textarea[name="message"]를 사용합니다. 안내는 body에 표시하는 비모달 레이어입니다. 네이티브 Popover API를 사용하지 않고 입력 포커스와 한글 조합을 유지합니다.

<c-content-row title="테마" description="내게 편한 밝기를 선택합니다.">
  <c-slot name="icon"><svg class="nav-icon" aria-hidden="true"><use href="#icon-home"></use></svg></c-slot>
  <c-slot name="action"><c-button variant="secondary" size="sm">시스템</c-button></c-slot>
</c-content-row>

<section x-data="sceneSequencePlayer('intro')" x-init="configure(serverPayload)" @scene-sequence:complete="introFinished = true">
  <c-scene-sequence-player />
</section>
serverPayload는 소유·게시 검증을 통과한 서버 값입니다. kind, url, image_duration_ms, text_speed_cps, lines를 전달합니다.
도입 영상은 음소거로 자동 시작하며 영상 제어에서 소리를 켤 수 있습니다. 다음 한 장면은 미리 읽고 같은 버퍼로 전환합니다.
intro와 preview는 한 번 완료하고 ending은 미디어만 반복합니다. 오류는 error를 전달하며 관리 미리보기에서만 edit_url을 전달합니다.
채팅처럼 높이가 정해진 패널에는 relative 컨테이너 안에 <c-scene-sequence-media embedded />를 사용합니다. 대표 미디어는 같은 컨테이너의 absolute inset-0 레이어에서 x-show="complete"로 표시합니다. intro는 완료·생략 후 600ms 동안 사라지며 대표 미디어를 드러냅니다. 모션 감소 설정에서는 즉시 교체합니다. 원고 영역 <c-scene-sequence-lines />의 기본은 테두리 카드이고, 작품 새 대화 도입처럼 대화 영역 안에서는 variant="chat"으로 첫 대사와 같은 말풍선 문법(대사 말풍선·서술 왼쪽 선·사용자 말풍선)을 씁니다. embedded의 재생 컨트롤은 미디어 위에 겹쳐(좁은 화면 위쪽·넓은 화면 아래쪽) 재생 중과 완료 뒤 미디어 크기가 같고, 완료 후에는 상태 안내만 낭독으로 남깁니다.
실제 화면은 visibilitychange에서 syncVisibility(), pagehide에서 pauseForPageHide()를 연결합니다.

<c-notice tone="error" title="메시지를 보내지 못했어요">
  입력한 내용은 그대로 남아 있어요.
  <c-slot name="actions"><c-button variant="secondary">다시 시도</c-button></c-slot>
</c-notice>

<div class="relative">
  <!-- 실제 img 또는 video를 같은 표면 안에 유지합니다. -->
  <c-media-status x-show="loading">불러오는 중…</c-media-status>
  <c-media-status x-show="buffering && !loading && !mediaError">잠시 기다려 주세요…</c-media-status>
</div>
현재 미디어의 상태를 x-show로 전달합니다. 이 부품은 미디어를 교체하거나 재생 상태·소유·과금을 변경하지 않습니다.

<c-user-ranking-row :row="consumer_row" :steps="bar_steps" own />
<c-ranking-contribution label="출석" :value="row.bars.2" :steps="bar_steps" />