/**************************************************
    basic reset
**************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
body {
    box-sizing: border-box;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


.puzzle-deteil{
    text-align:center;
}

.puzzle-deteil-label{
    display:inline-block;
    font-size: 18px;
}

.title-bar{
    width:90%; 
    height:65px; 
    margin:30px 5px 5px 5px; 
    padding:1px; 
    border:none; 
    background-color: #fff;
}

.puzzle-menual-popup{
    position: fixed;  
    width:100%; 
    height:100%; 
    margin:0px; 
    padding:0; 
    background-color:#fff; 
    z-index: 99; 
    display: none;
}

.puzzle-setting-popup{
    position: fixed;  
    width:100%; 
    height:100%; 
    margin:0px; 
    padding:0; 
    background-color:#fff; 
    z-index: 99; 
    display: none;
}

.setting-popup-button{
    width:90%; 
    height:40px; 
    margin:15px 5px 15px 5px; 
    padding:5px; 
    border:none; 
    background-color: #fff;
}

.setting-popup-button:hover {
    background-color: #eee;
}

.menu-btn:hover {
    /*background-color: #eee;*/
    transform: scale(1.1);
}

.close-popup-button{
    width:90%; 
    height:25px; 
    margin:5px; 
    padding:5px; 
    border:none; 
    background-color: #fff;
}

.close-popup-button:hover {
    background-color: #eee;
}

.close-menual-popup-button{
    width:90%; 
    height:25px; 
    margin:5px; 
    padding:5px; 
    border:none; 
    background-color: #fff;
}

.close-menual-popup-button:hover {
    background-color: #eee;
}

.puzzle-setting-popup-wall{
    width:90%; 
    height:2px; 
    background-color:#ddd;
}

.puzzle-blind{
    position: absolute; 
    width:100%; 
    height:100%; 
    z-index: 99;
}

.puzzle-box{
    min-height:320px; 
    display: flex; 
    margin:auto; 
    align-items: center;
}

.puzzle-setting{ 
    width:100%; 
    height:50px; 
    margin: 10px 0 0 0; 
    align-content: center;
}

.restart-btn{
    width:90%; 
    height:50px; 
    margin:30px 5px 5px 5px; 
    border: 1px solid #ddd;
}

.solved-box{
    padding: 0px; 
    align-content: center;
}


/**************************************************
    small screens and up
**************************************************/

@media only screen {

    /*
         base typography
    */
    body {
        background: #fff;
        font-family: 'Quicksand', sans-serif;
        color: #777;
        font-size: 16px;
        line-height: 19px;
        overflow-y: scroll;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #333;
        margin: 0 0 16px 0;
        font-weight: 500;
        text-transform: lowercase;
    }

    h1 {
        font-size: 32px;
        line-height: 32px;
    }

    a {
        color: #0081c6;
    }

    a:hover, a:focus {
        color: #30a1e6;
    }

    select {
        font-family: 'Quicksand', sans-serif;
        padding: 0.6em 0.5em;
        border: 1px solid #ddd;
    }

    button, .button {
        font-family: 'Quicksand', sans-serif;
    }

    /*
        site header
    */
    #site-header {
        background: #f4f4f4;
        padding: 10px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #site-header h1 {
        margin: 0;
    }

    #site-header .icon svg path {
        fill: #bababa;
        transition: fill 0.2s;
    }

    #site-header .icon:hover svg path {
        fill: #aaa;
    }

    #site-header .definition {
        padding: 0 20px;
        margin-left: auto;
    }

    /*
        content
    */
    main {
        padding: 20px;
    }

    .wrapper {
        display: grid;
        grid-template-columns: [col] 1fr;
        grid-template-rows: [row] auto [row] auto [row];
        grid-gap: 30px;
    }

    .generate-controls {
        background: #f4f4f4;
        padding: 20px;
    }

    .puzzle {
        overflow: auto;
    }

    /* 스크롤바의 폭 너비 */
    .scrollbar::-webkit-scrollbar {
        width: 10px;  
    }

    .scrollbar::-webkit-scrollbar-thumb {
        background: #ddd; /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 둥근 테두리 */
    }

    .scrollbar::-webkit-scrollbar-track {
        background: rgba(220, 20, 60, 0);  /*스크롤바 뒷 배경 색상*/
    }

    /*
        gui
    */
    .nonogram-console {
        background: #f4f4f4;
    }
    [data-nonogram-game-controls] .shortcuts { display: none; }

}


/**************************************************
    medium screens - min-width 641px
**************************************************/

@media only screen and (min-width: 40.063em) {

    /*
        site header
    */
    #site-header h1 {
        font-size: 32px;
        line-height: 32px;
    }

    /*
        content
    */
    main {
        padding: 20px;
    }

    /*
        gui
    */
    .nonogram-console {
        padding: 20px;
    }
}


/**************************************************
    large screens - min-width 1025px
**************************************************/