연습장:삼쩌모/1: 두 판 사이의 차이

2026년 2월 6일 (금) 09:30 판

삼쩌모의 연습장
메인 범용	1번 틀 제작	2번 나무마크	3번 위키 점검	4번 기능 실험
5번 기능 실험	6번 틀 제작	7번 공용 틀	8번 틀 제작	메모 메모

구종차트

4FB
44%

CRV
17%

SLD
31%

@@ 1번째 줄: / 1번째 줄: @@
 {{삼쩌모 연습장}}{{목차}}
 == 구종차트 ==
-{{#css:
+<div {{style|mt-3px mb-1rem pos-relative h-134px}}>
-/* 공통 컨테이너 설정 */
+<div style="left: 50%; position: absolute; z-index:40; background:var(--bg); border: 0.3rem double light-dark(#cccccc, #555555); color: {{adt|#b31b1b}}; transform: translateX(-1.9rem); border-radius:50%; width:3.2rem; margin-left:auto; margin-right:auto; text-align:center; line-height:1.1; padding-top:0.5rem; padding-bottom:0.5rem;">'''4FB'''<br>44%</div>
-.pitch-container {
+<div style="left: 50%; position: absolute; background:linear-gradient(to bottom, transparent, #ffc000aa); transform: translateX(-0.95rem); width:2rem; margin-left:auto; margin-right:auto; text-align:center; line-height:1.1; padding-top:0.5rem; padding-bottom:0.5rem; top: 1.6rem; height:calc(80px - 1.0rem);"></div>
-position: relative;
+<div style="left: 50%; top: 80px; position: absolute; z-index:40; border: 0.1rem solid #e3a000; background: #ffc000; color: black; transform: translateX(-1.7rem); border-radius:50%; width:3.2rem; margin-left:auto; margin-right:auto; text-align:center; line-height:1.1; padding-top:0.5rem; padding-bottom:0.5rem;">'''CRV'''<br>17%</div>
-height: 180px; /* 정보가 펼쳐질 공간 확보 */
+<div style="left: 50%; position: absolute; background:linear-gradient(to bottom, transparent, #3e75b0aa); transform: translateX(-42px) translateY(-10px) rotate(45deg); width:2rem; margin-left:auto; margin-right:auto; text-align:center; line-height:1.1; padding-top:0.5rem; padding-bottom:0.5rem; top: 1.6rem; height:calc(80px - 1.0rem);"></div>
-margin-top: 3px;
+<div style="left: calc(50% - 56px); top: 56px; position: absolute; z-index:40; border: 0.1rem solid #3e75b0; background: #5287bf; color: white; transform: translateX(-1.7rem); border-radius:50%; width:3.2rem; margin-left:auto; margin-right:auto; text-align:center; line-height:1.1; padding-top:0.5rem; padding-bottom:0.5rem;">'''SLD'''<br>31%</div>
-margin-bottom: 1rem;
-}
-/* 각 구종(Circle) 기본 스타일 */
-.pitch-node {
-position: absolute;
-left: 50%;
-z-index: 40;
-width: 3.2rem;
-border-radius: 50%;
-text-align: center;
-line-height: 1.1;
-padding-top: 0.5rem;
-padding-bottom: 0.5rem;
-transform: translateX(-50%);
-cursor: pointer;
-transition: all 0.3s ease-in-out;
-overflow: hidden;
-}
-/* 호버 시 펼쳐지는 상세 정보 스타일 */
-.details {
-max-height: 0;
-opacity: 0;
-font-size: 0.75rem;
-margin-top: 4px;
-transition: all 0.3s ease-in-out;
-border-top: 1px solid rgba(0,0,0,0.1);
-padding-top: 4px;
-}
-/* 호버 액션: 원이 커지며 정보 출력 */
-.pitch-node:hover {
-border-radius: 12px;
-height: auto;
-z-index: 100;
-}
-.pitch-node:hover .details {
-max-height: 50px;
-opacity: 1;
-}
-/* 선(Tail) 스타일 유지 */
-.pitch-line {
-position: absolute;
-left: 50%;
-width: 2rem;
-transform: translateX(-50%);
-z-index: 30;
-}
-}}
-<div class="pitch-container">
-<div class="pitch-node" style="top: 0; border: 0.3rem double #cccccc; color: #b31b1b; background: white;">
-<strong>4FB</strong><br>44%
-<div class="details">148.5km<br>회전 2300</div>
-</div>
-<div class="pitch-node" style="top: 56px; left: calc(50% - 40px); border: 0.1rem solid #3e75b0; background: #5287bf; color: white;">
-<strong>SLD</strong><br>31%
-<div class="details">132.1km<br>수평 15cm</div>
-</div>
-<div class="pitch-node" style="top: 80px; border: 0.1rem solid #e3a000; background: #ffc000; color: black;">
-<strong>CRV</strong><br>17%
-<div class="details">121.4km<br>낙차 40cm</div>
-</div>
-<div class="pitch-line" style="top: 1.6rem; height: 60px; background: linear-gradient(to bottom, transparent, #ffc000aa);"></div>
 </div>