/*
 * 레거시 templates/home/2023/base.html 의 인라인 <style> 블록을 그대로 옮긴 것입니다.
 *
 * 페이지별 <style> 은 각 페이지 컴포넌트로 옮겼는데(HomePage.tsx 등) base.html 것만
 * 누락돼서, 플로팅 아이콘이 문서 흐름에 박히고 .container 최대폭이 부트스트랩 기본값
 * (1140px)으로 좁아져 있었습니다.
 *
 * **레거시와 동일한 내용을 유지하세요.** 디자인을 바꾸려면 여기가 아니라 별도 규칙으로
 * 덮어쓰고, 그 이유를 적어주세요.
 *
 * index.html 에서 base.css **다음에** 로드합니다. 레거시도 CSS <link> 뒤에 이 <style>
 * 블록이 있었으므로, 순서가 바뀌면 .container 최대폭 규칙이 theme.css 에 밀립니다.
 */

.floating-icon {
    position: fixed;
    z-index: 1000;
    bottom: 90px;
    left: 14px;
    right: unset;
    width: 70px;
}

.floating-icon img {
    width: 70px;
}
.floating-icon.icon-youtube {
    left: 12px;
}
.floating-icon.icon-blue-red {
    left: 94px;
}
.floating-icon.icon-naver-blog {
    left: 176px;
}

@media (min-width: 992px) {
    .floating-icon {
        position: fixed;
        z-index: 1000;
        bottom: 135px;
        right: 39px;
        left: unset !important;
        width: 118px;
    }
    .floating-icon.icon-youtube {
        right: 303px;
    }
    .floating-icon.icon-blue-red {
        right: 171px;
    }
    .floating-icon.icon-naver-blog {
        right: 39px;
    }

    .floating-icon img {
        width: 118px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1250px;
    }
}

@media (min-width: 1660px) {
    .container {
        max-width: 1400px;
    }
}

.lead {
    font-weight: 400 !important;
    font-size: 1rem !important;
}

.modal-body * {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
}