html{scrollbar-gutter:stable}
/* ============================================================
   dogdrip.com — 라이트 테마 v2 (2026-07-03)
   포인트 컬러: Emerald Green (#059669 / #047857)
   가독성 기준: 본문 15px+, 메타 13px+, 대비 WCAG AA 이상
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f6f7f9;        /* 페이지 배경 */
  --card:#ffffff;      /* 카드/리스트 배경 */
  --bd:#e6e9ed;        /* 경계선 */
  --bd2:#d8dde3;
  --tx:#1b1f24;        /* 본문 텍스트 */
  --mu:#5c6673;        /* 보조 텍스트 */
  --ht:#626c79;        /* 힌트 텍스트 */
  --ac:#047857;        /* 포인트 (에메랄드) */
  --ac-deep:#047857;   /* 포인트 진함 (작은 글자용) */
  --ac-bg:#e8f7f0;     /* 포인트 연배경 */
  --red:#dc2626;
  --red-bg:#fdecec;
  --amber:#b45309;
  --amber-bg:#fdf3e3;
  --r:12px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);
  font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}

/* ── 헤더 ─────────────────────────────────── */
.hdr{background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:100}
.hdr-in{max-width:860px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo svg{width:30px;height:30px;border-radius:8px}
.logo-txt{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--tx)}
.logo-dom{font-size:13px;font-weight:600;color:var(--ht);margin-left:3px}
.hdr-links{margin-left:auto;display:flex;gap:4px}
.hdr-links a{font-size:14px;font-weight:600;color:var(--mu);padding:7px 11px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.hdr-links a:hover{background:var(--bg);color:var(--tx)}
.hdr-links a.lnk-cpn{color:#7c3aed;font-weight:700}
.hdr-links a.lnk-cpn:hover{background:#f5f3ff;color:#6d28d9}

/* ── 필터 칩 ──────────────────────────────── */
.chips{background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:56px;z-index:99}
.chips-in{max-width:860px;margin:0 auto;padding:9px 16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips-in::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--bd2);background:var(--card);color:var(--mu);
  font-size:14px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ac);color:var(--ac-deep)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.chip .n{font-weight:700;margin-left:4px;opacity:.75;font-size:13px}

/* ── 히어로 (한 줄 요약) ──────────────────── */
.hero{padding:26px 0 6px}
.hero h1{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.hero h1 b{color:var(--ac-deep)}
.hero-sub{margin-top:6px;font-size:14px;color:var(--mu)}
.hero-sub strong{color:var(--ac-deep);font-weight:700}

/* ── 섹션 ─────────────────────────────────── */
.sec{margin:22px 0}
.sec-head{display:flex;align-items:center;gap:9px;padding:0 2px 10px}
.sec-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sec-title{font-size:18px;font-weight:800;letter-spacing:-.01em}
.sec-cnt{font-size:13.5px;font-weight:700;color:var(--ac-deep);background:var(--ac-bg);
  padding:2px 9px;border-radius:999px}
.sec-more{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--mu)}
.sec-more:hover{color:var(--ac-deep)}
.sec.urgent .sec-cnt{color:var(--red);background:var(--red-bg)}

/* ── 리스트 (핵심 UI) ─────────────────────── */
.list{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:13px;padding:12px 15px;border-bottom:1px solid var(--bd);transition:background .1s}
.row:last-child{border-bottom:none}
.row:hover{background:#fafbfc}
.row-ico{width:52px;height:52px;border-radius:11px;object-fit:cover;flex-shrink:0;background:var(--bg);border:1px solid var(--bd)}
.row-ph{display:flex;align-items:center;justify-content:center;font-size:22px}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-title{font-size:15.5px;font-weight:650;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
.row-meta{font-size:13px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-meta .star{color:#b45309;font-weight:600}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.row-orig{font-size:13px;color:var(--ht);text-decoration:line-through;white-space:nowrap}
.row-free{font-size:13.5px;font-weight:800;color:var(--ac-deep);background:var(--ac-bg);
  padding:2px 10px;border-radius:999px;white-space:nowrap}
.row-until{font-size:13px;font-weight:600;color:var(--mu);white-space:nowrap}
.row-until.u-amber{color:var(--amber)}
.row-until.u-red{color:var(--red);font-weight:700}
.row.expired{opacity:.45}
.list-more{display:block;text-align:center;padding:11px;font-size:14px;font-weight:600;color:var(--mu);
  border-top:1px solid var(--bd);cursor:pointer;background:var(--card);width:100%;border-left:0;border-right:0;border-bottom:0}
.list-more:hover{color:var(--ac-deep);background:#fafbfc}

/* 예고(다가오는 무료) */
.row.soon{background:#fbfcfd}
.row.soon .row-free{color:var(--mu);background:var(--bg)}
.soon-date{font-size:13px;font-weight:700;color:var(--ac-deep)}
.soon-dday{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe;font-size:12px;font-weight:800;padding:2px 7px;border-radius:5px;white-space:nowrap}

/* ── 지난주 무료 ──────────────────────────── */
.lastweek .row-free{color:var(--ht);background:var(--bg);text-decoration:none}

/* ── 방명록 ───────────────────────────────── */
.gb-sec{margin:34px 0 10px}
.gb-alert{padding:10px 14px;border-radius:9px;font-size:14px;margin-bottom:12px}
.gb-alert-err{background:var(--red-bg);color:var(--red)}
.gb-alert-ok{background:var(--ac-bg);color:var(--ac-deep)}
.gb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.gb-head-left{display:flex;align-items:center;gap:9px}
.gb-count{font-size:13.5px;color:var(--mu)}
.gb-btn-write{background:var(--ac);color:#fff;border:none;padding:8px 15px;border-radius:8px;
  font-size:14px;font-weight:700;cursor:pointer}
.gb-btn-write:hover{background:var(--ac-deep)}
.gb-admin-bar{display:none;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--mu)}
.gb-write{display:none;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:15px;margin-bottom:14px}
.gb-write.open{display:block}
.gb-input,.gb-textarea{width:100%;background:var(--bg);border:1px solid var(--bd2);border-radius:8px;
  color:var(--tx);font-size:14.5px;font-family:inherit;padding:9px 12px}
.gb-input:focus,.gb-textarea:focus{outline:none;border-color:var(--ac)}
.gb-textarea{margin-top:8px;min-height:74px;resize:vertical}
.gb-char{font-size:12.5px;color:var(--ht);text-align:right;margin-top:4px}
.gb-btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.gb-btn-ok{background:var(--ac);color:#fff;border:none;padding:8px 17px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer}
.gb-btn-cancel{background:none;border:1px solid var(--bd2);color:var(--mu);padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer}
.gb-row{display:flex;gap:8px;margin-bottom:8px}
.gb-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--r);overflow:hidden;font-size:14.5px}
.gb-table th{font-size:12.5px;font-weight:600;color:var(--ht);text-align:left;
  padding:9px 13px;border-bottom:1px solid var(--bd);background:#fafbfc}
.gb-table td{padding:10px 13px;border-bottom:1px solid var(--bd);vertical-align:top;color:var(--mu);word-break:break-word}
.gb-table tr:last-child td{border-bottom:none}
.gb-table .num{width:52px;color:var(--ht);font-size:13px}
.gb-table .nick{width:110px;font-weight:700;color:var(--tx);white-space:nowrap}
.gb-table .date{width:90px;color:var(--ht);font-size:13px;white-space:nowrap}
.gb-table .del{width:52px}
.gb-num{color:var(--ht);font-size:13px}
.gb-nick{font-weight:700;color:var(--tx)}
.gb-msg{color:var(--mu)}
.gb-date{color:var(--ht);font-size:13px}
.gb-del-btn{background:none;border:none;color:var(--red);font-size:12.5px;cursor:pointer}
.gb-empty{padding:26px;text-align:center;color:var(--ht);font-size:14px;
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r)}
.gb-pager{display:flex;gap:5px;justify-content:center;margin-top:13px}
.gb-pager a{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd2);border-radius:8px;font-size:13.5px;color:var(--mu);cursor:pointer;background:var(--card)}
.gb-pager a:hover{border-color:var(--ac);color:var(--ac-deep)}
.gb-pager a.cur{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:700}

/* ── 푸터 ─────────────────────────────────── */
footer{max-width:860px;margin:36px auto 0;padding:22px 16px 42px;border-top:1px solid var(--bd);
  font-size:13.5px;color:var(--ht);text-align:center;line-height:2}
footer a{color:var(--mu)}
footer a:hover{color:var(--ac-deep)}

.empty{padding:34px;text-align:center;color:var(--ht);background:var(--card);
  border:1px solid var(--bd);border-radius:var(--r)}

/* ── 모바일 ───────────────────────────────── */
@media (max-width:640px){
  body{font-size:14.5px}
  .hdr-in{height:52px}
  .chips{top:52px}
  .logo-txt{font-size:18px}
  .hdr-links a{padding:6px 8px;font-size:13.5px}
  .hdr-links{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .hdr-links::-webkit-scrollbar{display:none}
  .logo{flex-shrink:0}
  .logo-dom{display:none}
  .hero h1{font-size:20px}
  .row{gap:11px;padding:11px 12px}
  .row-ico{width:46px;height:46px;border-radius:10px}
  .row-title{font-size:15px}
  .row-side{gap:3px}
  .gb-table .nick{width:80px}
  .gb-table .num,.gb-table .del{width:40px}
}

/* 화면에는 숨기고 스크린리더·검색엔진에는 노출 (SEO용 h1) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NEW 배지 + 다운로드 수 (2026-07-03) */
.badge-new{display:inline-block;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;
  padding:1px 7px;border-radius:5px;margin-right:7px;vertical-align:2px;letter-spacing:.03em}
.row-meta .dl{color:var(--ac-deep);font-weight:600}

/* 섹션 바로가기 바 (2026-07-03) */
.jumpbar{display:none;border-top:1px solid var(--bd);background:var(--card)}
.jumpbar.show{display:block}
.jumpbar-in{max-width:960px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.jump-lb{font-size:12px;color:var(--ht);flex-shrink:0}
.jumpbar-in a{flex-shrink:0;font-size:13px;color:var(--tx);text-decoration:none;background:var(--bg);
  border:1px solid var(--bd);border-radius:15px;padding:4px 12px;white-space:nowrap}
.jumpbar-in a:hover{border-color:var(--ac);color:var(--ac-deep)}
.jumpbar-in a b{color:var(--ac-deep);font-weight:700}
section.sec{scroll-margin-top:150px}
@media (max-width:640px){.jumpbar-in{padding:7px 14px}section.sec{scroll-margin-top:140px}}

/* 무료 플레이(구독·체험) 칩 — 소장과 구분 (2026-07-03) */
.row-free.row-play{background:#eef4ff;color:#1d4ed8;border:1px solid #d3e0fb}

/* PC 게임 할인 — 판매가·할인율 칩 (2026-07-03) */
.row-price{color:var(--tx);font-weight:800;font-size:14px;white-space:nowrap}
/* Phase 2 배지 (2026-07-03): 역대최저·리뷰·한국어 */
.row-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.row-low{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;font-size:11px;font-weight:800;padding:2px 7px;border-radius:5px;white-space:nowrap}
.row-rev{background:#f8fafc;color:#535f6e;border:1px solid #e2e8f0;font-size:12px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
.row-rev.hi{background:#f0fdf4;color:#047857;border-color:#bbf7d0}
.row-rev.lo{background:#fafafa;color:#626c79;border-color:#e6e9ed}
.row-kr{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:12px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
.row-disc{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;font-size:12px;font-weight:800;
  padding:3px 9px;border-radius:6px;white-space:nowrap}