@charset "utf-8";

:root {
    --logo-font-size: var(--font-21);/* 로고 사이즈 */
    --logo-font-color: var(--color-08);/* 로고 색상 */

    /* 셀렉트박스 시작 */
    --select-pop-btn-color:var(--font-color);
    --select-pop-bg: var(--article-bg-color);
    --select-pop-width: calc(var(--padding-100) * 2);
    --select-pop-radius: var(--input-radius);
    --select-pop-shadow-color: var(--color-01);
    --select-option-border-color: var(--color-02);
    --select-option-size: var(--padding-40);
    --select-option-padding: var(--padding-10);
    --select-option-spacing: var(--padding-15);
    /* 셀렉트박스 끝 */

    --ico-border-color: currentColor; /* 아이콘 보더 색상 */
    --ico-size:var(--padding-9);
    --list-colo-size:var(--padding-14);
    --checkbox-size: var(--padding-18);
    --checkbox-spacing: var(--padding-10);
}
.logo {
    display: flex;
    font-size: var(--logo-font-size);
    align-items: center;
    color: var(--logo-font-color);
    font-weight: 600;
}
.logo img {
    /* opacity: 0.8; */
}

.select {
    position: relative;
    left:0;top:0;
}

.select.button {
    display: flex;
    align-items: center;
    border: var(--border);
    height: var(--button-size-normal);
    /* border-radius: var(--button-size-normal); */
    border-radius: var(--padding-5);
    width: var(--padding-100);
    padding: 0 var(--content-padding);
}
.select.button.small {
    height: var(--button-size-small);
    /* border-radius: var(--button-size-small); */
    border-radius: calc(var(--border-width)* 2);
}
.select.button > .selectBtn {
    font-size: var(--caption-desc);
    width: 100%;
}
.selectDesign.select {
    overflow: hidden;
    padding: 0 var(--content-padding) 0 0;
}
.select > select,
.select > .selectBtn input {
    width: 100%;
}

.select > select {
    border:none;
    appearance: none;
    height: 100%;
    padding: 0 var(--content-padding);
}
.select > select,
.select > .selectBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
}
.selectDesign.select::after,
.select:not(.custom) > .selectBtn::after {
    content: '';
    display: block;
    border:3px solid transparent;
    border-top: 4px solid var(--select-pop-btn-color);
    border-bottom: none;
}
.select.on > .selectBtn::after {
    border-bottom: 4px solid var(--select-pop-btn-color);
    border-top: none;
}
.select:not(.on) > .selctPop {
    display: none;
}
.select > .selctPop {
    position: absolute;
    top:100%;
    margin-top: -0.5em;
    left:calc(0px - var(--border-width));/*셀렉트 박스 옵션 기본 좌측 정렬*/
    background-color: var(--select-pop-bg);
    border: var(--border);
    width: var(--select-pop-width);
    display: flex;
    flex-wrap: wrap;
    box-shadow: var(--button-shadow);
    border-radius: var(--select-pop-radius);
    overflow: hidden;
    z-index: 97;
    max-height: 100vh;
}
.select > .selctPop.right { /*셀렉트 박스 옵션 우측 정렬*/
    left: auto;
    right: calc(0px - var(--border-width));
}
.select > .selctPop.full {
    width: 100%;
    left:0;
}
.select > .selctPop .selectList { /*셀렉트 박스 옵션 기본 column 2 */
    width: 50%;
    /* display: flex; */
}
.select > .selctPop .selectList.columnSelf-3 {
    width: 33.333%;
}
.select > .selctPop .selectList.columnSelf-4 {
    width: 25%;
}
.select > .selctPop .selectList.full { /*셀렉트 박스 옵션 column 1*/
    width: 100%;
}
.select > .selctPop .selectList .selectOption {
    position: relative;
    width: 100%;
    left:0;top:0;
    flex: 1;
    display: flex;
    min-height: var(--select-option-size);
    align-items: center;
    padding: var(--select-option-padding);
    height: 100%;
}
.select > .selctPop .selectList .selectOption:hover {
    background-color: var(--color-005);
}
.select > .selctPop .selectList .selectOption::after {
    display: block;
    content: '';
    pointer-events: none;
    position: absolute;
    top: calc(0px - var(--border-width));
    right: calc(0px - var(--border-width));
    bottom: calc(0px - var(--border-width));
    left: calc(0px - var(--border-width));
    border: var(--border-width) solid var(--select-option-border-color);
    border-width: var(--border-width) 0 0 var(--border-width);
}

.arrowBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--button-size-middle);
    height: var(--button-size-middle);
    border:var(--border);
    border-radius: 50%;
}
.prevIco,
.nextIco,
.downIco,
.upIco {
    display: block;
    width: var(--ico-size);
    height: var(--ico-size);
    border:var(--border-width) solid var(--ico-border-color);
    transform: rotate(-45deg);
}
.upIco {
    border-width: var(--border-width) var(--border-width) 0 0;
    margin-top: calc(var(--border-width) * 3);
}
.downIco {
    border-width: 0 0 var(--border-width) var(--border-width);
    margin-top: calc(0px - var(--border-width) * 3);
}
.prevIco {
    border-width: var(--border-width) 0 0 var(--border-width);
    margin-left: calc(var(--border-width) * 3);
}
.nextIco {
    border-width: 0 var(--border-width) var(--border-width) 0;
    margin-left: calc(0px - var(--border-width) * 3);
}
.on > .onUpDownParent .downIco,
:not(.on) > .onUpDownParent .upIco,
.onUpDown.on > .downIco,
.onUpDown:not(.on) > .upIco {
    display: none;
}
.exitIco,
.plusIco {
    display: block;
    width: var(--ico-size);
    height: var(--ico-size);
    position: relative;
    left:0;top:0;
    color: var(--font-color);
}
.exitIco {
    color: var(--color-fff);
}
.exitIco::before,
.exitIco::after,
.plusIco::before,
.plusIco::after {
    content: '';
    display: block;
    background-color: currentColor;
    position: absolute;
    left:50%;top:50%;
    transform: translate(-50%, -50%);
}
.exitIco::before,
.plusIco::before {
    width: 100%;
    height: var(--border-width);
}
.exitIco::after,
.plusIco::after {
    height: 100%;
    width: var(--border-width);
}
.exitIco {
    transform: rotate(-45deg);
}
.changeIco {
    display: flex;
    align-items: center;
}
.changeIco::before {
    content: '';
    display: block;
    margin-top: calc(var(--border-width) * 2);
}
.changeIco.normal::before {
    width: calc(var(--border-width) * 4);
    height: var(--border-width);
    background-color: currentColor;
}
.changeIco.normal::after {
    display: block;
    content: '0';
    opacity: 0;
}
.changeIco.normal {
    color: var(--disabled-font-color);
}
.changeIco.up {
    color: var(--color-point);
}
.changeIco.down {
    color: var(--color-primary);
}
.changeIco.up::before,
.changeIco.down::before {
    border:calc(var(--border-width) * 3) solid transparent;
}
.changeIco.up::before {
    border-bottom: calc(var(--border-width) * 4) solid currentColor;
    border-top: none;
}
.changeIco.down::before {
    border-top: calc(var(--border-width) * 4) solid currentColor;
    border-bottom: none;
}
.copyIco {
    width:calc(var(--padding-8) - var(--border-width));
    height:calc(var(--padding-8) - var(--border-width));
    position: relative;
    left:0;top:0;
}
.copyIco::before,
.copyIco::after {
    content: '';
    display: block;
    border:var(--border);
    border-color: currentColor;
    position: absolute;
    width: calc(100% - var(--border-width) * 2);
    height: calc(100% - var(--border-width) * 2);
}
.copyIco::before {
    left:0;bottom:0;
}
.copyIco::after {
    right: 0;
    top: 0;
    border-width: var(--border-width) var(--border-width) 0 0;
}


.listIco {
    width: var(--list-colo-size);
    height: var(--list-colo-size);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--border-width);
    align-items: inherit;
}

.listIco i::before,
.listIco i::after,
.listIco i {
    content: '';
    display: flex;
    width: calc(var(--list-colo-size) / 3 - var(--border-width));
    height: calc(var(--list-colo-size) / 3 - var(--border-width));
    gap: var(--border-width);
}
.listIco i::before,
.listIco i::after {
    background-color: var(--color-04);
}
.on > .listIco i::before,
.on > .listIco i::after {
    background-color: var(--color-085);
}
.listIco i::before {
    flex:none;
}
.listIco.card i,
.listIco.list i {
    width: 100%;
}
.listIco.album i::before,
.listIco.list i::before {
    width: 100%;
    height: 100%;
}
.on > .listIco.album i {
    animation-duration: 0.45s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes album1 {50% {transform: translate(100%, 100%);}}
@keyframes album2 {50% {transform: translate(0%, 100%);}}
@keyframes album3 {50% {transform: translate(-100%, 100%);}}
@keyframes album4 {50% {transform: translate(100%, 0%);}}
/* @keyframes album5 {50% {transform: translate(0%, 0%);}} */
@keyframes album6 {50% {transform: translate(-100%, 0%);}}
@keyframes album7 {50% {transform: translate(100%, -100%);}}
@keyframes album8 {50% {transform: translate(0%, -100%);}}
@keyframes album9 {50% {transform: translate(-100%, -100%);}}
.on > .listIco.album.many i:nth-of-type(1),
.on > .listIco.album.normal i:nth-of-type(1) {animation-name: album1;}
.on > .listIco.album.many i:nth-of-type(2) {animation-name: album2;}
.on > .listIco.album.many i:nth-of-type(3),
.on > .listIco.album.normal i:nth-of-type(2) {animation-name: album3;}
.on > .listIco.album.many i:nth-of-type(4) {animation-name: album4;}
.on > .listIco.album.many i:nth-of-type(5) {animation-name: album5;}
.on > .listIco.album.many i:nth-of-type(6) {animation-name: album6;}
.on > .listIco.album.many i:nth-of-type(7),
.on > .listIco.album.normal i:nth-of-type(3) {animation-name: album7;}
.on > .listIco.album.many i:nth-of-type(8) {animation-name: album8;}
.on > .listIco.album.many i:nth-of-type(9),
.on > .listIco.album.normal i:nth-of-type(4) {animation-name: album9;}
.on > .listIco.list i,
.on > .listIco.card i {
    animation-name: rangkingListRotate;
    animation-duration: 5s;
}
.listIco.list i:nth-of-type(1),
.listIco.card i:nth-of-type(1) {
    animation-delay: 0.1s;
}
.listIco.list i:nth-of-type(2),
.listIco.card i:nth-of-type(2) {
    animation-delay: 0.2s;
}
.listIco.list i:nth-of-type(3),
.listIco.card i:nth-of-type(3) {
    animation-delay: 0.3s;
}
.listIco.album.normal i {
    width: calc(var(--list-colo-size) / 2 - var(--border-width));
    height: calc(var(--list-colo-size) / 2 - var(--border-width));
}
.listIco.card i::after {
    width: 100%;
}
.listIco:not(.card) i::after {
    display: none;
}



input.checkboxDesign ~ label,
input.checkboxDesign ~ .label {
    padding-left: calc(var(--checkbox-size) + var(--checkbox-spacing));
    position: relative;
    left:0;top:0;
    max-width: 100%;
    width: fit-content;
    font-size: var(--input-font-size);
}
input.checkboxDesign ~ label:empty,
input.checkboxDesign ~ .label:empty {
    padding-left: 0;
    width:  var(--checkbox-size);
    height:  var(--checkbox-size);
}
input.checkboxDesign ~ label::before,
input.checkboxDesign ~ label::after,
input.checkboxDesign ~ .label::before,
input.checkboxDesign ~ .label::after {
    content: '';
    display: block;
    position: absolute;
    left:0;top:50%;
}
input.checkboxDesign ~ label::before,
input.checkboxDesign ~ .label::before {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--border);
    border-radius: calc(var(--input-radius) / 2);
    margin-top: calc(0px - var(--checkbox-size) / 2);
    background-color: var(--article-bg-color);
    border-color: var(--color-07);
}
input.checkboxDesign:checked ~ label::before,
input.checkboxDesign:checked ~ .label::before {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}
input.checkboxDesign.disabled:checked ~ label::before,
input.checkboxDesign.disabled:checked ~ .label::before {
    border-color: var(--disabled-font-color);
    background-color: var(--disabled-font-color);
}
@keyframes checked {
    0% {height: var(--padding-6); width: 0;}
    100% {width: var(--padding-10);}
}

input.checkboxDesign:checked ~ label::after,
input.checkboxDesign:checked ~ .label::after {
    border: var(--border);
    border-color: var(--article-bg-color);
    border-width: 0 0 calc(var(--border-width) * 2) calc(var(--border-width) * 2);
    transform: rotate(-45deg);
    margin: 0;
}
input.checkboxDesign:checked ~ label::after,
input.checkboxDesign:checked ~ .label::after {
    width: var(--padding-10);
    height: var(--padding-6);
    margin: calc(0px - var(--padding-4)) 0 0 var(--padding-4);
    animation-name: checked;
    animation-duration: 0.25s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}
.showInput + label ~ *,
.showInput + .label ~ * {
    gap:var(--input-spacing);
}
.showInput:not(:checked) + label ~ *,
.showInput:not(:checked) + .label ~ * {
    display: none;
}

label .checkboxDesign ~ .buttonDesign {
    padding: 0;
}
label .checkboxDesign:checked ~ .buttonDesign {
    border: var(--border-width) var(--border-style) var(--color-primary);
}
label .checkboxDesign ~ .buttonDesign.figure {
    width: auto;
    height: auto;
    overflow: hidden;
}
label .checkboxDesign:checked ~ .buttonDesign.figure .img {
    background-color: var(--color-07);
}
label .checkboxDesign:checked ~ .buttonDesign.figure img {
    opacity: 0.45;
}
label .checkboxDesign:checked ~ .buttonDesign.figure::before {
    content: '';
    display: block;
    position: absolute;
    left:50%;top:50%;
    z-index: 9;
    margin: calc(0px - var(--padding-18)) 0 0 calc(0px - var(--padding-10));
    width: var(--padding-20);
    height: var(--padding-36);
    border-right: var(--padding-5) var(--border-style) var(--color-primary);
    border-bottom: var(--padding-5) var(--border-style) var(--color-primary);
    transform: rotate(45deg);
}
label .checkedOnShow:not(:checked) ~ .checkedShow,
label .checkedOnShow:not(:checked) ~ * .checkedShow {
    display: none;
}
input.checkboxDesign ~ .tag {
    padding-left: var(--padding-10);
}
input.checkboxDesign ~ .tag::before,
input.checkboxDesign ~ .tag::after {
    display: none;
}
label .checkboxDesign:not(:checked) ~ .tag {
    border: var(--border);
    background: var(--article-bg-color);
    color: var(--font-color);
}


.tag {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-5) var(--padding-10);
    height: var(--button-size-small);
    line-height: 1;
    border-radius: var(--padding-4);
    background-color: var(--color-primary-005);
    color: var(--color-primary-06);
    font-size: var(--font-14);
    position: relative;
    left:0;top:0;
}
.tag.secondary {
    background-color: var(--color-secondary-005);
    color: var(--color-secondary-06);
}
.tag.point {
    background-color: var(--color-point-005);
    color: var(--color-point-06);
}
.tag.warning {
    background-color: var(--color-warning-005);
    color: var(--color-warning-06);
}
.tag.disabled {
    background-color: var(--color-005);
}
.tag.border {
    background-color: transparent;
    border: var(--border);
    border-color: var(--color-primary);
    color: var(--color-primary);
    height: calc(var(--button-size-small) + var(--border-width) * 2);
}
.tag .remove,
.exitButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--article-bg-color);
    width: var(--padding-14);
    height: var(--padding-14);
    border-radius: var(--padding-14);
    color: var(--color-111);
    box-shadow: var(--button-shadow);
}
.tag .exitIco {
    color: var(--font-color);
}
.tag .remove {
    position: absolute;
    right:calc(0px - var(--padding-14) / 2);top: calc(0px - var(--border-width));
}
.buttonDesign,
.selectDesign,
.textareaDesign,
.inputDesign {
    display: flex;
    /* align-items: baseline; */
    align-items: center;
    border: var(--border);
    height: var(--button-size-normal);
    padding: var(--padding-10) var(--content-padding);
    gap:var(--content-spacing);
    border-radius: var(--padding-3);
    font-size: var(--input-font-size);
    position: relative;
}
.inputDesign {
    overflow: hidden;
}
.buttonDesign {
    align-items: center;
    padding: var(--content-padding) var(--article-padding);
    text-align: center;
    justify-content: center;
}

.buttonDesign:hover {
    background-color: var(--color-005);
    transition: all .3s;
}
.buttonDesign.full {
    width: 100%;
}
.buttonDesign.primary {
    background-color: var(--color-primary-095);
    color: var(--article-bg-color);
    border: none;
}
.buttonDesign.yellow {
    background-color: var(--kakao-yellow);
}
.buttonDesign.primary:hover {
    background-color: var(--color-primary);
}
.buttonDesign.noBorder {
    border-color: transparent;
}
.buttonDesign.secondary {
    border-color: var(--color-primary-06);
    color: var(--color-primary-06);
}
.buttonDesign.secondary:hover {
    background-color: var(--color-primary-005);
}
.buttonDesign.point {
    border-color: var(--color-point-06);
    color: var(--color-point-06);
}
.buttonDesign.point:hover {
    background-color: var(--color-point-005);
}
.buttonDesign.tertiary {
    /* border-color: var(--color-04);
    color: var(--color-06); */
}
.buttonDesign.small,
.selectDesign.small,
.inputDesign.small {
    height: var(--button-size-small);
    gap:var(--padding-5);
    padding: var(--padding-5) var(--content-padding);
    border-radius: calc(var(--border-width)* 2);
}
.selectDesign.low,
.inputDesign.low {
    height: var(--button-size-middle);
}
.selectDesign.small,
.inputDesign.small {
    height: var(--button-size-small);
}
.buttonDesign.small {
    font-size: var(--font-12);
}
.buttonDesign.low {
    height: var(--button-size-middle);
    gap:var(--padding-8);
    padding: var(--padding-8) var(--content-padding);
    border-radius: var(--padding-4);
    font-size: var(--font-15);
}
.selectDesign.big,
.inputDesign.big,
.buttonDesign.big {
    height: var(--button-size-big);
}
.buttonDesign.round {
    border-radius: var(--button-size-normal);
}
.textareaDesign {
    height: calc(var(--padding-100) * 2);
    overflow: auto;
}
.textareaDesign textarea,
.selectDesign .selectBtn,
.inputDesign input {
    border: none;
    height: 100%;
    flex: 1;
    width: 100%;
}
.inputDesign.noBorder {
    border-color: transparent;
}
.textareaDesign textarea:focus,
.inputDesign input:focus {
    border: none !important;
    box-shadow: none !important;
}
.inputDesign.right input {
    text-align: right;
}
.inputDesign .unit,
.inputDesign .button {
    flex: none;
}
.inputTitle {
    line-height: 1;
}
.inputGroup {
    display: flex;
    flex-direction: column;
    gap:var(--content-spacing)
}
.inputAlert {
    font-size: var(--input-font-size);
    color: var(--disabled-font-color);
}
.inputAlert.right {
    text-align: right;
}

.img.profileImg {
    background-color: var(--color-111);
    border-radius: 50%;
    border: var(--border);
    flex: none;
}


label .buttonDesign {
    padding-top: 0;
    padding-bottom: 0;
    /* width: var(--button-size-normal); */
    height: var(--button-size-normal);
    line-height: 0;
}

.refreshButton {
    display: flex;
    align-items: center;
    gap: var(--checkbox-spacing);
    white-space: nowrap;
}
.refreshIco {
    display: block;
    width: var(--ico-size);
    height: var(--ico-size);
    position: relative;
    left:0;top:0;
}
.refreshIco::before {
    display: block;
    content: '';
    position: absolute;
    left:0;top:0;
    padding: 50%;
    border: var(--border);
    border-color: currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}
.refreshIco::after {
    display: block;
    content: '';
    position: absolute;
    left:50%;top:50%;
    width: 33.333%;
    height: 33.333%;
    transform: translate(100%,-133.333%);
    border-right: var(--border);
    border-bottom: var(--border);
    border-color: currentColor;
}
.refreshButton:hover .refreshIco {
    transform: rotate(360deg);
}
.likeIco {
    fill: none;
    stroke: var(--color-point);
    stroke-width: 6px;
    stroke-linejoin: round;
    opacity: 0.6;
}
label:hover .likeIco,
button:hover .likeIco,
a:hover .likeIco,
.likeIco:hover {
    opacity: 1;
}
:checked + .likeIco {
    fill: var(--color-point);
}


[class*='Ico'],
[class*='Ico']::before,
[class*='Ico']::after {
    transition: all .15s;
}
button:hover [class*='Ico'],
a:hover [class*='Ico'],
button:hover [class*='Ico']::before,
a:hover [class*='Ico']::before,
button:hover [class*='Ico']::after,
a:hover [class*='Ico']::after {
    transition: all .45s;
}