/* 저잣거리 화면. 값은 general-design-system 토큰(neutral 테마)만 쓴다.
   결정 카드
   누가     : 새로 나온 개인 개발 메타버스·게임·앱을 둘러보는 사람, 자기 것을 알리려는 개인 개발자, AI 에이전트
   끝낼 일  : 지금 사람이 몰린 곳을 골라 들어가기
   주 행동  : 카드 누르기 → 상세의 「열기」
   화면 종류: 실제 콘텐츠 격자(썸네일이 주인공). 첫 화면 없이 목록부터
   테마     : neutral(강조 색 없음). 초록 점은 실제 동시 접속이 있을 때만
   기본값에서 바꾼 것: 지금 접속 1위 카드만 두 칸(무게가 다르면 크기를 다르게, DESIGN 14장 4번)
   2026-11-02: 첫 화면에 더 많이 — 모음·순위는 넓은 폭(1440), 카드 최소 168px(1280 화면 6열), 휴대폰 2열, 이름·정보 한 줄, 0 인 숫자 줄 없음 */

/* 코드·키·이메일은 고정폭으로(토큰에 고정폭 역할이 없어 여기서 정한다) */
:root { --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* 메인 문구의 갈아끼우는 단어 밑 형광펜 한 가지만 색을 쓴다(neutral 테마에 강조 색이 없어 여기서 정한다) */
:root { --mark: rgba(255, 214, 64, 0.55); } /* check-allow: CL3 메인 문구 형광펜 색 하나 */
body { background: var(--bg-canvas); }
main { padding-block: var(--space-xl) var(--space-5xl); min-height: 60vh; }

.logo { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 800; font-size: var(--size-xl); letter-spacing: -0.03em; text-decoration: none; color: var(--text-primary); }
.logo__mark { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); }
.site-header__inner { flex-wrap: wrap; row-gap: 0; }
.nav { display: flex; gap: var(--space-lg); font-weight: 600; font-size: var(--type-label-sm-size); }
.nav a { text-decoration: none; color: var(--text-secondary); padding-block: var(--space-sm); }
.nav a[aria-current="page"] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--line-strong); }
@media (max-width: 719px) {
  .nav { order: 3; width: 100%; overflow-x: auto; gap: var(--space-md); scrollbar-width: none; }
  .who .btn { min-height: 36px; padding-inline: var(--space-sm); }
}
@media (min-width: 720px) { .nav { margin-right: auto; margin-left: var(--space-xl); } }
.btn--kakao { background: #fee500; color: #191919; } /* check-allow: CL3 카카오 로그인 버튼 색은 카카오 디자인 가이드 고정값 */

body[data-page="home"], body[data-page="top"] { --container: 1440px; }
body[data-page="home"] main, body[data-page="top"] main { padding-top: var(--space-lg); }
/* 메인 문구: 첫 화면(거르지 않은 모음)에만. 목록이 주인공이라 높이를 낮게 */
.pitch { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-xl); margin-bottom: var(--space-md); }
.pitch__text { display: grid; gap: var(--space-2xs); min-width: 0; }
.pitch__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.5rem); line-height: 1.2; letter-spacing: -0.035em; word-break: keep-all; }
.pitch__sub { margin: 0; font-size: var(--type-body-size); font-weight: 600; color: var(--text-secondary); word-break: keep-all; }
.pitch__count { color: var(--text-primary); white-space: nowrap; }
.pitch__count .num { font-family: var(--font-numeric); font-weight: 800; font-variant-numeric: tabular-nums; }
/* 정보 수정 요청: 머리글 「올리기」보다 한 단계 낮은 버튼. 문구 줄 오른쪽 끝 */
.fix-btn { flex: none; }
.rot { display: inline-grid; vertical-align: bottom; height: 1.2em; overflow: hidden; padding-inline: 0.06em; background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); transition: width 450ms cubic-bezier(.2, .8, .2, 1); }
.rot__w { grid-area: 1 / 1; justify-self: start; white-space: nowrap; line-height: 1.2em; transition: transform 500ms cubic-bezier(.2, .8, .2, 1), opacity 500ms; }
.rot__w.is-wait { transform: translateY(100%); opacity: 0; }
.rot__w.is-out { transform: translateY(-100%); opacity: 0; }

.intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.intro__text { display: grid; gap: var(--space-2xs); min-width: 0; }
.intro__text p { margin: 0; }
.intro__title { margin: 0; font-family: var(--font-display); font-size: var(--size-lg); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
@media (min-width: 720px) { .intro__title { font-size: var(--size-2xl); } }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg); margin-bottom: var(--space-md); }
/* 손가락으로 누르는 기기: 칩·머리 버튼을 44px 로 */
@media (pointer: coarse) { .chip, .who .btn { min-height: 44px; height: auto; } }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chips a.chip { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: var(--type-label-sm-size); }
.chips a.chip[aria-current="true"] { background: var(--action); color: var(--action-on); border-color: var(--action); }
.chip .num { font-family: var(--font-numeric); font-weight: 600; opacity: 0.72; }
.sorts { display: flex; gap: var(--space-md); font-size: var(--type-label-sm-size); font-weight: 600; }
.sorts a { text-decoration: none; color: var(--text-secondary); padding-block: var(--space-xs); }
.sorts a[aria-current="true"] { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.search { margin-left: auto; width: min(100%, 280px); }
.search .input { min-height: var(--control-sm); }
@media (max-width: 719px) { .search { flex: 1 1 140px; width: auto; margin-left: 0; } }

/* 카드 격자 */
.grid { list-style: none; padding: 0; display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
@media (max-width: 479px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); } }
@media (min-width: 900px) { .card--big { grid-column: span 2; grid-row: span 2; } .card--big .card__name { font-size: var(--type-title-2-size); white-space: normal; } }
.card__link { display: grid; gap: 6px; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--radius-media); }
.card__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.card__thumb { display: grid; place-items: center; aspect-ratio: 1200 / 630; border-radius: var(--radius-media); overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--line-subtle); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__thumb { transition: transform 300ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms cubic-bezier(.2, .8, .2, 1); }
/* 떠오르는 카드(M13): 마우스가 있는 기기에서만 썸네일이 4px 뜨고 그림자가 생긴다(확대는 쓰지 않는다) */
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .card__thumb { transform: translateY(-4px); box-shadow: 0 10px 24px -12px rgba(33, 29, 29, 0.35); }
  .card__link:hover .card__name { text-decoration: underline; text-underline-offset: 0.2em; }
}
.card__link:active .card__thumb { transform: scale(0.98); }
/* 더 불러온 카드는 순서대로 떠오른다 */
.card--enter { animation: card-in 420ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.live__dot { animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) {
  .rot, .rot__w, .card__thumb { transition: none; }
  .card--enter, .live__dot { animation: none; }
}
/* aspect-ratio 가 없는 브라우저(사파리 14 이하): 높이를 비율로 잡는다 */
@supports not (aspect-ratio: 1 / 1) {
  .card__thumb, .item__thumb, .rank__thumb { position: relative; height: 0; padding-top: 52.5%; }
  .card__thumb > *, .item__thumb > *, .rank__thumb > * { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; }
  .pick__stage { height: 0; padding-top: 56.25%; }
  .pick__video, .pick__img, .pick__host { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
.card__host { font-family: var(--font-numeric); font-weight: 700; color: var(--text-tertiary); padding: var(--space-md); text-align: center; overflow-wrap: anywhere; }
/* 메타버스 카드 한 줄 설명(items.oneliner, 24자 안). 카드 폭이 좁으면 두 줄로 접히므로 두 줄 높이를 잡아 같은 줄 카드의 아래 정보 높이를 맞춘다 */
.card__line { font-size: var(--type-caption-size); line-height: 1.45; min-height: 2.9em; color: var(--text-secondary); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__name { font-weight: 700; font-size: var(--type-body-sm-size); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__meta, .card__stats { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); font-size: var(--type-caption-size); color: var(--text-secondary); }
.card .card__meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .card__meta .tag { margin-right: var(--space-2xs); }
.card__meta span + span::before, .card__stats > span + span::before { content: "·"; margin-right: var(--space-xs); color: var(--text-tertiary); }
.card .card__meta span + span::before { margin-inline: var(--space-2xs); }
.card__stats { font-variant-numeric: tabular-nums; }
.live { color: var(--text-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }
.more { display: flex; justify-content: center; margin-top: var(--space-2xl); }

/* 순위 */
.rank { list-style: none; padding: 0; border-top: 1px solid var(--line-default); }
.rank__row { display: grid; grid-template-columns: 2.25rem 112px minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--line-subtle); text-decoration: none; color: inherit; }
.rank__no { font-family: var(--font-numeric); font-weight: 800; font-size: var(--size-xl); text-align: center; }
.rank__thumb { aspect-ratio: 1200 / 630; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-sunken); }
.rank__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rank__body { display: grid; gap: 2px; min-width: 0; }
.rank__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank__nums { grid-column: 3; display: flex; flex-wrap: wrap; gap: 0 var(--space-md); font-size: var(--type-caption-size); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rank__nums b { color: var(--text-primary); }
@media (min-width: 720px) { .rank__row { grid-template-columns: 2.5rem 144px minmax(0, 1fr) auto; } .rank__nums { grid-column: 4; } }
@media (hover: hover) { .rank__row:hover .rank__name { text-decoration: underline; } }
.badge-preview { display: block; height: 28px; width: auto; margin-block: var(--space-2xs); }

/* 상세 */
.back { margin-bottom: var(--space-md); font-size: var(--type-label-sm-size); }
.back a { color: var(--text-secondary); }
.item__top { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .item__top { grid-template-columns: 7fr 5fr; align-items: start; } }
.item__thumb { margin: 0; display: grid; place-items: center; aspect-ratio: 1200 / 630; border-radius: var(--radius-media); overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--line-subtle); }
.item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.item__nums { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; }
.item__nums dt { font-size: var(--type-caption-size); color: var(--text-secondary); }
.item__nums dd { margin: 0; font-family: var(--font-numeric); font-size: var(--type-title-2-size); font-weight: 700; letter-spacing: -0.02em; }
.item__actions .btn[aria-pressed="true"] { background: var(--action); color: var(--action-on); border-color: var(--action); }
.item__summary { max-width: var(--measure); }
.credit, .beta-note { font-size: var(--type-body-sm-size); color: var(--text-secondary); overflow-wrap: anywhere; }
.credit a, .beta-note a { color: var(--text-primary); }
.card__meta .tag + span::before { content: none; }
.owner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line-subtle); font-size: var(--type-body-sm-size); }
.block { margin-top: var(--space-3xl); display: grid; gap: var(--space-md); max-width: 760px; }
.notes, .comments { list-style: none; padding: 0; display: grid; }
.notes > li, .comments > li { padding-block: var(--space-md); border-top: 1px solid var(--line-subtle); display: grid; gap: var(--space-2xs); }
.notes__head, .comments__head { font-size: var(--type-body-sm-size); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; }
.ai, .tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 18px; padding-inline: 6px; border-radius: var(--radius-xs); border: 1px solid var(--line-default); color: var(--text-secondary); vertical-align: middle; }
.tag { background: var(--bg-sunken); border-color: transparent; color: var(--text-primary); }
.tag--trend { background: var(--accent); color: var(--accent-on); }
.tag--ad { background: transparent; border-color: var(--text-primary); color: var(--text-primary); }
.report { margin-top: var(--space-2xl); }
.report .btn--text { color: var(--text-tertiary); font-size: var(--type-caption-size); }

/* 품앗이 */
.beta-list { list-style: none; padding: 0; border-top: 1px solid var(--line-default); }
.beta-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--line-subtle); text-decoration: none; color: inherit; }
.beta-row__name { font-weight: 700; }
.beta-row__meta { grid-column: 1; font-size: var(--type-caption-size); color: var(--text-secondary); }
.beta-row__count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-numeric); font-weight: 700; }
.beta-row .meter { grid-column: 1 / -1; height: 4px; }
@media (hover: hover) { .beta-row:hover .beta-row__name { text-decoration: underline; } }
.beta .item__nums { margin-block: var(--space-lg); }
.reward { max-width: 760px; display: grid; gap: var(--space-2xs); }
.tester { margin-top: var(--space-xs); }

/* 폼·문서 */
.shell { max-width: 640px; display: grid; gap: var(--space-xl); }
.form { max-width: 640px; }
.thumb-preview { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-media); }
.select { appearance: auto; }
.codeline, pre, .code { display: block; font-family: var(--font-mono); font-size: 13px; background: var(--bg-sunken); border-radius: var(--radius-sm); padding: var(--space-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
.methods { padding-left: 1.2em; }
.methods li { display: grid; gap: var(--space-2xs); }
.ok { color: var(--positive); font-weight: 700; }
.error { color: var(--negative); font-weight: 600; }
.email { font-family: var(--font-mono); font-size: 13px; }
.doc { max-width: 720px; display: grid; gap: var(--space-md); }
.doc h2 { margin-top: var(--space-lg); }
.doc ul { padding-left: 1.2em; display: grid; gap: var(--space-2xs); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--type-caption-size); word-break: keep-all; overflow-wrap: anywhere; }
.doc th, .doc td { padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--line-subtle); text-align: left; vertical-align: top; }
.doc th { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
/* 휴대폰에서 칸이 좁아 낱말 중간에서 끊기지 않게: 표는 최소 폭을 두고 옆으로 밀어 본다 */
.doc .table-scroll table { min-width: 640px; overflow-wrap: normal; }
.site-footer a { color: inherit; }
.btn[aria-disabled="true"] { opacity: 0.5; }
@media (max-width: 719px) { .item__actions { display: grid; grid-template-columns: 1fr 1fr; } }
/* 상위 노출 홍보 결제 창 */
.pay { display: grid; margin: 0; border-top: 1px solid var(--line-subtle); }
.pay > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--line-subtle); }
.pay dt { font-size: var(--type-body-sm-size); color: var(--text-secondary); }
.pay dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pay dd.code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--type-caption-size); word-break: break-all; }
.pay s { color: var(--text-tertiary); }
.pay__off dd { color: var(--accent-text, var(--accent)); font-weight: 600; }
.pay__total { border-bottom: 0 !important; }
.pay__total dt { color: var(--text-primary); font-weight: 700; }
.pay__total dd { font-family: var(--font-numeric); font-size: var(--type-title-2-size); font-weight: 800; letter-spacing: -0.02em; }
.pay__hours { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pay__hours .chip { font-weight: 600; font-size: var(--type-label-sm-size); color: var(--text-primary); background: transparent; cursor: pointer; }
.pay__hours .chip[aria-checked="true"] { background: var(--action); color: var(--action-on); border-color: var(--action); }

/* 처음 화면 맨 위 큐레이션(요즘 뜨는 곳 TOP 10·최신 TOP 10 … 컨셉 탭). 큰 칸은 실제 접속 영상이나 썸네일 3초(폭 720px까지, 그 아래 목록이 너무 밀리지 않게), 옆은 1~10위 이름.
   1100px 이상은 영상 옆 목록(1360px 이상은 두 줄), 그보다 좁으면 영상 아래 가로 목록. 목록 높이는 영상 높이에 맞춘다 */
.pick { margin-bottom: var(--space-xl); }
.pick__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 0 var(--space-md); border-bottom: 1px solid var(--line-subtle); }
.pick__title { margin: 0; font-size: var(--type-title-3-size); font-weight: 800; letter-spacing: -0.02em; }
/* 탭 줄(2026-11-03 취향별 8개): 글자는 본문 크기, 고른 탭은 아래 2px 줄. 줄이 넘치면 가로로 밀고, 더 있는 쪽 끝을 흐리게(디자인 지침 2.6) */
.pick__tabs { display: flex; gap: var(--space-lg); min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--space-md); }
.pick__tabs::-webkit-scrollbar { display: none; }
.pick__tabs.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); } /* check-allow: CL3 가림 마스크(색 아님) */
.pick__tabs.is-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); } /* check-allow: CL3 가림 마스크(색 아님) */
.pick__tabs.is-more-start.is-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); } /* check-allow: CL3 가림 마스크(색 아님) */
.pick__tab { flex: none; padding: var(--space-sm) 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--type-label-size); font-weight: 700; letter-spacing: -0.01em; color: var(--text-tertiary); white-space: nowrap; cursor: pointer; }
.pick__tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.pick__tab:focus-visible, .pick__more:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
@media (hover: hover) { .pick__tab:hover { color: var(--text-primary); } }
.pick__more { flex: none; padding-block: var(--space-sm); font-size: var(--type-label-sm-size); font-weight: 700; color: var(--text-secondary); text-decoration: none; }
@media (hover: hover) { .pick__more:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; } }
.pick__body[hidden] { display: none; }
.pick__body { display: grid; gap: var(--space-md); }
@media (min-width: 1100px) {
  .pick__body { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); }
  .pick .pick__list { height: 0; min-height: 100%; overflow: hidden; }
}
@media (min-width: 1360px) { .pick .pick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; column-gap: var(--space-sm); } }
.pick__stage { position: relative; display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--bg-sunken); color: #fff; text-decoration: none; }
.pick__stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.pick__video, .pick__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick__video[hidden], .pick__img[hidden] { display: none; }
.pick__host { display: grid; place-items: center; height: 100%; padding: var(--space-md); font-family: var(--font-numeric); font-weight: 700; color: var(--text-tertiary); text-align: center; overflow-wrap: anywhere; }
/* 영상 위 글자: 아래쪽만 어둡게 깔아 읽히게(영상 색과 상관없이 흰 글자) */
.pick__cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: baseline; gap: var(--space-sm); padding: var(--space-2xl) var(--space-md) var(--space-md); background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); } /* check-allow: CL3 영상 위 글자 받침 그림자 */
.pick__rank { font-family: var(--font-numeric); font-size: var(--type-title-1-size); font-weight: 800; line-height: 1; }
.pick__capname { font-size: var(--type-title-3-size); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick__bar { position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255, 255, 255, 0.25); } /* check-allow: CL3 영상 진행 막대 바탕 */
.pick__bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); } /* check-allow: CL3 영상 진행 막대 */
.pick.is-run .pick__bar i { animation: pick-bar 3s linear both; }
.pick.is-hold .pick__bar i, .pick.is-paused .pick__bar i { animation-play-state: paused; }
@keyframes pick-bar { to { transform: scaleX(1); } }
.pick__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); }
.pick__list a { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); align-content: center; column-gap: var(--space-xs); height: 100%; padding: 0 var(--space-sm); line-height: 1.3; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary); }
.pick__list a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pick__no { grid-row: span 2; font-family: var(--font-numeric); font-size: var(--size-lg); font-weight: 800; text-align: center; color: var(--text-tertiary); }
.pick__name { font-size: var(--type-body-sm-size); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick__line { font-size: var(--type-caption-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick__list a[aria-current] { background: var(--bg-sunken); }
.pick__list a[aria-current] .pick__no { color: var(--text-primary); }
@media (hover: hover) { .pick__list a:hover .pick__name { text-decoration: underline; text-underline-offset: 0.2em; } }
@media (max-width: 1099px) {
  .pick__list { display: flex; grid-template-rows: none; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin-top: calc(var(--space-xs) * -1); }
  .pick__list li { flex: none; }
  .pick__list a { display: flex; align-items: center; gap: var(--space-2xs); height: var(--control-sm); padding-inline: var(--space-md); border: 1px solid var(--line-subtle); border-radius: var(--radius-full); }
  .pick__no { font-size: var(--type-label-sm-size); }
  .pick__name { font-size: var(--type-label-sm-size); }
  .pick__line { display: none; }
  .pick__list a[aria-current] { background: var(--bg-inverse); border-color: var(--bg-inverse); }
  .pick__list a[aria-current] .pick__no, .pick__list a[aria-current] .pick__name { color: var(--text-inverse); }
  .pick__rank { font-size: var(--type-title-2-size); }
  .pick__capname { font-size: var(--type-body-size); }
}
@media (max-width: 479px) { .pick__tabs { gap: var(--space-md); } }
@media (pointer: coarse) { .pick__tab, .pick__more { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pick__bar { display: none; } }

/* 게시판(2026-11-02) */
.board-list { list-style: none; padding: 0; border-top: 1px solid var(--line-default); }
.board-row { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--line-subtle); text-decoration: none; color: inherit; }
.board-row__title { font-weight: 600; overflow-wrap: anywhere; }
.board-row__title .tag { margin-right: var(--space-2xs); }
.board-row__cm { color: var(--text-accent); font-family: var(--font-numeric); font-weight: 700; font-size: var(--type-body-sm-size); }
.board-row__meta { font-size: var(--type-caption-size); color: var(--text-secondary); }
@media (hover: hover) { .board-row:hover .board-row__t { text-decoration: underline; } }
.pager { display: flex; justify-content: center; gap: var(--space-xs); margin-block: var(--space-lg); }
.post { display: grid; gap: var(--space-lg); max-width: 760px; }
.post__body { font-size: var(--type-body-size); line-height: 1.75; overflow-wrap: anywhere; }
a.tag { text-decoration: none; }

/* 홍보 띠(2026-11-03 알토: 세로 좌우 배너 대신 가로 자리, 휴대폰에서도). 3:1 그림을 넓은 화면은 두 칸, 휴대폰은 한 칸.
   비어 있으면 낮은 점선 자리와 「홍보 등록하기」만. 여러 건이면 화면이 돌려 보여 준다(/app.js [data-band]) */
.band { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.band:empty { display: none; }
.band__row { display: grid; gap: var(--space-sm); }
@media (min-width: 720px) { .band__row { grid-template-columns: 1fr 1fr; } }
.band__slot { display: grid; place-items: center; aspect-ratio: 3 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-sunken); }
.band__slot--empty { border: 1px dashed var(--line-default); }
.band--empty .band__slot--empty { aspect-ratio: auto; min-height: 64px; }
.band__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band__slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.band__foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--type-caption-size); color: var(--text-secondary); }
.band__add { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
@media (pointer: coarse) { .band__add { min-height: 44px; } }

/* 홍보 만들기 창: 위 미리보기(960×320 비율), 아래 도구 */
.sheet.sheet--wide { max-width: 760px; }
.bed { display: grid; gap: var(--space-lg); }
.bed__canvas, .bed__preview { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; border-radius: var(--radius-md); border: 1px solid var(--line-default); background: var(--bg-sunken); }
.bed__canvas { touch-action: none; cursor: grab; }
.bed__canvas:active { cursor: grabbing; }
.bed__tools { display: grid; gap: var(--space-md); align-content: start; }
.bed__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.bed__row input[type="range"] { flex: 1 1 140px; }
.bed__text { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); background: var(--bg-sunken); }
.bed__swatch { width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--line-default); cursor: pointer; padding: 0; }
.bed__swatch[aria-pressed="true"] { outline: 2px solid var(--line-strong); outline-offset: 2px; }

/* 처음 화면 문구 줄 오른쪽: 휙휙 둘러보기(주 행동)와 정보 수정 요청 */
.pitch__acts { flex: none; }

/* 저잣거리 보기 화면(/go/<id>): 위 얇은 막대 + 아래 그 사이트를 꽉 채운 화면. 막대를 옆으로 밀면 다른 곳으로 넘어간다 */
body[data-page="go"] { margin: 0; overflow: hidden; height: 100dvh; background: var(--bg-canvas); }
.gobar { position: fixed; inset: 0 0 auto; z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-2xs);
  height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(var(--space-xs), env(safe-area-inset-right)) 0 max(var(--space-xs), env(safe-area-inset-left));
  background: var(--bg-surface); border-bottom: 1px solid var(--line-subtle); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gobar__home { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); }
.gobar__home img { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.gobar__name { flex: 1; min-width: 0; margin: 0; font-weight: 700; font-size: var(--type-label-sm-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gobar__btn { flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 36px; padding-inline: var(--space-sm); border: 1px solid var(--line-default); border-radius: var(--radius-full);
  background: var(--bg-surface); color: var(--text-primary); font: inherit; font-weight: 600; font-size: var(--type-label-sm-size); text-decoration: none; cursor: pointer; }
.gobar__btn[aria-pressed="true"] { background: var(--bg-sunken); }
.gobar__btn--next { background: var(--action); border-color: var(--action); color: var(--action-on); }
.gobar__btn--next[aria-disabled="true"], .gobar__btn:disabled { opacity: 0.4; pointer-events: none; }
/* 좁은 휴대폰(이전 단추가 늘어 2026-11-03): 단추 안 여백을 줄여 이름 칸을 남긴다(누르는 폭 44px 는 그대로) */
@media (max-width: 399px) { .gobar__btn { padding-inline: var(--space-xs); } }
.sheet .cluster a.chip { display: inline-flex; align-items: center; text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: var(--type-label-sm-size); }
.go__frame { position: fixed; inset: calc(48px + env(safe-area-inset-top)) 0 0; width: 100%; height: calc(100dvh - 48px - env(safe-area-inset-top)); border: 0; background: var(--color-white); }
.go__closed { display: grid; justify-items: center; align-content: center; gap: var(--space-md); min-height: 100dvh; padding: calc(64px + env(safe-area-inset-top)) var(--gutter) var(--space-xl); text-align: center; }
.go__closed img { width: min(560px, 100%); height: auto; border-radius: var(--radius-media); border: 1px solid var(--line-subtle); }
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); min-width: 0; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.tour-grid li { min-width: 0; }
.tour-grid a { min-width: 0; display: grid; gap: var(--space-2xs); text-decoration: none; color: inherit; }
.tour-grid img, .tour-grid .card__host { width: 100%; height: auto; max-width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-media); border: 1px solid var(--line-subtle); background: var(--bg-sunken); display: grid; place-items: center; }
.tour-grid__name { font-weight: 600; font-size: var(--type-label-sm-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 앱 안 브라우저에서 빠져나가기 단추: 화면 아래 가운데 */
.inapp { position: fixed; left: 50%; bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs); border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-2); }
.inapp__x { width: 32px; height: 32px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-secondary); font-size: var(--size-lg); cursor: pointer; }

/* 사이트·AI 연동 화면 맨 위 안내(사람이 읽는 부분). 아래 AI 에이전트 절보다 한 단계 눈에 띄게 */
.hook { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-surface); background: var(--bg-surface); border: 1px solid var(--line-subtle); }
.hook h2 { margin: 0; word-break: keep-all; }
.hook h3 { margin: var(--space-sm) 0 0; }
.hook p, .hook li { word-break: keep-all; }
.perks { display: grid; gap: var(--space-sm); }
.steps { padding-left: 1.4em; display: grid; gap: var(--space-xs); }
.hook pre { margin: 0; white-space: pre-wrap; word-break: break-all; }

/* 저잣거리 계정 빌려 쓰기(2026-11-03): 보기 화면 막대 아래 「들어가기」 한 줄 */
.goconsent { position: fixed; z-index: var(--z-header); inset: calc(48px + env(safe-area-inset-top)) 0 auto; display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) max(var(--space-sm), env(safe-area-inset-right)) var(--space-xs) max(var(--space-sm), env(safe-area-inset-left));
  background: var(--bg-surface); border-bottom: 1px solid var(--line-subtle); }
.goconsent__text { flex: 1; min-width: 0; margin: 0; font-weight: 600; font-size: var(--type-label-sm-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 처음 화면 「손님을 보내 준 곳」(맞교환): 이름과 최근 7일 보낸 손님 수 */
.ring { margin-bottom: var(--space-xl); }
.ring__title { margin: 0 0 var(--space-sm); font-size: var(--type-label-size); font-weight: 700; }
.ring__list { display: flex; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ring__list li { flex: none; }
.ring__list a { display: inline-flex; align-items: center; gap: var(--space-xs); height: var(--control-sm); padding-inline: var(--space-md); border: 1px solid var(--line-subtle); border-radius: var(--radius-full);
  font-size: var(--type-label-sm-size); font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.ring__list .num { color: var(--text-tertiary); font-weight: 700; }
@media (hover: hover) { .ring__list a:hover { border-color: var(--line-default); } }
@media (pointer: coarse) { .ring__list a { min-height: 44px; } }

/* 내 정보 「다녀간 곳」: 이름과 머문 시간 칸 */
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.stamps a { display: grid; gap: var(--space-2xs); min-width: 0; padding: var(--space-sm); border: 1px solid var(--line-subtle); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.stamps__name { font-weight: 700; font-size: var(--type-label-sm-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamps__time { font-size: var(--type-caption-size); color: var(--text-tertiary); }

/* ── 저잣거리 브랜드 2안(2026-11-04). 무대는 무채색으로 비우고 색은 각 사이트 썸네일이 내게 한다.
   인주(#D6361A, 흰 글자 대비 4.77:1)는 주 단추·지금 메뉴/탭 밑줄·「새로 올림」 도장에만. 로고 글자만 픽셀, 화면 글자는 프리텐다드.
   정본 outputs/2026-11-04_저잣거리-브랜딩/BRAND.md ── */
[data-theme="neutral"], [data-theme="neutral"] [data-tone="light"] {
  --bg-canvas: #f7f6f3; --bg-surface: #ffffff; --bg-sunken: #efede8;
  --line-subtle: #e6e3dc; --line-default: #d9d5cc; --line-strong: #1a1a1f;
  --text-primary: #1a1a1f; --text-secondary: #6b6b73; --text-tertiary: #707078;
  --action: #1a1a1f; --action-hover: #3a3a42; --focus: #1a1a1f;
  --accent: #d6361a; --accent-hover: #b92e15; --accent-on: #ffffff; --accent-soft: #fbece8; --text-accent: #b92e15;
  --inju: #d6361a; /* check-allow: CL3 브랜드 인주 한 가지 */
  --radius-media: 6px;
}
.logo { gap: 10px; }
.logo__mark { border-radius: var(--radius-xs); }
.logo__word { display: block; width: 92px; height: 22px; color: var(--text-primary); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--inju); }
.sorts a[aria-current="true"] { text-decoration-color: var(--inju); }
.pick__tab[aria-selected="true"] { border-bottom-color: var(--inju); }
/* 「새로 올림」은 칠한 알약 대신 인주 도장 */
.tag--trend { background: var(--bg-surface); color: var(--inju); border: 1.5px solid var(--inju); font-size: 12px; line-height: 17px; padding-inline: 5px; border-radius: 2px; }
/* 고른 좌판에만 기와 처마: 마우스를 올린 카드 썸네일 위에 인주 처마가 함께 뜬다 */
@media (hover: hover) and (pointer: fine) {
  .card__link { position: relative; }
  .card__link::before { content: ""; position: absolute; left: -4px; right: -4px; top: -10px; height: 12px; background: url(/eave.svg) repeat-x 0 0 / 8px 12px; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 200ms, transform 300ms cubic-bezier(.2, .8, .2, 1); }
  .card__link:hover::before { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .card__link::before { transition: none; } }
/* 첫 화면 맨 위 골목 띠: 옅은 회색 지붕에 초롱만 제 색. 가로로 이어 붙여도 이음매가 없는 320×64 타일 */
.alley { height: 64px; margin: calc(var(--space-lg) * -1) 0 var(--space-md); background: url(/alley.svg) repeat-x left bottom / 320px 64px; }
@media (max-width: 719px) { .alley { height: 48px; background-size: 240px 48px; margin-bottom: var(--space-sm); } }