@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap"); /* YG-I18N-TH */
/* ============================================================
   은빛여울 포털 — 공통 스타일
   어두운 밤하늘 + 은빛. 글은 읽기 쉽게, 장식은 절제해서.
   ============================================================ */
:root{
  --bg:#f5f5f4; --bg2:#ffffff; --card:#ffffff; --line:#e3e2df;
  --ink:#0c0d0e; --dim:#57534e; --faint:#8a857e;
  --accent:#c2410c; --gold:#a16207; --good:#15803d; --bad:#b91c1c;
  --radius:4px;
  --font: "Pretendard","Noto Sans KR","Noto Sans Thai",-apple-system,BlinkMacSystemFont,
          "Segoe UI",Roboto,"Malgun Gothic",sans-serif;
  --mono: "D2Coding","Nanum Gothic Coding","Cascadia Mono",Consolas,
          "DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.7; -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1040px; margin:0 auto; padding:0 18px}

/* ---------- 머리말 ---------- */
.top{
  border-bottom:1px solid var(--line); background:rgba(13,17,23,.9);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
}
.top .wrap{display:flex; align-items:center; gap:16px; height:58px}
.brand{font-weight:700; font-size:17px; letter-spacing:.02em; color:var(--ink)}
.brand span{color:var(--accent)}
.top nav{margin-left:auto; display:flex; gap:18px; font-size:14px}
.top nav a{color:var(--dim)}
.top nav a:hover{color:var(--ink); text-decoration:none}

/* ---------- 큰 제목 ---------- */
.hero{padding:54px 0 34px; text-align:center}
.hero h1{
  margin:0 0 10px; font-size:clamp(26px,5vw,40px); letter-spacing:-.02em;
}
.hero p{margin:0 auto; max-width:34em; color:var(--dim)}

/* ---------- 게임 카드 ---------- */
.grid{
  display:grid; gap:18px; padding:8px 0 40px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:12px;
  border-top:3px solid var(--ga,var(--accent));
}
.card h2{margin:0; font-size:20px; display:flex; align-items:center; gap:10px}
.card .tagline{margin:0; color:var(--ga,var(--accent)); font-size:13.5px}
.card .summary{margin:0; color:var(--dim); font-size:14px}
.card ul{margin:2px 0 0; padding-left:18px; color:var(--dim); font-size:13.5px}
.card ul li{margin:3px 0}
.card .foot{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:6px}

.pill{
  font-size:12px; padding:2px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap;
}
.pill.on{color:var(--good); border-color:rgba(127,216,160,.35)}
.pill.off{color:var(--bad); border-color:rgba(224,140,140,.35)}
.pill.wait{color:var(--gold); border-color:rgba(217,178,106,.35)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;
     background:currentColor; vertical-align:middle}

.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags i{font-style:normal; font-size:11.5px; color:var(--faint);
        border:1px solid var(--line); border-radius:6px; padding:1px 7px}

.btn{
  display:inline-block; padding:9px 18px; border-radius:9px; font-size:14px;
  font-weight:600; border:1px solid transparent; cursor:pointer;
  background:var(--ga,var(--accent)); color:#0d1117;
  white-space:nowrap; flex:0 0 auto;          /* 좁은 카드에서 글자가 세로로 눌리지 않게 */
}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--dim)}
.btn.ghost:hover{color:var(--ink); border-color:var(--dim)}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

/* ---------- 광고 자리 ---------- */
.ad{margin:0 auto; text-align:center}
.ad:empty{display:none}          /* 비어 있으면 자리 자체가 사라진다 */
.ad.top{padding:14px 0 0}
.ad.bottom{padding:8px 0 30px}

/* ---------- 꼬리말 ---------- */
footer{
  border-top:1px solid var(--line); margin-top:20px; padding:22px 0 40px;
  color:var(--faint); font-size:13px;
}
footer .wrap{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
footer a{color:var(--faint)}

/* ---------- 문서 ---------- */
.doc{padding:30px 0 10px; max-width:760px}
.doc h1{font-size:28px; margin:0 0 6px}
.doc h2{font-size:19px; margin:34px 0 10px; padding-bottom:6px;
        border-bottom:1px solid var(--line)}
.doc h3{font-size:16px; margin:22px 0 6px; color:var(--ga,var(--accent))}
.doc p,.doc li{color:var(--dim)}
.doc code{font-family:var(--mono); background:var(--bg2); color:var(--ink);
          border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13px}
.doc table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px}
.doc th,.doc td{border:1px solid var(--line); padding:7px 10px; text-align:left}
.doc th{background:var(--bg2); color:var(--ink); font-weight:600}
.doc td{color:var(--dim)}
.note{border-left:3px solid var(--ga,var(--accent)); background:var(--bg2);
      padding:10px 14px; border-radius:0 8px 8px 0; margin:14px 0}
.note p{margin:0}

@media (max-width:560px){
  .top nav{gap:12px; font-size:13px}
  .hero{padding:36px 0 24px}
}

/* 접속 안내 페이지의 작은 버튼 */
.doc .mini{
  background:var(--card); color:var(--dim); border:1px solid var(--line);
  border-radius:6px; padding:2px 8px; font-size:12px; cursor:pointer; margin-left:8px;
}
.doc .mini:hover{color:var(--ink); border-color:var(--dim)}

/* 사이트 소개 — 검색엔진과 처음 온 사람이 같이 읽는 글 */
.about{margin:44px 0 8px; max-width:70ch; color:var(--faint); line-height:1.75}
.about h2{font-size:18px; color:var(--ink); margin:0 0 12px}
.about h3{font-size:15px; color:var(--ink); margin:24px 0 6px}
.about p{margin:0 0 10px}
.about b{color:var(--ink); font-weight:600}
.about a{color:var(--accent)}

/* 게임 성격을 한눈에 — 카드 제목 바로 아래 */
.card .badge{
  align-self:flex-start; font-style:normal; font-size:12.5px; font-weight:700;
  letter-spacing:.02em; border-radius:999px; padding:4px 12px;
  border:1px solid var(--line); color:var(--dim); background:transparent;
}
.card .badge.hot{
  background:var(--ga,var(--accent)); border-color:transparent; color:#0d1117;
}
.about h3 em{font-style:normal; color:var(--accent); font-weight:600}

/* ---------- 지금 몇 명이 노는지 ---------- */
.hero .live{margin-top:10px;color:var(--dim);font-size:14px}
.hero .live b{color:var(--good);font-size:17px}

/* ---------- 대표 게임 ---------- */
.hero-game{
  border:1px solid var(--line); border-top:3px solid var(--ga,var(--accent));
  border-radius:var(--radius); padding:24px 24px 20px; margin:10px 0 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%),var(--card);
}
.hero-game .crown{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--ga,var(--accent));border:1px solid currentColor;border-radius:999px;padding:3px 10px}
.hero-game h2{margin:12px 0 6px;font-size:30px;letter-spacing:-.02em}
.hero-game .badge{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;
  padding:4px 12px;background:var(--ga,var(--accent));color:#0d1117}
.hero-game .tagline{margin:8px 0 0;color:var(--ga,var(--accent));font-size:15px}
.hero-game .summary{margin:8px 0 0;color:var(--dim);max-width:66ch;line-height:1.7}
.hero-game ul{margin:12px 0 0;padding-left:18px;color:var(--dim);font-size:14px}
.hero-game ul li{margin:4px 0}
.hero-game .foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}

/* ---------- 목록 머리 / 분류 ---------- */
.listhead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 6px}
.listhead h2{font-size:18px;margin:0}
.btn.small{padding:6px 14px;font-size:13px;box-shadow:none}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.cats i{font-style:normal;font-size:12px;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 10px}

/* ---------- 엄지척 / 해 본 사람 ---------- */
.stat{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--faint)}
.like{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-weight:600;
  color:var(--dim);background:transparent;transition:.12s}
.like:hover{border-color:var(--dim);color:var(--ink)}
.like.on{background:var(--ga,var(--accent));border-color:transparent;color:#0d1117}
.like .thumb{font-size:14px;line-height:1}
.plays{white-space:nowrap}
.maker{font-size:11.5px;color:var(--faint);align-self:center;margin-left:2px}

/* ---------- 게시판 ---------- */
.pagehead{margin:26px 0 14px}
.pagehead h1{font-size:24px;margin:0 0 6px}
.pagehead p{margin:0;color:var(--faint);max-width:70ch;line-height:1.7}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tab{font-size:14px;padding:7px 14px;border-radius:999px;color:var(--dim);border:1px solid transparent}
.tab:hover{color:var(--ink);text-decoration:none}
.tab.on{background:var(--panel,#1b1f2a);border-color:var(--line);color:var(--ink);font-weight:600}
nav a.on{color:var(--ink);font-weight:600}

.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line);padding:12px 2px;display:flex;
  flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.posts li.empty{color:var(--faint);justify-content:center;padding:34px 0}
.posts a{display:flex;gap:12px;align-items:baseline;flex:1;min-width:0}
.posts .no{color:var(--faint);font-size:12px;min-width:2.2em;text-align:right}
.posts .t{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posts .m{color:var(--faint);font-size:12px;white-space:nowrap}
.posts .rc{color:var(--accent);font-size:12px;margin-left:4px}
.posts .new{font-style:normal;font-size:10.5px;color:var(--good);
  border:1px solid rgba(127,216,160,.4);border-radius:4px;padding:0 4px;margin-left:6px}
.who{color:var(--dim)}
.who.admin{color:var(--accent)}
.who i{font-style:normal;color:var(--faint);font-size:11px;margin-left:3px}

.pager{display:flex;gap:6px;justify-content:center;margin:18px 0}
.pg{padding:5px 11px;border-radius:8px;border:1px solid var(--line);color:var(--dim);font-size:13px}
.pg.on{background:var(--accent);border-color:transparent;color:#0d1117;font-weight:700}
.boardfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 40px}

.post{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:6px}
.post h1{font-size:22px;margin:0 0 8px}
.post .m{color:var(--faint);font-size:12.5px;margin-bottom:16px}
.post .b{color:var(--ink);line-height:1.85;white-space:normal;word-break:break-word}

.replies{list-style:none;margin:14px 0 0;padding:0}
.replies li{border-left:2px solid var(--line);padding:10px 0 10px 14px;margin:10px 0}
.replies .m{color:var(--faint);font-size:12px;margin-bottom:5px}
.replies .b{color:var(--dim);line-height:1.75}

.write,.reply{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;max-width:760px}
.write .row,.reply .row{display:flex;gap:10px;flex-wrap:wrap}
.write input,.write textarea,.write select,.reply input,.reply textarea,.del input{
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font:inherit;font-size:14px;flex:1;min-width:0}
.write textarea,.reply textarea{resize:vertical;line-height:1.7}
.write input:focus,.write textarea:focus,.reply textarea:focus{outline:2px solid var(--ga,var(--accent));outline-offset:-1px}
.write .hint,.filebox .hint{color:var(--faint);font-size:12.5px;margin:0;line-height:1.6}
.filebox{border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;
  flex-direction:column;gap:8px}
.filebox label{font-size:13px;color:var(--dim);font-weight:600}
.filebox input[type=file]{color:var(--dim);font-size:13px}
.filebox input[name=url]{background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font:inherit;font-size:14px}
.check{display:flex;gap:9px;align-items:flex-start;color:var(--dim);font-size:13.5px;line-height:1.6}
.del{display:flex;gap:8px;align-items:center;margin-left:auto}

.notice{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:14px 16px;margin:0 0 18px;color:var(--dim);line-height:1.75}
.notice.ok{border-left-color:var(--good)}
.notice.bad{border-left-color:var(--bad);color:var(--bad)}
.notice b{color:var(--ink)}
.faqlinks{margin:8px 0;padding-left:18px}
.faqlinks li{margin:3px 0}

.qa{border-bottom:1px solid var(--line);padding:14px 2px}
.qa summary{cursor:pointer;color:var(--ink);font-weight:600;font-size:15px;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q  ";color:var(--accent);font-weight:700}
.qa p{margin:10px 0 2px;color:var(--dim);line-height:1.85;padding-left:1.4em}

.subs{display:flex;flex-direction:column;gap:16px}
.sub{border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.sub h3{margin:0 0 4px;font-size:17px}
.sub h3 em{font-style:normal;font-size:12px;color:var(--accent);
  border:1px solid currentColor;border-radius:999px;padding:2px 9px;margin-left:8px}
.sub .m{color:var(--faint);font-size:12.5px}
.sub .b{color:var(--dim);line-height:1.7;margin:10px 0;white-space:normal}
.rev{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.empty{color:var(--faint);text-align:center;padding:30px 0}

@media (max-width:640px){
  .hero-game h2{font-size:24px}
  .posts .m{font-size:11.5px}
  .del{margin-left:0}
}

/* ---------- 기기 호환 표시 ---------- */
.sups{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sup{font-style:normal;font-size:11.5px;font-weight:600;border-radius:6px;padding:2px 8px;
  border:1px solid currentColor}
.sup.full{color:var(--good)}
.sup.part{color:var(--gold)}
.sup.none{color:var(--bad);opacity:.8}
.sel{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13.5px;flex:1}
.sel select{flex:0 0 auto;min-width:88px}

/* 인기작 줄 머리 */
.hothead{margin:26px 0 12px;font-size:17px;font-weight:700;letter-spacing:-.2px}

/* ============================================================
   DESIGN-V2 START  —  여울 게임터 겉모습 손질
   방향: "만드는 사람들의 작업실". 밤하늘 + 은빛은 그대로 두고,
   모눈(스프라이트 시트), 고정폭 글꼴, 절제된 빛을 더한다.
   이 아래는 통째로 지웠다 다시 붙여도 되는 덧칠 구역이다.
   ============================================================ */
:root{
  --maker:#6d28d9;                     /* 올리는 쪽(만드는 쪽) 강조색 */
  --grid:rgba(12,13,14,.030);        /* 모눈 선 */
  --ring:rgba(194,65,12,.55);        /* 키보드 초점 테두리 */
}

/* ---------- 머리말 ---------- */
.brand::after{
  content:"_"; font-family:var(--mono); color:var(--accent);
  margin-left:1px; opacity:.75; animation:cursorBlink 1.6s steps(1) infinite;
}
@keyframes cursorBlink{50%{opacity:0}}

.top nav a{position:relative; padding:4px 0; transition:color .14s ease}
.top nav a:not([href="/upload"])::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.top nav a:not([href="/upload"]):hover::after,
.top nav a.on:not([href="/upload"])::after{transform:scaleX(1)}

/* 게임 올리기는 이 사이트의 본론이라 따로 눈에 띄게 */
.top nav a[href="/upload"]{
  color:var(--maker); font-weight:600; border-radius:999px;
  padding:5px 13px; border:1px solid color-mix(in srgb,var(--maker) 34%,transparent);
}
.top nav a[href="/upload"]:hover{
  color:#fff; border-color:var(--maker);
  background:color-mix(in srgb,var(--maker) 14%,transparent);
}

/* ---------- 큰 제목 ---------- */
.hero{position:relative; padding:64px 0 40px; overflow:hidden}
.hero>*{position:relative; z-index:1}

/* 뒤에 깔리는 모눈 — 가장자리로 갈수록 사라진다 */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 50% 38%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 78% at 50% 38%,#000,transparent 72%);
}
/* 제목 뒤 은은한 빛 */
.hero::after{
  content:""; position:absolute; left:50%; top:-140px; z-index:0;
  width:min(780px,110%); height:430px; transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(143,193,227,.14),transparent 72%);
  pointer-events:none;
}

/* 제목 위 작은 주석 한 줄 — 코드 주석처럼 */
.hero h1::before{
  content:"// 혼자 만드는 사람들의 자리";
  display:block; font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; color:var(--accent); opacity:.8; margin-bottom:16px;
}
.hero h1{
  font-size:clamp(27px,5.2vw,44px); font-weight:800;
  letter-spacing:-.03em; line-height:1.24; color:#eef4fa;
  background:linear-gradient(180deg,#ffffff 10%,#a9bfd4 130%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero h1::before{-webkit-text-fill-color:var(--accent)}   /* 주석줄은 그라데이션 제외 */
.hero p{font-size:15.5px; max-width:36em}
.hero .live{
  margin-top:16px; font-family:var(--mono); font-size:13px;
  letter-spacing:.02em; color:var(--faint);
}
.hero .live b{font-size:16px}

/* ---------- 구역 제목 ---------- */
.hothead,.listhead h2{
  position:relative; padding-left:15px; font-size:18.5px;
  font-weight:700; letter-spacing:-.015em; color:var(--ink);
}
.hothead::before,.listhead h2::before{
  content:""; position:absolute; left:0; top:.24em; bottom:.24em; width:3px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
}
.hothead::before{background:linear-gradient(180deg,var(--gold),transparent)}
.hothead{margin:30px 0 14px}
.listhead{margin:38px 0 10px; gap:14px}

/* ---------- 게임 카드 ---------- */
.grid{gap:20px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.card{
  position:relative; overflow:hidden; border-top-width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 42%),var(--card);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.card::before{                       /* 위쪽 띠를 그라데이션으로 */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--ga,var(--accent)),transparent 72%);
}
.card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--ga,var(--accent)) 42%,var(--line));
  box-shadow:0 16px 34px -20px #000, inset 0 0 0 1px rgba(255,255,255,.022);
}
.card h2{letter-spacing:-.02em; font-size:20.5px}

/* ---------- 대표작(인기작) 큰 카드 ---------- */
.hero-game{
  position:relative; overflow:hidden; border-top-width:1px;
  background:
    radial-gradient(110% 85% at 0% 0%,
      color-mix(in srgb,var(--ga,var(--accent)) 13%,transparent), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.042),transparent 55%),
    var(--card);
}
.hero-game::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--ga,var(--accent)),transparent 80%);
}
.hero-game .crown{
  font-family:var(--mono); letter-spacing:.08em; font-size:11.5px;
}
.hero-game h2{font-weight:800; letter-spacing:-.03em}

/* ---------- 작은 글씨는 고정폭으로 — 만드는 분위기 ---------- */
.tags i,.cats i,.plays,.maker,.sup,.pill,.posts .no,.posts .m{
  font-family:var(--mono); letter-spacing:0;
}
.tags i{border-radius:5px}
.like{font-family:var(--mono)}
.like .n{font-family:var(--mono)}

/* ---------- 단추 ---------- */
.btn{
  letter-spacing:-.01em; transition:filter .14s ease, transform .14s ease, box-shadow .14s ease;
  box-shadow:0 8px 20px -12px var(--ga,var(--accent));
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* 올리기 단추는 만드는 쪽 색으로 */
.listhead .btn.ghost{
  border-color:color-mix(in srgb,var(--maker) 38%,var(--line));
  color:var(--maker); box-shadow:none;
}
.listhead .btn.ghost:hover{
  color:#fff; border-color:var(--maker);
  background:color-mix(in srgb,var(--maker) 13%,transparent);
}

/* ---------- 사이트 소개 ---------- */
.about{max-width:74ch; margin-top:52px; padding-top:30px; border-top:1px solid var(--line)}
.about h2{font-size:19px; letter-spacing:-.015em}
.about h3{position:relative; padding-left:15px; letter-spacing:-.01em; margin-top:26px}
.about h3::before{
  content:""; position:absolute; left:0; top:.42em; width:6px; height:6px;
  border-radius:1px; background:var(--accent); opacity:.8;
}

/* ---------- 꼬리말 ---------- */
footer{margin-top:34px}
footer .wrap{font-family:var(--mono); font-size:12px}

/* ---------- 키보드로 다닐 때 잘 보이게 ---------- */
a:focus-visible,.btn:focus-visible,.like:focus-visible,.tab:focus-visible{
  outline:2px solid var(--ring); outline-offset:3px; border-radius:8px;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width:560px){
  .hero{padding:42px 0 26px}
  .hero h1::before{font-size:11.5px; margin-bottom:12px}
  .grid{grid-template-columns:1fr; gap:16px}
  .top nav a[href="/upload"]{padding:4px 10px}
}

/* ---------- 움직임을 줄여 달라고 한 기기에서는 멈춘다 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .card:hover,.btn:hover{transform:none}
}
/* ===== DESIGN-V2 END ===== */
/* ===== DESIGN-V2B — 제목 줄바꿈 다듬기 ===== */
.hero h1{
  max-width:26ch; margin-left:auto; margin-right:auto;
  text-wrap:balance;
}
/* 자동으로 올라온 인기작은 금빛 표지 */
.hero-game .crown{border-radius:999px}
/* ============================================================
   DESIGN-V3 START — 카드 아랫부분 정리 + 전체 다듬기
   문제: 엄지척/플레이수/버튼/상태 표시가 제멋대로 줄바꿈되어
        카드마다 아래쪽 모양이 달랐다.
   방침: 아래를 늘 두 줄로 고정한다.
        윗줄 = 숫자(왼쪽) · 상태(오른쪽),  아랫줄 = 버튼
   ============================================================ */

/* ---------- 카드 아랫부분 ---------- */
.card .foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 10px;
  margin-top:14px; padding-top:13px;
  border-top:1px solid var(--line);
}
.card .foot .stat{order:1; gap:8px}
.card .foot > span:not(.stat):last-child{order:2; margin-left:auto !important}
.card .foot::after{                     /* 여기서 줄을 끊는다 */
  content:""; order:3; flex:0 0 100%; height:0; margin:0;
}
.card .foot .btn{order:4; flex:1 1 132px; text-align:center}
.card .foot .btn.ghost{order:5; flex:0 0 auto}

/* 대표작 카드도 같은 규칙으로 */
.hero-game .foot{
  margin-top:20px; padding-top:15px; border-top:1px solid var(--line);
  gap:10px 12px;
}
.hero-game .foot .stat{margin-left:auto}

/* ---------- 카드 속 리듬 ---------- */
.card{padding:22px 22px 18px; gap:11px}
.card .summary{font-size:14px; line-height:1.72}
.card ul{margin-top:0}
.card .sups{margin-top:4px}
.tags{margin-top:2px}
.tags i{font-size:11px; color:var(--faint); opacity:.85; padding:1px 8px}
.card h2{margin-bottom:2px}

/* 상태 알약을 조금 더 또렷하게 */
.pill{font-size:11.5px; padding:3px 10px}
.pill.on{background:rgba(127,216,160,.08)}
.pill.off{background:rgba(224,140,140,.08)}
.pill.wait{background:rgba(217,178,106,.08)}

/* 엄지척 */
.like{padding:4px 12px; font-size:12.5px}
.like.on{box-shadow:0 6px 16px -10px var(--ga,var(--accent))}
.plays{font-size:12.5px; opacity:.85}

/* 지원 기기 표시 */
.sup{padding:2px 9px; font-size:11px; border-radius:7px; opacity:.95}

/* ---------- 지금 접속자 수를 살아 있게 ---------- */
.hero .live{display:inline-flex; align-items:center; gap:8px}
.hero .live::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--good); box-shadow:0 0 0 0 rgba(127,216,160,.5);
  animation:livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(127,216,160,.45)}
  70%{box-shadow:0 0 0 9px rgba(127,216,160,0)}
  100%{box-shadow:0 0 0 0 rgba(127,216,160,0)}
}

/* ---------- 목록 머리 ---------- */
.listhead{align-items:baseline}
.listhead .btn.small{margin-left:auto}
.cats i{font-family:var(--mono); font-size:11.5px; padding:2px 9px}

/* ---------- 게시판 ---------- */
.posts li{padding:13px 4px; transition:background .12s ease}
.posts li:hover{background:rgba(255,255,255,.018)}
.posts .t{font-size:14.5px}
.tab.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}

/* ---------- 글쓰기·올리기 칸 ---------- */
.write input,.write textarea,.write select,.reply input,.reply textarea,
.filebox input[name=url]{transition:border-color .14s ease}
.filebox{border-color:color-mix(in srgb,var(--maker) 28%,var(--line))}
.filebox label{color:var(--maker)}

/* ---------- 알림 상자 ---------- */
.notice{background:linear-gradient(90deg,rgba(255,255,255,.022),transparent 40%)}

/* ---------- 좁은 화면 ---------- */
@media (max-width:560px){
  .card{padding:18px 18px 16px}
  .card .foot .btn{flex:1 1 100%}
  .card .foot .btn.ghost{flex:1 1 100%}
}
/* ===== DESIGN-V3 END ===== */
/* ============================================================
   DESIGN-V4 START — 카드 아랫부분을 카드 맨 밑으로
   V3에서 margin-top:auto 를 덮어쓰는 바람에 카드마다 아랫부분
   높이가 제각각이 되었다. 되돌린다.
   ============================================================ */
.card .foot{
  margin-top:auto;          /* ← 핵심. 내용이 짧아도 아래로 밀어붙인다 */
  padding-top:14px;
}
.card .foot .btn{padding:10px 16px}

/* 알약 묶음이 통째로 다음 줄로 넘어갈 때도 오른쪽에 붙게 */
.card .foot > span:not(.stat):last-child{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  justify-content:flex-end;
}

/* 카드 위쪽 내용은 위에서부터 쌓이게 */
.card{justify-content:flex-start}
/* ===== DESIGN-V4 END ===== */
/* ===== DESIGN-V5 START — 운영자 · 쪽지함 ===== */

/* 위쪽 차림표의 운영자 */
.top nav a[href="/admin"]{font-size:13px}
.top nav a.adminon{
  color:var(--gold); font-weight:600; border-radius:999px;
  padding:5px 12px; border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  display:inline-flex; align-items:center; gap:7px;
}
.top nav a.adminon:hover{
  color:#fff; border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 14%,transparent);
}

/* 안 읽은 쪽지 개수 — 빨간 점 */
.badgedot{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#e05c5c; color:#fff; font-family:var(--mono);
  font-size:11px; font-weight:700; line-height:1;
  box-shadow:0 0 0 0 rgba(224,92,92,.55);
  animation:dotPulse 2.2s ease-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(224,92,92,.5)}
  70%{box-shadow:0 0 0 8px rgba(224,92,92,0)}
  100%{box-shadow:0 0 0 0 rgba(224,92,92,0)}
}
.tabs .badgedot{margin-left:7px}

/* 안 읽은 쪽지는 눈에 띄게 */
.sub.unread{
  border-color:color-mix(in srgb,#e05c5c 34%,var(--line));
  background:linear-gradient(90deg,rgba(224,92,92,.05),transparent 42%);
}
.sub.unread h3 em{
  background:#e05c5c; color:#fff; border-color:transparent;
}

/* 개발자 코드 같은 짧은 값 */
.notice code{
  font-family:var(--mono); background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:6px; padding:3px 10px;
}

/* 운영자 화면의 심사 단추 줄 */
.rev{align-items:center}
.rev input[name="why"]{
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:8px 11px; color:var(--ink); font:inherit; font-size:13px;
  flex:1 1 160px; min-width:0;
}

@media (max-width:560px){
  .top nav a.adminon{padding:4px 9px}
}
/* ===== DESIGN-V5 END ===== */
/* ===== DESIGN-V6 START — 게임 화면 스크린샷 ===== */

/* 카드 맨 위에 붙는 그림 */
.card .shot{
  margin:-22px -22px 4px;          /* 카드 안쪽 여백을 뚫고 가장자리까지 */
  aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(180deg,var(--bg2),var(--card));
  border-bottom:1px solid var(--line);
  position:relative;
}
.card .shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.card:hover .shot img{transform:scale(1.035)}
/* 그림 아래쪽을 살짝 어둡게 해서 제목이 뜨게 */
.card .shot::after{
  content:""; position:absolute; inset:auto 0 0; height:38%;
  background:linear-gradient(180deg,transparent,rgba(13,17,23,.55));
  pointer-events:none;
}

/* 대표작 큰 카드 */
.hero-game .shot{
  margin:-24px -24px 16px;
  aspect-ratio:21/9; overflow:hidden; position:relative;
  background:linear-gradient(180deg,var(--bg2),var(--card));
  border-bottom:1px solid var(--line);
}
.hero-game .shot img{width:100%; height:100%; object-fit:cover; display:block}
.hero-game .shot::after{
  content:""; position:absolute; inset:auto 0 0; height:50%;
  background:linear-gradient(180deg,transparent,rgba(13,17,23,.7));
  pointer-events:none;
}

/* 그림이 있는 카드는 위쪽 띠를 그림 위로 올린다 */
.card:has(.shot)::before,
.hero-game:has(.shot)::before{z-index:2}

@media (max-width:560px){
  .card .shot{margin:-18px -18px 4px}
  .hero-game .shot{margin:-20px -20px 14px; aspect-ratio:16/9}
}
/* ===== DESIGN-V6 END ===== */
/* ============================================================
   DESIGN-V7 START — 글줄 다듬기
   1) 한글이 낱말 가운데서 잘리던 것을 막는다 (word-break:keep-all)
   2) 첫 화면 소개글을 넓게 편다
   3) 아래 사이트 소개는 넓은 화면에서 두 칸으로 나눠 여백을 채운다
   ============================================================ */

/* ---------- 한글 줄바꿈 ---------- */
body, h1, h2, h3, p, li, td, th, .card, .about, .doc, .hero, .notice, .sub{
  word-break:keep-all;         /* 낱말 가운데서 자르지 않는다 */
  overflow-wrap:break-word;    /* 너무 긴 영문·주소만 예외로 자른다 */
}

/* ---------- 본문 폭 ---------- */
.wrap{max-width:1140px}

/* ---------- 첫 화면 ---------- */
.hero{padding:58px 0 42px}
.hero h1{
  max-width:none;                       /* 26ch 제한을 푼다 */
  font-size:clamp(25px,3.5vw,38px);
  line-height:1.32; letter-spacing:-.025em;
  text-wrap:balance;
}
.hero h1::before{margin-bottom:18px}
.hero p{
  max-width:64ch; font-size:16px; line-height:1.78;
  color:var(--dim);
}
.hero .live{margin-top:20px}

/* ---------- 사이트 소개 ---------- */
.about{max-width:none; margin-top:56px; padding-top:34px}
.about h2{font-size:20px; margin-bottom:16px}
.about h3{margin-top:0}
.about p{margin:0 0 14px}

@media (min-width:880px){
  .about{
    column-count:2; column-gap:54px;    /* 넓은 화면에서는 두 칸으로 */
  }
  .about h2{column-span:all}
  .about h3{
    break-after:avoid; page-break-after:avoid;
    margin-top:4px;
  }
  .about p{break-inside:avoid; page-break-inside:avoid}
  .about h3 + p{margin-top:0}
}

/* 한 칸일 때는 읽기 좋은 폭으로 */
@media (max-width:879px){
  .about{max-width:70ch}
}
/* ===== DESIGN-V7 END ===== */

/* ===== DESIGN-V8 : 게시판 손보기 · 한 줄 평 ===== */
/* 휴대폰에서 글 제목이 잘리던 것 — 줄바꿈을 허용하고 번호/메타를 아래로 내린다 */
.posts li a{display:flex;gap:8px;align-items:flex-start}
.posts li a .no{flex:0 0 auto;opacity:.55;font-variant-numeric:tabular-nums}
.posts li a .t{flex:1 1 auto;min-width:0;white-space:normal;word-break:break-word;
  overflow:visible;text-overflow:clip;line-height:1.45}
.posts li .m{display:block;margin-top:3px}
.posts .rc{font-weight:700;color:#ffb861;margin-left:6px;white-space:nowrap;font-size:.92em}
.posts .new{margin-left:6px}
@media (max-width:620px){
  .posts li a{flex-wrap:nowrap}
  .posts li a .no{min-width:2.2em}
  .posts li .m{font-size:12px;opacity:.75}
}
/* 한 줄 평 링크는 카드 아랫줄에서 단추들과 같은 높이로 */
.card .foot .revlink,.hero-game .foot .revlink{
  display:inline-flex;align-items:center;gap:4px;padding:0 2px}
/* ===== /DESIGN-V8 ===== */

/* ===== YG-CARD-ALIGN — 배지·태그·아래단을 카드 바닥에 모아 정렬 (2026-09-19) =====
   설명이 짧은 카드는 배지 줄이 가운데에 떠서 카드마다 높이가 달라 보였습니다.
   셋 중 맨 앞엣것에 margin-top:auto 를 줘서 한 덩어리로 바닥에 붙입니다. */
.card > .sups,
.card > .tags,
.card > .foot { margin-top: auto; }

.card > .sups ~ .tags { margin-top: 8px; }
.card > .sups ~ .foot,
.card > .tags ~ .foot { margin-top: 12px; }
/* ===== /YG-CARD-ALIGN ===== */

/* ===== YG-COMMENTS — 댓글·대댓글 (2026-09-20) ===== */
.cmt-h{margin:20px 0 6px;font-size:15px;color:#c8cde0}
.replies{list-style:none;padding:0;margin:8px 0}
.reply-item{border-top:1px solid rgba(120,128,159,.18);padding:10px 2px}
.reply-item.child{margin-left:26px;position:relative}
.reply-item.child::before{content:"\21B3";position:absolute;left:-18px;top:10px;color:#78809f}
.reply-item .m{font-size:12px;color:#9aa2c0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reply-item .b{margin-top:3px;white-space:pre-wrap}
.reform{margin-top:6px}
.reform>summary{cursor:pointer;color:#8fa9c9;font-size:13px;display:inline-block;list-style:none}
.reform>summary::-webkit-details-marker{display:none}
.reform form{margin-top:6px;display:flex;flex-direction:column;gap:6px;max-width:520px}
.rdel{display:inline;margin:0}
.linkbtn{background:none;border:none;color:#cc8a7a;cursor:pointer;font-size:12px;padding:0}
.linkbtn:hover{text-decoration:underline}
/* ===== /YG-COMMENTS ===== */

/* ===== YG-GAMEMENU — 게임 게시판 드롭다운 (2026-09-20, hover 다리 추가) ===== */
.tabs{position:relative;overflow:visible}
.gamemenu{position:relative;cursor:pointer;outline:none;display:inline-block}
.gamemenu .gm-label{pointer-events:none}
/* label 과 목록 사이 빈틈에서도 hover 가 끊기지 않도록 투명 다리를 깐다.
   다리 높이(14px)가 목록의 margin-top(8px)보다 커서 틈이 생기지 않는다. */
.gamemenu::after{content:"";position:absolute;top:100%;left:0;width:100%;height:14px;display:none}
.gamemenu:hover::after,
.gamemenu:focus-within::after{display:block}
.gamemenu .gm-list{
  display:none;position:absolute;top:100%;left:0;z-index:120;margin-top:8px;
  min-width:200px;max-height:60vh;overflow:auto;
  background:#161a26;border:1px solid rgba(120,128,159,.35);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:6px}
.gamemenu:hover .gm-list,
.gamemenu:focus-within .gm-list,
.gamemenu:focus .gm-list{display:block}
.gamemenu .gm-item{display:block;padding:9px 12px;border-radius:7px;
  color:#c8cde0;text-decoration:none;white-space:nowrap;font-size:14px}
.gamemenu .gm-item:hover{background:rgba(143,169,201,.16)}
.gamemenu .gm-item.on{color:#8fa9c9;font-weight:600}
@media (max-width:860px){.gamemenu .gm-list{left:auto;right:0}}
/* ===== /YG-GAMEMENU ===== */


/* ============================================================
   DESIGN-V9 START — 흰 톤 · 또렷한 편집
   앞의 구역들은 어두운 바탕을 전제로 짜여 있다. 흰 바탕에서
   안 보이거나 뿌예지는 것들을 여기서 한 번에 바로잡는다.
   통째로 지우면 앞 구역 상태로 돌아간다.
   ============================================================ */

/* ---------- 글씨 ---------- */
:root{
  --font:"IBM Plex Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"D2Coding",Consolas,monospace;
}
body{font-size:15px; line-height:1.72; letter-spacing:-.003em}

/* ---------- 머리말 ---------- */
.top{background:rgba(255,255,255,.92); border-bottom:1px solid var(--line)}
.brand::after{opacity:.5}
.top nav a:hover{color:var(--ink)}
.top nav a[href="/upload"]{border-radius:3px}

/* ---------- 큰 제목: 흰 글씨 그라데이션을 걷어낸다 ---------- */
.hero{padding:46px 0 26px; text-align:left}
.hero::before,.hero::after{display:none}
.hero h1{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;
  letter-spacing:-.035em; font-weight:700;
}
.hero h1::before{display:none}
.hero p{margin:0; max-width:44ch; color:var(--dim)}
.hero .live{border-radius:3px; border-color:var(--line); color:var(--dim)}

/* ---------- 카드: 색 막대를 떼고 선 하나로 ---------- */
.card, .hero-game{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
}
.card::before, .hero-game::before{display:none !important}
.card:hover{border-color:var(--accent) !important; transform:none !important}
.card h2, .hero-game h2{letter-spacing:-.015em}
.card .tagline{color:var(--dim)}
.hero-game .tagline{color:var(--dim)}
.card .badge, .hero-game .badge{border-radius:2px; color:#fff; background:var(--accent)}
.card .badge.hot{background:var(--accent)}
.hero-game .crown{filter:none}

/* ---------- 게임 화면 그림 ---------- */
.card .shot::after, .hero-game .shot::after{
  background:linear-gradient(180deg,transparent 55%,rgba(12,13,14,.28)) !important;
}
.card .shot img, .hero-game .shot img{filter:none}

/* ---------- 단추 ---------- */
.btn{
  background:var(--accent) !important; color:#fff !important;
  border:1px solid var(--accent) !important; border-radius:3px !important;
  font-weight:600; box-shadow:none !important;
}
.btn:hover{background:#9a3412 !important; border-color:#9a3412 !important}
.btn.ghost{background:transparent !important; color:var(--ink) !important; border-color:var(--line) !important}
.btn.ghost:hover{background:#efefed !important; border-color:var(--dim) !important; color:var(--ink) !important}
.btn[aria-disabled="true"]{background:#e7e5e4 !important; color:var(--faint) !important; border-color:var(--line) !important}

/* ---------- 상태 알약 ---------- */
.pill{border-radius:3px}
.pill.on{background:rgba(21,128,61,.09); border-color:rgba(21,128,61,.3); color:var(--good)}
.pill.off{background:rgba(185,28,28,.08); border-color:rgba(185,28,28,.28); color:var(--bad)}
.pill.wait{background:rgba(161,98,7,.09); border-color:rgba(161,98,7,.3); color:var(--gold)}
.dot{background:var(--good); box-shadow:0 0 0 0 rgba(21,128,61,.45)}

/* ---------- 엄지척 · 숫자 ---------- */
.like{border-radius:3px}
.like.on{background:var(--accent) !important; color:#fff !important; border-color:transparent !important}
.plays,.sup,.tags i,.cats i,.posts .no,.posts .m,.maker{color:var(--dim)}
.posts .rc{color:var(--gold)}

/* ---------- 게시판 ---------- */
.tabs .tab{border-radius:3px 3px 0 0}
.tab.on{background:var(--card); border-color:var(--line); color:var(--ink); box-shadow:none}
.posts li:hover{background:#efefed}
.posts .new{border-color:rgba(21,128,61,.4); color:var(--good)}
.pg{border-radius:3px}
.pg.on{background:var(--accent); color:#fff; border-color:transparent}
.who.admin{color:var(--accent)}

/* ---------- 글쓰기 칸 ---------- */
.write input,.write textarea,.write select,
.reply input,.reply textarea,.filebox input[name=url],.del input{
  background:#ffffff !important; border:1px solid var(--line) !important;
  color:var(--ink) !important; border-radius:3px !important;
}
.write input:focus,.write textarea:focus,.reply textarea:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(194,65,12,.12) !important;
}
.filebox{background:#fafaf9; border:1px dashed var(--line); border-radius:3px}
.filebox label{background:#ffffff; border-color:var(--line); color:var(--ink)}

/* ---------- 알림 상자 ---------- */
.notice{background:#ffffff !important; border:1px solid var(--line); border-radius:3px}
.notice.ok{border-color:rgba(21,128,61,.35)}
.notice.bad{border-color:rgba(185,28,28,.35)}
.notice code{background:#f0efed; color:var(--ink)}

/* ---------- 소개 · 읽을거리 ---------- */
.about, .doc{color:var(--ink)}
.about h2,.about h3,.doc h1,.doc h2,.doc h3{color:var(--ink)}
.about p,.doc p,.doc li{color:#3f3f3c}
.doc code{background:#f0efed; color:var(--ink)}
.doc th{background:#f0efed}
.doc table,.doc th,.doc td{border-color:var(--line)}

/* ---------- 한 줄 평 · 댓글 ---------- */
.cmt-h{color:var(--ink)}
.reply-item{border-top:1px solid var(--line)}
.reply-item.child::before{color:var(--faint)}
.reply-item .m{color:var(--dim)}
.reform>summary{color:var(--accent)}
.linkbtn{color:var(--dim)}
.linkbtn:hover{color:var(--bad)}

/* ---------- 게임 게시판 드롭다운 ---------- */
.gamemenu .gm-list{
  background:#ffffff; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 10px 26px rgba(12,13,14,.10);
}
.gamemenu .gm-item{color:var(--ink)}
.gamemenu .gm-item:hover{background:#f0efed}

/* ---------- 운영자 쪽지 표시 ---------- */
.badgedot{background:var(--bad); color:#fff; box-shadow:0 0 0 0 rgba(185,28,28,.5)}

/* ---------- 꼬리말 ---------- */
footer{border-top:1px solid var(--line); background:var(--card)}
footer .wrap{color:var(--dim)}
footer a{color:var(--dim)}
footer a:hover{color:var(--ink)}

/* ---------- 목록 머리 ---------- */
.listhead h2,.hothead{color:var(--ink)}
.pagehead h1{color:var(--ink); letter-spacing:-.03em}
.pagehead p{color:var(--dim)}


/* ---------- 대표 게임: 가로 두 단 ---------- */
.hero-game{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:0 !important; padding:0 !important; overflow:hidden !important;
}
.hero-game > .shot, .hero-game > .shot.big{
  margin:0 !important; border-radius:0 !important;
  height:100% !important; min-height:236px; max-height:none !important;
  aspect-ratio:auto !important;
}
.hero-game > .shot img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; border-radius:0 !important; display:block;
}
.hero-game > .hg-l{
  display:flex; flex-direction:column; gap:9px;
  padding:24px 26px 20px; min-width:0;
}
.hero-game .crown{
  align-self:flex-start; margin:0 0 2px;
  border:1px solid var(--line) !important; border-radius:2px !important;
  background:transparent !important; color:var(--dim) !important;
  font:600 11.5px/1 var(--mono) !important; padding:5px 8px !important;
  letter-spacing:.04em;
}
.hero-game h2{margin:0; font-size:22px; letter-spacing:-.02em}
.hero-game .tagline{margin:0}
.hero-game .summary{margin:0}
.hero-game ul{margin:2px 0 0}
.hero-game .sups{margin:2px 0 0}
.hero-game .foot{margin-top:auto !important; padding-top:14px}

@media (max-width:760px){
  .hero-game{grid-template-columns:1fr !important}
  .hero-game > .shot, .hero-game > .shot.big{
    height:auto !important; aspect-ratio:16/9 !important; min-height:0;
  }
  .hero-game > .hg-l{padding:20px 18px 18px}
}

/* ---------- 카드 경계를 조금 또렷하게 ---------- */
:root{--line:#dcdad5}
.card, .hero-game{border-color:#dcdad5 !important}
.card:hover{border-color:var(--accent) !important}

/* ---------- 첫 화면 접속자 표시 ---------- */
.hero .live{
  display:inline-flex !important; align-items:center; gap:7px;
  border:1px solid var(--line) !important; border-radius:3px !important;
  padding:6px 12px !important; background:var(--card) !important;
  font-family:var(--mono); font-size:12.5px; color:var(--dim) !important;
}
.hero .live b{color:var(--ink) !important; font-weight:600}


/* ---------- 화면 너비 ----------
   격자와 카드는 넓게 쓰고, 읽는 글만 좁게 잡아 둔다.
   한 줄이 너무 길면 눈이 다음 줄을 놓친다. */
.wrap{max-width:1280px !important}

/* 게임 카드는 한 줄에 더 들어가게 */
.grid{grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}

/* 대표 게임은 넓어진 만큼 그림 쪽을 조금 더 */
@media (min-width:1100px){
  .hero-game{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) !important}
  .hero-game > .shot, .hero-game > .shot.big{min-height:268px}
}

/* 읽는 글 — 여기는 넓히지 않는다 */
.doc, .about{max-width:800px; margin-inline:auto}
.post .b{max-width:800px}
.hero p{max-width:46ch}
.pagehead p{max-width:60ch}
.qa p, .faqlinks{max-width:800px}

/* 게시판 목록은 표처럼 읽히므로 넓혀도 되지만, 끝없이 벌어지지는 않게 */
.posts{max-width:1120px}
.tabs{max-width:1120px}


/* ---------- 카드 글 길이를 고른다 ----------
   글이 짧든 길든 카드가 같은 모양으로 서게 한다.
   글 자체는 건드리지 않는다. 넘치는 만큼만 가린다. */
.card{height:100%}

.card .tagline{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.9em;
}
.card .summary{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:4.8em; margin-bottom:0;
}
/* 특징은 세 줄까지만, 각 줄도 한 줄로 */
.card ul{min-height:0}
.card ul li{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
}
.card ul li:nth-child(n+4){display:none}

/* 대표 게임은 넓으니 조금 더 준다 */
.hero-game .summary{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-game .tagline{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 좁은 화면에서는 한 줄이 짧으니 줄 수를 늘려 준다 */
@media (max-width:560px){
  .card .summary{-webkit-line-clamp:4; min-height:0}
  .card .tagline{min-height:0}
}

/* ============ /DESIGN-V9 ============ */

/* YG-LOGOUT — 운영자로 들어와 있을 때만 뜨는 나가기 링크.
   운영자 단추가 금빛이라 그 옆에서 같이 튀면 산만하다. 한 단계 낮춘다. */
.top nav a.logout{opacity:.62;font-size:.92em}
.top nav a.logout:hover{opacity:1}

/* ==================================================================
   YG-ITCH (g825, 2026-10-16) — itch.io 식 모양과 느낌
   흰 바탕, 흑백 + 강조색 하나(적갈색 --accent), 작은 글자, 그림 위주 촘촘한 격자.
   아래 규칙이 위의 옛 규칙을 덮는다. 되돌리려면 이 줄 아래를 지우면 된다.
   ================================================================== */
:root{
  --bg:#ffffff; --bg2:#ffffff; --card:#ffffff; --line:#dadada; --side:#f4f4f4;
  --ink:#222222; --dim:#555555; --faint:#858585; --accent:#c2410c;
  --radius:3px;
}
body{background:#fff; color:var(--ink); font-size:14px; line-height:1.55}
a{color:var(--accent)}
.wrapx{max-width:1600px; margin:0 auto; padding:0 20px}
body.l-narrow main.wrapx{max-width:860px; padding-top:18px; padding-bottom:30px}
body.l-game main.wrapx{max-width:1060px; padding-top:14px; padding-bottom:30px}
body.l-wide main.wrapx{padding-top:0}
.lay{margin-left:-20px}
.devp{padding:14px 0 10px}

/* ---------- 머리줄 ---------- */
.yh{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.yh-in{max-width:1600px; margin:0 auto; padding:0 20px; height:52px;
  display:flex; align-items:center; gap:22px}
.yh-logo{font-weight:800; font-size:18px; color:var(--ink); white-space:nowrap; letter-spacing:-.02em}
.yh-logo span{color:var(--accent)}
.yh-logo:hover{text-decoration:none}
.yh-nav{display:flex; gap:18px; white-space:nowrap}
.yh-nav a{color:#606060; font-weight:700; font-size:14px}
.yh-nav a:hover,.yh-nav a.on{color:var(--ink); text-decoration:none}
.yh-search{flex:1; max-width:520px; margin:0 auto}
.yh-search input{width:100%; height:32px; border:1px solid #cfcfcf; border-radius:3px;
  background:#f6f6f6; padding:0 12px; font:inherit; font-size:14px; color:var(--ink)}
.yh-search input:focus{outline:none; border-color:var(--accent); background:#fff}
.yh-right{display:flex; gap:8px; align-items:center; white-space:nowrap}

/* 작은 테두리 단추 */
.yb{display:inline-flex; align-items:center; gap:6px; border:1px solid #cfcfcf; background:#fff;
  color:#444; border-radius:3px; padding:6px 13px; font-size:13.5px; font-weight:700;
  cursor:pointer; line-height:1.3; text-decoration:none; font-family:inherit}
.yb:hover{border-color:#999; color:var(--ink); text-decoration:none}
.yb.sm{padding:4px 10px; font-size:12.5px}
.yb.main{background:var(--accent); border-color:var(--accent); color:#fff; padding:9px 22px; font-size:15px}
.yb.main:hover{filter:brightness(1.08); color:#fff}
.yb.adminon{border-color:var(--accent); color:var(--accent)}
.badgedot{display:inline-block; min-width:16px; padding:0 4px; border-radius:8px; background:var(--accent);
  color:#fff; font-size:11px; text-align:center; line-height:16px}

/* ---------- 바닥글 ---------- */
.yf{border-top:1px solid var(--line); background:#fafafa; margin-top:30px}
.yf-in{max-width:1600px; margin:0 auto; padding:16px 20px 26px; display:flex; flex-wrap:wrap;
  gap:6px 16px; font-size:12.5px; color:var(--faint); align-items:center}
.yf-in a{color:#666}
.yf-in b{color:var(--ink)}
.yf-r{margin-left:auto}

/* ---------- 목록 화면: 사이드바 + 격자 ---------- */
.lay{display:grid; grid-template-columns:220px 1fr; min-height:70vh}
.ys{background:var(--side); border-right:1px solid #e6e6e6; padding:16px 18px 30px; font-size:13px}
.ys h4{margin:18px 0 6px; font-size:12px; font-weight:800; color:#333; letter-spacing:.04em}
.ys h4:first-child{margin-top:4px}
.ys-l{display:flex; flex-direction:column; gap:1px}
.ys-l.two{display:grid; grid-template-columns:1fr 1fr; gap:1px 10px}
.ys-l a{color:#555; padding:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ys-l a em{font-style:normal; color:#999; font-size:11.5px}
.ys-l a.on{color:var(--accent); font-weight:700}
.ys .clear{display:inline-block; margin-top:16px; font-size:12.5px}
.lay-main{padding:14px 0 10px 24px; min-width:0}
.topline{display:flex; align-items:center; gap:10px; margin:0 0 4px}
.topline .live{margin:0; font-size:13px; color:var(--dim)}
.topline .live b{color:var(--good)}
.only-m{display:none}

.sec{margin:6px 0 26px}
.sec-h{display:flex; align-items:baseline; gap:10px; border-bottom:1px solid #eaeaea;
  margin-bottom:12px; padding-bottom:6px}
.sec-h h2{margin:0; font-size:17px; font-weight:800; color:var(--ink)}
.sec-s{font-size:12.5px; color:var(--faint)}
.sec-h .more,.more{margin-left:auto; font-size:13px; font-weight:700}
a.more{display:inline-block}

.ggrid{display:grid; gap:22px 16px; grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.gc{min-width:0; display:flex; flex-direction:column; gap:3px; font-size:13px}
.gc-img{display:block; aspect-ratio:315/250; background:#eee; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.gc-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .15s}
.gc-img:hover img{transform:scale(1.03)}
.gc-ph{display:flex; width:100%; height:100%; align-items:center; justify-content:center;
  font-size:42px; font-weight:800; color:#fff; background:var(--ga,#999)}
.gc-top{display:flex; align-items:flex-start; gap:6px; margin-top:5px}
.gc-title{font-weight:800; color:var(--ink); font-size:14px; line-height:1.3; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gc-tags{display:flex; gap:3px; flex:0 0 auto}
.gc-tags i,.kd{font-style:normal; font-size:10px; font-weight:700; color:#777; border:1px solid #d0d0d0;
  border-radius:2px; padding:0 4px; line-height:15px; white-space:nowrap}
.gc-desc{margin:0; color:#777; font-size:12.5px; line-height:1.45; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em}
.gc-by{font-size:12px; color:#999}
.gc-meta{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:12px; color:#777; margin-top:2px}
.gc-meta .pill,.gd-stat .pill{font-size:11px; padding:0 7px; line-height:17px}
.rk{font-size:11px; font-weight:800; color:#fff; background:var(--accent); border-radius:2px; padding:0 5px; line-height:17px}
.like{cursor:pointer; user-select:none; font-weight:700; color:#666; display:inline-flex; gap:3px; align-items:center}
.like.on,.like:hover{color:var(--accent)}
.plays{color:#888}

/* 이번 주 3칸 */
.wkrow{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.wk{display:flex; flex-direction:column; gap:3px; color:var(--ink); min-width:0}
.wk:hover{text-decoration:none}
.wk-l{font-size:11.5px; font-weight:800; color:var(--accent); letter-spacing:.02em}
.wk-img{display:block; aspect-ratio:21/9; background:#eee; border-radius:3px; overflow:hidden}
.wk-img img{width:100%; height:100%; object-fit:cover; display:block}
.wk b{font-size:15px; margin-top:4px}
.wk-d{font-size:12.5px; color:#777; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wk-why{font-size:11.5px; color:#999}

/* 업데이트 글 목록 */
.ul{list-style:none; margin:0; padding:0}
.ul li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:8px 0;
  border-bottom:1px solid #eee; font-size:13.5px}
.ul-t{color:var(--ink); font-weight:700}
.ul-g{font-size:12.5px}
.ul-m{font-size:12px; color:#999; margin-left:auto}
.kd.k-업데이트{color:var(--accent); border-color:var(--accent)}
.empty{color:var(--faint); font-size:13.5px}

/* 글 단(게시판·고정 페이지·업데이트 글) */
.narrow{max-width:760px; margin:0 auto}
.crumb{font-size:12.5px; color:#999; margin:4px 0 10px}
.crumb a{color:#777}
.pt{font-size:24px; margin:0 0 6px; letter-spacing:-.01em}
.lede{color:var(--dim); font-size:14px}
.tabs2{display:flex; gap:4px; border-bottom:1px solid #e6e6e6; margin:14px 0 4px}
.tabs2 a{padding:6px 12px; color:#666; font-weight:700; font-size:13px; border-bottom:2px solid transparent}
.tabs2 a.on{color:var(--ink); border-color:var(--accent)}
.tabs2 a:hover{text-decoration:none; color:var(--ink)}
.pager{display:flex; gap:4px; margin:16px 0}
.pager a{border:1px solid #ddd; padding:2px 9px; border-radius:2px; color:#555; font-size:13px}
.pager a.on{background:var(--ink); color:#fff; border-color:var(--ink)}
body.l-narrow h1{font-size:24px}
body.l-narrow .pagehead h1{font-size:22px}

/* ---------- 게임 상세 ---------- */
.gd-cover{border-radius:3px; overflow:hidden; background:#eee; aspect-ratio:21/9; max-height:440px}
.gd-cover img{width:100%; height:100%; object-fit:cover; display:block}
.gd-bar{margin:14px 0 6px; padding-bottom:14px; border-bottom:1px solid #eaeaea}
.gd-name{margin:0; font-size:28px; letter-spacing:-.02em; line-height:1.25}
.gd-tag{margin:2px 0 0; color:var(--dim)}
.gd-btns{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:12px}
.gd-stat{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:10px; font-size:13px; color:#777}
.gd-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; margin-top:10px}
.gd-cols:not(:has(.gd-side)){grid-template-columns:minmax(0,1fr)}
.gd-main{min-width:0; max-width:760px}
.gd-doc{font-size:14.5px; line-height:1.75}
.gd-doc .doc h1{font-size:24px; margin:4px 0 8px; line-height:1.3}
.gd-doc .doc h2{font-size:17px; margin:24px 0 6px}
.gd-side{display:flex; flex-direction:column; gap:10px}
.gd-shots{display:flex; flex-direction:column; gap:10px}
.gd-shots img{width:100%; display:block; border-radius:3px; border:1px solid #e6e6e6}
.gd-sec{margin:26px 0 0}
.gd-sec h2{font-size:15px; margin:0 0 8px; padding-bottom:5px; border-bottom:1px solid #eaeaea}
.gd-talk{display:flex; gap:8px; flex-wrap:wrap; margin:0}
table.info{border-collapse:collapse; width:100%; font-size:13px}
table.info th{text-align:left; color:#777; font-weight:600; width:150px; padding:6px 10px 6px 0;
  vertical-align:top; border-bottom:1px solid #f0f0f0}
table.info td{padding:6px 0; border-bottom:1px solid #f0f0f0}
.mcs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.mc{display:flex; flex-direction:column; gap:2px; color:var(--ink); font-size:12.5px; min-width:0}
.mc:hover{text-decoration:none}
.mc-img{display:block; aspect-ratio:315/250; background:#eee; border-radius:3px; overflow:hidden}
.mc-img img{width:100%; height:100%; object-fit:cover; display:block}
.mc b{font-size:13px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mc span:last-child{color:#888; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 퍼가기·공유 접이 */
.emb{position:relative}
.emb>summary{list-style:none}
.emb>summary::-webkit-details-marker{display:none}
.emb[open]>summary{border-color:var(--accent); color:var(--accent)}
.emb-in{position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:min(420px,86vw); background:#fff;
  border:1px solid #ccc; border-radius:4px; box-shadow:0 6px 24px rgba(0,0,0,.12); padding:12px; font-size:13px}
.emb-in p{margin:0 0 8px}
.emb-in textarea{width:100%; font:12px/1.4 var(--mono); margin:6px 0; border:1px solid #ddd; border-radius:3px; padding:6px}
.emb-in label{margin-right:10px}
.share{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.sb{border:1px solid #cfcfcf; background:#fff; color:#444; border-radius:3px; padding:5px 11px;
  font:700 12.5px/1.3 var(--font); cursor:pointer}
.sb:hover{border-color:#888; text-decoration:none; color:var(--ink)}
.sb-msg{font-size:12px; color:var(--good)}

/* ---------- 실행 직후 안내 창 ---------- */
.ygm{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center}
.ygm[hidden]{display:none}
.ygm-bg{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.ygm-box{position:relative; background:#fff; border-radius:5px; width:min(600px,94vw); max-height:88vh;
  overflow:auto; padding:22px 24px 20px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.ygm-x{position:absolute; right:8px; top:6px; border:0; background:none; font-size:26px; line-height:1;
  color:#888; cursor:pointer; padding:4px 8px}
.ygm-x:hover{color:var(--ink)}
.ygm-t{margin:0 30px 4px 0; font-size:19px; font-weight:800}
.ygm-s{margin:0 0 14px; font-size:13px; color:#777}
.ygm-sec{margin:14px 0}
.ygm-sec>b{display:block; font-size:13px; margin-bottom:8px}
.ygm-links{font-size:13px; margin:10px 0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.ygm .mcs{grid-template-columns:repeat(4,1fr); gap:10px}
.adbox{margin:18px 0 0; padding-top:10px; border-top:1px dashed #ddd; position:relative; min-height:20px}
.adlabel{position:absolute; top:-9px; left:0; background:#fff; padding:0 6px 0 0; font-size:11px; color:#999}
body.modal-open{overflow:hidden}

/* ---------- 게시판·문서 손질 ---------- */
body.l-narrow .board, body.l-narrow .doc{font-size:14px}
.card,.sub,.notice{border-radius:3px}

/* ---------- 휴대폰 ---------- */
@media (max-width:1100px){
  .gd-cols{grid-template-columns:minmax(0,1fr)}
  .gd-shots{flex-direction:row; overflow-x:auto}
  .gd-shots a{flex:0 0 70%}
}
@media (max-width:860px){
  .yh-in{height:auto; flex-wrap:wrap; gap:6px 14px; padding:8px 14px}
  .yh-nav{order:3; width:100%; overflow-x:auto; gap:16px; padding-bottom:2px}
  .yh-search{order:4; flex:1 1 100%; max-width:none}
  .yh-right{margin-left:auto}
  .yh{position:static}
  .wrapx{padding:0 14px}
  body.l-wide main.wrapx{padding:0 14px}
  .lay{grid-template-columns:1fr}
  .ys{display:none; border:1px solid #e6e6e6; border-radius:4px; margin:10px 0 0}
  .ys.open{display:block}
  .ys-l{flex-direction:row; flex-wrap:wrap; gap:4px 12px}
  .ys-l.two{display:flex}
  .lay-main{padding:10px 0}
  .only-m{display:inline-flex; margin-left:auto}
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px}
  .wkrow{grid-template-columns:1fr; gap:14px}
  .gd-name{font-size:23px}
  table.info th{width:110px}
  .ygm{align-items:flex-end}
  .ygm-box{width:100%; max-height:84vh; border-radius:12px 12px 0 0; padding:18px 16px 22px}
  .ygm .mcs{grid-template-columns:repeat(2,1fr)}
  .yf-r{margin-left:0}
}

.gc-meta .like,.gd-stat .like,.ygm .like{border:0; background:none; padding:0; border-radius:0; font-family:inherit; font-size:12.5px}
.gc-meta .like.on,.gd-stat .like.on,.ygm .like.on{background:none; color:var(--accent)}
.gd-stat .like{font-size:14px}
body.l-wide .about{max-width:860px; margin:10px 0 30px; font-size:13.5px}

/* g825 손질: 게시판 칸 단추를 흑백 + 강조색으로, 동의 칸 정렬 */
body .catrow a{border-radius:3px; opacity:1; color:#555; border-color:#d0d0d0}
body .catrow a.on{background:var(--ink); border-color:var(--ink); color:#fff}
.write .check input,.check input[type=checkbox]{width:auto; flex:0 0 auto; margin-top:4px}
.btn{border-radius:3px}
@media (max-width:860px){ .lay{margin-left:0} }

/* g851 (2026-10-16) 휴대폰: 머리줄 메뉴가 가로로 밀려 '게시판'이 화면 밖에 숨던 것 — 밀지 않고 줄바꿈.
   공유·퍼가기 상자도 단추 옆에서 오른쪽 밖으로 삐져나가던 것 — 화면 아래쪽 판으로. */
@media (max-width:860px){
  .yh-nav{flex-wrap:wrap; overflow-x:visible; white-space:normal; gap:6px 16px}
  .yh-nav a{white-space:nowrap}
  .emb-in{position:fixed; left:12px; right:12px; top:auto; bottom:12px; width:auto; max-height:70vh; overflow:auto}
}
/* g852 휴대폰: 게시판 위 "게임 게시판 ▾" 목록이 단추 오른쪽 끝에 맞춰 열려 왼쪽 화면 밖으로 잘리던 것 — 게시판 줄 전체 폭으로 연다 */
@media (max-width:860px){
  .tabs .gamemenu{position:static}
  .tabs .gamemenu .gm-list{left:0; right:0; min-width:0; width:auto}
  .tabs .gamemenu .gm-item{white-space:normal}
}

/* ===== YG-ITCH2 (g862) 찜·팔로우·잼·통계·검사 표시 ===== */
.yb.fav.on{background:#fff1e6;border-color:#c2410c;color:#c2410c}
.yb.fav em,.yb.fav b{font-style:normal;margin-left:2px}
.fol .folf{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.fol .folf input[type=email]{flex:1 1 200px;min-width:0;padding:7px 9px;border:1px solid #d6d3d1;border-radius:6px}
.fol .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sm-note{font-size:12.5px;color:#78716c;line-height:1.55}
.scan{display:inline-block;font-size:12.5px;margin-top:6px;padding:2px 8px;border-radius:999px;background:#f5f5f4;color:#57534e}
.scan.ok{background:#ecfdf5;color:#047857}.scan.bad{background:#fef2f2;color:#b91c1c;font-weight:700}
.dv-fol{margin:-4px 0 12px}
.dvs .tw{overflow-x:auto}.dvst{border-collapse:collapse;width:100%;font-size:13.5px}
.dvst th,.dvst td{border-bottom:1px solid #e7e5e4;padding:6px 8px;text-align:right;white-space:nowrap}
.dvst th:first-child,.dvst tr th{text-align:left}.dvst td.rf{text-align:left;white-space:normal;color:#57534e}
.jam .ul .kd,.jp .pt .kd{font-size:12px;padding:1px 8px;border-radius:999px;background:#f5f5f4;color:#57534e;vertical-align:middle}
.jm.s-진행\ 중 .kd,.jp .pt .kd{background:#fff1e6;color:#c2410c}
.jm-box{border:1px solid #fed7aa;background:#fffbf5;border-radius:10px;padding:12px 16px;margin:10px 0 16px}
.jm-theme{font-size:18px;margin:0 0 4px}.jm-theme b{color:#c2410c}
.jm-by{font-size:12.5px;color:#78716c;margin:2px 0 4px}
.jm-out{padding:12px}
.sv-link{display:flex;gap:6px;flex-wrap:wrap}.sv-link input{flex:1 1 240px;min-width:0;padding:7px 9px;border:1px solid #d6d3d1;border-radius:6px}
.jp,.sv{max-width:1100px;margin:0 auto;padding:0 16px}

/* YG-JAMFORM (g874) 잼 열기 — 이름표 위, 입력칸 아래로 가지런히 */
form.write[action^="/jam"] label{display:block;margin:0 0 16px;font-weight:600}
form.write[action^="/jam"] label > input:not([type=checkbox]),
form.write[action^="/jam"] label > textarea{display:block;width:100%;max-width:none;box-sizing:border-box;margin-top:6px;font-weight:400}
form.write[action^="/jam"] label > input[type=checkbox]{margin:0 6px 0 0;vertical-align:middle}

/* YG-COVER-FIT (g880): 상세 페이지 큰 그림 — 전체 보이기 + 흐린 배경 채움 */
.gd-cover{position:relative;background:#111}
.gd-cover::before{content:"";position:absolute;inset:-30px;background:var(--cv) center/cover no-repeat;filter:blur(24px) brightness(.55);transform:scale(1.05)}
.gd-cover img{position:relative;object-fit:contain}

/* YG-CARD-ROWS (g882): 카드 아랫줄 — 1줄 순위·엄지척·플레이 / 2줄 운영중·지금 n명 */
.gc-meta::before{content:"";flex-basis:100%;height:0;order:1}
.gc-meta>.pill{order:3}
.gc-meta>.pill:last-child{order:2}

/* YG-CARD-FIT (g884): 목록 카드 그림 전체 보이기 + 흐린 배경, 카드 아랫줄 높이 맞춤 */
.gc-img{position:relative;background:#111}
.gc-img::before{content:"";position:absolute;inset:-20px;background:var(--cv) center/cover no-repeat;filter:blur(16px) brightness(.6);transform:scale(1.05)}
.gc-img img{position:relative;object-fit:contain}
.gc-meta{margin-top:auto;padding-top:4px}


/* ===== YG-I18N (2026-10-17) 머리줄 말 고르기 ===== */
.yh-lang{position:relative}
.yh-lang>summary{list-style:none; gap:4px}
.yh-lang>summary::-webkit-details-marker{display:none}
.yh-lang>summary::after{content:"\25BE"; font-size:10px; opacity:.6}
.yh-lang .yl-g{font-size:13px; line-height:1}
.yh-lang-m{position:absolute; right:0; top:calc(100% + 4px); z-index:40; background:#fff;
  border:1px solid #d6d6d6; border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:4px 0; min-width:150px; display:flex; flex-direction:column}
.yh-lang-m a{padding:6px 14px; color:#444; font-size:13.5px; white-space:nowrap}
.yh-lang-m a:hover{background:#f4f4f4; text-decoration:none; color:var(--ink)}
.yh-lang-m a.on{font-weight:800; color:var(--accent)}
@media (max-width:860px){
  .yh-lang .yl-n{display:none}
  .yh-lang>summary{padding:4px 8px}
  .yh-lang-m{right:0; max-width:calc(100vw - 28px)}
}
/* YG-I18N4-CARD (g917) 외국어 꼬리표가 길면 제목이 'Si…' 로 잘리던 것 — 꼬리표를 다음 줄로 */
.gc-top{flex-wrap:wrap}
.gc-title{min-width:55%}
.gc-tags{flex:0 1 auto; flex-wrap:wrap}
/* /YG-I18N4-CARD */

/* YG-LISTS 공개 모음집 (2026-10-18) */
.cl-form label{display:block;margin:12px 0 4px;font-weight:600}
.cl-form input[name=name],.cl-form textarea,.cl-form input[type=email]{width:100%;box-sizing:border-box}
.cl-rows{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.cl-row{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line,#e7e5e4);border-radius:8px}
.cl-row .cl-pick{margin:0;font-weight:400}
.cl-row input[type=text],.cl-row input:not([type]){width:100%;box-sizing:border-box}
.cl-warn{margin:12px 0}
.cl-about p{margin:4px 0}
.cl-item{display:flex;flex-direction:column}
.cl-note{margin:4px 2px 0;font-size:13.5px;color:var(--mute,#57534e)}
.cl-list{padding-left:18px}.cl-list li{margin:8px 0}
.cl-mk{margin:10px 0}.cl-mk small{color:var(--mute,#777);margin-left:6px}
.cl-del{margin-top:18px}
@media (max-width:860px){.cl-row{grid-template-columns:1fr}}

/* YG-THEME 게임 페이지 꾸미기 (2026-10-18) — 색 3개·배경 그림만, 값은 서버에서 검사한 CSS 변수 */
.gd.yt{background:var(--tbg);color:var(--tfg);padding:14px 16px 22px;border-radius:12px;--dim:var(--tdim);--mute:var(--tdim);--line:var(--tline);--bg2:var(--tbg2)}
.gd.yti{background:var(--tbg) var(--timg) center top/cover no-repeat}
.gd.yti>.gd-bar,.gd.yti>.gd-cols,.gd.yti>.gd-sec,.gd.yti>nav{background:var(--tpanel);border-radius:8px;padding:10px 14px}
.gd.yt .gd-bar,.gd.yt .gd-sec h2{border-color:var(--tline)}
.gd.yt .gd-stat,.gd.yt .gd-tag{color:var(--tdim)}
.gd.yt .gd-shots img{border-color:var(--tline)}
.gd.yt .gd-doc a,.gd.yt .info a,.gd.yt .crumb a{color:inherit;text-decoration:underline;text-decoration-color:var(--ga)}
.gd.yt .info th,.gd.yt .info td{color:inherit;border-color:var(--tline)}

/* YG-RECBADGE 추천 · 링크 소개 표시 (10-23) */
.gc-img{position:relative}
.gc-img .gc-rec{position:absolute;left:6px;top:6px;z-index:2;font-size:11px;font-weight:700;line-height:1;padding:4px 7px;border-radius:3px;background:rgba(17,17,17,.78);color:#ffd27a;pointer-events:none;white-space:nowrap}

/* YG-ASROW 첫 화면 「새 에셋」 줄 = 아래 게임 칸과 같은 열·크기, 한 줄만 (10-23) */
.mcs.mcs-row{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:0 16px;grid-template-rows:auto;grid-auto-rows:0;overflow:hidden}
@media (max-width:860px){.mcs.mcs-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}}

/* YG-PROMO 운영자 로그인 버튼 손가락 크기 (10-23) */
form.write input[name=pw] ~ .boardfoot .btn{min-height:44px}
/* YG-CONSENT 홍보보드 3단계(10-24) 게임 올리기·고치기 '소식·홍보 안내 받기' 칸 — 휴대폰에서 누르기 쉽게 44px */
.yg-consent label.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.yg-consent input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}.write .boardfoot .btn{min-height:44px}

/* YG-AGE18 10-25 공포·폭력 18+ 표시 */
.gc-img .gc-18{position:absolute;right:6px;top:6px;z-index:2;font-size:11px;font-weight:800;line-height:1;padding:4px 6px;border-radius:3px;background:#b91c1c;color:#fff;pointer-events:none}
.gd-name .gc-18{display:inline-block;vertical-align:middle;font-size:13px;font-weight:800;line-height:1;padding:4px 7px;border-radius:4px;background:#b91c1c;color:#fff}

/* ===== YG-T2NEWS START — 신 테오고니아 대표 카드 · 개발소식 글 (web/t2news.py) ===== */
.t2hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0;margin:0 0 18px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#141821;color:#f3efe6}
.t2h-img{position:relative;display:block;aspect-ratio:21/9;overflow:hidden;background:#0e1118}
.t2h-img img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated;transition:transform .35s ease}
.t2hero:hover .t2h-img img{transform:scale(1.03)}
.t2h-badge{position:absolute;left:10px;top:10px;background:rgba(194,65,12,.92);color:#fff;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:3px;letter-spacing:.02em}
.t2h-body{padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.t2h-t{margin:0;font-size:24px;line-height:1.2}
.t2h-t a{color:#ffd88a;text-decoration:none}
.t2h-s{margin:0;color:#e6e0d4;font-size:14.5px;line-height:1.5}
.t2h-d{margin:0;color:#a9a294;font-size:13px}
.t2h-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.t2h-go{display:inline-block;background:#ffd88a;color:#1b1608;font-weight:700;padding:7px 12px;border-radius:4px;text-decoration:none;font-size:14px}
.t2like{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.t2l-btn{cursor:pointer;border:1px solid #c2410c;background:#fff7ed;color:#9a3412;font:inherit;font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px}
.t2l-btn b{display:inline-block;min-width:1.4em;text-align:center}
.t2like.on .t2l-btn{background:#c2410c;color:#fff}
.t2l-msg{font-size:12.5px;color:#b91c1c}
.t2hero .t2l-btn{background:transparent;color:#ffd88a;border-color:#ffd88a}
.t2hero .t2like.on .t2l-btn{background:#ffd88a;color:#1b1608}
@media (max-width:860px){
  .t2hero{grid-template-columns:1fr}
  .t2h-body{padding:12px 14px 14px}
  .t2h-t{font-size:20px}
}
.t2post{line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
.t2post h2{font-size:19px;margin:28px 0 8px;padding-top:6px;border-top:1px solid var(--line)}
.t2post h3{font-size:16px;margin:16px 0 6px}
.t2post ul{margin:6px 0 12px;padding-left:1.3em}
.t2warn{background:#fff7ed;border:1px solid #fdba74;border-radius:5px;padding:9px 12px;color:#7c2d12}
.t2fig{margin:12px 0 18px}
.t2fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px;image-rendering:pixelated;background:#0e1118}
.t2fig figcaption{font-size:13.5px;color:var(--dim);margin-top:6px;line-height:1.6}
.t2grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.t2grid .t2fig{margin:0 0 6px}
@media (max-width:560px){.t2grid{grid-template-columns:1fr}}
.t2post .t2like{margin:10px 0 6px}
.t2post .t2l-btn{font-size:16px;padding:9px 18px}
.t2mail{margin:10px 0 18px;padding:12px;border:1px dashed var(--line);border-radius:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.t2mail input[type=email]{flex:1 1 220px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font:inherit}
.t2m-btn{cursor:pointer;padding:8px 14px;border:0;border-radius:4px;background:#1f2937;color:#fff;font:inherit;font-weight:700}
.t2m-note{flex-basis:100%;margin:0;font-size:12.5px;color:var(--faint)}
.t2m-msg{flex-basis:100%;margin:0;font-size:13.5px}
.t2m-msg.ok{color:#15803d}.t2m-msg.no{color:#b91c1c}
/* ===== YG-T2NEWS END ===== */