em {
    font-style: normal !important;
}

.img-blind, .blind {
    display: none !important;
}

.strike {
    position: relative;
}

.strike:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: calc( 50% - 1px );
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

.color-circle {
    display: inline-block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid #666;
    align-self: center;
}

.color-circle + .color-name {
    display: inline-block;
    margin-left: 7px;
    align-self: center;
    height: 19px;
    line-height: 19px;
}

.page-content-container {
    position: relative;
    width: 100%;
}

/* list */
.device-search-wrapper {
    position: relative;
    display: flex;
    padding: 25px 0;
}

.device-search-wrapper > ul {
    display: flex;
}

.device-search-wrapper > ul > li {

}

.device-search-wrapper > ul > li + li {
    margin-left: 7px;
}

.device-search-wrapper > ul > li > button {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding: 0 16px;
    border-radius: 6px;
    color: var(--colorgray);
    border: 1px solid var(--colorgray);
    background-color: #fff;
    min-width: 90px;
    text-align: center;
    height: 42px;
    line-height: 42px;
}

.device-search-wrapper > ul > li > button.active {
    color: var(--coloraccent);
    border: 1px solid var(--coloraccent);
}

@media(max-width: 768px) {
    .device-search-wrapper {
        padding: 25px 0;
    }

    .device-search-wrapper > ul {
        padding: 0 10px;
    }

    .device-search-wrapper > ul > li {
    }

    .device-search-wrapper > ul > li + li {
        margin-left: 5px;
    }

    .device-search-wrapper > ul > li > button {
        font-size: 13px;
        font-weight: 600;
        padding: 0 12px;
        border-radius: 6px;
        min-width: 70px;
        height: 32px;
        line-height: 32px;
    }

    .device-search-wrapper > ul > li > button.active {
    }
}

.device-list-top {
    position: relative;
    display: flex;
    font-size: 15px;
}

.device-list-top > .total {
    align-self: center;
}

.device-list-top > .list-sort {
    position: relative;
    margin-left: auto;
}

.device-list-top > .list-sort > .sort-select-box {
    position: relative;
    display: flex;
    width: 120px;
    height: 31px;
    line-height: 31px;
    padding: 0 10px 0 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    align-self: center;
    font-size: 14px;
}

.device-list-top > .list-sort > .sort-select-box > span {

}

.device-list-top > .list-sort > .sort-select-box > button {
    display: inline-block;
    background-color: transparent;
    margin-left: auto;
    align-self: center;
    padding: 0;
}

.device-list-top > .list-sort > .sort-select-box > button > .svg-icon-arrow {
    width: 15px;
    height: 15px;
    color: var(--darkgray);
    transform: rotate(-180deg);
    margin-left: 5px;
}

.sort-select-item {
    position: absolute;
    display: none;
    width: 100%;
    top: calc(100% + 5px);
    left: 0;
    padding: 10px 10px 10px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, .08);
    font-size: 14px;
    z-index: 10;
}

.sort-select-item.active {
    display: block;
}

.sort-select-item > ul {

}

.sort-select-item > ul > li {
    position: relative;
    display: flex;
    line-height: 23px;
    cursor: pointer;
}

.sort-select-item > ul > li.selected {
    color: var(--coloraccent);
}

@media(max-width: 768px) {
    .device-list-top {
        padding: 0 10px;
        font-size: 12px;
    }

    .device-list-top > .total {
    }

    .device-list-top > .list-sort {
    }

    .device-list-top > .list-sort > .sort-select-box {
        width: 100px;
        height: 31px;
        font-size: 12px;
    }

    .device-list-top > .list-sort > .sort-select-box > span {

    }

    .device-list-top > .list-sort > .sort-select-box > button {
    }

    .device-list-top > .list-sort > .sort-select-box > button > .svg-icon-arrow {
        width: 13px;
        height: 13px;
    }

    .sort-select-item {
        font-size: 12px;
    }

    .sort-select-item.active {
    }

    .sort-select-item > ul {
    }

    .sort-select-item > ul > li {
    }

    .sort-select-item > ul > li.selected {
    }
}

.device-list-wrapper {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 25px;
}


@media (max-width: 1024px) {
    .device-list-wrapper {
        padding: 0;
        gap: 0;
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    .device-list-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}


.device-list-item.loading .skeleton {
    background-color: #eee;
    height: 16px;
    margin: 5px 0;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
}

.skeleton.name { width: 60%; height: 20px; }
.skeleton.price { width: 40%; height: 18px; }
.skeleton.telecom { width: 30%; height: 16px; }

@keyframes pulse {
    0% { background-color: #eee; }
    50% { background-color: #ddd; }
    100% { background-color: #eee; }
}

/* 상품 아이템 스타일 */
.device-list-item {
    background: #fff;
    border: 1px solid var(--colorgray);
    border-radius: 8px;
    text-align: center;
}

.list-item-box {
    position: relative;
}

.list-item-box.list-p {
    
}

.list-item-box.list-m {
    display: none;
}

.device-list-image {
    position: relative;
    padding: 15px;
}

.device-list-image > a {
    display: block;
}

.device-list-image > a > img {
    width: 200px;
    height: 200px;
}

.item-icons {
    position: absolute;
    left: 10px;
    top: 10px;
}

.item-icons > .icon {
    display: inline-block;
    padding: 0 7px;
    font-weight: normal;
    border-radius: 3px;
    line-height: 22px;
    font-size: 13px;
}

.device-list-content {
    position: relative;
    padding: 0 15px 15px 15px;
}

.device-list-content > .device-name {
    margin-bottom: 7px;
}

a.device-link {
    color: #333;
}

a.device-link:hover,
a.device-link:focus {
    color: #333;
}

.device-list-content > .giga-list {
    display: flex;
    justify-content: center;
}

.device-list-content > .giga-list > li {

}

.device-list-content > .giga-list > li + li {
    margin-left: 3px;
}

.device-list-content > .giga-list > li > span {
    display: inline-block;
    padding: 0 6px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    color: #333;
    line-height: 21px;
}

.device-list-content > .color-list {
    display: flex;
    justify-content: center;
    margin-top: 7px;
}

.device-list-content .color-list > li {

}

.device-list-content > .color-list > li + li {
    margin-left: 3px;
}

.device-list-content > .color-list > li > .color-circle {
    width: 13px;
    height: 13px;
}

.device-list-content > .color-list > li > .color-name {
    display: none;
}

.device-list-content > .model-tags {
    display: flex;
    justify-content: center;
    margin-top: 7px;
}

.device-list-content > .model-tags > .device-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--coloraccent);
}

.device-list-content > .model-tags > .device-tag + .device-tag {
    margin-left: 5px;
}

.device-list-content > .price-box {
    position: relative;
    padding: 15px 15px;
}

.device-list-content > .price-box dl {
    display: flex;
    justify-content: space-between;
    line-height: 23px;
}

.device-list-content > .price-box dl.model-price {
    font-size: 16px;
    color: var(--colorgray);
}

ul.channel-prices {
    position: relative;
}

ul.channel-prices > .channel-row {
    display: flex;
    margin-top: 7px;
    align-items: center;
}

ul.channel-prices > .channel-row > span {
    display: inline-block;
    align-self: center;
    letter-spacing: -0.5px;
}

ul.channel-prices > .channel-row > span + span {
    margin-left: 5px;
}

ul.channel-prices > .channel-row >.channel-telecom {
    width: 21px;
    height: 21px;
    overflow: hidden;
}

ul.channel-prices > .channel-row > .channel-telecom img {
    width: 100%;
    height: 100%;
}

ul.channel-prices > .channel-row >.channel-ordertype {
    font-size: 11px;
    padding: 2px 8px;
    background-color: #fff;
    border: 1px solid var(--colorgray);
    color: var(--darkgray);
    min-width: 60px;
    text-align: center;
    line-height: 1.2;
    border-radius: 4px;
}

ul.channel-prices > .channel-row >.channel-name {
    font-size: 11px;
    padding: 2px 8px;
    background-color: #fff;
    border: 1px solid var(--colorgray);
    color: var(--darkgray);
    min-width: 60px;
    text-align: center;
    line-height: 1.2;
    border-radius: 4px;
}

ul.channel-prices > .channel-row >.channel-price {
    margin-left: auto;
    color: var(--coloraccent);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    align-self: flex-end;
    white-space: nowrap;
}

@media(max-width: 768px) {
    .device-list-item {
        background: #fff;
        border: 0;
        border-top: 1px solid var(--darknavy);
        border-radius: 0;
        text-align: left;
    }

    .device-list-item:last-child {
        border-bottom: 1px solid var(--lightgray);
    }

    .list-item-box.list-p {
        display: none !important;
    }

    .list-item-box.list-m {
        display: flex;
        padding: 20px 10px 15px 10px;
    }

    .device-list-image {
        flex: 0 0 120px;
        max-width: 120px;
        padding: 10px;
    }

    .device-list-image > a {
        display: block;
    }

    .device-list-image > a > img {
        max-width: 100%;
        height: auto;
    }

    .item-icons {
        position: absolute;
        left: 5px;
        top: 3px;
    }

    .item-icons > .icon {
        display: inline-block;
        padding: 0 4px;
        font-weight: normal;
        border-radius: 2px;
        line-height: 21px;
        font-size: 11px !important;
    }

    .device-list-image > .giga-list {
        display: flex;
        justify-content: center;
    }

    .device-list-image > .giga-list > li {

    }

    .device-list-image > .giga-list > li + li {
        margin-left: 3px;
    }

    .device-list-image > .giga-list > li > span {
        display: inline-block;
        padding: 0 4px;
        font-size: 9px;
        border-radius: 4px;
        border: 1px solid #ddd;
        color: #333;
        line-height: 19px;
    }

    .device-list-image > .color-list {
        display: flex;
        justify-content: center;
        margin-top: 7px;
    }

    .device-list-image > .color-list > li {

    }

    .device-list-image > .color-list > li + li {
        margin-left: 3px;
    }

    .device-list-image > .color-list > li > .color-circle {
        width: 13px;
        height: 13px;
    }

    .device-list-image > .color-list > li > .color-name {
        display: none;
    }

    .device-list-content {
        position: relative;
        padding: 0;
        padding-left: 10px;
    }

    .device-list-content > .device-name {
        margin-bottom: 7px;
    }

    .device-list-content > .model-tags {
        display: flex;
        justify-content: flex-start;
        margin: 0;
    }

    .device-list-content > .model-tags > .device-tag {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        color: var(--coloraccent);
    }

    .device-list-content > .model-tags > .device-tag + .device-tag {
        margin-left: 5px;
    }

    .device-list-content > .price-box {
        position: relative;
        padding: 10px 0;
    }

    .device-list-content > .price-box dl {
        display: flex;
        justify-content: space-between;
        line-height: 23px;
    }
    
    ul.channel-prices {
        position: relative;
        padding: 12px 10px;
        background-color: #f9fafb;
        border-radius: 8px;
    }

    ul.channel-prices > .channel-row {
        flex-wrap: wrap;
    }

    ul.channel-prices > .channel-row > .channel-telecom {
    }
    ul.channel-prices > .channel-row > .channel-ordertype {
    }
    ul.channel-prices > .channel-row > .channel-name {
    }
    ul.channel-prices > .channel-row > .channel-price {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: right;
        font-size: 15px;
        margin-top: 3px;
        letter-spacing: -0.5px;
    }
}

/* view */
.content-main-container {
    width: 100%;
    padding: 0;
    max-width: calc( 100% - 380px );
    z-index: 10;
    background-color: #fff;
}

.content-right-fixed-container {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.2s ease;
    padding-top: 25px;
    z-index: 100;
}

.right-fixed-inner-container {
    position: relative;
    background-color: #fff;
}

@media(max-width: 1024px) {
    .page-content-container {
        min-height: unset;
        padding: 0;
    }

    .content-main-container {
        max-width: 100%;
    }

    .content-right-fixed-container {
        position: fixed !important;
        top: unset;
        left:0;
        width: 100%;
        bottom: 0;
        right: 0;
        transition: all 0.2s ease;
        padding: 0;
        z-index: 1100;
    }

    .right-fixed-inner-container {
        position: relative;
        background-color: transparent;
    }
}

.image-skeleton {
    width: 320px;
    height: 320px !important;
    background-color: #eee;
    border-radius: 6px;
    animation: pulse 1.5s infinite ease-in-out;
}

.thumb-skeleton {
    width: 75px;
    height: 75px !important;
    background-color: #eee;
    border-radius: 6px;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { background-color: #eee; }
    50% { background-color: #f5f5f5; }
    100% { background-color: #eee; }
}

.content-title-nav {
    position: relative;
    display: flex;
    padding: 15px 0 8px 0;
    border-bottom: 1px solid #ddd;
}

.content-title {
    display: flex;
    align-items: center;
}

.device-title_display_name {
    font-size: 32px;
    font-weight: 700;
    line-height: 43px;
    letter-spacing: -.5px;
    color: var(--darknavy);
}

.device-title_model_name {
    margin-left: 5px;
    font-size: 24px;
    align-self: center;
    font-weight: 600;
    color: var(--darkgray);
}

.device-score {
    margin-left: 10px;
}

@media(max-width: 1024px) {
    .content-title {
        padding: 0 10px
    }

    .device-title_display_name {
        font-size: 19px;
    }

    .device-title_model_name {
        font-size: 15px;
    }
}

.device-item-box {
    position: relative;
    display: flex;
    width: 100%;
    padding: 25px 0;
    justify-content: center;
}

.device-item {
    position: relative;
    flex: 0 0 320px;
    max-width: 320px;
}

.device-condition {
    flex: 1 1 auto;
    max-width: calc( 100% - 320px );
    padding: 0 50px 0 75px;
}

@media(max-width: 1024px) {
    .device-item-box {
        flex-wrap: wrap;
        padding: 0;
    }

    .device-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .device-condition {
        flex 1 1 100%;
        max-width: 100%;
        padding: 0 15px 35px 15px;
        margin-top: 15px;
    }
}

.device-image-slice, .device-thumb-slice {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.device-image-slice .image-item,
.device-thumb-slice .thumb-item {
    width: 100%;
    height: 100%;
}

.device-image-slice .image-item img,
.device-thumb-slice .thumb-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.device-image {
    position: relative;
    width: 100%;
}

.device-image-container {
    position: relative;
}

.device-image-slice {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    overflow: hidden;
}

.device-image-slice > .image-item {
    display: none;
    flex: 1 1 100%;
    max-width: 320px;
    padding: 15px;
    overflow: hidden;
}

.device-image-slice > .image-item.active {
    display: block;
}

.device-image-slice > .image-item img {
    width: 100%;
    height: auto;
}

@media(max-width: 1024px) {
    .device-image-slice {
    }

    .device-image-slice > .image-item {
        max-width: 100%;
    }

    .device-image-slice > .image-item.active {
    }

    .device-image-slice > .image-item img {
    }
}

.device-thumb-container {
    position: relative;
    margin-top: 15px;
}

.device-thumb-slice {
    position: relative;
    display: flex;
}

.device-thumb-slice > .thumb-item {
    flex: 1 1 25%;
    max-width: 25%;
    padding: 5px;
}

.device-thumb-slice > .thumb-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

@media(max-width: 1024px) {
    .device-thumb-container {
        padding: 0 10px;
    }

    .device-thumb-slice {
    }

    .device-thumb-slice > .thumb-item {
        border: 1px solid #ddd;
    }

    .device-thumb-slice > .thumb-item + .thumb-item {
        margin-left: 5px;
    }

    .device-thumb-slice > .thumb-item img {
    }
}

.condition-row {
    position: relative;
}

.condition-row + .condition-row {
    margin-top: 15px;
}

.condition-title {
    position: relative;
    display: flex;
}

.condition-title > span {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
}

.condition-title b {
    display: inline-block;
    color: var(--coloraccent);
    padding: 0 3px;
}

.condition-item {
    position: relative;
    padding: 3px 0px 3px 0px;
}

.condition-message {
    display: inline-block;
    font-size: 13px;
    letter-spacing: -.5px;
    color: var(--coloraccent);
    padding: 3px 0 0 0;
    font-weight: 500;
}
.condition-item-group {

}

.condition-item-group.item-col {
    display: flex;
}

.condition-item-group.item-col .condition-radio-box {
    flex: 1 1 auto;
    max-width: 33.3333%;
}

.condition-item-group.item-col .condition-radio-box + .condition-radio-box {
    margin-left: 7px;
}

.condition-item-group.item-hidden .condition-radio-box > input[type="radio"] {
    display: none;
}

.condition-item-group .condition-radio-box label {

}

.condition-item-group .condition-radio-box label > span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.condition-item-group .condition-radio-box label > em {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--darknavy);
    line-height: 1.2;
}

.condition-item-group .condition-radio-box label > span.color-name {
    align-self: center;
}

.condition-item-group.item-hidden .condition-radio-box input[type="radio"] + label {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--colorgray);
    color: var(--darkgray);
    padding: .75rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px; 
}

.condition-item-group.item-hidden .condition-radio-box.condition-color input[type="radio"] + label {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.condition-item-group.item-hidden .condition-radio-box.condition-telecom input[type="radio"] + label {
    color: var(--darkgray);
    padding: .5rem 1rem;
}

.condition-item-group.item-hidden .condition-radio-box input[type="radio"] + label img {
    width: auto;
    max-width: 25px;
    max-height: 25px;
}

.condition-item-group.item-hidden .condition-radio-box input[type="radio"]:checked + label {
    border: 1px solid var(--colorblack);
}

.condition-item-group.item-row .condition-radio-box input[type="radio"] + label {
    justify-content: flex-start;
}

.condition-item-group.item-row .condition-radio-box input[type="radio"] + label > span {
    display: inline-block;
}

.condition-item-group.item-row .condition-radio-box input[type="radio"] + label > span + small {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    color: var(--colorgray);
}

.condition-item-group.item-row .condition-radio-box + .condition-radio-box {
    margin-top: 7px;
}

.condition-item-group.item-visibility {
    padding: 15px;
    background: #FCF8FA;
    margin-top: 8px;
    border-radius: 8px;
}

.condition-bill-item {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--colorblack);
    border-radius: 8px;
}

.bill-info {
    position: relative;
    display: flex;
    font-size: 19px;
    font-weight: 600;
}

.bill-info > .bill-name {

}

.bill-info > .bill-price {
    margin-left: auto;
    color: var(--coloraccent);
}

.bill-content {
    padding: 12px 0 7px 10px;
    font-size: 14px;
    color: var(--colorgray);
}

.bill-more {
    margin-top: 12px;
}

.bill-more > .btn-bill-more {
    width: 100%;
    text-align: center;
    padding: 0 1rem;
    border: 1px solid var(--colorgray);
    border-radius: 8px;
    font-size: 15px;
    line-height: 41px;
    height: 41px;
    background-color: #fff;
}

.condition-item.sales-type {
}

.condition-sales-box {
    position: relative;
    padding-left: 15px;
}

.condition-sales-box + .condition-sales-box {
    margin-top: 15px;
}

.condition-sales-box > .sales-title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 7px;
}

.condition-sales-box > .sales-content > label {
    font-size: 15px;
    letter-spacing: -0.5px;
    font-weight: 400;
}

.condition-sales-box > .sales-content > label > b {
    display: inline-block;
    color: var(--coloraccent);
    margin-left: 3px;
}

.buga-item {
    position: relative;
}

.buga-item + .buga-item {
    margin-top: 7px;
}

.buga-item > .buga-item-list {
    display: flex;
    align-items: center;
}

.buga-item > .buga-item-list > input[type="checkbox"] {
    width: 17px;
    height: 17px;
    align-self: center;
}

.buga-item > .buga-item-list > label {
    position: relative;
    display: flex;
    align-self: center;
    margin-left: 5px;
}

.buga-item > .buga-item-list > label > span {
    display: inline-block;
    align-self: center;
    line-height: 1;
}

.buga-item > .buga-item-list > label > span + span {
    margin-left: 3px;
}

.buga-item > .buga-item-list > label > span.buga-name {
    font-size: 15px;
    font-weight: 500;
}

.buga-item > .buga-item-list > label > span.buga-point {
    font-size: 14px;
    color: var(--coloraccent);
    font-weight: 500;
}

.buga-item > .buga-item-list > label > span.buga-period {
    font-size: 14px;
}

@media(max-width: 1024px) {
    .condition-row {
    }

    .condition-row + .condition-row {
    }

    .condition-title {
    }

    .condition-row:last-child {
        margin-bottom: 25px;
    }

    .condition-title > span {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
    }

    .condition-title b {
        color: var(--coloraccent);
    }

    .condition-item {
    }

    .condition-message {
        font-size: 11px;
    }

    .condition-item-group {
    }

    .condition-item-group.item-col {
    }

    .condition-item-group.item-col.item-color {
        overflow-x: scroll;
    }

    .condition-item-group.item-col .condition-radio-box {
    }

    .condition-item-group.item-col .condition-radio-box + .condition-radio-box {
    }

    .condition-item-group .condition-radio-box > input[type="radio"] {
    }

    .condition-item-group .condition-radio-box label {
        font-size: 14px;
        font-weight: 600;
    }

    .condition-item-group .condition-radio-box input[type="radio"] + label {
    }

    .condition-item-group.item-hidden .condition-radio-box.condition-color input[type="radio"] + label {
        flex-wrap: nowrap;
    }

    .condition-item-group.item-hidden .condition-radio-box.condition-color input[type="radio"] + label > span.color-circle {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
    }

    .condition-item-group.item-hidden .condition-radio-box.condition-color input[type="radio"] + label > span.color-name {
        font-size: 12px;
        margin-left: 3px;
        white-space: nowrap;
        height: auto;
    }

    .condition-item-group .condition-radio-box input[type="radio"] + label img {
    }

    .condition-item-group .condition-radio-box input[type="radio"]:checked + label {
    }

    .condition-item-group.item-row .condition-radio-box input[type="radio"] + label {
    }

    .condition-item-group.item-row .condition-radio-box input[type="radio"] + label > b {
    }

    .condition-item-group.item-row .condition-radio-box input[type="radio"] + label > b + span {
        font-size: 12px;
    }

    .condition-item-group.item-row .condition-radio-box + .condition-radio-box {
        margin-top: 7px;
    }

    .condition-item-group .condition-radio-box > input[type="radio"] + label:before,
    .condition-item-group .condition-radio-box > input[type="radio"] + label:after {
        all: unset;
    }

    .condition-bill-item {
    }

    .bill-info {
        font-size: 15px;
    }

    .bill-info > .bill-name {

    }

    .bill-info > .bill-price {
    }

    .bill-content {
        font-size: 12px;
    }

    .condition-more {
        margin-top: 12px;
    }

    .condition-more > .btn-bill-more {
        font-size: 14px;
    }

    .condition-item.sales-type {
        padding: 15px 5px;
    }

    .condition-sales-box {
        padding: 0px;
    }

    .condition-sales-box + .condition-sales-box {
        margin-top: 15px;
    }

    .condition-sales-box > .sales-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 7px;
    }

    .condition-sales-box > .sales-content > label {
        font-size: 12px;
        letter-spacing: -1px;
        font-weight: 400;
        padding: 0 0 0 .25rem;
    }

    .condition-sales-box > .sales-content > label > b {
        display: inline-block;
        color: var(--coloraccent);
        margin-left: 2px;
    }

    .buga-item {
    }

    .buga-item + .buga-item {
    }

    .buga-item > .buga-item-list {
        
    }

    .buga-item > .buga-item-list > input[type="checkbox"] {
        width: 15px;
        height: 15px;
        align-self: flex-start;
    }

    .buga-item > .buga-item-list > label {
        margin-left: 3px;
        flex-wrap: wrap;
    }

    .buga-item > .buga-item-list > label > span {
    }

    .buga-item > .buga-item-list > label > span + span {
        margin-left: 2px;
    }

    .buga-item > .buga-item-list > label > span.buga-name {
        font-size: 13px;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .buga-item > .buga-item-list > label > span.buga-point {
        font-size: 12px;
        margin-left: 0;
        margin-top: 3px;
    }

    .buga-item > .buga-item-list > label > span.buga-period {
        font-size: 12px;
        margin-top: 3px;
    }
}

/* calc */
.calculation-mobile-box, .mobile-toggle-button {
    display: none;
}

.right-fixed-inner-container {
    position: relative;
    width: 360px;
    min-height: 450px;
    border: 2px solid #000;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
}

.right-fixed-inner-container > .calculation-inner-box {
    position: relative;
    padding: 25px 0 25px 0;
}

.right-fixed-inner-container > .calculation-button-box {
    margin-top: auto;
    position: relative;
    padding: 15px 20px 15px 20px;
}

.calc-box {
    position: relative;
    padding: 0 20px;
}

.calc-box + .calc-box {
    margin-top: 15px;
}

.calc-box > dl {
    position: relative;
    display: flex;
    height: 31px;
    line-height: 31px;
}

.calc-strong {
    font-size: 18px;
    font-weight: 700;
}

.calc-strong dt {
    
}

.calc-strong dd {
    color: var(--coloraccent);
}

.calc-meta > .calc-strong {
    display: block;
    background-color: #e51e20;
    font-weight: 600;
    text-align: center;
    padding: 14px;
    height: auto;
    line-height: 1.2;
    font-size: 20px;
    border-radius: 12px;
}

.calc-meta > .calc-strong > dt {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

.calc-meta > .calc-strong > dd {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

.calc-box > dl + dl {

}

.calc-box > dl > dt {
    position: relative;
}

.calc-box > dl > dd {
    position: relative;
    margin-left: auto;
}

.calc-normal {
    font-weight: 700;
}

.calc-normal > dt {

}

.calc-normal > dd {
    color: var(--coloraccent);
}

.calc-normal-light {
    padding-left: 10px;
    font-size: 15px;
}
dl.calc-desc-light {
    font-size: 15px;
    height: 27px;
    line-height: 27px;
}

.calc-desc-light > dt:before {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABYSURBVHgBzc+9DYAgFATgO2J0DTdwBcaxoNCEAbC3dB91MYWSEH5CQcLXvZe74oC+KX3c62bmXEb4B0mJAoFK7QtD+BgnLkrHh1+necLC+3/c3XgkSPTHAubNC3w+XnKQAAAAAElFTkSuQmCC) no-repeat 0 0;
    content: "";
}

.calc-button-group {
    position: relative;
    display: flex;
}

.calc-button-group > button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    max-width: 100%;
    border-radius: 8px;
    height: 40px;
    background-color: #ffff;
    border: 1px solid #191919;
}

.calc-button-group > button + button {
    margin-left: 5px;
}

.calc-button-group + .calc-button-group {
    margin-top: 8px;
}

.calc-button-group > button .svg-icon {
    width: 17px;
    height: 17px;
}

.calc-button-group > button .btn-text {
    display: inline-block;
    padding-left: 2px;
    font-size: 14px;
    align-self: center;
    font-weight: 500;
    line-height: 1;
    color: #191919;
}

.calc-button-group > button.btn-order {
    height: 48px;
    line-height: 48px;
    background-color: #e51e20;
    border: 1px solid #e51e20;
}

.calc-button-group > button.btn-order .svg-icon {
    width: 27px;
    height: 27px;
    color: #fff;
}

.calc-button-group > button.btn-order .btn-text {
    font-size: 18px;
    color: #fff;
}

@media(max-width: 1024px) {
    .calculation-mobile-box, .mobile-toggle-button {
        display: flex;
        background-color: transparent;
    }

    .right-fixed-inner-container {
        position: relative;
        width: 100%;
        min-height: unset;
        border: 0;
        border-radius: 0;
    }

    .right-fixed-inner-container > .calculation-inner-box {
        position: relative;
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        transition: all 0.2s ease;
        background-color: #fff;
    }

    .right-fixed-inner-container > .calculation-inner-box.open {
        position: relative;
        height: auto;
        overflow: hidden;
        padding: 0;
        margin: 0;
        transition: all 0.5s ease;
        z-index: 9999;
    }

    .right-fixed-inner-container > .calculation-inner-box.open + .calculation-mobile-box {
        border-top: 1px solid #000;
    }

    .right-fixed-inner-container > .calculation-button-box {
        margin: 0;
        padding: 0;
        background-color: #fff;
    }

    .calculation-mobile-box {
        background-color: #fff;
        padding: 15px 15px 12px 15px;
    }

    .mobile-toggle-button {
        background-color: transparent;
        border-bottom: 1px solid #ddd;
        justify-content: flex-end;
        padding-right: 5px;
    }

    .mobile-toggle-button > button {
        display: inline-block;
        background-color: #000;
        height: 25px;
        padding: 6px 16px;
        border-radius: 0;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        line-height: 1;
        font-size: 13px;
        color: #fff;
        letter-spacing: -0.4px;
    }

    .mobile-toggle-button > button.open > .svg-icon-arrow {
        transform: rotate(-180deg);
    }

    .mobile-toggle-button > button > .svg-icon-arrow {
        transform: rotate(0);
    }

    .calculation-mobile-box > .charge {
        align-self: center;
        flex: 1 1 auto;
        text-align: center;
    }

    .calculation-mobile-box > .charge.total {
        align-self: center;
    }

    .calculation-mobile-box > .charge > .text {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -0.5px;
    }

    .calculation-mobile-box > .charge > .price {
        font-size: 14px;
        font-weight: 700;
    }

    .calculation-mobile-box > .charge.total > .text {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -0.5px;
    }

    .calculation-mobile-box > .charge.total > .price {
        font-size: 18px;
        font-weight: 700;
        color: var(--coloraccent);
    }

    .calculation-mobile-box > .ico-text {
        color: #fff;
        padding-bottom: 3px;
        font-size: 14px;
        width: 17px;
        height: 17px;
        background-color: #161616;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        display: flex;
        align-self: center;
        margin: 0 7px;
    }

    .calc-box {
        position: relative;
        padding: 0 20px;
    }

    .calc-box:first-child {
        padding-top: 15px;
    }

    .calc-box:last-child {
        padding-bottom: 15px;
    }

    .calc-box + .calc-box {
        margin-top: 15px;
    }

    .calc-box > dl {
        position: relative;
        display: flex;
        height: 28px;
        line-height: 28px;
    }

    .calc-strong {
        font-size: 15px;
        font-weight: 700;
    }

    .calc-strong dt {
        
    }

    .calc-strong dd {
        color: var(--coloraccent);
    }

    .calc-meta > .calc-strong {
        padding: 12px;
    }

    .calc-meta > .calc-strong > dt {
        font-size: 13px;
    }

    .calc-meta > .calc-strong > dd {
        font-size: 22px;
    }

    .calc-box > dl + dl {

    }

    .calc-box > dl > dt {
        position: relative;
    }

    .calc-box > dl > dd {
        position: relative;
        margin-left: auto;
    }

    .calc-normal {
        font-weight: 700;
    }

    .calc-normal > dt {

    }

    .calc-normal > dd {
        color: var(--coloraccent);
    }

    .calc-normal-light {
        padding-left: 10px;
        font-size: 15px;
    }
    dl.calc-desc-light {
        font-size: 15px;
        height: 27px;
        line-height: 27px;
    }

    .calc-desc-light > dt:before {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 4px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABYSURBVHgBzc+9DYAgFATgO2J0DTdwBcaxoNCEAbC3dB91MYWSEH5CQcLXvZe74oC+KX3c62bmXEb4B0mJAoFK7QtD+BgnLkrHh1+necLC+3/c3XgkSPTHAubNC3w+XnKQAAAAAElFTkSuQmCC) no-repeat 0 0;
        content: "";
    }

    .calc-button-group {
        position: relative;
        display: flex;
    }

    .calc-button-group.counsel-button {
        padding: 5px 10px 5px 10px;
        background-color: #fafafa;
        border-top: 1px solid var(--colorgray);
    }

    .calc-button-group > button {
        border-radius: 0;
    }

    .calc-button-group.counsel-button > button {
        border-radius: 25px;
    }

    .calc-button-group > button + button {
        margin-left: 8px;
    }

    .calc-button-group + .calc-button-group {
        margin: 0;
    }

    .calc-button-group > button.btn-order {
        height: 48px;
        line-height: 48px;
        color: #fff;
        font-size: 18px;
        background-color: #e51e20;
    }

    .calc-button-group > button.btn-order .svg-icon {
        width: 27px;
        height: 27px;
    }
}

.device-detail-tab-menu {
    position: relative;
    margin: 15px 0 0 0;
    border-top: 2px solid #131313;
    transition: all 0.25s ease-in-out;
    z-index: 10;
}

.device-detail-tab-menu.is-fixed {
    position: fixed;
    z-index: 1100;
    background: #fff;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 1060px;
    opacity: 0.98;
}

.detail-tab-list {
    display: flex;
}

.detail-tab-item {
    flex: 1 1 auto;
    max-width: 50%;
    border: 0;
}

.detail-tab-btn {
    display: block;
    width: 100%;
    padding: 0 10px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #B4B4B4;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    border-radius: 0;
    border-bottom: 2px solid #B4B4B4;
}

.detail-tab-btn.active {
    color: #000;
    border-bottom: 2px solid #000;
}

.detail-tab-content-block {
    position: relative;
}

.detail-tab-content-block img {
    width: auto;
    max-width: 100%;
}

.detail-tab-content-block + .detail-tab-content-block {
    padding-top: 25px;
}

/* =========================
   기본 숨김 상태 (닫힘)
========================= */
.detail-tab-content-block.tab-hidden {
    position: relative;
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.6s ease;
}

.detail-tab-content-block.tab-hidden {
    position: relative;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

/* overlay 고정 */
.detail-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 16px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 75%);
    transition: background 0.3s ease;
    z-index: 2;
}

/* 버튼 */
.detail-more-btn {
    padding: 10px 28px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #111;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media(max-width: 1024px) {
    .device-detail-tab-menu {
        position: relative;
        margin: 0;
    }

    .device-detail-tab-menu.is-fixed {
        padding: 0;
        width: 100%;
        max-width: 100%;
        top: 110px;
    }

    .detail-tab-list {
        display: flex;
    }

    .detail-tab-item {
        flex: 1 1 auto;
        max-width: 50%;
    }

    .detail-tab-btn {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    .detail-tab-btn.active {
    }

    .detail-tab-content-block {
    }

    .detail-tab-content-block img {
    }

    .detail-tab-content-block + .detail-tab-content-block {
    }
}

.list-category {
    position: relative;
    display: flex;
    margin-bottom: 15px;
}

.list-category > button {
    display: inline-block;
    padding: 4px 16px;
    font-size: 15px;
    background-color: #fff;
    border: 1px solid #131313;
    color: #131313;
    border-radius: 25px;
    text-align: center;
    min-width: 80px;
}

.list-category > button.active {
    background-color: #131313;
    color: #fff;
}

.list-category > button + button {
    margin-left: 7px;
}

.list-table {
    position: relative;
    border-top: 2px solid var(--darkgray);
}

.list-box {
    padding: 0;
    border-bottom: 1px solid var(--colorgray);
}

.list-item {
    display: flex;
    padding: 12px 0;
}

.list-item > div {
    align-self: center;
}

.list-item .thumb {
    flex: 0 0 100px;
    max-width: 100px;
    overflow:hidden;
}

.list-item .thumb img {
    width: 100%;
    height: auto;
}

.list-item .status {

}

.list-item .status > span {
    display: inline-block;
    padding: 2px 12px;
    font-size: 13px;
    border-radius: 6px;
    white-space: nowrap;
}

.list-item .status > span.status-complete {
    background-color: var(--coloraccent);
    color: #fff;
}

.list-item .status > span.status-pending {
    background-color: var(--colorgray);
}

.list-item .meta {
    position: relative;
    flex: 1 1 auto;
    max-width: 100%;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.list-item > div + .meta {
    padding: 0 15px;
}

.list-item .meta > a,
.list-item .meta > a:hover {
    color: #131313;
}

.list-item .meta .star {

}

.list-item .meta .subject {
    font-weight: 600;
    padding: 3px 0 0 5px;
}

.list-item .meta .model {
    margin-top: auto;
    font-size: 14px;
    color: var(--colorgray);
}

.list-item .name,
.list-item .date {
    align-self: center;
    padding: 0 25px;
    color: var(--colorgray);
}

.list-content {
    position: relative;
    display: none;
    background-color: #fafafa;
    padding: 15px;
    border-top: 1px solid var(--colorgray);
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.list-content img {
    width: auto;
    max-width: 100%;
}

.list-content.open {
    display: block;
    max-height: 1000px;
}

p.empty {
    background-color: #fafafa;
    padding: 35px;
    text-align: center;
}

.info-head {
    position: relative;
    display: flex;
    margin-bottom: 8px;
}

.info-head > dl {
    display: flex;
}

.info-head > dl + dl {
    margin-left: 5px;
}

.info-head > dl > dt {
    font-weight: 600;
    color: #3f3f46;
}

.info-head > dl > dd {
    color: #a1a1aa;
    padding-left: 5px;
}

.info-box {
    position: relative;
    display: flex;
    background-color: #fafafa;
    border-radius: 8px;
    padding: 25px 35px;
}

@media(max-width: 1024px) {
    .list-table {
        font-size: 12px;
    }

    .list-box {
    }

    .list-item {
    }

    .list-item .thumb {
        flex: 0 0 50px;
        max-width: 50px;
        overflow:hidden;
    }

    .list-item .thumb img {
    }

    .list-item .meta {
    }

    .list-item .meta .star {

    }

    .list-item .meta .subject {
        font-size: 14px;
        padding: 3px 0 0 0;
    }

    .list-item .meta .model {
        font-size: 12px;
    }

    .list-item .name,
    .list-item .date {
        padding: 10px;
    }

    .list-content {
    }

    .list-content img {
    }

    .list-content.open {
    }

    p.empty {
    }
}

.checkout-clause-wrap {
    position: relative;
}

.checkout-clause-wrap > .clause-title {
    font-size: 20px;
    font-weight: 700;
    padding: 25px 0 5px 0;
    border-bottom: 2px solid #131313;
}

.clause-check-wrap {
    padding: 35px 25px;
}

.clause-check-item {
    padding: 15px;
}

@media(max-width: 1024px) {
    .checkout-clause-wrap > .clause-title {
        font-size: 16px;
        padding: 15px 0 5px 15px;
    }

    .clause-check-wrap {
        padding: 25px 15px;
    }
}

.order-condition-wrapper {

}

.info-box-model {
    flex: 1 1 60%;
    max-width: 60%;
    padding: 8px;
    border-radius: .5rem;
}

.info-box-model > dl {
    display: flex;
}

.info-box-model > dl > dt {
    flex: 0 0 90px;
    max-width: 90px;
}

.info-box-model > dl > dt img {
    width: 100%;
    height: auto;
}

.info-box-model > dl > dd {
    padding-left: 25px;
    align-self: center;
    flex: 1 1 auto;
    line-height: 1;
}

.info-box-model > dl > dd > p {
    letter-spacing: -1px;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: 700;
}

.info-box-model > dl > dd > .opt {
    display: flex;
}

.info-box-model > dl > dd > .opt > span {
    display: inline-block;
    font-size: 14px;
    color: #b4b4b4;
}

.inof-box-cond {

}

.info-box-cond > dl {
    display: flex;
    align-self: center;
    line-height: 28px;
    font-size: 14px;
}

.info-box-cond > dl > dt {
    flex: 0 0 80px;
    color: #b4b4b4;
}

.info-box-cond > dl > dd {
}

@media(max-width: 1024px) {
    .order-condition-wrapper {
        padding: 0 10px;
    }
    .info-box {
        margin-top: 25px;
        padding: 15px 20px;
        flex-wrap: wrap;
    }

    .info-box-model {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .info-box-model > dl {
        display: flex;
    }

    .info-box-model > dl > dt {
        flex: 0 0 70px;
        max-width: 70px;
    }

    .info-box-model > dl > dt img {
        width: 100%;
        height: auto;
    }

    .info-box-model > dl > dd {
        padding-left: 25px;
        align-self: center;
        flex: 1 1 auto;
        line-height: 1;
    }

    .info-box-model > dl > dd > p {
        letter-spacing: -1px;
        margin-bottom: 7px;
        font-size: 18px;
        font-weight: 700;
    }

    .info-box-model > dl > dd > .opt {
        display: flex;
    }

    .info-box-model > dl > dd > .opt > span {
        display: inline-block;
        font-size: 14px;
        color: #b4b4b4;
    }

    .info-box-cond {
        padding: 10px 0 0 25px;
    }

    .info-box-cond > dl {
        line-height: 21px;
    }

    .info-box-cond > dl > dt {
    }

    .info-box-cond > dl > dd {
    }
}

.order-checkout-wrapper {
    margin-top: 25px;
}

.checkout-title {
    font-size: 20px;
    font-weight: 700;
    padding: 25px 0 5px 0;
    border-bottom: 2px solid #131313;
}

.checkout-step {
    padding: 35px 25px;
}

.checkout-write-row {
    position: relative;
    display: flex;
}

.checkout-write-row + .checkout-write-row {
    margin-top: 15px;
}

.checkout-write-row > span {
    display: inline-block;
    flex: 1 1 160px;
    max-width: 160px;
    white-space: nowrap;
    font-weight: 700;
}

.form-row {
    
}

.form-cols {
    position: relative;
}

.form-cols + .form-cols {
    margin-top: 10px;
}

.form-cols > label {
    display: none;
}

.form-cols > .input_text {
    background-color: #fff;
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 10px 15px;
    height: 48px;
    width: 320px;
}

.form-cols > .input_zip {
    width: 120px;
}

.form-cols > .input_text:focus {
    border: 1px solid #000 !important;
    box-shadow: none;
}

.form-cols > .input_text + button {
    margin-left: 2px;
    width: 90px;
    border: 1px solid #ededed;
    background-color: #ededed;
    color: #6b6b6b;
    height: 48px;
    line-height: 48px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

@media(max-width: 1024px) {
    .order-checkout-wrapper {
        margin-top: 25px;
        margin-bottom: 160px;
    }

    .checkout-title {
        font-size: 16px;
        padding: 15px 0 5px 15px;
    }

    .checkout-step {
        padding: 25px 15px;
    }

    .checkout-write-row {
        flex-wrap: wrap;
    }

    .checkout-write-row + .checkout-write-row {
        margin-top: 15px;
    }

    .checkout-write-row > span {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 7px;
        font-size: 13px;
    }

    .form-row {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .form-cols {
        position: relative;
    }

    .form-cols + .form-cols {
        margin-top: 10px;
    }

    .form-cols > label {
        display: none;
    }

    .form-cols > .input_text {
        height: 42px;
        width: 100%;
    }

    .form-cols > .input_zip {
        width: 120px;
    }

    .form-cols > .input_text:focus {
        border: 1px solid #000 !important;
        box-shadow: none;
    }

    .form-cols > .input_text + button {
        margin-left: 2px;
        height: 42px;
        line-height: 42px;
        border-radius: 4px;
        font-size: 13px;
    }
}

.complete {
    padding: 50px;
    text-align: center;
    font-size: 28px;
}

/* 페이징 */
.pagination-wrapper {
    position: relative;
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

/* modal */
.customModal.bill-modal {

}

.customModal.bill-modal .customModal-header {
    background-color: #131313;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.customModal.bill-modal .closex {

}

.customModal.bill-modal .closex:before,
.customModal.bill-modal .closex:after {
    background-color: #fff;
}

.customModal.bill-modal .bill-list {

}

.customModal.bill-modal .bill-list > .bill-item {
    position: relative;
    padding: 12px 15px;
    border: 1px solid var(--lightgray);
    border-bottom: none;
}

.customModal.bill-modal .bill-list > .bill-item + .bill-item {
    border-top: 1px dashed var(--lightgray);
}

.customModal.bill-modal .bill-list > .bill-item:last-child {
    border-bottom: 1px solid var(--lightgray);
}

/* mypage */
.status-box {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.status-box > .btn {
    padding: 0;
    height: 32px;
    line-height: 32px;
    width: 80px;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: #131313;
}

.status-box > .btn:hover {
    background-color: #131313;
    color: #fff;
}

.status-box > .btn + .btn {
    margin-left: 5px;
}

/* === 주문 상세 테이블 === */
#orderViewModal .customModal-dialog {
    max-width: 420px;
}
.order-view-table {
    width: 100%;
    margin-top: 15px;
    border-top: 2px solid #333;
}

.order-view-table dl {
    display: flex;
    margin: 0;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.order-view-table dt {
    flex: 0 0 35%;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.order-view-table dd {
    flex: 1;
    margin: 0;
    text-align: right;
    color: #555;
    font-size: 15px;
    word-break: keep-all;
}

/* 강조 행 */
.order-view-table dl.accent {
    background: #f8f9fc;
    border-bottom: 1px solid #dfe3ec;
}
.order-view-table dl.accent dt,
.order-view-table dl.accent dd {
    color: #111;
    font-weight: 700;
}

.review-write-table {
    width: 100%;
    border-top: 2px solid #222;
    border-bottom: 1px solid #ddd;
    background: #fff;
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.5;
}

.review-write-table dl {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 14px 12px;
    align-items: center;
}

.review-write-table dl:last-child {
    border-bottom: none;
}

.review-write-table dt {
    width: 120px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

.review-write-table dd {
    flex: 1;
    color: #444;
}

/* 입력 요소 */
.review-write-table input[type="text"],
.review-write-table textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

.review-write-table input[type="text"]:focus,
.review-write-table textarea:focus {
}

/* 버튼 그룹 */
.table-button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
}

/* 버튼 기본 스타일 */
.table-button-group .btn {
    display: inline-block;
    min-width: 110px;
    text-align: center;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}