/**************************/
/* モーダル（状態） */
/**************************/
.skillEffectModal {
    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    z-index: 9999;
}
.skillEffectModal-content {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(900px, 90vw);

    max-height: 80vh;

    overflow-y: auto;

    background: white;

    border-radius: 12px;

    padding: 24px;

    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.3);
}

#closeSkillEffectModal {
    position: absolute;

    top: 10px;
    right: 15px;

    cursor: pointer;

    font-size: 28px;

    font-weight: bold;

    color: #666;
}

.close-skillEffectModal:hover {
    color: #000;
}

.skill-effect-popup-btn {
    cursor: pointer;
    font-weight: bold;
}

.skill-effect-popup-btn:hover {
    background-color: #dbeafe;
    border-radius: 8px;
}

.skill-effect-detail-row {
    display: flex;
    margin-bottom: 12px;
    align-items: flex-start;
}

.skill-effect-detail-label {
    width: 80px;
    font-weight: bold;
    color: #666;
    flex-shrink: 0;
}

.skill-effect-detail-value {
    flex: 1;
}

.category-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.detail-effect {
    margin-top: 20px;
}

.detail-effect-value {
    margin-top: 6px;
    font-size: 18px;
    font-weight: bold;
    color: #1976d2;
}

.detail-effect-item {
    background-color: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    width: fit-content;
    font-size: 0.9em;

    margin-bottom: 4px;
    padding-left: 1em;
    position: relative;
}

.detail-effect-item::before {
    content: "・";
    position: absolute;
    left: 0;
}

.detail-effect-item:last-child {
    margin-bottom: 0;
}

#skillEffectTitle {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* 特殊（灰色） */
.category-tag.special {
    background: #e0e0e0;
    color: #424242;
}

/* 災厄（紫） */
.category-tag.disaster {
    background: #e1bee7;
    color: #6a1b9a;
}

/* 聖護（青） */
.category-tag.holy {
    background: #bbdefb;
    color: #1565c0;
}

/* 罪悪（黄色） */
.category-tag.sin {
    background: #fff59d;
    color: #f57f17;
}

/* 有益（緑） */
.category-tag.benefit {
    background: #c8e6c9;
    color: #2e7d32;
}

/* デバフ（赤） */
.category-tag.debuff {
    background: #ffcdd2;
    color: #c62828;
}

.skill-effect-detail-group {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.skill-effect-detail-group .skill-effect-detail-row:first-child {
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-weight: bold;
    color: #212529;
}

.skill-effect-detail-divider {
    display: none;
}

.text-danger {
    color: #dc3545;
    font-weight: bold;
}

/**************************/
/* モーダル（連携スキル） */
/**************************/
.modal {
    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    z-index: 9999;
}
.modal-content {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(900px, 90vw);

    max-height: 80vh;

    overflow-y: auto;

    background: white;

    border-radius: 12px;

    padding: 24px;

    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.3);
}

#closeLinkSkillModal {
    position: absolute;

    top: 10px;
    right: 15px;

    cursor: pointer;

    font-size: 28px;

    font-weight: bold;

    color: #666;
}

.close-LinkSkillModal:hover {
    color: #000;
}

.link-skill-popup-btn {
    cursor: pointer;
    font-weight: bold;
    transition: text-shadow 0.2s ease, color 0.2s ease;
}

.link-skill-popup-btn:hover {
    border-radius: 8px;
    color: #0284c7;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

#linkSkillText {
    white-space: pre-wrap;
    line-height: 1.8;
    font-size: 15px;
    font-family: inherit;
}

#linkSkillTitle {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}