ㅇ

[예은]

<style>
@font-face {
font-family: 'HSSanTokki20-Regular';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405@1.0/HSSanTokki20-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

p {
font-family: 'HSSanTokki20-Regular';
font-size: 24px;
text-align: center;
}

.game-container {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
}

.wardrobe {
display: flex;
flex-direction: column;
gap: 10px;
}

.item {
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid #999;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}

input[type="radio"] {
display: none;
}

.character-container {
position: relative;
width: 300px;
height: 400px;
}

/* 푸바오 */

.character {
width: 100%;
height: 100%;
background-image: url('https://t1.daumcdn.net/cafeattach/1Ychg/1b54983b0a1a2196f268d014adc58efe427f24d8');
background-size: cover;
background-position: center;
border: 2px solid #000;
position: relative;
overflow: hidden;
}

/* 필요에 따라 더 추가하거나 삭제 가능 */

#item1:checked ~ .character {
background-image: url('https://t1.daumcdn.net/cafeattach/1Ychg/4bbda6fcf8a3a16ef534ef705cf8c9fe6610bbd0');
}

#item2:checked ~ .character {
background-image: url('https://t1.daumcdn.net/cafeattach/1Ychg/39998dcab0fc072253bb89eac8d03f56c553f6bf');
}

#item3:checked ~ .character {
}
#item4:checked ~ .character {
}
#item5:checked ~ .character {
}
#item6:checked ~ .character {
}
</style>

<p>푸바오 옷입히기</p>


<div class="game-container">
<div class="wardrobe">
<label class="item" for="item1">👑</label>
<label class="item" for="item2">👓</label>
<label class="item" for="item3">👕</label>
<label class="item" for="item4">👖</label>
<label class="item" for="item5">👞</label>
<label class="item" for="item6">💍</label>
</div>
<div class="character-container">
<input type="radio" name="item" id="item1">
<input type="radio" name="item" id="item2">
<input type="radio" name="item" id="item3">
<input type="radio" name="item" id="item4">
<input type="radio" name="item" id="item5">
<input type="radio" name="item" id="item6">
<div class="character"></div>
</div>
</div>