/*
 * ============================================================
 * SONG.BANSUK.OR.KR
 * 공통 사이트 디자인
 * 원격제어 본체 기능/배치는 변경하지 않음
 * ============================================================
 */

:root {
    --song-bg: #f5f6f8;
    --song-card: #ffffff;
    --song-text: #202124;
    --song-sub: #6b7280;
    --song-line: #e5e7eb;
    --song-dark: #222222;
    --song-light: #f1f3f5;
    --song-radius: 12px;
}


/*
 * ============================================================
 * Gnuboard 일반 페이지
 * ============================================================
 */

#wrapper {
    background: var(--song-bg);
}

#container {
    float: none !important;
    width: auto !important;
    max-width: 1100px;
    min-height: 500px;

    margin-left: auto !important;
    margin-right: auto !important;

    padding:
        24px
        16px
        145px !important;

    box-sizing: border-box;
}


/*
 * 페이지 제목
 */

#container_title {
    position: relative !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 0 18px !important;
    padding: 0 0 14px !important;

    border: 0 !important;
    border-bottom: 1px solid var(--song-line) !important;

    background: transparent !important;

    color: var(--song-text) !important;

    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}


/*
 * ============================================================
 * 기본 입력창 통일
 * ============================================================
 */

#container input[type="text"],
#container input[type="password"],
#container input[type="email"],
#container input[type="tel"],
#container input[type="number"],
#container input[type="date"],
#container input[type="time"],
#container select,
#container textarea {

    max-width: 100%;

    border: 1px solid #d1d5db !important;

    border-radius: 8px !important;

    background: #fff !important;

    box-sizing: border-box;

    font-size: 14px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


#container input[type="text"]:focus,
#container input[type="password"]:focus,
#container input[type="email"]:focus,
#container input[type="tel"]:focus,
#container input[type="number"]:focus,
#container select:focus,
#container textarea:focus {

    border-color: #777 !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px
        rgba(0,0,0,.06);
}


/*
 * ============================================================
 * 버튼 통일
 * ============================================================
 */

#container .btn_submit,
#container .btn_b01,
#container .btn_b02,
#container .btn_cancel,
#container a.btn_b01,
#container a.btn_b02 {

    border-radius: 8px !important;

    box-sizing: border-box;

    font-weight: 700;

    text-decoration: none;
}


#container .btn_submit {

    border: 1px solid var(--song-dark) !important;

    background: var(--song-dark) !important;

    color: #fff !important;
}


#container .btn_cancel,
#container .btn_b01 {

    border: 1px solid #d1d5db !important;

    background: #fff !important;

    color: #333 !important;
}


/*
 * ============================================================
 * 로그인
 * ============================================================
 */

#mb_login {

    max-width: 500px !important;

    margin:
        25px
        auto
        40px !important;

    padding: 28px !important;

    border: 1px solid var(--song-line) !important;

    border-radius: var(--song-radius) !important;

    background: var(--song-card);

    box-shadow:
        0 3px 15px
        rgba(0,0,0,.04);
}


#mb_login h1,
#mb_login h2 {

    margin-top: 0;

    color: var(--song-text);

    font-size: 22px;

    font-weight: 800;
}


#mb_login input[type="text"],
#mb_login input[type="password"] {

    width: 100% !important;

    min-height: 46px;

    padding-left: 12px !important;
    padding-right: 12px !important;
}


#mb_login .btn_submit {

    width: 100%;

    min-height: 46px;

    margin-top: 8px;

    font-size: 15px;
}


/*
 * ============================================================
 * 회원가입 / 정보수정
 * ============================================================
 */

#fregister,
#register_form,
#fregisterform,
.register {

    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


#fregisterform {

    padding: 22px;

    border: 1px solid var(--song-line);

    border-radius: var(--song-radius);

    background: var(--song-card);

    box-sizing: border-box;
}


#fregisterform h2 {

    margin-top: 0;

    font-size: 18px;

    color: var(--song-text);
}


#fregisterform .tbl_frm01 {

    border-top: 0 !important;
}


#fregisterform .tbl_frm01 th {

    background: #f8f9fa !important;

    color: #444;
}


#fregisterform .tbl_frm01 td {

    background: #fff;
}


#fregisterform input[type="text"],
#fregisterform input[type="password"],
#fregisterform input[type="email"],
#fregisterform input[type="tel"],
#fregisterform select {

    min-height: 42px;
}


/*
 * ============================================================
 * 회원 정보 확인
 * ============================================================
 */

#mb_confirm {

    max-width: 520px;

    margin:
        30px
        auto;

    padding: 25px;

    border: 1px solid var(--song-line);

    border-radius: var(--song-radius);

    background: #fff;

    box-sizing: border-box;
}


/*
 * ============================================================
 * 공지사항
 * ============================================================
 */

#bo_list,
#bo_v,
#bo_w {

    box-sizing: border-box;
}


#bo_list .tbl_head01,
#bo_v,
#bo_w {

    box-shadow:
        0 2px 12px
        rgba(0,0,0,.025);
}


/*
 * 공지 작성 버튼과 일반 버튼 통일
 */

#bo_btn_top a {

    text-decoration: none;
}


/*
 * ============================================================
 * 비공개 문의
 * ============================================================
 */

.inquiry-wrap {

    max-width: 1000px !important;

    margin-top: 0 !important;
}


.inquiry-box,
.inquiry-table {

    box-shadow:
        0 2px 12px
        rgba(0,0,0,.025);
}


.inquiry-btn {

    border-radius: 8px !important;

    font-weight: 700;
}


/*
 * ============================================================
 * 하단 고정 메뉴 미세조정
 * ============================================================
 */

.song-site-nav {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}


.song-site-menu a {

    transition:
        background .15s ease,
        transform .1s ease;
}


.song-site-menu a:active {

    transform: translateY(1px);
}


/*
 * ============================================================
 * 모바일
 * ============================================================
 */

@media (max-width: 700px) {

    #container {

        padding:
            14px
            8px
            165px !important;
    }


    #container_title {

        margin:
            0
            4px
            12px !important;

        padding-bottom: 10px !important;

        font-size: 20px !important;
    }


    #mb_login {

        margin:
            10px
            4px
            25px !important;

        padding: 20px 15px !important;
    }


    #fregisterform {

        padding: 14px 10px;

        border-radius: 9px;
    }


    #fregisterform .tbl_frm01,
    #fregisterform .tbl_frm01 tbody,
    #fregisterform .tbl_frm01 tr,
    #fregisterform .tbl_frm01 th,
    #fregisterform .tbl_frm01 td {

        display: block;

        width: 100% !important;

        box-sizing: border-box;
    }


    #fregisterform .tbl_frm01 th {

        padding:
            10px
            8px
            3px !important;

        border: 0 !important;

        background: #fff !important;

        text-align: left;
    }


    #fregisterform .tbl_frm01 td {

        padding:
            5px
            8px
            12px !important;

        border: 0 !important;
        border-bottom:
            1px solid
            #f0f0f0 !important;
    }


    #fregisterform input[type="text"],
    #fregisterform input[type="password"],
    #fregisterform input[type="email"],
    #fregisterform input[type="tel"],
    #fregisterform select {

        width: 100% !important;
    }


    #mb_confirm {

        margin:
            12px
            4px;

        padding: 18px 14px;
    }
}

/* SONG COMMON DESIGN END */