텍스트 목록

<ul class="krds-info-list decimal">
	<li>텍스트 목록 레벨1</li>
	<li>
		텍스트 목록 레벨1
		<ul class="krds-info-list dash">
			<li>텍스트 목록 레벨2</li>
			<li>
				텍스트 목록 레벨2
				<ul class="krds-info-list hollow">
					<li>텍스트 목록 레벨3</li>
					<li>텍스트 목록 레벨3</li>
				</ul>
			</li>
			<li>텍스트 목록 레벨2</li>
		</ul>
	</li>
	<li>텍스트 목록 레벨1</li>
</ul>

<br>
<br>

<ul class="krds-info-list decimal">
	<li>
		텍스트 목록 레벨1
		<ul class="krds-info-list dash">
			<li>
				텍스트 목록 레벨2
				<ol class="krds-info-list ordered">
					<li><span class="num">①</span>텍스트 목록 레벨3</li>
					<li><span class="num">②</span>텍스트 목록 레벨3</li>
				</ol>
			</li>
		</ul>
	</li>
	<li>
		텍스트 목록 레벨1
		<ol class="krds-info-list ordered">
			<li>
				<span class="num">a. </span>텍스트 목록 레벨2
				<ul class="krds-info-list hollow">
					<li>텍스트 목록 레벨3</li>
					<li>텍스트 목록 레벨3</li>
				</ul>
			</li>
		</ol>
	</li>
</ul>

<template>
  <ul class="krds-info-list decimal">
	<li>텍스트 목록 레벨1</li>
	<li>
		텍스트 목록 레벨1
		<ul class="krds-info-list dash">
			<li>텍스트 목록 레벨2</li>
			<li>
				텍스트 목록 레벨2
				<ul class="krds-info-list hollow">
					<li>텍스트 목록 레벨3</li>
					<li>텍스트 목록 레벨3</li>
				</ul>
			</li>
			<li>텍스트 목록 레벨2</li>
		</ul>
	</li>
	<li>텍스트 목록 레벨1</li>
</ul>

<br>
<br>

<ul class="krds-info-list decimal">
	<li>
		텍스트 목록 레벨1
		<ul class="krds-info-list dash">
			<li>
				텍스트 목록 레벨2
				<ol class="krds-info-list ordered">
					<li><span class="num">①</span>텍스트 목록 레벨3</li>
					<li><span class="num">②</span>텍스트 목록 레벨3</li>
				</ol>
			</li>
		</ul>
	</li>
	<li>
		텍스트 목록 레벨1
		<ol class="krds-info-list ordered">
			<li>
				<span class="num">a. </span>텍스트 목록 레벨2
				<ul class="krds-info-list hollow">
					<li>텍스트 목록 레벨3</li>
					<li>텍스트 목록 레벨3</li>
				</ul>
			</li>
		</ol>
	</li>
</ul>
</template>

<script setup lang="ts">
// 텍스트 목록 컴포넌트
// 일반 텍스트 목록입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>