@keyframes gradientFlow { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; }}

.app-header { display:flex; flex-direction:column; padding:20px 15px 50px 15px; background:linear-gradient(90deg, #8A6FFF 0%, #FF5F98 50%, #8A6FFF 100%); background-size:200% 100%; animation:gradientFlow 8s ease infinite; position:relative; z-index:1; color:white; }
.app-header__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.app-header__menu-icon, .app-header__cart-icon { font-size:20px; cursor:pointer; }
.app-header__search { width:100%; position:relative; }
.app-header__search input { width:100%; padding:12px 15px; background-color:rgba(255, 255, 255, 0.1); border:1px solid rgba(255, 255, 255, 0.8); border-radius:25px; font-size:14px; color:white; }
.app-header__search input::placeholder { color:rgba(255, 255, 255, 0.8); }
.app-header__search input:focus { outline:none; border-color:white; box-shadow:0 0 5px rgba(255, 255, 255, 0.3); }

.app-main { background-color:white; border-top-left-radius:30px; border-top-right-radius:30px; padding:20px; margin-top:-30px; position:relative; z-index:2; }

.notice { background-color: #f8f8f8; font-size: 12px; border-radius: 25px; padding: 12px 15px; display: flex; align-items: center; margin-bottom: 20px; overflow: hidden; line-height: 1.5; }
.notice__badge { background-color: #f63e7c; color: #fff; border-radius: 30px; padding: 2px 6px; margin-right: 6px; font-size: 11px; line-height: 1.5; display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.notice__content-wrapper { flex: 1; overflow: hidden; height: 18px; }
.notice__content-slide { position: relative; transition: transform 0.5s ease; will-change: transform; }
.notice__content-item { height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.category-menu__container { display:flex; flex-wrap:wrap; justify-content:space-between; }
.category-menu__item { width:25%; display:flex; flex-direction:column; align-items:center; margin-bottom:25px; }
.category-menu__icon { width:65px; height:65px; border-radius:65px; overflow:hidden; margin-bottom:10px; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.category-menu__icon img { width:100%; height:100%; object-fit:cover; }
.category-menu__text { font-size:13px; text-align:center; color:#333; margin-top:2px; font-weight:500; }

.banner-slider { position:relative; width:100%; margin:0 0 20px 0; border-radius:20px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.banner-slider__wrapper { width:100%; height:200px; position:relative; overflow:hidden; }
.banner-slider__slide { width:100%; height:100%; position:absolute; display:none; top:0; left:0; }
.banner-slider__slide:first-child { display:block; }
.banner-slider__slide img { width:100%; height:100%; object-fit:cover; }
.banner-slider__content { padding:25px; color:white; position:absolute; top:0; left:0; right:0; z-index:2; font-family:'S-CoreDream-4Regular', sans-serif; }
.banner-slider__tag { display:inline-block; background-color:white; color:#333; padding:5px 15px; border-radius:20px; font-size:12px; font-weight:500; margin-bottom:20px; font-family:'S-CoreDream-5Medium', sans-serif; }
.banner-slider__main-content h2 { font-size:18px; font-weight:700; line-height:1.3; margin-bottom:18px; text-shadow:0 1px 3px rgba(0,0,0,0.3); font-family:'S-CoreDream-6Bold', sans-serif; }
.banner-slider__title-line { display:block; }
.banner-slider__title-line i { border-radius:100px; padding:0 6px 0 4px; display:inline-block; background:rgba(0,0,0,0.5); }
.banner-slider__main-content p { font-size:14px; opacity:0.95; text-shadow:0 1px 3px rgba(0,0,0,0.3); font-family:'S-CoreDream-3Light', sans-serif; }
.banner-slider__controls { display:flex; justify-content:center; align-items:center; padding:15px 20px; background:rgba(255,255,255,0.9); z-index:10; }
.banner-slider__progress-container { display:flex; width:100%; justify-content:space-between; gap:8px; }
.banner-slider__progress-bar { height:4px; border-radius:2px; background-color:#ddd; flex-grow:1; overflow:hidden; position:relative; }
.banner-slider__progress-bar-inner { position:absolute; left:0; top:0; height:100%; width:0; background-color:#8A6FFF; border-radius:2px; transition:width 0.3s ease-out; }
.banner-slider__progress-bar.active .banner-slider__progress-bar-inner { width:100%; }

.event-section { display:flex; justify-content:space-between; margin-bottom:25px; }
.event-section__link { flex:1; text-align:center; font-size:11px; color:#333; letter-spacing:-1px; position:relative; padding:8px 0 8px 0; background-color:#f8f9fa; margin:0 0; display:flex; align-items:center; justify-content:center; }
.event-section__link--benefit { margin-left:0; background-color:#ffebe8; border-radius:5px 0 0 5px; }
.event-section__link--benefit::before { content:'🎁'; font-size:14px; margin-right:5px; }
.event-section__link--coupon { background-color:#eeebff; }
.event-section__link--coupon::before { content:'🎫'; font-size:14px; margin-right:5px; }
.event-section__link--more { margin-right:0; background-color:#f5ebff; border-radius:0 5px 5px 0; }
.event-section__link--more::before { content:'🎉'; font-size:14px; margin-right:5px; }

.popular-list { margin-bottom:25px; padding:0; }
.popular-list__header-title { font-size:18px; font-weight:700; margin-bottom:5px; }
.popular-list__header-subtitle { font-size:14px; color:#666; margin-bottom:20px; }
.popular-list__category-tabs { display:flex; overflow-x:auto; margin-bottom:20px; -webkit-overflow-scrolling:touch; white-space:nowrap; padding-bottom:5px; }
.popular-list__category-tabs::-webkit-scrollbar { display:none; }
.popular-list__category-tab { padding:12px 15px; background-color:#f5f5f5; border-radius:25px; font-size:14px; margin-right:10px; color:#333; }
.popular-list__category-tab--active { background-color:#222; color:white; }
.popular-list__item { display:flex; margin-bottom:30px; }
.popular-list__content-wrapper { display:flex; flex:1; }
.popular-list__rank { font-size:50px; font-weight:700; color:#eee; margin-right:15px; align-self:flex-start; margin-top:-12px; }
.popular-list__info { flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.popular-list__info-top { margin-bottom:auto; }
.popular-list__name { font-size:16px; font-weight:500; margin-bottom:2px; }
.popular-list__address { font-size:13px; color:#888; margin-bottom:5px; }
.popular-list__price-info { }
.popular-list__discount { color:#e94684; font-weight:700; font-size:16px; }
.popular-list__price { font-size:16px; font-weight:700; padding-left:5px; }
.popular-list__rating { display:flex; align-items:center; margin-top:5px; }
.popular-list__star { color:#333; margin-right:3px; font-size:14px; line-height:1; display:flex; align-items:center; }
.popular-list__score { font-weight:600; margin-right:3px; line-height:1; display:flex; align-items:center; }
.popular-list__reviews { color:#666; font-size:13px; line-height:1; display:flex; align-items:center; }
.popular-list__image { aspect-ratio:1/1; width:90px; border-radius:10px; overflow:hidden; flex-shrink:0; align-self:center; }
.popular-list__image img { width:100%; height:100%; object-fit:cover; }
.popular-list__view-all { display:flex; justify-content:center; align-items:center; padding:12px 15px; border:1px solid #eee; border-radius:10px; margin-top:10px; font-size:14px; color:#333; }

.flash-sale { margin-bottom:25px; padding:0; }
.flash-sale__header-title { font-size:18px; font-weight:700; margin-bottom:5px; }
.flash-sale__header-subtitle { font-size:14px; color:#666; margin-bottom:20px; }
.flash-sale__container { display:flex; overflow-x:auto; gap:10px; margin-bottom:15px; -webkit-overflow-scrolling:touch; }
.flash-sale__container::-webkit-scrollbar { display:none; }
.flash-sale__item { width:80%; flex-shrink:0; border-radius:15px; overflow:hidden; position:relative; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.flash-sale__image { width:100%; aspect-ratio:3/4; position:relative; }
.flash-sale__image img { width:100%; height:100%; object-fit:cover; }
.flash-sale__badge { position:absolute; top:15px; left:15px; background-color:#FF3B30; color:white; border-radius:30px; padding:6px 12px; font-size:12px; font-weight:400; display:flex; align-items:center; line-height:1; }
.flash-sale__badge i { margin-right:6px; font-size:12px; display:flex; align-items:center; justify-content:center; line-height:1; }
.flash-sale__limited-badge { position:absolute; top:15px; right:15px; background-color:#05213f; color:white; border-radius:30px; padding:6px 12px; font-size:12px; font-weight:400; display:flex; align-items:center; line-height:1; }
.flash-sale__limited-badge i { margin-right:6px; font-size:12px; display:flex; align-items:center; justify-content:center; line-height:1; }
.flash-sale__title { position:absolute; bottom:120px; left:0; right:0; color:white; font-size:16px; font-weight:500; padding:0 20px; text-shadow:0 1px 3px rgba(0,0,0,0.5); line-height:1.3; }
.flash-sale__info-panel { position:absolute; bottom:15px; left:15px; right:15px; background-color:white; border-radius:15px; }
.flash-sale__info-content { display:flex; justify-content:space-between; align-items:center; padding:12px 15px; }
.flash-sale__price-info { font-size:16px; font-weight:500; display:flex; flex-direction:column; }
.flash-sale__discount { color:#e94684; font-weight:900; font-size:18px; }
.flash-sale__discount i { font-style:normal; color:#222; display:inline-block; margin-right:6px; font-size:14px; font-weight:400; }
.flash-sale__book-btn { display:flex; align-items:center; justify-content:center; padding:8px 15px; background-color:#e94684; border-radius:50px; color:white; font-size:13px; font-weight:400; }
.flash-sale__book-btn i { margin-right:4px; }
.flash-sale__view-all { display:flex; justify-content:center; align-items:center; padding:12px; border:1px solid #eee; border-radius:10px; font-size:14px; color:#333; font-weight:400; }

.app-footer { background:#f9f9f9; padding:32px 20px 32px 20px; font-family:'Noto Sans KR',sans-serif; font-size:13px; color:#444; line-height:1.6; }
.app-footer__logo { width:110px; margin-bottom:28px; }
.app-footer__section { margin-bottom:24px; }
.app-footer__title { font-weight:700; margin-bottom:8px; color:#000; }
.app-footer__section a { display:block; color:#555; margin-bottom:6px; text-decoration:none; font-size:13px; }
.app-footer__section a strong { color:#111; }
.app-footer__info { font-size:12px; color:#777; margin-bottom:20px; line-height:1.5; }
.app-footer__disclaimer { font-size:12px; color:#777; line-height:1.5; margin-bottom:24px; }
.app-footer__copy { font-size:12px; color:#aaa; }

.bottom-nav { max-width:640px; position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; background-color:white; display:flex; justify-content:space-around; padding:12px 0; border-top:1px solid #eee; z-index:10; }
.bottom-nav__item { display:flex; flex-direction:column; align-items:center; width:20%; }
.bottom-nav__icon { font-size:16px; margin-bottom:5px; color:#999; }
.bottom-nav__text { font-size:11px; color:#999; }
.bottom-nav__item--active .bottom-nav__icon, .bottom-nav__item--active .bottom-nav__text { color:#333; font-weight:500; }

.promo__container { padding:0; letter-spacing:-1px; }
.promo__header-title { font-size: 18px; font-weight: bold; margin-bottom: 20px; }
.promo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.promo__item { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: #fff; }
.promo__item-image { width: 100%; height: 180px; object-fit: cover; display: block; }
.promo__item-badge { position: absolute; top: 12px; left: 12px; background-color: rgba(255, 255, 255, 0.9); color: #333; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.promo__item-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 16px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.promo__item-title { font-size: 18px; font-weight: bold; line-height: 1.3; margin-bottom: 5px; }
.promo__item-subtitle { font-size: 14px; opacity: 0.9; }
.promo__item-emoji { font-size: 20px; vertical-align: middle; margin-right: 4px; }
.promo__view-all { display: block; text-align: center; padding: 15px; border: 1px solid #e0e0e0; border-radius: 12px; background-color: #fff; color: #333; font-size: 14px; font-weight: 400; text-decoration: none; margin-bottom: 0; }
.promo__arrow-up { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 100; }
.promo__arrow-up svg { width: 20px; height: 20px; }

@keyframes gradientFlow { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }  
#app-slider-wrapper { background: linear-gradient(90deg, #8A6FFF 0%, #FF5F98 50%, #8A6FFF 100%); background-size: 200% 200%; animation: gradientFlow 8s ease infinite; padding: 30px 0; }
.app-slider { width:100%; overflow:hidden; position:relative; touch-action:pan-y; }
.app-slider__title { text-align:center; font-size:18px; font-weight:600; margin-bottom:30px; color:#fff; }
.app-slider__track { display:flex; transition:transform 0.5s ease; padding:0; }
.app-slider__slide { flex:0 0 80%; margin:0 10px; position:relative; }
.app-slider__slide img { width:100%; height:auto; display:block; filter:brightness(65%); border-radius:10px; }
.app-slider__slide--empty { pointer-events:none; opacity:0; }
.app-slider__text { letter-spacing:-1px; position:absolute; top:40px; left:20px; z-index:30; color:#fff; }
.app-slider__text-title { line-height:auto; font-size:26px; line-height:1; font-weight:700; margin-bottom:6px; }
.app-slider__text-desc { line-height:auto; font-size:26px; line-height:1; font-weight:700; margin-bottom:12px; }
.app-slider__text-date { line-height:auto; font-size:14px; line-height:1; }
.app-slider__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.15); color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; user-select:none; transition:background 0.3s ease; }
.app-slider__nav:hover { background:rgba(255,255,255,0.3); }
.app-slider__nav i { font-size:16px; }
.app-slider__nav--prev { left:10px; }
.app-slider__nav--next { right:10px; }