*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:#030018;font-family:Arial,"Malgun Gothic",sans-serif;color:#111}

/* ★ 랜덤 반짝이는 별 배경 (JS로 생성) ★ */
.starfield{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.stars-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}

/* UFO 지나가는 애니메이션 - 뒷배경 검정 플래시 */
.ufo-flyby{position:fixed;z-index:99999;left:-160px;top:-130px;width:145px;height:145px;pointer-events:none;animation:ufoFly 1s cubic-bezier(.15,.75,.3,1) 0s 1 both}
.ufo-flyby img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #0ff) drop-shadow(0 0 35px #f0f);animation:ufoBlink .11s steps(2,end) 0s 8}
.screen-flash{position:fixed;z-index:99998;inset:0;pointer-events:none;background:rgba(0,0,0,0);animation:flashEnd .18s ease-out 1.02s 1 both}
@keyframes ufoFly{0%{left:-160px;top:-130px;opacity:0;transform:rotate(-18deg) scale(.7)}8%{opacity:1}35%{opacity:.2}48%{opacity:1}65%{opacity:.25}78%{opacity:1}100%{left:calc(100vw - 10px);top:calc(100vh - 150px);opacity:0;transform:rotate(18deg) scale(1.2)}}
@keyframes ufoBlink{0%,100%{filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #0ff) drop-shadow(0 0 35px #f0f)}50%{filter:drop-shadow(0 0 25px #fff) drop-shadow(0 0 55px #ff0) drop-shadow(0 0 90px #f00)}}
@keyframes flashEnd{0%{background:rgba(0,0,0,.85)}100%{background:rgba(0,0,0,0)}}

.site{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;background:#aaa;border-left:3px ridge #fff;border-right:3px ridge #555;min-height:100vh}

.browser{display:flex;gap:5px;padding:6px;height:40px;background:linear-gradient(#eee,#999);border-bottom:3px ridge #fff}.browser button{width:32px;border:2px outset #fff;background:#ccc;font-weight:900}.address{flex:1;background:#fff;border:2px inset #777;padding:5px 8px;font:12px Arial,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.header{position:relative;height:175px;overflow:hidden;padding-top:30px;text-align:center;background:linear-gradient(135deg,#080021,#220064,#001c63,#51005f,#060015)}
.ufo{position:absolute;z-index:1;font-size:52px;filter:drop-shadow(0 0 12px #00ffff)}.ufo-left{left:2px;top:28px;transform:rotate(-8deg)}.ufo-right{right:4px;top:6px;transform:rotate(8deg)}
.logo{position:relative;z-index:1;font-size:clamp(30px,9vw,44px);font-weight:900;letter-spacing:-4px;color:#fff;text-shadow:3px 3px red,6px 6px #00f,9px 9px #0f0,0 0 20px #fff}.logo-sub{position:relative;z-index:1;margin-top:4px;color:#ff0;font-size:14px;font-weight:900;text-shadow:2px 2px red}
.burst{position:absolute;z-index:1;right:6px;top:6px;padding:9px 7px;background:#f00;color:#ff0;border:3px solid #ff0;font-weight:900;font-size:11px;transform:rotate(7deg);clip-path:polygon(50% 0,62% 9%,78% 2%,82% 17%,98% 20%,91% 35%,100% 48%,87% 58%,96% 74%,80% 77%,77% 94%,61% 87%,50% 100%,38% 88%,22% 95%,19% 79%,2% 75%,10% 59%,0 47%,12% 35%,5% 19%,21% 17%,24% 3%,40% 10%)}
.rainbow-line{height:8px;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,magenta,red);border-top:2px solid #fff;border-bottom:2px solid #000}

.nav{display:grid;grid-template-columns:repeat(3,1fr)}.nav a{padding:10px 2px;text-align:center;text-decoration:none;color:#000;font-weight:900;font-size:13px;background:linear-gradient(90deg,#f0f,#0ff,#ff0,#0f0);border:2px outset #fff}

.content{padding:6px}
.hero{position:relative;min-height:115px;padding:14px;overflow:hidden;text-align:center;background:linear-gradient(135deg,#f00,#f0f,#00f,#0ff,#0f0,#ff0,#f00);border:4px ridge #eee}
.hero-title{color:#fff;font-size:clamp(22px,7vw,30px);font-weight:900;line-height:1.05;text-shadow:2px 2px red,4px 4px blue,6px 6px #000}
.hero-sub{display:inline-block;margin-top:10px;padding:4px 8px;background:#000;color:#0f0;font-weight:900;font-size:12px}
.burst.small{font-size:11px;padding:12px 10px}

/* 브라우저 바 버튼(◀=메뉴, 🎵=음악) 은 .browser button 기본 스타일 사용 */

/* 슬라이드 드로어 (카테고리/고객센터/방문자) */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9990;opacity:0;pointer-events:none;transition:opacity .25s ease}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;height:100vh;width:78%;max-width:300px;background:#aaa;border-right:4px ridge #fff;z-index:9991;padding:10px;overflow-y:auto;transform:translateX(-105%);transition:transform .28s ease}
.drawer.open{transform:translateX(0)}
.drawer-close{width:100%;margin-bottom:8px;padding:10px;border:3px outset #fff;background:linear-gradient(#fff,#aaa);font-weight:900;cursor:pointer}
.drawer-close:active{border-style:inset}
body.drawer-lock{overflow:hidden}

.panel,.side-ad{margin-bottom:6px;background:#ddd;border:3px ridge #fff}
.panel h2{margin:0;padding:7px 3px;text-align:center;color:#0ff;background:linear-gradient(90deg,#000,#300060,#0016a0,#000);font-size:15px}
.panel a{display:block;padding:9px 5px;border-bottom:2px dotted #555;color:#001fc8;text-decoration:none;font-weight:900;font-size:14px}
.panel a:hover{background:#ff0;color:#f00}
.side-ad{padding:12px 5px;text-align:center;font-size:15px;font-weight:900;background:repeating-linear-gradient(45deg,#f00 0 15px,#ff0 15px 30px,#0f0 30px 45px,#0ff 45px 60px,#f0f 60px 75px)}
.info-row{display:grid;grid-template-columns:1fr;gap:6px}
.contact{text-align:center}.contact strong{display:block;padding:6px 2px;color:red;font-size:14px}.contact p{margin:0 3px 8px;font-size:10px}
.counter{text-align:center}.counter div{margin:6px;padding:6px;background:#000;color:#0f0;border:3px inset #aaa;font:20px monospace}

.section-title{margin:0 0 6px;padding:9px;text-align:center;color:#ff0;background:linear-gradient(90deg,#000,#f0f,#00f,#000);border:3px ridge #fff;text-shadow:2px 2px red;font-size:17px}

.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.product{position:relative;min-width:0;padding:3px;text-align:center;background:#eee;border:3px ridge #fff}
.product-img{position:relative;height:60px;display:grid;place-items:center;background:#07002d;border:2px inset #888;font-size:26px;overflow:hidden}
.product-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.product h3{min-height:26px;margin:4px 0 1px;font-size:9px;line-height:1.15}
.price{margin:1px;color:red;font-size:11px;font-weight:900;text-shadow:1px 1px #ff0}
.product button{width:96%;margin:4px auto 1px;padding:5px 1px;border:2px outset #fff;background:linear-gradient(#fff,#aaa);font-weight:900;cursor:pointer;font-size:9px}
.product button:active{border-style:inset}
.badge{position:absolute;right:1px;top:1px;padding:2px 3px;background:red;color:#ff0;font-weight:900;font-size:8px;transform:rotate(8deg);z-index:2}

.notice{margin-top:6px;padding:9px;background:#111;border:3px ridge #fff;color:#0f0;font-size:12px;line-height:1.6}
.notice h2{margin:0 0 4px;color:red;text-shadow:1px 1px yellow;font-size:14px}
.notice p{margin:2px 0}

.bottom-banner{margin-top:6px;padding:14px 5px;text-align:center;color:#fff;font-size:17px;font-weight:900;line-height:1.4;background:linear-gradient(90deg,red,#f0f,#00f,#0ff,#0f0,#ff0,red);border:4px ridge #fff;text-shadow:2px 2px red,4px 4px #00f}

footer{padding:13px 5px;text-align:center;color:#fff;background:#000;border-top:4px ridge #fff;font-size:10px}
footer strong{color:#0ff;font-size:13px}
.blink{animation:blink .8s infinite}@keyframes blink{0%,45%{opacity:1}46%,100%{opacity:.2}}

@media(max-width:360px){
  .logo{letter-spacing:-2px}
  .hero-title{font-size:20px}
  .burst{font-size:10px;padding:8px 6px}
  .product-img{height:48px;font-size:20px}
  .product h3{font-size:8px}
  .ufo{font-size:40px}
}

/* ===== 접속 즉시 LOVE 한정판매 광고 ===== */
.love-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.82);backdrop-filter:blur(2px);animation:loveOverlayIn .18s ease-out both}
.love-ad{position:relative;width:min(430px,94vw);padding:12px 12px 10px;text-align:center;overflow:hidden;background:linear-gradient(135deg,#ff003c 0%,#ff00d4 25%,#5b00ff 52%,#00eaff 76%,#ffe600 100%);border:6px ridge #fff;box-shadow:0 0 0 4px #000,0 0 28px #ff00ff,0 0 55px #00ffff;animation:lovePop .35s cubic-bezier(.2,1.35,.4,1) both}
.love-ad:before{content:"★ ★ ★ ★ ★ ★ ★ ★";position:absolute;left:-10px;right:-10px;top:2px;color:#fff;font-size:17px;letter-spacing:8px;text-shadow:2px 2px #f00;animation:loveStars .55s infinite alternate;pointer-events:none}
.love-ad:after{content:"今すぐ予約!!  大人気!!  NEW!!";position:absolute;left:-35px;right:-35px;bottom:7px;padding:3px;background:#000;color:#0f0;font-size:10px;font-weight:900;transform:rotate(-3deg);pointer-events:none}
.love-close{position:absolute;right:5px;top:5px;z-index:4;width:31px;height:31px;padding:0;border:3px outset #fff;background:#aaa;color:#000;font:bold 22px Arial;line-height:20px;cursor:pointer}
.love-close:active{border-style:inset}
.love-image{position:relative;z-index:1;margin:22px auto 8px;min-height:110px;display:flex;align-items:center;justify-content:center}.love-image img{display:block;max-width:88%;max-height:145px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(3px 3px 0 #f00) drop-shadow(6px 6px 0 #00f) drop-shadow(9px 9px 0 #0f0) drop-shadow(0 0 12px #fff)}.love-image-missing:before{content:"LOVE";font-family:Impact,Arial Black,sans-serif;font-size:clamp(68px,18vw,100px);font-weight:900;letter-spacing:2px;color:#fff;line-height:.85;text-shadow:4px 4px #f00,8px 8px #00f,12px 12px #0f0,0 0 18px #fff;transform:skew(-5deg,-2deg)}
.love-sticker{position:absolute;z-index:3;right:8px;top:47px;padding:12px 9px;background:#f00;color:#ff0;border:3px solid #ff0;font-size:12px;font-weight:900;line-height:1.1;transform:rotate(8deg);clip-path:polygon(50% 0,62% 8%,78% 2%,82% 17%,98% 20%,91% 35%,100% 48%,87% 58%,96% 74%,80% 77%,77% 94%,61% 87%,50% 100%,38% 88%,22% 95%,19% 79%,2% 75%,10% 59%,0 47%,12% 35%,5% 19%,21% 17%,24% 3%,40% 10%);text-shadow:1px 1px #000}
.love-head{position:relative;z-index:1;margin:4px auto 2px;padding:5px 8px;width:max-content;max-width:100%;background:#000;color:#ff0;font-size:clamp(25px,7vw,36px);font-weight:900;line-height:1;text-shadow:3px 3px #f00;transform:rotate(-1deg)}
.love-copy{position:relative;z-index:1;margin-top:5px;color:#fff;font-size:22px;font-weight:900;text-shadow:2px 2px #f00,3px 3px #00f}
.love-copy strong{font-size:32px;color:#ff0;text-decoration:underline;text-shadow:2px 2px #f00}
.love-sub{position:relative;z-index:1;margin:7px auto;padding:7px 8px;background:#fff;color:#f00;border:3px ridge #aaa;font-size:15px;font-weight:900;box-shadow:4px 4px #000}
.love-reserve{position:relative;z-index:2;display:block;margin:8px auto 18px;width:92%;padding:12px 7px;background:linear-gradient(#fff,#bbb);border:4px outset #fff;color:#000;text-decoration:none;font-size:17px;font-weight:900;text-shadow:1px 1px #ff0;box-shadow:0 0 10px #fff;animation:reserveBlink .7s infinite}
.love-reserve:active{border-style:inset}
.love-note{position:relative;z-index:1;color:#fff;background:#000;padding:5px;font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden}
@keyframes loveOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes lovePop{0%{opacity:0;transform:scale(.65) rotate(-4deg)}70%{transform:scale(1.04) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes loveStars{from{opacity:.45;transform:translateX(-8px)}to{opacity:1;transform:translateX(8px)}}
@keyframes reserveBlink{0%,55%{filter:brightness(1)}56%,100%{filter:brightness(1.45)}}
body.love-open{overflow:hidden}
@media(max-width:360px){.love-ad{padding:9px}.love-sticker{font-size:10px;top:40px;right:4px}.love-image{font-size:65px}.love-head{font-size:23px}.love-copy{font-size:18px}.love-copy strong{font-size:27px}.love-sub{font-size:13px}.love-reserve{font-size:15px}}