/**********************************************/
/* Markup Search */
.markup__search {
    position: sticky;
    top: 20px;
    padding: 0 16px;
    z-index: 1000;
}

/* Markup List */
.markup-list__area {
    display: none;
}

.markup-list__box {
    padding: 20px 16px 100px 16px;
}

.markup-list__item {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-50);
}
.markup-list__item.fold {
    padding-bottom: 12px;
}
.markup-list__item + .markup-list__item {
    margin-top: 20px;
}

.markup-list__title {
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 8px;
}

.markup-list__header {
    display: flex;
    align-items: center;
    position: relative;
    gap: 5px;
    width: 100%;
    margin-bottom: 8px;
}

.markup-list__header-badge {
    padding: 4px 6px 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.markup-list__header-badge--pc {
    background-color: #F2F4FE;
    color: #728CFF;
    margin-right: 5px;
}

.markup-list__header-badge--mobile {
    background-color: #ECFAF3;
    color: #46CF8B;
}

.markup-list__link-btn {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 10px;
    border: 0;
    background-color: var(--color-white);
    background-image: var(--link-btn-d);
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
}

.markup-list__link-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2px;
    left: -2px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gray-50);
    border-radius: 4px;
    background-color: var(--color-white);
}

.markup-list__copy-btn--pc {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 10px;
    border: 0;
    background-color: var(--color-white);
    background-image: var(--markup-copy-btn);
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
}

.markup-list__copy-btn--pc::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2px;
    left: -2px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gray-50);
    border-radius: 4px;
    background-color: var(--color-white);
}

/*.markup-list__date {*/
/*    margin-bottom: 20px;*/
/*}*/

.markup-list__date-main {
    color: var(--surface-medium-emphasis);
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.112px;
}

.markup-list__date-sub {
    color: var(--surface-disabled);
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.112px;
}

.markup-list__security {
    margin-top: 20px;
}
.markup-list__security-panel {
    display: flex;
    align-items: center;
    gap: 5px;
}

.markup-list__copy-btn {
    width: 18px;
    height: 18px;
    border: 0;
    padding: 0;
    background-color: transparent;
    background-image: var(--markup-copy-btn);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.markup-list__password-btn {
    width: 18px;
    height: 18px;
    border: 0;
    padding: 0;
    background-color: transparent;
    background-image: var(--markup-password-btn);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.markup-list__security-msg {
    width: 80px;
    margin-top: 20px;
    padding: 5px 8px;
    border: 1px solid var(--state-alert-error);
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    color: var(--state-alert-error);
}

.markup-list__security-link {
    width: calc(100% - 80px);
    color: var(--blue-600);
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.112px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.markup-list__security-panel .markup-list__security-password {
    width: calc(100% - 80px);
    height: auto;
    padding: 0;
    border: 0;
    color: var(--surface-high-emphasis);
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.112px;
    background-color: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
}

.markup-list__security-panel .markup-list__security-password:focus {
    border: 0;
    outline: 0;
}

.markup-list__hide-btn {
    padding: 8px 14px;
    border: 1px solid var(--field-inactive-border);
    border-radius: 20px;
    background-color: transparent;
    color: var(--surface-medium-emphasis);
    white-space: nowrap;
}

.markup-list__item.fold .markup-list__docs-list {
    display: none;
}
.markup-list__accordion-btn {
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: var(--markup-docs-accordion);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
}
.fold .markup-list__accordion-btn {
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: var(--markup-docs-accordion-fold);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
}
.markup-list__docs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 8px;
}
.markup-list__doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 34px);
}
.markup-list__doc-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: var(--markup-docs);
    background-position: center;
    background-repeat: no-repeat;
}
.markup-list__doc-name {
    overflow: hidden;
    width: calc(100% - 30px);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.markup-list__docs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.markup-list__docs .dropdown__box {
    width: 100%;
}

.markup-list__docs .dropdown__box::before {
    right: 10px;
}

.markup-list__docs .markup-list__link-btn {
    position: relative;
}

/**********************************************/
/* Markup List */
.markup__wrap {
    width: 100%;
    height: calc(100dvh - 50px);
    padding: 25px;
}

.markup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.markup__header .markup__customer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.markup__header .markup__back-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: var(--markup-back-btn);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.markup__header .markup__customer-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
    border: 1px solid var(--field-inactive-border);
    border-radius: 9999px;
    cursor: default;
    display: flex;
    justify-content: center;
    align-items: center;
}
.markup__header .markup__customer-logo.customer-logo--bg1 {
    background-color: #007367;
    color: #89FFDD;
}
.markup__header .markup__customer-logo.customer-logo--bg2 {
    background-color: #002E99;
    color: #8CD5FF;
}
.markup__header .markup__customer-logo.customer-logo--bg3 {
    background-color: #452981;
    color: #E4C6FA;
}
.markup__header .markup__customer-logo.customer-logo--bg4 {
    background-color: #910E38;
    color: #FE9AB8;
}
.markup__header .markup__customer-logo.customer-logo--bg5 {
    background-color: #D1FF82;
    color: #206B00;
}
.markup__header .markup__customer-logo.customer-logo--bg6 {
    background-color: #FFF394;
    color: #AD5F00;
}
.markup__header .markup__customer-logo.customer-logo--bg7 {
    background-color: #FFC27D;
    color: #A62100;
}
.markup__header .markup__customer-logo.customer-logo--bg8 {
    background-color: #FFCCC8;
    color: #A10705;
}

.markup__header .markup__customer-logo .markup__logo-img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: contain;
}

.markup__header .markup__customer-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: 0;
    cursor: default;
}

.markup__header .markup__searchbar {
    display: flex;
    align-items: center;
    gap: 20px;
}

.markup__header .markup__searchbar .search__input {
    width: 343px;
    padding: 0 48px 0 14px;
}

.markup__header .markup__control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.markup__header .markup__filter-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: var(--filter-btn);
    text-indent: -9999px;
}

.markup__header .markup__setting-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: var(--markup-setting-btn);
    text-indent: -9999px;
}

.markup__header .markup__column.on {
    display: block;
}

.markup__header .markup__column {
    display: none;
    position: absolute;
    top: 28px;
    right: 0;
    z-index: 11;
    width: 182px;
    padding: 8px;
    border: 1px solid var(--field-inactive-border);
    border-radius: 8px;
    background-color: var(--color-white);
}

.markup__header .markup__column .markup__column-item {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    cursor: pointer;
}

.markup__header .markup__column-item .checkbox__label {
    width: 100%;
}

.markup__header .markup__column-item:hover {
    border-radius: 8px;
    background-color: var(--blue-200);
}

.markup__header .markup__column-item:hover .markup__column-text {
    color: var(--blue-600);
}

.markup__header .markup__column-text {
    display: inline-block;
    width: calc(100% - 36px);
    color: var(--surface-high-emphasis);
    font-size: 14px;
    line-height: 130%; /* 18.2px */
    letter-spacing: -0.112px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Alert */
.security-from {
    padding: 10px 15px;
    border: 1px solid var(--field-inactive-border);
    border-radius: 4px;
    color: var(--surface-medium-emphasis);
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.112px;
}

/* Top Button */
.top-btn {
    position: fixed;
    right: 16px;
    bottom: 30px;
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--field-inactive-border);
    border-radius: 999px;
    background-color: var(--color-white);
    background-image: var(--markup-top-btn);
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

/***************** Responsive *****************/
/* Tablet */
@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
}

/* Mobile */
@media screen and (max-width: 640px) {
    /* Markup List */
    .markup-list__area {
        display: block;
    }

    .markup__wrap {
        height: initial;
        padding: 0;
    }

    .markup__header {
        position: sticky;
        top: 20px;
        width: 100%;
        padding: 0 16px;
        z-index: 300;
    }

    .markup__header .markup__customer,
    .markup__header .markup__control {
        display: none;
    }

    .markup__header .markup__searchbar,
    .markup__header .markup__searchbar .search,
    .markup__header .markup__searchbar .search__input {
        z-index: 102;
        width: 100%;
    }

    .markup__header.fold::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 64px;
        backdrop-filter: blur(2px); /* 배경 블러 효과 */
        -webkit-backdrop-filter: blur(2px); /* 사파리 호환 */
    }

    .markup__header.fold .search__label {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        transition: width 0.2s;
    }

    .markup__header.fold .search__label .search__input {
        background-color: var(--surface-high-emphasis);
        color: var(--surface-high-emphasis);
        width: 48px;
        padding: 0;
    }

    .markup__header.fold .search__label .search__input::placeholder {
        color: transparent;
    }

    .markup__header.fold .search__label .search__submit-btn {
        background-image: var(--input-search-w);
    }

    .markup-list__link-btn {
        position: absolute;
        top: 0;
        right: 0;
    }

    .top-btn {
        display: block;
    }
}