@charset "UTF-8";

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

html[data-fixed="on"] { overflow: hidden;}

input[type="text"] { padding: 0 16px; width: 100%; height: 48px; border-radius: 12px; }
input[type="text"]:focus { border: 1px solid #400e00; }

.season { padding-bottom: 60px; }
.season .symbol { margin-top: 30px; background: url('../../images/food/symbol_season.png') no-repeat center center / contain; }

.season .box { margin-top: 50px; padding: 16px; border-radius: 16px; border:1px solid #400e00; }

.season .search { padding: 16px; border: 1px solid #e3e3e3; }
.season .search .row { padding: 12px 0; display: flex; gap: 20px; align-items: center; border-bottom: 1px solid #e3e3e3; }
.season .search .row .label { width: 60px; white-space: nowrap; }
.season .search .row .value { flex: 1; }

.season .search .months { min-width: 0; display: grid; gap: 3px 5px; }

.season .search .months button { padding: 0 16px; height: 40px; border-radius: 8px; color: #868e96; font-size: 16px; font-weight: 500; background: transparent; }
.season .search .months button[data-active="on"] { background-color: #ffffff; color: #212529; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.season .search .months button:not([data-active="on"]):hover { color: #495057; }
.season .search button.submit { margin-top:30px;  width: 100%; height: 60px; color: #000; font-weight: 700; font-size: 18px; background: #ffb800; }

.season .result { margin-top: 30px; padding: 16px; border: 1px solid #e3e3e3; }
.season .result .head { height: 60px; display: flex; justify-content: space-between; align-items: center; color:#fff; background: #400e00; }
.season .result .head > div { text-align: center; }
.season .result .head > .name { flex: 1; }
.season .result .head > .ship { width: 100px; }
.season .result .head > .details { width: 100px; }

.season .result .body .row { height: 50px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d1d1d1; }
.season .result .body .row > div { text-align: center; }
.season .result .body .row > .name { flex: 1; }
.season .result .body .row button.detail { width: 100%; height: 50px; display: block; background: transparent; }
.season .result .body .row > .ship { width: 100px; }
.season .result .body .row > .details { width: 100px; }
.season .result .body[data-empty="on"] { display : none; }

.season .result .empty { width: 100%; height: 100px; display: none; line-height: 100px; text-align: center; }
.season .result .empty[data-empty="on"] { display: block; }

.season .result .more-box { margin-top: 30px; }
.season .result .more-box[data-more="0"] { display: none; }
.season .result .more { width: 100%; height: 50px; font-weight: 500; border:1px solid #d1d1d1; background: #fff; }

.season .guides { margin-top: 30px; padding: 16px; border: 1px solid #e3e3e3; border-radius: 16px; }
.season .guides h3 { margin-bottom: 10px; font-size: 16px; }
.season .guides h3::after{ content:"!"; display: inline-block; transform: rotate(5deg)}

.season .guides p { position: relative; padding-left: 20px; font-size: 14px; }
.season .guides p::before { position: absolute; left: 0; content: "※"; }
.season .guides p:not(:first-child) { margin-top: 4px; }
.ingredient { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; background: rgba(0,0,0, .7); }

.ingredient[data-active="on"] { display: flex;  overscroll-behavior: contain; }
.ingredient > .container { padding: 24px; max-height: 80vh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; background: #fff; }

.ingredient .head { height: 40px; }
.ingredient .body { margin-top: 20px; min-height: 0; overflow-y: auto; }
.ingredient .body li { padding: 8px 0; display: flex; justify-content: flex-start; align-items: center; gap: 12px; border-bottom: 1px solid #e3e3e3; }
.ingredient .body li .label { width: 70px; }
.ingredient .body li .value { flex: 1; line-height: 1.8; }

.ingredient .foot { margin-top: 20px; text-align: right; }
.ingredient .foot button { width: 50px; height: 40px; border-radius: 20px; background: #e3e3e3; }


/* 모바일 */
@media screen and (max-width: 1024px) {
    body[data-fixed] { height: 100%; }
    .season .symbol { width: 100%; height: 200px; }
    .season .search .row { gap: 8px; }
    .season .search .months { grid-template-columns: 1fr 1fr; }
    .season .search .months button { font-size: 15px; }
    .season .result .head > .ship { width: 72px; }
    .season .result .head > .details { display: none; }
    .season .result .body .row > div { font-size: 14px; }
    .season .result .body .row > .ship { width: 72px; }
    .season .result .body .row > .details { display: none; }
    .ingredient > .container { padding: 16px; width: 90%; }

}

/* PC */
@media screen and (min-width: 1025px) {
    .season .symbol { height: 300px; }
    .season .search .months { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .ingredient > .container { width: 600px; }
}