@import url("../components/image-modal.css");

/* ==== Content01 ==== */
.case-image-wrapper {
    margin-top: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #F9F9F9;
    border-radius: 10px;
}

.image-guide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: white;
    border-radius: 10px;
    outline: 1px solid #D0D0D0;
    outline-offset: -1px;
}

.image-guide .icon {
    width: 16px;
    height: 16px;
    display: block;
}

.image-guide .text {
    font-size: var(--font-md);
    font-weight: 500;
    line-height: 1.5;
}

.image-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-list img {
    width: 1018px;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
    display: block;
}

.image-list a:focus-visible {
    outline: 3px solid #90C2FF;
    outline-offset: 6px;
    border-radius: 3px;
}

.tab-select {
    display: none;
}

@media (max-width:768px) {

    .case-image-wrapper {
        padding: 0;
        background-color: white;
    }

    .image-guide .text {
        font-size: var(--font-base);
    }

    ul[data-tabs],
    .tab .tab-list.case[role="tablist"] {
        display: none !important
    }

    .tab-select {
        display: block;
        width: 100%;
        margin: 0 auto 10px;
        padding: 10px 40px 10px 20px;
        color: var(--color-black);
        font-size: var(--font-lg);
        font-weight: 600;
        line-height: 30px;
        border-bottom: 4px solid var(--active-color, var(--tab-color-1));
        background: url("data:image/svg+xml;utf8,<svg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 8L7 2L1 8' stroke='%23111111' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/></svg>") no-repeat right 14px center / 14px 9px #fff;
        appearance: none;
    }

    .tab-select.open {
        background-image: url("data:image/svg+xml;utf8,<svg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 1L7 7L13 1' stroke='%23111111' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/></svg>");
    }
}

@media (max-width: 480px) {
    .tab-select {
        padding: 5px 15px;
        font-size: var(--font-md);
    }

    .image-guide .text {
        font-size: var(--font-sm);
    }
}