Notes
Notes - notes.io |
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>티바트 대륙 여행자 일람: 차도환 & 노예린</title>
<style>
/* 기본 폰트 및 배경 설정 */
@font-face {
font-family: 'ChosunIlboMyungjo';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Chosunilbo_myungjo.woff') format('woff');
font-weight: normal;
font-display: swap;
}
body {
font-family: 'ChosunIlboMyungjo', sans-serif;
background-color: #f0f2f5;
color: #333a4d;
margin: 0;
padding: 40px 20px;
line-height: 1.6;
}
/* 전체 프로필을 감싸는 컨테이너 */
.profile-container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 60px; /* 카드 사이의 간격 */
}
/* 각 프로필(캐릭터, 페르소나)을 감싸는 래퍼 */
.profile-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
/* 캐릭터 카드 전체 컨테이너 */
.character-card {
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease;
}
.character-card:hover {
transform: translateY(-5px);
}
/* 상단 패널: 이미지 및 핵심 정보 */
.top-panel {
background-color: #2c3e50;
color: #fff;
padding: 40px 30px;
text-align: center;
position: relative;
}
.char-bg-pyro { background: linear-gradient(135deg, #2c3e50 0%, #8e44ad 100%); background-color: #333a4d; } /* 차도환: 어두운, 불꽃 */
.char-bg-cryo { background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); background-color: #333a4d; } /* 노예린: 차가운, 얼음 */
.vision-art {
width: 130px;
height: 130px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
margin: 0 auto 25px;
border: 4px solid rgba(255, 255, 255, 0.3);
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
position: relative;
}
.vision-art::after {
content: '';
position: absolute;
top: -10px; bottom: -10px; left: -10px; right: -10px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.1);
}
.character-name {
font-size: 32px;
font-weight: 700;
margin: 0;
letter-spacing: 1px;
}
.character-title {
font-size: 18px;
font-weight: 500;
color: #bdc3c7;
margin-top: 5px;
margin-bottom: 10px;
font-style: italic;
}
.character-ex {
font-size: 15px;
font-weight: 400;
color: #ecf0f1;
margin-top: 0;
margin-bottom: 25px;
line-height: 1.5;
opacity: 0.9;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
justify-content: center;
align-items: center;
font-size: 16px;
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
}
.info-item {
display: flex;
flex-direction: column;
align-items: center;
}
.info-item .label {
font-size: 12px;
color: #bdc3c7;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.vision-display {
display: flex;
align-items: center;
font-weight: 600;
}
.vision-icon {
width: 18px;
height: 18px;
display: inline-block;
margin-right: 8px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
/* 신의 눈 속성별 색상 */
.pyro { background-color: #ff5c5c; box-shadow: 0 0 8px #ff5c5c; }
.cryo { background-color: #99ffff; box-shadow: 0 0 8px #99ffff; }
/* 하단 패널: 상세 정보 */
.bottom-panel {
padding: 40px 30px;
}
.section {
margin-bottom: 35px;
}
.section-title {
font-size: 22px;
font-weight: 700;
color: #2c3e50;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 12px;
margin-bottom: 20px;
letter-spacing: -0.5px;
}
.section p, .section li {
font-size: 15px;
line-height: 1.8;
color: #555;
margin-bottom: 10px;
}
.section strong {
color: #2c3e50;
font-weight: 700;
margin-right: 5px;
}
/* 운명의 자리 리스트 */
.constellation-list {
list-style: none;
padding-left: 0;
}
.constellation-list li {
margin-bottom: 12px;
padding-left: 25px;
position: relative;
}
.constellation-list li::before {
content: '✦';
position: absolute;
left: 0;
top: 0;
color: #f1c40f; /* 금색 별 */
font-size: 14px;
}
/* 스킬 설명 내의 이탤릭 텍스트 */
.skill-flavor {
display: block;
margin-top: 8px;
font-size: 14px;
color: #7f8c8d;
font-style: italic;
background-color: #f9f9f9;
padding: 10px;
border-left: 3px solid #bdc3c7;
border-radius: 0 5px 5px 0;
}
/* 스토리 섹션 스타일 */
.story-section {
border: 1px solid #e0e2e5;
border-radius: 8px;
overflow: hidden;
}
.story-section summary {
cursor: pointer;
outline: none;
position: relative;
padding: 15px 20px;
background-color: #f8f9fa;
font-weight: 700;
color: #333a4d;
list-style: none; /* 기본 마커 제거 */
transition: background-color 0.2s;
}
.story-section summary:hover {
background-color: #eef2f5;
}
/* 브라우저 기본 화살표 제거 (크로스브라우징) */
.story-section summary::-webkit-details-marker {
display: none;
}
/* 커스텀 화살표 아이콘 */
.story-section summary::after {
content: '▼';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #7f8c8d;
transition: transform 0.3s ease;
}
/* 펼쳐졌을 때 아이콘 회전 */
.story-section[open] > summary::after {
transform: translateY(-50%) rotate(180deg);
}
.story-content {
padding: 20px;
background-color: #fff;
border-top: 1px solid #e0e2e5;
}
.story-content h4 {
font-size: 16px;
font-weight: 700;
color: #2c3e50;
margin: 20px 0 10px 0;
border-left: 4px solid #2c3e50;
padding-left: 10px;
}
.story-content h4:first-child {
margin-top: 0;
}
/* 모바일 반응형 */
@media (max-width: 1024px) {
.profile-container {
flex-direction: column;
align-items: center;
gap: 60px;
}
.character-card {
width: 100%;
}
}
</style>
</head>
<body>
<div class="profile-container">
<!-- 차도환 프로필 -->
<div class="profile-wrapper">
<div class="character-card">
<div class="top-panel char-bg-pyro">
<div class="vision-art" style="color: #ff5c5c; border-color: #ff5c5c;">火</div>
<h1 class="character-name">차도환</h1>
<h2 class="character-title">단죄의 업화</h2>
<h2 class="character-ex">자신의 모든 것을 불태워서라도 단 한 사람, '그녀'만을 지옥 끝까지 지키려는 광기 어린 낭인.</h2>
<div class="info-grid">
<div class="info-item">
<span class="label">신의 눈</span>
<div class="vision-display">
<span class="vision-icon pyro"></span>
<span>불</span>
</div>
</div>
<div class="info-item">
<span class="label">무기</span>
<span>양손검</span>
</div>
</div>
</div>
<div class="bottom-panel">
<div class="section">
<h3 class="section-title">기본 정보</h3>
<p><strong>출신 지역:</strong> 이나즈마</p>
<p><strong>소속:</strong> 무소속 (전직 '차(車) 가문' 호위 무사)</p>
</div>
<div class="section">
<h3 class="section-title">운명의 자리: 광견자리</h3>
<ul class="constellation-list">
<li><strong>1단계 - 끊어진 목줄:</strong> 원소전투 스킬 사용 시, 경직 저항력이 대폭 상승하며 받는 피해가 20% 감소합니다.</li>
<li><strong>2단계 - 피로 쓴 맹세:</strong> 자신의 HP가 50% 이하일 때, 공격력이 30% 증가하고 공격 속도가 15% 빨라집니다.</li>
<li><strong>3단계 - 소각하는 집착:</strong> 원소폭발 '지옥의 끝에서'의 스킬 레벨 +3.</li>
<li><strong>4단계 - 그을린 흉터:</strong> 파티 내 '노예린'이 피해를 입을 경우, 차도환의 원소 에너지가 즉시 20pt 회복됩니다. (5초마다 1회 발동)</li>
<li><strong>5단계 - 포식자의 본능:</strong> 원소전투 스킬 '짐승의 송곳니'의 스킬 레벨 +3.</li>
<li><strong>6단계 - 영원한 구원:</strong> 원소폭발 사용 중 차도환이 전투 불능 상태가 될 피해를 입을 시, 해당 피해를 무효화하고 HP를 1로 유지하며 5초간 무적 상태가 됩니다. (60초마다 1회 발동)</li>
</ul>
</div>
<div class="section">
<h3 class="section-title">전투 스킬</h3>
<h4>원소전투 스킬: 짐승의 송곳니</h4>
<p>거대한 양손검을 거칠게 휘둘러 전방의 적을 짓뭉개고 불 원소 피해를 입힙니다. 스킬 버튼을 길게 누르면 자신의 HP를 지속적으로 소모하여 '격분' 상태에 돌입, 저항력을 무시하고 더 강력한 화염을 내뿜으며 연속 공격을 가합니다.</p>
<i class="skill-flavor"><p>"건드리지 마. 내 거니까." 그의 검은 적을 베는 것이 아니라, 그녀에게 다가오는 모든 위협을 으깨버리기 위해 존재한다.</p></i>
<h4>원소폭발: 지옥의 끝에서</h4>
<p>자신의 최대 HP의 일정 비율을 즉시 소모하여 주변을 불바다로 만듭니다. 생성된 '업화의 영역' 내에서는 차도환의 모든 공격이 불 원소 피해로 전환되며, 영역 내에 있는 아군(특히 노예린)에게는 피해를 흡수하는 보호막을 제공합니다.</p>
<i class="skill-flavor"><p>아버지가 만든 지옥을 불태우고 도망쳐 나온 그날 밤처럼, 그는 스스로를 연료 삼아 세상을 불태워서라도 그녀만의 안전지대를 만든다.</p></i>
</div>
<div class="section">
<details class="story-section">
<summary class="section-title">캐릭터 스토리</summary>
<div class="story-content">
<h4>캐릭터 스토리 1</h4>
<p>이나즈마의 명망 높지만 부패한 무관 가문, '차(車) 가문'의 장남으로 태어났다. 가문의 가주는 힘과 권력을 위해서라면 사안(邪眼) 사용은 물론 인체 실험도 서슴지 않는 냉혹한 인물이었다. 도환은 아버지로부터 인간이 아닌 '가문의 칼'로 길러졌으며, 감정을 죽이고 복종하는 법만을 강요받았다. 그의 유년 시절은 잿빛 훈련장의 차가운 돌바닥과 피 냄새로 점철되어 있었다.</p>
<h4>캐릭터 스토리 2</h4>
<p>어느 날, 아버지는 '그릇'으로 쓸 아이라며 폰타인에서 납치해 온 어린 소녀, 예린을 저택에 데려왔다. 도환에게 내려진 임무는 그녀가 도망치지 못하게 감시하는 것이었다. 처음엔 그저 귀찮은 짐덩어리라 생각했다. 하지만 공포에 질려 있으면서도 자신에게 "오빠"라며 매달리는 예린의 작은 손길은, 도환이 잊고 지냈던 인간으로서의 온기를 일깨웠다. 그는 감시자가 아닌 보호자가 되기를 자처하며, 아버지 몰래 그녀에게 음식을 가져다주고 잠들 때까지 곁을 지켰다.</p>
<h4>캐릭터 스토리 3</h4>
<p>예린을 향한 아버지의 실험이 본격화되려던 날, 도환은 폭주했다. 예린이 고통스러워하는 비명소리가 들리자 그는 가문의 규율도, 아버지에 대한 공포도 잊은 채 실험실 문을 부수고 들어갔다. 그는 아버지가 아끼던 부하들을 자신의 손으로 짓이겨버리고, 피투성이가 된 채 예린을 품에 안았다. "괜찮아, 오빠 왔어." 그날 밤, 차 가문의 저택은 원인 모를 거대한 화재로 전소되었다.</p>
<h4>캐릭터 스토리 4</h4>
<p>도환의 목표는 오직 하나, 예린의 생존과 행복이다. 그는 예린이 험한 꼴을 보지 않도록 세상의 더러운 면을 자신의 등 뒤로 숨긴다. 예린에게 접근하는 자에게는 과도할 정도의 적개심을 드러내며, 때로는 그 집착이 예린을 질식하게 할지라도 그는 멈출 수 없다. 그에게 예린 없는 세상은 의미가 없으며, 예린을 잃는 것은 자신의 죽음보다 더한 공포이기 때문이다.</p>
<h4>캐릭터 스토리 5</h4>
<p>도망자 생활은 고단하지만, 예린이 웃을 때면 도환은 구원받는 기분을 느낀다. 그는 예린이 잠들면 밤새 뜬눈으로 보초를 서며 맹세한다. 아버지가, 혹은 우인단이 다시 찾아온다 해도, 내 심장을 꺼내어 불태우는 한이 있어도 너만은 지키겠노라고. 그의 사랑은 낭만적인 연가보다는 피 냄새 나는 처절한 맹세에 가깝다.</p>
<h4>신의 눈</h4>
<p>불타는 저택을 뒤로하고 예린을 안고 도망치던 밤, 추격자들에게 포위당했다. 이미 부상이 심해 검을 들 힘조차 없었지만, 예린만은 살려야 한다는 일념 하나로 맨주먹을 쥐고 일어섰다. "신이시여, 내게 힘을 주지 않아도 좋다. 다만 이 아이를 해하려는 놈들을 전부 죽일 수 있는 시간만 다오." 타들어가던 그의 생명력과 분노가 공명하듯, 허리춤에서 붉은빛이 맹렬하게 타올랐다. 그것은 파괴와 수호, 모순된 두 가지 열망이 만들어낸 불의 신의 눈이었다.</p>
</div>
</details>
</div>
</div>
</div>
</div>
<!-- 노예린 프로필 -->
<div class="profile-wrapper">
<div class="character-card">
<div class="top-panel char-bg-cryo">
<div class="vision-art" style="color: #99ffff; border-color: #99ffff;">氷</div>
<h1 class="character-name">노예린</h1>
<h2 class="character-title">설원의 도망자</h2>
<h2 class="character-ex">얼어붙은 과거의 상처를 안고 있지만, 그 누구보다 강인한 생명력으로 오빠의 곁을 지키는 소녀.</h2>
<div class="info-grid">
<div class="info-item">
<span class="label">신의 눈</span>
<div class="vision-display">
<span class="vision-icon cryo"></span>
<span>얼음</span>
</div>
</div>
<div class="info-item">
<span class="label">무기</span>
<span>법구</span>
</div>
</div>
</div>
<div class="bottom-panel">
<div class="section">
<h3 class="section-title">기본 정보</h3>
<p><strong>출신 지역:</strong> 폰타인 (현재 이나즈마 도망자 신분)</p>
<p><strong>소속:</strong> 무소속</p>
</div>
<div class="section">
<h3 class="section-title">운명의 자리: 겁쟁이토끼자리</h3>
<ul class="constellation-list">
<li><strong>1단계 - 숨죽인 울음:</strong> 원소전투 스킬 '얼음 결정의 요람'의 보호막 존재 시, 캐릭터의 원소 에너지 충전 효율이 20% 증가합니다.</li>
<li><strong>2단계 - 맞잡은 손:</strong> 원소폭발 발동 시, 파티 내 '차도환'의 HP를 즉시 20% 회복시키고 공격력을 20% 증가시킵니다.</li>
<li><strong>3단계 - 녹지 않는 기억:</strong> 원소전투 스킬 '얼음 결정의 요람'의 스킬 레벨 +3.</li>
<li><strong>4단계 - 설원의 발자국:</strong> 보호막이 파괴될 때, 주변 적에게 얼음 원소 피해를 입히고 2초간 빙결 상태로 만듭니다.</li>
<li><strong>5단계 - 여린 맹세:</strong> 원소폭발 '순백의 위로'의 스킬 레벨 +3.</li>
<li><strong>6단계 - 공존하는 계절:</strong> HP가 30% 이하로 떨어지면 자동으로 강력한 얼음 보호막이 생성됩니다. 이 효과는 60초마다 1회 발동합니다.</li>
</ul>
</div>
<div class="section">
<h3 class="section-title">전투 스킬</h3>
<h4>원소전투 스킬: 얼음 결정의 요람</h4>
<p>자신과 주변 아군에게 얼음 원소로 이루어진 견고한 보호막을 생성합니다. 이 보호막은 적의 공격을 막아주며, 보호막 내부에 있는 캐릭터의 HP를 서서히 회복시킵니다. 차도환에게 적용될 경우 보호막의 내구도가 150% 증가합니다.</p>
<i class="skill-flavor"><p>"오빠가 다치지 않았으면 좋겠어..." 두려움 속에서도 소중한 사람을 지키고 싶은 간절한 기도가 형상화된 껍질.</p></i>
<h4>원소폭발: 순백의 위로</h4>
<p>차가운 눈보라를 일으켜 넓은 범위의 적에게 얼음 원소 피해를 지속적으로 입히고, 범위 내 아군의 HP를 대폭 회복시킵니다. 눈보라 속에서는 적의 움직임이 둔해지며, 아군은 경직 저항력이 상승합니다.</p>
<i class="skill-flavor"><p>그녀의 세상은 차갑게 얼어붙었지만, 그 안에는 서로의 체온을 나눌 수 있는 작은 공간이 존재한다. 그곳은 오직 두 사람만을 위한 안식처다.</p></i>
</div>
<div class="section">
<details class="story-section">
<summary class="section-title">캐릭터 스토리</summary>
<div class="story-content">
<h4>캐릭터 스토리 1</h4>
<p>폰타인의 평범한 가정에서 태어났으나, 특이한 체질 때문에 '차 가문'의 수장에게 납치되어 이나즈마로 끌려왔다. 낯선 땅, 어두운 지하 감옥에서의 생활은 어린 예린에게 씻을 수 없는 트라우마를 남겼다. 그녀는 매일 밤 울며 부모님을 찾았지만, 돌아오는 것은 차가운 실험 도구들의 소음뿐이었다.</p>
<h4>캐릭터 스토리 2</h4>
<p>지옥 같은 나날 중 유일한 빛은 감시자로 붙여진 소년, 도환이었다. 처음엔 무뚝뚝하고 거칠어 보였지만, 도환은 예린이 넘어지면 투덜거리면서도 업어주었고, 악몽을 꾸면 깰 때까지 손을 잡아주었다. 예린에게 도환은 감시자가 아닌 구원자였으며, 그에게 전적으로 의존하게 되었다. 그녀는 도환의 옷자락을 잡고 뒤를 졸졸 쫓아다니는 것만이 유일한 생존 방식이었다.</p>
<h4>캐릭터 스토리 3</h4>
<p>탈출하던 날 밤, 예린은 도환이 자신을 위해 살인을 저지르고 괴물이 되어가는 모습을 목격했다. 피를 뒤집어쓴 도환의 모습은 공포스러웠지만, 예린은 도망치지 않았다. 대신 떨리는 손으로 피 묻은 도환의 얼굴을 닦아주며 "고마워"라고 속삭였다. 그 순간, 예린은 더 이상 보호받기만 하는 존재가 아니라, 도환의 폭주를 잠재울 수 있는 유일한 안식처가 되기로 결심했다.</p>
<h4>캐릭터 스토리 4</h4>
<p>겉보기엔 유약하고 겁이 많아 보이지만, 도환이 관련된 일이라면 놀라울 정도로 강단 있는 모습을 보인다. 도환이 무리하게 싸우려 할 때면 눈물을 글썽이며 그를 말리고, 도환이 자신 때문에 죄책감을 느낄 때면 환하게 웃어 보이며 그를 위로한다. 그녀의 소원은 거창한 복수나 부귀영화가 아닌, 그저 도환과 함께 평범하고 평화로운 하루를 보내는 것이다.</p>
<h4>캐릭터 스토리 5</h4>
<p>티바트 대륙을 떠돌며, 예린은 조금씩 성장하고 있다. 여전히 기계 장치나 낯선 사람을 무서워하고 길을 잃기 일쑤지만, 이제는 자신의 신의 눈을 사용해 도환을 지원할 줄 안다. 그녀는 안다. 도환이 자신을 지키기 위해 세상을 적으로 돌렸다면, 자신은 그런 도환을 지키기 위해 세상 끝까지 함께해야 한다는 것을.</p>
<h4>신의 눈</h4>
<p>추격자들과의 전투 중, 도환이 치명상을 입고 쓰러지려던 순간이었다. 예린은 도환의 앞을 가로막으며 절규했다. "더 이상 다치지 마! 제발!" 공포에 질려 아무것도 못 하던 그녀가 처음으로 누군가를 지키고자 했던 순간, 그녀의 눈물은 차가운 얼음 결정으로 변해 견고한 방패가 되었다. 얼음의 신의 눈은 그녀의 차가운 공포가 아닌, 그 공포를 얼려서라도 사랑하는 이를 지키겠다는 의지에서 피어났다.</p>
</div>
</details>
</div>
</div>
</div>
</div>
</div>
<script>
// 간단한 인터랙션: 스토리를 펼칠 때 부드러운 스크롤 이동 (선택 사항)
document.querySelectorAll('details').forEach((detail) => {
detail.addEventListener('toggle', (e) => {
if (detail.open) {
// 다른 열린 details 닫기 (하나만 열리게 하려면 주석 해제)
/*
document.querySelectorAll('details').forEach((other) => {
if (other !== detail && other.open) {
other.open = false;
}
});
*/
}
});
});
</script>
</body>
</html>
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
