@charset "utf-8";

/*
 * ===================================================================
 * Global Variables
 * ===================================================================
 */
:root {
    /* Colors */
    --color-primary: red;
    --color-primary-hover: #ffb9b9;
    --color-primary-active: #ff4242;
    --color-secondary: #00bf01;
    --color-text-light: white;
    --color-text-dark: black;
    --color-text-muted: gray;
    --color-bg-light: #f9f9f9;
    --color-bg-medium: #f3f3f3;
    --color-bg-dark: #575757;
    --color-border: #d7d7d7;
    --color-border-dark: #8d8d8d;
    --color-modal-overlay: rgb(0 0 0 / 32%);
    --color-test-mode-overlay: rgba(0, 0, 0, 0.5);
    --color-banner-bg: #f8f9fa;
    --color-banner-border: #bac1c7;
    --color-banner-text: #495057;

    /* Typography */
    --font-size-sm: 0.8em;
    --font-size-md: 1.1em;
    --font-size-lg: 1.3em;
    --font-size-xl: 1.5em;
    --font-size-xxl: 1.7em;
    --font-size-modal-tab: 1.3em;
    --font-size-modal-adm-tab: 16px;
    --font-size-banner: 20px;
    --font-size-button: 17px;

    /* Spacing & Radius */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 5px;
    --border-radius-xl: 8px;
    --border-radius-modal: 10px;
}

/*
 * ===================================================================
 * Header & Filters
 * ===================================================================
 */
.main-top-header {
    margin-bottom: 10px;
    display: none;
}

.main-top-header .list-main {
    display: flex;
    flex-wrap: wrap;
    background: var(--color-bg-medium);
    padding: 4px 2px;
    margin-bottom: 2px;
    border-radius: var(--border-radius-sm);
}

/* Common styles for filter buttons */
.main-top-header .addr-list .item,
.main-top-header .comptype-list .item {
    padding: 4px 7px;
    color: var(--color-text-dark);
    background: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    margin: 1px 2px;
    font-size: var(--font-size-md);
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
}

/* Common active state for filter buttons */
.main-top-header .addr-list .item.active,
.main-top-header .comptype-list .item.active,
.addr-sub-list .item.active {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.addr-sub-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.addr-sub-list .item {
    padding: 5px;
    font-size: var(--font-size-md);
    margin: 5px;
}

/*
 * ===================================================================
 * Component (Company) List
 * ===================================================================
 */
.main-comp-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.main-comp-list .item {
    width: 20%;
    padding: 3px;
    display: block;
}

.main-comp-list .item.opga:before {
    content: "오피가이드";
    display: block;
    position: absolute;
    color: var(--color-text-light);
    background: var(--color-secondary);
    padding: 2px 4px;
    border-radius: var(--border-radius-lg);
    margin-left: 2px;
    z-index: 2;
}

.main-comp-list .item .item-inner {
    display: block;
    padding: 4px;
    background: var(--color-bg-light);
    overflow: hidden;
    /* border: 1px solid #d3d3d3; */
    /* Slightly different from --color-border */
}

.main-comp-list .item .thumb {
    padding-bottom: 50%;
    display: block;
    position: relative;
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.main-comp-list .item .thumb .img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.main-comp-list .item .thumb .img img {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    object-fit: cover;
}

.main-comp-list .item .name {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    font-weight: bolder;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    display: block;
}

.main-comp-list .item .name .cmpname {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}

.main-comp-list .item .name .type,
.main-comp-list .item .name .addr {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-left: 1px;
    font-weight: lighter;
    display: inline-block;
}

.main-comp-list .item .name .addr:after {
    content: "|";
    padding: 0px 4px;
    display: inline-block;
}

/*
 * ===================================================================
 * Test Mode
 * ===================================================================
 */
.testmode .main-comp-list .item .thumb .img img {
    filter: blur(13px);
}

.testmode .main-comp-list .item .thumb .img a:after {
    content: "모집중";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-light);
    font-size: var(--font-size-xl);
    font-weight: bold;
    background-color: var(--color-test-mode-overlay);
    padding: 5px 10px;
    border-radius: var(--border-radius-lg);
    text-align: center;
    pointer-events: none;
    min-width: 140px;
    z-index: 1;
}

/*
 * ===================================================================
 * Modal
 * ===================================================================
 */
.cmp_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: var(--color-modal-overlay);
    align-items: center;
}

.cmp_modal .cmp_modal_inner {
    margin: 0 auto;
    width: calc(100% - 20%);
    max-width: 800px;
    min-height: calc(100% - 3.5rem);
    display: flex;
    max-height: calc(100% - 50px);
    overflow: hidden;
    background: var(--color-text-light);
    border-radius: var(--border-radius-modal);
    border: 1px solid var(--color-border-dark);
    padding: 10px;
    flex-direction: column;
}

.cmp_modal .cmp_modal_inner .modal-top {
    display: flex;
    width: 100%;
}

.cmp_modal .cmp_modal_inner .modal-top .tab {
    display: flex;
    flex-grow: 1;
}

.cmp_modal .cmp_modal_inner .modal-top .tab .tmenu {
    padding: 10px 0px;
    margin: 0 10px;
    font-size: var(--font-size-modal-tab);
    font-weight: bold;
    cursor: pointer;
    border-bottom: 2px solid rgb(255 66 66 / 0%);
    color: var(--color-text-muted);
}

.cmp_modal .cmp_modal_inner .modal-top .tab .tmenu:hover {
    border-bottom-color: var(--color-primary-hover);
}

.cmp_modal .cmp_modal_inner .modal-top .tab .tmenu.active {
    border-bottom-color: var(--color-primary-active);
    color: var(--color-text-dark);
}

.cmp_modal .cmp_modal_inner .modal-top .tab-right .adm-tab {
    display: flex;
    margin-right: 20px;
    align-items: center;
}

.cmp_modal .cmp_modal_inner .modal-top .tab-right .tmenu {
    display: flex;
    align-items: center;
    padding: 2px;
    font-size: var(--font-size-modal-adm-tab);
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
}

.cmp_modal .cmp_modal_inner .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--color-text-light);
    outline: 0;
    text-align: center;
    max-height: calc(100% - 50px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.cmp_modal .cmp_modal_inner .modal-content img {
    max-width: 100%;
}

.cmp_modal .cmp_modal_inner .modal-review,
.cmp_modal .cmp_modal_inner .modal-cmnt {
    display: none;
}

.tab-right {
    display: flex;
}

.tab-right .close {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.tab-right .close:before,
.tab-right .close:after {
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    background-color: var(--color-text-dark);
}

.tab-right .close:before {
    transform: rotate(45deg);
}

.tab-right .close:after {
    transform: rotate(-45deg);
}

/*
 * ===================================================================
 * Buttons
 * ===================================================================
 */
.index-btm-btn {
    margin: 30px 10px 10px;
    text-align: center;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.index-btm-btn .index-next-btn {
    font-size: var(--font-size-button);
    color: var(--color-text-light);
    background: var(--color-bg-dark);
    border: 0;
    padding: 7px 13px;
    border-radius: var(--border-radius-sm);
}

/*
 * ===================================================================
 * Banners & Search
 * ===================================================================
 */
.index_banner,
.index_banner_left,
.index_banner_right {
    background-color: var(--color-banner-bg);
    border: 1px dashed var(--color-banner-border);
    border-radius: var(--border-radius-xl);
    box-sizing: border-box;
}

.index_banner {
    width: calc(50% - 3px);
}

.index_banner_left,
.index_banner_right {
    width: 33%;
    max-width: 330px;
}

.index_banner .inner,
.index_banner_left .inner,
.index_banner_right .inner {
    padding-bottom: 30%;
    display: block;
    position: relative;
    height: 0;
    overflow: hidden;
}

.index_banner .inner .inner_ctt,
.index_banner_left .inner .inner_ctt,
.index_banner_right .inner .inner_ctt {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--color-banner-text);
    font-size: var(--font-size-banner);
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.mobile.wrap_index_banner {
    display: none;
}


/*
 * ===================================================================
 * Responsive Media Queries
 * ===================================================================
 */
@media only screen and (max-width: 600px) {
    .main-comp-list .item {
        width: 25%;
    }
}

@media only screen and (max-width: 520px) {
    .main-comp-list .item {
        width: 33.3%;
    }

    .index_banner_left,
    .index_banner_right {
        display: none;
    }

    .mobile.wrap_index_banner {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 10px;
        padding: 5px;
    }
}

@media only screen and (max-width: 380px) {
    .main-comp-list .item {
        width: 50%;
    }

    .index_banner {
        width: 100%;
    }
}