/* [Claude 2026-10-08] 홈 화면(새 테마): 자동으로 넘어가는 큰 배너 + 게임시작 + 공지·이벤트 + 랭킹·바로가기 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:8px}

/* 배너 */
.banner{position:relative;height:400px;border-radius:26px;border:4px solid #fff;overflow:hidden;background:#7cc8ff;box-shadow:0 7px 0 #e79a3c,0 18px 34px #7a4a1040;isolation:isolate}
.slide{position:absolute;inset:0 0 54px 0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;display:flex;align-items:center;padding:0 46px;color:#fff;text-decoration:none}
.slide.on{opacity:1;visibility:visible}
.slide-art{position:absolute;inset:0 0 -54px 0;z-index:-1;overflow:hidden}
.slide-copy{max-width:62%;transform:translateY(14px);opacity:0;transition:transform .6s .15s ease,opacity .6s .15s}
.slide.on .slide-copy{transform:none;opacity:1}
.slide-tag{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--red);border:3px solid #fff;font:400 15px/1 var(--display);letter-spacing:.04em;box-shadow:0 4px 0 #0003;transform:rotate(-3deg)}
.slide h2{margin:16px 0 12px;font:400 clamp(38px,5.4vw,66px)/1.08 var(--display);letter-spacing:-.01em;color:#fff;text-shadow:-3px -3px 0 #7a3b00,3px -3px 0 #7a3b00,-3px 3px 0 #7a3b00,3px 3px 0 #7a3b00,0 7px 0 #7a3b00,0 12px 18px #0006}
.slide h2 em{font-style:normal;color:#ffe45c}
.slide p{margin:0;display:inline-block;padding:9px 16px;border-radius:12px;background:#3b2a1acc;font:700 16px/1.5 'Noto Sans KR',sans-serif}

/* 배너 1: 궁극의 모험가 — 헤네시스 낮 */
.art-hero{background:url(/assets/home/henesys.webp) center bottom/cover no-repeat}
.art-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1b4f9acc 0,#1b4f9a66 45%,#0000 75%)}
.art-hero .who{position:absolute;right:9%;bottom:22%;width:132px;z-index:1;filter:drop-shadow(0 8px 0 #0004);animation:bob 2.6s ease-in-out infinite}
.art-hero .who.b{right:27%;width:112px;animation-delay:-1.2s}
.art-hero .spark{position:absolute;right:6%;top:8%;width:260px;height:260px;border-radius:50%;background:radial-gradient(#fff8 0,#ffe45c66 35%,#0000 70%);z-index:1;animation:pulse 3s ease-in-out infinite}
/* 배너 2: 네트의 피라미드 — 사막 노을 */
.art-pyramid{background:linear-gradient(#35205e 0,#b0456b 38%,#ff9d4d 70%,#ffd98a 100%)}
.art-pyramid .sun{position:absolute;right:24%;top:18%;width:150px;height:150px;border-radius:50%;background:radial-gradient(#fff7c2,#ffd24a 60%,#ffb02e);box-shadow:0 0 80px 30px #ffcf6a88}
.art-pyramid .pyr{position:absolute;right:-8%;bottom:0;width:min(80%,780px);max-width:none}
.art-pyramid .star{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:120px 30px 0 #fff,260px -6px 0 -1px #fff,410px 44px 0 #fff,560px 8px 0 -1px #fff,700px 52px 0 #fff;left:8%;top:12%;animation:twinkle 2.4s ease-in-out infinite}
/* 배너 3: 배율 — 밤 마을 */
.art-rate{background:url(/assets/maple-night-village.webp) 72% bottom/cover no-repeat}
.art-rate:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b1640e6 0,#0b164099 55%,#0000 90%)}
.rate-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.rate-chip{display:flex;flex-direction:column;align-items:center;min-width:104px;padding:12px 12px 10px;border-radius:18px;background:linear-gradient(#fff,#fff1d6);border:3px solid #ffb347;box-shadow:0 5px 0 #c96a00;color:#7a3b00}
.rate-chip b{font:400 40px/1 var(--display);color:var(--red)}
.rate-chip span{margin-top:4px;font:700 13px/1 'Noto Sans KR',sans-serif}
.slide.on .rate-chip{animation:pop .5s backwards}
.slide.on .rate-chip:nth-child(2){animation-delay:.08s}.slide.on .rate-chip:nth-child(3){animation-delay:.16s}.slide.on .rate-chip:nth-child(4){animation-delay:.24s}

/* 배너 탭 */
.banner-tabs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);background:#2b1a0ccc}
.banner-tab{position:relative;display:flex;align-items:center;gap:9px;min-height:54px;padding:8px 16px;background:transparent;border:0;border-right:1px solid #fff2;color:#ffe9c4;font:400 17px/1.15 var(--display);text-align:left}
.banner-tab:last-child{border-right:0}
.banner-tab i{font:700 12px/1 'DM Mono',monospace;font-style:normal;color:#ffb347}
.banner-tab:after{content:'';position:absolute;left:0;top:0;height:4px;width:0;background:#ffe45c}
.banner-tab[aria-selected=true]{background:linear-gradient(#ff9a1f,#ff7a00);color:#fff}
.banner-tab[aria-selected=true] i{color:#fff}
.banner.playing .banner-tab[aria-selected=true]:after{animation:fill var(--slide-time,5.5s) linear forwards}
.banner-pause{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:#2b1a0c99;color:#fff;font-size:12px;line-height:1;padding:0}

/* 오른쪽: 게임시작 */
.side{display:flex;flex-direction:column;gap:14px}
.start{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:150px;padding:20px 22px;border-radius:24px;border:4px solid #fff;background:linear-gradient(160deg,#52c2ff,#1478e0 70%);box-shadow:0 7px 0 #0b56b0,0 18px 30px #0b56b040;color:#fff;text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s}
.start:before{content:'';position:absolute;left:-20%;top:-70%;width:140%;height:120%;border-radius:50%;background:#ffffff2e}
.start small{position:relative;font:700 12px/1 'DM Mono',monospace;letter-spacing:.2em;color:#d6f0ff}
.start strong{position:relative;font:400 44px/1.05 var(--display);text-shadow:0 4px 0 #0b56b0}
.start span{position:relative;font-size:12px;font-weight:700;color:#e3f4ff}
.start .go{position:absolute;right:16px;top:50%;margin-top:-31px;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#ffe45c;border:4px solid #fff;color:#b25a00;font:400 24px/1 var(--display);box-shadow:0 5px 0 #c98f00;animation:bob 1.8s ease-in-out infinite}
.start:hover,.start:focus-visible{transform:translateY(-3px);box-shadow:0 10px 0 #0b56b0,0 22px 34px #0b56b050}
.start:active{transform:translateY(4px);box-shadow:0 3px 0 #0b56b0}
.discord{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:20px;border:4px solid #fff;background:linear-gradient(160deg,#8f9bff,#5865f2);box-shadow:0 6px 0 #3a45c4;color:#fff;text-decoration:none;font:400 21px/1.1 var(--display);transition:transform .15s}
.discord svg{width:34px;height:34px;flex:none}
.discord small{display:block;margin-top:3px;font:700 11px/1 'Noto Sans KR',sans-serif;color:#e2e5ff}
.discord:hover,.discord:focus-visible{transform:translateY(-3px)}
.rates{padding:14px 14px 15px;border-radius:20px;background:#fff;border:3px solid var(--orange);box-shadow:0 6px 0 #f1c98d}
.rates h3{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;font:400 18px/1 var(--display)}
.rates h3 small{padding:4px 8px;border-radius:999px;background:var(--red);color:#fff;font:700 10px/1 'Noto Sans KR',sans-serif}
.rates ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rates li{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:12px;background:#fff4df;font-size:13px;font-weight:700;color:#7a5a36}
.rates li b{font:400 21px/1 var(--display);color:var(--red)}

/* 공지·이벤트 */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.post-list{list-style:none;margin:0;padding:6px 14px 14px}
.post-list li{border-bottom:1px solid #f4e6cf}
.post-list li:last-child{border-bottom:0}
.post-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:8px 6px;border-radius:12px;text-decoration:none}
.post-list a strong{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-list a time{font:500 12px/1 'DM Mono',monospace;color:#a08c75}
.post-list a:hover,.post-list a:focus-visible{background:#fff4df}
.post-list a:hover strong,.post-list a:focus-visible strong{color:#d86200}
.post-list li.first a{min-height:66px}
.post-list li.first strong{font-size:19px;font-weight:800}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:230px;padding:24px;color:var(--soft);font-size:14px;font-weight:700;text-align:center;line-height:1.7;white-space:pre-line}
.empty img{width:60px;animation:bob 2.4s ease-in-out infinite}

/* 랭킹 + 바로가기 */
.lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:24px;align-items:start}
.rank-list{list-style:none;margin:0;padding:8px 14px 14px;counter-reset:rank}
.rank-list li{counter-increment:rank;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:46px;padding:5px 8px;border-radius:12px}
.rank-list li:nth-child(even){background:#f3fbef}
.rank-list li:before{content:counter(rank);display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e4ecdf;color:#6c7c63;font:400 17px/1 var(--display)}
.rank-list li:nth-child(1){min-height:60px;background:linear-gradient(90deg,#d5f2c9,#f3fbef);border:2px solid #9bd68a}
.rank-list li:nth-child(1):before{background:linear-gradient(#ffe45c,#ffb300);color:#7a4b00;box-shadow:0 3px 0 #c98f00}
.rank-list li:nth-child(2):before{background:linear-gradient(#f1f4f7,#b9c4cf);color:#4d5a66;box-shadow:0 3px 0 #8f9aa5}
.rank-list li:nth-child(3):before{background:linear-gradient(#ffc9a1,#d98a55);color:#6b3610;box-shadow:0 3px 0 #a9612f}
.rank-list strong{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list li:nth-child(1) strong{font-size:18px}
.rank-list span{display:block;margin-top:2px;font-size:12px;color:#7b8a73;font-weight:500}
.rank-list b{font:400 19px/1 var(--display);color:#2f8a1f;white-space:nowrap}
.rank-note{margin:0;padding:0 20px 16px;font-size:11px;color:#8a9a82}
.quick{display:grid;gap:14px}
.quick-drop{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:22px;border:3px solid var(--blue);background:linear-gradient(120deg,#e9f6ff,#fff);box-shadow:0 6px 0 #a8d8f8;text-decoration:none;transition:transform .15s}
.quick-drop:hover,.quick-drop:focus-visible{transform:translateY(-3px)}
.quick-drop .mobs{display:flex;align-items:flex-end;gap:2px;flex:none}
.quick-drop .mobs img{width:54px;height:54px;object-fit:contain;animation:bob 2.2s ease-in-out infinite}
.quick-drop .mobs img:nth-child(2){animation-delay:-.7s}.quick-drop .mobs img:nth-child(3){animation-delay:-1.4s}
.quick-drop strong{display:block;font:400 26px/1.1 var(--display);color:#0f5fae}
.quick-drop span{display:block;margin-top:5px;font-size:13px;font-weight:700;color:#4a7fae}
.quick-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quick-link{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:20px;background:#fff;border:3px solid #ffc77d;box-shadow:0 5px 0 #f1dcb8;text-decoration:none;transition:transform .15s,border-color .15s}
.quick-link:hover,.quick-link:focus-visible{transform:translateY(-3px);border-color:var(--orange)}
.quick-link i{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#fff0d6;color:var(--orange);font:400 23px/1 var(--display);font-style:normal}
.quick-link strong{font:400 20px/1.1 var(--display)}
.quick-link span{font-size:12px;color:var(--soft);font-weight:500;line-height:1.5}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes pop{from{transform:scale(.5) translateY(14px);opacity:0}70%{transform:scale(1.08)}to{transform:none;opacity:1}}
@keyframes fill{from{width:0}to{width:100%}}

@media(max-width:980px){
 .hero{grid-template-columns:1fr}
 .side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .side .rates{grid-column:1/-1}
 .rates ul{grid-template-columns:repeat(4,1fr)}
 .boards,.lower{grid-template-columns:1fr}
}
@media(max-width:620px){
 .banner{height:370px;border-radius:20px}
 .slide{padding:30px 20px 0;align-items:flex-start}
 .slide-copy{max-width:100%}
 .slide p{font-size:14px}
 .art-hero .who{width:92px;right:6%;bottom:20%}.art-hero .who.b{width:78px;right:36%}
 .art-hero .spark{width:170px;height:170px;top:44%}
 .art-pyramid .pyr{width:125%;right:-34%}
 .art-pyramid .sun{width:100px;height:100px;top:44%}
 .rate-chip{min-width:0;flex:1 1 40%;padding:9px 6px 8px}.rate-chip b{font-size:30px}
 .banner-tab{min-height:50px;padding:6px 8px;font-size:13px;gap:5px;justify-content:center;text-align:center}
 .banner-tab i{display:none}
 .side{grid-template-columns:1fr}
 .start{min-height:120px}.start strong{font-size:38px}
 .rates ul{grid-template-columns:1fr 1fr}
 .post-list a{grid-template-columns:auto minmax(0,1fr);gap:9px}
 .post-list a time{display:none}
 .post-list a strong{font-size:15px}.post-list li.first strong{font-size:17px}
 .quick-drop{padding:16px}.quick-drop .mobs img{width:40px;height:40px}.quick-drop strong{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.slide,.slide-copy{transition:none}.start .go,.art-hero .who,.quick-drop .mobs img,.empty img,.art-hero .spark,.art-pyramid .star{animation:none}.slide.on .rate-chip{animation:none}}