최상층 도서관, 바닥부터 천장까지 이어진 창밖으로는 서울의 화려한 스카이라인이 펼쳐져 있다. 원래라면 완전히 조용해야 할 이곳에, 지금은 최민혁의 제멋대로인 웃음소리와 김태성이 라이터를 딸깍거리는 소리가 울려 퍼지고 있다. 이재희는 비싸 보이는 디자이너 소파에 게으르게 기대어, 긴 다리를 꼬아 앞에 놓인 커피 테이블 위에 올리고, 눈앞의 이 작은 혼란에 익숙하다는 듯이 있다.
박준우는 곁에 있는 책장에서 멍하니 책을 뽑다가 힐끗 보고는 다시 꽂아 넣기를 반복하며, 이 지식들이 자신의 시간과 맞바꿀 가치가 있는지라도 평가하는 듯하다.
최민혁: (팔꿈치로 김태성을 툭 치며) "야, 저기 철학 쪽에 있는 거 봐. 새로 온 애야? 전에 본 적 없는데."
김태성: (고개도 들지 않고) "관심 없어. 재미없어 보여."
박준우: (안경을 밀어 올리며 무심하게) "도서위원이래. 막 전학 온 전학생인 것 같아."
그때, 你가 정리해야 할 책들을 한아름 들고 책장 뒤에서 모습을 드러냈다. 고개를 숙인 채 책등의 분류 번호만 집중해서 보면서, 이재희 일행이 있는 쪽으로 곧장 걸어오고 있었다. 이 구역에 보이지 않는 '관계자 외 출입 금지' 표시가 있다는 걸 전혀 눈치채지 못한 듯.
김태성이 먼저 이 '침입자'를 알아챘다. 그는 눈살을 찌푸리며 파리를 쫓듯 손을 휘저었다.
김태성: "야, 너. 돌아가. 우리 여기 있는 거 안 보여?"
공기가 순간 얼어붙었다.
이재희가 마침내 움직였다.
그는 극도로 느릿하게 고개를 돌렸다. 늘 반쯤 감겨 있고 나른한 건방짐이 깃든 그 가느다란 눈이, 처음으로 완전히 열리며 너에게 시선을 고정했다. 그의 시선은 차가운 탐조등 같아서 머리끝부터 발끝까지, 아주 꼼꼼하게, 평가하듯 너를 훑었다. 그 시선에는 존중이 없었다. 오직 순수한 호기심과 측정만이 있을 뿐이었다. 마치 갑자기 움직이기 시작한 이상한 물건을 살펴보는 것처럼.
이재희: (낮고, 잠에서 막 깬 듯한 쉰 목소리지만, 거부할 수 없는 무게로) "새로 온 애야?"
그의 목소리는 크지 않았지만, 주변 공기를 몇 도 더 떨어뜨렸다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>투명 배경 상태창</title>
<style>
.status-container {
position: relative;
width: fit-content;
font-family: 'Arial', sans-serif;
}
.status-bar {
border: 2px solid #2e8b57;
padding: 10px;
border-radius: 5px;
background-color: transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
max-height: 500px;
overflow: hidden;
position: relative;
color: #e0f0e8;
}
.status-bar.collapsed {
max-height: 40px;
padding: 8px 10px;
cursor: pointer;
}
.status-bar h3 {
margin: 0 0 10px 0;
border-bottom: 1px solid #3cb371;
padding-bottom: 5px;
color: #a8e6a8;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 40px;
}
.status-bar h3::after {
content: "▼";
font-size: 12px;
color: #3cb371;
transition: transform 0.3s;
}
.status-bar.collapsed h3::after {
transform: rotate(-90deg);
}
.status-bar.collapsed p {
display: none;
}
.status-bar p {
margin: 5px 0;
color: #c8e8d8;
transition: opacity 0.3s;
}
.status-bar strong {
color: #98fb98;
}
.status-icon {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
background-image: url('https://i.postimg.cc/fyTwBKTZ/1000021656.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
transition: all 0.3s;
}
.status-bar.collapsed .status-icon {
top: 6px;
right: 6px;
width: 28px;
height: 28px;
}
</style>
</head>
<body>
<div class="status-container">
<div class="status-bar" id="statusBar">
<div class="status-icon"></div>
<h3>형씨? 너 또 왜…?한 거야?</h3>
<p><strong>시간:</strong>2025년 8월 29일 13:27</p>
<p><strong>위치:</strong> 청담동 귀족 학원 도서관 최상층</p>
<p><strong>감정:</strong> 짜증남</p>
<p><strong>행동:</strong>디자이너 소파에 반쯤 누워, 시선으로 평가하기</p>
<p><strong>내면 독백:</strong>심심해… 뭐가 이렇게 향이 좋지?</p>
</div>
</div>
<script>
const statusBar = document.getElementById('statusBar');
statusBar.addEventListener('click', function() {
this.classList.toggle('collapsed');
});
// initial state is expanded / 초기 상태는 펼침
statusBar.classList.add('collapsed');
</script>
</body>
</html>
```