@import url("/fonts.css?v=20261009-pretendard");
:root{--ink:#111820;--muted:#6d7680;--line:#e2e6e9;--navy:#071017;--lime:#caff3d;--cyan:#25d8ff}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:#f7f8f8;color:var(--ink);font-family:"Pretendard",Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;word-break:keep-all}
a{color:inherit;text-decoration:none}
.app-header{position:sticky;z-index:20;top:0;border-bottom:1px solid rgba(7,16,23,.08);background:rgba(247,248,248,.9);backdrop-filter:blur(16px)}
.app-header-inner{display:flex;width:min(100%,1040px);height:64px;margin:auto;padding:0 24px;align-items:center;gap:28px}
.section-brand{display:inline-flex;align-items:center;gap:8px;color:#111820;text-decoration:none}
.section-brand img{display:block;width:25px;height:25px;object-fit:contain}
.section-brand strong{font-size:17px;font-weight:950;letter-spacing:-.05em}
.section-brand i{display:block;width:1px;height:17px;background:#d7dcdf}
.section-brand span{color:#6d7680;font-size:11px;font-weight:900;letter-spacing:.04em}
.top-actions{display:flex;min-width:0;height:100%;align-items:center;gap:2px}
.top-actions a{display:flex;height:100%;padding:0 11px;align-items:center;border-bottom:3px solid transparent;color:#4f5963;font-size:12px;font-weight:900;white-space:nowrap}
.top-actions a[aria-current="page"],.top-actions a:hover{border-bottom-color:#176b4a;background:#eef4f0;color:#173c2c}
main{width:min(100%,1040px);margin:auto;padding:42px 24px 84px}
.game-feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.game-post{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:18px;background:#e7e7e7;box-shadow:0 10px 28px rgba(16,24,32,.07);isolation:isolate}
.game-post img,.game-preview{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease,opacity .2s ease}
.game-preview{position:absolute;z-index:0;inset:0;opacity:0;pointer-events:none}
.game-post.is-playing .game-preview{opacity:1}
.game-post.is-playing img{opacity:0}
.post-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.84));transition:background .25s}
.post-copy{position:absolute;z-index:2;right:20px;bottom:19px;left:20px;display:grid;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.post-copy small{font-size:9px;font-weight:900;letter-spacing:.17em;opacity:.74}
.post-copy strong{margin-top:4px;font-size:23px;letter-spacing:-.05em}
.post-copy em{position:absolute;right:0;bottom:3px;padding:7px 10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(7,16,23,.35);font-size:11px;font-style:normal;font-weight:900;opacity:0;transform:translateY(5px);transition:.2s}
.game-post:hover img,.game-post:hover .game-preview{filter:brightness(.82);transform:scale(1.025)}
.game-post:hover .post-shade{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.88))}
.game-post:hover .post-copy em{opacity:1;transform:none}
.game-post:focus-visible{outline:3px solid #0095f6;outline-offset:3px}
.game-details{margin-top:74px;padding-top:56px;border-top:1px solid var(--line)}
.details-heading{max-width:650px}
.details-heading>span{color:#6c7882;font-size:11px;font-weight:950;letter-spacing:.16em}
.details-heading h1{margin:9px 0 13px;font-size:34px;line-height:1.18;letter-spacing:-.055em}
.details-heading p{margin:0;color:#59646e;font-size:15px;line-height:1.75}
.detail-grid{display:grid;margin-top:34px;gap:13px}
.detail-card{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:26px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.detail-thumb-slot{position:relative;align-self:stretch;min-height:190px}.detail-thumb{position:absolute;z-index:1;top:50%;left:0;width:190px;height:100%;min-height:190px;margin:0;overflow:hidden;border-radius:13px;background:#e7eaec;box-shadow:0 7px 20px rgba(16,24,32,.08);transform:translateY(-50%);transform-origin:left center;transition:width .26s ease,height .26s ease,border-radius .26s ease,box-shadow .26s ease;will-change:width,height}.detail-thumb img,.detail-preview{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease,filter .3s ease,transform .3s ease}.detail-preview{position:absolute;z-index:0;inset:0;opacity:0;pointer-events:none}.detail-thumb.is-playing .detail-preview{opacity:1}.detail-thumb.is-playing img{opacity:0}.detail-thumb::after{position:absolute;z-index:1;inset:0;background:linear-gradient(155deg,rgba(7,16,23,.02) 48%,rgba(7,16,23,.28));content:"";pointer-events:none}.detail-thumb:hover,.detail-thumb:focus-visible{z-index:12;width:238px;height:298px;border-radius:18px;outline:0;box-shadow:0 22px 50px rgba(7,16,23,.3)}.detail-thumb:hover img,.detail-thumb:hover .detail-preview,.detail-thumb:focus-visible img,.detail-thumb:focus-visible .detail-preview{filter:brightness(.9);transform:scale(1.02)}.detail-number{position:absolute;z-index:2;top:12px;left:12px;padding:6px 8px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(7,16,23,.66);color:#fff;font-size:10px;font-weight:950;letter-spacing:.08em}
.detail-card h2{margin:0 0 9px;font-size:21px;letter-spacing:-.04em}
.detail-card p{max-width:760px;margin:0;color:#59646e;font-size:14px;line-height:1.75}
.detail-card dl{display:flex;margin:18px 0 0;gap:24px}
.detail-card dl div{display:flex;align-items:center;gap:8px}
.detail-card dt{color:#8b949b;font-size:11px;font-weight:850}
.detail-card dd{margin:0;color:#303b44;font-size:12px;font-weight:750}
.detail-card a{display:inline-flex;margin-top:20px;align-items:center;gap:8px;color:#111820;font-size:13px;font-weight:900}
.detail-card a span{color:#7db300;transition:transform .2s}
.detail-card a:hover span{transform:translateX(3px)}
.common-features{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#eef1f2}
.common-features div{display:grid;padding:20px 18px;gap:5px;border-right:1px solid #dce1e3}
.common-features div:last-child{border:0}
.common-features strong{font-size:13px}
.common-features span{color:#727c84;font-size:11px;line-height:1.45}
.guide-link{margin:22px 0 0;color:#747d85;text-align:center;font-size:12px}
.guide-link a{color:#202a32;font-weight:900;text-decoration:underline;text-underline-offset:3px}
footer{display:flex;width:min(100%,1040px);margin:0 auto 34px;padding:0 24px;justify-content:flex-end;gap:18px;color:#91989e;font-size:11px}
footer a:hover{text-decoration:underline}
@media(max-width:900px) and (min-width:701px){.game-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .app-header-inner{height:auto;padding:0 10px;align-items:stretch;flex-wrap:wrap;gap:0}.section-brand{height:48px}.top-actions{width:100%;height:40px;order:2;display:grid;flex:0 0 100%;grid-template-columns:repeat(6,minmax(0,1fr))}.top-actions a{min-width:0;padding:0 1px;justify-content:center;font-size:9.5px;letter-spacing:-.05em}
  main{padding:28px 16px 60px}
  .game-feed{grid-template-columns:1fr;gap:14px}.game-post{aspect-ratio:16/11;border-radius:15px}.game-post img,.game-preview{object-position:center 40%}
  .post-copy{right:16px;bottom:15px;left:16px}.post-copy strong{font-size:21px}.post-copy em{display:block;opacity:1;transform:none}
  .game-details{margin-top:54px;padding-top:40px}.details-heading h1{font-size:28px}.details-heading p{font-size:14px;line-height:1.7}
  .detail-grid{margin-top:26px}.detail-card{grid-template-columns:1fr;padding:12px 12px 22px;gap:18px;border-radius:15px}.detail-thumb-slot{min-height:0;aspect-ratio:16/9}.detail-thumb{position:relative;top:auto;width:100%;height:100%;min-height:0;aspect-ratio:16/9;transform:none}.detail-thumb:hover,.detail-thumb:focus-visible{width:100%;height:100%;border-radius:13px;box-shadow:0 7px 20px rgba(16,24,32,.08)}.detail-thumb img,.detail-preview{object-position:center 40%}.detail-card>div:not(.detail-thumb-slot){padding:0 9px}.detail-card h2{font-size:20px}.detail-card p{font-size:13px}.detail-card dl{display:grid;margin-top:16px;gap:7px}.detail-card dl div{align-items:flex-start}.detail-card dt{width:35px;flex:none}.detail-card dd{line-height:1.5}.detail-card a{margin-top:18px}
  .common-features{grid-template-columns:1fr 1fr}.common-features div:nth-child(2){border-right:0}.common-features div:nth-child(-n+2){border-bottom:1px solid #dce1e3}.common-features div{padding:17px 15px}
  footer{padding-inline:16px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.game-post img,.game-preview,.post-copy em,.detail-thumb,.detail-thumb img,.detail-preview{transition:none}.game-preview,.detail-preview{display:none}.detail-thumb:hover,.detail-thumb:focus-visible{width:190px;height:100%;box-shadow:0 7px 20px rgba(16,24,32,.08)}}