@charset "UTF-8";

:root {
    --width-main : 600px;
}

/* 검색 시 로딩 화면 */
.loading-curtain { position: fixed; top: 0; left: 0; z-index: 100000; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background-color: rgba(0,0,0, .8); backdrop-filter: blur(5px); }
.loading-curtain[data-view="on"] { display: flex; }
.loading-content { display: flex; flex-direction: column; align-items: center; }

.loading-box { margin-bottom: 25px; display: flex; justify-content: center; align-items: center; gap: 12px; }
.loading-item { display: inline-block; font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); animation: foodWave 0.8s infinite alternate ease-in-out; }

.loading-item:nth-child(1) { animation-delay: 0s; }
.loading-item:nth-child(2) { animation-delay: 0.15s; }
.loading-item:nth-child(3) { animation-delay: 0.3s; }
.loading-item:nth-child(4) { animation-delay: 0.45s; }

.loading-text { color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; opacity: 0.9; }
/* 검색 시 로딩 화면 끝 */

/* 위아래로 튀어오르는 애니메이션 */
@keyframes foodWave {
    from { transform: translateY(0); opacity: 0.5; }
    to { transform: translateY(-20px); opacity: 1; }
}

.loading-curtain { position: fixed; top: 0; left: 0; z-index: 100000; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background-color: rgba(0,0,0, .8); backdrop-filter: blur(5px); }
.loading-curtain[data-view="on"] { display: flex; }
.loading-content { display: flex; flex-direction: column; align-items: center; }

.loading-box { margin-bottom: 25px; display: flex; justify-content: center; align-items: center; gap: 12px; }
.loading-item { display: inline-block; font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); animation: foodWave 0.8s infinite alternate ease-in-out; }

.loading-item:nth-child(1) { animation-delay: 0s; }
.loading-item:nth-child(2) { animation-delay: 0.15s; }
.loading-item:nth-child(3) { animation-delay: 0.3s; }
.loading-item:nth-child(4) { animation-delay: 0.45s; }

.loading-text { color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; opacity: 0.9; }

.layout-container { width: 100%; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.layout-container > .layout-header { position: sticky; top: 0; z-index: 99; width: 100%; height: 60px; background: #fff; }
.layout-container > .layout-header header { position: relative; height: 60px; display: flex; justify-content: space-between; align-items: center; }
.layout-container > .layout-body { flex: 1; }
.layout-container > .layout-footer { align-self: top; width: 100%; height: 50px; display: flex; justify-content: center; align-items: 
center; color: #444; background: #e3e3e3; }

.layout-container > .layout-header header > .back { width: 40px; height: 40px; background: url('../../images/user/arrow_back.svg') no-repeat center center / 38px; }
.layout-container > .layout-header header > h1 { font-size: 28px; }

/* gnb */
.gnbs { height: 60px; display: flex; align-items: center; font-size: 0; }
.gnbs .munu { width: 40px; height: 40px; background: url('../../images/icon/menu.svg') no-repeat center center / 36px; }
.gnbs ul { position: absolute; top: 60px; right: 0; width: 100%; display: none; font-size: 1rem; background: #fff;  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.gnbs ul[data-active="on"] { display: block; }

.gnbs ul a { width: 100%; height: 50px; display: block; line-height: 50px; text-align: center; font-weight: 500; }
.gnbs > ul > li:not(:last-child) { border-bottom: 1px solid #e3e3e3; }
.gnbs ul a[data-active="on"] { color: #fff; background: var(--cobalt); }
/* gnb */


/* 추천 */
.rec { padding-bottom: 60px; }
.rec .symbol { margin-top: 30px; background: url('../../images/food/symbol_recommend.png') no-repeat center center / contain; }

/* 추천 - 검색 */
.rec .console { margin-top: 50px; padding: 16px; border: 1px solid #400e00; border-radius: 16px; }

.rec .search { padding: 16px; border: 1px solid #e3e3e3; }

.rec .category .type { min-width: 0; display: flex; align-items: center; gap : 20px; background-color: #f1f3f5; }
.rec .category .type button { padding: 0 16px; height: 40px;  border-radius: 8px; color: #868e96; font-size: 16px; font-weight: 500; background: transparent; }
.rec .category .type button.active { background-color: #ffffff; color: #212529; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.rec .category .type button:not(.active):hover { color: #495057; }
.rec .category .type:not(:first-child) { border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
.rec .category .checkbox { padding: 14px 0; display: flex; justify-content: flex-end; }
.rec .category .caption { position: relative; margin-bottom: 8px; padding-left: 14px; color: #a3a3a3; font-size: 14px; }
.rec .category .caption::before { position: absolute; left: 0; content: "※"; }
.rec .category .submit { margin-top:30px;  width: 100%; height: 60px; color: #000; font-weight: 700; font-size: 18px; background: #ffb800; }
.rec .category .submit::disabled { cursor: wait; }
/* 추천 - 검색 끝 */

.rec .result { margin-top: 30px;  display: none;  }
.rec .result[data-view="on"] { display : block; }

.rec .result .desc { padding: 16px; border: 1px solid #e3e3e3; }
.rec .result h2 { text-align: center; font-size: 26px; letter-spacing: 2px; }
.rec .result .notice { margin-top: 30px; line-height: 1.8; }
.rec .result .caption { margin: 10px 0 4px 0; padding-right: 8px; font-size: 14px; text-align: right; color: #666; }
.rec .result .nutrient { padding: 16px; display: grid;  gap: 12px 30px; border-top: 1px solid #d3d3d3; font-size: 15px; }
.rec .result .nutrient .gram { text-align: right; }
.rec .result .nutrient .gram::after { margin-left: 2px; content: "g"; }
.rec .result .nutrient .milligram { text-align: right; }
.rec .result .nutrient .milligram::after { margin-left: 2px; content: "mg"; }

.rec .result .energy { padding: 10px 8px 10px 0; text-align: right; border-top: 1px solid #d3d3d3; }
.rec .result .calorie::after { margin-left: 2px; content: "kcal"; }

.rec .result .explain .note { position: relative; z-index: 1; padding-left: 14px; color: #a3a3a3; font-size: 13px; }
.rec .result .explain .note::before { position: absolute; left: 0; content: "※"; }
.rec .result .map { margin-top: 30px; width: 100%; height: 300px; }

/* 추천 - 일일 권장 영양소 */
.rec .kdri { margin-top: 30px; padding: 16px; border-radius: 12px; border: 1px solid #e3e3e3; }
.rec .kdri .caption { margin-top: 10px; margin-bottom: 4px; text-align: right; font-size: 14px; }
.rec .kdri .ages { display: flex; align-items: center; }
.rec .kdri .ages button { height: 60px; border-radius: 8px; font-weight: 500; background: #fff; }
.rec .kdri .ages button > span { display: block; font-size: 14px; }
.rec .kdri .ages button[data-active="on"] { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

.rec .kdri .head { min-width: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; background: #d1d1d1; }
.rec .kdri .head > div { text-align: center; height: 60px; line-height: 60px; color: #fff; }
.rec .kdri .body { display: none; }
.rec .kdri .body li { min-width: 0; width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d1d1d1; }
.rec .kdri .body li div { flex: 1; text-align: center; font-size: 14px; }
.rec .kdri .body li .title { font-weight: 500; }
.rec .kdri .body[data-active="on"] { display: block; }

.rec .kdri .referer { position: relative; margin-top: 10px; padding-left: 16px; color: #666; font-size: 13px; }
.rec .kdri .referer::before { position: absolute; left: 0; content: "※"; }
/* 추천 - 일일 권장 영양소 끝 */


@media (pointer: coarse) {

}

/* 모바일 */
@media screen and (max-width: 1024px) {
    .layout-container > .layout-header header { padding: 0 16px; }
    .layout-container > .layout-body { padding: 0 16px; width: 100%; }
    
    /* gnb */
    .gnbs ul a:active { color: #fff; background: var(--cobalt); }

    .rec .symbol { width: 100%; height: 200px; }

    /* 추천 - 검색*/
    .rec .category .type .label { width: max-content; white-space: nowrap; }
    .rec .category .type .list { flex: 1; padding: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 5px; }
    .rec .category .type .list button { padding: 0; height: 50px; font-size: 15px; }
    /* 추천 - 검색 끝*/

    /* 추천 - 일일 권장 영양 소 */
    .rec .kdri .ages { justify-content: center; gap: 8px; }
    .rec .kdri .ages button { flex: 1; font-size: 14px; }
    .rec .kdri .ages button > span { display: none; }
    /* 추천 - 일일 권장 영양소 끝 */
    
    .rec .result .nutrient { grid-template-columns: 1fr 1fr; }

}

@media screen and (min-width: 1025px) {
    .layout-container > .layout-body { width: var(--width-main); }
    .layout-container > .layout-header { display: flex; justify-content: center; }
    .layout-container > .layout-header header { width: var(--width-main); }


    /* gnb */
    .gnbs ul { width: 300px; }
    .gnbs ul a:hover { color: #fff; background: var(--cobalt); }

    .rec .symbol { height: 300px; }
    
    /* 추천 - 검색 */
    .rec .category .type { height: 60px; }

    /* 추천 - 일일 권장 영앙소 */
    .rec .kdri .ages { justify-content: center; gap: 12px; }
    .rec .kdri .ages button { padding: 0 16px; }
    
    .rec .result .nutrient { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
}