@charset "utf-8";

@import url(common.css);
@import url(layout.css);
@import url(table.css);
@import url(button.css);
@import url(form.css);
@import url(popup.css);


/* login */
#content.login-page {
    padding:0 var(--home-padding);
    background:#fbfbfb;
    position:relative;
    overflow-x:hidden;
}
#content.login-page::before {
    content:"";
    position:absolute;
    top:10%;
    left:-6rem;
    width:33.2rem;
    height:30rem;
    background:url("../img/log-bg-left.svg") no-repeat center center;
    background-size: contain;
    z-index:0;
}
#content.login-page::after {
    content:"";
    position:absolute;
    top:50%;
    right:-4rem;
    width:27.4rem;
    height:30rem;
    background:url("../img/log-bg-right.svg") no-repeat center center;
    background-size: contain;
    z-index:0;
}
#content.login-page .login-wrap {
    max-width: 116rem;
    margin:0 auto;
    
}
#content.login-page .login-wrap .tab-menu {

}
#content.login-page .login-wrap .tab-menu ul {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
}
#content.login-page .login-wrap .tab-menu ul li {
    display:flex;
    align-items:center;
    gap:3rem;
}
#content.login-page .login-wrap .tab-menu ul li::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1.4rem;
    background:#d9d9d9;
}
#content.login-page .login-wrap .tab-menu ul li:last-child::after {
    display:none;
}
#content.login-page .login-wrap .tab-menu ul li a {
    position:relative;
    display:block;
    font-size:2.4rem;
    color:#666;
}
#content.login-page .login-wrap .tab-menu ul li.current a {
    color:#008a3d;
    font-weight:700;
}
#content.login-page .login-wrap .tab-menu ul li.current a::after {
    display:inline-block;
    content:"";
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    width:100%;
    height:2px;
    background:#008a3d;
}
#content.login-page .login-wrap .tab-menu ul li.current a::before {
    display:inline-block;
    content:"";
    position:absolute;
    bottom:-1.2rem;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:0.6rem solid transparent;
    border-right:0.6rem solid transparent;
    border-top:0.6rem solid var(--ccolor);
}

#content.login-page .login-wrap .tab-content {
    position:relative;
    z-index:1;
    margin-top: 5rem;
    background:#fff;
    padding:6rem;
}

@media (max-width:1025px){
    #content.login-page .login-wrap .tab-menu ul {
        gap:2rem;
    }
    #content.login-page .login-wrap .tab-menu ul li {
        gap:2rem;
    }
    #content.login-page .login-wrap .tab-menu ul li a {
        font-size:2.2rem;
    }
}
@media (max-width:481px){
    #content.login-page .login-wrap .tab-menu ul li a {
        font-size:2rem;
    }
}

/* 공통 */
#content.login-page .login-wrap .tab-content .indiv {
    max-width: 44rem;
    margin:0 auto;
}
#content.login-page .login-wrap .tab-content .tit {
    padding-bottom: 3rem;
}
#content.login-page .login-wrap .tab-content .tit h3 {
    font-size:2.2rem;
    font-weight:700;
    line-height:1.5;
    color:#000;
    word-break: keep-all;
    word-wrap: break-word;  
}
#content.login-page .login-wrap .tab-content .tit h4 {
    font-size:1.8rem;
    line-height:1.5;
    color:#000;
    word-break: keep-all;
    word-wrap: break-word;  
}
#content.login-page .login-wrap .tab-content .tit p {
    font-size:1.6rem;
    line-height:1.5;
    color:#666;
    word-break: keep-all;
    word-wrap: break-word;  
}
#content.login-page .login-wrap .tab-content .f-input {
    height:5.2rem;
    line-height:5.2rem;
}
#content.login-page .login-wrap .tab-content  input[type=password] {
    font-family: 'pretendard', sans-serif;
}
#content.login-page .login-wrap .tab-content .error-msg {
    display:none;
}
#content.login-page .login-wrap .tab-content .error-msg.active {
    display:block;
    margin-top: 2rem;
}
#content.login-page .login-wrap .tab-content .error-msg p {
    font-size:13px;
    line-height:1.5;
    color:#008a3d;
}

/* find */
#content.login-page .login-wrap .tab-content .find-box {
    display:flex;
    align-items:center;
    gap:1.5rem;
}
#content.login-page .login-wrap .tab-content .find-box span {
    display:flex;
    align-items:center;
    gap:1.5rem;
}
#content.login-page .login-wrap .tab-content .find-box span::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1rem;
    background:#d9d9d9;
}
#content.login-page .login-wrap .tab-content .find-box span:last-child::after {
    display:none;
}
#content.login-page .login-wrap .tab-content .find-box a {
    font-size:1.5rem;
    color:#666;
}

@media (max-width:1025px){
    #content.login-page .login-wrap .tab-content .tit h3 {
        font-size:2rem;
    }    
}
@media (max-width:481px){
    #content.login-page .login-wrap .tab-content {
        padding:4rem 3rem;
    }
    #content.login-page .login-wrap .tab-content .tit h3 {
        font-size:1.8rem;
    } 
}



/* 교직원 로그인 */
#content.login-page .login-wrap .tab-content .indiv.faculty {
    max-width: 100%;
}
#content.login-page .login-wrap .tab-content .login-inner {
    display:flex;
    
}
#content.login-page .login-wrap .tab-content .login-inner .left {
    flex:1;
    padding:0 6rem 0 3rem;
}
#content.login-page .login-wrap .tab-content .login-inner .right {
    flex:1;
    padding:0 3rem 0 6rem;
    border-left:solid 1px #e5e5e5;
}
#content.login-page .login-wrap .tab-content .login-inner .tit {
    padding-bottom: 3rem;
}
#content.login-page .login-wrap .tab-content .login-inner .tit h4 {
    font-size:2.2rem;
    line-height:1.5;
    color:#000;
    font-weight: 400;
}
#content.login-page .login-wrap .tab-content .login-inner .tit h4 span {
    font-weight: 600;
}
#content.login-page .login-wrap .tab-content .login-inner .left .login-btn-wrap {
    padding-top: 12rem;
    background:url("../img/passcode-lock-scolor.svg") no-repeat center top;
    background-size: 9.6rem auto;
}
#content.login-page .login-wrap .tab-content .login-inner .right .login-btn-wrap {
    padding-top: 12rem;
    background:url("../img/user-check-01.svg") no-repeat center top;
    background-size: 9.6rem auto;
}

@media (max-width:1025px){
    #content.login-page .login-wrap .tab-content .login-inner {
        flex-direction:column;
        gap:5rem;
    }
    #content.login-page .login-wrap .tab-content .login-inner .tit h4 {
        font-size:2rem;
    }
    #content.login-page .login-wrap .tab-content .login-inner .left {
        padding:0 0;
    }
    #content.login-page .login-wrap .tab-content .login-inner .right {
        padding:0 0;
        border-left:none;
        border-top:solid 1px #e5e5e5;
        padding-top:5rem;
    }
}





/* popup-wrap */
#content.popup-page {
    padding:0 var(--home-padding);
    background:#fbfbfb;
    position:relative;
    overflow-x:hidden;
}
#content.popup-page::before {
    content:"";
    position:absolute;
    top:10%;
    left:-6rem;
    width:33.2rem;
    height:30rem;
    background:url("../img/log-bg-left.svg") no-repeat center center;
    background-size: contain;
    z-index:0;
}
#content.popup-page::after {
    content:"";
    position:absolute;
    top:50%;
    right:-4rem;
    width:27.4rem;
    height:30rem;
    background:url("../img/log-bg-right.svg") no-repeat center center;
    background-size: contain;
    z-index:0;
}
#content.popup-page .popup-wrap {
    max-width: 116rem;
    margin:0 auto;
}




/* join */
#content.join-page {
    padding:0 var(--home-padding);
    background:#fbfbfb;
    position:relative;
    overflow-x:hidden;
}
#content.join-page::before {
    content:"";
    position:absolute;
    top:10%;
    left:-6rem;
    width:33.2rem;
    height:30rem;
    background:url("../img/log-bg-left.svg") no-repeat center center;
    background-size: contain;
    z-index:0;
}
#content.join-page::after {
    content:"";
    position:absolute;
    top:50%;
    right:-4rem;
    width:27.4rem;
    height:30rem;
    background:url("../img/log-bg-right.svg") no-repeat center center;
    background-size: contain;
    z-index:0;
}
#content.join-page .join-wrap {
    max-width: 116rem;
    margin:0 auto;
}

#content.join-page .join-top-step {

}
#content.join-page .join-top-step ul {
    display:flex;
}
#content.join-page .join-top-step ul li {
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    border:solid 1px #e5e5e5;
    padding:2.5rem 2rem;
    background:#fff;
    margin-left: -1px;
    z-index:1;
}
#content.join-page .join-top-step ul li.current {
    border:solid 1px var(--ccolor);
    z-index:2;
}
#content.join-page .join-top-step ul li.current::after {
    content:"";
    position:absolute;
    right:-1.5rem;
    top:50%;    
    width:3rem;
    height:3rem;
    border:solid 1px var(--ccolor);
    transform:translateY(-50%) rotate(45deg);
    background:#fff;
    z-index:1;
}
#content.join-page .join-top-step ul li.current::before {
    content:"";
    position:absolute;
    right:0;
    top:50%;    
    width:3rem;
    height:5rem;
    transform:translateY(-50%);
    background:#fff;
    z-index:2;
}
#content.join-page .join-top-step ul li:last-child.current::after {
    display:none;
}
#content.join-page .join-top-step ul li.step1 {
    border-radius: 1.5rem 0 0 1.5rem;
}
#content.join-page .join-top-step ul li.step3 {
    border-radius: 0 1.5rem 1.5rem 0;
}
#content.join-page .join-top-step ul li span {
    display:block;
    text-align:center;
    padding-top: 4.8rem;
    font-size:1.8rem;
    color:#000;
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;  
}
#content.join-page .join-top-step ul li.step1 span {
    background:url("../img/join-step1.svg") no-repeat center top;
    background-size: 3.6rem auto;
}
#content.join-page .join-top-step ul li.step1.current span {
    background:url("../img/join-step1-on.svg") no-repeat center top;
    background-size: 3.6rem auto;
    color:#008a3d;
}
#content.join-page .join-top-step ul li.step2 span {
    background:url("../img/join-step2.svg") no-repeat center top;
    background-size: 3.6rem auto;
}
#content.join-page .join-top-step ul li.step2.current span {
    background:url("../img/join-step2-on.svg") no-repeat center top;
    background-size: 3.6rem auto;
    color:#008a3d;
}
#content.join-page .join-top-step ul li.step3 span {
    background:url("../img/join-step3.svg") no-repeat center top;
    background-size: 3.6rem auto;
}
#content.join-page .join-top-step ul li.step3.current span {
    background:url("../img/join-step3-on.svg") no-repeat center top;
    background-size: 3.6rem auto;
    color:#008a3d;
}

@media (max-width:620px){
    #content.join-page .join-top-step ul li.current::after {
        right:-1rem;   
        width:2rem;
        height:2rem;
    }
    #content.join-page .join-top-step ul li.current::before {  
        width:2rem;
        height:4rem;
    }

}
@media (max-width:481px){

}


/* 약관동의 */
#content.join-page .agree-box {
    position:relative;
    max-width: 86rem;
    margin:0 auto;
    padding:4rem 6rem;
    background:#fff;
    border-radius: 1.2rem;
    margin-top: 6rem;
    z-index:1;
}
#content.join-page .agree-box .top-tit {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom: 1.5rem;
    border-bottom:solid 1px var(--ccolor);
}
#content.join-page .agree-box .top-tit h3 {
    font-size:2.2rem;
    font-weight:700;
    line-height:1.5;
    color:#000;
}
#content.join-page .agree-box .top-tit .f-check-box input[type=checkbox] + label {
    font-size:1.6rem;
    font-weight:700;
}
#content.join-page .agree-box ul {
    margin-top: 2rem;
    border: solid 1px #e5e5e5;
    border-radius: 0.6rem;
}
#content.join-page .agree-box ul li {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1.5rem 2rem;
    border-bottom:solid 1px #e5e5e5;
}
#content.join-page .agree-box ul li:last-child {
    border-bottom:none;
}
#content.join-page .agree-box ul li .f-check-box input[type=checkbox] + label {
    font-size:1.6rem;
}
#content.join-page .agree-box .desc {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top:dashed 1px #ddd;
}
#content.join-page .agree-box .desc.no-top {
    margin-top:0;
    padding-top:0;
    border-top:none;
}
#content.join-page .agree-box .desc p {
    font-size:1.8rem;
    line-height:1.5;
    color:#000;
    text-align:center;
    word-break: keep-all;
    word-wrap: break-word;  
}
#content.join-page .agree-box .desc p span {
    color:#008a3d;
    font-weight:700;
}

@media (max-width:1025px){
    #content.join-page .agree-box {
        padding:4rem 4rem;
    }
}
@media (max-width:540px){
    #content.join-page .agree-box ul li {
        flex-direction:column;
        align-items:flex-start;
        gap: 2rem;
        padding:2rem 2rem;
    }
    #content.join-page .agree-box ul li button {
        width:100%;
    }
}
@media (max-width:481px){
    #content.join-page .agree-box {
        padding:4rem 2rem;
    }
    #content.join-page .agree-box .top-tit h3 {
        font-size:2rem;
    }    
}






/* 회원정보 입력 */
#content.join-page .join-form-box {    
    position:relative;
    max-width: 86rem;
    margin:0 auto;
    margin-top: 6rem;
    padding:4rem 4rem;
    background:#fff;
    border-radius: 1.2rem;
    z-index:1;
}
#content.join-page .join-form-box .top-tit {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom: 1.5rem;
    border-bottom:solid 1px var(--ccolor);
}
#content.join-page .join-form-box .top-tit.brd-none {
    border-bottom:solid 1px #ccc;
}
#content.join-page .join-form-box .top-tit h3 {
    font-size:2.2rem;
    font-weight:700;
    line-height:1.5;
    color:#000;
}
#content.join-page .join-form-box .top-tit p.nt {
    font-size:1.5rem;
    color:#000;
    word-break: keep-all;
    word-wrap: break-word;  
}
#content.join-page .join-form-box .top-tit p.nt span {
    color:#008a3d;
}

#content.join-page .join-form-box ul.input-list {
    max-width: 56rem;
    margin:0 auto;
    margin-top: 4rem;
}
#content.join-page .join-form-box .input-list li {
    margin-top: 3rem;
}
#content.join-page .join-form-box .input-list li label.tit {
    display:block;
    font-size: 1.5rem;
    color:#000;
    margin-bottom: 1rem;
}
#content.join-page .join-form-box .input-list li label.tit span {
    color:#008a3d;
}
#content.join-page .join-form-box .input-list li .f-input-box .f-input {
    height:5.2rem;
    line-height:5.2rem;
}
#content.join-page .join-form-box .input-list li .f-input-box.max440 {
    max-width: 44rem;
}
#content.join-page .join-form-box .input-list li .select-box select {
    height:5.2rem;
    line-height:5.2rem;
}
#content.join-page .join-form-box .input-list li p.nt {
    font-size:1.5rem;
    color:#000;
    margin-top: 1rem;
    word-break: keep-all;
    word-wrap: break-word;
}
#content.join-page .join-form-box .input-list li p.nt span {
    color:#008a3d;
}

#content.join-page .join-form-box div.nt {
    max-width: 56rem;
    margin:0 auto;
}
#content.join-page .join-form-box div.nt p {
    max-width: 44rem;
    font-size:1.5rem;
    color:#008a3d;
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;
}

/* 자녀 추가 */
#content.join-page .child-list ul.input-list {
    margin-top: 3rem;
    border-top:solid 1px #ccc;
}

#content.join-page .join-btn-wrap {    
    margin:0 auto;
    margin-top: 3rem;
    max-width: 56rem;    
}

@media (max-width:1025px){
    #content.join-page .join-form-box {
        padding:4rem 3rem;
    }
}
@media (max-width:481px){
    #content.join-page .join-form-box {
        padding:4rem 2rem;
    }
    #content.join-page .join-form-box .top-tit h3 {
        font-size:2rem;
    }    
}








/* 공지사항 */
#content.board-page {
    padding:0 var(--home-padding);
    background:#fbfbfb;
    position:relative;
    overflow-x:hidden;
    z-index:0;
}
#content.board-page::before {
    content:"";
    position:absolute;
    top:10%;
    left:-6rem;
    width:33.2rem;
    height:30rem;
    background:url("../img/log-bg-left.svg") no-repeat center center;
    background-size: contain;
    z-index:-1;
    pointer-events: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#content.board-page::after {
    content:"";
    position:absolute;
    top:50%;
    right:-4rem;
    width:27.4rem;
    height:30rem;
    background:url("../img/log-bg-right.svg") no-repeat center center;
    background-size: contain;
    z-index:-1;
    pointer-events: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#content.board-page .board-wrap {
    position:relative;
    max-width: 116rem;
    margin:0 auto;
    z-index:0;
}
#content.board-page > * {
    position:relative;
    z-index:0;
}



/* 공통 - 검색 */
.top-search {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
    background:#f2f2f2;
    border-radius: 1.2rem;
    padding:4rem 3rem;
}
.top-search.br-left-none {
    border-radius: 0 1.2rem 1.2rem 1.2rem;
}
.top-search.br-top-none {
    border-radius: 0 0 1.2rem 1.2rem;
}
.top-search .search-box {
    display:flex;
    align-items:center;
    gap:1rem;
    width:100%;
    max-width: 54rem;
}
.top-search .search-box.center {
    justify-content:center;
}
.top-search .search-box .tit {
    font-size:1.5rem;
    color:#000;
    font-weight:700;
}
.top-search .search-box label.tit {
    font-size:1.5rem;
    font-weight:400;
    white-space:nowrap;
}
.top-search .search-box .f-input-box {    
    flex:1;
}
.top-search .search-box .f-input-box .f-input {
    border:solid 1px var(--ccolor);
}
.top-search .search-box .f-input-box .f-input::placeholder {
    font-size: 1.4rem;
}
.top-search .search-box .f-input-box .f-input:focus {
    border:solid 1px #000;
}
.top-search .hashtag {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    flex-wrap:wrap;
}
.top-search .hashtag a {
    display:inline-block;
    font-size:1.4rem;
    color:#000;
    text-align:center;
    border-radius: 0.6rem;
    padding:0.8rem 1rem;
    border:dashed 1px #000;
    white-space:nowrap;
}

.top-search.br-top-none .f-input-box .f-calendar,
.top-search .f-input-box .f-calendar {
    background:#fff !important;
}

.category-wrapper {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
}


@media (max-width:1025px){
    .top-search.br-left-none {
        border-radius: 0 0 1.2rem 1.2rem;
    }
}
@media (max-width:720px){
    .category-wrapper {
        flex-direction:column;
    }
}
@media (max-width:481px){
    .top-search {
        padding:3rem 2rem;
    }
    .top-search .search-box .tit {
        font-size:13px;
    }
}




/* 학교별 급식식단정보 */
/* 관심학교 */
.interest-school {
    position:relative;
    min-height: 4rem;
}
.interest-school ul.list {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    flex-wrap: wrap;
}
.interest-school ul.list li {
    display:flex;
    align-items:center;
    gap:2.5rem;
}
.interest-school ul.list li::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1.4rem;
    background:#d9d9d9;
}
.interest-school ul.list li:last-child::after {
    display:none;
}
.interest-school ul.list li a {
    font-size:2.4rem;
    color:#666;
}
.interest-school ul.list li a span {
    position:relative;
    display:inline-block;
    border-bottom:solid 2px transparent;
}
.interest-school ul.list li a.current,
.interest-school ul.list li a:hover {
    color:#008a3d;
}
.interest-school ul.list li a.current span,
.interest-school ul.list li a:hover span {
    border-bottom:solid 2px var(--ccolor);
}
.interest-school ul.list li a:hover span::after,
.interest-school ul.list li a.current span::after {
    display:inline-block;
    content:"";
    position:absolute;
    left:50%;
    bottom:-0.5rem;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:0.4rem solid transparent;
    border-right:0.4rem solid transparent;
    border-top:0.4rem solid var(--ccolor);
}
.interest-school .btn-school-add {
    position:absolute;
    right:0;
    top:0;
}

@media (max-width:1025px){
    .interest-school {
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:2.5rem;
    }
    .interest-school.analysis {
        justify-content:center;
    }
    .interest-school ul.list {
        gap:2rem;
    }
    .interest-school ul.list li {
        gap:2rem;
    }
    .interest-school ul.list li a {
        font-size:2.2rem;
    }
    .interest-school .btn-school-add {
        position:static;
    }
}
@media (max-width:481px){
    .interest-school ul.list {
        gap:1.5rem;
    }
    .interest-school ul.list li {
        gap:1.5rem;
    }    
    .interest-school ul.list li a {
        font-size:2rem;
    }
}


/* box-top */
.box-top {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:solid 1px var(--ccolor);
    padding-bottom: 1rem;
}
.box-top span {
    font-size: 2.2rem;
    font-weight: 600;
    color: #000;
}
.box-top .btn-school-add {
    background:#008a3d;
    border:solid 1px var(--ccolor);
}   




/* 날짜 선택 */
.date-box {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
}
.date-box.left {
    justify-content:flex-start;
}
.date-box .box1 {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
}
.date-box .box1 span.tit {
    font-size:1.5rem;
    color:#000;
    font-weight:700;
}
.date-box .box2 {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
}
/* .date-box input[type=date] {
    background:#fff;
} */
@media (max-width:481px){
    .date-box .box1 span.tit {
        font-size:13px;
    }
    .date-box .box2.intbl {
        flex-direction:column;
        text-align:center;
        width:100%;
    }
    .date-box .box2.intbl > * {
        width:100%;
    }
}



/* 검색 */
.top-search.school-search .search-box {
    max-width: 66rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
}
.top-search.school-search .search-box.col-gap2 {
    column-gap:2rem;
}
.top-search.school-search .search-box .box1 {
    display:flex;
    align-items:center;
    gap:1rem;
}
.top-search.school-search .search-box .box1.f-wrap {
    flex-wrap:wrap;
}
.top-search.school-search .search-box .box1 label {
    font-size:1.4rem;
    font-weight:500;
    color:#000;
}
.top-search.school-search .search-box .box2 {
    display:flex;
    align-items:center;
    gap:1rem;
}
@media (max-width:640px){
    .top-search.school-search .search-box {
        flex-direction:column;
    }
    .top-search.school-search .search-box .box1 {
        width:100%;
        justify-content:center;
    }
    .top-search.school-search .search-box .box2 {
        width:100%;
        justify-content:center;
    }
}


/* 선택 항목 */
.search-keyword-box {
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:2rem;
    background:#eee;
    padding:2rem;
    border-radius:0.8rem;
}
.search-keyword-box .tit {
    display:inline-block;
    font-size: 1.5rem;
    color: #000;
    background: url("../img/desc-check.png") no-repeat left center;
    background-size: 1.4rem auto;
    padding-left: 2rem;
    margin-top: 1rem;
    white-space:nowrap;
}
.search-keyword-box ul {
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
    justify-content:center;
}
.search-keyword-box ul li {
    display:flex;
    align-items:center;
    gap:1rem;
    border-radius: 0.6rem;
    border:dashed 1px #aaa;
    padding:1rem 1rem;
    background:#fff;
}
.search-keyword-box ul li span {
    font-size: 1.3rem;
    color: #000;
}
.search-keyword-box ul li .key-delete {
    display:inline-block;
    font-size: 0;
    background: url("../img/key-delete.svg") no-repeat center center;
    background-size: contain;
    width: 1.4rem;
    height: 1.4rem;
}

@media (max-width:1025px){
    .search-keyword-box {
        flex-direction:column;
        align-items:center;
    }
    .search-keyword-box .tit {
        margin-top: 0;
    }
}



/* 요리/재료 키워드를 입력해 주세요 */
.keyword-input-box {
    margin-top: 6rem;
    border-radius: 1.2rem;
    background-color: #f6f6f6;
    padding: 4rem;
}
.keyword-input-box .top {
    padding-bottom: 1rem;
    border-bottom:solid 1px var(--ccolor);
}
.keyword-input-box .top h3 {
    font-size: 2rem;
    font-weight: 600;
    color: #000;
}
.keyword-input-box .input-box {
    margin-top: 3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom: 2rem;
}
.keyword-input-box .input-box label {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
}
.keyword-input-box .input-box .f-input-box {
    max-width: 100%;
    width: 40rem;
}
.keyword-input-box .input-box .f-input-box input {
    width:100%;
}

/* 키워드 테이블 */
.key-tbl-top {
    margin-top: 4rem;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap:2rem;
    justify-content:space-between;
}
.key-tbl-top.column {
    margin-top:0;
    flex-direction:column;
    align-items:flex-start;
}
.key-tbl-top .tit {
    font-size: 1.8rem;
    color: #000;
}
.key-tbl-top p {
    font-size: 1.5rem;
    color: #666;
}

@media (max-width:1025px){
    .keyword-input-box .top h3 {
        font-size: 1.8rem;
    }
    .key-tbl-top .tit {
        font-size: 1.6rem;
    }
}


/* key-tbl-wrap */
.key-tbl-wrap {
    margin-top: 1rem;
    border-top:solid 1px var(--ccolor);
    overflow-x:auto;
}
.key-tbl-wrap::-webkit-scrollbar {
    width: 0.8rem;
    height: 0.8rem;
}
.key-tbl-wrap::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 0.4rem;
}
.key-tbl-wrap::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 0.4rem;
}
.key-tbl-wrap::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

.key-tbl-wrap table {
    width:100%;
    min-width: 72rem;
    border-collapse:collapse;
    border:solid 1px #ddd;
}
.key-tbl-wrap table thead th {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    background:#ebf1ee;
    text-align:center;
    height: 4.8rem;
    vertical-align:middle;
    border:solid 1px #dfe1e0;
    padding:0 2rem;
    white-space:nowrap;
}
.key-tbl-wrap table tbody td {
    font-size: 1.5rem;
    line-height: 1.43;
    color: #666;
    min-height: 4.8rem;
    padding:1.5rem 1.5rem;
    background:#fff;
    text-align:center;
    border:solid 1px #ddd;
}
.key-tbl-wrap table tbody td.left {
    text-align:left;
}
.key-tbl-wrap table tbody td.keyword {
    background:rgba(232, 0, 0, 0.05);
    color: #e80000;
}






/* 급상승 요리 */
.soaring-dish {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4rem;
}
.soaring-dish .tit h3 {
    padding-left: 3rem;
    line-height:2rem;
    background:url("../img/icon-dish.svg") no-repeat left center;
    background-size: 2.3rem auto;
    font-size:1.8rem;
    font-weight:700;
    color:#000;
    white-space:nowrap;
}
.soaring-dish .list {
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
}
.soaring-dish .list a {
    display:inline-block;
    font-size:1.3rem;
    color:#000;
    text-align:center;
    border-radius: 0.6rem;
    padding:0.8rem 1rem;
    border:dashed 1px #000;
    white-space:nowrap;
}
@media (max-width:1025px){
    .soaring-dish {
        flex-direction:column;
        gap:2rem;
    }
    .soaring-dish .list {
        justify-content:center;
    }
}



/* 식단 인기 요리 */
.menu-popular-dish {
    margin-top: 5rem;
}
.menu-popular-dish .tit {
    margin-bottom: 2rem;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap:1rem;
    justify-content:space-between;
    border-bottom:solid 1px var(--ccolor);
    padding-bottom: 1rem;
}
.menu-popular-dish .tit h3 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #000;
}
.menu-popular-dish .tit p {
    font-size:1.5rem;
    color:#666;
}

.menu-popular-dish .list {
    display:flex;
    margin-left: -1.5rem;
    row-gap:1.5rem;
    flex-wrap:wrap;
}
.menu-popular-dish .list dl {
    width:calc(20% - 1.5rem);
    margin-left: 1.5rem;
    display:flex;
    flex-direction:column;
    gap:2rem;
    border:solid 1px #ddd;
    padding:2rem;
    border-radius: 1rem;
    background:#fff;
    min-height:28.2rem;
}
.menu-popular-dish .list dl dt {

}
.menu-popular-dish .list dl dt span {
    font-size:2rem;
    font-weight:600;
    color:#000;
}

.menu-popular-dish .list ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.menu-popular-dish .list ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.menu-popular-dish .list ul li span.no {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: #000;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}
.menu-popular-dish .list ul li span.name {
    font-size: 1.6rem;
    color: #666;
    line-height: 1.5;
    white-space:nowrap; 
}
.menu-popular-dish .list ul li span.order {
    margin-left: auto;
    font-size: 0;
    width: 1.2rem;
    height: 1.2rem;
}
.menu-popular-dish .list ul li span.order.up {
    background: url("../img/order_up.png") no-repeat center center;
    background-size: contain;
}
.menu-popular-dish .list ul li span.order.down {
    background: url("../img/order_down.png") no-repeat center center;
    background-size: contain;
}
.menu-popular-dish .list ul li span.order.keep {
    background: url("../img/order_keep.png") no-repeat center center;
    background-size: contain;
}

.menu-popular-dish .list ul li:first-child span.no {
    color:#008a3d;
}
.menu-popular-dish .list ul li:first-child span.name {
    color:#008a3d;
    font-weight:600;
}
/* 학교선택시 */
.menu-popular-dish.school-dish .list ul li:first-child span.name {
    color:#666;
    font-weight:400;
}

@media (max-width:1025px){
    .menu-popular-dish .list dl {
        width:calc(50% - 1.5rem);
        min-height:auto;
    }
    .menu-popular-dish .list dl dt span {
        font-size:1.8rem;
    }
}
@media (max-width:580px){
    .menu-popular-dish .list dl {
        width:100%;
    }
}



/* 전국 가장 인기 있는 식단 */
.popular-dish {
    margin-top: 6rem;
}
.popular-dish .tit {
    margin-bottom: 2rem;
}
.popular-dish .tit h3 {
    font-size:2.4rem;
    font-weight:700;
    color:#000;
}
.popular-dish .list {
    display:flex;
    gap:1.5rem;
    justify-content:space-between;
}
.popular-dish .list dl {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3rem;
    border:solid 1px var(--ccolor);
    padding:3rem 2rem;
    border-radius: 1rem;
    background:#fff;
}
.popular-dish .list dl dt {
    border-bottom:solid 1px #ddd;
    padding-bottom: 1rem;
}
.popular-dish .list dl dt span {
    font-size:2rem;
    font-weight:600;
    color:#008a3d;
}
.popular-dish .list dl dd ul {
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.popular-dish .list dl dd ul li {
    display:flex;
    gap:1rem;
}
.popular-dish .list dl dd ul li span {
    display:flex;
    gap:1rem;
    font-size:1.6rem;
}
.popular-dish .list dl dd ul li span.cate {
    position:relative;
    width:7rem;
    color:#000;
    padding-left: 1rem;
}
.popular-dish .list dl dd ul li span.cate::before {
    display:inline-block;
    content:"";
    position:absolute;
    left:0;
    top:0.5rem;
    width:0.6rem;
    height:0.6rem;
    background:#008a3d;
    border-radius:100vh;
}
.popular-dish .list dl dd ul li span.name {
    flex:1;
    color:#666;
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;  
}
.popular-dish .list dl dd ul li span.name::before {
    display:inline-block;
    content:":";
    color:#000;
}

@media (max-width:1025px){
    .popular-dish .tit {
        margin-bottom: 2rem;
    }
    .popular-dish .tit h3 {
        font-size:2.2rem;
    }
    .popular-dish .list {
        flex-direction:column;
    }
    .popular-dish .list dl {
        width:100%;
    }
    .popular-dish .list dl dt span {
        font-size:1.8rem;
    }
}
@media (max-width:481px){
    .popular-dish .tit h3 {
        font-size:2rem;
    }
    .popular-dish .list dl {
        padding:3rem 2rem;
    }
}


/* 상단 관심 학교 선택시 노출 */
/* 전국 가장 인기 있는 식단 */
.popular-dish-school {
    margin-top: 3rem;
    border-top:dashed 1px #ccc;
    padding-top: 4rem;
}
.popular-dish-school .tit {
    margin-bottom: 3rem;
}
.popular-dish-school .tit h3 {
    font-size:2.4rem;
    font-weight:700;
    color:#000;
}
.popular-dish-school .list {
    display:flex;
    gap:1.5rem;
    justify-content:space-between;
}
.popular-dish-school .list dl {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3rem;
    border:solid 1px #ddd;
    padding:3rem 2rem;
    border-radius: 1rem;
    background:#fff;
}
.popular-dish-school .list dl dt span {
    font-size:2rem;
    font-weight:700;
    color:#000;
    text-decoration:underline;
}
.popular-dish-school .list dl dd ul {
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.popular-dish-school .list dl dd ul li {
    display:flex;
    gap:1rem;
}
.popular-dish-school .list dl dd ul li span {
    display:flex;
    gap:1rem;
    font-size:1.6rem;
}
.popular-dish-school .list dl dd ul li span.name {
    position:relative;
    color:#666;
    padding-left: 1rem; 
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;
}
.popular-dish-school .list dl dd ul li span.name::before {
    display:inline-block;
    content:"";
    position:absolute;
    left:0;
    top:0.8rem;
    width:0.6rem;
    height:0.6rem;
    background:#008a3d;
    border-radius:100vh;
}

@media (max-width:1025px){
    .popular-dish-school .tit {
        margin-bottom: 2rem;
    }
    .popular-dish-school .tit h3 {
        font-size:2.2rem;
    }
    .popular-dish-school .list {
        flex-direction:column;
    }
    .popular-dish-school .list dl {
        width:100%;
    }
    .popular-dish-school .list dl dt span {
        font-size:1.8rem;
    }
}
@media (max-width:481px){
    .popular-dish-school .tit h3 {
        font-size:2rem;
    }
    .popular-dish-school .list dl {
        padding:3rem 2rem;
    }
}


/* 다빈도 요리 레시피 */
.recipe-list {
    margin-top: 6rem;
    display:flex;
    gap:4rem;
}
.recipe-list .col-wrap {
    width:calc(100% / 2);
    display:flex;
    gap:2rem;
}
.recipe-list .col-wrap.column {    
    flex-direction:column;
    gap:0;
}
.recipe-list .col-wrap .col {
    flex:1;
}
/* top */
.recipe-list .col-wrap .sl-top {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom: 2rem;
}
/* control */
.recipe-list .col-wrap .sl-top .control {
    display:flex;
    align-items:center;
    gap:1rem;
}
.recipe-list .col-wrap .sl-top .control button {
    display:block;
    font-size:0;
    width:1.8rem;
    height:1.8rem;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.recipe-list .col-wrap .sl-top .control button.prev {
    background-image:url("../img/vs-prev.svg");
}
.recipe-list .col-wrap .sl-top .control button.next {
    background-image:url("../img/vs-next.svg");
}
.recipe-list .col-wrap .sl-top .control button.pause {
    background-image:url("../img/vs-pause.svg");
}
.recipe-list .col-wrap .sl-top .control button.play {
    display:none;
    background-image:url("../img/vs-play.svg");
}

.recipe-list .col-wrap .tit {
    
}
.recipe-list .col-wrap .tit h3 {
    font-size:2.4rem;
    font-weight:700;
    color:#000;
}
.recipe-list .col-wrap .sl-box {
    position:relative;
    flex:1;
    border:solid 1px #ddd;
    padding:0 3rem;
    padding-right: 2rem;
    border-radius: 1rem;
    background:#fff;
}
.recipe-list .col-wrap .sl-box .swiper {
    position:relative;
    height:52.6rem;
    overflow:hidden;
}
.recipe-list .col-wrap .sl-box .swiper-slide {
    padding:3rem 0;
}

.recipe-list .col-wrap .sl-box .swiper-slide .name {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom:solid 1px var(--ccolor);
}
.recipe-list .col-wrap .sl-box .swiper-slide .name span.title {
    display:inline-block;
    font-size:1.8rem;
    font-weight:700;
    color:#008a3d;
}
.recipe-list .col-wrap .sl-box .swiper-slide .name span.calorie {
    font-size:1.4rem;
    color:#666;
}
.recipe-list .col-wrap .sl-box .swiper-slide .name span.calorie b {
    color:#008a3d;
    font-weight:600;
}

.recipe-list .col-wrap .sl-box .swiper-slide .recipe-box {
    width: calc(100% - 0.1rem);
    max-height:16.5rem;
    padding-right: 1rem;
    overflow-y: auto;
}
.recipe-list .col-wrap .sl-box .swiper-slide .recipe-box::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}
.recipe-list .col-wrap .sl-box .swiper-slide .recipe-box::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    border-radius: 0.3rem;
}
.recipe-list .col-wrap .sl-box .swiper-slide .recipe-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0.3rem;
}
.recipe-list .col-wrap .sl-box .swiper-slide .recipe-box::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.recipe-list .col-wrap .sl-box .swiper-slide:nth-child(2n) {
    border-bottom:none;
}
.recipe-list .col-wrap .sl-box .swiper-slide p.desc {
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    font-size:1.6rem;
    color:#666;
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;
    background:url("../img/desc-check.png") no-repeat left top 2rem;
    background-size: 1.4rem auto;
    padding-left: 2rem;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    border-bottom:dashed 1px #ddd;
    display:flex;
    align-items:center;
    gap:1rem;
}
.recipe-list .col-wrap .sl-box .swiper-slide p.desc span {
    display:inline-block;
    font-size:1.6rem;
    color:#000;
    width: 3.4rem;
}
.recipe-list .col-wrap .sl-box .btn-rcp-prev,
.recipe-list .col-wrap .sl-box .btn-rcp-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:5rem;
    height:5rem;
    background:rgba(0,0,0,0.3);
    font-size:0;
    z-index:10;
}
.recipe-list .col-wrap .sl-box .btn-rcp-prev {
    left:0;
    background:rgba(0,0,0,0.3) url("../img/rcp-prev.png") no-repeat center center;
    background-size: 1.4rem auto;
    border-radius: 0 1.5rem 1.5rem 0;
}
.recipe-list .col-wrap .sl-box .btn-rcp-next {
    right:0;
    background:rgba(0,0,0,0.3) url("../img/rcp-next.png") no-repeat center center;
    background-size: 1.2rem auto;
    border-radius: 1.5rem 0 0 1.5rem;
}

.recipe-list .col-wrap .list {
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3rem;
    border:solid 1px #ddd;
    padding:3rem;
    border-radius: 1rem;
    background:#fff;
    min-height:52.6rem;
}

.recipe-list .col-wrap .col .list ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.recipe-list .col-wrap .col .list ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.recipe-list .col-wrap .col .list ul li span.no {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: #000;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}
.recipe-list .col-wrap .col .list ul li button.name,
.recipe-list .col-wrap .col .list ul li span.name {
    font-size: 1.6rem;
    color: #666;
    line-height: 1.5;
    white-space:nowrap; 
}
.recipe-list .col-wrap .col .list ul li span.order {
    margin-left: auto;
    font-size: 0;
    width: 1.2rem;
    height: 1.2rem;
}
.recipe-list .col-wrap .col .list ul li span.order.up {
    background: url("../img/order_up.png") no-repeat center center;
    background-size: contain;
}
.recipe-list .col-wrap .col .list ul li span.order.down {
    background: url("../img/order_down.png") no-repeat center center;
    background-size: contain;
}
.recipe-list .col-wrap .col .list ul li span.order.keep {
    background: url("../img/order_keep.png") no-repeat center center;
    background-size: contain;
}

.recipe-list .col-wrap .col .list ul li:first-child span.no {
    color:#008a3d;
}
.recipe-list .col-wrap .col .list ul li:first-child button.name,
.recipe-list .col-wrap .col .list ul li:first-child span.name {
    color:#008a3d;
    font-weight:600;
}

.recipe-list .col-wrap .col .list .basic-date {
    margin-top: auto;
}
.recipe-list .col-wrap .col .list .basic-date p {
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size: 1.5rem;
    color: #666;
}
.recipe-list .col-wrap .col .list .basic-date p span {
    display:inline-block;
    line-height:1.5rem;
}

@media (max-width:1240px){
    .recipe-list {
        gap:2rem;
    }
}
@media (max-width:1025px){
    .recipe-list {
        flex-direction:column;
        gap:4rem;
    }    
    .recipe-list .col-wrap {
        width:100%;
    }
    .recipe-list .col-wrap .sl-top {
        margin-bottom: 2rem;
    }
    .recipe-list .col-wrap .tit h3 {
        font-size:2.2rem;
    }
    .recipe-list .col-wrap .sl-box .swiper-slide .name span.title {
        font-size:1.6rem;
    }
    .recipe-list .col-wrap .sl-box .swiper-slide p.desc { 
        font-size:1.6rem;
    }
    .recipe-list .col-wrap .sl-box .swiper-slide p.desc span {
        font-size:1.4rem;
        width: 3rem;
    }

}
@media (max-width:580px){
    .recipe-list .col-wrap {
        flex-direction:column;
        gap:4rem;
    }
    .recipe-list .col-wrap .col {
        width:100%;
    }
}
@media (max-width:481px){
    .recipe-list .col-wrap .tit h3 {
        font-size:2rem;
    }
    .recipe-list .col-wrap .sl-box {
        padding:0 2rem;
        padding-right: 1rem;
    }
    .recipe-list .col-wrap .sl-box .swiper {
        
    }
    .recipe-list .col-wrap .sl-box .swiper-slide .name {
        flex-direction: column;
        align-items:flex-start;
        gap:2rem;
    }   
    .recipe-list .col-wrap .list {
        padding: 3rem 2rem;
    } 
}


/* 상단 관심 학교 선택시 노출 */
/* 다빈도 요리 레시피 */
.recipe-list-school {
    margin-top: 8rem;
    display:flex;
    gap:4rem;
}
.recipe-list-school .col-wrap {
    width:calc(100% / 2);
    display:flex;
    gap:2rem;
}
.recipe-list-school .col-wrap.column {    
    flex-direction:column;
    gap:0;
}
.recipe-list-school .col-wrap .col {
    flex:1;
}

/* top */
.recipe-list-school .col-wrap .sl-top {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom: 3rem;
}

/* control */
.recipe-list-school .col-wrap .sl-top .control {
    display:flex;
    align-items:center;
    gap:1rem;
    background:#fff;
    border-radius:100vh;
    padding:0.5rem 1rem;
    box-shadow:0 0.4rem 1.3rem rgba(0, 0, 0, 0.13);
}
.recipe-list-school .col-wrap .sl-top .control button {
    display:block;
    font-size:0;
    width:1.8rem;
    height:1.8rem;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.recipe-list-school .col-wrap .sl-top .control button.prev {
    background-image:url("../img/vs-prev.svg");
}
.recipe-list-school .col-wrap .sl-top .control button.next {
    background-image:url("../img/vs-next.svg");
}
.recipe-list-school .col-wrap .sl-top .control button.pause {
    background-image:url("../img/vs-pause.svg");
}
.recipe-list-school .col-wrap .sl-top .control button.play {
    display:none;
    background-image:url("../img/vs-play.svg");
}

.recipe-list-school .col-wrap .tit {
    
}
.recipe-list-school .col-wrap .tit h3 {
    font-size:2.4rem;
    font-weight:700;
    color:#000;
}
.recipe-list-school .col-wrap .sl-box {
    position:relative;
    flex:1;
    border:solid 1px #ddd;
    padding:0 3rem;
    border-radius: 1rem;
    background:#fff;
}
.recipe-list-school .col-wrap .sl-box .swiper {
    position:relative;
    height:42rem;
    overflow:hidden;
}
.recipe-list-school .col-wrap .sl-box .swiper-slide {
    padding:3rem 0;
    border-bottom:dashed 1px #ddd;
}
.recipe-list-school .col-wrap .sl-box .swiper-slide:nth-child(2n) {
    border-bottom:none;
}
.recipe-list-school .col-wrap .sl-box .swiper-slide .name {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom: 2.5rem;
}
.recipe-list-school .col-wrap .sl-box .swiper-slide .name span.title {
    display:inline-block;
    font-size:1.8rem;
    font-weight:700;
    color:#008a3d;
    border:dashed 1px var(--ccolor);
    padding:1rem 1.5rem;
    border-radius:100vh;
}
.recipe-list-school .col-wrap .sl-box .swiper-slide .name span.calorie {
    font-size:1.4rem;
    color:#000;
}
.recipe-list-school .col-wrap .sl-box .swiper-slide p.desc {
    margin-top: 1rem;
    font-size:1.4rem;
    color:#000;
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;
    background:url("../img/desc-check.png") no-repeat left center;
    background-size: 1.4rem auto;
    padding-left: 2.5rem;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.recipe-list-school .col-wrap .sl-box .btn-rcp-prev,
.recipe-list-school .col-wrap .sl-box .btn-rcp-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:5rem;
    height:5rem;
    background:rgba(0,0,0,0.3);
    font-size:0;
    z-index:10;
}
.recipe-list-school .col-wrap .sl-box .btn-rcp-prev {
    left:0;
    background:rgba(0,0,0,0.3) url("../img/rcp-prev.png") no-repeat center center;
    background-size: 1.4rem auto;
    border-radius: 0 1.5rem 1.5rem 0;
}
.recipe-list-school .col-wrap .sl-box .btn-rcp-next {
    right:0;
    background:rgba(0,0,0,0.3) url("../img/rcp-next.png") no-repeat center center;
    background-size: 1.2rem auto;
    border-radius: 1.5rem 0 0 1.5rem;
}

.recipe-list-school .col-wrap .list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3rem;
    border:solid 1px #ddd;
    padding:3rem;
    border-radius: 1rem;
    background:#fff;
}

.recipe-list-school .col-wrap .col .list ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.recipe-list-school .col-wrap .col .list ul li {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.recipe-list-school .col-wrap .col .list ul li span.no {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-color: #f2f2f2;
    border-radius: 0.4rem;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    line-height: 2rem;
}
.recipe-list-school .col-wrap .col .list ul li span.name {
    font-size: 1.5rem;
    color: #666;
    line-height: 1.5;
    white-space:nowrap; 
}
.recipe-list-school .col-wrap .col .list ul li span.order {
    margin-left: auto;
    font-size: 0;
    width: 1rem;
    height: 1rem;
}
.recipe-list-school .col-wrap .col .list ul li span.order.up {
    background: url("../img/order_up.png") no-repeat center center;
    background-size: contain;
}
.recipe-list-school .col-wrap .col .list ul li span.order.down {
    background: url("../img/order_down.png") no-repeat center center;
    background-size: contain;
}
.recipe-list-school .col-wrap .col .list ul li span.order.keep {
    background: url("../img/order_keep.png") no-repeat center center;
    background-size: contain;
}

@media (max-width:1240px){
    .recipe-list-school {
        gap:2rem;
    }
}
@media (max-width:1025px){
    .recipe-list-school {
        flex-direction:column;
        gap:4rem;
    }    
    .recipe-list-school .col-wrap {
        width:100%;
    }
    .recipe-list-school .col-wrap .sl-top {
        margin-bottom: 2rem;
    }
    .recipe-list-school .col-wrap .tit h3 {
        font-size:2.2rem;
    }
    .recipe-list-school .col-wrap .sl-box .swiper-slide .name span.title {
        font-size:1.6rem;
    }
}
@media (max-width:580px){
    .recipe-list-school .col-wrap {
        flex-direction:column;
        gap:4rem;
    }
    .recipe-list-school .col-wrap .col {
        width:100%;
    }
}
@media (max-width:481px){
    .recipe-list-school .col-wrap .tit h3 {
        font-size:2rem;
    }
    .recipe-list-school .col-wrap .sl-box {
        padding:0 2rem;
    }
    .recipe-list-school .col-wrap .sl-box .swiper {
        height:48rem;
    }
    .recipe-list-school .col-wrap .sl-box .swiper-slide .name {
        flex-direction: column;
        align-items:flex-start;
        gap:2rem;
    }   
    .recipe-list-school .col-wrap .list {
        padding: 3rem 2rem;
    } 
}




/* 상단 관심 학교 선택시 노출 */
.school-select-wrap {
    display:none;
}


/* 영양상담 관리 */
.school-name {
    display:flex;
    justify-content:center;
    margin-bottom: 3rem;
}
.school-name p {
    font-size:2.2rem;
    color:#000;
}
.school-name p b {
    font-weight:700;
    color:#008a3d;
}






/* 지역별 영양상담 통계 */
.local-name {
    display:flex;
    align-items:center;
    gap:1rem;
}
.local-name span {
    font-size:2.2rem;
    color:#000;
    font-weight:700;
}
.local-name em {
    font-size:1.5rem;
    color:#008a3d;
}




/* 북마크 메뉴 */
.bookmark-wrap {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-bottom: 2rem;
    border-bottom:solid 1px var(--ccolor);
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    min-width:0;
    max-width:100%;
}
.bookmark-wrap::-webkit-scrollbar {
    width: 0.8rem;
    height: 0.8rem;
}
.bookmark-wrap::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 0.4rem;
}
.bookmark-wrap::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 0.4rem;
}
.bookmark-wrap::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}
.bookmark-wrap a,
.bookmark-wrap button {
    display:inline-block;
    width:auto;
    min-width:fit-content;
    height:4.2rem;
    line-height:4.2rem;
    padding:0 2.5rem;
    font-size:1.7rem;
    color:#000;
    font-weight:700;
    border:solid 1px #ddd;
    border-bottom:none;
    border-radius: 1.2rem 1.2rem 0 0;
    text-align:center;
    background:#f3f3f3;
    white-space:nowrap;
    flex-shrink:0;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing:border-box;
}
.bookmark-wrap a.active,
.bookmark-wrap button.active {
    background:#008a3d;
    border:solid 1px var(--ccolor);
    color:#fff;
    font-weight:500;
}
.bookmark-wrap.white a,
.bookmark-wrap.white button {
    background:#fff;
    border:solid 1px #ddd;
}
.bookmark-wrap.white a.active,
.bookmark-wrap.white button.active {
    background:#008a3d;
    border:solid 1px var(--ccolor);
    border-bottom:none;
    color:#fff;
}
/* gray */
.bookmark-wrap.gray a,
.bookmark-wrap.gray button {
    background:#f9f9f9 !important;
    border:solid 1px #ddd !important;
    color: #aaa !important;
    font-weight:400 !important;
}
.bookmark-wrap.gray a.active,
.bookmark-wrap.gray button.active {
    background:#fff !important;
    border:solid 1px #ddd !important;
    color:#000 !important;
    font-weight:700 !important;
}

.bookmark-wrap.auto a,
.bookmark-wrap.auto button {
    width:auto;
    min-width:fit-content;
    height:auto;
    line-height:1.4;
    padding:1rem 2rem;
    word-break: keep-all;
    word-wrap: break-word;
    flex-shrink:0;
    box-sizing:border-box;
}
@media (max-width:720px){
    .bookmark-wrap {
        justify-content:flex-start;
    }
    .bookmark-wrap a,
    .bookmark-wrap button {
        min-width:12rem;
        padding:0 1.5rem;
        font-size:1.6rem;
    }
    .bookmark-wrap.auto a,
    .bookmark-wrap.auto button {
        width:auto;
        min-width:fit-content;
        max-width:none;
        font-size:1.6rem;
        padding:1rem 1.5rem;
    }
}



/* 북마크 메뉴 2행 */
.bookmark-wrap-2row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}
.bookmark-wrap-2row a,
.bookmark-wrap-2row button {
    display:inline-block;
    flex:1 1 33.33333333333333%;
    height:4.2rem;
    line-height:4.2rem;
    font-size:1.6rem;
    color:#000;
    font-weight:700;
    border:solid 1px #ddd;    
    text-align:center;
    background:#f3f3f3;
    margin-left:-1px;
    z-index:1;
}
.bookmark-wrap-2row a:nth-child(1),
.bookmark-wrap-2row button:nth-child(1) {
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom:none;
}
.bookmark-wrap-2row a:nth-child(2),
.bookmark-wrap-2row button:nth-child(2) {
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom:none;
}
.bookmark-wrap-2row a:nth-child(3),
.bookmark-wrap-2row button:nth-child(3) {
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom:none;
}
.bookmark-wrap-2row a.active,
.bookmark-wrap-2row button.active {
    background:#008a3d;
    border:solid 1px var(--ccolor);
    color:#fff;
    z-index:2;
}
.bookmark-wrap-2row.white a,
.bookmark-wrap-2row.white button {
    background:#fff;
    border:solid 1px #ddd;
}
.bookmark-wrap-2row.white a.active,
.bookmark-wrap-2row.white button.active {
    background:#008a3d;
    border:solid 1px var(--ccolor);
    color:#fff;
    z-index:2;
}
.bookmark-wrap-2row.white a:nth-child(1),
.bookmark-wrap-2row.white button:nth-child(1) {
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom:none;
}
.bookmark-wrap-2row.white a:nth-child(2),
.bookmark-wrap-2row.white button:nth-child(2) {
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom:none;
}
.bookmark-wrap-2row.white a:nth-child(3),
.bookmark-wrap-2row.white button:nth-child(3) {
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom:none;
}
.bookmark-wrap-2row.auto a,
.bookmark-wrap-2row.auto button {
    width:auto;
    height:auto;
    line-height:1.4;
    padding:1rem 1rem;
    word-break: keep-all;
    word-wrap: break-word; 
}
@media (max-width:720px){
    .bookmark-wrap-2row a,
    .bookmark-wrap-2row button {
        flex:1 1 50%;
        font-size:1.5rem;
    }
    .bookmark-wrap-2row.white a:nth-child(3),
    .bookmark-wrap-2row.white button:nth-child(3) {
        border-radius: 0 0 0 0;
        border-bottom:none;
    }    
    .bookmark-wrap-2row.white a:nth-child(4),
    .bookmark-wrap-2row.white button:nth-child(4) {
        border-radius: 0 0 0 0;
        border-bottom:none;
    }       
}
@media (max-width:400px){
    .bookmark-wrap-2row a,
    .bookmark-wrap-2row button {
        flex:1 1 100%;
    }
    .bookmark-wrap-2row.white a:nth-child(2),
    .bookmark-wrap-2row.white button:nth-child(2) {
        border-radius: 0 0 0 0;
        border-bottom:none;
    }
    .bookmark-wrap-2row.white a:nth-child(5),
    .bookmark-wrap-2row.white button:nth-child(5) {
        border-radius: 0 0 0 0;
        border-bottom:none;
    }  
}



/* 차트 타이틀 */
h3.chart-sub-tit {
    font-size:1.7rem;
    color:#008a3d;
    font-weight:500;
    margin: 3rem 0 1rem;
}



/* 지역별 영양상담 통계 차트 */
.chart-wrap {  
    position: relative;
    background:#fff;
    padding:3rem;
    border:solid 1px #ddd;
    border-top:solid 1px var(--ccolor);    
}
.chart-wrap .inchart {
    position: relative;
    height: 300px;
}


/* 준비중 표시 */
.chart-wrap .inchart .preparing {
    display:flex;
    align-items:center;
    justify-content:center;
    height:30rem;
}
.chart-wrap .inchart .preparing p {
    padding-top:5rem;
    font-size:1.5rem;
    color:#ccc;
    background:url("../img/icon-no-img.svg") no-repeat center top;
    background-size: 3.4rem auto;
}

@media (max-width:481px){
    .chart-wrap {   
        padding:3rem 2rem;
    }
}





/* 농산물 가격정보 */
.price-info-search {
    padding:4rem 3rem;
    background:#f6f6f6;
    border-radius:1.2rem;
}
.price-info-search h3.tit {
    font-size:2.4rem;
    color:#000;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:1rem;
}
.price-info-search h3.tit.ft20 {
    font-size:2rem;
}
.price-info-search h3.tit i {
    display:inline-block;
    width:1.6rem;
    height:1.2rem;
    background:url("../img/icon-search.svg") no-repeat center center;
    background-size:contain;
}

@media (max-width:1025px){
    .price-info-search {
        padding:3rem 2rem;
    }
    .price-info-search h3.tit {
        font-size:2.2rem;
    }
    .price-info-search h3.tit.ft20 {
        font-size:1.8rem;
    }
}
@media (max-width:481px){
    .price-info-search h3.tit {
        font-size:2rem;
    }
    .price-info-search h3.tit i {
        width:1.4rem;
        height:1rem;
    }
}




/* 가격 통계 현황 */
.chart-tit {
    font-size:2.4rem;
    color:#000;
    font-weight:700;
    margin-bottom: 2rem;
}
@media (max-width:1025px){
    .chart-tit {
        font-size:2.2rem;
    }
}
@media (max-width:481px){
    .chart-tit {
        font-size:2rem;
    }
}






/* 카테고리 목록 */
.cate-list {
    margin-bottom: 3rem;
}
.cate-list .main-cate {
    border-top:solid 1px var(--ccolor);
    padding: 2rem;
    border-bottom:solid 1px #e5e5e5;
}
.cate-list .main-cate ul {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1.5rem;
}
.cate-list .main-cate ul li {
    display:flex;
    align-items:center;
    gap:1.5rem;
}
.cate-list .main-cate ul li::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1.2rem;
    background:#d9d9d9;
}
.cate-list .main-cate ul li:last-child::after {
    display:none;
}
.cate-list .main-cate ul li a {
    font-size:1.6rem;
    color:#000;
    font-weight:700;
}
.cate-list .main-cate ul li.active a {
    color:#008a3d;
}

.cate-list .sub-cate {
    padding: 2rem;
}
.cate-list .sub-cate ul {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1.5rem;
}
.cate-list .sub-cate ul li {
    display:flex;
    align-items:center;
    gap:1.5rem;
}
.cate-list .sub-cate ul li a {
    font-size:1.5rem;
    color:#666;
    font-weight:700;
}

@media (max-width:481px){

}





/* 순서 정렬 */
.order-wrap {
    margin-left:auto;
}
.order-wrap ul {
    display:flex;
    align-items:center;
    gap:1rem;
}
.order-wrap ul li {
    display:flex;
    align-items:center;
    gap:1rem;
}
.order-wrap ul li::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1.2rem;
    background:#d9d9d9;
}
.order-wrap ul li:last-child::after {
    display:none;
}
.order-wrap ul li a {
    font-size:1.5rem;
    color:#000;
}
.order-wrap ul li.active a {
    color:#008a3d;
}






/* 제품 상세 */
.product-wrap {
   display: flex;
   gap:4rem;
}
.product-wrap .left {
    width:58rem;
}
.product-wrap .left .swiper {
    border:solid 1px #eee;
    border-radius: 1.6rem;
    overflow:hidden;
}
.product-wrap .left .swiper-slide {    
    background:#fff;
}
/* 가공식품 이미지 */
.product-wrap .left .pfoodSwiper .swiper-slide {    

}
.product-wrap .left .swiper-slide img {
    width:100%;
    height:100%;
    object-fit: cover;
}
.product-wrap .right {
    flex:1;
}
.product-wrap .right .info {

}
.product-wrap .right .info table {
    width:100%;
}
.product-wrap .right .info table th,
.product-wrap .right .info table td {
    padding:2rem 2rem;
    border:solid 1px #e5e5e5;
    font-size:1.5rem;
    text-align:left;
}
.product-wrap .right .info table tr th {
    color:#000;
    font-weight:bold;
    white-space:nowrap;
    background-color: #ebf1ef;
    border-right:solid 1px #e5e5e5;
}
.product-wrap .right .info table tr td {
    color:#666;
    line-height:1.5;
    background:#fff;
}



/* control */
.product-wrap .left .control {
    max-width:10rem;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2rem;
    gap:1rem;
    background:#fff;
    border-radius:100vh;
    padding:0.5rem 1rem;
    box-shadow:0 0.4rem 1.3rem rgba(0, 0, 0, 0.13);
}
.product-wrap .left .control button {
    display:block;
    font-size:0;
    width:1.8rem;
    height:1.8rem;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.product-wrap .left .control button.prev {
    background-image:url("../img/vs-prev.svg");
}
.product-wrap .left .control button.next {
    background-image:url("../img/vs-next.svg");
}
.product-wrap .left .control button.pause {
    background-image:url("../img/vs-pause.svg");
}
.product-wrap .left .control button.play {
    display:none;
    background-image:url("../img/vs-play.svg");
}

@media (max-width:1025px){
    .product-wrap {
        flex-direction: column;
    }
    .product-wrap .left {
        width:100%;
    }
}
@media (max-width:481px){
    .product-wrap .right .info table tr {
        display: block;
        margin-bottom:1rem;
    }
    .product-wrap .right .info table th,
    .product-wrap .right .info table td {
        display: block;
        width: 100%;
        padding: 1.5rem 1.5rem;
        font-size:13px;
    }
    .product-wrap .right .info table tr th {
        border-bottom: none;
    }
}






/* 게시판 작성 상단 타이틀 */
.input-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2rem;
}
.input-title h3 {
    font-size:2.2rem;
    color:#000;
    font-weight:700;
}
.input-title p {
    font-size:1.4rem;
    color:#666;
}
.input-title p span {
    color:#008a3d;
}

@media (max-width:1025px){
    .input-title h3 {
        font-size:2rem;
    }
}





/* 상단 검색 체크박스 */
.detail-search {
    padding:2rem 0;
    border-bottom:solid 1px #e5e5e5;
}






/* 가격 표시 */
.price-wrap {
    margin-top: 1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}
.price-wrap .price {
    font-size:1.8rem;
    color:#000;
    font-weight:700;
}

@media (max-width:1025px){
    .price-wrap .price {
        font-size:1.6rem;
    }
}





/* 상품 정보 고시 */
.product-info-notice {

}
.product-info-notice h3.tit {
    font-size:2.2rem;
    color:#000;
    font-weight:700;
    margin-bottom:2rem;
}

@media (max-width:1025px){
    .product-info-notice h3.tit {
        font-size:2rem;
    }
}





/* 게시판 의견 목록 */
.board-comment-wrap {

}
.board-comment-wrap h3.tit {
    font-size:2.2rem;
    color:#000;
    font-weight:700;
    margin-bottom:2rem;
}
.board-comment-wrap .comment-list {
    border-top:solid 1px #000;
}
.board-comment-wrap .comment-list ul {

}
.board-comment-wrap .comment-list ul li {
    display:flex;
    flex-direction:column;
    gap:1rem;
    border-bottom:solid 1px #e5e5e5;
    padding:1.5rem 0;
    font-size:1.5rem;
}
.board-comment-wrap .comment-list ul li > div.top {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:2rem;
    padding:1.5rem 0;
}
.board-comment-wrap .comment-list ul li > div.top .no {
    font-size:1.4rem;
    color:#666;
    width:4rem;
    text-align:center;
}
.board-comment-wrap .comment-list ul li > div.top .comment {
    flex:1;
    font-size:1.5rem;
    color:#000;
    line-height:1.4;
}
.board-comment-wrap .comment-list ul li > div.top .comment-btn-wrap {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.board-comment-wrap .comment-list ul li > div.top .comment-btn-wrap button {
    display:inline-block;
    font-size:1.3rem;
    color:#666;
    border-radius:0.4rem;;
    padding:0.5rem 1rem;
}
.board-comment-wrap .comment-list ul li > div.top .comment-btn-wrap button.edit {
    border:solid 1px var(--ccolor);
    color:#008a3d;
}
.board-comment-wrap .comment-list ul li > div.top .comment-btn-wrap button.delete {
    border:solid 1px #000;
    color:#000;
}
.board-comment-wrap .comment-list ul li > div.top .name {
    font-size:1.5rem;
    color:#666;
}
.board-comment-wrap .comment-list ul li > div.top .date {
    font-size:1.5rem;
    color:#666;
}
/* 수정 모드 */
.board-comment-wrap .comment-list ul li div.edit-box {
    display:flex;
}
.board-comment-wrap .comment-list ul li div.edit-box .f-textarea-box {
    flex:1;
}
.board-comment-wrap .comment-list ul li div.edit-box .f-textarea-box .f-textarea {
    height:8rem;
    border-radius:0;
}
.board-comment-wrap .comment-list ul li div.edit-box .btn-box button {
    width: 12rem;
    height: 8rem;
    line-height: 8rem;
    background: #757575;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
}
.board-comment-wrap .comment-list ul li.no-data {
    padding:2rem 0;
}
.board-comment-wrap .comment-list ul li.no-data p {
    text-align:center;
    font-size:1.5rem;
    color:#666;
}

@media (max-width:1025px){
    .board-comment-wrap h3.tit {
        font-size:2rem;
    }

}
@media (max-width:620px){
    .board-comment-wrap .comment-list ul li > div.top .comment {
        flex-basis:100%;
        padding:0 1.5rem;
    }
}


.board-comment-wrap .comment-write {
    display:flex;
    width:100%;
}
.board-comment-wrap .comment-write .f-textarea-box {
    flex:1;
}
.board-comment-wrap .comment-write .f-textarea-box .f-textarea {
    width:100%;
    height:8rem;
    border-radius:0;
}
.board-comment-wrap .comment-write .btn-comment-write {
    width:12rem;
    height:8rem;
    line-height:8rem;
    background:#757575;
    color:#fff;
    font-size:1.5rem;
    text-align:center;
}

@media (max-width:1025px){
    .board-comment-wrap .comment-write .btn-comment-write {
        width:10rem;
    }
}



/* 보안코드 */
.security-code {
    width:380px;
    border:solid 1px #e5e5e5;
    background:#fff;
}
.security-code .img-box {
    display:flex;
    align-items:center;
    border-bottom:solid 1px #e5e5e5;    
}
.security-code .img-box span:first-child {
    flex:1;
    border-right:solid 1px #e5e5e5;
}
.security-code .img-box span:last-child {
    width:100px;
}
.security-code .img-box img {
    width:100%;
    height:100%;
    object-fit: cover;
}
.security-code .f-input-box {
    
}
.security-code .f-input-box .f-input {
    height:5.8rem;
    line-height:5.8rem;
    border:none;
    border-radius:0;
}
.security-code .f-input-box .f-input:focus {
    border:solid 1px var(--ccolor);
}
@media (max-width:481px){
    .security-code {
        width:100%;
    }
    .security-code .img-box {
        width:100%;
    }
    
}





/* 행정처분 정보 테이블 */
.dsp-list {
    
}
.dsp-list ul {
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    row-gap:4rem;
}
.dsp-list ul li {
    flex:1 1 calc(50% - 1rem);
}
.dsp-list ul li p.cname {
    font-size:2.4rem;
    color:#000;
    font-weight:700;
}
.dsp-list ul li p.txt {
    margin-top: 1rem;
    font-size:1.6rem;
    color:#000;
    line-height:1.5;
}
.dsp-list ul li p.txt span {
    color:#008a3d;
}

@media (max-width:1025px){
    .dsp-list ul {
        flex-direction:column;
    }
    .dsp-list ul li p.cname {
        font-size:2.2rem;
    }
    .dsp-list ul li p.txt {
        font-size:1.5rem;
    }
}







/* 학교급식 어제와 오늘 */
.sm-history {

}
.sm-history .top {
    display:flex;
    align-items:center;
    margin-bottom:2rem;
}
.sm-history .top p {
    margin-left:auto;
    font-size:1.5rem;
    color:#000;
    line-height:1.5;
}
.sm-history .top p span {
    color:#008a3d;
}
.sm-history dl {
    display:flex;
    gap:4rem;
    margin-bottom:3rem;
}
.sm-history dl dt {
    border-top:solid 2px var(--ccolor);
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding-top:3rem;
    width:27rem;
}
.sm-history dl dt p.year {
    font-size:3rem;
    color:#008a3d;
    font-weight:700;
}
.sm-history dl dt p.title {
    font-size:2.6rem;
    color:#000;
    font-weight:700;
}
.sm-history dl dd {
    padding-top:3rem;
    border-top:solid 2px #ddd;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2rem;
}
.sm-history dl dd p.txt {
    font-size:1.8rem;
    color:#666;
    line-height:1.5;
    word-break: keep-all;
    word-wrap: break-word;
}
.sm-history dl dd ul {
    display:flex;
    gap:2rem;
}
.sm-history dl dd ul li {
    display:flex;
    flex-direction:column;
    gap:2rem;
}
.sm-history dl dd ul li .thumb img {
    width:100%;
    height:100%;
    object-fit: cover;
}
.sm-history dl dd .subject {
    max-width:54rem;
    font-size:1.6rem;
    color:#000;
    text-align:center;
}

@media (max-width:850px){
    .sm-history dl {
        flex-direction:column;
        gap:2rem;
        margin-bottom:5rem;
    }
    .sm-history dl dt {
        width:100%;
        padding-top:2rem;
    }
    .sm-history dl dt p.year {
        font-size:2.5rem;
    }
    .sm-history dl dt p.title {
        font-size:2.2rem;
    }
    .sm-history dl dd p.txt {
        font-size:1.6rem;
    }

}


.sm-greeting {
    margin-top:5rem;
    display:flex;
    gap:4rem;
    padding:3rem;
    border:solid 1px #ddd;
    background:#fff;
}
.sm-greeting .txt {
    flex:1;
    padding:5rem 0;
}
.sm-greeting .txt p {
    margin-bottom: 3rem;
    font-size:1.8rem;
    color:#666;
    line-height:1.6;
    word-break: keep-all;
    word-wrap: break-word; 
}
.sm-greeting .txt p b {
    font-weight:700;
    font-size:1.6rem;
    letter-spacing: 2px;
    color:#000;
}
.sm-greeting .txt p strong {
    color:#000;
    font-weight:700;
}
.sm-greeting .img {
    flex:1;
    display:flex;
    flex-direction:column;
    gap: 1rem;
}
.sm-greeting .img img {
    width:100%;
    height:100%;
    object-fit: cover;
}

@media (max-width:850px){
    .sm-greeting {
        flex-direction:column;
    }
    .sm-greeting .txt {
        padding:0;
    }
    .sm-greeting .txt p {
       font-size:1.6rem;
    }
    .sm-greeting .img {
        width:100%;
    }
}
@media (max-width:481px){
    .sm-history .top p {
        font-size:1.4rem;
    }
    .sm-greeting {
        padding:3rem 2rem;
    }
}







/* 영양상담 신청 */
.consult-wrap {
    margin-top: 3rem;
    border-top:solid 1px #ddd;
    padding-top: 2rem;
    display:flex;
    align-items:center;
    gap:1rem;
    padding-left:27px;
}
.consult-wrap p.tit {
    font-size:1.5rem;
    color:#000;
}






/* 회원구분 선택 */
.target-type {
    margin-bottom: 5rem;
}
.target-type ul {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
}
.target-type ul li {
    display:flex;
    align-items:center;
    gap:3rem;
}
.target-type ul li::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1.4rem;
    background:#d9d9d9;
}
.target-type ul li:last-child::after {
    display:none;
}
.target-type ul li button,
.target-type ul li a {
    position:relative;
    display:block;
    font-size:2.4rem;
    color:#666;
}
.target-type ul li.current button,
.target-type ul li.current a {
    color:#008a3d;
    font-weight:700;
}
.target-type ul li.current button::after,
.target-type ul li.current a::after {
    display:inline-block;
    content:"";
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    width:100%;
    height:2px;
    background:#008a3d;
}
.target-type ul li.current button::before,
.target-type ul li.current a::before {
    display:inline-block;
    content:"";
    position:absolute;
    bottom:-1.2rem;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:0.6rem solid transparent;
    border-right:0.6rem solid transparent;
    border-top:0.6rem solid var(--ccolor);
}

@media (max-width:1025px){
    .target-type ul {
        gap:2rem;
    }
    .target-type ul li {
        gap:2rem;
    }
    .target-type ul li button,
    .target-type ul li a {
        font-size:2.2rem;
    }
}
@media (max-width:481px){
    .target-type ul li button,
    .target-type ul li a {
        font-size:2rem;
    }
}



/* 팝업용 설정 탭 선택 */
.popup-target-type {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.popup-target-type ul {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
}
.popup-target-type ul li {
    display:flex;
    align-items:center;
    gap:2rem;
}
.popup-target-type ul li::after {
    display:inline-block;
    content:"";
    width:1px;
    height:1.4rem;
    background:#d9d9d9;
}
.popup-target-type ul li:last-child::after {
    display:none;
}
.popup-target-type ul li button,
.popup-target-type ul li a {
    position:relative;
    display:block;
    font-size:2.2rem;
    color:#666;
    word-break:keep-all;
    word-wrap:break-word;
    line-height:1.3;
    letter-spacing: -0.28px;
}
.popup-target-type ul li.current button,
.popup-target-type ul li.current a {
    color:#008a3d;
    font-weight:700;
}
.popup-target-type ul li.current button::after,
.popup-target-type ul li.current a::after {
    display:inline-block;
    content:"";
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    width:100%;
    height:2px;
    background:#008a3d;
}
.popup-target-type ul li.current button::before,
.popup-target-type ul li.current a::before {
    display:inline-block;
    content:"";
    position:absolute;
    bottom:-1.2rem;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:0.6rem solid transparent;
    border-right:0.6rem solid transparent;
    border-top:0.6rem solid var(--ccolor);
}

@media (max-width:1025px){
    .popup-target-type ul {
        gap:2rem;
    }
    .popup-target-type ul li {
        gap:2rem;
    }
    .popup-target-type ul li button,
    .popup-target-type ul li a {
        font-size:2rem;
    }
}
@media (max-width:520px){
    .popup-target-type ul {
        gap:1rem;
    }
    .popup-target-type ul li {
        gap:1rem;
    }
    .popup-target-type ul li button,
    .popup-target-type ul li a {
        font-size:1.8rem;
    }
}




/* 회원가입 타입 선택 */
.agree-wrap {
    margin-bottom: 6rem;
}




/* link wrap */
.link-wrap {
    position:relative;
    margin-top:1rem;
    padding-top:1rem;
    border-top:dashed 1px #ddd;
    display:flex;
    flex-direction:column;
    padding-right:3rem;
}
.link-wrap .btn-link-remove {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:0;
}





/* 준비중 */
.preparing-blank {
    display:flex;
    align-items:center;
    justify-content:center;
}
.preparing-blank img {
    max-width:100%;
    height:auto;
}





/* 비밀번호 변경/재설정 */
.pass-change-box {
    position: relative;
    max-width: 52rem;
    margin: 0 auto;
    padding: 4rem 6rem;
    background: #fff;
    border-radius: 1.2rem;
    z-index:1;
}
.pass-change-box .desc {
    font-size:1.4rem;
    font-weight:400;
    color:#666;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}
.pass-change-box input[type=password] {
    font-family: 'pretendard', sans-serif;
}
.pass-change-box .f-input {
    height:5.2rem;
    line-height:5.2rem;
}
.pass-change-box .error-msg {
    display:none;
}
.pass-change-box .error-msg.active {
    display:block;
    margin-top: 2rem;
}
.pass-change-box .error-msg p {
    font-size:13px;
    line-height:1.5;
    color:#008a3d;
}

@media (max-width:481px){
    .pass-change-box {
        padding: 4rem 3rem;
    } 
}






/* 레시피 나눔 */
.recipe-list-wrap {
    display:flex;
    gap:2rem;
}
.recipe-list-wrap .left {

}
.recipe-list-wrap .left .list-box {    
    padding:2rem;
    background:#ebf1ef;
    border:solid 1px #e5e5e5;
    border-top: solid 1px var(--ccolor);
}
.recipe-list-wrap .left .list-box h3 {
    font-size:1.6rem;
    color:#000;
    font-weight:700;
}
.recipe-list-wrap .left .list-box div {
    margin-top:1rem;
    background:#fff;
    border:solid 1px #e5e5e5;
    border-radius:1rem;
    padding:1rem 1rem;    
}
.recipe-list-wrap .left .list-box ul {
    max-height: 50rem;
    scrollbar-width: thin;
    scrollbar-color: #aaa #fff;
    overflow-y:auto;
}
.recipe-list-wrap .left .list-box ul::-webkit-scrollbar {
    width: 6px;
}
.recipe-list-wrap .left .list-box ul::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 4px;
}
.recipe-list-wrap .left .list-box ul::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 4px;
}

.recipe-list-wrap .left .list-box ul li {
    border-bottom:dashed 1px #e5e5e5;
    padding:1rem 0.5rem;
}
.recipe-list-wrap .left .list-box ul li:last-child {
    border-bottom:none;
}
.recipe-list-wrap .left .list-box ul li a {
    display:block;
    font-family: 'Pretendard';
    font-size:1.5rem;
    color:#666;
    padding-right:3rem;
}
.recipe-list-wrap .left .list-box ul li a.active,
.recipe-list-wrap .left .list-box ul li a:hover {
    color:#008a3d;
    background:url("../img/vs-next.svg") no-repeat right center;
    text-decoration:underline;
}

.recipe-list-wrap .right {
    flex:1;
}

@media (max-width:640px){
    .recipe-list-wrap {
        flex-direction: column;
    }
    .recipe-list-wrap .left {
        width:100%;
    }
    .recipe-list-wrap .right {
        width:100%;
    }
    .recipe-list-wrap .left .list-box ul {
        max-height: 20rem;
        display:flex;
        flex-wrap:wrap;
        gap:10%;
    }
    .recipe-list-wrap .left .list-box ul li {
        width:40%;
    }
    .recipe-list-wrap .left .list-box ul li:last-child {
        border-bottom:dashed 1px #e5e5e5;
    }
    
}





/* 급식 관련 법령 */
.raw-sec {
    background:#fff;
    border-radius:1.2rem;
    padding:4rem;
}
.raw-sec dl {
    
}
.raw-sec dl dt {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;  
}
.raw-sec dl dt > div {
    font-size: 2.4rem;
    font-weight: bold;
    color: #000;  
}
.raw-sec dl dd {
    margin-top:1rem;
    border-top:solid 1px var(--ccolor);
    padding-top:2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.raw-sec dl dd ul {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}
.raw-sec dl dd ul li {
    border-radius: 0.6rem;
    border: dashed 1px #ccc;
    background-color: #f9f9f9;
}
.raw-sec dl dd ul li a {
    display:block;
    height:4.4rem;
    line-height:4.4rem;
    font-size:1.6rem;
    color:#000;
    padding:0 1.5rem;
}


@media (max-width:640px){
    .raw-sec {
        padding:3rem;
    }
    .raw-sec dl dt > div {
        font-size: 2rem;
    }
    .raw-sec dl dd ul li a {
        height:4rem;
        line-height:4rem;
        font-size:1.5rem;
    }
}

@media (max-width:481px){
    .raw-sec {
        padding:2rem;
    }
}






/* 검색 결과 */
.search-result-wrap {

}
.search-result-wrap .total {
    padding:2rem 0;
    border-bottom:solid 1px #e5e5e5;
    text-align:center;
}
.search-result-wrap .total p {
    font-size:1.6rem;
    color:#000;
}
.search-result-wrap .total p span {
    color:#008a3d;
}

/* text */
.result-list ul {
    
}
.result-list ul li {
    padding:4rem 0;
    border-bottom:solid 1px #e5e5e5;
}
.result-list ul li .loc {
    display:flex;
    align-items:center;
    gap:1rem;
}
.result-list ul li .loc span {
    display:flex;
    align-items:center;
    gap:1rem;
    font-size: 1.6rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #000;
}
.result-list ul li .loc span::after {
    display:inline-block;
    content:"";
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid #aaa;
    border-right: 2px solid #aaa;
    transform: rotate(45deg);
    margin-top: -0.2rem;
}
.result-list ul li .loc span:last-child:after {
    display:none;
}
.result-list ul li .subject {
    margin-top:2rem;
    font-size: 1.8rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left;
    color: #000;
}
.result-list ul li .subject span.date {
    font-size:1.6rem;
    color:#666;
    font-weight:400;
}
.result-list ul li .memo {
    margin-top:1.5rem;
    font-size: 1.6rem;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.56;
    letter-spacing: normal;
    text-align: left;
    color: #666;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
/* 더보기 */
.result-list .more {
    margin-top:4rem;
    text-align:center;
}
.result-list .more button {
    display:inline-block;
    height:40px;
    line-height:40px;
    padding:0 2rem;
    border-radius:0.8rem;
    border:solid 1px #000;
    background:#000;
    font-size: 1.4rem;
    color:#fff;
    text-align:center;
}

/* gallery */
.result-list ~ .gallery-list {
    margin-top:5rem;
}
.gallery-list ul {
    display:flex;
    flex-wrap:wrap;
    margin-left:-2%;
}
.gallery-list ul li {
    width:calc(25% - 2%);
    margin-left:2%;
    padding:4rem 0;
    border-bottom:solid 1px #e5e5e5;
}
.gallery-list ul li .loc {
    display:flex;
    align-items:center;
    gap:1rem;
}
.gallery-list ul li .loc span {
    display:flex;
    align-items:center;
    gap:1rem;
    font-size: 1.6rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #000;
}
.gallery-list ul li .loc span::after {
    display:inline-block;
    content:"";
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid #aaa;
    border-right: 2px solid #aaa;
    transform: rotate(45deg);
    margin-top: -0.2rem;
}
.gallery-list ul li .loc span:last-child:after {
    display:none;
}
.gallery-list ul li .subject {
    margin-top:2rem;
    font-size: 1.6rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left;
    color: #000;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.gallery-list ul li .subject span.date {
    font-size:1.4rem;
    color:#666;
    font-weight:400;
}
.gallery-list ul li .img-box {
    margin-top:1rem;
    border:solid 1px #e5e5e5;
}
.gallery-list ul li .img-box img {
    width:100%;
    height:auto;
}
/* 더보기 */
.gallery-list .more {
    margin-top:4rem;
    text-align:center;
}
.gallery-list .more button {
    display:inline-block;
    height:40px;
    line-height:40px;
    padding:0 2rem;
    border-radius:0.8rem;
    border:solid 1px #000;
    background:#000;
    font-size: 1.4rem;
    color:#fff;
    text-align:center;
}

@media (max-width:850px){
    .gallery-list ul li {
        width:calc(50% - 2%);
    }
}





/* 다빈도 분석 조회 */
.top-search.school-search .search-box .box1.analysis .tit {
    display:flex;
    align-items:center;
    gap:1rem;
}
@media (max-width:520px){
    .top-search.school-search .search-box .box1.analysis {
        flex-wrap:wrap;
    }
    .top-search.school-search .search-box .box1.analysis .tit {
        width:100%;
        text-align:center;
        justify-content:center;
    }
    .top-search.school-search .search-box .box1.analysis .f-input-box {
        width:100%;
    }
}





/* 툴팁 */
.tooltip-wrapper {
    position: relative; 
    display: flex; 
    align-items: center;
  }
  .tooltip-wrapper button { 
    display:inline-block;
    font-size: 0;
    width: 2rem;
    height: 2rem;
    background: url("../img/tooltip.svg") no-repeat center;
    background-size: contain;
  }
  .tooltip-wrapper .tooltip-content { 
    display: none; 
    position: absolute; 
    bottom: calc(100% + 0.5rem); 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #333; 
    color: #fff; 
    padding: 10px 10px; 
    border-radius: 5px; 
    font-size: 12px; 
    z-index: 1; 
  }
  .tooltip-wrapper .tooltip-content p {
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
  }
  .tooltip-wrapper:hover .tooltip-content,
  .tooltip-wrapper:focus-within .tooltip-content,
  .tooltip-wrapper.active .tooltip-content { display: block; }





  /* 서브메뉴 */
  .sub-menu-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
    flex-wrap:wrap;
    row-gap:2rem;
  }
  .sub-menu-wrap .left {
    display:flex;
    align-items:center;
    gap:1rem;
  }
  .sub-menu-wrap .left ul {
    display:flex;
    align-items:center;
    gap:1rem;
  }
  .sub-menu-wrap .left ul li {
    display:flex;
    align-items:center;
    gap:1.5rem;
  }
  .sub-menu-wrap .left ul li::after {
    content:'';
    display:block;
    width:1px;
    height:1rem;
    border-left:solid 1px #ddd;
  }
  .sub-menu-wrap .left ul li:last-child::after {
    display:none;
  }
  .sub-menu-wrap .left ul li a {
    display:block;
    font-size:2rem;
    color:#000;
    font-weight:500;
  }
  .sub-menu-wrap .left ul li.active a {
    color:#008a3d;
    font-weight:700;
    text-decoration: underline;
  }
  .sub-menu-wrap .right {
    display:flex;
    align-items:center;
    gap:1rem;
  }
  .sub-menu-wrap a {
    display:block;
  }




/* 활용대상, 개발기관 추가 */
.target-develop {
    display:flex;
    align-items:center;
    gap:1rem;
}

@media (max-width:680px){
    .target-develop {
        flex-basis:100%;
        justify-content:center;
    }
}




/* 다빈도 선택 영역 */
.sch-area-box {
    display:flex;
    align-items:center;
    gap:1rem;
}
.sch-area-box .f-input-box .f-input {
    border:solid 1px #ddd !important;
}
.sch-area-box .f-input-box .f-input:focus {
    border:solid 1px var(--ccolor) !important;
}
.sch-area-box .f-check-box label {
    color:#008a3d !important;
}
.sch-area-box .tit {
    font-size:13px;
    color:#000;
    font-weight:500;
}
.sch-area-box .row {
    display:flex;
    align-items:center;
    gap:1rem;
}

@media (max-width:620px){
    .sch-area-box {
        width:100%;
    }
    .box1 .sch-area-box + .sch-area-box {
        margin-top:-1rem !important;
    }
    .sch-area-box .row {
        flex-wrap:wrap;
        padding: 1rem 0;
        width:100%;
    }
    .sch-area-box .row + .row {
        padding-top:0;
        justify-content:center;
    }
    .sch-area-box .row .select-box {
        width:100%;
    }
    .sch-area-box .row .tit {
        width:100%;
        justify-content: center;
    }
    .sch-area-box .row .f-input-box {
        width:100%;
    }
    .sch-area-box .row .f-input-box .f-input {
        width:100% !important;
    }
}





/* 요리명, 재료명 추가 */
.food-name-button-wrap {
    position:relative;    
}
.food-name-button-wrap button.btn-food-name-add {
    display: inline-block;
    width: 100%;
    border: solid 1px #ddd;
    outline-style: none;
    vertical-align: middle;
    padding: 0 4.5rem 0 1.5rem;
    height: 40px;
    line-height: 40px;
    border-radius: 0.8rem;
    color: #555;
    font-size: 13px;
    font-weight: 400;
    background: #fff url("../img/select-arr.svg") no-repeat right 1.2rem center;
    background-size: 1.2rem auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.35s;
    
}
.food-name-button-wrap button.btn-food-name-add:focus {
    outline:none;
    border:solid 1px var(--ccolor);
    background: #fff url("../img/select-arr-active.svg") no-repeat right 1.2rem center;
}
.food-name-button-wrap.active button.btn-food-name-add {
    position:relative;
    border:solid 1px #ddd;
    border-radius: 0.8rem 0.8rem 0 0;
    background:#eee url("../img/select-arr.svg") no-repeat right 1.2rem center;
    border-bottom:none;
}
.food-name-button-wrap.active::after {
    content:'';
    display:block;
    height:11px;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    border-left:solid 1px #ddd;
    border-right:solid 1px #ddd;
    background:#eee;
    z-index:10000;
}

.food-name-box {
    position:absolute;
    top:calc(100% + 1rem);
    right:0;
    width:55rem;
    background:#fff;
    border:solid 1px #ddd;
    border-radius:0.8rem 0 0.8rem 0.8rem;
    z-index:1000;
    padding:1rem 1rem 3rem;
    background:#eee;
    z-index:1;
}
.food-name-box .rel {
    position:relative;
}
.food-name-box label {
    white-space: nowrap;
}
.food-name-box .rel p.nt {
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    font-size:1.3rem;
    color:#666;
}

/* food-name-box 기본 숨김 */
.food-name-box {
    display: none;
}

/* food-name-box가 보일 때 */
.food-name-box.show {
    display: flex;
}

/* food-name-button-wrap이 숨겨질 때 */
.food-name-button-wrap.hide {
    display: none;
}

/* 요리명, 재료명 입력 활성화 시 */
.search-box.dabin-active {
    padding-bottom:8rem;
}


@media (max-width:720px){
    .food-name-button-wrap {
        width:100%;
    }
    .food-name-button-wrap button.btn-food-name-add {
        width:100%;
    }
    .food-name-button-wrap.active::after {
        display:none !important;
    }
    .food-name-button-wrap .food-name-box {
        width:100% !important;
        top:100%;
        border-radius:0 0 0.8rem 0.8rem;
        border-top:none;
        padding-top:0;
    }
    .search-box.dabin-active {
        padding-bottom:10rem;
    }
}



/* 학교명 연관검색어 스타일 */
.school-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}
/* 통합플랫폼 연관검색어 스타일 */
.f-input-box {
    position: relative;
}

.platform-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.suggestions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.suggestions-list li {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s ease;
}

.suggestions-list li:hover {
    background-color: #f8f9fa;
}

.suggestions-list li:last-child {
    border-bottom: none;
}

.suggestions-list li:empty {
    display: none;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    .platform-suggestions {
        max-height: 150px;
        font-size: 14px;
    }
    
    .suggestions-list li {
        padding: 8px 12px;
        font-size: 13px;
    }
}








/* AI 급식 식단 */
.ai-search-box {
    display:flex;
    align-items:center;
    gap:3rem;
    border-radius: 1.2rem;
    background-color: #f2f2f2;
    padding:2rem 2rem;
    justify-content:center;
}
.ai-search-box .box1 {
    display:flex;
    align-items:center;
    gap:3rem;
}
.ai-search-box .box1::after {
    content:'';
    display:block;
    width:1px;
    height:10px;
    border-left:solid 1px #d9d9d9;
}
.ai-search-box .box1 .tit {
    font-size:14px;
    color:#000;
    font-weight:500;
}
.ai-search-box .box1 .f-check-box-wrap {
    display:flex;
    align-items:center;
    gap:1rem;
}
.ai-search-box .box1 .f-check-box-wrap .f-check-box input[type=checkbox] + label {
    font-size:14px;
}
.ai-search-box .box2 {
    display:flex;
    align-items:center;
    gap:1rem;
}
.ai-search-box .box2 .tit {
    margin-right:2rem;
    font-size:14px;
    color:#000;
    font-weight:500;
}
.ai-search-box .box2 .date-box input[type=date],
.ai-search-box .box2 .date-box input[type=month]{
    background:#fff;
}
.ai-search-box .box3 {
    margin-left:-2rem;
}

@media (max-width:980px){
    .ai-search-box {
        flex-direction:column;
        row-gap:2rem;
        padding:3rem 2rem;
    }
    .ai-search-box .box1 {
        flex-direction:column;
        width:100%;
        row-gap:2rem;
    }
    .ai-search-box .box1::after {
        width:100%;
        height:1px;
        border-left:none;
        border-top:solid 1px #e5e5e5;
    }
    .ai-search-box .box2 {
        flex-direction:column;
        width:100%;
        row-gap:2rem;
    }
    .ai-search-box .box2::after {
        content:'';
        display:block;
        width:100%;
        height:1px;
        border-left:none;
        border-top:solid 1px #e5e5e5;
    }
    .ai-search-box .box3 {
        margin-left:0;
    }
}



/* AI 식단 제목 */
.ai-meal-tit {
    text-align:center;
    margin-top:4rem;
    border-bottom:solid 1px var(--ccolor);
    padding-bottom:1.2rem;
    margin-bottom:4rem;
}
.ai-meal-tit h3 {
    font-size:2.8rem;
    font-weight:700;
    color:#000;
}

@media (max-width:1200px){
    .ai-meal-tit h3 {
        font-size:2.4rem;
    }
}
@media (max-width:980px){
    .ai-meal-tit h3 {
        font-size:2.2rem;
    }
}

/* AI 식단 상단 */
.ai-meal-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:4rem;
    gap:2rem;
}
.ai-meal-top .top-left {
    min-width:34.5rem;
}
.ai-meal-top .top-left .btn-view-type {
    display:flex;
    align-items:center;
    gap:1rem;
}
.ai-meal-top .top-left .btn-view-type button {
    display:inline-block;
    height:40px;
    line-height:40px;
    padding:0 2rem;
    border-radius:0.8rem;
    font-size:13px;
    color:#008a3d;
    font-weight:500;
    border:solid 1px var(--ccolor);
}
.ai-meal-top .top-left button.active {
    background:#008a3d;    
    color:#fff;
}
.ai-meal-top .top-right {
    flex:2.5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    row-gap:4rem;
}
.ai-meal-top .top-right .date {    
    font-size:2.4rem;
    color:#000;
    font-weight:600;
    padding-left:2rem;
}
.ai-meal-top .top-right .button {
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

@media (max-width:1200px){
    .ai-meal-top {
        flex-direction:column;
        gap:2rem;
        margin-top:2rem;
        row-gap:4rem;
    }
    .ai-meal-top .top-left {
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:auto;
        width:100%;
    }
    .ai-meal-top .top-right .date {  
        padding-left:0;
    }
    .ai-meal-top .top-right {
        width:100%;
    }
}
@media (max-width:980px){
    .ai-meal-top .top-right .date {
        font-size:2rem;
    }
}



/* AI 식단 본문 */
.ai-meal-body {
    display:flex;
    margin-top:1rem;
    gap:2rem;
}
.ai-meal-body .body-left {
    flex:1;
    min-width:34.5rem;
}
.ai-meal-body .body-left > .inner {
    margin-top:2rem;
    position:relative;
    padding:3rem 2rem 3rem 2rem;
    background-color: #fff;
    border-radius: 0.8rem;
    overflow-y: auto;
}
.ai-meal-body .body-left > .inner::-webkit-scrollbar {
    width: 0.8rem;
}

.ai-meal-body .body-left > .inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0.4rem;
}

.ai-meal-body .body-left > .inner::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 0.4rem;
}

.ai-meal-body .body-left > .inner::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.ai-meal-body .body-right {
    flex:2.5;
}
.ai-meal-body .body-right > .inner {
    margin-top:2rem;
    position:relative;
    background-color: #fff;
    border-radius: 0.8rem;
    padding:3rem 2rem 3rem 2rem;
}

@media (max-width:1280px){
    .ai-meal-body .body-left {
        min-width:auto;
    }
}
@media (max-width:1200px){
    .ai-meal-body {
        margin-top:2rem;
        flex-direction:column;
        gap:2rem;
    }
    .ai-meal-body .body-left > .inner {
        width:100%;
        max-height:none !important;
        height:auto;
    }
    /* 가로 스크롤바 스타일 */
    .ai-meal-body .body-left > .inner {
        overflow-x: auto;
    }
    .ai-meal-body .body-left > .inner::-webkit-scrollbar {
        height: 0.8rem;
    }
    .ai-meal-body .body-left > .inner::-webkit-scrollbar-track:horizontal {
        background: #f1f1f1;
        border-radius: 0.4rem;
    }
    .ai-meal-body .body-left > .inner::-webkit-scrollbar-thumb:horizontal {
        background: #999;
        border-radius: 0.4rem;
    }
    .ai-meal-body .body-left > .inner::-webkit-scrollbar-thumb:horizontal:hover {
        background: #666;
    }
    .ai-meal-body .body-right {
        width:100%;
        margin-top:3rem;
    }
}


/* AI 식단 상단 왼쪽/오른쪽 분리 */
.ai-meal-body .body-left .top-left {

}
.ai-meal-body .body-left .top-left .btn-view-type {
    display:flex;
    align-items:center;
    gap:1rem;
}
/* 버튼은 항상 보이도록 처리 (웹접근성) */
.ai-view-type-day .top-left .btn-view-type {
    display:flex !important;
    visibility:visible !important;
}
.ai-meal-body .body-left .top-left .btn-view-type button {
    display:inline-block;
    height:40px;
    line-height:40px;
    padding:0 2rem;
    border-radius:0.8rem;
    font-size:13px;
    color:#008a3d;
    font-weight:500;
    border:solid 1px var(--ccolor);
}
.ai-meal-body .body-left .top-left button.active {
    background:#008a3d;    
    color:#fff;
}
.ai-meal-body .body-right .top-right {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    row-gap:4rem;
}
.ai-meal-body .body-right .top-right .date {    
    font-size:2.4rem;
    color:#000;
    font-weight:600;
}
.ai-meal-body .body-right .top-right .button {
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

@media (max-width:1200px){
    .ai-meal-body .body-left .top-left {
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:auto;
        width:100%;
    }
    .ai-meal-body .body-right .top-right .date {  
        padding-left:0;
    }
    .ai-meal-body .body-right .top-right {
        width:100%;
    }
}
@media (max-width:980px){
    .ai-meal-body .body-right .top-right .date {
        font-size:2rem;
    }
}



/* AI 식단 본문 왼쪽 */
.ai-meal-body .body-left ul {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.ai-meal-body .body-left ul li a {

}

.ai-meal-body .body-left ul li .day-food-name-box {
    display:flex;
}
.ai-meal-body .body-left ul li .day-food-name-box .day {
    display:flex;
    flex-direction:column;
}
.ai-meal-body .body-left ul li .day-food-name-box .day span {
    width:4.8rem;
    height:7.6rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border:solid 1px var(--ccolor);
    border-right:none;
    font-size:1.6rem;
    color:#000;
    font-weight:700;
}
.ai-meal-body .body-left ul li .day-food-name-box .day span.week {
    border-radius:0.8rem 0 0 0;
    background:#008a3d;
    color:#fff;
}
.ai-meal-body .body-left ul li .day-food-name-box .day span.date {
    border-radius:0 0 0 0.8rem;
}

.ai-meal-body .body-left ul li .day-food-name-box .food-name {
    flex:1;
    padding:1.5rem 3rem;
    border: solid 1px #dfe1e0;
    background-color: #fbfbfb;
    border-radius:0 0.8rem 0.8rem 0.8rem;
}
.ai-meal-body .body-left ul li .day-food-name-box .food-name p {
    margin-top: 1rem;
    padding-bottom:0.5rem;
    font-size:1.6rem;
    color:#000;
    border-bottom:dashed 1px #ddd;
}
.ai-meal-body .body-left ul li .day-food-name-box .food-name p:last-child {
    border-bottom:none;
}

/* active */
.ai-meal-body .body-left ul li a.active .food-name {

}
.ai-meal-body .body-left ul li a.active .day-food-name-box .day span.date {
    color:#008a3d;
}
.ai-meal-body .body-left ul li a.active .food-name p {
    color:#008a3d;
}   

@media (max-width:1200px){
    .ai-meal-body .body-left {
        overflow-y:hidden;
        overflow-x:auto;
    }
    .ai-meal-body .body-left::-webkit-scrollbar {
        height: 0.8rem;
    }
    .ai-meal-body .body-left::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 0.4rem;
    }
    .ai-meal-body .body-left::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 0.4rem;
    }
    .ai-meal-body .body-left::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .ai-meal-body .body-left ul {
        flex-direction:row;
        gap:2rem;
    }
    .ai-meal-body .body-left ul li .day-food-name-box .food-name p {
        white-space:nowrap;
    }
}


/* right-1 */
.ai-meal-body .body-right .right-1 {
    display:flex;
    gap:4rem;
}
.ai-meal-body .body-right .right-1 .inchart {
    position:relative;
    width:100%;
    height:27rem;
}
.ai-meal-body .body-right .right-1 .balance-info {
    position:relative;
    width:50%;
}
.ai-meal-body .body-right .right-1 .balance-info .chart-legend {
    position:absolute;
    bottom:4rem;
    left:50%;
    transform:translateX(-50%);
}
.ai-meal-body .body-right .right-1 .balance-info .chart-legend .legend-text {
    position:relative;
    font-size: 1.3rem;
    color: #008a3d;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.ai-meal-body .body-right .right-1 .balance-info .chart-legend .legend-text::before {
    content:'';
    display:inline-block;
    width:1rem;
    height:1rem;
    background:#008a3d;
    border-radius:100vh;
}
/* 영양균형 정보 대체 콘텐츠 표 */
.ai-meal-body .body-right .right-1 .balance-info .balance-table-wrap {
    margin-top: 2rem;
}
.ai-meal-body .body-right .right-1 .balance-info .balance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}
.ai-meal-body .body-right .right-1 .balance-info .balance-table caption {
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
}
.ai-meal-body .body-right .right-1 .balance-info .balance-table thead {
    background-color: #f5f5f5;
}
.ai-meal-body .body-right .right-1 .balance-info .balance-table th,
.ai-meal-body .body-right .right-1 .balance-info .balance-table td {
    padding: 1rem;
    text-align: left;
    border: 1px solid #ddd;
}
.ai-meal-body .body-right .right-1 .balance-info .balance-table th {
    font-weight: 600;
    background-color: #f5f5f5;
}
.ai-meal-body .body-right .right-1 .balance-info .balance-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.ai-meal-body .body-right .right-1 .balance-info canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.ai-meal-body .body-right .right-1 .allergy-info {
    position:relative;
    width:50%;
}
.ai-meal-body .body-right .right-1 .allergy-info .inchart {
    height:23rem;
}
/* 알레르기 정보 대체 콘텐츠 표 */
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table-wrap {
    margin-top: 2rem;
}
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table caption {
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
}
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table thead {
    background-color: #f5f5f5;
}
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table th,
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table td {
    padding: 1rem;
    text-align: left;
    border: 1px solid #ddd;
}
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table th {
    font-weight: 600;
    background-color: #f5f5f5;
}
.ai-meal-body .body-right .right-1 .allergy-info .allergy-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.ai-meal-body .body-right .right-1 .allergy-info canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.ai-meal-body .body-right .right-1 h3 {
    font-size: 1.6rem;
    color:#000;
    font-weight:700;
    margin-bottom:2rem;
}

@media (max-width:680px){
    .ai-meal-body .body-right .right-1 {
        flex-direction:column;
        gap:2rem;
    }
    .ai-meal-body .body-right .right-1 .balance-info {
        width:100%;
    }
    .ai-meal-body .body-right .right-1 .allergy-info {
        width:100%;
    }
}


/* right-3 */
@media (max-width:680px){
    .ai-meal-body .body-right .right-2 {
        margin-top:3rem;
    }
}



/* right-3 */
.ai-meal-body .body-right .right-3 {

}
.ai-meal-body .body-right .right-3 h3 {
    font-size:1.6rem;
    color:#000;
    font-weight:700;
}
.ai-meal-body .body-right .right-3 .ai-recipe-list {
    margin-top:3rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.ai-meal-body .body-right .right-3 .ai-recipe-list li {
    display:flex;
    align-items:center;
    gap:1rem;
}
.ai-meal-body .body-right .right-3 .ai-recipe-list li span {
    display:inline-block;
    width:2.8rem;
    height:2.8rem;
    line-height:2.8rem;
    text-align:center;
    font-size:1.4rem;
    color:#fff;
    font-weight:700;
    background:#ca5400;
    border-radius:100vh;
}
.ai-meal-body .body-right .right-3 .ai-recipe-list li p {
    flex:1;
    font-size:1.8rem;
    color:#000;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}

@media (max-width:580px){
    .ai-meal-body .body-right .right-3 .ai-recipe-list li span {
        width:2.4rem;
        height:2.4rem;
        line-height:2.4rem;
    }
    .ai-meal-body .body-right .right-3 .ai-recipe-list li p {
        font-size:1.6rem;
    }
}




/* AI 일별 영양소 비율 */
.ai-daily-nutrition {
    position:relative;
    margin-top:5rem;
}
.ai-daily-nutrition h3 {
    font-size:2.4rem;
    color:#000;
    font-weight:700;
}
.ai-daily-nutrition .chart-wrapper {
    position: relative;
    margin-top:2rem;
    background:#fff;
    border-radius:0.8rem 0.8rem 0 0;
    padding:3rem 2rem;
}
.ai-daily-nutrition .chart-wrapper canvas {
    width:100%;
    height:100%;
}
.ai-daily-nutrition .chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    background:#fff;
    border-radius:0 0 0.8rem 0.8rem;
    padding:0 2rem 3rem 2rem;
}
/* 일별 영양소 비율 대체 콘텐츠 표 */
.ai-daily-nutrition .nutrition-table-wrap {
    margin-top: 2rem;
}
.ai-daily-nutrition .nutrition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}
.ai-daily-nutrition .nutrition-table caption {
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
}
.ai-daily-nutrition .nutrition-table thead {
    background-color: #f5f5f5;
}
.ai-daily-nutrition .nutrition-table th,
.ai-daily-nutrition .nutrition-table td {
    padding: 1rem;
    text-align: center;
    border: 1px solid #ddd;
}
.ai-daily-nutrition .nutrition-table th {
    font-weight: 600;
    background-color: #f5f5f5;
}
.ai-daily-nutrition .nutrition-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.ai-daily-nutrition .chart-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #666;
}

.ai-daily-nutrition .chart-legend .legend-color {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
}

.ai-daily-nutrition .chart-legend .legend-line {
    width: 2rem;
    height: 0.2rem;
}

.ai-daily-nutrition .chart-legend .legend-dashed {
    border-top: 0.2rem dashed;
}

.ai-daily-nutrition .chart-legend .legend-area {
    width: 2rem;
    height: 1.2rem;
    opacity: 0.3;
}

@media (max-width:980px){
    .ai-daily-nutrition h3 {
        font-size:2rem;
    }
}


/* AI 알레르기 번호 */
.ai-allergy-number {
    margin-top:2rem;
    background:#fff;
    border-radius:0.8rem;
    padding:3rem 2rem;
}
.ai-allergy-number h3 {
    font-size:2.4rem;
    color:#000;
    font-weight:700;
}
.ai-allergy-number .allergy-number-list {
    margin-top:3rem;
}
.ai-allergy-number .allergy-number-list ul {
    display:flex;
    flex-wrap:wrap;
    gap:1.8rem;
    row-gap:3rem;
}
.ai-allergy-number .allergy-number-list ul li {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.8rem;
}
.ai-allergy-number .allergy-number-list ul li .img {
    width:9rem;
    height:9rem;
    margin:0 auto;
    border:solid 3px var(--ccolor);
    border-radius:100vh;
    overflow:hidden;
}
.ai-allergy-number .allergy-number-list ul li .img img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.ai-allergy-number .allergy-number-list ul li .info {
    flex:1;
}
.ai-allergy-number .allergy-number-list ul li .info p {
    text-align:center;
    font-size:2rem;
    color:#000;
}

@media (max-width:980px){
    .ai-allergy-number h3 {
        font-size:2rem;
    }
    .ai-allergy-number .allergy-number-list ul li .img {
        width:8rem;
        height:8rem;
    }
    .ai-allergy-number .allergy-number-list ul li .info p { 
        font-size:1.8rem;
    }
}
@media (max-width:580px){
    .ai-allergy-number .allergy-number-list ul li .img {
        width:7rem;
        height:7rem;
    }
    .ai-allergy-number .allergy-number-list ul li .info p { 
        font-size:1.6rem;
    }
}




/* ai 식단표 일별/월별 */
.ai-view-type-day {

}
.ai-view-type-month {
    display:none;
}
.ai-view-type-month .month-box {
    margin-top:1rem;
    background:#fff;
    border-radius:0.8rem;
    padding:3rem 2rem;
}
.ai-view-type-month .meal-tbl {
    margin-top: 1rem;
}
.ai-view-type-month .meal-tbl table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.ai-view-type-month .meal-tbl table th {
    width: auto;
    background: #008a3d;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    height: 4.8rem;
    vertical-align: middle;
}
.ai-view-type-month .meal-tbl table td {
    width: auto;
    position:relative;
    border: solid 1px #dfe1e0;
    vertical-align: middle; 
    text-align:center;
    padding-top:3.8rem;
}
.ai-view-type-month .meal-tbl table td.disabled {
    background:#f9f9f9;
}
.ai-view-type-month .meal-tbl table td .date {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width: 100%;
    height: 3.8rem;
    line-height: 3.8rem;
    background:#ebf1ee;
    font-size: 1.4rem;
    color: #000;
    font-weight: 700;
}
/* 토요일 날짜 색상 */
.ai-view-type-month .meal-tbl table td.saturday .date {
    color: #3498db;
}
.ai-view-type-month .meal-tbl table td .meal-content,
.ai-view-type-month .meal-tbl table td .special-event {
    display:inline-block;
    width: 100%;
    padding:2rem 0.5rem;
}
.ai-view-type-month .meal-tbl table td .meal-content p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.5;
}
.ai-view-type-month .meal-tbl table td .special-event p {
    font-size: 1.4rem;
    color: #008a3d;
}




/* 인쇄용 식단표 */
#print-content-meal .tit {
    text-align: center;
    border-bottom: solid 1px var(--ccolor);
    padding-bottom: 1rem;
}
#print-content-meal .tit h3 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #000;
}

#print-content-meal .meal-tbl {
    margin-top: 1rem;
}
#print-content-meal .meal-tbl table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#print-content-meal .meal-tbl table th {
    width: auto;
    background: #008a3d;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    height: 4.8rem;
    vertical-align: middle;
}
#print-content-meal .meal-tbl table td {
    width: auto;
    position:relative;
    border: solid 1px #dfe1e0;
    vertical-align: middle; 
    text-align:center;
    padding-top:3.8rem;
}
#print-content-meal .meal-tbl table td.disabled {
    background:#f9f9f9;
}
#print-content-meal .meal-tbl table td .date {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width: 100%;
    height: 3.8rem;
    line-height: 3.8rem;
    background:#ebf1ee;
    font-size: 1.4rem;
    color: #000;
    font-weight: 700;
}
/* 토요일 날짜 색상 */
#print-content-meal .meal-tbl table td.saturday .date {
    color: #3498db;
}
#print-content-meal .meal-tbl table td .meal-content,
#print-content-meal .meal-tbl table td .special-event {
    display:inline-block;
    width: 100%;
    padding:2rem 0.5rem;
}
#print-content-meal .meal-tbl table td .meal-content p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.5;
}
#print-content-meal .meal-tbl table td .special-event p {
    font-size: 1.4rem;
    color: #008a3d;
}

/* AI 알레르기 번호 */
#print-content-meal .allergy-number-wrap {
    background:#fff;
}
#print-content-meal .allergy-number-wrap h3 {
    font-size:2.4rem;
    color:#000;
    font-weight:700;
    border-bottom: solid 1px var(--ccolor);
    padding-bottom: 1rem;
}
#print-content-meal .allergy-number-wrap .allergy-number-list {
    margin-top:3rem;
}
#print-content-meal .allergy-number-wrap .allergy-number-list ul {
    display:flex;
    flex-wrap:wrap;
    gap:1.8rem;
    row-gap:3rem;
}
#print-content-meal .allergy-number-wrap .allergy-number-list ul li {
    display:flex;
    flex-direction:column;
    gap:1.8rem;
}
#print-content-meal .allergy-number-wrap .allergy-number-list ul li .img {
    width:9rem;
    height:9rem;
    border:solid 3px var(--ccolor);
    border-radius:100vh;
    overflow:hidden;
}
#print-content-meal .allergy-number-wrap .allergy-number-list ul li .img img {
    width:100%;
    height:100%;
    object-fit:cover;
}
#print-content-meal .allergy-number-wrap .allergy-number-list ul li .info {
    flex:1;
}
#print-content-meal .allergy-number-wrap .allergy-number-list ul li .info p {
    text-align:center;
    font-size:2rem;
    color:#000;
}

@media (max-width:980px){
    #print-content-meal .allergy-number-wrap h3 {
        font-size:2rem;
    }
    #print-content-meal .allergy-number-wrap .allergy-number-list ul li .img {
        width:8rem;
        height:8rem;
    }
    #print-content-meal .allergy-number-wrap .allergy-number-list ul li .info p { 
        font-size:1.8rem;
    }
}
@media (max-width:580px){
    #print-content-meal .allergy-number-wrap .allergy-number-list ul li .img {
        width:7rem;
        height:7rem;
    }
    #print-content-meal .allergy-number-wrap .allergy-number-list ul li .info p { 
        font-size:1.6rem;
    }
}





/* 토글 스위치 스타일 */
.btn-switch-wrap {
    position: relative;
    display: inline-block;
}

.switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-label {
    font-size:0;
    display: block;
    width: 4.4rem;
    height: 2.4rem;
    background-color: #909090;
    border-radius: 1.2rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.switch-label::before {
    content: '×';
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    transition: opacity 0.3s ease;
}

.switch-label::after {
    content: 'o';
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.switch-slider {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
}

.switch-input:checked + .switch-label {
    background-color: #008a3d;
}

/* 포커스 상태 스타일 */
.switch-input:focus + .switch-label {
    outline: none;
    box-shadow: 0 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
}

.switch-input:checked + .switch-label::before {
    opacity: 0;
}

.switch-input:checked + .switch-label::after {
    opacity: 1;
}

.switch-input:checked + .switch-label .switch-slider {
    transform: translateX(2rem);
}





/* AI 급식 식단 생성 */
.ai-create-form .top {
    display:flex;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
}
.ai-create-form .top h3 {
    font-size: 2.2rem;
    color: #000;
    font-weight: 700;
}
.ai-create-form .top p.sub-tit {
    font-size:13px;
    color:#008a3d;
    line-height:1.5;
    letter-spacing: -0.28px;
    word-break:keep-all;
    word-wrap:break-word;
}
.ai-create-form .top .ml-auto {
    margin-left:auto;
}
.ai-create-form .in-box {
    margin-top:2rem;
    padding: 4rem;
    border-top: solid 1px var(--ccolor);
    background-color: #f6f6f6;
    border-radius:0 0 1rem 1rem;
}

.ai-create-form .in-box h4.tit {
    font-size: 2rem;
    color: #000;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ai-create-form .in-box h4.tit i {
    display: inline-block;
    width: 1.6rem;
    height: 1.2rem;
    background: url("../img/icon-search.svg") no-repeat center center;
    background-size: contain;
}

/* 메뉴군별 제공빈도 설정 */
.ai-create-form .in-box.frequency-wrap {
    display:flex;
    gap:4rem;
}
.ai-create-form .in-box.frequency-wrap .left {
    width:50%;
}
.ai-create-form .in-box.frequency-wrap .right {
    width:50%;
}
.ai-create-form .in-box.frequency-wrap h4.tit {
    font-size:1.8rem;
    color:#000;
    font-weight:700;
}
.ai-create-form .in-box.frequency-wrap .board-tbl-basic {
    overflow:auto;
}
.ai-create-form .in-box.frequency-wrap table th,
.ai-create-form .in-box.frequency-wrap table td {
    text-align:center;
    white-space:nowrap;
}
.ai-create-form .in-box.frequency-wrap input[type=text] {
    width:6rem;
    text-align:center;
}
.ai-create-form .in-box.frequency-wrap table td span.lh40 {
    display:flex;
    height:40px;
    align-items:center;
    justify-content:center;
}

/* 전체 맛 설정 */
.ai-create-form .in-box .taste-wrap {
    display:flex; 
    border:solid 1px #dfe1e0;
    border-top:solid 1px var(--ccolor);
    background-color: #fff;   
    padding:4rem 0; 
    row-gap:4rem;
}
.ai-create-form .in-box .taste-wrap h4.tit {
    font-size:1.8rem;
    color:#000;
    font-weight:700;
    text-align:center;
    justify-content:center;
}
.ai-create-form .in-box .taste-wrap .left {
    width:50%;
    padding:0 3rem;
    display:flex;
    flex-direction:column;
    gap:4rem;
}
.ai-create-form .in-box .taste-wrap .right {
    width:50%;
    padding:0 3rem;
    border-left:dashed 1px #ddd;
    display:flex;
    flex-direction:column;
    gap:4rem;
}
.ai-create-form .in-box .taste-wrap .taste-chart {
    display:flex;
    flex-direction:column;
    gap:2rem;
}
.ai-create-form .in-box .taste-wrap .chart-wrapper {
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.ai-create-form .in-box .taste-wrap .chart-wrapper .chart-container {
    position:relative;
    background:#f2f2f2;
    border-radius:0.6rem;
    height:1.2rem;
}
.ai-create-form .in-box .taste-wrap .chart-wrapper .chart-container span {
    position:relative;
    display:inline-block;
    height:100%;
    background:#008a3d;
    border-radius:0.6rem;
}
.ai-create-form .in-box .taste-wrap .chart-wrapper .chart-container span::before {
    display:inline-block;
    content:'';
    position:absolute;
    top:50%;
    left:calc(100% - 1rem);
    transform:translateY(-50%);
    width:1.2rem;
    height:1.2rem;
    border-radius:100vh;
    border:solid 5px var(--ccolor);
    background:#fff;
}
.ai-create-form .in-box .taste-wrap .chart-tit {
    position:relative;
    padding-top:1rem;
    display:flex;
    justify-content:space-between;
}
.ai-create-form .in-box .taste-wrap .chart-tit button {
    font-size: 1.6rem;
    color:#666;
    font-weight:400;
}
.ai-create-form .in-box .taste-wrap .chart-tit button.active {
    color:#008a3d;
    font-weight:700;
}
.ai-create-form .in-box .taste-wrap .chart-tit button:nth-child(2) {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

/* 주식 - 식재료 설정 */
.ai-create-form .in-box .ingredient-wrap {
    display:flex;
    padding:4rem 1rem;
    border: solid 1px #dfe1e0;
    border-top:solid 1px var(--ccolor);
    background-color: #fff;
    row-gap:4rem;
}
.ai-create-form .in-box .ingredient-wrap .left {
    width:50%;
    padding:0 2rem;
}
.ai-create-form .in-box .ingredient-wrap .right {
    width:50%;
    padding:0 2rem;
    border-left:dashed 1px #ddd;
}
.ai-create-form .in-box .ingredient-wrap .top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.ai-create-form .in-box .ingredient-wrap h4.tit {
    font-size:1.8rem;
    color:#000;
    font-weight:700;
    margin-bottom:1rem;
}

.ai-create-form .in-box .ingredient-wrap .input-wrap {
    display:flex;
    align-items:center;
    gap:1rem;
}
.ai-create-form .in-box .ingredient-wrap .input-wrap .f-input-box {
    flex:1;
}
.ai-create-form .in-box .ingredient-wrap .input-wrap .btn-wrap {
    display:flex;
    align-items:center;
    gap:1rem;
    margin:0 0;
}

/* 입력 항목 */
.ai-create-form .in-box .input-keyword-box {
    margin-top:1rem;
    border:solid 1px #ddd;
    background:#f6f6f6;
    padding:2rem;
    border-radius:0.8rem;
}
.ai-create-form .in-box .ingredient-wrap .right .input-keyword-box {
    height: calc(100% - 4rem);
}
.ai-create-form .in-box .input-keyword-box ul {
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
}
.ai-create-form .in-box .input-keyword-box ul li {
    display:flex;
    align-items:center;
    gap:1rem;
    border-radius: 0.6rem;
    border:dashed 1px #aaa;
    padding:1rem 1rem;
    background:#fff;
}
.ai-create-form .in-box .input-keyword-box ul li span {
    font-size: 1.3rem;
    color: #000;
}
.ai-create-form .in-box .input-keyword-box ul li .key-delete {
    display:inline-block;
    font-size: 0;
    background: url("../img/key-delete.svg") no-repeat center center;
    background-size: contain;
    width: 1.4rem;
    height: 1.4rem;
}

/* 특수일 지정 */
.ai-create-form .in-box .special-day-wrap {
    display:flex;
    flex-direction:column;
    padding:4rem 1rem;
    border: solid 1px #dfe1e0;
    border-top:solid 1px var(--ccolor);
    background-color: #fff;
    row-gap:3rem;
}
.ai-create-form .in-box .special-day-wrap .list {
    display:flex;
    flex-direction:column;
    gap:1rem;
    width:100%;
    padding:0 2rem;
}
.ai-create-form .in-box .special-day-wrap .list li {
    display:flex;
    align-items:center;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:solid 1px #ddd;
}
.ai-create-form .in-box .special-day-wrap .list li .subject {
    font-size: 1.8rem;
    color: #000;
    font-weight: 700;
}
.ai-create-form .in-box .special-day-wrap .list li .key-delete {
    margin-left:auto;
    display:inline-block;
    height:32px;
    line-height:32px;
    padding:0 1rem;
    border-radius:0.6rem;
    border:solid 1px #757575;
    background:#757575;
    font-size:1.3rem;
    color:#fff;
    font-weight:400;
}

.ai-create-form .in-box .special-day-wrap .day-input-wrap {
    display:flex;
}
.ai-create-form .in-box .special-day-wrap .day-input-wrap > div {
    flex:1;
    padding:0 2rem;
    border-right:dashed 1px #ddd;
}
.ai-create-form .in-box .special-day-wrap .day-input-wrap > div:last-child {
    border-right:none;
}
.ai-create-form .in-box .special-day-wrap .day-input-wrap > div label {
    display:block;
    font-size:1.4rem;
    color:#000;
    font-weight:400;
    margin-bottom:1rem;
}
.ai-create-form .in-box .special-day-wrap .day-input-wrap > div .f-input-box {
    width:100%;
}

/* 특수일 옵션 */
.ai-create-form .in-box .special-day-wrap .day-input-wrap > div.option .indiv {
    height: calc(100% - 2.5rem);
    border-radius: 0.8rem;
    border: solid 1px #ddd;
    background-color: #f6f6f6;
    padding:2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.ai-create-form .in-box .btn-wrap.right {
    margin-bottom:0;
}

@media (max-width:1025px){
    .ai-create-form .in-box .input-keyword-box {
        flex-direction:column;
        align-items:center;
    }
}



/* 테이블 반응형 스타일 */
@media screen and (max-width: 1025px) {
    .ai-create-form .in-box .board-tbl-input table,
    .ai-create-form .in-box .board-tbl-input tbody,
    .ai-create-form .in-box .board-tbl-input tr,
    .ai-create-form .in-box .board-tbl-input th,
    .ai-create-form .in-box .board-tbl-input td {
        display: block;
        width: 100%;
    }
    .ai-create-form .in-box .board-tbl-input table th {
        padding: 0.5rem 2rem;
    }
    .ai-create-form .in-box .board-tbl-input table td {
        padding: 2rem 2rem;
        border: none;
    }
    .ai-create-form .in-box .board-tbl-input table tr:last-child td {
        border-bottom: solid 1px #e5e5e5;
    }
    /* 2칸짜리 행 처리 */
    .ai-create-form .in-box .board-tbl-input tr:has(td[colspan="3"]) th,
    .ai-create-form .in-box .board-tbl-input tr:has(td[colspan="3"]) td {
        width: 100%;
    }
    /* input 박스 너비 조정 */
    .ai-create-form .in-box .board-tbl-input .f-input-box.wd100 {
        width: 100%;
    }

    .ai-create-form h3 {
        font-size:2rem !important;
    }
    .ai-create-form .in-box h4.tit {
        font-size: 1.8rem;
    }

    /* 메뉴군별 제공빈도 설정 */
    .ai-create-form .in-box.frequency-wrap h4.tit {
        font-size:1.6rem !important;
    }
    .ai-create-form .in-box.frequency-wrap {
        flex-direction:column;
    }
    .ai-create-form .in-box.frequency-wrap .left {
        width:100%;
    }
    .ai-create-form .in-box.frequency-wrap .right {
        width:100%;
    }

    /* 전체 맛 설정 */
    .ai-create-form .in-box .taste-wrap h4.tit {
        font-size:1.6rem !important;
    }
    .ai-create-form .in-box .taste-wrap {
        flex-direction:column;
    }
    .ai-create-form .in-box .taste-wrap .left {
        width:100%;
    }
    .ai-create-form .in-box .taste-wrap .right {
        width:100%;
        border-left:none;
    }

    /* 주식 - 식재료 설정 */
    .ai-create-form .in-box .ingredient-wrap {
        flex-direction:column;
    }
    .ai-create-form .in-box .ingredient-wrap h4.tit {
        font-size:1.6rem !important;
    }
    .ai-create-form .in-box .ingredient-wrap .left {
        width:100%;
    }
    .ai-create-form .in-box .ingredient-wrap .right {
        width:100%;
        border-left:none;
    }

    /* 특수일 지정 */
    .ai-create-form .in-box .special-day-wrap .day-input-wrap {
        flex-direction:column;
        row-gap:3rem;
    }
    .ai-create-form .in-box .special-day-wrap .list li .subject {
        font-size:1.6rem;
    }
    .ai-create-form .in-box .special-day-wrap .day-input-wrap > div {
        width:100%;
        border-right:none;
    }
    .ai-create-form .in-box .special-day-wrap .day-input-wrap > div:last-child {
        border-bottom:none;
    }
}
@media (max-width:520px){
    .ai-create-form .in-box {
        padding:3rem 2rem;
    }
    .ai-create-form .in-box .ingredient-wrap {
        padding:3rem 0;
    }
    .ai-create-form .in-box .special-day-wrap {
        padding:3rem 0;
    }
}

/* 달력 스타일 */
.ai-create-form .calendar-wrap {
    background: #f6f6f6;
    border-radius: 0.8rem;
    padding: 2rem;
    border:solid 1px #ddd;
}

.ai-create-form .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ai-create-form .calendar-prev,
.ai-create-form .calendar-next {
    width:1.8rem;
    height:1.8rem;
    position:relative;
}
.ai-create-form .calendar-prev::before {
    content: "";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 0.8rem;
    height: 0.8rem;
    border-left: solid 2px #000;
    border-bottom: solid 2px #000;
    transform: translate(-25%, -50%) rotate(45deg);
}
.ai-create-form .calendar-next::before {
    content: "";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 0.8rem;
    height: 0.8rem;
    border-right: solid 2px #000;
    border-top: solid 2px #000;
    transform: translate(-75%, -50%) rotate(45deg);
}


.ai-create-form .calendar-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.ai-create-form .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 10px;
}

.ai-create-form .weekday {
    text-align: center;
    padding: 0.5em 0;
    font-weight: 600;
    color: #000;
    font-size: 1.4rem;
}

.ai-create-form .calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ai-create-form .date-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    border-radius: 100vh;
    transition: background-color 0.2s;
    min-height: 30px;
}

.ai-create-form .date-cell:hover {
    background-color: #e8f4fd;
}

.ai-create-form .date-cell.sunday {
    color: #e74c3c;
}

.ai-create-form .date-cell.saturday {
    color: #3498db;
}

.ai-create-form .date-cell.selected {
    background-color: #008a3d;
    color: white;
    font-weight: 600;
    border-radius: 100vh;
}

.ai-create-form .date-cell.selected:hover {
    background-color: #229954;
}

.ai-create-form .date-cell.last-day {

}

.ai-create-form .date-cell:empty {
    cursor: default;
}

.ai-create-form .date-cell:empty:hover {
    background-color: transparent;
}

.ai-create-form .date-cell.holiday {
    color: #e74c3c;
    font-weight: 600;
}

.ai-create-form .date-cell.holiday.selected {
    background-color: #008a3d;
    color: white;
}





/* AI 급식 식단 소개 */
.ai-intro-banner {
    border-radius:0.8rem;
    overflow:hidden;
    background:#000;
    padding:2rem;
    font-size:0;
}
.ai-intro-banner img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.ai-intro-content dl {
    margin-top:10rem;
}
.ai-intro-content dl dt {
    font-size: 2.4rem;
    color:#000;
    font-weight:700;
}
.ai-intro-content dl dd {
    margin-top:2rem;
}
.ai-intro-content dl dd ul {
    display:flex;
    flex-wrap:wrap;
    margin-left:-4rem;
    row-gap:4rem;
}
.ai-intro-content dl dd ul li {
    width:calc(33.33% - 4rem);
    margin-left:4rem;
    background:#f6f6f6;
    padding:3rem;
    border-radius:0.8rem;
    min-height: 40rem;    
}
.ai-intro-content dl dd ul li:nth-child(1) {
    background:#f6f6f6 url("../img/ai-intro-1.png") no-repeat center bottom;
    background-size:32rem auto;
}
.ai-intro-content dl dd ul li:nth-child(2) {
    background:#f6f6f6 url("../img/ai-intro-2.png") no-repeat center bottom;
    background-size:26.5rem auto;
}
.ai-intro-content dl dd ul li:nth-child(3) {
    background:#f6f6f6 url("../img/ai-intro-3.png") no-repeat center bottom;
    background-size:28.9rem auto;
}
.ai-intro-content dl dd ul li:nth-child(4) {
    background:#f6f6f6 url("../img/ai-intro-4.png") no-repeat center bottom;
    background-size:32rem auto;
}
.ai-intro-content dl dd ul li:nth-child(5) {
    background:#f6f6f6 url("../img/ai-intro-5.png") no-repeat center bottom;
    background-size:14rem auto;
}
.ai-intro-content dl dd ul li:nth-child(6) {
    background:#f6f6f6 url("../img/ai-intro-6.png") no-repeat center bottom;
    background-size:21.8rem auto;
}
.ai-intro-content dl dd ul li span {
    display:inline-block;
    font-size: 1.6rem;
    color:#000;
    border-bottom:solid 1px #000;
    margin-bottom:1rem;
}
.ai-intro-content dl dd ul li p {
    font-size: 2rem;
    color:#333;
    line-height:1.3;
    word-break:keep-all;
    word-wrap:break-word;
}

@media screen and (max-width: 1025px) {
    .ai-intro-content dl {
        margin-top:6rem;
    }
    .ai-intro-content dl dt {
        font-size: 2.2rem;
    }
    .ai-intro-content dl dd ul li span {
        font-size: 1.6rem;
    }
    .ai-intro-content dl dd ul li p {
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 850px) {
    .ai-intro-content dl dd ul li {
        width:calc(50% - 4rem);
    }
}
@media (max-width:520px){
    .ai-intro-banner {
        padding:1rem;
    }
    .ai-intro-content dl {
        margin-top:4rem;
    }
    .ai-intro-content dl dt {
        font-size: 2rem;
    }
    .ai-intro-content dl dd ul li {
        width:100%;
    }
}



.ai-intro-use p {
    font-size: 1.8rem;
    color:#666666;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}
.ai-intro-use p span {
    display:inline-block;
    color: #008a3d;
}
.ai-intro-use .btn-wrap {

}
.ai-intro-use .btn-wrap a {
    display:inline-block;
    height:5.4rem;
    line-height:5.4rem;
    padding:0 2rem;
    border-radius:0.8rem;
    border:solid 1px var(--ccolor);
    background:#008a3d;
    font-size:1.8rem;
    color:#fff;
    text-align:center;
}

@media (max-width:520px){
    .ai-intro-use p {
        font-size:1.6rem;
    }
    .ai-intro-use .btn-wrap a {
        font-size:1.6rem;
    }
}






/* AI 급식 식단 결과 */
.create-result-wrap {
    max-width:116rem;
    margin:0 auto;
    background:#fff;
    border-radius:0.8rem;
    padding:4rem;
}
.create-result-wrap .tit {
    padding:4rem 0;
    font-size:4.8rem;
    color:#000;
    font-weight:700;
    text-align:center;
}
.create-result-wrap .tit span {
    color:#008a3d;
}

.create-result-wrap .top {
    margin-top:2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.create-result-wrap .top .left {
    display:flex;
    align-items:center;
    gap:1rem;
}

.create-result-wrap .top .left p.nt {
    font-size: 1.4rem;
    color:#008a3d;
}

.create-result-wrap .top .right {
    display:flex;
    align-items:center;
    gap:1rem;
}
.create-result-wrap .top .right .line {
    display:inline-block;
    width:1px;
    height:12px;
    font-size:0;
    border-left:solid 1px #d9d9d9;
}

.create-result-wrap .meal-tbl {
    margin-top: 2rem;
}
.create-result-wrap .meal-tbl table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.create-result-wrap .meal-tbl table th {
    width: auto;
    background: #008a3d;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    height: 4.8rem;
    vertical-align: middle;
}
.create-result-wrap .meal-tbl table td {
    width: auto;
    position:relative;
    border: solid 1px #dfe1e0;
    vertical-align: middle; 
    text-align:center;
    padding-top:3.8rem;
}
.create-result-wrap .meal-tbl table td.disabled {
    background:#f9f9f9;
}
.create-result-wrap .meal-tbl table td.holiday {
    background-color: #f9f9f9;
}
.create-result-wrap .meal-tbl table td .date {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width: 100%;
    height: 3.8rem;
    line-height: 3.8rem;
    background:#ebf1ee;
    font-size: 1.4rem;
    color: #000;
    font-weight: 700;
}
/* 토요일 날짜 색상 */
.create-result-wrap .meal-tbl table td.saturday .date {
    color: #3498db;
}
.create-result-wrap .meal-tbl table td .meal-content,
.create-result-wrap .meal-tbl table td .special-event {
    display:inline-block;
    width: 100%;
    padding:2rem 0.5rem;
}
.create-result-wrap .meal-tbl table td .meal-content p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.5;
}
.create-result-wrap .meal-tbl table td .special-event p {
    font-size: 1.4rem;
    color: #008a3d;
}

/* 알레르기 번호 */
.create-result-wrap .ai-allergy-number h4 {
    font-size: 2.4rem;
    color: #000;
    font-weight: 700;
    padding-bottom: 2rem;
    border-bottom: solid 1px var(--ccolor);
}


@media screen and (max-width: 1025px) {
    .create-result-wrap {
        padding:3rem;
    }
    .create-result-wrap .tit {
        padding:3rem 0;
        font-size:3.8rem;
    }
}
@media (max-width: 980px) {
    .create-result-wrap .ai-allergy-number h4 {
        font-size: 2rem;
    }
}
@media (max-width:580px){
    .create-result-wrap .top .right {
        flex-wrap:wrap;
    }
    .create-result-wrap .top .right .line {
        display:none;
    }
}
@media (max-width:520px){
    .create-result-wrap {
        padding:3rem 2rem;
    }
    .create-result-wrap .tit {
        padding:2rem 0;
        font-size:2.8rem;
    }
}



/* AI 급식 식단 수정 */
.create-result-wrap .meal-tbl-modify {
    margin-top: 2rem;
    overflow-x:auto;    
}
.create-result-wrap .meal-tbl-modify table {
    width: 100%;
    min-width:80rem;
    border-collapse: collapse;
    table-layout: fixed;
}
.create-result-wrap .meal-tbl-modify table th {
    width: auto;
    background: #008a3d;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    height: 4.8rem;
    vertical-align: middle;
}
.create-result-wrap .meal-tbl-modify table td {
    width: auto;
    position:relative;
    border: solid 1px #dfe1e0;
    vertical-align: top; 
    text-align:center;
    padding-top:3.8rem;
}
.create-result-wrap .meal-tbl-modify table td.disabled {
    background:#f9f9f9;
}
.create-result-wrap .meal-tbl-modify table td.holiday {
    vertical-align: middle;
    background-color: #f9f9f9;
}
.create-result-wrap .meal-tbl-modify table td .date {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width: 100%;
    height: 3.8rem;
    line-height: 3.8rem;
    background:#ebf1ee;
    font-size: 1.4rem;
    color: #000;
    font-weight: 700;
}
/* 토요일 날짜 색상 */
.create-result-wrap .meal-tbl-modify table td.saturday .date {
    color: #3498db;
}
.create-result-wrap .meal-tbl-modify table td .meal-content,
.create-result-wrap .meal-tbl-modify table td .special-event {
    display:inline-block;
    width: 100%;
    text-align:left;
    padding:2rem 1rem;
}

.create-result-wrap .meal-tbl-modify table td .meal-content {
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.create-result-wrap .meal-tbl-modify table td .meal-content p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.5;
}
.create-result-wrap .meal-tbl-modify table td.holiday .special-event {
    text-align:center;    
}
.create-result-wrap .meal-tbl-modify table td .special-event p {
    font-size: 1.4rem;
    color: #008a3d;
}






/* 나의 AI 급식 식단 통계 */
.my-ai-stats-wrap {
    max-width: 116rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 0.8rem;
    padding: 4rem;
}

/* top */
.my-ai-stats-wrap .top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:solid 1px var(--ccolor);
    padding-bottom:1.5rem;
}
.my-ai-stats-wrap .top h3 {
    font-size:2.2rem;
    color:#000;
    font-weight:700;
}
.my-ai-stats-wrap .top p {
    font-size:1.4rem;
    color:#666;
    font-weight:400;
}

/* msearch-box */
.my-ai-stats-wrap .msearch-box {
    margin-top:2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:2rem;
}
.my-ai-stats-wrap .msearch-box .left {
    display:flex;
    align-items:center;
    gap:1rem;
}
.my-ai-stats-wrap .msearch-box .right {
    display:flex;
    align-items:center;
    gap:1rem;
}
.my-ai-stats-wrap .msearch-box .right p {
    font-size:1.4rem;
    color:#008a3d;
    font-weight:400;
}

@media screen and (max-width: 1025px) {
    .my-ai-stats-wrap {
        padding: 3rem;
    }
    .my-ai-stats-wrap .top h3 {
        font-size:2rem;
    }
}
@media (max-width:520px){
    .my-ai-stats-wrap {
        padding: 3rem 2rem;
    }
    .my-ai-stats-wrap .top h3 {
        font-size:1.8rem;
    }
}


/* meal-list */
.my-ai-stats-wrap .meal-list {
    margin-top:2rem;
    display:flex;
    gap:1.6rem;
}
.my-ai-stats-wrap .meal-list .col {
    flex:1;
    padding:3rem;
    border-radius: 1.2rem;
    background-color: #fafafa;
}
.my-ai-stats-wrap .meal-list .col .list-title {
    font-size:1.8rem;
    color:#000;
    font-weight:700;
    margin-bottom:2rem;
}
/* list */
.my-ai-stats-wrap .meal-list .col ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.my-ai-stats-wrap .meal-list .col ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.my-ai-stats-wrap .meal-list .col ul li span.no {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: #000;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}
.my-ai-stats-wrap .meal-list .col ul li button.name,
.my-ai-stats-wrap .meal-list .col ul li span.name {
    font-size: 1.5rem;
    color: #666;
    line-height: 1.5;
    white-space:nowrap; 
}
.my-ai-stats-wrap .meal-list .col ul li span.order {
    margin-left: auto;
    font-size: 0;
    width: 1.2rem;
    height: 1.2rem;
}
.my-ai-stats-wrap .meal-list .col ul li span.order.up {
    background: url("../img/order_up.png") no-repeat center center;
    background-size: contain;
}
.my-ai-stats-wrap .meal-list .col ul li span.order.down {
    background: url("../img/order_down.png") no-repeat center center;
    background-size: contain;
}
.my-ai-stats-wrap .meal-list .col ul li span.order.keep {
    background: url("../img/order_keep.png") no-repeat center center;
    background-size: contain;
}

.my-ai-stats-wrap .meal-list .col ul li:first-child span.no {
    color:#008a3d;
}
.my-ai-stats-wrap .meal-list .col ul li:first-child button.name,
.my-ai-stats-wrap .meal-list .col ul li:first-child span.name {
    color:#008a3d;
    font-weight:600;
}

@media screen and (max-width: 1025px) {
    .my-ai-stats-wrap .meal-list .col .list-title {
        font-size:1.7rem;
    }
    .my-ai-stats-wrap .meal-list .col {
        padding:3rem 2rem;
    }
}
@media (max-width:820px){ 
    .my-ai-stats-wrap .meal-list {
        flex-direction:column;
    }
    .my-ai-stats-wrap .meal-list .col {
        width:100%;
    }
}
@media (max-width:520px){

}


/* stats-chart-wrap */
.my-ai-stats-wrap .stats-chart-wrap {
    margin-top:4rem;
    display:flex;
    gap:1.6rem;
}
.my-ai-stats-wrap .stats-chart-wrap .col.first {
    flex:1; 
}
.my-ai-stats-wrap .stats-chart-wrap .col.second {
    flex:2; 
}

.my-ai-stats-wrap .stats-chart-wrap .chart-wrap {
    margin-top:4rem;
    border:none;
    padding:0;
}
.my-ai-stats-wrap .stats-chart-wrap .chart-wrap .inchart #chart1 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.my-ai-stats-wrap .stats-chart-wrap .chart-wrap .inchart #chart2 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

@media (max-width:820px){ 
    .my-ai-stats-wrap .stats-chart-wrap {
        flex-direction:column;
        gap:4rem;
    }
    .my-ai-stats-wrap .stats-chart-wrap .col {
        width:100%;
    }
}





/* AI 급식 식단 생성 중 */
.ai-creating-wrap {
    margin-top:4rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:1.2rem;
    padding:10rem 4rem;
}
.ai-creating-wrap img {
    max-width:100%;
    width:12rem;
    height:auto;
    object-fit:contain;
}
.ai-creating-wrap img.gif {
    max-width:100%;
    width:28.2rem;
    height:auto;
    object-fit:contain;
}
.ai-creating-wrap a {
    display:block;
    margin-top:0.1rem;
    font-size:1.3rem;
    color:rgba(0, 0, 0, 0.005);
    text-align:center;
}
.ai-creating-wrap .step-wording {
    min-height:15rem;
}
.ai-creating-wrap .step-wording.gif {
    min-height:auto;
}
.ai-creating-wrap .step-wording .step {
    display:none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.ai-creating-wrap .step-wording .step.active {
    display:block;
    opacity: 1;
}
.ai-creating-wrap .txt {
    margin-top: 2rem;
    font-size:2.8rem;
    color:#000;
    font-weight:700;
    text-align:center;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}
.ai-creating-wrap .sub-txt {
    margin-top: 1rem;
    font-size:2.2rem;
    color:#666;
    font-weight:400;
    text-align:center;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}

@media (max-width:520px){
    .ai-creating-wrap {
        padding:6rem 2rem;
    }
    .ai-creating-wrap .txt {
        font-size:2.2rem;
    }
    .ai-creating-wrap .sub-txt {
        font-size:1.8rem;
    }
}






/* 마이페이지 급식 식단 상세 */

.board-tbl-view .meal-tbl {
    margin-top: 1rem;
}
.board-tbl-view .meal-tbl table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.board-tbl-view .meal-tbl table th {
    width: auto;
    background: #008a3d;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    height: 4.8rem;
    vertical-align: middle;
}
.board-tbl-view .meal-tbl table td {
    width: auto;
    position:relative;
    border: solid 1px #dfe1e0;
    vertical-align: middle; 
    text-align:center;
    padding-top:3.8rem;
}
.board-tbl-view .meal-tbl table td.disabled {
    background:#f9f9f9;
}
.board-tbl-view .meal-tbl table td .date {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width: 100%;
    height: 3.8rem;
    line-height: 3.8rem;
    background:#ebf1ee;
    font-size: 1.4rem;
    color: #000;
    font-weight: 700;
}
/* 토요일 날짜 색상 */
.board-tbl-view .meal-tbl table td.saturday .date {
    color: #3498db;
}
.board-tbl-view .meal-tbl table td .meal-content,
.board-tbl-view .meal-tbl table td .special-event {
    display:inline-block;
    width: 100%;
    padding:2rem 0.5rem;
}
.board-tbl-view .meal-tbl table td .meal-content p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.5;
}
.board-tbl-view .meal-tbl table td .special-event p {
    font-size: 1.4rem;
    color: #008a3d;
}




/* s2b-banner */
.s2b-banner {
    margin-top:6rem;
}
.s2b-banner img {
    display:block;
    max-width:100%;
    height:auto;
    object-fit:contain;
}





/* AI 급식 식단 설정 */
.ai-setting-form .in-box {
    margin-top:2rem;
    padding: 4rem;
    border-top: solid 1px var(--ccolor);
    background-color: #f6f6f6;
    border-radius:0 0 1rem 1rem;
}
.ai-setting-form .in-box.no-top {
    margin-top:0;
    border-top:none;
    border-radius:1rem;
}

.ai-setting-form .in-box .intro-txt {
    text-align:center;
}
.ai-setting-form .in-box .intro-txt p {
    font-size:2rem;
    color:#555;
    font-weight:400;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}
.ai-setting-form .in-box .intro-txt p span {
    color:#000;
}
.ai-setting-form .in-box .intro-txt p span b {
    color:#008a3d;
    font-weight:600;
}

.ai-setting-form .in-box .school-info {
    margin-top:4rem;
}
.ai-setting-form .in-box .school-info dl {
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.ai-setting-form .in-box .school-info dl dt {
    font-size:2.4rem;
    color:#000;
    font-weight:400;
    text-align:center;  
}
.ai-setting-form .in-box .school-info dl dd {
    margin-top:2rem;
    background:#fff;
    padding:3rem 2rem;
}
.ai-setting-form .in-box .school-info dl dd ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2rem;
}
.ai-setting-form .in-box .school-info dl dd ul li {
    font-size:1.8rem;
    color:#000;
}
.ai-setting-form .in-box .school-info dl dd ul li::after {
    content:"";
    display:inline-block;
    width:1px;
    height:1.2rem;
    border-left:solid 1px #ddd;
    vertical-align:middle;
    margin-left:2rem;
}
.ai-setting-form .in-box .school-info dl dd ul li:last-child::after {
    display:none;
}
.ai-setting-form .in-box .school-info dl dd ul li span {
    color:#008a3d;
}

/* setting-wrap */
.ai-setting-form .in-box .setting-wrap {
    margin-top:4rem;
}
.ai-setting-form .in-box .setting-wrap h4.tit {
    font-size: 1.8rem;
    color: #000;
    font-weight: 700;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap {
    margin-top:2rem;
    position:relative;
    display:flex;
    gap:1rem;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left {
    flex:1;
    padding:4rem;
    background:#fff;
    border-radius:0.6rem;
    display:flex;
    flex-direction:column;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl {
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem 0;
    border-bottom:dashed 1px #e0e0e0;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl.school-grade {
    padding-top:0;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl.high-grade {
    border-bottom:solid 1px var(--ccolor);
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl dt {
    font-size:1.5rem;
    color:#000;
    font-weight:700;
    width:8rem;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl dd {

}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl dd label {
    font-size:1.5rem;
    color:#000;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl dd span {
    font-size:1.4rem;
    color:#000;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left dl dd span.line {
    font-size:0;
    width:1px;
    height:1.2rem;
    border-left:solid 1px #d9d9d9;
    vertical-align:middle;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .left .btn-energy-wrap {
    margin-top:auto;
    padding-top:2rem;
    text-align:center;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right {
    flex:1;
    padding:4rem;
    background:#fff;
    border-radius:0.6rem;
    display:flex;
    flex-direction:column;
    position:relative;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip {
    display:inline-block;
    position:absolute;
    top:0;
    left:-2.5rem;
    width:4rem;
    height:1px;
    border-top:solid 1px #aaa;
    z-index:1;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip::before {
    content:"";
    display:inline-block;
    width:0.8rem;
    height:0.8rem;
    border-radius:100%;
    background:#fff;
    border:solid 2px #aaa;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip::after {
    content:"";
    display:inline-block;
    width:0.8rem;
    height:0.8rem;
    border-radius:100%;
    background:#fff;
    border:solid 2px #aaa;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip1 {
    top:20%;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip2 {
    top:50%;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip3 {
    top:80%;
}

.ai-setting-form .in-box .setting-wrap .energy-wrap .right dl {
    display:flex;
    flex-direction:column;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dt {
    font-size:2.4rem;
    color:#000;
    font-weight:400;
    text-align:center;
    padding-bottom:2rem;
    border-bottom:solid 1px var(--ccolor);
    line-height:1.4;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dt span {
    font-size:3.2rem;
    color:#008a3d;
    font-weight:600;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dd {
    margin-top:2rem;
    text-align:center;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dd p {
    font-size:1.8rem;
    color:#555;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}
.ai-setting-form .in-box .setting-wrap .energy-wrap .right .btn-energy-wrap {
    margin-top:auto;
    padding-top:2rem;
    text-align:center;
}



@media (max-width:1200px){
    .ai-setting-form .in-box .setting-wrap .energy-wrap {
        flex-direction:column;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .left {
        width:100%;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right {
        width:100%;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip {
        top:-0.5rem;
        transform: rotate(90deg);
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip1 {
        left:20%;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip2 {
        left:50%;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right .clip3 {
        left:80%;
    }
}
@media (max-width:520px){
    .ai-setting-form .in-box {
        padding:3rem 2rem;
    }
    .ai-setting-form .in-box .intro-txt p {
        font-size:1.8rem;
    }
    .ai-setting-form .in-box .school-info dl dt {
        font-size:2rem;
    }
    .ai-setting-form .in-box .school-info dl dd ul {
        gap:1rem;
    }
    .ai-setting-form .in-box .school-info dl dd ul li {
        font-size:1.6rem;
    }
    .ai-setting-form .in-box .school-info dl dd ul li span {
        font-size:1.6rem;
    }
    .ai-setting-form .in-box .school-info dl dd ul li::after {
        margin-left:1rem;
    }

    .ai-setting-form .in-box .setting-wrap h4.tit {
        font-size:1.6rem;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .left {
        padding:4rem 2rem;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .left dl {
        flex-direction:column;
        padding:2rem 0;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right {
        padding:4rem 2rem;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dt {
        font-size:2rem;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dt span {
        font-size:2.2rem;
    }
    .ai-setting-form .in-box .setting-wrap .energy-wrap .right dl dd p {
        font-size:1.6rem;
    }
}


/* nutrient-wrap */
.ai-setting-form .in-box .nutrient-wrap {
    margin-top:4rem;
    padding:4rem;
    background:#fff;
    border-radius:0.6rem;
}
.ai-setting-form .in-box .nutrient-wrap .board-tbl-basic {
    overflow:auto;
}
.ai-setting-form .in-box .nutrient-wrap .board-tbl-basic th,
.ai-setting-form .in-box .nutrient-wrap .board-tbl-basic td {
    white-space:nowrap;
    height:4.8rem;
    padding:1rem 1rem;
    font-size: 1.5rem;
}
.ai-setting-form .in-box .nutrient-wrap .board-tbl-basic thead tr:nth-child(2) th {
    font-weight:400;
}


.ai-setting-form .in-box .nutrient-wrap .nutrient-type {
    margin-top:3rem;
}
.ai-setting-form .in-box .nutrient-wrap .nutrient-type dl {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
}
.ai-setting-form .in-box .nutrient-wrap .nutrient-type dl dt {
    font-size:1.5rem;
    color:#000;
    font-weight:600;
}
.ai-setting-form .in-box .nutrient-wrap .nutrient-type dl dd {
    display:flex;
    align-items:center;
    gap:1rem;
}

@media (max-width:520px){
    .ai-setting-form .in-box .nutrient-wrap {
        padding:3rem 2rem;
    }
}



.ai-setting-form .relative {
    position:relative;
}

/* 식단 제외일 있음 체크시 노출 */
.ai-setting-form .exclude-date-wrap {
    display:none;
    max-width:32rem;
    position:absolute;
    top:calc(100% + 1rem);
    left:-2rem;
    z-index:100;
    background:#fff;
    padding:2rem;
    border-radius: 0.6rem;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
    border: solid 1px #ddd;
}
.ai-setting-form .exclude-date-wrap.top {
    top:auto;
    bottom:calc(100% + 6rem);
}
.ai-setting-form .exclude-date-wrap label {
    display: block;
    font-size: 1.4rem;
    color: #555;
    font-weight: 400;
    margin-bottom: 1rem;
}
/* 달력 스타일 */
.ai-setting-form .exclude-date-wrap .calendar-wrap {
    background: #f6f6f6;
    border-radius: 0.8rem;
    padding: 2rem;
    border:solid 1px #ddd;
}

.ai-setting-form .exclude-date-wrap .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ai-setting-form .exclude-date-wrap .calendar-prev,
.ai-setting-form .exclude-date-wrap .calendar-next {
    width:1.8rem;
    height:1.8rem;
    position:relative;
}
.ai-setting-form .exclude-date-wrap .calendar-prev::before {
    content: "";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 0.8rem;
    height: 0.8rem;
    border-left: solid 2px #000;
    border-bottom: solid 2px #000;
    transform: translate(-25%, -50%) rotate(45deg);
}
.ai-setting-form .exclude-date-wrap .calendar-next::before {
    content: "";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 0.8rem;
    height: 0.8rem;
    border-right: solid 2px #000;
    border-top: solid 2px #000;
    transform: translate(-75%, -50%) rotate(45deg);
}


.ai-setting-form .exclude-date-wrap .calendar-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.ai-setting-form .exclude-date-wrap .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 10px;
}

.ai-setting-form .exclude-date-wrap .weekday {
    text-align: center;
    padding: 0.5em 0;
    font-weight: 600;
    color: #000;
    font-size: 1.4rem;
}

.ai-setting-form .exclude-date-wrap .calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ai-setting-form .exclude-date-wrap .date-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    border-radius: 100vh;
    transition: background-color 0.2s;
    min-height: 3rem;
}

.ai-setting-form .exclude-date-wrap .date-btn {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    border-radius: 100vh;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ai-setting-form .exclude-date-wrap .date-cell:hover .date-btn {
    background-color: #e8f4fd;
}

.ai-setting-form .exclude-date-wrap .date-cell.sunday .date-btn {
    color: #e74c3c;
}

.ai-setting-form .exclude-date-wrap .date-cell.saturday .date-btn {
    color: #3498db;
}


.ai-setting-form .exclude-date-wrap .date-cell .date-btn.selected {
    background-color: #008a3d;
    color: white;
    font-weight: 600;
    border-radius: 100vh;
}
.ai-setting-form .exclude-date-wrap .date-cell:hover .date-btn.selected {
    background-color: #229954;
}

.ai-setting-form .exclude-date-wrap .date-cell.last-day {

}

.ai-setting-form .exclude-date-wrap .date-cell:empty {
    cursor: default;
}

.ai-setting-form .exclude-date-wrap .date-cell:empty:hover {
    background-color: transparent;
}

.ai-setting-form .exclude-date-wrap .date-cell.holiday .date-btn {
    color: #e74c3c;
    font-weight: 600;
}

.ai-setting-form .exclude-date-wrap .date-cell.holiday .date-btn.selected {
    background-color: #008a3d;
    color: white;
}

/* 식단 제외일 리스트 */
.ai-setting-form .exclude-date-wrap .date-list {
    margin-top:2rem;
    display:none;
    gap:1rem;
    flex-wrap:wrap;
}
.ai-setting-form .exclude-date-wrap .date-list li {
    font-size:1.2rem;
    color:#666;
    display:flex;
    align-items:center;
    gap:0.5rem;    
}
.ai-setting-form .exclude-date-wrap .date-list li:before {
    content:'';
    display:inline-box-block;
    width:0.4rem;
    height:0.4rem;
    background:#757575;
    border-radius:50%;
}



/** 개인정보처리방침 **/
.agree_box .inner {
    background: #fff;
    padding: 5rem;
}
.agree_box h2 {font-size:2.4rem; color:#222; font-weight:700; line-height:1;}
.agree_box dl {}

.agree_box dl > dd {}
.agree_box dl > dd h3 {font-size:1.7rem; color:#363636; font-weight:700;}
.agree_box dl > dd p {margin-top:5px; font-size:1.5rem; color:#363636; line-height:1.5;}
.agree_box dl > dd p b {
    font-weight:500;
}
.agree_box dl > dd p.nt {color:#666;}
.agree_box dl > dd p a.link {color:#000; text-decoration:underline;}
.agree_box dl > dd p.pd15 {padding-left:1.5rem;}
.agree_box dl > dd p.lst {margin-top:1.8rem; padding-left:2rem; text-indent:-2rem;}
.agree_box dl > dd .h3_sub {padding-left:1.5rem;}
.agree_box dl > dd .h3_sub h4 {margin-top:1.5rem; font-size:1.5rem; color:#363636; font-weight:400;}
.agree_box dl > dd .h3_sub h4 span {
    
}
.agree_box dl > dd .h3_sub p {padding-left:2rem; text-indent:-1rem; font-size:1.5rem; color:#363636;}

.agree_box dl > dd .agree_tbl {
    margin-top:1.5rem; 
    overflow-x:auto;
}
.agree_box dl > dd .agree_tbl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #ccc #f5f5f5;
    scrollbar-width: thin;
}
.agree_box dl > dd .agree_tbl::-webkit-scrollbar {
    height: 8px;
}
.agree_box dl > dd .agree_tbl::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.agree_box dl > dd .agree_tbl::-webkit-scrollbar-track {
    background: #f5f5f5;
}


.agree_box dl > dd .agree_tbl table {width:100%;}
.agree_box dl > dd .agree_tbl th {font-size:1.5rem; text-align:center; color:#414141; font-weight:500; background:#f5f5f5; height:4.8rem;}
.agree_box dl > dd .agree_tbl td {font-size:1.5rem; text-align:center; color:#646464; height:4.8rem; line-height:1.5; padding:1.5rem 1.5rem; word-break:keep-all; word-wrap:break-word;}
.agree_box dl > dd .agree_tbl table tr th + th,
.agree_box dl > dd .agree_tbl table tr td + td {border-left:solid 1px #ccc;}
.agree_box dl > dd .agree_tbl p.enc {margin-top:5px; font-size:1.5rem; color:#666; font-weight:300; text-align:right; font-style:italic;}
.form-agree .agree_info {border-top:solid 1px #ccc; margin-top:4rem; padding-top:4rem; font-size:1.4rem; color:#363636; line-height:1.5;}
.form-agree .btn_center .btn {width:15rem;}

.agree_tbl table tr td span {
    
}
.agree_tbl table tr th,
.agree_tbl table tr td {
    border:solid 1px #ccc;
}
.agree_box dl > dd .agree_tbl table thead th {
    border-bottom:none;
}
.agree_tbl table tr td strong {
    font-size:1.5rem; color:#008a3d; font-weight:500; text-decoration:underline;
}
/* border-left:solid 1px #ccc; */
.agree_tbl table tr td.border-left {
    border-left:solid 1px #ccc;
}

.form-agree .agree_box > dl > dd {}

.agree_box .ntbox {
	padding:2rem;
	background:#f4f6fa; font-size:1.5rem;
	border-radius:4px;
}

.agree_box .en-date {
    text-align:right;
    margin-bottom:2rem;
}
.agree_box .en-date p {
    text-align:right;
    font-size:1.5rem; 
    color:#363636; 
    line-height:1.5;
}
.agree_box .top-box {
    background:#f4f6fa;
    padding:2rem;
    margin-bottom:3rem;
}
.agree_box .top-box p {
    font-size:1.6rem; 
    color:#363636; 
    line-height:1.5;
    font-weight:500;
}

.agree_box .label-box {

}
.agree_box .label-box p.tit {
    font-size:1.6rem; 
    color:#363636; 
    line-height:1.5;
    font-weight:500;
}
.agree_box .label-box p.nt {
    font-size:1.4rem; 
    color:#666; 
    line-height:1.5;
}
.agree_box .label-box ul {
    display:flex;
    flex-wrap:wrap;
    border:solid 1px #999;
}
.agree_box .label-box ul li {
    width:33.333%;
    padding:2rem;
    text-align:center;
}
.agree_box .label-box ul li:nth-child(1),
.agree_box .label-box ul li:nth-child(2),
.agree_box .label-box ul li:nth-child(3) {
    border-bottom:dashed 1px #ccc;
}
.agree_box .label-box ul li:nth-child(2),
.agree_box .label-box ul li:nth-child(3),
.agree_box .label-box ul li:nth-child(5),
.agree_box .label-box ul li:nth-child(6) {
    border-left:dashed 1px #ccc;
}
.agree_box .label-box ul li p {
    margin-top:1rem;
    font-size:1.5rem; 
    color:#363636; 
    line-height:1.5;
}
.agree_box .label-box ul li span {
    
}
.agree_box .label-box ul li span img {
    width:8rem;
    max-width:100%;
}

@media (max-width:520px){
    .agree_box .inner {
        padding: 3rem 2rem;
    }
}

/* 그래프 하단 표 스타일 */
.chart-table-wrap {
    margin-top: 3rem;
}
.chart-table-tit {
    font-size: 2rem;
    color: #000;
    font-weight: 700;
    margin-bottom: 1rem;
}
.chart-table-desc {
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* 그래프 키보드 접근성 스타일 */
.chart-wrap .inchart {
    position: relative;
    outline: none;
}
.chart-wrap .inchart:focus {
    outline: 2px solid #00A64B;
    outline-offset: 2px;
}
.chart-keyboard-info {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: 500;
    z-index: 10;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width:481px){
    .chart-keyboard-info {
        font-size: 1.2rem;
        padding: 0.8rem 1.2rem;
        max-width: 90%;
        white-space: normal;
        text-align: center;
    }
}


/* 전문인력풀 소개 */
.manpower-intro {
    margin-top: 4rem;
    border-top: solid 1px var(--ccolor);
    background: #f6f6f6;
    padding: 3rem;
    border-radius: 0 0 1.2rem 1.2rem;
    margin-bottom: 3rem;
}
.manpower-intro .intro-notice {
    margin-bottom: 3rem;
}
.manpower-intro .intro-notice ul {

}
.manpower-intro .intro-notice ul li {
    position: relative;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
    font-size: 1.5rem;
    color: var(--ccolor);
    line-height: 1.8;
    margin-bottom: 0.5rem;
    word-break: keep-all;
    word-wrap: break-word;
}
.manpower-intro .intro-content h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2rem;
}
.manpower-intro .intro-content .intro-list {

}
.manpower-intro .intro-content .intro-list li {
    padding-left: 1.5rem;
    text-indent: -1.5rem;
    font-size: 1.6rem;
    color: #666;
    line-height: 1.45;
    margin-bottom: 1rem;
    word-break: keep-all;
    word-wrap: break-word;
}
.manpower-intro .intro-content .intro-list li:last-child {
    margin-bottom: 0;
}

@media (max-width:1025px){
    .manpower-intro {
        padding: 3rem 2rem;
    }
    .manpower-intro .intro-content h3 {
        font-size: 2rem;
    }
}



/* 저작권보호정책 */
.copy-policy-wrap {

}
.copy-policy-wrap .inner {
    background: #fff;
    padding: 5rem;
    min-height: calc(100vh - 64rem);
}
.copy-policy-wrap .inner h3 {
    font-size:1.7rem;
    font-weight:bold;
    margin-bottom:4rem;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
    color:#000;
}
.copy-policy-wrap .inner h4 {
    font-size:1.5rem;
    font-weight:bold;
    margin:4rem 0 2rem;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
    color:#000;
}
.copy-policy-wrap .nt-box {
    margin-top: 2rem;
    padding: 2rem;
    background: #f9f9f9;
    border:solid 1px #ddd;
}
.copy-policy-wrap .inner p {
    margin-top: 2rem;
    font-size:1.5rem;
    color:#666;
    line-height:1.5;
    word-break:keep-all;
    word-wrap:break-word;
}
.copy-policy-wrap .nt-box p {
    color: #222; /* 더 어두운 텍스트 색상으로 색대비 향상 */
}
.copy-policy-wrap .inner p span {
    padding-top: 1rem;
    display:block;
    color:#000;
}
.copy-policy-wrap .inner p.ind {
    padding-left: 1.2rem;
    text-indent: -1.2rem;
}

@media (max-width:520px){
    .copy-policy-wrap .inner {
        padding: 3rem 2rem;
        min-height: auto;
    }
}



/* 메뉴안내 콘텐츠 */
.guide-wrap {
    
}

.guide-wrap .gd-top {
    margin-bottom: 2rem;
}
.guide-wrap .gd-top .info-box {
    background-color: #f5f5f5;
    border-radius: 1.6rem;
    padding: 4rem;
}
.guide-wrap .gd-top .info-box .question {
    color: #00A64B;
    font-weight: 600;
    font-size: 2.4rem;
    margin-bottom: 1rem;
}
.guide-wrap .gd-top .info-box .answer {
    color: #000;
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 500;
    word-break: keep-all;
    word-wrap: break-word;
}

@media (max-width:520px){
    .guide-wrap .gd-top .info-box {
        padding: 3rem 2rem;
    }
    .guide-wrap .gd-top .info-box .question {
        font-size: 2rem;
    }
    .guide-wrap .gd-top .info-box .answer {
        font-size: 1.8rem;
    }
}

/* 급식소식 메뉴 */
.guide-wrap .gd-menu {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.guide-wrap .gd-menu .menu-box {
    background-color: #F2F6F3;
    border-radius: 1.6rem;
    padding: 4rem;
}

.guide-wrap .gd-menu .menu-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 3rem;  
    padding-top:1rem; 
    padding-left: 10rem;
}

.guide-wrap .gd-menu .menu-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.guide-wrap .gd-menu .menu-icon img {
    width: 8rem;
    height: auto;
    display: block;
}

.guide-wrap .gd-menu .menu-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.guide-wrap .gd-menu .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 10rem;
}

.guide-wrap .gd-menu .menu-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.guide-wrap .gd-menu .menu-list li:last-child {
    margin-bottom: 0;
}

.guide-wrap .gd-menu .menu-label {
    display: inline-block;
    background-color: #00A64B;
    color: #fff;
    padding: 0.8rem 1.6rem;
    border-radius: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 1.5rem;
}

.guide-wrap .gd-menu .menu-desc {
    display: inline-block;
    color: #000;
    font-size: 1.8rem;
    line-height: 1.6;
    flex: 1;
    padding-top: 0.5rem;
    word-break: keep-all;
}

/* 급식소식 */
.guide-wrap .gd-menu.menu1 .menu-box {
    background-color: #F2F6F3;
}
.guide-wrap .gd-menu.menu1 .menu-label {
    background-color: #00A64B;
}

/* 급식일반 */
.guide-wrap .gd-menu.menu2 .menu-box {
    background-color: #FBF8F1;
}
.guide-wrap .gd-menu.menu2 .menu-label {
    background-color: #CA5400;
}

/* 식생활교육 */
.guide-wrap .gd-menu.menu3 .menu-box {
    background-color: #F2F6F3;
}
.guide-wrap .gd-menu.menu3 .menu-label {
    background-color: #00A64B;
}

/* 영양상담 */
.guide-wrap .gd-menu.menu4 .menu-box {
    background-color: #FBF8F1;
}
.guide-wrap .gd-menu.menu4 .menu-label {
    background-color: #CA5400;
}

/* 식재료정보 */
.guide-wrap .gd-menu.menu5 .menu-box {
    background-color: #F2F6F3;
}
.guide-wrap .gd-menu.menu5 .menu-label {
    background-color: #00A64B;
}

/* 정보마당 */
.guide-wrap .gd-menu.menu6 .menu-box {
    background-color: #FBF8F1;
}
.guide-wrap .gd-menu.menu6 .menu-label {
    background-color: #CA5400;
}


@media (max-width:1025px){
    .guide-wrap .gd-menu .menu-header {
        margin-bottom: 5rem;
    }
    .guide-wrap .gd-menu .menu-list {
        padding-left: 0;
    }
}
@media (max-width: 780px) {
    .guide-wrap .gd-menu .menu-list li {
        flex-direction: column;
        align-items: flex-start;
    }
    .guide-wrap .gd-menu .menu-desc {
        padding-left: 1.5rem;
    }
}
@media (max-width: 520px) {
    .guide-wrap .gd-menu .menu-box {
        padding: 3rem 2rem;
    }
    .guide-wrap .gd-menu .menu-header {
        padding-left: 8rem;
    }
    .guide-wrap .gd-menu .menu-icon img {
        width: 6rem;
        max-height:7rem;
    }
    .guide-wrap .gd-menu .menu-title {
        font-size: 2.6rem;
    }
    .guide-wrap .gd-menu .menu-label {
        font-size: 1.4rem;
    }
    .guide-wrap .gd-menu .menu-desc {
        font-size: 1.6rem;
    }
}