/* chungrim.me/setup (2026-10-29) — 장비 목록. 인스타 @chungrim.me 프로필 링크에서 들어온다.
   사이트 체계를 검정으로 뒤집은 판: 바탕 #0A0A0A, 흰 글자, 빨강은 마침표 하나.
   모서리: 누르는 것은 알약·원(하이라이트), 사진은 8px. */
: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; }

/* 대가성 문구(11-03 쿠팡 반려 뒤): 쿠팡 기준은 "첫 부분에 표시 + 본문과 구별되는 색 또는 더 큰 글자".
   11-03 "빨간 띠는 너무 크고 진하다" → 따로 띠를 두지 않고 영상 위 맨 윗줄에 연한 빨강 글자로 얹는다(첫 화면에 보이되 조용히).
   내리면 .stuck 이 붙어 검은 헤더가 되어 끝까지 맨 위에 남는다. 히어로는 이 줄 밑으로 겹쳐 들어간다(margin-bottom 음수) */
.notice { position: sticky; top: 0; z-index: 12; margin-bottom: calc(-1 * var(--nh, 52px)); padding: 9px max(var(--pad), env(safe-area-inset-right)) 9px max(var(--pad), env(safe-area-inset-left)); color: #FF958D; font-size: 13.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; text-shadow: 0 1px 6px rgba(0,0,0,.5); border-bottom: 1px solid transparent; transition: background-color 200ms ease, border-color 200ms ease; }
.notice.stuck { background: var(--bk); border-bottom-color: var(--line); text-shadow: none; }   /* 반투명이면 밑의 제품 글자가 비쳐 문구와 겹쳐 보였다 */
.notice span { display: inline-block; }   /* 폰에서 두 줄이면 "일환으로," 뒤에서 끊기게(전엔 "이에 따른/일정액의"로 갈렸다) */

/* 히어로: 릴스 영상 + desksetup. 첫 화면 전체, 맨 윗줄은 쿠팡 문구가 겹쳐 앉는다(로고·링크는 그 밑, --nh 는 desk.js 가 잰다) */
.hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--bk); }
.hero-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 20%, rgba(10,10,10,0) 44%, rgba(10,10,10,.6) 64%, rgba(10,10,10,.88) 84%, var(--bk) 100%); pointer-events: none; }   /* 10-30 02:36 글자 묶음 뒤를 더 일찍·더 어둡게(선반 물건 위 글자가 산만했다) */
.hero-logo { position: absolute; z-index: 2; top: calc(var(--nh, 52px) + 14px); left: var(--pad); display: block; }
.wm { display: block; height: 22px; width: auto; }
/* 오른쪽 위 글자 링크 둘: contact.(아래 협업 칸) / tips.(팁 글). 10-29 17:42 "리퀴드 글라스 빼고 플랫하게" → 테두리·배경 없이 글자만 */
.hero-nav { position: absolute; z-index: 2; top: calc(var(--nh, 52px) + 8px); right: var(--pad); display: flex; gap: 18px; }
.hero-p { display: inline-flex; align-items: center; gap: 5px; height: 34px; color: var(--wh); font-size: 14px; font-weight: 800; letter-spacing: -.03em; transition: opacity 160ms ease; }
.hero-p i { font-style: normal; color: var(--red); }
.hero-p svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.to-top { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bk2); border: 1px solid var(--line); color: var(--wh);   /* 평평한 단색 원(10-29 17:42) */
  opacity: 0; transform: translateY(10px) scale(.92); pointer-events: none; transition: opacity 200ms ease, transform 240ms var(--out); }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:active { transform: scale(.94); }
.to-top svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.hero-p:active { opacity: .6; }
.wm path { fill: var(--wh); }
.wm .dot { fill: var(--red); }
/* 제목 묶음: 위 신뢰 문구 + desksetup.(10-30 02:22 제목을 72→112px 로 올림) */
.hero-head { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: calc(46px + env(safe-area-inset-bottom)); --tfs: clamp(54px, 16.4vw, 168px); }   /* 10-30 02:27 칩을 빼고 문구·제목·see all 을 한 왼쪽 줄로 */
/* 착시 맞춤(10-30 02:27 "카피가 왼쪽으로 쏠려 보인다"): 큰 제목 d 의 둥근 배는 잉크 끝보다 안쪽에 있는 것처럼 읽힌다 → 작은 글자 둘을 제목 크기의 3.5% 만큼 오른쪽으로 */
/* 10-30 02:36 "위계가 애매" → 역할마다 한 모양: 제목(거대) / 정보 글(작고 회색, 문구) / 누르는 글(14px 굵은 흰색: contact.·tips.·see all) */
.hero-k { padding-left: calc(var(--tfs) * .035); margin-bottom: 6px; color: var(--sub); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero-t { margin-left: -.04em; font-size: var(--tfs); font-weight: 800; line-height: .9; letter-spacing: -.065em; white-space: nowrap; }
.hero-t span { display: inline-block; }
.hero-t .dot { color: var(--red); }
/* 제목 밑 작은 see all ↓ : 목록으로 내려가기 */
.hero-more { margin-top: 14px; margin-left: calc(var(--tfs) * .035 - 2px); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 2px; color: var(--wh); font-size: 14px; font-weight: 800; letter-spacing: -.03em; flex: none; transition: opacity 160ms ease; }
.hero-more:active { opacity: .6; }
.hero-more svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }

.it .it-img { transition: opacity 160ms ease; }

/* 제품 목록 */
.list { max-width: var(--max); margin: 0 auto; padding: 26px var(--pad) 56px; }
/* 협업·협찬 제안 */
.collab { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); }
.cb-d { margin-top: -6px; color: var(--sub); font-size: 14px; line-height: 1.55; }
.cb-l { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.cb-b { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: var(--wh); font-size: 14px; font-weight: 800; letter-spacing: -.03em; transition: transform 160ms var(--out), background 160ms ease; }
.cb-en { margin-top: 2px; color: var(--dim); font-size: 13px; }
.cb-a { margin-top: 12px; color: var(--dim); font-size: 13px; -webkit-user-select: all; user-select: all; }
#contact { scroll-margin-top: calc(var(--nh, 62px) + 16px); }   /* 붙은 쿠팡 문구 띠 밑으로 */
.cb-b svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.cb-b:active { transform: scale(.97); background: rgba(255, 255, 255, .08); }
/* 묶음 줄: 10-29 17:42 "평평하고 심플하게" → 글자 넷 + 켜진 칸 밑 흰 줄(.hl-drop) 하나. 줄은 옆으로 미끄러지기만 한다 */
.hl { max-width: var(--max); margin: 0 auto; padding: 22px var(--pad) 14px; scroll-margin-top: var(--nh, 62px); }
.hl-in { position: relative; display: inline-flex; gap: 22px; border-bottom: 1px solid var(--line); }
.hl-b { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0; color: #8E8E94; font-size: 16px; font-weight: 800; letter-spacing: -.04em; transition: color 180ms ease; -webkit-tap-highlight-color: transparent; }
.hl-b i { font-style: normal; color: var(--red); }
.hl-b.on { color: var(--wh); }
.hl-b:focus-visible { outline: 2px solid var(--wh); outline-offset: 2px; }
.hl-drop { position: absolute; left: 0; bottom: -1px; width: 30px; height: 2px; background: var(--wh); transition: transform 220ms var(--out), width 220ms var(--out); }

/* 묶음 제목: 하이라이트 원과 같은 말(desk. game. tech.)을 크게 */
.grp { margin-bottom: 56px; }
.grp:last-child { margin-bottom: 0; }
.grp[hidden] { display: none !important; }
.grp-t { margin: 0 0 18px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.055em; }
.grp-t i { font-style: normal; color: var(--red); }
.grp-n { margin-left: 8px; color: var(--dim); font-size: 14px; font-weight: 600; letter-spacing: 0; vertical-align: 6px; }

/* 장비 칸: 폰 2열, 넓으면 3·4열 */
.grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
.it { position: relative; display: flex; flex-direction: column; min-width: 0; }
.it[hidden] { display: none !important; }
/* 홀수 개 묶음은 첫 칸을 넓게(폰 2열에서 마지막 줄이 한 칸만 남지 않게) */
.it.wide { grid-column: 1 / -1; }
.it.wide .it-img { aspect-ratio: 4 / 3; }
.it-img { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--bk2); }
.it-img img, .it-img video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 촬영본에 없는 물건: 사진 대신 하이라이트 표지처럼 글자 하나 */
.it-word { display: grid; place-items: center; border: 1px solid var(--line); }
.it-word span { font-size: clamp(22px, 7vw, 34px); font-weight: 800; letter-spacing: -.05em; }
.it-word i { font-style: normal; color: var(--red); }
.it-b { padding-top: 10px; display: flex; flex-direction: column; flex: 1; }
.it-k { color: var(--dim); font-size: 12px; font-weight: 600; }
.it-n { margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.it-o { margin-top: 2px; color: var(--dim); font-size: 12px; font-weight: 600; }
.it-w { margin-top: 6px; color: var(--sub); font-size: 13px; line-height: 1.45; }   /* 고른 이유 한 줄 */
/* get it. : 10-29 17:42 "평평하고 심플하게" → 테두리·배경 없는 글자 + 화살표. 카드 어디를 눌러도(사진·영상·제품명) 이 링크로 간다(::after 가 카드 전체를 덮음).
   🔴 .it-a 에 backdrop-filter·transform 을 주면 ::after 덮개가 버튼 안에 갇힌다 */
.it-a { position: static; margin-top: 14px; align-self: flex-end;   /* 10-29 17:51 오른쪽 끝, 화살표는 글자 오른쪽, 이유 글과 조금 띄움 */ display: inline-flex; align-items: center; gap: 5px; height: 26px; color: #CFCFD4; font-size: 13px; font-weight: 700; letter-spacing: -.02em; -webkit-tap-highlight-color: transparent; transition: color 160ms ease; }
.it-a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.it-v { pointer-events: none; }   /* 영상이 터치를 먹지 않게 */
.it:active .it-a { color: var(--wh); }
.it:active .it-img { opacity: .85; }
.it-a i { font-style: normal; color: var(--red); }
.it-a svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.it-img { transition: opacity 160ms ease; }
.it-a.off { color: var(--dim); pointer-events: none; }

/* 끝 */
.end { max-width: var(--max); margin: 0 auto; padding: 28px var(--pad) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.end-ig { font-weight: 700; }
.end-home { color: var(--dim); }
/* 통계 창(© 누르면, stats.js). 흰 판이라 색을 여기서 되돌린다 */

/* 움직임: 첫 화면에 한 번(글자 떠오름), 칸은 화면에 들어올 때 한 번 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-t span { opacity: 0; transform: translateY(28%); animation: rise 720ms var(--out) both; animation-delay: calc(120ms + var(--i) * 38ms); }
  .hero-k { opacity: 0; transform: translateY(8px); animation: rise 620ms var(--out) 520ms both; }
  .hero-t .dot { animation-name: drop; animation-duration: 620ms; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
  .it { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--out), transform 520ms var(--out); }
  .it.in { opacity: 1; transform: none; }
  .grid.swap .it { transition-duration: 0ms; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-60%); } 100% { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  :root { --pad: 32px; }
  .notice { font-size: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; }
  .it.wide { grid-column: auto; }
  .it.wide .it-img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 넓은 화면: 세로 영상은 오른쪽 기둥, 글자는 왼쪽 */
  .hero-v { left: auto; right: 6vw; width: auto; aspect-ratio: 9 / 16; }
  .hero::after { background: linear-gradient(to right, var(--bk) 0%, rgba(10,10,10,.2) 60%, rgba(10,10,10,0) 100%), linear-gradient(to bottom, rgba(10,10,10,0) 70%, var(--bk) 100%); }
  .hero-head { bottom: 56px; --tfs: 10.5vw; }   /* 12vw 는 빨간 점이 영상 기둥에 닿아서 줄임(10-30) */
  .hero-k { font-size: 15px; }
}

/* 미리보기 전용: 모델명 확인이 필요한 항목 표시(공개 전에 desk.js 의 check 를 지우면 사라진다) */
.chk { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(226,59,51,.16); color: #FF8A84; font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 2px; }

/* 11-04 새탈 광고 칸(desk.js 가 첫 묶음 뒤에 끼움): 칸 전체가 링크. 왼쪽 세로 게임 영상, 오른쪽 로고·한 줄·설명·들어가기.
   사이트 문법 그대로: 짙은 칸(#141416)·가는 테두리·사진 8px·누르는 글은 14px 800 흰색, 빨강은 쓰지 않는다(새탈 로고 색 그대로) */
.ad { margin: -8px 0 56px; }
.ad-in { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bk2); color: var(--wh); transition: transform 160ms var(--out), border-color 160ms ease; }
.ad-in:active { transform: scale(.985); }
.ad-v { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; background: #000; }
.ad-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-t { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-right: 4px; }
.ad-k { color: var(--sub); font-size: 12px; font-weight: 600; letter-spacing: -.02em; }
.ad-logo { width: min(100%, 132px); height: auto; margin: 10px 0 12px -4px; }
.ad-h { font-size: 17px; font-weight: 800; line-height: 1.35; letter-spacing: -.035em; }
.ad-d { margin-top: 8px; color: var(--sub); font-size: 13px; line-height: 1.5; }
.ad-b { display: inline-flex; align-items: center; gap: 7px; height: 38px; margin-top: 16px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.ad-b svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; }
@media (hover: hover) { .ad-in:hover { border-color: rgba(255, 255, 255, .22); } .ad-in:hover .ad-b { background: rgba(255, 255, 255, .06); } }
@media (min-width: 760px) {
  .ad-in { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; padding: 16px; }
  .ad-logo { width: 200px; margin: 14px 0 18px -6px; }
  .ad-h { font-size: 28px; }
  .ad-d { max-width: 420px; font-size: 15px; }
  .ad-b { height: 42px; margin-top: 24px; padding: 0 18px; }
}