/*
 * Block Skin: image/hyetaek-circle — 아이콘 카테고리 (혜택의 차이)
 *
 * 열 배치는 mublo-item-layout(block.css)이 한다. 여기서는 간격과
 * 한 칸의 모양 — 정사각형 아이콘 타일 + 라벨 — 만 책임진다.
 */

.hy-circle {
    --hy-circle-size: 84px;
    --hy-circle-tile-background: #f5f5f5;
}

.hy-circle nav {
    display: block;
}

/* 시안 간격 20px 12px — block.css 기본 1rem 을 덮는다. */
.hy-circle .mublo-item-layout:not(.is-slide) > ul {
    gap: 20px 12px;
}

/* PC "자동" — 한 항목이 답답하지 않도록 96px 이상씩 채운다. */
.hy-circle .mublo-item-layout:not(.is-slide)[data-pc-cols="auto"] > ul {
    grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
}

.hy-circle__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hy-circle__item {
    min-width: 0;
    text-align: center;
}

.hy-circle__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--foreground, #111);
    text-decoration: none;
}

a.hy-circle__link:hover {
    color: var(--foreground, #111);
}

/* 모든 항목을 동일한 연회색 정사각형 타일로 보여 준다. */
.hy-circle__thumb {
    display: block;
    flex: none;
    width: var(--hy-circle-size);
    height: var(--hy-circle-size);
    max-width: 100%;
    border-radius: 2px;
    overflow: hidden;
    background: var(--hy-circle-tile-background);
}

.hy-circle__thumb picture,
.hy-circle__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.hy-circle__label {
    display: block;
    max-width: 100%;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 손이 먼저 알도록 — 마우스가 있는 환경에서만 살짝 떠오른다. */
@media (hover: hover) {
    .hy-circle__thumb {
        transition: transform 0.18s ease;
    }

    a.hy-circle__link:hover .hy-circle__thumb {
        transform: translateY(-2px);
    }
}

a.hy-circle__link:focus-visible {
    border-radius: 4px;
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .hy-circle__thumb {
        transition: none;
    }

    a.hy-circle__link:hover .hy-circle__thumb {
        transform: none;
    }
}

@media (max-width: 768px) {
    .hy-circle {
        --hy-circle-size: 64px;
    }

    /* 시안 m-grid4 간격 16px 6px */
    .hy-circle .mublo-item-layout:not(.is-slide) > ul {
        gap: 16px 6px;
    }

    /* 모바일 "자동" 도 시안처럼 4칸으로 맞춘다. */
    .hy-circle .mublo-item-layout:not(.is-slide)[data-mo-cols="auto"] > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hy-circle__label {
        font-size: 12px;
    }
}