/* =========================================
   영웅 관계도 (Relation) 스타일
   ========================================= */

/* 영웅 관계도 - 토글 구조 */
.relation-list { max-width: 700px; margin: 0 auto; text-align: left; }
.relation-item { 
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.relation-item:last-child { border-bottom: none; }
.relation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    cursor: pointer;
    font-family: var(--f-sans);
    transition: color 0.2s;
}
.relation-header:hover { color: var(--c-accent); }
.relation-header .hero-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
.relation-header .toggle-icon {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.3s;
}
.relation-item.open .toggle-icon { transform: rotate(180deg); }
.relation-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 0 0 10px;
    border-left: 2px solid rgba(255,255,255,0.2);
    margin-left: 5px;
}
.relation-item.open .relation-body { 
    max-height: 500px; 
    padding-bottom: 16px;
}
.relation-attr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 12px 15px;
    font-family: var(--f-sans);
    flex-wrap: wrap;
}
.relation-attr .attr-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}
.relation-attr .attr-tag.dark { background: var(--c-dark); color: #fff; }
.relation-attr .attr-tag.earth { background: var(--c-earth); color: #000; }
.relation-attr .attr-tag.light { background: var(--c-light); color: #000; }
.relation-attr .attr-tag.fire { background: var(--c-fire); color: #fff; }
.relation-attr .attr-tag.water { background: var(--c-water); color: #fff; }
.relation-attr .role {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.relation-attr .desc {
    display: block;
    width: 100%;
    max-width: 500px;
    font-size: 0.82rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.6);
    margin-top: 10px;
    word-break: keep-all;
}

/* 모바일 반응형 */
@media (max-width: 950px) {
    .relation-list { padding: 0 10px; }
    .relation-header .hero-name { font-size: 0.9rem; }
    .relation-attr .desc { font-size: 0.8rem; }
}