@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Press+Start+2P&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root{
  --ink:#2b1712;
  --ink-soft:#5c4436;
  --paper:#f2e9c8;
  --card:#faf3dc;
  --card-line:#e3d3a9;
  --tan:#c88d5f;
  --tan-deep:#a8703f;
  --mauve:#93614f;
  --line:#d9c9a3;
  --white:#fffaf0;
  --radius:10px;
  --shadow-step: 4px 4px 0 var(--ink);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans KR', sans-serif;
  line-height:1.7;
}
img{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3,.display{
  font-family:'Do Hyeon', sans-serif;
  font-weight:400;
  letter-spacing:0.5px;
  margin:0;
}
.pixel-tag{
  font-family:'Press Start 2P', monospace;
  font-size:10px;
  line-height:1.6;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:40px; height:40px; border-radius:8px; border:2px solid var(--ink);}
.brand-name{font-family:'Do Hyeon',sans-serif; font-size:19px; color:var(--ink);}
.nav-links{display:flex; gap:22px; font-size:14px; font-weight:500;}
.nav-links a{text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent;}
.nav-links a:hover{border-bottom-color:var(--tan-deep);}
.lang-switch{
  font-family:'Press Start 2P',monospace; font-size:10px;
  background:var(--ink); color:var(--paper); padding:6px 9px; border-radius:6px;
  text-decoration:none; margin-left:18px;
}

/* ---------- Hero ---------- */
.hero{padding:64px 0 56px;}
.hero .wrap{display:flex; align-items:center; gap:48px;}
.hero-copy{flex:1;}
.hero-eyebrow{
  display:inline-block; font-family:'Press Start 2P',monospace; font-size:10px;
  background:var(--ink); color:var(--paper); padding:6px 10px; border-radius:6px; margin-bottom:18px;
}
.hero h1{font-size:44px; line-height:1.25; margin-bottom:16px;}
.hero p{color:var(--ink-soft); font-size:16px; max-width:38ch; margin-bottom:14px;}
.genre-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.genre-tags span{
  font-size:12px; font-weight:700; background:var(--card); border:2px solid var(--ink);
  border-radius:20px; padding:5px 12px; color:var(--ink-soft);
}
.hero-figure{
  flex-shrink:0; width:320px; position:relative;
}
.hero-figure img{
  border:4px solid var(--ink);
  border-radius:16px;
  box-shadow:var(--shadow-step);
}
.speech-bubble{
  position:absolute; top:-18px; right:-30px;
  background:var(--white); border:3px solid var(--ink); border-radius:14px;
  padding:10px 14px; font-family:'Do Hyeon',sans-serif; font-size:15px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-4deg);
  max-width:190px;
}
.speech-bubble::after{
  content:""; position:absolute; left:24px; bottom:-14px;
  border-width:14px 8px 0 0; border-style:solid;
  border-color:var(--ink) transparent transparent transparent;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:8px; border:3px solid var(--ink);
  text-decoration:none; cursor:pointer; background:var(--tan); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);}
.btn:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink);}
.btn.ghost{background:var(--card);}
.btn.disabled{
  background:var(--card); color:var(--ink-soft); cursor:not-allowed;
  box-shadow:none; opacity:.65;
}
.btn.disabled:hover{transform:none;}

/* ---------- Section heading ---------- */
.section{padding:52px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:8px;}
.section-head h2{font-size:28px;}
.section-head .count{font-size:13px; color:var(--ink-soft); font-family:'Press Start 2P',monospace;}

/* ---------- Game grid & cards ---------- */
.game-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px;}
.game-card{
  background:var(--card); border:3px solid var(--ink); border-radius:14px;
  overflow:hidden; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-step);
  position:relative;
  transition:transform .12s ease;
}
.game-card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.placeholder-art{
  aspect-ratio:1/1;
  background:repeating-linear-gradient(135deg, var(--line), var(--line) 10px, var(--card) 10px, var(--card) 20px);
  border-bottom:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:12px; text-align:center; padding:12px;
}
.ribbon{
  position:absolute; top:14px; right:-34px; transform:rotate(40deg);
  background:var(--mauve); color:var(--white); font-size:11px; font-weight:700;
  padding:4px 40px; box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.card-body{padding:16px;}
.card-body .game-title{font-family:'Do Hyeon',sans-serif; font-size:19px; margin-bottom:4px;}
.card-body .game-genre{font-size:12px; color:var(--ink-soft); margin-bottom:12px;}

/* ---------- Placeholder blocks (generic) ---------- */
.placeholder-block{
  background:repeating-linear-gradient(135deg, var(--line), var(--line) 10px, var(--card) 10px, var(--card) 20px);
  border:3px dashed var(--ink-soft); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:13px; text-align:center;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:13px; color:var(--ink-soft); margin-bottom:20px;}
.breadcrumb a{text-decoration:none; color:var(--mauve);}

/* ---------- Game detail ---------- */
.game-head{display:flex; gap:20px; align-items:flex-start; margin-bottom:32px; flex-wrap:wrap;}
.game-head .placeholder-block{width:112px; height:112px; flex-shrink:0; font-size:11px;}
.game-head-meta h1{font-size:28px; margin-bottom:6px;}
.game-head-meta .game-genre{color:var(--ink-soft); font-size:13px; margin-bottom:14px;}
.store-buttons{display:flex; gap:10px; flex-wrap:wrap;}

.screens{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px;}
.screen-thumb{
  height:196px; width:auto; max-width:280px; flex-shrink:0; padding:0; border-radius:10px;
  border:3px solid var(--ink); cursor:pointer; overflow:hidden; background:var(--card);
}
.screen-thumb img{height:100%; width:auto; max-width:280px; object-fit:contain; display:block;}
.screens-note{font-size:12px; color:var(--ink-soft); margin-bottom:36px;}

.lightbox-overlay{
  position:fixed; inset:0; background:rgba(20,12,8,.92); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.lightbox-overlay img{max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%;
  background:var(--paper); border:3px solid var(--ink); font-size:20px; line-height:1;
  cursor:pointer; color:var(--ink);
}

.warn-badge{
  background:#fff3cf; border:2px solid #d8b23a; color:#5c4406;
  font-weight:700; font-size:13px; padding:8px 12px; border-radius:8px;
  display:inline-block; margin:14px 0;
}
.feature-list{margin:14px 0; padding-left:0; list-style:none; max-width:64ch;}
.feature-list li{
  position:relative; padding-left:22px; margin-bottom:8px;
  color:var(--ink-soft); font-size:14px;
}
.feature-list li::before{content:"▸"; position:absolute; left:0; color:var(--mauve); font-weight:700;}
.game-desc h3{font-size:16px; margin:26px 0 4px; font-family:'Noto Sans KR',sans-serif; font-weight:700;}

.legal-links{display:flex; gap:18px; font-size:13px; margin-top:8px;}
.legal-links a{color:var(--mauve); text-decoration:none; font-weight:700;}

/* ---------- Legal doc ---------- */
.legal-doc h1{font-size:24px; margin-bottom:6px;}
.legal-doc .updated{font-size:12px; color:var(--ink-soft); margin-bottom:26px;}
.legal-doc section{margin-bottom:22px;}
.legal-doc h2{font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:15px; margin-bottom:8px; color:var(--mauve);}
.legal-doc p{font-size:14px; color:var(--ink-soft); margin:0;}
.legal-doc .todo{
  display:inline-block; background:#fff3cf; border:1px solid #d8b23a; color:#5c4406;
  font-size:12px; padding:2px 8px; border-radius:6px; margin-top:6px;
}

/* ---------- Simple page ---------- */
.page-hero{padding:48px 0 12px;}
.page-hero h1{font-size:32px; margin-bottom:10px;}
.page-hero p{color:var(--ink-soft); max-width:60ch;}
.content-block{padding:8px 0 48px; max-width:64ch;}
.content-block h2{font-size:18px; margin:26px 0 8px; font-family:'Noto Sans KR',sans-serif; font-weight:700;}
.content-block p{color:var(--ink-soft);}

/* ---------- Footer ---------- */
.site-footer{border-top:3px solid var(--ink); background:var(--card); margin-top:40px;}
.site-footer .wrap{padding:28px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-brand img{width:28px; height:28px; border-radius:6px; border:2px solid var(--ink);}
.footer-links{display:flex; gap:16px; font-size:13px; color:var(--ink-soft);}
.footer-links a{text-decoration:none;}
.footer-note{font-size:11px; color:var(--ink-soft); width:100%; padding-top:10px; border-top:1px solid var(--card-line); margin-top:10px;}

@media (max-width:760px){
  .hero .wrap{flex-direction:column;}
  .hero-figure{width:220px;}
  .nav-links{display:none;}
  .hero h1{font-size:32px;}
}