/**
프로젝트에 맞게 파일명 변경
최상단은 ukpm__ 접두어 사용 최상단 접두어 겹치는경우 일괄변경
변수명 --ukpm__ 접두어 사용
세부설정은 개별 css에서 변경

@version 2024.08.13
@author ukp
*/


/**
card

<div class="ukpm__card"></div>
*/
.ukpm__card {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}


/**
float

<div class="ukpm__float">
    <div class="left"></div>
    <div class="right"></div>
</div>
*/
.ukpm__float::after {
    content: "";
    display: block;
    clear: both;
}

.ukpm__float>.left {
    float: left;
}

.ukpm__float>.right {
    float: right;
}


/**
inline-block
세로 가운데정렬

<div class="ukpm__inline_block">
    <div class="content"></div>
    <div class="content"></div>
</div>
*/
.ukpm__inline_block {
    font-size: 0;
}

.ukpm__inline_block>.content {
    display: inline-block;
    vertical-align: middle;
}


/**
게시글 리스트(pc)
.ukpm__board_pc 선택자 --ukpm__color로 색상 변경

<div class="ukpm__board_pc">
    <table>
        <colgroup>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성일</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="center">1</td>
                <td class="left">안녕하세요</td>
                <td class="right">1970-01-01</td>
            </tr>
        </tbody>
    </table>
</div>
*/
.ukpm__board_pc {
    --ukpm__color: #000000;
    font-size: 0;
}

.ukpm__board_pc>table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ukpm__board_pc>table>thead>tr>th {
    box-sizing: border-box;
    font-weight: bold;
    text-align: center;
    border-top: 3px solid var(--ukpm__color);
    border-bottom: 1px solid var(--ukpm__color);
    padding: 0;
    height: 34px;
    line-height: 30px;
}

.ukpm__board_pc>table>tbody>tr>td {
    box-sizing: border-box;
    border-bottom: 1px solid var(--ukpm__color);
    height: 31px;
    line-height: 30px;
    padding: 0 5px;
}

.ukpm__board_pc>table>tbody>tr>td.left {
    text-align: left;
}

.ukpm__board_pc>table>tbody>tr>td.right {
    text-align: right;
}

.ukpm__board_pc>table>tbody>tr>td.center {
    text-align: center;
}


/**
게시글 리스트(mobile)
.ukpm__board_mobile 선택자 --ukpm__color로 색상 변경

<div class="ukpm__board_mobile">
    <div class="row">
        <div class="col">1</div>
        <div class="col">
            <div>안녕하세요</div>
            <div>1970-01-01</div>
        </div>
    </div>
</div>
*/
.ukpm__board_mobile {
    --ukpm__color: #000000;
    font-size: 12px;
    line-height: 20px;
}

.ukpm__board_mobile>.row {
    border-bottom: 1px solid var(--ukpm__color);
    display: flex;
}

.ukpm__board_mobile>.row:first-child {
    border-top: 1px solid var(--ukpm__color);
}

.ukpm__board_mobile>.row>.col {
    flex: none;
    padding: 0 5px;
}

.ukpm__board_mobile>.row>.col:last-child {
    flex: 1;
}


/**
토글
.ukpm__toggle 선택자 font-size로 크기 조정
.ukpm__toggle 선택자 --ukpm__color로 색상 변경
circle 클래스 삭제시 사각토글

<label class="ukpm__toggle circle">
    <input type="checkbox" class="check">
    <div class="background">
        <div class="text on">
            <div>ON</div>
        </div>
        <div class="text off">
            <div>OFF</div>
        </div>
        <div class="btn"></div>
    </div>
</label>
*/
.ukpm__toggle {
    font-size: 4px;
    --ukpm__color: #000000;
    display: block;
    position: relative;
    width: 16em;
    height: 8em;
}

.ukpm__toggle>.check {
    appearance: none;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 4em;
    left: 8em;
}

.ukpm__toggle>.background {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #b4b4b4;
    transition: background-color 0.3s;
    cursor: pointer;
}

.ukpm__toggle>.background>.text {
    position: absolute;
    top: 0;
    width: 9em;
    height: 8em;
    line-height: 8em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: white;
    user-select: none;
    transition: opacity 0.3s;
    font-weight: bold;
}

.ukpm__toggle>.background>.text>div {
    font-size: 3em;
    white-space: nowrap;
}

.ukpm__toggle>.background>.on {
    left: 0;
    opacity: 0;
}

.ukpm__toggle>.background>.off {
    left: 7em;
    opacity: 1;
}

.ukpm__toggle>.background>.btn {
    width: 6em;
    height: 6em;
    background-color: white;
    position: absolute;
    top: 1em;
    left: 1em;
    transition: left 0.3s;
}

.ukpm__toggle>.check:checked+.background {
    background-color: var(--ukpm__color);
}

.ukpm__toggle>.check:checked+.background>.on {
    opacity: 1;
}

.ukpm__toggle>.check:checked+.background>.off {
    opacity: 0;
}

.ukpm__toggle>.check:checked+.background>.btn {
    left: 9em;
}

.ukpm__toggle.circle>.background {
    border-radius: 4em;
}

.ukpm__toggle.circle>.background>.btn {
    border-radius: 3em;
}

.ukpm__toggle.circle>.check:disabled+.background {
    cursor: default;
}

.ukpm__toggle.circle>.check:disabled+.background>.text {
    left: 0;
    width: 100%;
}

.ukpm__toggle.circle>.check:disabled+.background>.btn {
    display: none;
}


/**
체크박스
.ukpm__check 선택자 font-size로 크기 조정
.ukpm__check 선택자 --ukpm__color로 색상 변경

<label class="ukpm__check">
    <input type="checkbox" class="check">
    <div class="background">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8" class="svg">
            <polyline points="1,3 4,7 7,1" />
        </svg>
    </div>
</label>
*/
.ukpm__check {
    font-size: 4px;
    --ukpm__color: #000000;
    position: relative;
    display: block;
    width: 10em;
    height: 10em;
}

.ukpm__check>.check {
    appearance: none;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 5em;
    left: 5em;
}

.ukpm__check>.background {
    box-sizing: border-box;
    position: relative;
    background-color: white;
    border-width: 1em;
    border-style: solid;
    border-color: #b4b4b4;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ukpm__check>.background>.svg {
    fill: transparent;
    stroke: white;
    stroke-width: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.ukpm__check>.check:checked+.background {
    background-color: var(--ukpm__color);
    border-color: var(--ukpm__color);
}

.ukpm__check>.check:checked+.background>.svg {
    opacity: 1;
}

.ukpm__check>.check:disabled+.background {
    background-color: #b4b4b4;
    border-color: #b4b4b4;
    cursor: default;
}


/**
라디오
.ukpm__radio 선택자 font-size로 크기 조정
.ukpm__radio 선택자 --ukpm__color로 색상 변경

<label class="ukpm__radio">
    <input type="radio" class="radio" name="hello">
    <div class="background">
        <div class="btn"></div>
    </div>
</label>
*/
.ukpm__radio {
    font-size: 4px;
    --ukpm__color: #000000;
    position: relative;
    display: block;
    width: 10em;
    height: 10em;
}

.ukpm__radio>.radio {
    appearance: none;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 5em;
    left: 5em;
}

.ukpm__radio>.background {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1em;
    border-width: 1em;
    border-style: solid;
    border-color: #b4b4b4;
    background-color: white;
    border-radius: 5em;
    cursor: pointer;
}

.ukpm__radio>.background>.btn {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 4em;
}

.ukpm__radio>.radio:checked+.background {
    border-color: var(--ukpm__color);
}

.ukpm__radio>.radio:checked+.background>.btn {
    background-color: var(--ukpm__color);
}

.ukpm__radio>.radio:disabled+.background {
    cursor: default;
    background-color: #b4b4b4;
}

.ukpm__radio>.radio:disabled+.background>.btn {
    background-color: #b4b4b4;
}

.ukpm__radio>.radio:disabled:checked+.background {
    border-color: #b4b4b4;
    background-color: white;
}


/**
셀렉트
.ukpm__select 선택자 border 속성 변경

<label class="ukpm__select">
    <select class="select">
        <option value="1">항목1</option>
        <option value="2">항목2</option>
    </select>
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8" class="svg">
        <polyline points="1,3 4,6 7,3" />
    </svg>
</label>
*/
.ukpm__select {
    --ukpm__color: black;
    border: 1px solid var(--ukpm__color);
    position: relative;
    display: flex;
}

.ukpm__select>.select {
    appearance: none;
    border: 0;
    border-radius: 0;
    width: 100%;
    padding-right: 16px;
}

.ukpm__select>.svg {
    fill: transparent;
    stroke: var(--ukpm__color);
    stroke-width: 1;
    width: 8px;
    position: absolute;
    top: calc(50% - 5px);
    right: 4px;
    pointer-events: none;
}


/**
버튼
.ukpm__btn 선택자 background-color로 색상 변경

<button type="button" class="ukpm__btn">안녕</button>
*/
.ukpm__btn {
    background-color: black;
    appearance: none;
    border-radius: 0;
    border: 0;
    color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
}

.ukpm__btn:active {
    box-shadow: none;
}


/**
텍스트필드
.ukpm__input 선택자 border로 테두리색 변경

<input type="number" class="ukpm__input" value="안녕">
*/
.ukpm__input {
    border: 1px solid black;
    box-sizing: border-box;
    appearance: none;
}

.ukpm__input::-webkit-outer-spin-button,
.ukpm__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/**
텍스트박스
.ukpm__textarea 선택자 border로 테두리색 변경

<textarea class="ukpm__textarea"></textarea>
*/
.ukpm__textarea {
    border: 1px solid black;
    appearance: none;
    resize: none;
    overflow: auto;
}


/**
파일
onchange 추가 원하는경우 세미콜론 뒤에 추가하거나 addEventListener 사용
.ukpm__file 선택자 --ukpm__color로 색상 변경

<label class="ukpm__file">
    <div class="btn">
        <div class="text">파일 선택</div>
    </div>
    <input type="file" class="file" onchange="var a=this.files[0];this.nextElementSibling.innerHTML=a?a.name:'';">
    <img src onerror="var a=this;setTimeout(()=>{var b=a.previousElementSibling.files[0];a.nextElementSibling.innerHTML=b?b.name:'';a.remove()},1)">
    <div class="name"></div>
</label>
*/
.ukpm__file {
    --ukpm__color: black;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ukpm__file>.btn {
    background-color: var(--ukpm__color);
    color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ukpm__file>.btn:active {
    box-shadow: none;
}

.ukpm__file>.file {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 0;
}

.ukpm__file>.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    margin-left: 4px;
}


/**
반응형 썸네일
인라인 스타일 background-image 변경하여 사용
aspect-ratio 로 비율 변경

<div class="ukpm__thumb" style="background-image: url('https://health.chosun.com/site/data/img_dir/2023/07/17/2023071701753_0.jpg');"></div>
*/

.ukpm__thumb {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/**
페이지네이션
.ukpm__pagination 선택자 --ukpm__color로 색상 변경

<div class="ukpm__pagination">
    <a href="#" class="side">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 10" class="svg">
            <polyline points="7,2 3,5 7,8" />
        </svg>
    </a>
    <a href="#" class="href">1</a>
    <span class="num">2</span>
    <a href="#" class="href">3</a>
    <a href="#" class="side">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 10" class="svg">
            <polyline points="3,2 7,5 3,8" />
        </svg>
    </a>
</div>
*/
.ukpm__pagination {
    --ukpm__color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
}

.ukpm__pagination>.side {
    width: 30px;
    height: 30px;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.ukpm__pagination>.side>.svg {
    display: block;
    stroke-width: 1px;
    fill: transparent;
    stroke: var(--ukpm__color);
    height: 30px;
    margin: 0 auto;
}

.ukpm__pagination>.href {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--ukpm__color);
    text-decoration: none;
    cursor: pointer;
}

.ukpm__pagination>.num {
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--ukpm__color);
    color: white;
    font-weight: bold;
    text-decoration: none;
    cursor: default;
}