/* ==================================================
   기본
================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #b8e9a5 0%,
            #e8f9db 35%,
            #d5f0c6 100%
        );

    color: #263b27;

    font-family:
        "Malgun Gothic",
        "맑은 고딕",
        Arial,
        sans-serif;
}



/* ==================================================
   전체 페이지
================================================== */

.page {

    width: min(1500px, 96%);

    margin:
        20px auto
        40px;

}



/* ==================================================
   상단
================================================== */

.header {

    display: grid;

    grid-template-columns:
        260px
        minmax(400px, 1fr)
        300px;

    gap: 14px;

    align-items: stretch;

    margin-bottom: 18px;

}



/* ==================================================
   설명 박스
================================================== */

.info-box {

    min-height: 145px;

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 14px;

    background:
        linear-gradient(
            180deg,
            #fffef4,
            #fffbe8
        );

    border:
        4px solid #e3b846;

    border-radius: 20px;

    box-shadow:
        0 5px 0
        rgba(80, 55, 20, 0.18);

}


.info-icon {

    flex-shrink: 0;

    font-size: 48px;

}


.info-box h3 {

    margin:
        0 0 7px;

    color: #3d2d17;

    font-size: 23px;

    font-weight: 900;

}


.info-box p {

    margin: 0;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 700;

}


.info-box small {

    font-size: 11px;

}



/* ==================================================
   제목
================================================== */

.title-box {

    position: relative;

    min-height: 145px;

    padding:
        20px 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #a96a2e,
            #743e17
        );

    border:
        5px solid #633511;

    border-radius: 24px;

    color: white;

    text-align: center;

    box-shadow:
        inset 0 4px
        rgba(255,255,255,0.25),

        0 6px 0
        rgba(65, 38, 15, 0.25);

}


.title-box h1 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-size:
        clamp(32px, 4vw, 56px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -3px;

    text-shadow:
        3px 3px 0 #40200d,
        -1px -1px 0 #40200d;

}


.title-box p {

    position: relative;

    z-index: 2;

    margin:
        15px 0 0;

    color: #fff2a3;

    font-size: 14px;

    font-weight: 800;

}


.title-decoration {

    position: absolute;

    left: 22px;

    top: 13px;

    font-size: 38px;

}



/* ==================================================
   검색
================================================== */

.search-area {

    display: flex;

    gap: 8px;

    margin:
        10px 0 30px;

}


#searchInput {

    flex: 1;

    min-width: 0;

    height: 48px;

    padding:
        0 18px;

    border:
        3px solid #39bf76;

    border-radius: 14px;

    outline: none;

    background:
        rgba(255,255,255,0.92);

    color: #24442d;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 3px 0
        rgba(0,0,0,0.08);

}


#searchInput:focus {

    border-color: #159d58;

    box-shadow:
        0 0 0 3px
        rgba(21,157,88,0.15);

}


#resetButton {

    padding:
        0 20px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #35cb7e,
            #13a85d
        );

    color: white;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

}


#resetButton:hover {

    filter: brightness(1.08);

}



/* ==================================================
   레시피 영역
================================================== */

.recipe-section {

    position: relative;

    padding:
        30px 10px 14px;

    margin-bottom: 30px;

    border:
        3px solid;

    border-radius: 24px;

}


.recipe-section.normal {

    border-color: #27bd72;

    background:
        linear-gradient(
            180deg,
            rgba(248,255,244,0.95),
            rgba(226,250,217,0.95)
        );

}


.recipe-section.high-quality {

    border-color: #a348e4;

    background:
        linear-gradient(
            180deg,
            rgba(255,248,255,0.96),
            rgba(247,229,255,0.96)
        );

}



/* ==================================================
   섹션 제목
================================================== */

.section-title {

    position: absolute;

    left: -4px;

    top: -30px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 25px;

    border-radius: 25px;

    color: white;

    font-size: 26px;

    font-weight: 900;

    box-shadow:
        0 4px 0
        rgba(0,0,0,0.14);

}


.normal .section-title {

    background:
        linear-gradient(
            180deg,
            #39d58a,
            #12a95e
        );

}


.high-quality .section-title {

    background:
        linear-gradient(
            180deg,
            #b74eef,
            #8532ce
        );

}


.section-icon {

    font-size: 31px;

}



/* ==================================================
   카드 그리드
================================================== */

.recipe-grid {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(125px, 1fr));

    gap: 7px;

}



/* ==================================================
   카드
================================================== */

.recipe-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        2px solid #50cb83;

    border-radius: 10px;

    background:
        #f7fff3;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;

}


.high-quality .recipe-card {

    border-color: #b766e5;

    background:
        #fff8ff;

}


.recipe-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 9px 18px
        rgba(0,0,0,0.18);

}



/* ==================================================
   요리 이름
================================================== */

.recipe-name {

    min-height: 38px;

    padding:
        6px 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #173f26;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.2;

}


.high-quality .recipe-name {

    color: #542067;

}



/* ==================================================
   요리 이미지
================================================== */

.recipe-image {

    height: 105px;

    padding: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #efffe8 65%,
            #ddf5d3 100%
        );

}


.high-quality .recipe-image {

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #fff2ff 65%,
            #f1dcff 100%
        );

}


.recipe-image img {

    width: 86px;

    height: 86px;

    object-fit: contain;

    /*
       픽셀아트 확대 시
       흐려지는 것을 방지
    */

    image-rendering: pixelated;

    image-rendering: crisp-edges;

    transition:
        transform 0.15s ease;

}


.recipe-card:hover
.recipe-image img {

    transform:
        scale(1.08);

}



/* ==================================================
   재료
================================================== */

.ingredients {

    min-height: 76px;

    padding:
        6px 7px;

    text-align: left;

}


.ingredients p {

    margin:
        3px 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #24603b;

    font-size: 10px;

    line-height: 1.35;

    font-weight: 700;

}


.high-quality
.ingredients p {

    color: #65317d;

}



/* ==================================================
   점수
================================================== */

.score {

    padding:
        7px 4px;

    background:
        linear-gradient(
            180deg,
            #31ca7c,
            #10a95c
        );

    color: white;

    font-size: 16px;

    font-weight: 900;

    text-shadow:
        1px 1px 2px
        rgba(0,0,0,0.3);

}


.high-quality .score {

    background:
        linear-gradient(
            180deg,
            #ae48eb,
            #8430cf
        );

}



/* ==================================================
   검색 결과 없음
================================================== */

.no-result {

    display: none;

    margin:
        30px 0;

    padding: 50px;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.75);

    text-align: center;

    color: #526257;

    font-size: 18px;

    font-weight: 800;

}



/* ==================================================
   하단
================================================== */

footer {

    padding:
        19px;

    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            #77451f,
            #512a12
        );

    color: white;

    text-align: center;

    font-size: 19px;

    font-weight: 900;

    box-shadow:
        0 5px 0
        rgba(0,0,0,0.2);

}



/* ==================================================
   팝업
================================================== */

.modal {

    position: fixed;

    z-index: 1000;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0,0,0,0.65);

}


.modal.show {

    display: flex;

}


.modal-content {

    position: relative;

    width: min(440px, 95vw);

    padding: 28px;

    border-radius: 20px;

    border: 4px solid #39bf76;

    background:
        linear-gradient(
            180deg,
            #fafff6,
            #eaf8df
        );

    box-shadow:
        0 15px 50px
        rgba(0,0,0,0.35);

    text-align: center;

}


.close-button {

    position: absolute;

    top: 8px;

    right: 12px;

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: #d5e8d1;

    color: #315238;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

}


.modal-image {

    width: 150px;

    height: 150px;

    object-fit: contain;

    image-rendering: pixelated;

}


.modal-content h2 {

    margin:
        10px 0 20px;

    color: #21472d;

}


.modal-ingredients {

    padding:
        12px;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.65);

    text-align: left;

}


.modal-ingredients p {

    margin:
        6px 0;

    font-weight: 700;

}


.modal-score {

    margin-top: 15px;

    padding:
        10px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #32cb7d,
            #10a65a
        );

    color: white;

    font-size: 21px;

    font-weight: 900;

}



/* ==================================================
   반응형
================================================== */

@media (max-width: 1300px) {

    .recipe-grid {

        grid-template-columns:
            repeat(6, minmax(125px, 1fr));

    }

}


@media (max-width: 1050px) {

    .header {

        grid-template-columns:
            1fr 1.8fr;

    }

    .header .info-box:last-child {

        display: none;

    }

    .recipe-grid {

        grid-template-columns:
            repeat(5, minmax(120px, 1fr));

    }

}


@media (max-width: 800px) {

    .header {

        grid-template-columns:
            1fr;

    }

    .header .info-box {

        display: none;

    }

    .title-box {

        min-height: 125px;

    }

    .recipe-grid {

        grid-template-columns:
            repeat(4, minmax(115px, 1fr));

    }

}


@media (max-width: 600px) {

    .page {

        width: 98%;

    }

    .recipe-grid {

        grid-template-columns:
            repeat(2, minmax(120px, 1fr));

    }

    .title-box h1 {

        font-size: 31px;

    }

    .search-area {

        flex-direction: column;

    }

    #resetButton {

        height: 44px;

    }

}