/* 진료 안내 / 오시는 길 */
#section-location {

    & .inner {
        --inner-gap: clamp(10px, 4.16666667vw, 20px);

        /* 공통사항 */
        & :where(h2, .consult-tel) {
            width: fit-content;
            font-size: clamp(22px, 2.4vw + 10px, var(--font-size-38));
            font-weight: var(--font-weight-bold);
        }

        /***********************************************************
        // 상딤/예약, 진료시간
        ***********************************************************/
        & .location-top {

            display: grid;
            grid-template-columns: repeat(2, 1fr);
            border-bottom: 1px solid var(--color-line-01);

            @media screen and (max-width: 640px) {
                display: flex;
                flex-direction: column;
            }

            /* 공통 설정 */
            & > div {
                --inner-padding: clamp(50px, 7vw, 105px);
    
                display: flex;
                flex-direction: column;
                gap: var(--inner-gap);
                padding: 
                    var(--inner-padding)
                    calc(var(--inner-padding) / 2)
                    var(--inner-padding)
                    var(--inner-padding)
                ;

                & > p {
                    font-size: clamp(var(--font-size-16), 1.45454545vw + 2px, var(--font-size-18));
                    color: var(--color-text-07);
                    word-break: keep-all;
                    line-height: 1.3;
                }

                @media screen and (max-width: 740px) {
                    padding: 
                        var(--inner-padding)
                        calc(var(--inner-padding) / 1.5)
                    ;
                }
                @media screen and (max-width: 640px) {
                    align-items: center;

                    & p {text-align: center;}
                }
            }
    
            /* 상담/예약 */
            & .consult-bx {
                border-right-width: 1px;
                border-style: solid; 
                border-color: var(--color-line-01);

                @media screen and (max-width: 640px) {
                    padding-inline: 0;
                    border-right-width: 0;
                    border-bottom-width: 1px;
                }

                & .consult-app-bx {
                    --app-bx-gap: clamp(3px, 1.5625vw, 10px);
                    --app-min-size: 122px;

                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(var(--app-min-size), 1fr));
                    gap: var(--app-bx-gap);

                    @media screen and (max-width: 640px) {
                        --app-min-size: 80px;
                        width: 100%;
                    }
                    @media screen and (max-width: 400px) {
                        font-size: var(--font-size-14);
                    }

                    & .consult-app-item {
                        border: 1px solid var(--color-line-01);
                        border-radius: var(--border-r-sub);
                        transition: all 0.2s ease-in-out; /* 부드러운 색상 전환을 위한 트랜지션 */
                    
                        /* [기본 텍스트 색상 설정] */
                        &:where(.tel, .line) { color: var(--color-main-white); }
                        &:where(.kakaotalk, .naver-booking) { color: var(--color-text-01); }
                    
                        /* [앱별 고유 배경색 및 포인트 컬러 정의] */
                        &.tel { 
                            background-color: var(--app-color-tel); 
                            --point-color: var(--app-color-tel); 
                        }
                        &.line { 
                            background-color: var(--app-color-line); 
                            --point-color: var(--app-color-line); 
                        }
                        &.kakaotalk { 
                            background-color: var(--app-color-kakaotalk); 
                            --point-color: var(--app-color-kakaotalk-text); 
                        }
                        &.naver-booking { 
                            border-color: var(--app-color-line); 
                            --point-color: var(--app-color-line); 
                        }
                    
                        /* [Hover 공통 로직] */
                        &:hover {
                            background-color: var(--color-main-white);
                            color: var(--point-color);
                            border-color: var(--point-color);
                    
                            /* 네이버 예약은 Hover 시 배경이 채워지는 반전 스타일 적용 */
                            &.naver-booking {
                                background-color: var(--app-color-line);
                                color: var(--color-main-white);
                            }
                        }
                    
                        /* [내부 요소 레이아웃] */
                        & .consult-app-anchor {
                            --app-anchor-padding-multifly: 2;
                            --app-anchor-gap: 5px;
                    
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: var(--app-anchor-gap);
                            width: 100%;
                            height: 100%;
                            padding: calc(var(--app-anchor-gap) * var(--app-anchor-padding-multifly));
                    
                            & img {
                                max-width: clamp(16px, 4.5833vw, 20px);
                                object-fit: contain;
                            }
                            & p { 
                                font-weight: var(--font-weight-semi-bold); 
                            }

                            @media screen and (max-width: 400px) {
                                --app-anchor-padding-multifly: 1.5;
                            }
                        }
                    }
                }
            }

            /* 진료시간 */
            & .schedule-bx {
                
                & .time-list-wrap {
                    display: flex;
                    flex-direction: column;
                    gap: var(--inner-gap);

                    & li {
                        display: flex;
                        align-items: center;
                        gap: var(--inner-gap);
                        font-size: var(--font-size-18);

                        & .schedule-title {
                            --title-w: 68px;

                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            width: var(--title-w);
                            font-weight: var(--font-weight-regular);
                        }
                        & .schedule-time {
                            --time-w: clamp(67px, 11.71875vw, 75px);

                            display: grid;
                            grid-template-columns: 
                                var(--time-w)
                                15px
                                var(--time-w)
                            ;
                            font-weight: var(--font-weight-bold);
                            text-transform: lowercase;

                            & > div:nth-child(2) {
                                display: inline-flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                }
            }
        }

        /***********************************************************
        // 지도 섹션
        ***********************************************************/
        & .location-bottom {
            --bottom-w: clamp(310px, 91.6vw, 1100px);
            
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: var(--bottom-w);
            margin: var(--content-vertical-gap-sm) auto;

            & .map-container {
                width: 100%;
                max-width: var(--bottom-w);

                /* 주소 */
                & .map-info-bx {
                    display: flex;
                    align-items: flex-end;
                    margin-bottom: var(--inner-gap);

                    @media screen and (max-width: 930px) {
                        flex-direction: column;
                        align-items: center;
                        gap: var(--inner-gap);
                    }

                    & .map-title-wrap {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: var(--inner-gap);

                        @media screen and (max-width: 930px) {
                            align-items: center;
                        }

                        & .address-group {
                            display: flex;
                            align-items: center;
                            gap: 5px;
                            font-size: clamp(var(--font-size-16), 3.3333vw, var(--font-size-18));
                            font-weight: var(--font-weight-regular);
                        }
                    }

                    /* 지도 앱 */
                    & .location-map-bx {
                        --min-size: 80px;
                        flex: 1;
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(var(--min-size), 1fr));
                        gap: calc(var(--inner-gap) * 0.6);

                        & a {
                            --map-anchor-padding: clamp(6px, 1.6666vw, 8px);

                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: var(--map-anchor-padding);

                            padding: var(--map-anchor-padding);
                            border: 1px solid var(--color-line-01);
                            border-radius: var(--border-r-sub);
                            font-weight: var(--font-weight-bold);

                            & img {
                                max-height: calc(var(--map-anchor-padding) * 3);
                            }

                        }
                        @media screen and (max-width: 930px) {
                            width: 100%;
                        }
                        @media screen and (max-width: 400px) {
                            gap: calc(var(--inner-gap) * 0.3);
                            & > a {font-size: var(--font-size-14)};
                        }
                    }
                }

                /* 지도 */
                & .map-main-bx {
                    --map-height: 500px;

                    overflow: hidden;
                    width: 100%;
                    aspect-ratio: 1/0.454545455;
                    min-height: 200px;

                    @media screen and (max-width: 640px) {
                        aspect-ratio: 1/0.7;
                    }
                    @media screen and (max-width: 420px) {
                        aspect-ratio: 1/1.15;
                    }

                    & .root_daum_roughmap {
                        width: 100% !important;
                        height: 100% !important;

                        & .wrap_map {
                            width: 100% !important;
                            height: 100% !important;
                        }
                    }
                }
            }

            /* 오시는 길 하단 설명 */
            & .location-info-bx {
                display: flex;
                flex-direction: column;
                gap: calc(var(--inner-gap) * 2);;
                width: 100%;
                margin-top: calc(var(--inner-gap) * 2);

                & .info-item {
                    display: flex;
                    flex-direction: column;

                    & .info-title-wrap {
                        --info-title-wrap-font-min-size: var(--font-size-20);
                        --info-title-wrap-font-mx-size: var(--font-size-22);
                        display: flex;
                        align-items: center;
                        gap: 5px;

                        @media screen and (max-width: 640px) {
                            --info-title-wrap-font-min-size: var(--font-size-18);
                            --info-title-wrap-font-mx-size: var(--font-size-20);
                        }

                        & img {
                            max-width: calc(var(--info-title-wrap-font-mx-size) * 1.1);
                        }
                        & h3 {
                            font-size: clamp(var(--info-title-wrap-font-min-size), 4.166vw, var(--info-title-wrap-font-mx-size));
                        }
                    }
                    & .info-text {
                        margin-top: 10px;

                        & p {
                            font-size: clamp(var(--font-size-16), 3.333vw, var(--font-size-18));
                            font-weight: var(--font-weight-regular);
                            /* line-height: 2; */
                            line-height: clamp(1.4em, 1.2em + 1vw, 2em);
                            word-break: keep-all;
    
                            & em {
                                --color-orange: #fe730d;
                                --color-mint: #7dc5a8;
    
                                display: inline-flex;
                                justify-content: center;
                                align-items: center;
                                border: 2px solid;
                                font-weight: var(--font-weight-semi-bold);
                                line-height: 1;
    
                                &.line-orange {
                                    height: 100%;
                                    padding: 5px;
                                    aspect-ratio: 1/1;
                                    border-radius: 50%;
                                    color: var(--color-orange);
                                }
                                &.line-mint {
                                    padding: 2px 6px;
                                    border-radius: 12px;
                                    color: var(--color-mint);
                                }
                            }
                            & strong {font-weight: var(--font-weight-extra-bold);}
                        }
                    }
                }
            }

        }
    }
}