@charset "utf-8";

/* 게시판 공통 레이아웃 영역 */
.board {gap: 80px !important;
    & .board-title {text-align: center;
        & p {font-size: 36px;font-weight: 700;margin: 0 0 24px;
            & strong {font-weight: 700; color: var(--point-color1);}
            & br {display: none;}
        }
        & span {font-size: 18px; color: #999;}
    }
    & .board-list {flex: 1;
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
            > li {
                & a {position: relative; display: flex; flex-direction: column; gap: 24px; background: #eee; padding: 60px 30px 30px; border-radius: 20px; transition: all 0.3s ease;
                    &::after {content: ''; position: absolute; top: 30px; left: 30px; width: 6px; height: 6px; background: var(--point-color1); border-radius: 50%;}
                    & .subject {
                        & span {display: none; font-size: 15px; font-weight: 500; color: #aaa; padding: 0 0 12px;}
                        & p {font-size: 24px; font-weight: 600; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
                    }
                    & .thumb {position: relative; aspect-ratio: 300 / 170; border-radius: 20px; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;}
                    }
                    & .info {display: flex; justify-content: space-between; align-items: center;
                        & p {font-weight: 600; color: #4a4a4a; flex: 1;}
                        & img {width: 18px; transition: all 0.3s ease;}
                    }
                    &:hover {background: var(--point-color1); box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
                        &::after {background: #fff; }
                        & .subject {
                            & span {color: #fff;}
                            & p {color: #fff;}
                        }
                        & .thumb {
                            & img {transform: translate(-50%, -50%) scale(1.1);}
                        }
                        & .info {
                            & p {color: #fff;}
                            & img {transform: rotate(90deg); filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(95deg) brightness(105%) contrast(103%);}
                        }
                    }
                }
            }
        }
    }
    & .board-gallery {
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
            > li {position: relative; border-radius: 12px; overflow: hidden;
                & a {position: relative; display: block; aspect-ratio: 1 / 1;
                    & .thumb {position: relative; width: 100%; height: 100%;
                        & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;}
                    }
                    & .overlay {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 40px 40px 120px; opacity: 0; pointer-events: none; transition: all 0.3s ease;
                        & p {font-size: 24px; font-weight: 600; color: #fff; border-bottom: 1px solid #fff; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; padding: 0 0 6px;}
                        & span {display: block; font-size: 15px; font-weight: 500; color: #fff; padding: 6px 0 0;}
                        & i {position: absolute; bottom: 40px; right: 40px; width: 60px; height: 60px; background-color: var(--point-color1); background-image: url("/images/main/ico-cart.svg"); background-repeat: no-repeat; background-size: 30px; background-position: center; border-radius: 50%; transition: all 0.1s ease;
                            &:hover {background-size: 26px;}
                        }
                    }
                    &:hover {
                        & .thumb {
                            & img {filter: blur(6px);}
                        }
                        & .overlay {opacity: 1; pointer-events: visible;}
                    }
                }
            }
        }
    }
    & .board-detail {
        & .subject {border-bottom: 1px solid #eee; padding: 0 0 36px;
            & p {font-size: 2rem; font-weight: 700; padding: 0 0 12px;}
            & span {font-size: 15px; color: #999;}
        }
        & .con {padding: 36px;}
        & .nav {border-top: 1px solid #eee;
            & a {display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee;
                & strong {flex: 1; text-align: center; white-space: nowrap;}
                & p {flex: 8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 20px; color: #666;}
                & span {flex: 1; text-align: center; font-weight: 500; white-space: nowrap;}
            }
        }
    }
    & .board-util {
        & .pg {
            > ul {display: flex; justify-content: center; gap: 12px;
                > li {
                    & a {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f9f9f9;
                        & p {font-size: 15px; font-weight: 700; color: #aaa;}
                    }
                    &.on {
                        & a {background: var(--point-color1);
                            & p {color: #fff;}
                        }
                        &:hover {
                            & a {background: var(--point-color1);}
                        }
                    }
                    &:hover {
                        & a {background: #f1f1f1;}
                    }
                }
            }
        }
    }
    & .inquiry {
        & .inquiry-form {border: 1px solid #eee; padding: 24px; border-radius: 8px;
            > ul {display: flex; flex-direction: column; gap: 24px;
                > li {display: flex; gap: 24px;
                    & .box {display: flex; flex-direction: column; gap: 8px; flex: 1;
                        & .cate {
                            & p {position: relative; display: inline-block; font-size: 16px; font-weight: 700; color: #444; padding: 0 12px 0 0;}
                            &.essential p::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background:#fb2c36}
                        }
                        & .desc {
                            &.upload {display: flex; flex-direction: column; gap: 8px;}
                            & select {width: 100%; font-size: 15px; font-weight: 500; padding: 6px 12px; border: 1px solid #eee; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("/images/common/arrow-down.svg"); background-repeat: no-repeat; background-size: 14px; background-position: top 50% right 12px; border-radius: 4px; transition: all 0.3s ease;
                                &:focus {border: 1px solid var(--point-color1); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03); outline: none;}
                            }
                            & input[type="text"] {width: 100%; font-size: 15px; font-weight: 500; padding: 6px 12px; border: 1px solid #eee; border-radius: 4px; transition: all 0.3s ease;
                                &:focus {border: 1px solid var(--point-color1); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03); outline: none;}
                            }
                            & textarea {width: 100%; font-size: 15px; font-weight: 500; padding: 6px 12px; border: 1px solid #eee; border-radius: 4px; resize: none; transition: all 0.3s ease;
                                &:focus {border: 1px solid var(--point-color1); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03); outline: none;}
                            }
                            & .file-box {
                                & button {display: flex; align-items: center; width: 100%; padding: 12px; border: 1px dashed #eee; background: #f7f7f7; border-radius: 4px; gap: 12px;
                                    & p {font-size: 14px; font-weight: 500; background: #fff; border-radius: 4px; border: 1px solid #eee; padding: 6px 12px;}
                                    & span {font-size: 15px; color: #aaa;}
                                    &:hover {border: 1px dashed var(--point-color1); background: #f9f9f9;}
                                }
                                & input[type="file"] {display: none;}
                            }
                        }
                        & .guide {
                            & p {font-size: 14px; color: #999;}
                        }
                        & .agree {display: flex; flex-direction: column; gap: 24px; padding: 12px 24px; border: 1px dashed #eee; background: #f7f7f7; border-radius: 4px; height: 180px; overflow-y: scroll;
                            & p {font-size: 14px; font-weight: 500; line-height: 1.8;}
                            > dl {
                                & dt {font-size: 14px; font-weight: 700; line-height: 1.8;}
                                & dd {font-size: 14px; line-height: 1.8;}
                            }
                        }
                        & .ck {display: flex; align-items: center; gap: 8px;
                            & input[type="checkbox"] {width: 16px; height: 16px;}
                            & label {font-size: 14px; color: #666;}
                        }
                        & .sbm {flex: 1;
                            & button {width: 100%; height: 40px; font-size: 15px; font-weight: 600; background: var(--point-color1); color: #fff; text-align: center; border-radius: 4px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .board-title {
            & p {font-size: 30px;}
            & span {font-size: 16px;}
        }
        & .board-list {
            & > ul {grid-template-columns: repeat(3, minmax(0, 1fr));
                & > li {
                    & a {
                        & .subject p {font-size: 20px;}
                    }
                }
            }
        }
        & .board-gallery {
            & > ul {
                & > li {
                    & a {
                        & .overlay {padding: 24px;
                            & p {font-size: 18px; line-height: 1.6;}
                            & i {display: none;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {gap: 48px !important;
        & .board-title {
            & p {font-size: 24px;
                & br {display: block;}
            }
            & span {font-size: 15px;}
        }
        & .board-list {
            & > ul {
                & > li {
                    & a {padding: 24px;
                        &::after {content: none;}
                        & .subject span {font-size: 14px;}
                        & .subject p {font-size: 18px;}
                        & .info p {font-size: 14px;}
                        & .info img {width: 14px;}
                    }
                }
            }
        }
        & .board-gallery {
            > ul {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
                > li {
                    &:nth-child(7) {display: none;}
                    &:nth-child(8) {display: none;}
                    & a .overlay {
                        & p {font-size: 16px; line-height: 1.8;}
                        & span {font-size: 14px;}
                    }
                }
            }
        }
        & .board-detail {
            & .subject {padding: 0 0 20px;
                & p {font-size: 18px; padding: 0 0 6px;}
                & span {font-size: 14px;}
            }
            & .con {padding: 20px;}
            & .nav {
                & a {padding: 12px 0;
                    & strong {font-size: 14px;}
                    & p {font-size: 14px; flex: 6;}
                    & span {font-size: 14px;}
                }
            }
        }
        & .inquiry {
            & .inquiry-form {padding: 16px;
                & > ul {gap: 16px;
                    & > li {flex-direction: column; gap: 16px;
                        & .box {
                            & .cate {
                                & p {font-size: 14px;}
                            }
                            & .desc {
                                & select {font-size: 14px;}
                                & input[type="text"] {font-size: 14px;}
                                & textarea {font-size: 14px;}
                                & .file-box {
                                    & button {padding: 8px;
                                        & p {font-size: 12px;}
                                        & span {font-size: 12px;}
                                    }
                                }
                            }
                            & .guide {
                                & p {font-size: 12px;}
                            }
                            & .sbm {
                                & button {font-size: 14px; height: 36px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .board-list {
            & > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                > li a .thumb {aspect-ratio: 300 / 100;}
            }
        }
        & .board-gallery {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                > li:nth-child(5) {display: none;}
                > li:nth-child(6) {display: none;}
            }
        }
        & .board-util {
            & .pg > ul {gap: 8px;
                > li > a {width: 32px; height: 32px;
                    & p {font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 460px) {gap: 36px !important;
        & .board-title {
            & span br {display: none;}
        }
        & .board-list {
            & > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
        }
        & .board-gallery {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                > li a {aspect-ratio: 2 / 1;}
            }
        }
        & .board-util {
            & .pg > ul > li > a {width: 28px; height: 28px;
                & p {font-size: 12px;}
            }
        }
    }
}

/* Reponsive Point */
@media (width <= 1280px) {}
@media (width <= 1024px) {}
@media (width <= 860px) {}
@media (width <= 640px) {}
@media (width <= 460px) {}