/*
* bootstrap5-grid-compat.css
* ---------------------------------------------------------
* Bootstrap 3.3.7 그리드 시스템(col-xs/sm/md/lg-N, offset, push,
* pull, hidden-*, visible-*)을 Bootstrap 5.3 위에서 그대로
* 쓸 수 있도록 하는 호환 레이어입니다.
*
* 중요: BS3와 BS5는 브레이크포인트 기준값이 다릅니다.
* BS3 : xs(~767) / sm(768~) / md(992~) / lg(1200~)
* BS5 : xs(~575) / sm(576~) / md(768~) / lg(992~) / xl(1200~) / xxl(1400~)
* 이 파일은 BS5 내장 grid 클래스를 재사용하지 않고,
* BS3 원래 브레이크포인트(768/992/1200)를 기준으로 새로 정의하므로
* 기존 레이아웃이 화면 폭 기준으로 정확히 동일하게 동작합니다.
*
* 로드 순서:
*
*
* ---------------------------------------------------------
*/
/* ===== xs : columns ===== */
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.col-xs { flex: 1 0 0%; }
.col-xs-auto { flex: 0 0 auto; width: auto; }
/* ===== xs : offset (신규 표기 + BS3 레거시 표기 둘 다 지원) ===== */
.offset-xs-0 { margin-left: 0; }
.col-xs-offset-0 { margin-left: 0; }
.offset-xs-1, .col-xs-offset-1 { margin-left: 8.33333333%; }
.offset-xs-2, .col-xs-offset-2 { margin-left: 16.66666667%; }
.offset-xs-3, .col-xs-offset-3 { margin-left: 25%; }
.offset-xs-4, .col-xs-offset-4 { margin-left: 33.33333333%; }
.offset-xs-5, .col-xs-offset-5 { margin-left: 41.66666667%; }
.offset-xs-6, .col-xs-offset-6 { margin-left: 50%; }
.offset-xs-7, .col-xs-offset-7 { margin-left: 58.33333333%; }
.offset-xs-8, .col-xs-offset-8 { margin-left: 66.66666667%; }
.offset-xs-9, .col-xs-offset-9 { margin-left: 75%; }
.offset-xs-10, .col-xs-offset-10 { margin-left: 83.33333333%; }
.offset-xs-11, .col-xs-offset-11 { margin-left: 91.66666667%; }
/* ===== xs : push / pull (BS3 전용, BS5에는 없는 개념) ===== */
.col-xs-push-0 { left: auto; }
.col-xs-pull-0 { right: auto; }
.col-xs-push-1 { position: relative; left: 8.33333333%; }
.col-xs-pull-1 { position: relative; right: 8.33333333%; }
.col-xs-push-2 { position: relative; left: 16.66666667%; }
.col-xs-pull-2 { position: relative; right: 16.66666667%; }
.col-xs-push-3 { position: relative; left: 25%; }
.col-xs-pull-3 { position: relative; right: 25%; }
.col-xs-push-4 { position: relative; left: 33.33333333%; }
.col-xs-pull-4 { position: relative; right: 33.33333333%; }
.col-xs-push-5 { position: relative; left: 41.66666667%; }
.col-xs-pull-5 { position: relative; right: 41.66666667%; }
.col-xs-push-6 { position: relative; left: 50%; }
.col-xs-pull-6 { position: relative; right: 50%; }
.col-xs-push-7 { position: relative; left: 58.33333333%; }
.col-xs-pull-7 { position: relative; right: 58.33333333%; }
.col-xs-push-8 { position: relative; left: 66.66666667%; }
.col-xs-pull-8 { position: relative; right: 66.66666667%; }
.col-xs-push-9 { position: relative; left: 75%; }
.col-xs-pull-9 { position: relative; right: 75%; }
.col-xs-push-10 { position: relative; left: 83.33333333%; }
.col-xs-pull-10 { position: relative; right: 83.33333333%; }
.col-xs-push-11 { position: relative; left: 91.66666667%; }
.col-xs-pull-11 { position: relative; right: 91.66666667%; }
/* ===== xs : hidden / visible (BS3 유틸리티) ===== */
.hidden-xs { display: none !important; }
@media (min-width: 768px) {
/* ===== sm : columns ===== */
.col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-sm-3 { flex: 0 0 auto; width: 25%; }
.col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-sm-6 { flex: 0 0 auto; width: 50%; }
.col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-sm-9 { flex: 0 0 auto; width: 75%; }
.col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-sm-12 { flex: 0 0 auto; width: 100%; }
.col-sm { flex: 1 0 0%; }
.col-sm-auto { flex: 0 0 auto; width: auto; }
/* ===== sm : offset (신규 표기 + BS3 레거시 표기 둘 다 지원) ===== */
.offset-sm-0 { margin-left: 0; }
.col-sm-offset-0 { margin-left: 0; }
.offset-sm-1, .col-sm-offset-1 { margin-left: 8.33333333%; }
.offset-sm-2, .col-sm-offset-2 { margin-left: 16.66666667%; }
.offset-sm-3, .col-sm-offset-3 { margin-left: 25%; }
.offset-sm-4, .col-sm-offset-4 { margin-left: 33.33333333%; }
.offset-sm-5, .col-sm-offset-5 { margin-left: 41.66666667%; }
.offset-sm-6, .col-sm-offset-6 { margin-left: 50%; }
.offset-sm-7, .col-sm-offset-7 { margin-left: 58.33333333%; }
.offset-sm-8, .col-sm-offset-8 { margin-left: 66.66666667%; }
.offset-sm-9, .col-sm-offset-9 { margin-left: 75%; }
.offset-sm-10, .col-sm-offset-10 { margin-left: 83.33333333%; }
.offset-sm-11, .col-sm-offset-11 { margin-left: 91.66666667%; }
/* ===== sm : push / pull (BS3 전용, BS5에는 없는 개념) ===== */
.col-sm-push-0 { left: auto; }
.col-sm-pull-0 { right: auto; }
.col-sm-push-1 { position: relative; left: 8.33333333%; }
.col-sm-pull-1 { position: relative; right: 8.33333333%; }
.col-sm-push-2 { position: relative; left: 16.66666667%; }
.col-sm-pull-2 { position: relative; right: 16.66666667%; }
.col-sm-push-3 { position: relative; left: 25%; }
.col-sm-pull-3 { position: relative; right: 25%; }
.col-sm-push-4 { position: relative; left: 33.33333333%; }
.col-sm-pull-4 { position: relative; right: 33.33333333%; }
.col-sm-push-5 { position: relative; left: 41.66666667%; }
.col-sm-pull-5 { position: relative; right: 41.66666667%; }
.col-sm-push-6 { position: relative; left: 50%; }
.col-sm-pull-6 { position: relative; right: 50%; }
.col-sm-push-7 { position: relative; left: 58.33333333%; }
.col-sm-pull-7 { position: relative; right: 58.33333333%; }
.col-sm-push-8 { position: relative; left: 66.66666667%; }
.col-sm-pull-8 { position: relative; right: 66.66666667%; }
.col-sm-push-9 { position: relative; left: 75%; }
.col-sm-pull-9 { position: relative; right: 75%; }
.col-sm-push-10 { position: relative; left: 83.33333333%; }
.col-sm-pull-10 { position: relative; right: 83.33333333%; }
.col-sm-push-11 { position: relative; left: 91.66666667%; }
.col-sm-pull-11 { position: relative; right: 91.66666667%; }
/* ===== sm : hidden / visible (BS3 유틸리티) ===== */
.hidden-sm { display: none !important; }
}
@media (min-width: 992px) {
/* ===== md : columns ===== */
.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-md-3 { flex: 0 0 auto; width: 25%; }
.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-md-6 { flex: 0 0 auto; width: 50%; }
.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-md-9 { flex: 0 0 auto; width: 75%; }
.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-md-12 { flex: 0 0 auto; width: 100%; }
.col-md { flex: 1 0 0%; }
.col-md-auto { flex: 0 0 auto; width: auto; }
/* ===== md : offset (신규 표기 + BS3 레거시 표기 둘 다 지원) ===== */
.offset-md-0 { margin-left: 0; }
.col-md-offset-0 { margin-left: 0; }
.offset-md-1, .col-md-offset-1 { margin-left: 8.33333333%; }
.offset-md-2, .col-md-offset-2 { margin-left: 16.66666667%; }
.offset-md-3, .col-md-offset-3 { margin-left: 25%; }
.offset-md-4, .col-md-offset-4 { margin-left: 33.33333333%; }
.offset-md-5, .col-md-offset-5 { margin-left: 41.66666667%; }
.offset-md-6, .col-md-offset-6 { margin-left: 50%; }
.offset-md-7, .col-md-offset-7 { margin-left: 58.33333333%; }
.offset-md-8, .col-md-offset-8 { margin-left: 66.66666667%; }
.offset-md-9, .col-md-offset-9 { margin-left: 75%; }
.offset-md-10, .col-md-offset-10 { margin-left: 83.33333333%; }
.offset-md-11, .col-md-offset-11 { margin-left: 91.66666667%; }
/* ===== md : push / pull (BS3 전용, BS5에는 없는 개념) ===== */
.col-md-push-0 { left: auto; }
.col-md-pull-0 { right: auto; }
.col-md-push-1 { position: relative; left: 8.33333333%; }
.col-md-pull-1 { position: relative; right: 8.33333333%; }
.col-md-push-2 { position: relative; left: 16.66666667%; }
.col-md-pull-2 { position: relative; right: 16.66666667%; }
.col-md-push-3 { position: relative; left: 25%; }
.col-md-pull-3 { position: relative; right: 25%; }
.col-md-push-4 { position: relative; left: 33.33333333%; }
.col-md-pull-4 { position: relative; right: 33.33333333%; }
.col-md-push-5 { position: relative; left: 41.66666667%; }
.col-md-pull-5 { position: relative; right: 41.66666667%; }
.col-md-push-6 { position: relative; left: 50%; }
.col-md-pull-6 { position: relative; right: 50%; }
.col-md-push-7 { position: relative; left: 58.33333333%; }
.col-md-pull-7 { position: relative; right: 58.33333333%; }
.col-md-push-8 { position: relative; left: 66.66666667%; }
.col-md-pull-8 { position: relative; right: 66.66666667%; }
.col-md-push-9 { position: relative; left: 75%; }
.col-md-pull-9 { position: relative; right: 75%; }
.col-md-push-10 { position: relative; left: 83.33333333%; }
.col-md-pull-10 { position: relative; right: 83.33333333%; }
.col-md-push-11 { position: relative; left: 91.66666667%; }
.col-md-pull-11 { position: relative; right: 91.66666667%; }
/* ===== md : hidden / visible (BS3 유틸리티) ===== */
.hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
/* ===== lg : columns ===== */
.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-lg-3 { flex: 0 0 auto; width: 25%; }
.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-lg-6 { flex: 0 0 auto; width: 50%; }
.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-lg-9 { flex: 0 0 auto; width: 75%; }
.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-lg-12 { flex: 0 0 auto; width: 100%; }
.col-lg { flex: 1 0 0%; }
.col-lg-auto { flex: 0 0 auto; width: auto; }
/* ===== lg : offset (신규 표기 + BS3 레거시 표기 둘 다 지원) ===== */
.offset-lg-0 { margin-left: 0; }
.col-lg-offset-0 { margin-left: 0; }
.offset-lg-1, .col-lg-offset-1 { margin-left: 8.33333333%; }
.offset-lg-2, .col-lg-offset-2 { margin-left: 16.66666667%; }
.offset-lg-3, .col-lg-offset-3 { margin-left: 25%; }
.offset-lg-4, .col-lg-offset-4 { margin-left: 33.33333333%; }
.offset-lg-5, .col-lg-offset-5 { margin-left: 41.66666667%; }
.offset-lg-6, .col-lg-offset-6 { margin-left: 50%; }
.offset-lg-7, .col-lg-offset-7 { margin-left: 58.33333333%; }
.offset-lg-8, .col-lg-offset-8 { margin-left: 66.66666667%; }
.offset-lg-9, .col-lg-offset-9 { margin-left: 75%; }
.offset-lg-10, .col-lg-offset-10 { margin-left: 83.33333333%; }
.offset-lg-11, .col-lg-offset-11 { margin-left: 91.66666667%; }
/* ===== lg : push / pull (BS3 전용, BS5에는 없는 개념) ===== */
.col-lg-push-0 { left: auto; }
.col-lg-pull-0 { right: auto; }
.col-lg-push-1 { position: relative; left: 8.33333333%; }
.col-lg-pull-1 { position: relative; right: 8.33333333%; }
.col-lg-push-2 { position: relative; left: 16.66666667%; }
.col-lg-pull-2 { position: relative; right: 16.66666667%; }
.col-lg-push-3 { position: relative; left: 25%; }
.col-lg-pull-3 { position: relative; right: 25%; }
.col-lg-push-4 { position: relative; left: 33.33333333%; }
.col-lg-pull-4 { position: relative; right: 33.33333333%; }
.col-lg-push-5 { position: relative; left: 41.66666667%; }
.col-lg-pull-5 { position: relative; right: 41.66666667%; }
.col-lg-push-6 { position: relative; left: 50%; }
.col-lg-pull-6 { position: relative; right: 50%; }
.col-lg-push-7 { position: relative; left: 58.33333333%; }
.col-lg-pull-7 { position: relative; right: 58.33333333%; }
.col-lg-push-8 { position: relative; left: 66.66666667%; }
.col-lg-pull-8 { position: relative; right: 66.66666667%; }
.col-lg-push-9 { position: relative; left: 75%; }
.col-lg-pull-9 { position: relative; right: 75%; }
.col-lg-push-10 { position: relative; left: 83.33333333%; }
.col-lg-pull-10 { position: relative; right: 83.33333333%; }
.col-lg-push-11 { position: relative; left: 91.66666667%; }
.col-lg-pull-11 { position: relative; right: 91.66666667%; }
/* ===== lg : hidden / visible (BS3 유틸리티) ===== */
.hidden-lg { display: none !important; }
}
/* ===== visible-* : 특정 구간에서만 보이도록(BS3 방식) ===== */
.visible-xs, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md, .visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767.98px) {
.visible-xs { display: block !important; }
.visible-xs-block { display: block !important; }
.visible-xs-inline { display: inline !important; }
.visible-xs-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.visible-sm { display: block !important; }
.visible-sm-block { display: block !important; }
.visible-sm-inline { display: inline !important; }
.visible-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.visible-md { display: block !important; }
.visible-md-block { display: block !important; }
.visible-md-inline { display: inline !important; }
.visible-md-inline-block { display: inline-block !important; }
}
@media (min-width: 1200px) {
.visible-lg { display: block !important; }
.visible-lg-block { display: block !important; }
.visible-lg-inline { display: inline !important; }
.visible-lg-inline-block { display: inline-block !important; }
}
/* ===== pull-left / pull-right (BS3 float 유틸리티) =====
BS5에서는 .float-start / .float-end 로 이름이 바뀌었으므로
기존 클래스명을 그대로 쓸 수 있도록 매핑합니다. */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
/* 반응형 버전(BS3에는 없지만 BS4/5 float-* 관례에 맞춰 참고용으로 추가) */
@media (min-width: 768px) {
.pull-left-sm { float: left !important; }
.pull-right-sm { float: right !important; }
}
@media (min-width: 992px) {
.pull-left-md { float: left !important; }
.pull-right-md { float: right !important; }
}
@media (min-width: 1200px) {
.pull-left-lg { float: left !important; }
.pull-right-lg { float: right !important; }
}
/* ===== a 태그 밑줄 제거 (BS3 기본 동작 복원) =====
BS5는 reboot.css에서 기본적으로 a { text-decoration: underline; }
로 바뀌었습니다(BS3/4는 기본 밑줄 없음, hover 시에만 밑줄).
BS3와 동일하게 평소엔 밑줄 없고 hover/focus 시에만 밑줄이 붙게 복원. */
a {
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}