/* css values */
.smart_home {
    --s_h_gradient_bg: linear-gradient(
        135deg,
        #FD302D 0%,
        #F519E4 48%,
        #8A32FB 100%
    );
    --s_h_border_color: #E5E5E5;

    --s_h_bold: 600;
    --s_h_semibold: 500;
    --s_h_medium: 400;
    --s_h_regular: 400;

    --s_h_black: #101010;
    --s_h_gray: #737373;
    --s_h_gray_dark: #333;
    --s_h_inner : 1240px;
    --s_h_inner_x : 20px;

    --sticky-offset-top : 0px;
    --direction-offset-top : 0px;
}
.smart_home { 
    /* 
        GEO AI home 
        by spring
    */

    & * {
        line-height: 1.4;
        letter-spacing: -0.023em;
        box-sizing: border-box;
        font-weight: var(--s_h_regular);
        word-break: keep-all;
    }
    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6,
    & b { font-weight: var(--s_h_bold); }

    & h2 { line-height: 1.5; }
    & img { max-width: 100%; }
    & .hide { 
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    & .smart_home_btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        font-size: 20px;
        font-weight: var(--s_h_semibold);

        height: 48px;
        border-radius: 8px;

        color: #fff;
        background-color: var(--s_h_black);

        &:hover,
        &:focus-visible {
            opacity: 0.8;
        }

        &:active {
            opacity: 1;
        }
    }

    & .mo_only {
        display: none !important;
    }

    & .line__block {
        display: inline-block;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
    }

}
.smart_home_conainer { 
    position: relative;
}
.smart_home_inner { 
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--s_h_inner_x);
}
.smart_home_section_group {

    & .smart_home_section_head {
        margin-bottom: 40px;
    }
}
.smart_home_section {
    padding-top: 180px;
}
.smart_home_section_head {
    & h2 {
        font-size: 40px;
        line-height: 1.5;
    }
    & p {
        margin-top: 16px;
        font-size: 22px;
        font-weight: var(--s_h_medium);
        letter-spacing: 0;
    }
}
.smart_home_tablist {
    margin-top: 40px;
    
    &.sticky {
        position: sticky;
        background-color: #fff;    
        z-index: 50;
        top: 0;
        transition: top 0.3s ease;
        -webkit-transition: top 0.3s ease;
    }

    & ul {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;

        & > li {
            flex: 1;

            &.active a {
                font-weight: var(--s_h_bold);
                color: var(--s_h_black);
                border-color: currentColor;
            }
        }
    }
    
    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid #E6E6E6;

        font-size: 22px;
        font-weight: var(--s_h_medium);
        color: var(--s_h_gray_dark);
        padding: 16px 8px;
    }
}
@media(max-width: 1023px){
    .smart_home {
        --direction-offset-top : 46px;
        & .smart_home_btn {
            font-size: 14px;
            height: 37px;
            border-radius: 6px;
        }
    }

    .smart_home_tablist {
        margin-top: 20px;
        
        & .smart_home_inner {
            padding: 0;
        } 
        & > ul {
            margin: 0 -20px;
        }
        & a { 
            font-size: 16px;
        }
    }

    .smart_home_section_group {
        & .smart_home_section_head {
            margin-bottom: 20px;
        }   
    }
    .smart_home_section {
        padding-top: 80px;
    }
    .smart_home_section_head {
        & h2 {
            font-size: 28px;
        }
        & p {
            font-size: 16px;
        }
    }
}

@media(max-width: 768px){
    .smart_home {
        --s_h_bold: 700;
        --s_h_semibold: 600;

        & .pc_only {
            display: none !important;
        }
        & .mo_only {
            display: block !important;
        }
    }
    .smart_home_tablist {
        &.sticky {
            top: calc(var(--sticky-offset-top) + var(--direction-offset-top) + 10px);
        }
        &.direction_down {
            top: var(--sticky-offset-top);
        }
        &.direction_up {
            top: 46px;
        }
    }
}


/* hero */
.smart_home_hero {
    padding: 100px 0 0;

    & .smart_home_inner {
        max-width: 1420px;
    }
}
.smart_home_hero_text {
    & h1 {
        font-size: 56px;
    }
    & .smart_home_hero_badge {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        width: 60px;
        height: 60px;
        background: var(--s_h_gradient_bg);
        color: #fff;

        font-size: 0.9em;
        font-weight: var(--s_h_medium);
    }

    & p {
        font-size: 24px;
        font-weight: var(--s_h_medium);
        letter-spacing: 0;
        margin-top: 15px;
        word-break: keep-all;
    }
}
.smart_home_hero_img {
    overflow: hidden;
    margin-top: 48px;
}

.smart_home_hero_video {
    overflow: hidden;
    margin-top: 48px;

    & video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

@media(max-width: 1023px){
    .smart_home_hero {
        padding-top: 60px;
    }

    .smart_home_hero_text {
        & h1 {
            font-size: 34px;
        }
        & .smart_home_hero_badge {
            width: 36px;
            height: 36px;
            vertical-align: top;
            margin-top: 0.15em;
        }
        & p {
            margin-top: 10px;
            font-size: 16px;
        }
    }

    .smart_home_hero_img { 
        margin: 24px calc(var(--s_h_inner_x) * -1) 0;
    }
}
/* hero // */

/* usage */
.smart_home_usage { 
    /* padding-top: 180px; */

    & .swiper-container {
        position: relative;
    }
    & .swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 20px;
        z-index: 1;
    }
    & .swiper-pagination-bullet {
        margin: 6px;
        width: 12px;
        height: 12px;
        border: 1px solid #fff;
        background-color: #8F8F8F;
        opacity: 1;
    }
    & .swiper-pagination-bullet-active {
        background-color: #FF4F4F;
    }
}
.smart_home_usage_head {
    background-color: #fff;
    
    & .title {
        max-width: var(--s_h_inner);
        padding: 0 var(--s_h_inner_x);
        margin: 0 auto;
        
        font-size: 40px;
        line-height: 1.5;
    }
}
.smart_home_usage_body {
    padding: 50px 0 80px;
    background-color: #F7F7F7;
}
.smart_home_usage_case {
    padding-top: 30px;

    & + .smart_home_usage_case {
        margin-top: 113px;
    }
}
.usage_case_head {
    & p {
        word-break: keep-all;
        font-size: 20px;
        font-weight: var(--s_h_medium);
        color: var(--s_h_gray_dark);
        margin-top: 16px;
    }
}
.usage_case_label {
    display: inline-flex;
    
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;

    background: var(--s_h_gradient_bg);
    color: #fff;

    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 32px;
}
.usage_case_title {
    font-size: 32px;
}
.usage_case_preview {
    position: relative;
    margin-top: 32px;

    & .swiper-container {
        border-radius: 16px 16px 0 0;
        overflow: hidden;

        & .swiper-button {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 20px;
            & svg,
            &:after {
                display: none;
            }
        }
        & .swiper-button-prev {
            background-image: url(/kr/story/user-guide/img/ai_home/swiper_prev.jpg);
        }
        & .swiper-button-next {
            background-image: url(/kr/story/user-guide/img/ai_home/swiper_next.jpg);
        }
        & .swiper-button-disabled {
            opacity: 0;
        }
    }

    & .swiper-slider {
        position: relative;
    }

    & picture {
        display: block;

        & img {
            width: 100%;
        }
    }
}

.usage_case_product_list {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0px;

    padding: 16px 8px;
    background-color: #fff;
    border-radius: 0 0 16px 16px;

    & > li {
        flex: 1;
        text-align: center;
    }
}
.usage_case_product_thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 140px;

    & img {
        width: auto;
        height: auto;
        max-height: 100%;
    }
}

.usage_case_product_text {
    margin-top: 16px;
    font-size: 20px;
    text-align: center;

    & b {
        display: block;
        font-weight: var(--s_h_semibold);
        line-height: 1.5;
    }

    & p {
        margin-top: 4px;
        font-weight: var(--s_h_medium);
        line-height: 1.5;
        color: var(--s_h_gray_dark);
    }
}

.usage_case__overlay {
    position: absolute;
    inset: 0;
}
.usage_case__overlay_btn {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 48px;
    height: 48px;

    top: var(--uc_btn_top);
    left: var(--uc_btn_left);

    &:before {
        flex-shrink: 0;
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;
        content: "";
        background-image: url(/kr/story/user-guide/img/ai_home/icon_button.svg);
        background-size: contain;
    }

    & span {
        font-size: 20px;
        font-weight: var(--s_h_semibold);
        white-space: nowrap;

        padding: 16px;
        color: #fff;
        background-color: rgba(0,0,0,0.5);
        border-radius: 10px;
        order: 2;

        pointer-events: none;
        visibility: hidden;
        opacity: 0;

        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
    }

    &.p_right {

    }

    &.p_left {
        justify-content: flex-end;

        &:before {
            order: 5;
        }
    }

    &.p_end {
        align-items: flex-end;
        flex-direction: column;

        &.p_left {
            align-items: flex-start;
            justify-content: flex-start;

            &:before {
                order: 1;
            }
        }
    }


    &:hover,
    &:active,
    &:focus-visible {
        & span {
            visibility: visible;
            opacity: 1;
        }

        z-index: 10;
    }
}

@media(max-width: 1023px){
    .smart_home_usage { 
        padding-top: 80px; 

        & .swiper-container {
            & .swiper-pagination {
                bottom: 12px;
            }
            & .swiper-pagination-bullet {
                margin: 0 4px;
                width: 8px;
                height: 8px;
            }
        }
        
        & .swiper-thumb-container {
            overflow: hidden;

            & .swiper-slide:not(:last-child) {
                margin-right: 6px;
            }
            & .swiper-scrollbar {
                position: relative;
                margin: 16px auto;
                width: 50%;
                min-width: 200px;
                height: 4px;
                border-radius: 0;
                background-color: rgba(0,0,0,0.0.051);
                z-index: 1;

                & .swiper-scrollbar-drag {
                    background-color: #000;
                    border-radius: 0;
                }
            }
        }
    }
    .smart_home_usage_head {
        & .title {
            font-size: 28px;
            line-height: 1.4;
        }
    }
    .smart_home_usage_body {
        margin-top: 0;
        padding: 10px 0 40px;
    }
    .usage_case_head {
        & p {
            margin-top: 10px;
            font-size: 16px;
            letter-spacing: 0;
        }
    }
    .usage_case_label {
        font-size: 13px;
        font-weight: 600;
        padding: 0 6px;
        margin-bottom: 20px;
    }
    .usage_case_title {
        font-size: 24px;
    }

    .usage_case_preview {
        margin-top: 20px;
        & .swiper-container {
            border-radius: 0;

            & .swiper-button {
                display: none;
            }
        }
    }
    .usage_case_product_list {
        width: auto;
        margin: 16px calc(var(--s_h_inner_x) * -1) 0 !important;
        padding: 0 var(--s_h_inner_x);
        background-color: transparent;
        gap: 0px;

        & > li {
            flex-shrink: 0;
            min-width: 140px;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
        }
    }
    .usage_case_product_thumb {
        height: 102px;
        padding: 8px;
    }
    .usage_case_product_text {
        margin-top: 0px;
        padding: 0px 2px 10px;
        font-size: 14px;

        & p {
            margin-top: 2px;
            letter-spacing: -0.036em;
        }
    }
}

@media(max-width: 768px){
    .usage_case__overlay_btn {
        --uc_btn_m_top: auto;
        --uc_btn_m_left: auto;
        --uc_btn_m_right: auto;
        --uc_btn_m_translate_x: -50%;
        --uc_btn_m_translate_y: -50%;
        --uc_btn_m_size: 7vw;
        --uc_btn_m_size_ratio: 9.142857%;

        gap: 4px;
        width: 7vw;
        height: 7vw;

        top: var(--uc_btn_m_top);
        left: var(--uc_btn_m_left);
        right: var(--uc_btn_m_right);


        left: calc(
            var(--uc_btn_m_left) +
            var(--uc_btn_m_size_ratio) -
            var(--uc_btn_m_size)
        );
        top: calc(
            var(--uc_btn_m_top) +
            var(--uc_btn_m_size_ratio) -
            var(--uc_btn_m_size)
        );

        & span {
            font-size: 14px;
            padding: 8px 12px;
        }

        &.m_right {
            align-items: flex-end;
            flex-direction: column;
        }

        &.m_end {
            flex-direction: column;

            &.m_left {
                align-items: flex-start;
            }

            &.m_right {
                align-items: flex-end;
            }
        }

        &.m_right_end {
            justify-content: flex-start;
            align-items: flex-end;
            flex-direction: column;
        }
    }
}

/* routines */
.usage_case_routines {
    margin-top: 40px;   
}
.usage_case_routines_head {
    padding: 0 32px;

    & img {
        margin-left: -4px;

        & +  .usage_case_routines_title {
            margin-top: 16px;
        }
    }

    & p {
        font-size: 20px;
        font-weight: var(--s_h_medium);
        color: var(--s_h_gray_dark);
    }
}
.usage_case_routines_title {
    font-size: 26px;

    & + p {
        margin-top: 10px;
    }
}
.usage_case_routines_body {
    margin-top: 32px;
}
.usage_case_routines_list {
    padding: 32px;
    background-color: #fff;
    overflow: hidden;
    
    border: 1px solid #D9D9D9;
    border-radius: 16px;

    & > li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;

        & + li {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid var(--s_h_border_color);
        } 
    }

    & .routines_label {
        position: relative;

        flex-shrink: 0;
        font-size: 14px;
        font-weight: var(--s_h_semibold);
        line-height: 1.5;
        padding: 5px 14px;
        border-radius: 50px;

        background: var(--s_h_gradient_bg);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px; /* 테두리 두께 */
            background: var(--s_h_gradient_bg);
            border-radius: 50px;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;

            pointer-events: none;
        }
    }

    & .usage_case_routines_item {
        flex-grow: 1;
    }
    & .routines_head {
        & h4 {
            font-size: 22px;
            line-height: 1.5;
            color: #191C1F;
        }
    }
    & .routines_body {
        padding-top: 10px;
    
        & p {
            font-size: 20px;
            font-weight: var(--s_h_medium);
            color: #5A5A5A;
            word-break: keep-all;
        }
    }
}
@media(max-width: 1023px){
    .smart_home_usage_case {
         & + .smart_home_usage_case {
            margin-top: 60px;
        }
    }
    .usage_case_routines_head {
        padding: 0 8px;
        
        & img {
            width: 22px;
        }
        & p {
            margin-top: 8px;
            font-size: 14px;
        }
    }
    .usage_case_routines_body {
        margin-top: 20px;
    }
    .usage_case_routines_title {
        font-size: 18px;
        letter-spacing: 0;

        & + p {
            margin-top: 8px;
        }
    }

    .usage_case_routines_list {
        padding: 24px 20px;

        & li {
            flex-wrap: wrap;
            gap: 6px;

            & + li {
                margin-top: 16px;
                padding-top: 16px;
            }
        }

        & .routines_label {
            letter-spacing: 0;
            font-size: 11px;
            padding: 3px 6px;
        }
        & .usage_case_routines_item {
            display: contents;
        }
        & .routines_head {
            & h4 {
                font-size: 15px;
            }
        }
        & .routines_body {
            padding-top: 0;
            width: 100%;

            & p {
                font-size: 14px;
            }
        }
    }
}
/* usage // */

/* table  */
.smart_home_table {

    & button {
        margin-top: 40px;

        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;

        font-size: 20px;
        font-weight: var(--s_h_medium);
        padding: 8px 24px;

        color: var(--s_h_gray_dark);
        border: 1px solid currentColor;
        border-radius: 50px;

        transition: all 0.3s;
        -webkit-transition: all 0.3s;

        &:hover,
        &:focus-visible {
            opacity: 0.8;
        }
        &:active {
            opacity: 1;
        }
        &:after {
            content: "";
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            margin-right: -8px;

            background-image: url(/kr/story/user-guide/img/ai_home/arrow_down.svg);
            background-size: contain;
        }

        &[aria-expanded=true] {
            margin-bottom: 40px;
            &:after {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }
        }
    }
}
.smart_home_table_content { 
    & table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        text-align: left;
        font-size: 18px;

        & th,
        & td {
            padding: 16px 24px;
            border: 1px solid #E2E4E8;
            word-break: keep-all;
            letter-spacing: 0;
        }

        & tr:first-child th {
            border-top: 0;
        }
        & th:first-child,
        & td:first-child {
            border-left: 0;
            width: 240px;
        }
        & th:last-child,
        & td:last-child {
            border-right: 0;
            width: 360px;
        }
    }
    & thead {
        & th {
            position: sticky;
            top: var(--sticky-offset-top);
            z-index: 10;

            background-color: #D7D7D7;
            font-weight: var(--s_h_semibold);
        }
    }
    & tbody {
        & tr:hover {
            background-color: #f1f1f1;
        }
        & th {
            font-weight: var(--s_h_bold);
        }
        & td {
            font-weight: var(--s_h_medium);
            color: var(--s_h_gray_dark);
            border-color: #D5D5D5;
        }
    }
}

@media(max-width: 1023px){
    .smart_home_table {
        & button {
            margin-top: 24px;
            font-size: 14px;
            padding: 6px 18px;
            gap: 4px;
            
            &[aria-expanded=true] {
                margin-bottom: 24px;
            }
            &:after {
                width: 20px;
                height: 20px;
            }   
            & span {
                font-weight: 500;
            }
        }

        & tbody {
            & tr:hover {
                background-color: transparent;
            }
        }
    }

    .smart_home_table_content { 
        & table {
            table-layout: fixed;
            border-collapse: collapse;
            text-align: left;
            font-size: 18px;
            & th,
            & td {
                padding: 10px 8px;
                font-size: 12px;
            }
            & th:first-child, 
            & td:first-child {
                width: 20%;
            }
            & th:last-child, 
            & td:last-child {
                width: 29%;
            }
        }
    }
}

@media(max-width: 768px){
    .smart_home_table_content { 
        & table {
            & th:first-child, 
            & td:first-child {
                width: 82px;
            }
            & tbody {
                & th {
                    font-weight: 600;
                }
            }
        }
    }
}
/* table // */

/* media */
.smart_home_media { }
.smart_home_media_list {
    margin-top: 40px;
    
    & > ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 24px;
    }
}
.smart_home_media_item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;

    & .media_item_thumb {
        flex-shrink: 0;
        aspect-ratio: 1.8/1;
        border-radius: 10px;
        overflow: hidden;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    & .media_item_subject {
        margin-top: 12px;
        font-size: 24px;
        font-weight: var(--s_h_semibold);
        text-align: center;
        
        & b {
            /* font-weight: var(--s_h_semibold); */
        }
    }
}

@media(max-width: 1023px){
    .smart_home_media_list {
        margin-top: 24px;
        & > ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px 12px;
        }
    }
     .smart_home_media_item {
        & .media_item_subject {
            font-size: 16px;
        }
    }
}

@media(max-width: 768px){
    .smart_home_media_list {
        & > ul {
            grid-template-columns: 1fr;
        }
    }
}
/* media // */

/* product */
.smart_home_product_title {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 26px;

    &:before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 2px;
        left: 0;
        top: 50%;
        background-color: #101010;
    }

    & span {
        background-color: #fff;
        font-weight: inherit;
        padding: 0 20px;
    }
}

.smart_home_product_desc {
    padding-top: 32px;

    & p {
        font-size: 20px;
        font-weight: var(--s_h_medium);
        color: var(--s_h_gray_dark);
    }
}

.smart_home_product_tablist {
    margin-top: 24px;
    overflow: hidden;
    transition: top 0.3s ease;
    -webkit-transition: top 0.3s ease;
    
    &.sticky {
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: #fff;
    }

    & > ul {
        padding: 16px 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        & > li {
            width: auto;
            &:not(:last-child) {
                margin-right: 10px;
            }
        }
    }
    & button {
        color: var(--s_h_gray);
        font-size: 18px;
        font-weight: 500;
        border: 1px solid currentColor;
        border-radius: 50px;
        padding: 8px 19px;

        &.active {
            font-weight: 600;
            background-color: var(--s_h_black);
            border-color: var(--s_h_black);
            color: #fff;
        }

        &:not(.active) {
            &:hover,
            &:focus-visible {
                color: var(--s_h_black);
            }
        }
        &:active {
            opacity: 0.8;
        }
    }
}
.smart_home_product_list {
    margin-top: 40px;
    
     & > ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 20px;
    }
}
.smart_home_product_item {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;

    & .product_item_thumb {
        flex-shrink: 0;
        aspect-ratio: 1/1;
        border: 1px solid var(--s_h_border_color);
        border-radius: 10px;
        overflow: hidden;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    & .product_item_info {
        flex-grow: 1;
        padding-top: 10px;
    }

    & .product_item_name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;

        font-size: 20px;
        font-weight: var(--s_h_semibold);
    }

    & .product_item_sku {
        margin-top: 4px;
        font-size: 16px;
        font-weight: var(--s_h_medium);
        color: var(--s_h_gray);
    }
}

@media(max-width: 1023px){
    .smart_home_product_title {
        font-size: 18px;

        & span {
            padding: 0 10px;
        }
    }
    .smart_home_product_desc {
        padding-top: 12px;

        & p {
            font-size: 16px;
        }
    }
    .smart_home_product_tablist {
        margin: 12px calc(var(--s_h_inner_x) * -1);       
        padding: 12px var(--s_h_inner_x);
        
        & > ul {
            padding: 0;

            & > li:not(:last-child) {
                margin-right: 8px;
            }
        }

        & button {
            font-size: 14px;
            padding: 7px 15px;

            &:has(.active) {
                &:hover,
                &:active,
                &:active {
                    color: #fff;
                }
            }
        }
    }

    .smart_home_product_list {      
        margin-top: 24px;
        
        & > ul {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px 12px;
        }
    }
    .smart_home_product_item {
        & .product_item_name {
            font-size: 14px;
        }
        & .product_item_sku {
            margin-top: 2px;
            font-size: 12px;
            font-weight: 500;
        }
    }
}

@media(max-width:768px) {
    .smart_home_product_tablist {
        &.sticky {
            top: calc(var(--sticky-offset-top) + var(--direction-offset-top) + 10px);
        }
        &.direction_down {
            top: var(--sticky-offset-top);
        }
        &.direction_up {
            top: 46px;
        }
    }
}
/* product // */

/* solution */
.smart_home_solution {

}
.smart_home_solution_head {

}
.smart_home_solution_list { 
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 24px;

    & > li {
        flex: 1;
    }
}
.smart_home_solution_desc {
    padding-top: 32px;

    & p {
        font-size: 20px;
        font-weight: var(--s_h_medium);
        color: var(--s_h_gray_dark);
    }
}
.smart_home_solution_item {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    border-radius: 16px;

    & .solution_item_thumb {
        flex-shrink: 0;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    & .solution_item_text {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
        background-color: #F5F5F5;

        & b {
            font-size: 24px;
            font-weight: var(--s_h_semibold);
            margin-bottom: 4px;
        }

        & p {
            font-size: 18px;
            font-weight: var(--s_h_medium);
            margin-bottom: 20px;
            color: var(--s_h_gray_dark);
        }

        & .smart_home_btn {
            width: 100%;
            max-width: 240px;
            margin: auto auto 0;
        }
    }
}

@media(max-width: 1023px){
    .smart_home_solution_desc {
        padding-top: 16px;

        & p {
            font-size: 16px;
        }
    }
    .smart_home_solution_list {
        margin-top: 24px;
        gap: 12px;
    }
    .smart_home_solution_item {
        & .solution_item_text {
            padding: 16px 16px 20px;
    
            & b {
                font-size: 16px;
            }
            & p {
                font-size: 14px;
                margin-bottom: 16px;
            }
            & .smart_home_btn {
                max-width: 180px;
            }
        }
    }
}

@media(max-width: 768px){
    .smart_home_solution_list {
        gap: 32px;
        flex-direction: column;
    }
}
/* solution // */


/* faq */
.smart_home_faq {

}
.smart_home_faq_head {
    & h2 {
        font-size: 40px;
        line-height: 1.5;
    }
    & p {
        margin-top: 16px;

        font-size: 22px;
        font-weight: var(--s_h_medium);
        letter-spacing: 0;
    }
}
.smart_home_faq_banner {
    position: relative;
    margin-top: 40px;
}
.faq_banner_img {
    & img {
        width: 100%;
    }
}
.faq_banner_text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 15.4%;
    gap: 16px;

    & b {
        font-size: 28px;
    }

    & .smart_home_btn {
        width: 100%;
        max-width: 220px;
    }
}

@media(max-width: 1023px){
    .smart_home_faq_banner {
        margin-top: 30px;
    }
    .faq_banner_text {
        padding-left: 30px;
        gap: 10px;

        & b {
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }
        & .smart_home_btn {
            width: 100%;
            max-width: 136px;
        }
    }
}
/* faq // */


/* 유의사항 */
.smart_home_notice {
    padding-bottom: 134px;

    & button {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;

        font-size: 20px;
        font-weight: var(--s_h_medium);
        padding: 8px 24px;

        color: #000;
        border: 1px solid currentColor;
        border-radius: 50px;

        transition: all 0.3s;
        -webkit-transition: all 0.3s;

        &:hover,
        &:focus-visible {
            opacity: 0.8;
        }
        &:active {
            opacity: 1;
        }
        &:after {
            content: "";
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            margin-right: -8px;

            background-image: url(/kr/story/user-guide/img/ai_home/arrow_down.svg);
            background-size: contain;
        }

        &[aria-expanded=true] {
            margin-bottom: 40px;
            &:after {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }
        }
    }
}
.smart_home_notice_content {
    font-size: 14px;
    font-weight: var(--s_h_medium);
    color: var(--s_h_gray);

    & li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
        letter-spacing: -0.034em;
        word-break: keep-all;

        & + li {
            margin-top: 8px;
        }
    }
    & li:before {
        flex-shrink: 0;
        content: "*";
    }
}

@media(max-width: 1023px){
    .smart_home_notice {
        padding-bottom: 50px;

        & button {
            margin-top: 24px;
            font-size: 14px;
            padding: 6px 18px;
            gap: 4px;
            
            &[aria-expanded=true] {
                margin-bottom: 24px;
            }
            &:after {
                width: 20px;
                height: 20px;
            }   
            & span {
                font-weight: 500;
            }
        }
    }

    .smart_home_notice_content {
        font-size: 12px;
    }
}
/* 유의사항 // */


/*  popup player */
.is_popup_open {
    height: 100%;
    overflow: hidden !important;
}
.ytb_embed__popup {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;


    visibility: hidden;
    opacity: 0;

    transition: all 0.3s;
    -webkit-transition: all 0.3s;

    
    &.is_open {
        visibility: visible;
        opacity: 1;
    }

    & .dim {
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: rgba(0,0,0,0.8);
    }
}

.ytb_embed__popup_player {
    position: relative;
    z-index: 10;
    margin: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 1440px;
    max-height: 100%;
    padding: 20px 0;

    & iframe {
        aspect-ratio: 1.77/1;
        background-color: #000;
    }
}

.ytb_embed__popup_close {
    position: absolute;
    
    top: 100%;
    left: 50%;
    margin: 12px 0;
    margin-left: -27px;

    width: 54px;
    height: 54px;

    &:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;

        border-radius: 8px;
        background-color: #000;
        background-size: contain;
        background-image: url(/kr/story/user-guide/img/ai_home/popup_close_btn.png);
    }
}

@media(max-width: 1023px){
    .ytb_embed__popup_player {
        padding: 16px 0px;
    }
    .ytb_embed__popup_close {
        font-size: 14px;
        margin-top: 0;
    }
}