연습장:삼쩌모/1 문서 원본 보기

{{삼쩌모 연습장}}{{목차}}
== 구종차트 ==
{{#css:
/* 공통 컨테이너 설정 */
  .pitch-container {
    position: relative;
    height: 180px; /* 정보가 펼쳐질 공간 확보 */
    margin-top: 3px;
    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 {{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>
<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>
<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>
<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>
<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>
</div>