@CHARSET "UTF-8";

.content-wrap{
    background-color:#eaeff7;
}

.contents-layout{
    padding-top:30px;
    padding-bottom:30px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    gap:40px;
}

.feed-group{
    width:650px;
    height:fit-content;
}

ul.feed-list{
    width:100%;
    min-height:800px;
    height:fit-content;
    border-radius:15px;
    background-color:#fff;
    padding:0px 20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

li.feed-item{
    padding:20px 0px;
    width:100%;
    display:flex;
    flex-direction:row;
    gap:30px;
    min-height:200px;
}

li.feed-item:not(:first-child){
    border-top:1px solid #bbb;
}

.left-info{
    flex: 1;
    display:flex;
    flex-direction: column;
    gap:5px;
}

.provider-section{
    display:flex;
    flex-direction:row;
    gap:10px;
}

.provider-section .logo{
    width:20px;
    height:20px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    cursor:pointer;
}

.provider-section .provider{
    cursor:pointer;
}

.title-section{
    font-size:20px;
    flex:1;
    cursor:pointer;
}

.right-photo{
    width:200px;
    height:112px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    border-radius:10px;
    cursor:pointer;
}

.loading-placeholder{
    padding-top:10px;
    display:flex;
    align-items:center;
}

.loading-placeholder:not(.hidden) .loading{
  border: 8px solid #f8f8f8;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 50px auto;
}





.util-group{
    width:400px;
    min-height:100px;
    max-height:fit-content;
    border-radius:15px;
    background-color:#fff;
    position:sticky;
    top:60px;
    padding:20px;
}

.util-group-title{
    padding-bottom:40px;
    font-size:17px;
    font-weight:bold;
    width:100%;
    text-align:center;
}


.button-signin{
    color:#fff;
    background-color:rgb(24, 113, 255);
    font-size:17px;
    width:100%;
    height: 40px;
}

.link-signup{
    color: rgb(24, 113, 255);
    font-size: 13px;
    padding:10px 0px 30px 0px;;
    cursor:pointer;
    width: fit-content;
    position:relative;
    left:100%;
    transform:translateX(-100%);
}

.button-signin:active{
    background-color:rgb(12, 102, 246);
}

.button-signin-app{
    background-color:#000000;
    color:#fff;
    background-image:url('/images/app/common/mobile-app.png');
    background-size:20px;
    background-position:5px 10px;
    background-repeat:no-repeat;
    font-size:17px;
    width:100%;
    height: 40px;
}

.util-group.signin-mode>:not(.signin-mode):not(.both-mode){
    display:none;
}
.util-group:not(.signin-mode)>.signin-mode{
    display:none;
}
.height-box.signin-mode{
    height:20px;
}

.signin-mode #account-text-field{
    border-radius: 12px 12px 4px 4px;
}

.signin-mode #account-password-field{
    border-radius: 4px 4px 12px 12px;
    border-top: none;
}

.footer-button-area>div{
    flex: 1 1 0;
}
.desc-app-pass{
    padding:10px;
}

.red-emp{
    color:red;
}

/* 화면 너비가 1100px보다 작을 때(0 ~ 1099px) 적용 */
@media (max-width: 1099px) {
    .util-group{
        display:none;
    }

    .contents-layout{
        width:100vw;
    }
    
    .feed-group{
        width:100%;
        max-width:650px;
        padding:0px 10px;
    }

    .footer-wrap{
        display:none;
    }
}