/* 꾸레이 오락실 메인(kkurei.com) — shell.css 위에 메인 페이지만의 모양 */
.hh{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:30px;margin:34px 0 10px}
.hh h1{margin:0;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-2.5px}
.hh h1 em{font-style:normal;color:#CE8A24}
.hh p{margin:14px 0 22px;color:var(--muted);font-size:16px;max-width:560px}
.hh-go{display:flex;flex-wrap:wrap;gap:10px}
.hh-go a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:800;font-size:15px;
  color:#493215;background:#F0B93E;box-shadow:0 4px 14px rgba(228,173,60,.35)}
.hh-go a+a{background:#FFF7E6;border:1px solid #E3BD69;box-shadow:none;color:#79531D}
.hh-go a:hover{transform:translateY(-1px)}
.hh-cat{position:relative;display:grid;place-items:center;height:280px}
.hh-cat::before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,#FFE6B0,#F8D79A 60%,transparent 61%)}
.hh-cat img{position:relative;width:192px;image-rendering:pixelated;filter:drop-shadow(0 10px 14px rgba(80,55,30,.25));animation:hhbob 3s ease-in-out infinite}
@keyframes hhbob{50%{transform:translateY(-6px)}}

.hgames{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--tile);color:var(--text);text-decoration:none;
  box-shadow:0 6px 18px rgba(121,90,53,.08);transition:transform .15s,box-shadow .15s}
.hcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(121,90,53,.16)}
.hc-art{position:relative;height:150px;overflow:hidden;background:linear-gradient(160deg,var(--a) 0 18%,var(--b) 18% 46%,var(--c) 46% 66%,var(--d) 66%)}
.hc-art .ico{position:absolute;left:18px;top:14px;font-size:44px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.hc-art img{position:absolute;right:10px;bottom:-14px;height:130px;image-rendering:pixelated;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.hc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.hc-body b{font-size:19px;letter-spacing:-.5px}
.hc-body p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.hc-body .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hc-body .tags span{font:10px var(--mono);padding:4px 8px;border-radius:20px;background:#FBEFE3;color:#8A5B1E}
.hc-body .go{margin-top:auto;padding-top:8px;font-weight:800;color:#C98A22}

.hlost{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;margin:26px 0;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--tile)}
.hlost .pet-frame{width:300px;height:210px}
.hlost h2{margin:0 0 8px;font-size:20px}
.hlost p{margin:0 0 8px}
.hlost .muted{color:var(--muted);font-size:13px}
.home .about{max-width:none}
.foot a+a{margin-left:14px}

@media (max-width:900px){
  .hh{grid-template-columns:1fr;text-align:center;gap:6px;margin-top:20px}
  .hh p{margin-left:auto;margin-right:auto}
  .hh-go{justify-content:center}
  .hh-cat{order:-1;height:200px}
  .hh-cat::before{width:180px;height:180px}
  .hh-cat img{width:140px}
  .hgames{grid-template-columns:1fr}
  .hlost{grid-template-columns:1fr;text-align:center}
  .hlost .pet-frame{width:100%;max-width:420px;height:240px;margin:0 auto}
}