/* ─────────────────────────────────────────────────────────────
   한글패치 사이트 — 홈은 블로그처럼, 게시판은 카페처럼.
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#f1f2f4;
  --panel:#ffffff;
  --line:#e2e4e8;
  --line-2:#eef0f3;
  --head:#232a34;
  --head-2:#2e3744;
  --text:#20242a;
  --dim:#6b7280;
  --faint:#9aa0a8;
  --accent:#2f6fd0;
  --accent-bg:#eaf1fc;
  --notice:#fff9e6;
  --notice-line:#f0e2b6;
  --ok:#1f7a4d;
  --warn:#c0392b;
  --radius:6px;
  --wrap:1120px;
  --side:250px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#15181c; --panel:#1c2026; --line:#2b3038; --line-2:#23272e;
    --head:#11141a; --head-2:#1a1f27; --text:#e6e8ec; --dim:#9aa2ad; --faint:#6f7783;
    --accent:#6fa8f5; --accent-bg:#1d2836; --notice:#2a2617; --notice-line:#4a412a;
    --ok:#5cc48d; --warn:#f08579;
  }
}
:root[data-theme="dark"]{
  --bg:#15181c; --panel:#1c2026; --line:#2b3038; --line-2:#23272e;
  --head:#11141a; --head-2:#1a1f27; --text:#e6e8ec; --dim:#9aa2ad; --faint:#6f7783;
  --accent:#6fa8f5; --accent-bg:#1d2836; --notice:#2a2617; --notice-line:#4a412a;
  --ok:#5cc48d; --warn:#f08579;
}
:root[data-theme="light"]{
  --bg:#f1f2f4; --panel:#ffffff; --line:#e2e4e8; --line-2:#eef0f3;
  --head:#232a34; --head-2:#2e3744; --text:#20242a; --dim:#6b7280; --faint:#9aa0a8;
  --accent:#2f6fd0; --accent-bg:#eaf1fc; --notice:#fff9e6; --notice-line:#f0e2b6;
  --ok:#1f7a4d; --warn:#c0392b;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,
    "Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  font-size:15px; line-height:1.7; word-break:keep-all; overflow-wrap:break-word;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

/* ── 머리 ─────────────────────────────────────────────── */
.gnb{background:var(--head); color:#fff}
.gnb__top{
  max-width:var(--wrap); margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:16px; height:58px;
}
.gnb__logo{
  color:#fff; font-size:19px; font-weight:800; letter-spacing:-.02em;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.gnb__logo:hover{text-decoration:none}
.gnb__logo b{
  background:var(--accent); color:#fff; border-radius:5px;
  padding:2px 7px; font-size:13px; font-weight:800; letter-spacing:0;
}
.gnb__tag{color:#aab3c0; font-size:12.5px; margin-left:2px}
.gnb__search{margin-left:auto; display:flex; gap:6px}
.gnb__search input{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:5px; padding:6px 10px; font:inherit; font-size:13px; width:180px;
}
.gnb__search input::placeholder{color:#9aa3b0}
.gnb__search button{
  background:var(--accent); color:#fff; border:0; border-radius:5px;
  padding:6px 12px; font:inherit; font-size:13px; cursor:pointer;
}
.gnb__nav{background:var(--head-2)}
.gnb__nav ul{
  max-width:var(--wrap); margin:0 auto; padding:0 16px; list-style:none;
  display:flex; gap:2px; overflow-x:auto;
}
.gnb__nav a{
  display:block; color:#cbd3dd; padding:11px 16px; font-size:14px; white-space:nowrap;
  border-bottom:3px solid transparent;
}
.gnb__nav a:hover{color:#fff; text-decoration:none; background:rgba(255,255,255,.05)}
.gnb__nav a.on{color:#fff; font-weight:700; border-bottom-color:var(--accent)}

/* ── 뼈대 ─────────────────────────────────────────────── */
.wrap{
  max-width:var(--wrap); margin:0 auto; padding:18px 16px 60px;
  display:grid; grid-template-columns:1fr var(--side); gap:18px; align-items:start;
}
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.panel + .panel{margin-top:14px}
.panel__head{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
.panel__head h2{margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.01em}
.panel__head .more{margin-left:auto; font-size:12.5px; color:var(--dim)}
.panel__body{padding:16px}

/* ── 홈: 글 카드 ──────────────────────────────────────── */
.feed{list-style:none; margin:0; padding:0}
.feed li{border-bottom:1px solid var(--line-2)}
.feed li:last-child{border-bottom:0}
.card{display:grid; grid-template-columns:132px 1fr; gap:16px; padding:16px}
.card--nothumb{grid-template-columns:1fr}
.card__thumb{
  width:132px; height:88px; border-radius:5px; overflow:hidden;
  background:var(--line-2); border:1px solid var(--line);
}
.card__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.card__cat{
  font-size:11.5px; color:var(--accent); font-weight:700;
  display:inline-block; margin-bottom:3px;
}
.card__title{margin:0 0 5px; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.4}
.card__title a{color:var(--text)}
.card__title a:hover{color:var(--accent)}
.card__ex{margin:0 0 7px; color:var(--dim); font-size:13.5px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card__meta{font-size:12px; color:var(--faint); display:flex; gap:10px; flex-wrap:wrap}

/* ── 게시판 표 ────────────────────────────────────────── */
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{
  background:var(--line-2); color:var(--dim); font-weight:600; font-size:12.5px;
  padding:9px 10px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap;
}
.tbl td{padding:11px 10px; border-bottom:1px solid var(--line-2); text-align:center; color:var(--dim); font-size:12.5px}
.tbl td.t{text-align:left; color:var(--text); font-size:14px}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--line-2)}
.tbl .num{width:56px; font-variant-numeric:tabular-nums}
.tbl .date{width:86px; font-variant-numeric:tabular-nums}
.tbl .cat{width:88px}
.tbl a{color:var(--text)}
.tbl a:hover{color:var(--accent)}
.tbl tr.notice td{background:var(--notice)}
.tbl tr.notice:hover td{background:var(--notice)}
.badge{
  display:inline-block; font-size:11px; font-weight:700; line-height:1.5;
  padding:1px 7px; border-radius:3px; background:var(--warn); color:#fff; margin-right:6px;
  vertical-align:1px;
}
.badge--cat{background:var(--accent-bg); color:var(--accent)}
.badge--new{background:var(--ok)}

.pager{display:flex; justify-content:center; gap:5px; padding:16px}
.pager a,.pager span{
  min-width:31px; height:31px; display:grid; place-items:center; font-size:13px;
  border:1px solid var(--line); border-radius:4px; color:var(--dim); padding:0 8px;
}
.pager .on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}

/* ── 사이드바 ─────────────────────────────────────────── */
.side .panel__body{padding:10px 0}
.cats{list-style:none; margin:0; padding:0}
.cats a{
  display:flex; align-items:center; gap:8px; padding:9px 16px;
  color:var(--text); font-size:14px;
}
.cats a:hover{background:var(--line-2); text-decoration:none}
.cats a.on{background:var(--accent-bg); color:var(--accent); font-weight:700}
.cats .n{margin-left:auto; color:var(--faint); font-size:12px}
.cats .dot{width:5px; height:5px; border-radius:50%; background:var(--faint)}
.cats a.on .dot{background:var(--accent)}

.mini{list-style:none; margin:0; padding:4px 0}
.mini li{padding:6px 16px; font-size:13px; line-height:1.5}
.mini a{color:var(--text); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini .d{color:var(--faint); font-size:11.5px}

.sidecta{padding:14px 16px}
.btn{
  display:inline-block; background:var(--accent); color:#fff; border-radius:5px;
  padding:9px 16px; font-size:14px; font-weight:700; text-align:center;
}
.btn:hover{text-decoration:none; filter:brightness(1.07)}
.btn--block{display:block}
.btn--ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.sidecta p{margin:0 0 10px; font-size:13px; color:var(--dim)}

/* ── 글 본문 ──────────────────────────────────────────── */
.post__head{padding:20px 22px 16px; border-bottom:1px solid var(--line)}
.post__cat{font-size:12.5px; color:var(--accent); font-weight:700}
.post__title{margin:5px 0 10px; font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.35}
.post__meta{font-size:12.5px; color:var(--faint); display:flex; gap:12px; flex-wrap:wrap}
.post__body{padding:22px}
.post__body > *:first-child{margin-top:0}
.post__body h2{
  font-size:18px; font-weight:800; margin:30px 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--line); letter-spacing:-.02em;
}
.post__body h3{font-size:15.5px; font-weight:700; margin:24px 0 8px}
.post__body p{margin:0 0 14px}
.post__body ul,.post__body ol{margin:0 0 14px; padding-left:22px}
.post__body li{margin:5px 0}
.post__body figure{margin:18px 0}
.post__body figure img{border:1px solid var(--line); border-radius:5px; display:block}
.post__body figcaption{font-size:12.5px; color:var(--faint); margin-top:7px}
.post__body table{width:100%; border-collapse:collapse; font-size:13.5px; margin:0 0 16px}
.post__body th,.post__body td{border:1px solid var(--line); padding:8px 10px; text-align:left}
.post__body th{background:var(--line-2); font-weight:700; white-space:nowrap}
code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.88em; word-break:break-all}
.post__body code{background:var(--line-2); padding:1px 5px; border-radius:3px}
.scroll-x{overflow-x:auto}

.callout{
  border:1px solid var(--notice-line); background:var(--notice);
  border-radius:5px; padding:13px 16px; margin:16px 0;
}
.callout p:last-child{margin-bottom:0}
.callout--warn{border-color:#f3c9c4; background:#fdf0ee}
@media (prefers-color-scheme:dark){ .callout--warn{border-color:#5a3730; background:#2c1e1b} }

.dlbox{border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin:0 0 10px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:var(--line-2)}
.dlbox b{font-size:14.5px}
.dlbox span{color:var(--faint); font-size:12.5px}
.dlbox .btn{margin-left:auto}

.compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.compare figure{margin:0}
.compare img{image-rendering:pixelated; width:100%}

.postnav{display:flex; gap:10px; padding:14px 22px; border-top:1px solid var(--line); flex-wrap:wrap}
.postnav a{font-size:13.5px; color:var(--dim)}

/* ── 꼬리 ─────────────────────────────────────────────── */
.foot{background:var(--head); color:#94a0ae; padding:24px 0 34px; font-size:12.5px}
.foot__in{max-width:var(--wrap); margin:0 auto; padding:0 16px}
.foot p{margin:0 0 6px}
.foot a{color:#c3ccd6}

.skip{position:absolute; left:-9999px}
.skip:focus{left:10px; top:10px; z-index:99; background:var(--accent); color:#fff; padding:8px 14px; border-radius:4px}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .side{order:2}
  .gnb__search{display:none}
  .card{grid-template-columns:96px 1fr; gap:12px; padding:13px}
  .card__thumb{width:96px; height:66px}
  .card__title{font-size:15.5px}
  .tbl .cat,.tbl .num{display:none}
  .post__title{font-size:20px}
  .post__body,.post__head{padding-left:16px; padding-right:16px}
}

/* ── 제보 양식 ────────────────────────────────────────── */
.f2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.fld{margin:0 0 16px}
.fld label{display:block; font-size:13.5px; font-weight:700; margin:0 0 6px}
.fld label span{font-weight:400; color:var(--faint); font-size:12.5px; margin-left:6px}
.fld input[type=text], .fld select, .fld textarea{
  width:100%; font:inherit; font-size:14px; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:5px;
  padding:9px 11px;
}
.fld textarea{resize:vertical; line-height:1.65}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent);
}
.drop{
  border:2px dashed var(--line); border-radius:6px; background:var(--line-2);
  padding:20px 16px; text-align:center;
}
.drop.on{border-color:var(--accent); background:var(--accent-bg)}
.drop p{margin:0 0 10px; color:var(--dim); font-size:13.5px}
.drop .dropinfo{margin:10px 0 0; font-size:12.5px; color:var(--faint)}
.shots{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.shot{margin:0; width:150px}
.shot img{width:100%; border:1px solid var(--line); border-radius:5px; display:block}
.shot figcaption{font-size:11.5px; color:var(--faint); margin-top:4px;
  display:flex; align-items:center; gap:6px}
.shot button{
  font:inherit; font-size:11.5px; color:var(--warn); background:none;
  border:0; cursor:pointer; padding:0; text-decoration:underline;
}
.formnote{min-height:20px; margin:0 0 10px; font-size:13px; color:var(--dim)}
.formnote--bad{color:var(--warn); font-weight:700}
.finehint{margin:10px 0 0; font-size:12.5px; color:var(--faint)}
#send[disabled]{opacity:.6; cursor:default}
@media (max-width:560px){ .f2{grid-template-columns:1fr} }

/* ── 올라온 제보 (reports.html) ─────────────────────────────
   목록은 가볍게, 사진은 눌렀을 때만 받는다. 카드 하나 = 제보 하나. */
.rep{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin:0 0 10px;
}
.rep__head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px}
.rep__kind{
  font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-bg); border-radius:3px; padding:2px 7px; white-space:nowrap;
}
/* 처리 상태 딱지 — 보낸 분이 「보고만 있나」 싶지 않게 눈에 띄게 둔다.
   값은 assets/reports.js 의 STATUS 표에서 온다(제보 문서는 못 고치므로). */
.rep__st{
  font-size:11.5px; font-weight:700; border-radius:3px; padding:2px 7px; white-space:nowrap;
  color:#fff; background:#b26a00;
}
.rep__st--done{background:#1f7a3d}
.rep__st--check{background:#4a5568}
.rep__stmsg{
  font-size:13px; margin:0 0 8px; padding:7px 10px; line-height:1.6;
  border-left:3px solid #b26a00; background:var(--accent-bg); border-radius:0 3px 3px 0;
}
.rep__screen{font-size:15px; margin:0; font-weight:700; flex:1 1 auto; min-width:0}
.rep__when{font-size:12px; color:var(--faint); white-space:nowrap}
.rep__detail{font-size:14px; line-height:1.75; margin:0 0 8px; white-space:normal; word-break:break-word}
.rep__meta{font-size:12.5px; color:var(--dim); margin-bottom:8px}
.rep__more{font-size:12.5px; padding:5px 11px}
.rep__shots{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.rep__shots img{max-width:280px; width:100%; height:auto; border:1px solid var(--line); border-radius:4px}
/* 관리용 줄 — 주소에 ?admin=1 을 붙였을 때만 나온다. 남에게는 안 보인다. */
.rep__admin{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px; padding-top:9px; border-top:1px dashed var(--line);
}
.rep__admin .btn{font-size:12px; padding:4px 9px}
.rep__admin-msg{flex:1 1 220px; min-width:160px; font-size:12.5px; padding:5px 8px;
  border:1px solid var(--line); border-radius:4px; background:var(--bg); color:inherit}
.rep__admin-say{font-size:12px; color:var(--dim)}
.rep__admin-mail{font-size:12px; color:var(--accent); font-weight:700}
.adminbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 14px; margin:0 0 12px; border:1px dashed var(--accent);
  border-radius:var(--radius); background:var(--accent-bg)}
.adminbar span{font-size:12.5px; color:var(--dim)}

/* ── 동의 창 (내려받기 잠금) ────────────────────────────────
   내려받기 단추는 href 를 아예 안 갖는다. 동의를 눌러야 그때 주소가 열린다.
   자바스크립트가 죽으면 링크도 죽는다 — 그게 맞는 방향이다(열려버리는 것보다). */
.gate{
  position:fixed; inset:0; z-index:900; display:flex;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(12,14,18,.62);
}
.gate[hidden]{display:none}
.gate__box{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  width:100%; max-width:600px; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.34);
}
.gate__head{
  padding:15px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
.gate__head h2{margin:0; font-size:16.5px}
.gate__x{
  margin-left:auto; border:0; background:none; cursor:pointer;
  color:var(--dim); font-size:20px; line-height:1; padding:2px 5px;
}
.gate__body{padding:16px 18px; overflow-y:auto; font-size:14px; line-height:1.75}
.gate__body ul{margin:0 0 12px; padding-left:19px}
.gate__body li{margin-bottom:9px}
.gate__body li:last-child{margin-bottom:0}
.gate__body b{color:var(--warn)}
.gate__foot{
  padding:14px 18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.gate__agree{
  display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  font-size:14px; font-weight:700; flex:1 1 240px; line-height:1.55;
}
.gate__agree input{margin:3px 0 0; width:17px; height:17px; flex:0 0 auto; cursor:pointer}
.gate__go[disabled]{opacity:.42; cursor:not-allowed}
.gate__note{
  width:100%; margin:0; font-size:12.5px; color:var(--faint); line-height:1.6;
}
@media (max-width:520px){
  .gate__foot .gate__go{width:100%; text-align:center}
}

/* ── 내려받기 시작 알림 ─────────────────────────────────────
   브라우저가 정말 받기 시작했는지는 알 수 없다. 그래서 시작시킨 뒤
   손으로 누를 고리를 남겨 둔다(확장 프로그램 등에 막힌 경우 대비). */
.dlnote{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:950;
  max-width:calc(100% - 24px); display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 14px; font-size:13.5px; line-height:1.6;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.dlnote b{color:var(--ok)}
.dlnote button{
  border:0; background:none; cursor:pointer; color:var(--dim);
  font-size:18px; line-height:1; padding:0 2px;
}

/* ── 게임 상태 딱지 · 제보 거르개 ───────────────────────────── */
.gstat{
  font-size:11.5px; font-weight:700; border-radius:3px; padding:2px 7px;
  white-space:nowrap; vertical-align:2px;
}
.gstat--ok  { color:#fff; background:var(--ok) }
.gstat--wip { color:var(--warn); background:var(--notice); border:1px solid var(--notice-line) }
.gstat--plan{ color:var(--dim); background:var(--line-2); border:1px solid var(--line) }

.repfilter{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 12px}
.repfilter:empty{display:none}
.repfil{
  font-size:13px; padding:5px 12px; cursor:pointer;
  color:var(--dim); background:var(--panel);
  border:1px solid var(--line); border-radius:14px;
}
.repfil:hover{color:var(--text)}
.repfil.on{color:#fff; background:var(--accent); border-color:var(--accent); font-weight:700}

/* ── 게임 고르는 줄 ─────────────────────────────────────────
   게임을 고르면 게시판·제작일지·제보가 그 게임 것만 보인다. */
.gnb__games{background:var(--head-2); border-top:1px solid rgba(255,255,255,.06)}
.gnb__games ul{
  max-width:var(--wrap); margin:0 auto; padding:0 16px;
  display:flex; gap:2px; list-style:none; overflow-x:auto;
}
.gnb__games a{
  display:block; padding:8px 14px; font-size:13.5px; white-space:nowrap;
  color:rgba(255,255,255,.62); border-bottom:2px solid transparent;
}
.gnb__games a:hover{color:#fff}
.gnb__games a.on{color:#fff; font-weight:700; border-bottom-color:var(--accent)}