/* chungrim.me 팁 목록·팁 글 (2026-10-29, 홈은 제품 페이지 desk.css). /setup(desk.css)과 같은 체계: 바탕 #0A0A0A, 흰 글자, 빨강은 마침표 하나.
   모서리: 누르는 것은 알약·원, 사진은 8px. 계획 docs/plan-hub-2026-10-29.md */
:root {
  --bk: #0A0A0A; --bk2: #141416; --line: #2A2A2D; --wh: #FFFFFF;
  --sub: #A3A3A8; --dim: #6E6E74; --red: #E23B33;
  --pad: 20px; --max: 1040px;
  --out: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bk); }
body { background: var(--bk); color: var(--wh); font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif; font-size: 15px; line-height: 1.5; letter-spacing: -.01em; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
i { font-style: normal; color: var(--red); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.arr { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; flex: none; }
.wm path { fill: var(--wh); }
.wm .dot { fill: var(--red); }

/* 머리줄 */
.top-in { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.logo .wm { display: block; height: 22px; width: auto; }
.ig { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); font-size: 13px; font-weight: 600; }

/* 묶음 */
.grp { padding-top: 40px; scroll-margin-top: 8px; }
.grp-t { margin: 0 0 18px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.055em; }
.grp-n { margin-left: 8px; color: var(--dim); font-size: 14px; font-weight: 600; letter-spacing: 0; vertical-align: 6px; }

/* tips. 칸 */
.tips { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
.tp { display: flex; flex-direction: column; }
.tp-img { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--bk2); }
.tp-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--out); }
.tp-k { margin-top: 10px; color: var(--dim); font-size: 12px; font-weight: 600; }
.tp-t { margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.tp:active .tp-img img { transform: scale(.98); }

/* 알약(글 끝 '이 글에 나온 장비') */
.pill { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 15px 0 16px; border-radius: 999px; background: var(--wh); color: var(--bk); font-size: 14px; font-weight: 800; letter-spacing: -.03em; transition: transform 160ms var(--out); }
.gear:active .pill { transform: scale(.97); }

/* 끝 */
.end { margin-top: 64px; padding: 26px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.end-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.end-row a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
#gate { color: var(--dim); font-size: 13px; cursor: default; }

/* 팁 글 */
.art { max-width: 680px; margin: 0 auto; padding-top: 12px; }
.back { display: inline-block; font-size: 15px; font-weight: 800; letter-spacing: -.04em; padding: 6px 0; }
.a-cover { margin-top: 12px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--bk2); }
.a-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }   /* 4:5 사진의 위쪽(키·화면)을 살린다 */
.a-k { margin-top: 18px; display: flex; gap: 10px; color: var(--dim); font-size: 12px; font-weight: 600; }
.art h1 { margin-top: 6px; font-size: clamp(26px, 7.4vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.045em; }
.deck { margin-top: 10px; color: var(--sub); font-size: 15px; line-height: 1.6; }
.a-body { margin-top: 28px; color: #D9D9DD; font-size: 15.5px; line-height: 1.75; }
.a-body > * + * { margin-top: 14px; }
.a-body h2 { margin-top: 40px; color: var(--wh); font-size: 20px; font-weight: 800; line-height: 1.35; letter-spacing: -.035em; }
.a-body ul, .a-body ol { padding-left: 20px; }
.a-body li + li { margin-top: 4px; }
.a-body strong { color: var(--wh); }
.a-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; padding: 1px 5px; border-radius: 4px; background: var(--bk2); }
.cmd { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--bk2); }
.cmd pre { overflow-x: auto; padding: 14px 76px 14px 14px; -webkit-overflow-scrolling: touch; }
.cmd code { padding: 0; background: none; color: var(--wh); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }   /* 긴 명령은 줄바꿈(복사는 원문 그대로) */
.copy { position: absolute; top: 8px; right: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--wh); color: var(--bk); font-size: 12px; font-weight: 800; transition: transform 160ms var(--out); }
.copy:active { transform: scale(.96); }
.cmd.prompt code { font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif; font-size: 14.5px; line-height: 1.7; word-break: keep-all; }   /* AI 에게 보낼 문장은 글자체 그대로 */
.fig { margin: 22px 0 6px; }
.fig img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--bk2); }
.fig figcaption { margin-top: 8px; color: var(--dim); font-size: 13px; line-height: 1.5; }
/* 받는 아이콘 칸(10-30): 키처럼 검은 정사각 4열, 누르면 그 PNG. 아래 버튼은 ZIP 전부 */
.icons { margin: 22px 0 6px; }
.ic-grid { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ic-grid li + li { margin-top: 0; }
.ic { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #000; outline: 1px solid var(--line); outline-offset: -1px; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--out); }
.ic img { display: block; width: 100%; height: 100%; }
.ic:active { transform: scale(.96); }
.a-body a.dl { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 0 18px; height: 56px; border-radius: 10px; background: var(--wh); color: var(--bk); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--out); }
.dl:active { transform: scale(.98); }
.a-body a.dl-2 { margin-top: 8px; background: none; color: var(--wh); border: 1px solid var(--line); }
.dl-2 .dl-n { color: var(--dim); }
.fig-v { display: block; width: 100%; height: auto; border-radius: 8px; background: #000; }
.dl-t { font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; }
.dl-n { flex: 1; color: #5A5A60; font-size: 13px; font-weight: 600; }
.dl-i { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .ic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }   /* 20칸 = 4줄 */
.a-body a { color: var(--wh); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
.out { overflow-x: auto; padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--line); color: var(--sub); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.6; }
.note { padding: 12px 14px; border-left: 2px solid var(--line); background: var(--bk2); border-radius: 0 8px 8px 0; color: #C9C9CE; font-size: 14px; line-height: 1.65; }
.gear { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.gear-k { color: var(--dim); font-size: 12px; font-weight: 600; }
.gear-n { font-size: 15px; font-weight: 700; }
.gear .pill { align-self: flex-start; margin-top: 10px; }
.more { max-width: 680px; margin: 0 auto; }

@media (hover: hover) {
  .tp:hover .tp-img img { transform: scale(1.03); }
  .ig:hover, .end-row a:hover { color: var(--sub); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-img img, .pill, .copy { transition: none; }
}
@media (min-width: 700px) {
  :root { --pad: 32px; }
  .tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; }
  .grp-t { font-size: 48px; }
}
@media (min-width: 1000px) {
  .tips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 통계 창(© 누르면, stats.js). 흰 판이라 색을 여기서 되돌린다 */