/* #region - ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- 전역 오버라이드 */ html, body { height: 100%; } a { text-decoration: none; } small { font-size: 75% ; } hr { border-color: var( --bs-border-color ); opacity: 1; } .dropdown-toggle::after { margin-left: .5rem; } ::placeholder { color: rgba( var( --bs-body-color-rgb ), .5 ) !important; } .form-floating input:not(:focus)::placeholder { color: rgba( var( --bs-body-color-rgb ), 0 ) !important; } /* #endregion */ /* #region - ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- K6 */ .p_r { position: relative; } .p_a { position: absolute; } .p_f { position: fixed ; z-index: 1030; } .mw_100 { max-width: 100% ; } .mw_sm { max-width: 576px; } .w_sm { width: 576px; } .mw_md { max-width: 768px; } .w_md { width: 768px; } .l_0 { left : 0; } .mt_nb { margin-top : calc( var( --bs-border-width ) * -1 ) !important; } /* Margin Negative */ .r_0 { right : 0; } .mb_nb { margin-bottom: calc( var( --bs-border-width ) * -1 ) !important; } .t_0 { top : 0; } .ml_nb { margin-left : calc( var( --bs-border-width ) * -1 ) !important; } .b_0 { bottom: 0; } .mr_nb { margin-right : calc( var( --bs-border-width ) * -1 ) !important; } .fs_8 { font-size: .5rem; } .fs_50 { font-size: 50%; } .fs_10 { font-size: .625rem; } .fs_625 { font-size: 62.5%; } .fs_12 { font-size: .75rem; } .fs_75 { font-size: 75%; } .fs_14 { font-size: .875rem; } .fs_875 { font-size: 87.5%; } .fs_16 { font-size: 1rem; } .fs_1125 { font-size: 112.5%; } .fs_18 { font-size: 1.125rem; } .fs_125 { font-size: 125%; } .fs_20 { font-size: 1.25rem; } .fs_1375 { font-size: 137.5%; } .fs_22 { font-size: 1.375rem; } .fs_150 { font-size: 150%; } .fs_24 { font-size: 1.5rem; } .fs_175 { font-size: 175%; } .fs_28 { font-size: 1.75rem; } .fs_200 { font-size: 200%; } .fs_32 { font-size: 2rem; } .fs_36 { font-size: 2.25rem; } .fs_40 { font-size: 2.5rem; } .fs_44 { font-size: 2.75rem; } .fs_48 { font-size: 3rem; } .fs_52 { font-size: 3.25rem; } .fs_56 { font-size: 3.5rem; } .fs_60 { font-size: 3.75rem; } .fs_64 { font-size: 4rem; } .o_100 { opacity: 1 ; } .o_75 { opacity: .75 ; } .o_50 { opacity: .5 ; } .o_25 { opacity: .25 ; } .o_10 { opacity: .1 ; } .o_0 { opacity: 0 ; } .oh_100:hover { opacity: 1 !important; } .oh_75:hover { opacity: .75 !important; } .oh_50:hover { opacity: .5 !important; } .oh_25:hover { opacity: .25 !important; } .oh_10:hover { opacity: .1 !important; } .oh_0:hover { opacity: 0 !important; } .br_0 { border-radius: 0; } .br_t { border-radius: var( --bs-border-radius ) var( --bs-border-radius ) 0 0 !important; } .br_tl { border-radius: var( --bs-border-radius ) 0 0 0 !important; } .br_b { border-radius: 0 0 var( --bs-border-radius ) var( --bs-border-radius ) !important; } .br_tr { border-radius: 0 var( --bs-border-radius ) 0 0 !important; } .br_l { border-radius: var( --bs-border-radius ) 0 0 var( --bs-border-radius ) !important; } .br_bl { border-radius: 0 0 0 var( --bs-border-radius ) !important; } .br_r { border-radius: 0 var( --bs-border-radius ) var( --bs-border-radius ) 0 !important; } .br_br { border-radius: 0 0 var( --bs-border-radius ) 0 !important; } .br_x { border-radius: 0 var( --bs-border-radius ) 0 var( --bs-border-radius ) !important; border-top: 0; border-right: 0; } @media ( max-width: 575.98px ) { .br_sm_n { border-radius: 0 !important; } } @media ( min-width: 767.98px ) { .br_md_n { border-radius: 0 !important; } } .line_1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .line_2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .line_3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .line_4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .fc_r { color: var( --bs-body-bg ); } /* Font Color Reverse */ .bc_r { background-color: var( --bs-body-color ); } /* Background Color Reverse */ .fc_min, [data-bs-theme=dark] .fc_max { color: #FFF; } .fc_max, [data-bs-theme=dark] .fc_min { color: #000; } .bc_min, [data-bs-theme=dark] .bc_max { background-color: #000; } .bc_max, [data-bs-theme=dark] .bc_min { background-color: #FFF; } .b_i { background-position: center; /* Background Image */ background-size : cover ; } .bp_c { background-position: center; } .bp_t { background-position: top ; } .bs_c { background-size : cover ; } .of_c { object-fit : cover ; } .op_c { object-position: center; } .op_p { object-position: top ; } .he { visibility: hidden; position: absolute; left: 0; top: 0; width: 1px; height: 1px; z-index: -1; } /* Hidden Element */ .trst { transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } /* Transition */ .b_h { transform: translateX( -50% ); position: absolute; left: 50%; top: 0; width: 100vw ; } /* Background Horizontal */ .b_r { transform: translateX( -50% ); position: absolute; left: 50%; top: 0; width: calc( 100% + 2rem ); border-radius: var( --bs-border-radius ); } /* Background Rounded */ .ds_u { filter: drop-shadow( -2px -2px 3px rgb( 0, 0, 0, .15 ) ); } .ds { filter: drop-shadow( 2px 2px 3px rgb( 0, 0, 0, .15 ) ); } .ds_b { filter: drop-shadow( -1px -1px 0px #000 ) drop-shadow( 1px -1px 0px #000 ) drop-shadow( -1px 1px 0px #000 ) drop-shadow( 1px 1px 0px #000 ); } .ds_w { filter: drop-shadow( -1px -1px 0px #FFF ) drop-shadow( 1px -1px 0px #FFF ) drop-shadow( -1px 1px 0px #FFF ) drop-shadow( 1px 1px 0px #FFF ); } .ds_a { filter: drop-shadow( -1px -1px 0px var( --bs-body-bg /* Auto */ ) ) drop-shadow( 1px -1px 0px var( --bs-body-bg ) ) drop-shadow( -1px 1px 0px var( --bs-body-bg ) ) drop-shadow( 1px 1px 0px var( --bs-body-bg ) ); } .ds_p { filter: drop-shadow( -1px -1px 0px var( --bs-primary-bg-subtle ) ) drop-shadow( 1px -1px 0px var( --bs-primary-bg-subtle ) ) drop-shadow( -1px 1px 0px var( --bs-primary-bg-subtle ) ) drop-shadow( 1px 1px 0px var( --bs-primary-bg-subtle ) ); } .ds_s { filter: drop-shadow( -1px -1px 0px var( --bs-success-bg-subtle ) ) drop-shadow( 1px -1px 0px var( --bs-success-bg-subtle ) ) drop-shadow( -1px 1px 0px var( --bs-success-bg-subtle ) ) drop-shadow( 1px 1px 0px var( --bs-success-bg-subtle ) ); } .ds_d { filter: drop-shadow( -1px -1px 0px var( --bs-danger-bg-subtle ) ) drop-shadow( 1px -1px 0px var( --bs-danger-bg-subtle ) ) drop-shadow( -1px 1px 0px var( --bs-danger-bg-subtle ) ) drop-shadow( 1px 1px 0px var( --bs-danger-bg-subtle ) ); } .ul { background-color: var( --bs-secondary ); width: 100%; height: 4px; border-radius: 2px; margin: 2px 0 6px 0; } /* Underline */ .ul.ul_p { background-color: var( --bs-primary ); } .ul.ul_s { background-color: var( --bs-success ); } .ul.ul_d { background-color: var( --bs-danger ); } .fl { font-weight: bold; border-left : 4px solid transparent; padding-left : 12px; position: relative; } /* Form Label */ .fl.fl_r { text-align: right; width: 100%; border-right: 4px solid transparent; padding-right: 12px; border-left: 0; padding-left: 0; } /* Form Label Right */ .fl::before , .fl::after { background: var( --bs-secondary ); left: -4px; width: 4px; height: 50%; position: absolute; content: ''; } .fl.fl_r::before, .fl.fl_r::after { left: auto; right: -4px; } .fl.fl_p::before, .fl.fl_p::after { background: var( --bs-primary ); } .fl.fl_s::before, .fl.fl_s::after { background: var( --bs-success ); } .fl.fl_d::before, .fl.fl_d::after { background: var( --bs-danger ); } .fl::before { border-radius: 2px 2px 0 0; top : 0px; } .fl::after { border-radius: 0 0 2px 2px; bottom: 0px; } .col.chck { border: 0 solid var( --bs-border-color ); } .col.chck:not(:nth-last-of-type(1)):not(:nth-last-of-type(2)) { border-bottom-width: 1px !important; } .col.chck:nth-of-type(2n+1) { border-right-width : 1px !important; } .col.chck:nth-of-type(1) label { border-top-left-radius : var( --bs-border-radius ) !important; } .col.chck:nth-of-type(2) label { border-top-right-radius : var( --bs-border-radius ) !important; } .col.chck:nth-last-of-type(1) label { border-bottom-right-radius: var( --bs-border-radius ) !important; } .col.chck:nth-last-of-type(2) label { border-bottom-left-radius : var( --bs-border-radius ) !important; } .col.chck .btn-check + label { color: var( --bs-body-color ) !important; } .col.chck .btn-check + .btn-outline-primary:hover { color: var( --bs-body-color ) ; background-color: var( --bs-primary-bg-subtle ) ; } .col.chck .btn-check + .btn-outline-success:hover { color: var( --bs-body-color ) ; background-color: var( --bs-success-bg-subtle ) ; } .col.chck .btn-check + .btn-outline-danger:hover { color: var( --bs-body-color ) ; background-color: var( --bs-danger-bg-subtle ) ; } .col.chck .btn-check:checked + label { color: var( --bs-btn-active-color ) !important; background-color: var( --bs-btn-hover-bg ) !important; } /* #endregion */ /* #region - ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- K6 cmmn.js 연동 */ /* 투두 - 크롬 업데이트 반영 */ .k6_cmmn_desk .sb::-webkit-scrollbar { background: rgba( var( --bs-body-rgb ), 1 ); width: .5rem; height: .5rem; } /* DESKtop ScrollBar */ .k6_cmmn_desk .sb::-webkit-scrollbar-corner { background: rgba( var( --bs-secondary-rgb ), .25 ); } .k6_cmmn_desk .sb::-webkit-scrollbar-thumb { background: rgba( var( --bs-secondary-rgb ), .25 ); border-radius : .25rem; } .k6_cmmn_desk .sb::-webkit-scrollbar-thumb:hover { background: rgba( var( --bs-secondary-rgb ), .75 ); } .k6_cmmn_hrsc { display: flex; flex-wrap: nowrap; overflow-x: auto; } /* Horizontal Scroll */ .k6_cmmn_hrsc a { margin-right: .5rem; } .k6_cmmn_hrsc a:last-child { margin-right: 0 ; } /* #endregion */ /* #region - ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- 아티클 */ h1, .h1 { font-size: 1.625rem; line-height: 1.5; margin-top: 3rem; margin-bottom: 1rem; } h2, .h2 { font-size: 1.5rem; line-height: 1.5; margin-top: 3rem; margin-bottom: 1rem; } h3, .h3 { font-size: 1.375rem; line-height: 1.5; margin-top: 3rem; margin-bottom: 1rem; } h4, .h4 { font-size: 1.25rem; line-height: 1.5; margin-top: 3rem; margin-bottom: 1rem; } h5, .h5 { font-size: 1.125rem; line-height: 1.5; margin-top: 3rem; margin-bottom: 1rem; } h6, .h6 { font-size: 1rem; line-height: 1.5; margin-top: 3rem; margin-bottom: 1rem; } sub { opacity: .5; font-size: 75%; bottom: auto; } sup { opacity: .5; font-size: 100%; top : auto; vertical-align: baseline; } ul { margin: 0 0 1rem 0; padding-left: 0rem; } ol { margin: 0 0 1rem 0; padding-left: 1rem; } ul li, ol li { margin: 0 0 .5rem 0; padding-left: .75rem; border-left: .25rem solid rgba( var( --bs-secondary-rgb ), .25 ); list-style-type: none; } .wp-block-quote { margin: 0 0 .5rem 0; padding-left: .75rem; border-left: .25rem solid rgba( var( --bs-secondary-rgb ), .25 ); } .wp-block-code { padding : 1rem; border-radius: var( --bs-border-radius ); background-color: var( --bs-tertiary-bg ); } .oh_100:hover { opacity: 1 !important; } .wp-block-embed-youtube div { width: 100%; max-width: 100%; height: 100%; } .wp-block-embed-youtube iframe { width: 100%; max-width: 100%; height: 100%; border-radius: var( --bs-border-radius ); } .wp-block-image.size-large img { width: 100%; max-width: 100%; height: auto; border-radius: var( --bs-border-radius ); } .wp-embed-aspect-16-9 { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; } .k6_atcl_shrt { width: 100%; max-width: 100%; aspect-ratio: 9 / 16; } .k6_atcl_desc { font-size: 75%; margin-top: -.5rem; opacity: .5; } .k6_atcl_alrt { border-radius: var( --bs-border-radius ); overflow: hidden; position: relative; margin-bottom: 1rem; height: 16rem; width: 100%; } .k6_atcl_alrt > img, .k6_atcl_alrt > div { position: absolute; margin : 1.5rem; } @media ( min-width: 767.98px ) { .k6_atcl_alrt > img, .k6_atcl_alrt > div { position: absolute; margin : 3rem; } } @media ( max-width: 575.98px ) { .k6_atcl_alrt > img, .k6_atcl_alrt > div { transform: scale( .75 ); } } .to_tl { transform-origin: top left ; } .to_tc { transform-origin: top center; } .to_tr { transform-origin: top right ; } .to_cl { transform-origin: center left ; } .to_cc { transform-origin: center center; } .to_cr { transform-origin: center right ; } .to_bl { transform-origin: bottom left ; } .to_bc { transform-origin: bottom center; } .to_br { transform-origin: bottom right ; } .has-text-align-center { text-align: center; } .mt_n1 { margin-top: -.25rem; } .mb_n1 { margin-bottom: -.25rem; } .ml_n1 { margin-left: -.25rem; } .mr_n1 { margin-right: -.25rem; } .mt_n2 { margin-top: -.5rem; } .mb_n2 { margin-bottom: -.5rem; } .ml_n2 { margin-left: -.5rem; } .mr_n2 { margin-right: -.5rem; } .mt_n3 { margin-top: -1rem; } .mb_n3 { margin-bottom: -1rem; } .ml_n3 { margin-left: -1rem; } .mr_n3 { margin-right: -1rem; } .mt_n4 { margin-top: -1.5rem; } .mb_n4 { margin-bottom: -1.5rem; } .ml_n4 { margin-left: -1.5rem; } .mr_n4 { margin-right: -1.5rem; } .mt_n5 { margin-top: -3rem; } .mb_n5 { margin-bottom: -3rem; } .ml_n5 { margin-left: -3rem; } .mr_n5 { margin-right: -3rem; } article ul, article ol, article p { opacity: .75; } /* #endregion */ /* 투두 : 신규 테마 개발이 아닌, 작가 전용 기능을 추가하라. */