*{box-sizing:border-box;padding:0;margin:0}html,body{font-family:Noto Sans KR;margin:0 auto;min-height:100%;background-color:#f5f5f5}body{padding-top:56px}button{all:unset}a{color:inherit;text-decoration:none}section{display:flex;flex-direction:column;justify-content:center;width:100%;min-width:320px;max-width:700px;margin:0 auto;overflow-y:auto}section#normal-sections{padding-top:72px}section article{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:16px;width:100%}section article>div:nth-child(1){display:flex;align-items:center;justify-content:center;gap:6px}section article h2{font-size:16px;font-weight:700;line-height:24px;text-align:center}section .ad_card{cursor:pointer}section .rank-section{background-color:#eeeeee}section .rank-section .rank-grid-box{display:grid;gap:8px;width:100%;padding-top:16px}@media (max-width: 699px){section .rank-section .rank-grid-box{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 700px){section .rank-section .rank-grid-box{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}}section .rank-section .rank-grid-box li{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;min-width:100%;width:100%;height:162px;border-radius:12px;background-color:#ffffff}section .rank-section .rank-grid-box li .title{width:calc(100% - 16px);margin-top:4px;font-weight:700;font-size:12px;line-height:18px;text-align:center;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section .rank-section .rank-grid-box li .description{width:calc(100% - 16px);margin-top:4px;font-weight:400;font-size:12px;line-height:18px;text-align:center;color:#9e9e9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section .rank-section .rank-grid-box li .price{margin-top:8px;padding:4px 8px;border-radius:59px;background-color:#dff7e9;color:#212121;font-size:12px;font-weight:700;line-height:18px;text-align:center}section .rank-section .rank-grid-box li .price.disabled{opacity:0.5}section .rank-section .rank-grid-box li div{width:68px;height:68px;aspect-ratio:1/1}section .rank-section .rank-grid-box li div img{width:100%;object-fit:cover}section .recommend-section{background-color:#ffffff;padding:16px 0}@media (min-width: 700px){section .recommend-section{padding:16px}}section .recommend-section .recommend-section-header{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}section .recommend-section .recommend-section-header h2{padding:0 16px}@media (min-width: 700px){section .recommend-section .recommend-section-header h2{padding:0}}section .recommend-section .filter-container{display:flex;width:100%;height:46px;padding:0;align-items:center;background-color:#ffffff}section .recommend-section .filter-container .filter-chips-row{display:flex;width:100%;align-items:center;gap:0;flex-shrink:0;position:relative}section .recommend-section .filter-container .filter-chips-row .filter-chips{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;scroll-behavior:smooth;-ms-overflow-style:none}@media (max-width: 699px){section .recommend-section .filter-container .filter-chips-row .filter-chips{padding:0 16px}}section .recommend-section .filter-container .filter-chips-row .filter-chips::-webkit-scrollbar{display:none}section .recommend-section .filter-container .filter-chips-row .filter-chips .filter-chip{cursor:pointer;display:flex;width:auto;min-width:40px;padding:7px 14px 6px 14px;justify-content:center;align-items:center;gap:4px;border-radius:40px;background-color:#f3f5f7;border:none;flex-shrink:0}section .recommend-section .filter-container .filter-chips-row .filter-chips .filter-chip .text{color:#767678;font-size:15px;font-weight:500;line-height:21px;white-space:nowrap}section .recommend-section .filter-container .filter-chips-row .filter-chips .filter-chip.active{background-color:#24282c}section .recommend-section .filter-container .filter-chips-row .filter-chips .filter-chip.active .text{color:#ffffff;font-weight:700}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container{position:absolute;top:0;box-sizing:border-box;display:none}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-left{left:0}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-left.visible{display:block}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-left::before{content:"";position:absolute;display:block;left:0px;width:17px;height:34px;border:1px solid #ffffff;background-color:#ffffff}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-left::after{content:"";display:block;position:absolute;left:17px;width:39px;height:34px;background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);pointer-events:none;z-index:0}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-right{right:0}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-right.visible{display:block}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-right::before{content:"";position:absolute;right:0px;width:17px;height:34px;border:1px solid #ffffff;background-color:#ffffff}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container.filter-scroll-btn-container-right::after{content:"";position:absolute;right:17px;width:39px;height:34px;background:linear-gradient(270deg, #fff 16%, rgba(255,255,255,0) 100%);pointer-events:none;z-index:0}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container .filter-scroll-btn{position:absolute;top:0;display:none;border:none;background-color:transparent;cursor:pointer;z-index:10;align-items:center;justify-content:center;width:34px;height:34px;background-color:#ffffff;border-radius:50%;border:1px solid #dce0e0}@media (min-width: 700px){section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container .filter-scroll-btn{display:flex}}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container .filter-scroll-btn svg{position:relative;z-index:1}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container .filter-scroll-btn.filter-scroll-left{left:0}section .recommend-section .filter-container .filter-chips-row .filter-scroll-btn-container .filter-scroll-btn.filter-scroll-right{right:0}section .recommend-section .recommend-box{display:flex;flex-direction:column;justify-content:center;width:100%;position:relative}section .recommend-section .recommend-box::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background-color:#ffffff}@media (max-width: 699px){section .recommend-section .recommend-box{padding:0 16px}}section .recommend-section .recommend-box li{display:flex;align-items:center;width:100%;box-sizing:content-box;height:64px;gap:4px;background-color:#ffffff;padding:8px 0px;border-top:1px solid #eeeeee}section .recommend-section .recommend-box li .img-box{flex-shrink:0;width:64px;height:64px;aspect-ratio:1/1}section .recommend-section .recommend-box li .img-box img{width:100%;height:100%;object-fit:cover}section .recommend-section .recommend-box li .content-box{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 68px)}section .recommend-section .recommend-box li .content-box .text-box{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0px}section .recommend-section .recommend-box li .content-box .text-box .title{width:100%;font-weight:700;font-size:12px;line-height:18px;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section .recommend-section .recommend-box li .content-box .text-box .description{width:100%;font-weight:400;font-size:12px;line-height:18px;color:#9e9e9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section .recommend-section .recommend-box li .content-box .price{flex-shrink:0;margin-top:8px;padding:4px 8px;border-radius:59px;background-color:#dff7e9;color:#212121;font-size:12px;font-weight:700;line-height:18px;text-align:center}section .recommend-section .recommend-box li .content-box .price.disabled{opacity:0.5}section .searched-box{display:flex;position:relative;flex-direction:column;justify-content:center;width:100%}section .searched-box::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background-color:#ffffff}section .searched-box li{display:flex;align-items:center;width:100%;box-sizing:content-box;height:64px;gap:4px;background-color:#ffffff;padding:8px 0px;border-top:1px solid #eeeeee}section .searched-box li .img-box{flex-shrink:0;width:64px;height:64px;aspect-ratio:1/1}section .searched-box li .img-box img{width:100%;height:100%;object-fit:cover}section .searched-box li .content-box{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 68px)}section .searched-box li .content-box .text-box{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0px}section .searched-box li .content-box .text-box .title{width:100%;font-weight:700;font-size:12px;line-height:18px;color:#212121;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section .searched-box li .content-box .text-box .description{width:100%;font-weight:400;font-size:12px;line-height:18px;color:#9e9e9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section .searched-box li .content-box .price{flex-shrink:0;margin-top:8px;padding:4px 8px;border-radius:59px;background-color:#dff7e9;color:#212121;font-size:12px;font-weight:700;line-height:18px;text-align:center}section .searched-box li .content-box .price.disabled{opacity:0.5}footer{display:flex;flex-direction:column;align-items:flex-start;margin:0 auto;padding:24px 16px;gap:8px;width:100%;max-width:700px;color:#888888;background:#eeeeee}.empty-container{display:flex;flex-direction:column;align-items:center;margin:0 auto;border-radius:8px;width:100%;background-color:#ffffff}@media (max-width: 699px){.empty-container{padding:40px 0px}}@media (min-width: 700px){.empty-container{padding:80px 0px}}.empty-container .imgBox{width:64px;height:64px;aspect-ratio:1/1}.empty-container .imgBox img{width:100%;object-fit:cover}.empty-container h4{margin-top:4px;font-weight:700;font-size:14px;line-height:22px;color:#212121}.empty-container button{display:flex;align-items:center;gap:2px;margin-top:16px;padding:8px 12px;background-color:#dff7e9;border-radius:60px;font-weight:700;font-size:12px;line-height:18px;color:#212121}.empty-container button img{width:16px;height:16px}.search-container{position:fixed;display:flex;align-items:center;gap:16px;width:100%;left:50%;transform:translateX(-50%);padding:12px 16px 12px;background-color:#ffffff;max-width:700px;margin:0 auto;z-index:1}.search-container .search-input-wrapper{position:relative;flex:1;display:flex;align-items:center}.search-container .search-input-wrapper .search-icon{position:absolute;left:13px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.search-container .search-input-wrapper .search-icon svg{width:100%;height:100%}.search-container .search-input-wrapper .search-input{width:100%;padding:10px 32px 10px 40px;font-size:16px;line-height:24px;border:2px solid #f3f5f7;background-color:#f3f5f7;border-radius:6px;outline:none;transition:border-color 0.2s ease}.search-container .search-input-wrapper .search-input:focus{border-color:#2e343a}.search-container .search-input-wrapper .search-input::placeholder{color:#929294}.search-container .search-input-wrapper .search-clear-btn{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease}.search-container .search-input-wrapper .search-clear-btn:hover{opacity:0.7}.search-container .search-input-wrapper .search-clear-btn svg{pointer-events:none}.search-container .search-cancel-btn{flex-shrink:0;background-color:transparent;color:#212121;font-size:15px;font-weight:500;line-height:21px;border:none;cursor:pointer;transition:opacity 0.2s ease;white-space:nowrap}.search-container .search-cancel-btn:hover{opacity:0.7}.search-results-section{padding:88px 16px 16px;background-color:#ffffff;max-width:700px;margin:0 auto}.search-results-section h2{padding-bottom:8px}.no-results-message{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:40px 12px}.no-results-message .no-results-message-content{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9e9e9e;gap:4px}.no-results-message .no-results-message-content p{font-size:14px;font-style:normal;font-weight:700;line-height:22px;color:#212121}
