Helper.css

/*!
 * 헬퍼 클래스 모음
 * Helper classes
 *
 * @Source: Bootstrap v4 alpha
 * @License: MIT License
 * ------------------------------------------------------------
 * 어디서든 사용 가능한 CSS 패턴 모음입니다.
 * 편집의 효율을 높이기 위해, style 대신 짧고 효율적인 class로
 * 만들어졌습니다. 사용법은 [[도움말:스타일링]]을 참조하십시오.
 *
 * 네이밍에 쉽게 적응힐 수 있도록 하기 위해, 웹 디자인에 널리
 * 사용되는 프레임워크 `Bootstrap`에서 발췌했습니다.
 * 
 * 다른 커스텀 class를 추가할 땐, 가급적 커스텀이란 사실을
 * 주석으로 표기해 주시기 바랍니다.
 * ------------------------------------------------------------
 * Reusable universal patterns.
 * Designed to boosts productivity and performance.
 *
 * In order for an easier adaptation, we borrowed these classes
 * from `Bootstrap` framework which is widely used among web designers.
 * 
 * If you consider adding other custom classes here,
 * please indicate that with a comment.
 */

/* Clearfix */
.clearfix::after,
.group::after { content: ''; clear: both; display: table; border-spacing: 0; }

/* Display
 ---------------------------------------- */
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.d-table { display: table !important; } /* CUSTOM */
.d-table-cell { display: table-cell !important; } /* CUSTOM */

/* Float (xs- prefix removed)
 ---------------------------------------- */
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

/* Expand
 ---------------------------------------- */
.w-100 { width: 100% !important; }
.w-50 { width: 50% !important; }
.h-100 { height: 100% !important; }

/* Margins and Paddings (rem unit converted to px to fit to ko.pokemon.wikia.com)
 ---------------------------------------- */
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

.m-1 { margin: 10px 10px !important; }
.mt-1 { margin-top: 10px !important; }
.mr-1 { margin-right: 10px !important; }
.mb-1 { margin-bottom: 10px !important; }
.ml-1 { margin-left: 10px !important; }
.mx-1 { margin-right: 10px !important; margin-left: 10px !important; }
.my-1 { margin-top: 10px !important; margin-bottom: 10px !important; }

.m-2 { margin: 15px 15px !important; }
.mt-2 { margin-top: 15px !important; }
.mr-2 { margin-right: 15px !important; }
.mb-2 { margin-bottom: 15px !important; }
.ml-2 { margin-left: 15px !important; }
.mx-2 { margin-right: 15px !important;  margin-left: 15px !important; }
.my-2 { margin-top: 15px !important; margin-bottom: 15px !important; }

.m-3 { margin: 30px 30px !important; }
.mt-3 { margin-top: 30px !important; }
.mr-3 { margin-right: 30px !important; }
.mb-3 { margin-bottom: 30px !important; }
.ml-3 { margin-left: 30px !important; }
.mx-3 { margin-right: 30px !important; margin-left: 30px !important; }
.my-3 { margin-top: 30px !important; margin-bottom: 30px !important; }

.p-0 { padding: 0 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.p-1 { padding: 10px 10px !important; }
.pt-1 { padding-top: 10px !important; }
.pr-1 { padding-right: 10px !important; }
.pb-1 { padding-bottom: 10px !important; }
.pl-1 { padding-left: 10px !important; }
.px-1 { padding-right: 10px !important; padding-left: 10px !important; }
.py-1 { padding-top: 10px !important; padding-bottom: 10px !important; }

.p-2 { padding: 15px 15px !important; }
.pt-2 { padding-top: 15px !important; }
.pr-2 { padding-right: 15px !important; }
.pb-2 { padding-bottom: 15px !important; }
.pl-2 { padding-left: 15px !important; }
.px-2 { padding-right: 15px !important; padding-left: 15px !important; }
.py-2 { padding-top: 15px !important; padding-bottom: 15px !important; }

.p-3 { padding: 30px 30px !important; }
.pt-3 { padding-top: 30px !important; }
.pr-3 { padding-right: 30px !important; }
.pb-3 { padding-bottom: 30px !important; }
.pl-3 { padding-left: 30px !important; }
.px-3 { padding-right: 30px !important; padding-left: 30px !important; }
.py-3 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* Rounded corner
 ---------------------------------------- */
.rounded,
.roundy { border-radius: 10px !important; }
.rounded-top,
.roundytop { border-top-right-radius: 10px !important; border-top-left-radius: 10px !important; }
.rounded-right,
.roundyright { border-bottom-right-radius: 10px !important; border-top-right-radius: 10px !important; }
.rounded-bottom,
.roundybottom { border-bottom-right-radius: 10px !important; border-bottom-left-radius: 10px !important; }
.rounded-left,
.roundyleft { border-bottom-left-radius: 10px !important; border-top-left-radius: 10px !important; }
.rounded-topleft,
.roundytopleft { border-top-left-radius: 10px !important; }
.rounded-topright,
.roundytopright { border-top-right-radius: 10px !important; }
.rounded-bottomleft,
.roundybottomleft { border-bottom-left-radius: 10px !important; }
.rounded-bottomright,
.roundybottomright { border-bottom-right-radius: 10px !important; }
.rounded-circle,
.roundycircle { border-radius: 50%; }

table.rounded > tbody > tr:first-child > th:first-child,
table.rounded > tbody > tr:first-child > td:first-child { border-top-left-radius: 5px; }
table.rounded > tbody > tr:first-child > th:last-child,
table.rounded > tbody > tr:first-child > td:last-child { border-top-right-radius: 5px; }
table.rounded > tbody > tr:last-child > th:first-child,
table.rounded > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 5px; }
table.rounded > tbody > tr:last-child > th:last-child,
table.rounded > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 5px; }

/* Vertical alignment
 ---------------------------------------- */
.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }

/* Text (xs- prefix removed)
 ---------------------------------------- */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-weight-normal { font-weight: normal !important; }
.font-weight-bold { font-weight: bold !important; }
.font-italic { font-style: italic !important; }
.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.text-large { font-size: 1.25rem; } /* CUSTOM */
.text-larger { font-size: 1.5rem; } /* CUSTOM */
.text-small { font-size: .846rem; line-height: normal; } /* CUSTOM */
.text-smaller { font-size: .769rem; line-height: normal; } /* CUSTOM */

/* Color
 ---------------------------------------- */
.text-white { color: #fff !important; }
.text-muted { color: #888 !important; }
.text-warning { color: #f00 !important; }

.bg-white,
.back-white { background: #fff !important; } /* legacy class ".back-white" requires replacement */
.bg-transparent { background: transparent !important; } /* CUSTOM */

/* Miscellaneous
 ---------------------------------------- */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.centered { /* CUSTOM */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* <ul/>, <ol/>
 ---------------------------------------- */
.list-unstyled,
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item + .list-inline-item { margin-left: 5px; }

/* <table/>
 ---------------------------------------- */
.table { width: 100%; max-width: 100%; margin-bottom: 1rem; }
.table th,
.table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #eceeef; }
.table thead th { vertical-align: bottom; border-bottom: 2px solid #eceeef; }
.table tbody + tbody { border-top: 2px solid #eceeef; }
.table .table { background-color: #fff; }

.table-bordered { border: 1px solid #eceeef; }
.table-bordered th,
.table-bordered td { border: 1px solid #eceeef; }
.table-bordered thead th,
.table-bordered thead td { border-bottom-width: 2px; }

.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); }


/* 옛 코드
 * 부트스트랩 코드가 아닙니다. 마이그레이션이 예정돼 있으므로
 * 되도록 사용하지 말아 주십시오.
 *
 * Legacy
 * NOT from Bootstrap. Avoid use those classes,
 * they will be migrated in the future.
 ---------------------------------------- */
.lefted { float: left !important; }
.centered { margin: auto !important; }
.righted { float: right !important; }

.alignleft { text-align: left; }
.aligncenter { text-align: center; }
table.aligncenter td { text-align: center; }
.alignright { text-align: right; }