*{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;overflow:hidden;padding:0;line-height:0;background:#000}
.header-video .stars-layer{display:none}
.header.header-text{height:175px;padding:8px 4px 0;line-height:normal;text-align:center;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#080021,#220064,#001c63,#51005f,#060015)}
.title-video{position:relative;z-index:2;display:block;width:100%;height:auto;aspect-ratio:1664/640;object-fit:contain;background:#000;pointer-events:none}
.logo{position:relative;z-index:1;width:100%;font-size:clamp(40px,15vw,68px);font-weight:900;letter-spacing:-3px;color:#fff;text-shadow:3px 3px red,6px 6px #00f,9px 9px #0f0,0 0 20px #fff;white-space:nowrap}.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,orange,yellow,lime,cyan,blue,magenta,red);background-size:400% 100%;border-top:2px solid #fff;border-bottom:2px solid #000;animation:rainbowLineFlow 6s linear infinite}
@keyframes rainbowLineFlow{0%{background-position:0% 0}100%{background-position:100% 0}}

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

.content{padding:6px}
.hero{position:relative;min-height:115px;padding:14px;overflow:hidden;text-align:center;border:4px ridge #eee;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,magenta,red,orange,yellow,lime,cyan,blue,magenta,red);background-size:400% 100%;animation:heroRainbowFlow 10s linear infinite}
@keyframes heroRainbowFlow{0%{background-position:0% 0}100%{background-position:100% 0}}
.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-title.marquee{position:relative;height:1.3em}
.hero-title.marquee span{position:absolute;left:100%;top:0;white-space:nowrap;animation:heroMarquee 8s linear infinite}
@keyframes heroMarquee{0%{left:100%}100%{left:-100%}}
.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;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 0 #000;background:linear-gradient(90deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#80f)}
.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(6,minmax(0,1fr));gap:3px}
.product{position:relative;min-width:0;padding:2px;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-img.soon{background:#000;color:#555;font-size:8px;font-weight:900;line-height:1.2;letter-spacing:.5px;padding:2px}
.product h3{min-height:26px;margin:4px 0 1px;font-size:8px;line-height:1.15}
.price{margin:1px;color:red;font-size:9px;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:7.5px}
.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}


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-img.soon{font-size:7px}
  .product h3{font-size:7px}
  .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}}

/* 드로어: 최고의 우수사원 (왼 2위 / 가운데 1위 / 오른 3위) */
.rank-list{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:5px;padding:6px}
.rank-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;background:#000;border:3px inset #aaa;min-width:0}
.rank-num{font-size:16px;font-weight:900;text-shadow:1px 1px #000,2px 2px #f00}
.rank-gold .rank-num{color:#ff0;font-size:19px}.rank-silver .rank-num{color:#ddd}.rank-bronze .rank-num{color:#f90}
.rank-img{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#07002d;overflow:hidden}
.rank-img img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.rank-img-missing:before{content:"상품 준비중";color:#555;font-size:9px;font-weight:900}
.rank-gold{border:3px solid #ff0;box-shadow:0 0 8px #ff0}

/* ===== 스케줄 페이지 ===== */
.sch-banner{margin-bottom:6px;padding:8px;text-align:center;font-size:18px;font-weight:900;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 0 #000;background:linear-gradient(90deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#80f);border:4px ridge #eee}
.sch-banner span{display:inline-block;margin-left:4px;padding:2px 6px;background:#000;color:#0f0;font-size:11px;text-shadow:none;vertical-align:middle}
.day-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:6px}
.day-tab{padding:9px 2px;border:3px outset #fff;background:linear-gradient(#fff,#aaa);font:900 13px Arial,"Malgun Gothic",sans-serif;color:#001fc8;cursor:pointer}
.day-tab:active{border-style:inset}
.day-tab.active{border-style:inset;background:#000;color:#ff0;text-shadow:1px 1px #f00}
.day-tab-all{color:#f00}
.day-panel{display:none;margin-bottom:6px;background:#eee;border:3px ridge #fff}
.day-panel.active{display:block}
.day-title{position:relative;margin:0;padding:8px;text-align:center;color:#0ff;font-size:16px;background:linear-gradient(90deg,#000,#300060,#0016a0,#000)}
.day-final{position:absolute;right:6px;top:4px;padding:2px 5px;background:red;color:#ff0;font-size:10px;transform:rotate(8deg)}
.sch-pre{margin:6px 6px 0;padding:7px 8px;background:#f00;color:#ff0;border:3px solid #ff0;font-size:13px;font-weight:900;animation:blink .8s infinite}
.sch-pre-time{display:inline-block;margin-right:6px;padding:1px 5px;background:#000;color:#0f0}
.sch-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px}
.sch-row{display:flex;align-items:center;gap:6px;padding:6px;background:#fff;border:2px inset #aaa}
.sch-no{flex:0 0 24px;height:24px;display:grid;place-items:center;background:#000;color:#ff0;font-weight:900;font-size:12px;border:2px outset #555}
.sch-body{flex:1;min-width:0;font-size:14px;line-height:1.3}
.sch-body strong{color:#001fc8}
.sch-detail{display:block;color:#555;font-size:11px;font-weight:700}
.sch-time{flex:0 0 auto;min-width:52px;padding:4px 5px;text-align:center;background:#000;color:#0f0;border:2px inset #aaa;font:900 12px monospace}
.sch-pick{background:#ffe0f5;border-color:#f0f}
.sch-pick .sch-body strong{color:#f00}
.sch-pick .sch-body strong:before{content:"💗 "}
.sch-final{background:linear-gradient(90deg,#ff0,#f0f);border:3px solid #f00}
.sch-final .sch-body strong{font-size:16px}

/* ===== 흐르는 무지개 타이틀 (글씨는 배경의 보색) ===== */
.section-title.flow-title{isolation:isolate;text-shadow:none;border:4px ridge #eee;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,magenta,red,orange,yellow,lime,cyan,blue,magenta,red);background-size:400% 100%;animation:heroRainbowFlow 10s linear infinite;font-size:19px;padding:11px}
.flow-title span{color:#fff;mix-blend-mode:difference}

/* ===== 호감도 엑셀 표 ===== */
.xl-window{margin-bottom:6px;background:#c0c0c0;border:3px outset #fff;box-shadow:3px 3px 0 #000}
.xl-titlebar{display:flex;justify-content:space-between;align-items:center;padding:4px 5px;background:linear-gradient(90deg,#007a00,#00ff00,#ff0,#f0f);color:#fff;font-size:12px;font-weight:900;text-shadow:1px 1px #000,-1px -1px #000}
.xl-btns b{display:inline-block;width:18px;height:16px;margin-left:2px;line-height:14px;text-align:center;background:#c0c0c0;color:#000;border:2px outset #fff;font-size:11px;text-shadow:none}
.xl-menu{display:flex;gap:10px;padding:3px 6px;font-size:12px;border-bottom:2px groove #fff}
.xl-menu .blink{color:#f00;font-weight:900}
.xl-formula{display:flex;align-items:center;gap:4px;padding:4px;border-bottom:2px groove #fff}
.xl-cell-ref{width:44px;padding:2px 4px;background:#fff;border:2px inset #888;font:12px monospace}
.xl-fx{font:italic 900 13px serif;color:#00f}
.xl-formula-text{flex:1;padding:2px 4px;background:#fff;border:2px inset #888;font:12px monospace;color:#f00}
.xl-scroll{overflow-x:auto;background:#fff;border:2px inset #888;margin:4px}
.xl-table{border-collapse:collapse;width:100%;min-width:430px;font:12px Arial,"Malgun Gothic",sans-serif}
.xl-table th,.xl-table td{border:1px solid #9a9a9a;padding:6px 4px;text-align:center;white-space:nowrap}
.xl-table thead th{background:#dcdcdc;color:#000;font-weight:400;padding:3px 4px}
.xl-corner{width:26px;background:#bdbdbd !important}
.xl-row{position:sticky;left:0;z-index:1;width:26px;background:#dcdcdc;font-weight:400;color:#000}
.xl-h{background:linear-gradient(90deg,#f0f,#ff0);color:#00f;font-weight:900;text-shadow:1px 1px #fff}
.xl-name-h{background:#ff0;color:#f00}
.xl-name{background:#000;color:#0f0;font-weight:900;font-family:monospace}
.xl-table tbody tr:nth-child(odd) td:not(.xl-h):not(.xl-name){background:#ffffd0}
.xl-table tbody tr:nth-child(even) td:not(.xl-h):not(.xl-name){background:#d0fff8}
.xl-table td{color:#f00;font-weight:900}
.xl-table td.xl-h{color:#00f}.xl-table td.xl-name-h{color:#f00}.xl-table td.xl-name{color:#0f0}
.xl-table tbody tr:nth-child(2) td:nth-child(3){outline:2px solid #000;outline-offset:-2px}
.xl-sheets{display:flex;align-items:flex-end;gap:2px;padding:0 4px 4px;font-size:11px}
.xl-sheet{padding:3px 8px;background:#a8a8a8;border:2px outset #fff;border-top:none}
.xl-sheet.active{background:#fff;font-weight:900;color:#f00}
.xl-status{margin-left:auto;padding:3px 5px;background:#000;color:#0f0;font:10px monospace}

.rank-name{color:#0f0;font:900 13px monospace;text-shadow:1px 1px #f0f}
.rank-gold .rank-name{color:#ff0;font-size:15px}
.rank-msg{margin:0 6px 6px;padding:6px;text-align:center;background:#000;color:#0f0;border:2px inset #aaa;font-size:12px;font-weight:900}
.worst-rank{background:#300;border:3px ridge #f00}
.worst-rank h2{color:#ff0;background:linear-gradient(90deg,#000,#900,#f00,#900,#000);text-shadow:2px 2px #000}
.worst-box{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px auto;width:46%;padding:4px;background:#000;border:3px solid #f00;box-shadow:0 0 10px #f00}
.worst-img{background:#200}
.worst-name{color:#f00;font-size:15px;text-shadow:1px 1px #ff0}
.worst-msg{margin:0 6px 6px;padding:6px;text-align:center;background:#f00;color:#ff0;border:2px solid #ff0;font-size:12px;font-weight:900}
.vip-blink{animation:vipBlink .8s steps(1,end) infinite}
@keyframes vipBlink{0%{filter:none}50%{filter:invert(1)}}

/* ===== 팝업: 우리가 LOVE 도움 + Aile ===== */
.love-aile{position:relative;z-index:1;margin:24px auto 2px;display:flex;justify-content:center}
.love-aile img{display:block;max-width:60%;max-height:120px;object-fit:contain;filter:drop-shadow(3px 3px 0 #f00) drop-shadow(-3px -3px 0 #0ff) drop-shadow(0 0 10px #fff)}
.love-title{position:relative;z-index:1;margin:4px auto 8px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.love-big{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(56px,15vw,84px);font-weight:900;line-height:.9;color:#fff;text-shadow:4px 4px #f00,8px 8px #00f,12px 12px #0f0,0 0 18px #fff;transform:skew(-5deg,-2deg)}
.love-small{padding:4px 7px;background:#000;color:#ff0;font-size:clamp(18px,5vw,24px);font-weight:900;text-shadow:2px 2px #f00;transform:rotate(-4deg)}
.love-small:last-child{transform:rotate(4deg)}

/* ===== 규칙 페이지 ===== */
.rule-card{margin-bottom:6px;background:#eee;border:3px ridge #fff}
.rule-title{display:flex;align-items:center;gap:6px;margin:0;padding:8px;color:#0ff;font-size:15px;background:linear-gradient(90deg,#000,#300060,#0016a0,#000)}
.rule-no{flex:0 0 auto;padding:2px 6px;background:#ff0;color:#f00;font-size:12px;border:2px outset #fff;text-shadow:none}
.rule-body{padding:8px;font-size:13px;line-height:1.65}
.rule-body p{margin:0 0 6px;padding:6px 8px;background:#fff;border:2px inset #aaa}
.rule-outtake,.rule-example{margin-top:4px;padding:6px 8px;font-weight:900;font-size:12px;line-height:1.55}
.rule-outtake{background:#f00;color:#ff0;border:2px solid #ff0}
.rule-example{background:#000;color:#0f0;border:2px inset #aaa}
.rule-tag{display:inline-block;margin-right:3px;padding:0 5px;background:#000;color:#fff;font:900 11px monospace;text-transform:uppercase}
.rule-example .rule-tag{background:#0f0;color:#000}

/* ===== 색 역할: 무지개=장식 / 빨강=경고 / 노랑=강조 / 청록=포인트 ===== */
/* 네비: 현재 페이지만 무지개, 나머지는 기본 버튼 */
.nav a{color:#001fc8;text-shadow:none;background:linear-gradient(#fff,#bbb)}
.nav a:active{border-style:inset}
.nav a.active{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 0 #000;background:linear-gradient(90deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#80f);border-style:inset}

/* 브랜드 태그 (페이지 공통) */
.brand-tag{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding:4px 7px;background:#000;border:2px inset #888;font:900 11px monospace;color:#0ff;letter-spacing:.5px}
.brand-tag b{color:#ff0;font-size:12px}
.brand-sep{color:#0ff}
.brand-alien{font-size:14px}

/* 규칙 페이지 제목: 단순한 기본 박스 */
.page-title{margin:0 0 6px;padding:14px 8px;text-align:center;background:linear-gradient(#fff,#d4d4d4);border:3px solid #555;outline:1px solid #000;font-size:20px}
.page-title span{color:#00e5ff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 0 #000}

/* 경고 배너: 빨강→주황→노랑 */
.warn-banner{display:flex;flex-direction:column;margin-bottom:8px;padding:8px 10px;background:linear-gradient(90deg,#f00,#f80,#ff0);border:3px ridge #eee}
.warn-banner strong{color:#fff;font-size:17px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 0 #000}
.warn-banner span{align-self:flex-end;margin-top:3px;padding:1px 6px;background:#000;color:#ff0;font:900 11px monospace}

/* 규칙 블록: 제목=검정/남색, 번호=노랑, 본문=흰색, OUTTAKE=빨강 */
.rules .rule-card{margin:0 0 8px}
.rules .rule-title{padding:7px 8px;font-size:14px;color:#fff;background:linear-gradient(90deg,#000,#0a1450)}
.rules .rule-no{background:#ff0;color:#000;border:2px outset #fff;font-size:11px}
.rules .rule-body{padding:6px 5px}
.rules .rule-body p{margin:0 0 5px;padding:6px 7px;font-size:12.5px;line-height:1.55;word-break:keep-all;background:#fff;border:1px solid #888}
.rules .rule-outtake{margin-top:5px;padding:6px 7px;font-size:12px;line-height:1.5;word-break:keep-all;background:#e00000;color:#fff;border:2px solid #000;font-weight:700}
.rules .rule-outtake .rule-tag{background:#ff0;color:#000}
.rules .rule-example{margin-top:5px;padding:6px 7px;font-size:12px;word-break:keep-all;background:#fff;color:#000;border:1px dashed #555;font-weight:700}
.rules .rule-example .rule-tag{background:#000;color:#0ff}

/* ===== LOVE 팝업: 캐릭터만 화려하게, 나머지는 기본 HTML UI ===== */
.love-ad.love-win{width:min(360px,92vw);padding:0;overflow:visible;background:#c0c0c0;border:3px outset #fff;box-shadow:0 0 0 2px #000,6px 6px 0 #000;animation:lovePop .3s cubic-bezier(.2,1.35,.4,1) both}
.love-ad.love-win:before,.love-ad.love-win:after{content:none}
.lw-titlebar{position:relative;display:flex;align-items:center;justify-content:center;padding:7px 36px;background:linear-gradient(90deg,#000,#0a1450);border-bottom:2px solid #000}
.lw-title{color:#fff;font-size:17px;font-weight:900;letter-spacing:1px;text-shadow:2px 2px #f00}
.lw-titlebar .love-close{top:50%;right:5px;width:24px;height:22px;transform:translateY(-50%);font-size:17px;line-height:14px;border-width:2px}
.lw-stage{margin:8px;padding:10px;display:flex;justify-content:center;background:#fff;border:2px inset #888}
.lw-stage img{display:block;width:78%;max-width:240px;height:auto;image-rendering:pixelated}
.lw-copy{margin:0 8px;padding:7px 4px;text-align:center;background:#000;color:#ff0;font-size:14px;font-weight:900;border:2px inset #888}
.lw-copy:first-letter{color:#f00}
.lw-body{padding:10px 8px 12px;text-align:center}
.lw-limit{margin:0 0 10px;font-size:15px;color:#000}
.lw-limit strong{color:#f00;font-size:18px}
.lw-btn{display:block;width:72%;margin:0 auto;padding:9px 6px;background:#c0c0c0;border:3px outset #fff;outline:1px solid #000;color:#000;text-decoration:none;font-size:15px;font-weight:900}
.lw-btn:active{border-style:inset}

/* ===== LOVE 팝업 수정: 무지개 스테이지 + 무지개 한정 문구 ===== */
.lw-stage{background:linear-gradient(135deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#80f)}
.lw-limit{display:flex;align-items:center;justify-content:center;gap:6px}
.lw-star{color:#ff0;font-size:20px;-webkit-text-stroke:1px #000}
.lw-rainbow{font-size:23px;font-weight:900;background:linear-gradient(90deg,#f00,#f80,#ff0,#0f0,#0ff,#00f,#80f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(2px 2px 0 #000)}

/* ===== 공통: 작은 외계인 마스코트 ===== */
.mini-alien{width:40px;height:40px;image-rendering:pixelated;flex:0 0 auto}
.notice-mascot{position:relative;padding-right:56px}
.notice-alien{position:absolute;right:8px;top:8px;width:42px;height:42px}
.sch-guide{display:flex;align-items:flex-end;gap:6px;margin-bottom:6px}
.sch-bubble{position:relative;padding:5px 8px;background:#fff;border:2px solid #000;font-size:12px;font-weight:900}
.sch-bubble:before{content:"";position:absolute;left:-8px;bottom:6px;border:6px solid transparent;border-right-color:#000}

/* ===== RULES: 방송국 내부 규정 문서 ===== */
.rules-doc .doc-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;font:10px/1.5 monospace;color:#222}
.doc-meta div{display:flex;flex-direction:column}
.doc-meta b{color:#007a00}
.doc-inspector{margin:0;text-align:center;font:900 9px monospace;color:#f00}
.doc-inspector figcaption{transform:rotate(-6deg);border:1px solid #f00;padding:0 2px;background:#fff}
.rules-hero{margin:0 0 8px;padding:10px 0 8px;text-align:center;border-top:3px double #000;border-bottom:3px double #000}
.rh-en{display:block;font:900 clamp(46px,15vw,64px)/1 Impact,"Arial Black",sans-serif;letter-spacing:6px;color:#00e5ff;text-shadow:3px 3px 0 #000}
.rh-ko{display:block;margin-top:4px;font-size:18px;font-weight:900;letter-spacing:22px;padding-left:22px;color:#000}
.rh-sub{display:block;margin-top:4px;font:10px monospace;letter-spacing:1px;color:#0a1450}

.rx{position:relative;padding:12px 2px 14px;border-bottom:2px dashed #555}
.rx:last-of-type{border-bottom:none}
.rx-head{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}
.rx-num{font:900 54px/0.85 Impact,"Arial Black",sans-serif;color:#ff0;-webkit-text-stroke:2px #000;text-shadow:4px 4px 0 #0a1450}
.rx-head h3{margin:0 0 3px;font-size:15px;color:#0a1450;border-bottom:3px solid #0a1450;padding-bottom:2px}
.rx-right .rx-head{flex-direction:row-reverse;text-align:right}
.rx-text{margin:0 0 6px;padding:7px 8px;background:#fff;font-size:12.5px;line-height:1.55;word-break:keep-all;border-left:4px solid #0a1450}
.rx-right .rx-text{border-left:none;border-right:4px solid #0a1450}

/* OUTTAKE 변형들 (빨강 = 방송 사고/경고/금지) */
.ox{margin-top:6px;font-size:12px;line-height:1.5;word-break:keep-all}
.ox p{margin:3px 0 0}
.ox-label{font:900 12px monospace;letter-spacing:1px}
.ox-file{padding:6px 8px;background:#e00000;color:#fff;border:2px solid #ff0}
.ox-file .ox-label{color:#ff0}
.ox-code{display:inline-block;margin-top:2px;padding:0 5px;background:#000;color:#f00;font:900 11px monospace}
.ox-alarm{padding:6px 8px;background:repeating-linear-gradient(45deg,#ff0 0 10px,#000 10px 20px);}
.ox-alarm .ox-label{display:inline-block;padding:1px 6px;background:#f00;color:#fff}
.ox-alarm p,.ox-alarm .ox-absent{margin-top:4px;padding:5px 7px;background:#fff;color:#000}
.ox-absent{font:900 12px monospace}.ox-absent b{color:#f00}.ox-absent small{color:#555}
.ox-bar{padding:6px 8px;background:#000;color:#fff;border-left:6px solid #f00}
.ox-bar .ox-label{color:#f00}
.ox-progress{font:12px monospace;color:#f00}.ox-progress b{color:#ff0}
.ox-sys{background:#fff;border:2px solid #f00}
.ox-sys .ox-label{padding:3px 6px;background:#f00;color:#ff0}
.ox-sys p{padding:5px 7px;color:#c00;font-weight:700}

/* 조항별 정보 장치 */
.rx-timeline{display:flex;align-items:center;gap:5px;margin:2px 0 7px;font:900 13px monospace;color:#0a1450;flex-wrap:wrap}
.rx-timeline i{flex:1;height:3px;min-width:60px;background:repeating-linear-gradient(90deg,#0a1450 0 6px,transparent 6px 9px)}
.rx-timeline em{flex-basis:100%;text-align:center;font:700 10px monospace;color:#555;font-style:normal;margin-top:-3px}
.rx-errors{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:7px;font:900 11px monospace}
.rx-errors .err-count{flex-basis:100%;color:#000}.err-count b{color:#f00;font-size:15px}
.rx-errors span{padding:1px 5px;background:#ff0;color:#000;border:1px solid #000}
.rx-errors span:nth-child(3){transform:rotate(-2deg)}.rx-errors span:nth-child(4){transform:rotate(2deg)}
.rx-example{padding:2px 0}
.ex-label{margin-bottom:3px;font:900 11px monospace;color:#0a1450}
.rx-example span{display:inline-block;margin:0 3px 3px 0;padding:3px 7px;background:#000;color:#0ff;font-size:12px;font-weight:900}
.rx-rating{margin-left:auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#f80;color:#fff;font:900 16px Arial;border:3px solid #000}
.rx-contact{display:flex;align-items:center;gap:5px;margin-bottom:7px;font:900 11px monospace;flex-wrap:wrap}
.ct-off{padding:2px 6px;background:#000;color:#f00;text-decoration:line-through}
.ct-arrow{color:#0a1450}
.ct-on{padding:2px 6px;background:#ff0;color:#000;border:1px solid #000}
.rx-points{margin-bottom:7px;font:900 13px monospace;color:#0a1450}
.rx-points b{color:#ff0;-webkit-text-stroke:1px #000;font-size:17px}.rx-points b.off{color:#888}
.rx-points small{font-size:10px;color:#555}
.doc-end{margin:10px 0 4px;text-align:center;font:9px monospace;color:#333;letter-spacing:.5px}