/* ORAKSIL 홈: 위쪽은 냥도사네 밤 골목, 아래는 게임 카드 */
.home .wrap { padding-top: 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero { position: relative; overflow: hidden; color: #fff; background: #16122e; min-height: 470px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0; }
.hero-bg { position: absolute; inset: 0; background: url(/g/toemarok/sprites/bg-start.webp) center 65% / cover no-repeat; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,18,46,.88) 0%, rgba(22,18,46,.45) 42%, rgba(22,18,46,.1) 70%, rgba(22,18,46,.55) 100%); }
.hero-moon { position: absolute; right: 8%; top: 64px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,190,.55), rgba(255,240,190,0) 70%); animation: glow 5s ease-in-out infinite; }
.hero-top, .hero-text, .hero-bubble, .cast { position: relative; }
.hero-top { display: flex; justify-content: space-between; align-items: center; max-width: 560px; margin: 0 auto; z-index: 2; }
.hero .logo { color: #fff; }
.chip { font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.chip.on::before { content: "● "; color: #6fe39a; }
.hero-text { max-width: 560px; margin: 26px auto 0; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.kicker { font-family: Jua, sans-serif; color: #ffd76a; font-size: 16px; }
.hero h1 { font-size: 32px; line-height: 1.25; margin-top: 4px; }
.hero-sub { color: rgba(255,255,255,.82); font-size: 14px; margin-top: 8px; }
.cast { position: absolute; bottom: -6px; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); cursor: pointer; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.c-boss { left: calc(50% - 30px); width: 168px; height: auto; animation: bob 2.6s ease-in-out infinite; }
.c-sul { left: calc(50% - 170px); width: 132px; height: auto; animation: bob 3.1s ease-in-out .4s infinite; }
.c-kkebi { right: calc(50% - 190px); width: 92px; height: auto; bottom: 10px; animation: peek 6s ease-in-out infinite; }
.c-kkebi.talk { animation: none; opacity: 1; transform: none; }
.cast.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.hero-bubble { position: absolute; left: 50%; bottom: 178px; z-index: 3; transition: opacity .25s, left .25s, bottom .25s; max-width: 210px; background: #fff; color: #1b1f2e; font-size: 14px; font-weight: 700; line-height: 1.4; padding: 8px 12px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.hero-bubble::after { content: ""; position: absolute; left: var(--tail, 22px); bottom: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.hero-bubble.fade { opacity: 0; }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes peek { 0%, 55%, 100% { transform: translateX(40px) rotate(8deg); opacity: 0 } 65%, 88% { transform: translateX(0) rotate(-4deg); opacity: 1 } }
@keyframes pop { 0% { transform: scale(1) } 40% { transform: scale(1.12, .9) } 70% { transform: scale(.95, 1.06) } 100% { transform: scale(1) } }
@keyframes glow { 0%, 100% { opacity: .8 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .cast, .hero-moon { animation: none !important; } .c-kkebi { display: none; } }

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.card { display: block; background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .15s; }
.card:active { transform: scale(.98); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--c, #333); }
.card .body { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 16px; border-top: 4px solid var(--c, var(--accent)); }
.card b { font-family: Jua, sans-serif; font-weight: 400; font-size: 22px; }
.card .desc { color: var(--sub); font-size: 14px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.card .meta span { font-size: 12px; color: var(--sub); background: var(--bg); padding: 2px 8px; border-radius: 999px; }
.card .meta span:first-child { color: var(--ink); font-weight: 700; }
.badge { align-self: flex-start; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.keycard { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); border: 1px dashed var(--line); }
.keycard .keyicon { font-size: 30px; flex: none; }
.keycard b { display: block; font-size: 16px; }
.keycard span span { color: var(--sub); font-size: 14px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } .cards li:first-child { grid-column: 1 / -1; } }