@charset "utf-8";

/* board */
.board {
    & .board-head {display: flex; flex-direction: column; gap: 36px; margin: 0 0 24px;
        & .board-cate {display: flex; flex-direction: column; gap: 8px;
            > ul {display: flex; gap: 8px;
                > li {
                    & a {display: block; font-size: 15px; font-weight: 500; color: #adb5bd; padding: 9px 18px; border-radius: 4px; background: #f9fafb;}
                    &.on {
                        & a {color: #fff; background: #181818;}
                    }
                }
            }
        }
        & .board-util {display: flex; justify-content: space-between; align-items: flex-end;
            & .total {
                & p {font-size: 18px;
                    & strong {color: var(--key-color);}
                }
            }
        }
    }
    & .board-body {
        &.board-list {
            & .list {
                > ul {display: flex; flex-direction: column; gap: 24px;
                    > li {border-radius: 12px; box-shadow: var(--key-shadow); outline: 2px solid rgba(255, 255, 255, 0); transition: all 0.3s;
                        & a {display: flex; align-items: center; padding: 24px 36px;
                            & .num {width: 60px;
                                & p {font-size: 30px; font-weight: 700; color: #ddd; transition: all 0.3s;}
                            }
                            & .subject {width: calc(100% - 220px); padding: 0 12px;
                                & p {font-size: 20px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
                            }
                            & .date {position: relative; width: 160px; text-align: right;
                                & p {font-size: 18px; color: #999; transition: all 0.3s;}
                                & i {position: absolute; top: calc(50% + 1px); right: 0; transform: translateY(-50%); font-size: 18px; color: var(--key-color); opacity: 0; pointer-events: none; transition: all 0.3s;}
                            }
                        }
                        &:hover {outline: 2px solid var(--key-color);
                            & a {
                                & .num {
                                    & p {color: var(--key-color);}
                                }
                                & .date {
                                    & p {transform: translateX(-30px);}
                                    & i {opacity: 1;}
                                }
                            }
                        }
                    }
                }
            }
        }
        &.board-detail {
            & .box {border-radius: 12px; box-shadow: var(--key-shadow); padding: 36px;
                & .subject {
                    & p {font-size: 20px; font-weight: 600;}
                }
                & .date {margin: 12px 0;
                    & p {font-weight: 500; color: #999;}
                }
                & .file {display: flex; gap: 8px; margin: 0 0 16px;
                    & a {display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 12px; background: #181818; color: #fff; border-radius: 4px;
                        &:hover {text-decoration: underline; background: var(--key-color);}
                    }
                }
            }
            & .nav {border-radius: 12px; box-shadow: var(--key-shadow); padding: 24px 36px; margin: 24px 0 0;
                & .nav-item {display: flex; align-items: center; gap: 24px; padding: 0 0 16px; border-bottom: 1px solid #eee;
                    &:last-child {padding: 16px 0 0; border-bottom: 0;}
                    & p {width: 100px; color: #999;}
                    & a {display: block; width: calc(100% - 250px); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                    & span {width: 150px; text-align: right;}
                }
            }
        }
        &.inquiry {
            & .box {border-radius: 12px; box-shadow: var(--key-shadow); padding: 36px;
                & .guide {text-align: right;
                    & p {font-size: 14px; font-weight: 500; color: #999;}
                }
                & .list {margin: 12px 0 24px;
                    > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px;
                        > li {
                            &.full {grid-column: 1 / 3;}
                            & .cate {margin: 0 0 12px;
                                & p {font-size: 18px; font-weight: 600;}
                            }
                            & .desc {
                                & input[type="text"] {width: 100%; height: 42px; font-size: 16px; border-radius: 4px; border: 1px solid #eee; padding: 0 12px;}
                                & textarea {width: 100%; font-size: 16px; border-radius: 4px; border: 1px solid #eee; padding: 12px; resize: none;}
                            }
                        }
                    }
                }
                & .agree {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
                    & .agree-check {
                        & input[type="checkbox"] {display: none;}
                        & label {display: flex; align-items: center; gap: 12px;
                            & i {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 4px; font-size: 16px; background: #fff; border: 1px solid #eee; color: #999; transition: all 0.2s;}
                            & p {font-weight: 500;}
                        }
                        & input[type="checkbox"]:checked + label i {background: var(--key-color); color: #fff; border: 1px solid var(--key-color);}
                    }
                    & .agree-more {cursor: pointer;
                        & p {font-size: 15px; color: #999; text-decoration: underline;}
                    }
                    & .agree-txt {display: none; width: 100%; margin: 24px 0 0; max-height: 200px; overflow-y: scroll;
                        > ul {padding: 24px; background: #f9fafb; border-radius: 8px;
                            > li {margin: 0 0 24px;
                                &:last-child {margin: 0;}
                                & p {font-weight: 500; margin: 0 0 8px;}
                                & span {font-size: 15px;}
                            }
                        }
                    }
                }
            }
            & .btn {display: flex; justify-content: center; gap: 12px; margin: 60px 0 0;
                & button {width: 120px; height: 42px; font-size: 16px; font-weight: 500; border-radius: 4px; text-align: center; box-shadow: var(--key-shadow);
                    &.back {background: #f9fafb; color: #999; border: 1px solid #eee;}
                    &.apply {background: var(--key-color); color: #fff;}
                }
            }
        }
        &.faq {
            & .list {border-radius: 12px; box-shadow: var(--key-shadow); overflow: hidden;
                > dl {cursor: pointer;
                    &.on {background: #f9fafb;}
                    > dt {position: relative; padding: 36px;
                        & span {position: absolute; top: 36px; left: 36px; display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-size: 16px; line-height: 1; font-weight: 500; color: #fff; background-color: #464646; border-radius: 50%;}
                        & p {font-size: 18px; line-height: 32px; font-weight: 600; padding: 0 48px;}
                        & i {position: absolute; top: 50%; right: 36px; transform: translateY(-50%); font-size: 18px;}
                    }
                    > dd {display: none; cursor: default; padding: 0 36px 36px;
                        & p {font-size: 18px; cursor: text;}
                    }
                }
            }
        }
    }
    & .board-foot {margin: 60px 0 0;
        & .back {display: flex; justify-content: center;
            & button {font-size: 18px; font-weight: 500; color: #fff; padding: 9px 18px; border-radius: 4px; background: var(--key-color);}
        }
        & .paging {display: flex; justify-content: center; align-items: center; gap: 24px;
            a {color: #aaa;
                & i {font-size: 18px;}
                & p {font-size: 18px; font-weight: 500;}
                &.on {
                    & p {color: #222;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .board-body {
            &.board-list {
                & .list {
                    > ul {gap: 16px;
                        > li {
                            & a {padding: 16px 24px;
                                & .num {width: 40px;
                                    & p {font-size: 20px;}
                                }
                                & .subject {width: calc(100% - 140px);
                                    & p {font-size: 18px;}
                                }
                                & .date {width: 100px;
                                    & p {font-size: 16px;}
                                }
                            }
                        }
                    }
                }
            }
            &.board-detail {
                & .box {padding: 24px;}
                & .nav {padding: 16px 24px;}
            }
            &.inquiry {
                & .box {padding: 24px;
                    & .list {
                        > ul {gap: 24px;}
                    }
                }
            }
            &.faq {
                & .list {
                    > dl {
                        > dt {padding: 24px;
                            & span {top: 24px; left: 24px; width: 20px; height: 20px; font-size: 12px;}
                            & p {font-size: 16px; line-height: 20px; padding: 0 36px;}
                            & i {right: 24px; font-size: 14px;}
                        }
                        > dd {padding: 0 24px 24px;
                            & p {font-size: 16px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .board-head {gap: 16px; margin: 0 0 16px;
            & .board-cate {
                > ul {
                    > li {
                        & a {font-size: 14px; padding: 8px 16px;}
                    }
                }
            }
            & .board-util {align-items: center;
                & .total {
                    & p {font-size: 13px;}
                }
            }
        }
        & .board-body {
            &.board-list {
                & .list {
                    > ul {gap: 12px;
                        > li {
                            & a {justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px 16px;
                                & .num {width: unset; order: 1;
                                    & p {font-size: 14px;}
                                }
                                & .subject {width: 100%; order: 3; padding: 8px 0 0;
                                    & p {font-size: 15px;}
                                }
                                & .date {width: unset; order: 2;
                                    & p {font-size: 14px;}
                                    & i {display: none;}
                                }
                            }
                        }
                    }
                }
            }
            &.board-detail {
                & .box {padding: 24px;
                    & .subject {
                        & p {font-size: 16px;}
                    }
                    & .date {
                        & p {font-size: 14px;}
                    }
                    & .file {
                        & a {font-size: 12px;}
                    }
                }
                & .nav {padding: 12px 16px;
                    & .nav-item {padding: 0 0 12px; gap: 12px;
                        & p {font-size: 14px; line-height: 1; width: 50px;}
                        & a {font-size: 14px; width: calc(100% - 154px);}
                        & span {font-size: 14px; line-height: 1; width: 80px;}
                        &:last-child {padding: 12px 0 0;}
                    }
                }
            }
            &.inquiry {
                & .box {padding: 16px;
                    & .guide {
                        & p {font-size: 12px;}
                    }
                    & .list {margin: 12px 0 16px;
                        > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                            > li {
                                &.full {grid-column: unset;}
                                & .cate {
                                    & p {font-size: 15px;}
                                }
                                & .desc {
                                    & .nice-select {height: 36px; font-size: 15px; line-height: 34px;
                                        & .option {min-height: 36px; line-height: 36px;}
                                        & .list {margin: 4px 0 0;}
                                    }
                                    & input[type="text"] {height: 36px; font-size: 15px;}
                                    & textarea {font-size: 15px;}
                                }
                            }
                        }
                    }
                    & .agree {
                        & .agree-check {
                            & label {gap: 8px;
                                & i {width: 24px; height: 24px; font-size: 12px;}
                                & p {font-size: 14px;}
                            }
                        }
                        & .agree-more {
                            & p {font-size: 12px;}
                        }
                    }
                }
                & .btn {margin: 36px 0 0;
                    & button {width: calc(100% / 2); height: 36px; font-size: 14px;}
                }
            }
            &.faq {
                & .list {
                    > dl {
                        > dt {padding: 16px;
                            & span {display: none;}
                            & p {font-size: 15px; line-height: 1.2; padding: 0 24px 0 0;}
                            & i {right: 16px; font-size: 12px;}
                        }
                        > dd {padding: 0 16px 16px;
                            & p {font-size: 15px; line-height: 1.2;}
                        }
                    }
                }
            }
        }
        & .board-foot {margin: 36px 0 0;
            & .paging {gap: 12px;
                & a {
                    & p {font-size: 14px;}
                    & i {font-size: 16px;}
                }
            }
            & .back {
                & button {font-size: 14px; padding: 8px 24px;}
            }
        }
    }
    @media (width <= 460px) {
        & .board-body {
            &.board-detail {
                & .box {
                    & .file {flex-wrap: wrap; gap: 6px;
                        & a {width: 100%; font-size: 12px;}
                    }
                }
            }
        }
    }
}