feat(character detail): 캐릭터 상세 페이지 UI 추가

app/src/main/AndroidManifest.xml

@@ -282,5 +282,8 @@
             android:name="com.facebook.FacebookActivity"
             android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation" />
         <!-- [END facebook] -->
+
+        <!-- Character Detail -->
+        <activity android:name=".chat.character.detail.CharacterDetailActivity" />
     </application>
 </manifest>

app/src/main/java/kr/co/vividnext/sodalive/chat/character/detail/CharacterDetailActivity.kt

@@ -0,0 +1,207 @@
+package kr.co.vividnext.sodalive.chat.character.detail
+
+import android.content.Intent
+import android.graphics.Rect
+import android.os.Bundle
+import android.text.TextUtils
+import android.view.View
+import androidx.activity.viewModels
+import androidx.core.net.toUri
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.recyclerview.widget.RecyclerView
+import coil.load
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.base.BaseActivity
+import kr.co.vividnext.sodalive.databinding.ActivityCharacterDetailBinding
+import kr.co.vividnext.sodalive.extensions.dpToPx
+
+class CharacterDetailActivity : BaseActivity<ActivityCharacterDetailBinding>(
+    ActivityCharacterDetailBinding::inflate
+) {
+    private val viewModel: CharacterDetailViewModel by viewModels()
+
+    private val adapter by lazy {
+        OtherCharacterAdapter(
+            onItemClick = { item ->
+                startActivity(
+                    Intent(this, CharacterDetailActivity::class.java).apply {
+                        putExtra(EXTRA_CHARACTER_ID, item.characterId)
+                    }
+                )
+            }
+        )
+    }
+
+    private var isWorldviewExpanded = false
+    private var isPersonalityExpanded = false
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 더미 데이터 로드 (추후 Intent/Repository 연동)
+        val characterId = intent.getLongExtra(EXTRA_CHARACTER_ID, 0)
+
+//        if (characterId <= 0) {
+//            showToast("잘못된 접근 입니다.")
+//            finish()
+//        }
+
+        viewModel.loadMock(characterId)
+        bindObservers()
+    }
+
+    override fun setupView() {
+        // 뒤로 가기
+        binding.detailToolbar.tvBack.setOnClickListener { finish() }
+
+        // 다른 캐릭터 리스트: 가로 스크롤
+        val recyclerView = binding.rvOtherCharacters
+        recyclerView.layoutManager = LinearLayoutManager(
+            this,
+            LinearLayoutManager.HORIZONTAL,
+            false
+        )
+
+        recyclerView.addItemDecoration(object : RecyclerView.ItemDecoration() {
+            override fun getItemOffsets(
+                outRect: Rect,
+                view: View,
+                parent: RecyclerView,
+                state: RecyclerView.State
+            ) {
+                super.getItemOffsets(outRect, view, parent, state)
+
+                when (parent.getChildAdapterPosition(view)) {
+                    0 -> {
+                        outRect.left = 0
+                        outRect.right = 8f.dpToPx().toInt()
+                    }
+
+                    adapter.itemCount - 1 -> {
+                        outRect.left = 8f.dpToPx().toInt()
+                        outRect.right = 0
+                    }
+
+                    else -> {
+                        outRect.left = 8f.dpToPx().toInt()
+                        outRect.right = 8f.dpToPx().toInt()
+                    }
+                }
+            }
+        })
+
+        recyclerView.adapter = adapter
+
+        // 세계관 전체보기 토글 클릭 리스너
+        binding.llWorldviewExpand.setOnClickListener {
+            toggleWorldviewExpand()
+        }
+        // 성격 전체보기 토글 클릭 리스너
+        binding.llPersonalityExpand.setOnClickListener {
+            togglePersonalityExpand()
+        }
+    }
+
+    private fun bindObservers() {
+        viewModel.uiState.observe(this) { state ->
+            val detail = state.detail ?: return@observe
+
+            // 배경 이미지
+            binding.ivCharacterBackground.load(detail.imageUrl) { crossfade(true) }
+
+            // 기본 정보
+            binding.detailToolbar.tvBack.text = detail.name
+            binding.tvCharacterName.text = detail.name
+            binding.tvCharacterStatus.text = when (detail.characterType) {
+                CharacterType.CLONE -> "Clone"
+                CharacterType.CHARACTER -> "Character"
+            }
+            // 캐릭터 타입에 따른 배경 설정
+            binding.tvCharacterStatus.setBackgroundResource(
+                when (detail.characterType) {
+                    CharacterType.CLONE -> R.drawable.bg_character_status_clone
+                    CharacterType.CHARACTER -> R.drawable.bg_character_status_character
+                }
+            )
+            binding.tvCharacterDescription.text = detail.description
+            binding.tvCharacterTags.text = detail.tags
+
+            // 세계관 내용과 버튼 가시성 초기화
+            val worldviewText = detail.backgrounds?.description.orEmpty()
+            binding.tvWorldviewContent.text = worldviewText
+            applyWorldviewCollapsedLayout()
+            binding.tvWorldviewContent.post {
+                val needExpand = binding.tvWorldviewContent.lineCount > 3
+                binding.llWorldviewExpand.visibility = if (needExpand) View.VISIBLE else View.GONE
+            }
+
+            // 성격 내용과 버튼 가시성 초기화
+            val personalityText = detail.personalities?.description.orEmpty()
+            binding.tvPersonalityContent.text = personalityText
+            applyPersonalityCollapsedLayout()
+            binding.tvPersonalityContent.post {
+                val needExpand = binding.tvPersonalityContent.lineCount > 3
+                binding.llPersonalityExpand.visibility = if (needExpand) View.VISIBLE else View.GONE
+            }
+
+            // 원작 섹션 표시/숨김
+            if (detail.originalTitle.isNullOrBlank() || detail.originalLink.isNullOrBlank()) {
+                binding.llOriginalSection.visibility = View.GONE
+            } else {
+                binding.llOriginalSection.visibility = View.VISIBLE
+                binding.tvOriginalContent.text = detail.originalTitle
+                binding.tvOriginalLink.setOnClickListener {
+                    runCatching {
+                        startActivity(Intent(Intent.ACTION_VIEW, detail.originalLink.toUri()))
+                    }
+                }
+            }
+
+            // 다른 캐릭터 리스트
+            adapter.submitList(detail.others)
+        }
+    }
+
+    private fun toggleWorldviewExpand() {
+        isWorldviewExpanded = !isWorldviewExpanded
+        if (isWorldviewExpanded) {
+            // 확장 상태
+            binding.tvWorldviewContent.maxLines = Integer.MAX_VALUE
+            binding.tvWorldviewContent.ellipsize = null
+            binding.tvWorldviewExpand.text = "간략히"
+            binding.ivWorldviewExpand.setImageResource(R.drawable.ic_chevron_up)
+        } else {
+            // 접힘 상태 (3줄)
+            applyWorldviewCollapsedLayout()
+            binding.tvWorldviewExpand.text = "전체보기"
+            binding.ivWorldviewExpand.setImageResource(R.drawable.ic_chevron_down)
+        }
+    }
+
+    private fun applyWorldviewCollapsedLayout() {
+        binding.tvWorldviewContent.maxLines = 3
+        binding.tvWorldviewContent.ellipsize = TextUtils.TruncateAt.END
+    }
+
+    private fun togglePersonalityExpand() {
+        isPersonalityExpanded = !isPersonalityExpanded
+        if (isPersonalityExpanded) {
+            binding.tvPersonalityContent.maxLines = Integer.MAX_VALUE
+            binding.tvPersonalityContent.ellipsize = null
+            binding.tvPersonalityExpand.text = "간략히"
+            binding.ivPersonalityExpand.setImageResource(R.drawable.ic_chevron_up)
+        } else {
+            applyPersonalityCollapsedLayout()
+            binding.tvPersonalityExpand.text = "전체보기"
+            binding.ivPersonalityExpand.setImageResource(R.drawable.ic_chevron_down)
+        }
+    }
+
+    private fun applyPersonalityCollapsedLayout() {
+        binding.tvPersonalityContent.maxLines = 3
+        binding.tvPersonalityContent.ellipsize = TextUtils.TruncateAt.END
+    }
+
+    companion object {
+        const val EXTRA_CHARACTER_ID = "extra_character_id"
+    }
+}

app/src/main/java/kr/co/vividnext/sodalive/chat/character/detail/CharacterDetailResponse.kt

@@ -0,0 +1,48 @@
+package kr.co.vividnext.sodalive.chat.character.detail
+
+import androidx.annotation.Keep
+import com.google.gson.annotations.SerializedName
+
+@Keep
+data class CharacterDetailResponse(
+    @SerializedName("characterId") val characterId: Long,
+    @SerializedName("name") val name: String,
+    @SerializedName("description") val description: String,
+    @SerializedName("mbti") val mbti: String?,
+    @SerializedName("imageUrl") val imageUrl: String,
+    @SerializedName("personalities") val personalities: CharacterPersonalityResponse?,
+    @SerializedName("backgrounds") val backgrounds: CharacterBackgroundResponse?,
+    @SerializedName("tags") val tags: String,
+    @SerializedName("originalTitle") val originalTitle: String?,
+    @SerializedName("originalLink") val originalLink: String?,
+    @SerializedName("characterType") val characterType: CharacterType,
+    @SerializedName("others") val others: List<OtherCharacter>
+)
+
+@Keep
+enum class CharacterType {
+    @SerializedName("CLONE")
+    CLONE,
+    @SerializedName("CHARACTER")
+    CHARACTER
+}
+
+@Keep
+data class OtherCharacter(
+    @SerializedName("characterId") val characterId: Long,
+    @SerializedName("name") val name: String,
+    @SerializedName("imageUrl") val imageUrl: String,
+    @SerializedName("tags") val tags: String
+)
+
+@Keep
+data class CharacterPersonalityResponse(
+    @SerializedName("trait") val trait: String,
+    @SerializedName("description") val description: String
+)
+
+@Keep
+data class CharacterBackgroundResponse(
+    @SerializedName("topic") val topic: String,
+    @SerializedName("description") val description: String
+)

app/src/main/java/kr/co/vividnext/sodalive/chat/character/detail/CharacterDetailViewModel.kt

@@ -0,0 +1,73 @@
+package kr.co.vividnext.sodalive.chat.character.detail
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.MutableLiveData
+import kr.co.vividnext.sodalive.base.BaseViewModel
+
+/**
+ * 캐릭터 상세 화면에서 사용하는 ViewModel.
+ * - 캐릭터 명과 상태
+ * - 캐릭터 소개
+ * - 태그 문자열 (예: "#태그1 #태그2")
+ * - 세계관 내용 (3줄 이상일 경우 전체보기 토글)
+ * - 원작 섹션 (빈 값이면 UI에서 숨김)
+ * - 다른 캐릭터 목록 (이미지, 캐릭터 명, 태그)
+ */
+class CharacterDetailViewModel : BaseViewModel() {
+    // UiState를 CharacterDetailResponse 구조에 맞게 변경
+    data class UiState(
+        val detail: CharacterDetailResponse? = null
+    )
+
+    private val _uiState = MutableLiveData(UiState())
+    val uiState: LiveData<UiState> get() = _uiState
+
+    fun loadMock(characterId: Long) {
+        // TODO: Repository 연동 예정. 현재는 더미 데이터로 표시
+        val demoWorldview = CharacterBackgroundResponse(
+            topic = "세계관",
+            description = "특별한 꽃을 길러낼 수 있는 능력을 가진 리엘라.\n그녀는 호손 공작의 상속자가 되고 말아버리는데...\n\n뜻하지 않은 만남과 비밀이 펼쳐진다."
+        )
+        val demoPersonality = CharacterPersonalityResponse(
+            trait = "밝음, 고집",
+            description = "밝고 쾌활하지만 고집이 있으며, 친구를 소중히 여기고 어려움 앞에서도 물러서지 않습니다.\n상황에 따라 유연하게 대처하지만 신념은 확고합니다.\n\n상황에 따라 유연하게 대처하지만 신념은 확고합니다.\n\n\n상황에 따라 유연하게 대처하지만 신념은 확고합니다."
+        )
+        val others = listOf(
+            OtherCharacter(
+                characterId = 1,
+                name = "엘리시아",
+                imageUrl = "https://picsum.photos/seed/char1/300/300",
+                tags = "#마법 #학생 #쾌활"
+            ),
+            OtherCharacter(
+                characterId = 2,
+                name = "루카",
+                imageUrl = "https://picsum.photos/seed/char2/300/300",
+                tags = "#기사 #충직 #과묵"
+            ),
+            OtherCharacter(
+                characterId = 3,
+                name = "세라",
+                imageUrl = "https://picsum.photos/seed/char3/300/300",
+                tags = "#암살자 #쿨 #시크"
+            )
+        )
+
+        val response = CharacterDetailResponse(
+            characterId = characterId,
+            name = "리엘라",
+            description = "꽃을 키우는 공작가의 상속자",
+            mbti = "ENFP",
+            imageUrl = "https://picsum.photos/seed/bg1/1000/1000",
+            personalities = demoPersonality,
+            backgrounds = demoWorldview,
+            tags = "#커버곡 #라이브 #연애 #썸 #채팅 #라방",
+            originalTitle = "네이버 시리즈 독 안에 든 선생님",
+            originalLink = "https://series.naver.com/",
+            characterType = CharacterType.CLONE,
+            others = others
+        )
+
+        _uiState.value = UiState(detail = response)
+    }
+}

app/src/main/java/kr/co/vividnext/sodalive/chat/character/detail/OtherCharacterAdapter.kt

@@ -0,0 +1,58 @@
+package kr.co.vividnext.sodalive.chat.character.detail
+
+import android.annotation.SuppressLint
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.RecyclerView
+import coil.load
+import coil.transform.RoundedCornersTransformation
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.databinding.ItemOtherCharacterBinding
+import kr.co.vividnext.sodalive.extensions.dpToPx
+
+class OtherCharacterAdapter(
+    private var items: List<OtherCharacter> = emptyList(),
+    private val onItemClick: ((OtherCharacter) -> Unit)? = null
+) : RecyclerView.Adapter<OtherCharacterAdapter.OtherCharacterViewHolder>() {
+
+    @SuppressLint("NotifyDataSetChanged")
+    fun submitList(newItems: List<OtherCharacter>) {
+        items = newItems
+        notifyDataSetChanged()
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): OtherCharacterViewHolder {
+        return OtherCharacterViewHolder(
+            ItemOtherCharacterBinding.inflate(
+                LayoutInflater.from(parent.context),
+                parent,
+                false
+            )
+        )
+    }
+
+    override fun onBindViewHolder(holder: OtherCharacterViewHolder, position: Int) {
+        holder.bind(items[position])
+    }
+
+    override fun getItemCount(): Int = items.size
+
+    inner class OtherCharacterViewHolder(
+        private val binding: ItemOtherCharacterBinding
+    ) : RecyclerView.ViewHolder(binding.root) {
+        fun bind(item: OtherCharacter) {
+            binding.tvName.text = item.name
+            binding.tvTags.text = item.tags
+            binding.ivThumb.load(item.imageUrl) {
+                crossfade(true)
+                placeholder(R.drawable.ic_place_holder)
+                transformations(RoundedCornersTransformation(16f.dpToPx()))
+            }
+
+
+            binding.root.setOnClickListener {
+                onItemClick?.invoke(item)
+            }
+        }
+    }
+}

app/src/main/res/drawable/bg_character_status_character.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#009D68" />
+    <corners android:radius="6dp" />
+</shape>

app/src/main/res/drawable/bg_character_status_clone.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#0020C9" />
+    <corners android:radius="6dp" />
+</shape>

app/src/main/res/drawable/bg_character_status_creator.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#F86660" />
+    <corners android:radius="6dp" />
+</shape>

app/src/main/res/drawable/bg_round_corner_16_solid_3bb9f1.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="16dp" />
+    <solid android:color="@color/color_3bb9f1" />
+</shape>

app/src/main/res/drawable/bg_round_corner_16_stroke_37474f.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@android:color/transparent" />
+    <stroke
+        android:width="1dp"
+        android:color="#37474F" />
+    <corners android:radius="16dp" />
+</shape>

app/src/main/res/drawable/bg_round_corner_16_stroke_3bb9f1.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@android:color/transparent" />
+    <stroke
+        android:width="1dp"
+        android:color="#3BB9F1" />
+    <corners android:radius="16dp" />
+</shape>

app/src/main/res/drawable/ic_chevron_down.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/transparent"
+        android:strokeColor="#607D8B"
+        android:strokeWidth="2"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round"
+        android:pathData="M7,10L12,15L17,10" />
+</vector>

app/src/main/res/drawable/ic_chevron_up.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/transparent"
+        android:strokeColor="#607D8B"
+        android:strokeWidth="2"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round"
+        android:pathData="M17,14L12,9L7,14" />
+</vector>

app/src/main/res/layout/activity_character_detail.xml

@@ -0,0 +1,389 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/color_131313">
+
+    <!-- 상단 툴바 -->
+    <include
+        android:id="@+id/detail_toolbar"
+        layout="@layout/detail_toolbar" />
+
+    <!-- 메인 스크롤 영역 -->
+    <androidx.core.widget.NestedScrollView
+        android:id="@+id/scroll_view_character_detail"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_above="@+id/btn_chat"
+        android:layout_below="@+id/detail_toolbar"
+        android:clipToPadding="false"
+        android:fillViewport="true">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <!-- 캐릭터 이미지 및 프로필 영역 -->
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:id="@+id/rl_character_profile"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="16dp">
+
+                <!-- 캐릭터 배경 이미지 -->
+                <ImageView
+                    android:id="@+id/iv_character_background"
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:contentDescription="@null"
+                    android:scaleType="centerCrop"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintDimensionRatio="1:1"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent" />
+
+                <!-- 딤 처리 -->
+                <View
+                    android:id="@+id/view_character_dim"
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:background="@color/color_99000000"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent" />
+
+                <!-- 캐릭터 정보 -->
+                <LinearLayout
+                    android:id="@+id/ll_character_info"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginHorizontal="24dp"
+                    android:layout_marginBottom="24dp"
+                    android:orientation="vertical"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent">
+
+                    <!-- 캐릭터명과 상태 -->
+                    <LinearLayout
+                        android:id="@+id/ll_character_name_status"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:gravity="center_vertical"
+                        android:orientation="horizontal">
+
+                        <TextView
+                            android:id="@+id/tv_character_name"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:fontFamily="@font/pretendard_bold"
+                            android:textColor="@color/white"
+                            android:textSize="26sp"
+                            tools:text="캐릭터명" />
+
+                        <TextView
+                            android:id="@+id/tv_character_status"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginStart="8dp"
+                            android:background="@drawable/bg_character_status_clone"
+                            android:fontFamily="@font/pretendard_regular"
+                            android:paddingHorizontal="5dp"
+                            android:paddingVertical="1dp"
+                            android:textColor="@color/white"
+                            android:textSize="12sp"
+                            tools:text="Clone" />
+                    </LinearLayout>
+
+                    <!-- 캐릭터 소개 -->
+                    <TextView
+                        android:id="@+id/tv_character_description"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="8dp"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:textColor="@color/color_b0bec5"
+                        android:textSize="18sp"
+                        tools:text="캐릭터 한줄 소개" />
+
+                    <!-- 태그 -->
+                    <TextView
+                        android:id="@+id/tv_character_tags"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="8dp"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:textColor="@color/color_3bb9f1"
+                        android:textSize="14sp"
+                        tools:text="#커버곡 #라이브 #연애 #썸 #채팅 #라방" />
+                </LinearLayout>
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+            <!-- 세계관 섹션 -->
+            <LinearLayout
+                android:id="@+id/ll_worldview_section"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="24dp"
+                android:layout_marginBottom="16dp"
+                android:orientation="vertical">
+
+                <!-- 섹션 제목 -->
+                <TextView
+                    android:id="@+id/tv_worldview_title"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:text="세계관"
+                    android:textColor="@color/white"
+                    android:textSize="16sp" />
+
+                <!-- 세계관 내용 -->
+                <TextView
+                    android:id="@+id/tv_worldview_content"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:lineSpacingExtra="4dp"
+                    android:textColor="@color/color_b0bec5"
+                    android:textSize="16sp"
+                    tools:text="특별한 꽃을 길러낼 수 있는 능력을 가진 리엘라.\n\n그녀는 호손 공작의 상속자가 되고 말아버리는데..." />
+
+                <!-- 전체보기 버튼 -->
+                <LinearLayout
+                    android:id="@+id/ll_worldview_expand"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="end"
+                    android:layout_marginTop="8dp"
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:id="@+id/iv_worldview_expand"
+                        android:layout_width="20dp"
+                        android:layout_height="20dp"
+                        android:contentDescription="@null"
+                        android:src="@drawable/ic_chevron_down" />
+
+                    <TextView
+                        android:id="@+id/tv_worldview_expand"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:text="전체보기"
+                        android:textColor="@color/color_607d8b"
+                        android:textSize="14sp" />
+                </LinearLayout>
+            </LinearLayout>
+
+            <!-- 성격 섹션 (세계관과 동일 UI) -->
+            <LinearLayout
+                android:id="@+id/ll_personality_section"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="24dp"
+                android:layout_marginBottom="16dp"
+                android:orientation="vertical">
+
+                <!-- 섹션 제목 -->
+                <TextView
+                    android:id="@+id/tv_personality_title"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:text="성격"
+                    android:textColor="@color/white"
+                    android:textSize="16sp" />
+
+                <!-- 성격 내용 -->
+                <TextView
+                    android:id="@+id/tv_personality_content"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:lineSpacingExtra="4dp"
+                    android:textColor="@color/color_b0bec5"
+                    android:textSize="16sp"
+                    tools:text="밝고 쾌활하지만 때로는 고집이 센 면모도 있습니다.\n\n친구를 소중히 여기며, 어려움 앞에서도 물러서지 않습니다." />
+
+                <!-- 전체보기 버튼 -->
+                <LinearLayout
+                    android:id="@+id/ll_personality_expand"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="end"
+                    android:layout_marginTop="8dp"
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:id="@+id/iv_personality_expand"
+                        android:layout_width="20dp"
+                        android:layout_height="20dp"
+                        android:contentDescription="@null"
+                        android:src="@drawable/ic_chevron_down" />
+
+                    <TextView
+                        android:id="@+id/tv_personality_expand"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:text="전체보기"
+                        android:textColor="@color/color_607d8b"
+                        android:textSize="14sp" />
+                </LinearLayout>
+            </LinearLayout>
+
+            <!-- 원작 섹션 -->
+            <LinearLayout
+                android:id="@+id/ll_original_section"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="24dp"
+                android:layout_marginBottom="16dp"
+                android:orientation="vertical">
+
+                <!-- 섹션 제목 -->
+                <TextView
+                    android:id="@+id/tv_original_title"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:text="[원작]"
+                    android:textColor="@color/white"
+                    android:textSize="16sp" />
+
+                <!-- 원작 내용 -->
+                <TextView
+                    android:id="@+id/tv_original_content"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:textColor="@color/color_b0bec5"
+                    android:textSize="16sp"
+                    tools:text="네이버 시리즈 독 안에 든 선생님" />
+
+                <!-- 원작 보러가기 버튼 -->
+                <TextView
+                    android:id="@+id/tv_original_link"
+                    android:layout_width="match_parent"
+                    android:layout_height="54dp"
+                    android:layout_marginTop="8dp"
+                    android:background="@drawable/bg_round_corner_16_stroke_3bb9f1"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:gravity="center"
+                    android:text="원작 보러가기"
+                    android:textColor="@color/color_3bb9f1"
+                    android:textSize="16sp" />
+            </LinearLayout>
+
+            <!-- 캐릭터톡 대화 가이드 섹션 -->
+            <LinearLayout
+                android:id="@+id/ll_chat_guide_section"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="24dp"
+                android:layout_marginBottom="24dp"
+                android:background="@drawable/bg_round_corner_16_stroke_37474f"
+                android:orientation="vertical"
+                android:paddingHorizontal="16dp"
+                android:paddingVertical="12dp">
+
+                <!-- 가이드 제목 -->
+                <TextView
+                    android:id="@+id/tv_chat_guide_title"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:text="⚠️ 캐릭터톡 대화 가이드"
+                    android:textColor="@color/color_b0bec5"
+                    android:textSize="16sp" />
+
+                <!-- 가이드 내용 -->
+                <TextView
+                    android:id="@+id/tv_chat_guide_content"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:lineSpacingExtra="4dp"
+                    android:text="보이스온 AI캐릭터톡은 대화의 자유도가 높아 대화에 참여하는 당신은 누구든 될 수 있습니다.\n\n세계관 속 캐릭터로 대화를 하거나 새로운 인물로\n캐릭터와 당신만의 스토리를 만들어보세요."
+                    android:textColor="@color/color_7c7c80"
+                    android:textSize="16sp" />
+
+                <!-- 주의사항 -->
+                <TextView
+                    android:id="@+id/tv_chat_guide_notice"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:lineSpacingExtra="4dp"
+                    android:text="※ AI캐릭터톡은 오픈베타 서비스 중이며, 캐릭터의 대화가 어색하거나 불완전할 수 있습니다. 대화 초반에 캐릭터 붕괴가 느껴진다면 대화를 리셋하고 다시 시도해보세요."
+                    android:textColor="@color/color_7c7c80"
+                    android:textSize="14sp" />
+            </LinearLayout>
+
+            <!-- 장르의 다른 캐릭터 섹션 -->
+            <LinearLayout
+                android:id="@+id/ll_other_characters_section"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="24dp"
+                android:orientation="vertical">
+
+                <!-- 섹션 제목 -->
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal"
+                    android:paddingHorizontal="24dp">
+
+                    <TextView
+                        android:id="@+id/tv_other_characters_title"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:fontFamily="@font/pretendard_bold"
+                        android:text="장르의 다른 캐릭터"
+                        android:textColor="@color/white"
+                        android:textSize="26sp" />
+                </LinearLayout>
+
+                <!-- 캐릭터 리스트 -->
+                <androidx.recyclerview.widget.RecyclerView
+                    android:id="@+id/rv_other_characters"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="16dp"
+                    android:clipToPadding="false"
+                    android:paddingHorizontal="24dp" />
+            </LinearLayout>
+        </LinearLayout>
+    </androidx.core.widget.NestedScrollView>
+
+    <!-- 하단 고정 대화하기 버튼 -->
+    <TextView
+        android:id="@+id/btn_chat"
+        android:layout_width="match_parent"
+        android:layout_height="54dp"
+        android:layout_alignParentBottom="true"
+        android:layout_marginHorizontal="24dp"
+        android:layout_marginBottom="10dp"
+        android:background="@drawable/bg_round_corner_16_solid_3bb9f1"
+        android:fontFamily="@font/pretendard_bold"
+        android:gravity="center"
+        android:text="대화하기"
+        android:textColor="@color/white"
+        android:textSize="16sp" />
+</RelativeLayout>

app/src/main/res/layout/item_other_character.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="168dp"
+    android:layout_height="wrap_content"
+    android:orientation="vertical">
+
+    <ImageView
+        android:id="@+id/iv_thumb"
+        android:layout_width="match_parent"
+        android:layout_height="168dp"
+        android:contentDescription="@null" />
+
+    <TextView
+        android:id="@+id/tv_name"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        android:ellipsize="end"
+        android:fontFamily="@font/pretendard_bold"
+        android:maxLines="1"
+        android:textColor="@color/white"
+        android:textSize="14sp"
+        tools:text="이름" />
+
+    <TextView
+        android:id="@+id/tv_tags"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:ellipsize="end"
+        android:fontFamily="@font/pretendard_regular"
+        android:maxLines="1"
+        android:textColor="@color/color_3bb9f1"
+        android:textSize="12sp"
+        tools:text="#태그" />
+
+</LinearLayout>

app/src/main/res/values/colors.xml

@@ -133,4 +133,6 @@
     <color name="color_7849bc">#7849BC</color>
     <color name="color_607d8b">#607D8B</color>
     <color name="color_b0bec5">#B0BEC5</color>
+    <color name="color_7c7c80">#7C7C80</color>
+    <color name="color_37474f">#37474F</color>
 </resources>