:root {
    /* 밝은 톤으로 전체 팔레트 설정 */
    --xen-board-bg: #ffffff;
    --xen-board-edge: #e2e5f2;
    --xen-blue-glow: #5332E6;       /* 형광 파란 베이스 */
    --xen-red-glow: #ff3366;
    --xen-text-main: #1f2937;       /* 거의 검정에 가까운 진회색 */
    --xen-text-muted: #9ca3af;
}

/* body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: var(--xen-text-main);
    } */

.xencosmecc_compcheck_board-wrapper {
    width: 100%;
    max-width: 480px;
    /* padding: 16px; */
}
.xencosmecc_compcheck_board-wrapper * {
    box-sizing: border-box;
}

.xencosmecc_compcheck_board {
    position: relative;
    padding: 18px 16px 20px;
    /* padding: 16px; */
    /* padding-bottom: 20px; */
    border-radius: 16px;
    /* background: radial-gradient(circle at top, #ffffff 0, #eef1ff 70%); */
    /* box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(156, 163, 175, 0.25); */
    /* overflow: hidden; */
}

.xencosmecc_compcheck_board-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 8px;
}

.xencosmecc_compcheck_board-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--xen-text-main);
}

.xencosmecc_compcheck_board-sub {
    font-size: 11px;
    color: var(--xen-text-muted);
}

.xencosmecc_compcheck_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.0rem;
}

/* 블록 자체는 정사각형 비율 유지 */
.xencosmecc_compcheck_block {
    position: relative;
    padding-top: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.xencosmecc_compcheck_block.blankdummyblock {
    visibility: hidden;
}
.xencosmecc_compcheck_block.noselectionblock {
    display: none;
}

.xencosmecc_compcheck_block-inner {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    /* border-radius: 18px; */
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8),
        0 6px 10px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transform-style: preserve-3d;
    transform: translateY(3px);
    transition:
        transform .17s ease-out,
        box-shadow .17s ease-out,
        filter .17s ease-out,
        background .17s ease-out,
        border-color .17s ease-out,
        opacity .12s ease-out;
}

.xencosmecc_compcheck_block-label {
    font-size: 13px;
    text-align: center;
    line-height: 1.3;
    /* padding: 2px 4px; */
    padding: 2px;
    color: var(--xen-text-main);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
    pointer-events: none;
    white-space: pre-line;
}

/* 호환 OK (형광 파란 계열 – #5332E6 베이스) */
.xencosmecc_compcheck_block--ok .xencosmecc_compcheck_block-inner {
    /* background: radial-gradient(circle at 25% 0,
            rgba(181, 165, 255, 1) 0,
            #f3f1ff 52%,
            #ffffff 100%); */
    /*
    box-shadow:
        0 0 10px rgba(83, 50, 230, 0.35),
        0 0 24px rgba(83, 50, 230, 0.20),
        0 8px 14px rgba(15, 23, 42, 0.18);
    */
    background: radial-gradient(circle at 35% 0,
            rgb(181, 180, 185) 0,
            #ebeaee 60%,
            #b9b9b9 100%);
    box-shadow:
        0 0 10px rgba(217, 223, 222, 0.35),
        0 0 24px rgba(217, 221, 221, 0.2),
        0 8px 14px rgba(44, 46, 46, 0.18);
    border-color: rgba(203, 218, 216, 0.45);
    filter: drop-shadow(0 0 8px rgba(219, 230, 228, 0.28));
}
.xencosmecc_compcheck_block--ok .xencosmecc_compcheck_block-inner.blockforfacemakeup {
    /* background: radial-gradient(circle at 80% 80%,
        rgb(46, 209, 201) 0,
        #f3f1ff 75%,
        #ffffff 100%); */
    background: radial-gradient(circle at 25% 0,
            #ffe0ea 0,
            #ffd1dc 45%,
            #fff7f9 100%);
    border-color: rgba(255, 51, 102, 0.45);
    box-shadow:
        0 0 10px rgba(255, 51, 102, 0.35),
        0 0 24px rgba(255, 51, 102, 0.22),
        0 8px 14px rgba(15, 23, 42, 0.20);
    filter: drop-shadow(0 0 8px rgba(255, 51, 102, .3));
}
.xencosmecc_compcheck_block--ok .xencosmecc_compcheck_block-inner.blockforeyes {
    background: radial-gradient(circle at 25% 0,
            rgba(181, 165, 255, 1) 0,
            #f3f1ff 75%,
            #ffffff 100%);
    border-color: rgba(105, 51, 255, 0.45);
    box-shadow:
        0 0 10px rgba(83, 50, 230, 0.35),
        0 0 24px rgba(83, 50, 230, 0.20),
        0 8px 14px rgba(15, 23, 42, 0.18);
    filter: drop-shadow(0 0 8px rgba(156, 51, 255, 0.3));
}
.xencosmecc_compcheck_block--ok .xencosmecc_compcheck_block-inner.blockforlips {
    background: radial-gradient(circle at 25% 0%,
        rgba(150, 21, 130, 0.4) 0,
        #f3f1ff63 70%,
        #ffffff63 100%);
    border-color: rgba(223, 116, 208, 0.42);
    box-shadow:
        0 0 10px rgba(179, 50, 230, 0.35),
        0 0 24px rgba(230, 50, 200, 0.2),
        0 8px 14px rgba(42, 15, 38, 0.18);
    filter: drop-shadow(0 0 8px rgba(255, 51, 177, 0.3));
}

/* 충돌 존재하는 블록 (형광 붉은색 계열) */
.xencosmecc_compcheck_block--conflict .xencosmecc_compcheck_block-inner {
    /*
    background: radial-gradient(circle at 25% 0,
            #ffe0ea 0,
            #ffd1dc 45%,
            #fff7f9 100%);
    border-color: rgba(255, 51, 102, 0.45);
    box-shadow:
        0 0 10px rgba(255, 51, 102, 0.35),
        0 0 24px rgba(255, 51, 102, 0.22),
        0 8px 14px rgba(15, 23, 42, 0.20);
    filter: drop-shadow(0 0 8px rgba(255, 51, 102, .3)); */

    background: radial-gradient(circle at 25% 0,
            rgb(212, 211, 216) 0,
            #f3f1ff 52%,
            #f1eded 100%);
    box-shadow:
        0 0 10px rgba(217, 223, 222, 0.35),
        0 0 24px rgba(217, 221, 221, 0.2),
        0 8px 14px rgba(88, 90, 90, 0.18);
    border-color: rgba(203, 218, 216, 0.45);
    filter: drop-shadow(0 0 8px rgba(219, 230, 228, 0.28));

    /* background: radial-gradient(circle at 25% 0,
            #ece367 0,
            #a8983e 45%,
            #fefff7 100%);
    border-color: rgba(211, 255, 51, 0.45);
    box-shadow:
        0 0 10px rgba(255, 224, 51, 0.6),
        0 0 24px rgba(255, 190, 51, 0.35),
        0 8px 14px rgba(42, 40, 15, 0.2);
    filter: drop-shadow(0 0 8px rgba(236, 216, 39, 0.3)); */
    /*
    background: radial-gradient(circle at 25% 0,
            #5693c5 0,
            #327f8d 45%,
            #8cb9f5 100%);
    border-color: rgba(51, 190, 255, 0.45);
    box-shadow:
        0 0 10px rgba(51, 214, 255, 0.6),
        0 0 24px rgba(51, 173, 255, 0.35),
        0 8px 14px rgba(15, 28, 42, 0.2);
    filter: drop-shadow(0 0 8px rgba(39, 108, 236, 0.3));
    */
}
.xencosmecc_compcheck_block--conflict .xencosmecc_compcheck_block-inner::before {
    /* content: "💥"; */
    content: "";
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background: url(../fonts/emoji-expressionless-flat-eyes.svg);
    background-size: cover;
    font-size: 20px;
    position: absolute;
    top: -10px;
    left: -4px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #1f293721;
    border-radius: 6px;
}

/* 클릭해서 활성화되면 살짝 떠오르게 */
.xencosmecc_compcheck_block--raised .xencosmecc_compcheck_block-inner {
    transform: translateY(-8px);
    box-shadow:
        0 14px 26px rgba(15, 23, 42, 0.25),
        0 0 24px rgba(148, 163, 184, 0.35);
}

/* 덜 중요한 애들은 살짝 dim 처리 */
.xencosmecc_compcheck_block--dimmed .xencosmecc_compcheck_block-inner {
    filter: grayscale(.25) brightness(.9);
    opacity: .55;
}

/* 연결선 레이어 (SVG) */
.xencosmecc_compcheck_links-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    transform: translateY(-6px);
    z-index: 3;
}

.xencosmecc_compcheck_link-path {
    fill: none;
    filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.22));
    stroke: rgba(255, 51, 102, 0.75);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-6px);
    /* pointer-events: none; */
    pointer-events: stroke;
    opacity: 0.0;
    transition: opacity 0.2s ease-out 0.2s;
}

.xencosmecc_compcheck_link-path:hover {
    stroke-width: 8;
    /* stroke: rgba(255, 92, 130, 0.95); */
    stroke: #ecb371f2;
}

/* 클릭/터치 히트 영역 전용 (투명, 굉장히 두꺼움) 보이는 edge의 stroke 두께보다 늘려서 판정 */
.xencosmecc_compcheck_link-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: stroke;
}
.xencosmecc_compcheck_link-cap {
    /* fill: rgba(255, 51, 102, 0.75); */
    /* stroke: rgba(255, 51, 102, 0.35); */
    fill: #55535379;
    stroke: #55535360;
    stroke-width: 1.8;
    transform: translateY(-6px);
    opacity: 0.0;
    transition: opacity 0.175s ease-out 0.175s;
}

.xencosmecc_compcheck_link-visible {
    opacity: 1.0;
}


/* 말풍선 / tooltip */
.xencosmecc_compcheck_tooltip {
    position: absolute;
    /* max-width: 260px; */
    width: 60%;
    max-width: 180px;
    font-size: 11px;
    line-height: 1.45;
    background: #111827c0;
    border-radius: 10px;
    padding: 8px 9px;
    color: #f9fafb;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.45),
        0 0 0 1px rgba(15, 23, 42, 0.3);
    z-index: 10;
    transform: translate(-50%, -120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out;
}

.xencosmecc_compcheck_tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}

.xencosmecc_compcheck_tooltip--visible {
    opacity: 1;
    pointer-events: auto;
}

.xencosmecc_compcheck_tooltip-title {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    margin-bottom: 2px;
    color: #e5e7eb;
}

.xencosmecc_compcheck_tooltip-body {
    color: #9ca3af;
    /* color: #cfc7cb; */
    word-break: keep-all;
}

/* 모바일에서 살짝 키우기 */
@media (max-width: 420px) {
    .xencosmecc_compcheck_board {
        padding: 16px 12px 18px;
    }

    .xencosmecc_compcheck_block-label {
        font-size: 10px;
        font-size: 13px;
    }
}