@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* common */
html {
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    color: #434343;
    line-height: 1.5;
    scroll-behavior: smooth;
    overflow-x: hidden;
    word-break: keep-all;
}

html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, menu, a {
    margin: 0;
    padding: 0;
}

header, nav, article, section, footer, address, aside {
    display: block;
}

b, strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

img, fieldset {
    border: 0;
}

ul, ol, menu {
    list-style: none;
}

em, address {
    font-style: normal;
}

a {
    text-decoration: none;
    color: #5E5E65;
}

a:hover, a:active {
    text-decoration: underline;
}

.check-box {
    display: block;
    position: relative;
    padding-left: 2.5rem;
    cursor: pointer;
    font-size: 1rem;
    color:#434343;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
    background-color: #fff;
    border:1px solid #D9D9D9;
    box-sizing: border-box;
}

.check-box:hover input ~ .checkmark {
    border-color: #000;
}

.check-box input:checked ~ .checkmark {
    background-color: #FF4E1C;
    border:none;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-box input:checked ~ .checkmark:after {
    display: block;
}

.check-box .checkmark:after {
    left: 0.5rem;
    top: 0.25rem;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#main-container{
}
/* title */
.header-area{
    max-width: 480px;
    margin:0 auto 3rem;
}
.header-area h2{
    text-align:center;
    font-size:3.75rem;
    margin-bottom: 1.5rem;
    line-height:1;
}

/* search */
.search-box{
    border:1px solid #DBDBDB;
    padding:1rem;
    margin-bottom:0.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.search-box input{
    border:none;
    font-size:1.125rem;
    flex-grow:1;
    height:2rem;
    margin-right:1rem;
}
.search-box button{
    border:none;
    text-indent:-9999px;
    width:1.5rem;
    height:1.5rem;
    background:url('../images/color/search.png') no-repeat 0 0;
    background-size: contain;
    cursor: pointer;
}
#search-container p{
    text-align:center;
    color:#8D8D8D;
    font-size:0.75rem;
}

/* category option*/
#category-filter{
    display:flex;
    flex-wrap: wrap;
    gap:1rem 0;
    margin-bottom:3rem;
}
#category-filter label{
    width:calc(25% - 2.5rem);
}

/*컬러리스트*/
#color-list{
    border:1px solid #D9D9D9;
    height:22.5rem;
    overflow:auto;
    display:flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap:1px;
    margin-bottom:1rem;
}
.color-list-area{
    margin-bottom:1.5rem;
}
.color-list-area > p{
    color: #656565;
    font-size:0.75rem;
}

.color-box {
    width: 3.125rem;
    height: 3.125rem;
    display: block;
    cursor: pointer;
}
.color-box:active{
    border:2px solid #FF4E1C;
    box-sizing: border-box;
}

.color-detail-area{
    margin-bottom:3rem;
}
.detail-box{
    border: 1px solid #D9D9D9;
    height:7.5rem;
    display:flex;
    overflow:hidden;
}
.detail-box .detail-color{
    width:65%;
    flex-grow: 0;
    flex-shrink: 0;
}
.detail-box .detail-info{
    padding:1rem 1.5rem;
}
.detail-box .detail-info b{
    display:block;
}
.detail-box .detail-info span{
    display:block;
    font-size:0.875rem;
    margin-bottom:1rem;
}
.detail-box .detail-info input{
    width:1px;
    height:1px;
    border:none;
    position:absolute;
    top:-300px;
}
.color-detail-area .detail-box.reset .detail-info{
    visibility: hidden;
}
.btn-copy{
    display:inline-block;
    font-size:0.75rem;
    border:none;
    background-color:#e9e9e9;
    padding:0.3rem 0.5rem;
    border-radius: 72px;
    cursor: pointer;
}
.btn-copy:hover{
    background-color:#000;
    color:#fff;
    text-decoration:none;
}
.color-recent-area{
    margin-bottom:3rem;
}
.color-recent-area .titles{
    display:flex;
    justify-content: space-between;
    margin-bottom:1.5rem;
}
.color-recent-area .titles h3{
    font-size:1.5rem;

}
.color-recent-area .titles button{
    font-size:0.75rem;
    cursor: pointer;
    background-color:transparent;
    border:none;
    background: url('../images/color/reset.png') no-repeat right center;
    background-size:0.75rem;
    padding-right:1rem;
    color:#434343;
}
.color-recent-area ul{
    display:flex;
    gap:1rem;
}
.color-recent-area ul li{
    width:50%;
}

.color-recent-area .detail-box .detail-color{
    width:7.5rem;
}
.color-recent-area .detail-box.reset{
    visibility: hidden;
}
/**/
.color-calc h3{
    font-size:1.5rem;
    margin-bottom:1rem;
}
.calc-body{
    display:flex;
    gap:1.5rem;
    margin-bottom:1rem;
}
.calc-body > img{
    width:10.4375rem;
    flex-grow: 0;
}
.calc-body .form{
    flex-grow: 1;
    margin-top:0.875rem;
}
.calc-body .form form{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:0.5rem;
}
.calc-body .form form > div{
    display:flex;
    align-items: center;
    width:35%;
    gap:0.5rem;
}
.calc-body .form form input{
    height:2.5rem;
    width:100%;
    border: 1px solid #D9D9D9;
    text-align:center
}
.calc-body .form form > span{
    color:#ABABAB;
    font-size:0.75rem;
}
.calc-body .form form button{
    height:2.5rem;
    width:18%;
    border:none;
    background-color:#656565;
    color:#fff;
    font-weight:bold;
    font-size:0.875rem;
    cursor:pointer;
}
.calc-body .form form button:hover{
    background-color:#000
}

.calc-body .calc-result{
    border:1px solid #D9D9D9;
    padding:1.5rem 1.875rem;
    font-size:0.875rem;
    color:#656565;
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.calc-body .calc-result > div{
    display:flex;
    gap:0.5rem;
}
.calc-body .calc-result > div span{
    width:15rem;
    border-bottom:1px solid #656565;
    text-align:center;
}

.calc-info{
    list-style-type: disc;
    color:#656565;
    font-size:0.75rem;
    margin-left:1rem;
}


/* mobile */

@media screen and (max-width: 639px) {
    html {
        font-size: 14px;
    }
    #category-filter {
        gap: 1rem 0;
    }
    #category-filter label {
        width: 50%;
        box-sizing: border-box;
    }
    .detail-box .detail-color {
        width: 7.5rem;
    }
    .color-detail-area .detail-box .detail-color {
        width: 55%;
    }
    .color-recent-area ul {
        flex-direction: column;
        gap: 1rem;
    }
    .color-recent-area ul li {
        width: 100%;
    }




    .calc-body{
        gap:1rem;
        position:relative;
    }
    .calc-body > img{
        width:100px;
        height:100px
    }
    .calc-body .form{
        margin-top:22px;
        padding-bottom:106px;
    }
    .calc-body .form form{
        position:relative;
        margin-bottom: 50px;
    }
    .calc-body .form form > div{
        width:43%;
        gap:0.5rem;
    }
    .calc-body .form form button{
        position:absolute;
        top:42px;
        left:0;
        height:2.5rem;
        width:100%;
    }
    .calc-body .calc-result{
        position: absolute;
        left:0;
        top:115px;
        box-sizing: border-box;
        width:100%;
    }
    .calc-body .calc-result > div span {
        width: 120px;
    }


}