/* ════════════════════════════════════════════════════════════════════════
   archive.css — 모임 아카이브 (src/archive.js)
   1. 모임 상세의 '기록' — 함께한 사람 · 후기 · 사진 그리드 · 올리기
   2. 지난 모임 타임라인 — 연·월 묶음 (/:slug/meetups?tab=past, 소모임 홈은 .ar-tl-lg로 크게)
   3. 공개 프로필의 '함께한 모임'
   4. 라이트박스 (public/archive.js)
   멤버 셸(body.has-sb) · 홍보 셸(.intro-page) · 플랫폼(.x-pf) 어디에 끼워도 같게 — 값은 v5 토큰만(SPEC §2, v5 P3).
   흰 바탕 · 잉크 한 색 · 헤어라인 · 알약 버튼 · 카드 r22·묶음 r16·타일 r12. 팀 색은 쓰지 않는다.
   ════════════════════════════════════════════════════════════════════════ */

:is(.ar, .ar-list, .ar-tl, .ar-pf, .ar-lb) {
  /* v5 별칭(SPEC §2.12) */
  --ar-ink: var(--ink); --ar-ink-2: var(--ink-hover);
  --ar-muted: var(--ink-2); --ar-subtle: var(--ink-3); --ar-dim: var(--ink-3); --ar-faint: var(--ink-4);
  --ar-line: var(--line); --ar-line-2: var(--line-2);
  --ar-wash: var(--wash-2); --ar-wash-2: var(--wash-3); --ar-wash-3: var(--wash-1);
  --ar-top: 24px;              /* 달 머리의 sticky 위치 — 홍보 셸은 위쪽 바가 있어 더 내린다 */
  word-break: keep-all;
}
.intro-page :is(.ar-list, .ar-tl) { --ar-top: 84px; }

/* ── 공용 — 알약 버튼(md 40 · sm 32) · 글자 링크 ── */
.ar-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); flex: none;
  height: var(--h-md); padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--ar-ink); color: #fff;
  font: 500 var(--t-ui)/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.ar-btn:active { scale: var(--m-press); transition-duration: var(--dur-1); }
.ar-btn svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.ar-btn-soft { background: var(--ar-wash); color: var(--ar-ink); }
@media (hover: hover) and (pointer: fine) {
  .ar-btn:hover { background: var(--ar-ink-2); color: #fff; }
  .ar-btn-soft:hover { background: var(--ar-wash-2); color: var(--ar-ink); }
}
.ar-btn:focus-visible, .ar-link:focus-visible, .ar-it:focus-visible, .ar-pf-it:focus-visible, .ar-ph > a:focus-visible,
.ar-up label:has(.ar-file:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
.ar-link { position: relative; display: inline-flex; align-items: center; gap: var(--s-1); font: 500 var(--t-footnote)/1.45 var(--font); color: var(--ar-muted); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.ar-link svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .ar-link:hover { color: var(--ar-ink); } }

/* ═══ 1. 모임 상세 — 기록 ═══════════════════════════════════════════════ */
.ar { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--ar-line); scroll-margin-top: 72px; }
.mu-hero + .ar, .ck-hook + .ar, .mu-join + .ar { margin-top: var(--s-7); }
.ar-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s-3); margin-bottom: var(--s-4); }
.ar-head h2 { font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ar-ink); }
.ar-head-note { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }

/* 함께한 사람 — 아바타 24 스택 + '+N' + 수 */
.ar-with { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s-3); margin: 0 0 var(--s-6); }
.ar-with-none { font: 400 var(--t-ui)/1.45 var(--font); color: var(--ar-subtle); }
.ar-with-links { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-4); }
.ar-stack { display: inline-flex; align-items: center; }
.ar-stack > .avatar { box-shadow: 0 0 0 2px var(--paper); margin-left: -6px; }
.ar-stack > .avatar:first-child { margin-left: 0; }
.ar-stack > .avatar-txt + * { margin-left: -2px; } /* 글자 원(이름 두 글자) 뒤는 덜 겹친다 */
.ar-stack-more {
  display: inline-grid; place-items: center; height: var(--h-xs); min-width: var(--h-xs); padding: 0 6px; margin-left: -6px;
  border-radius: var(--r-pill); background: var(--wash-2); box-shadow: 0 0 0 2px var(--paper); font: 500 var(--t-caption)/1 var(--font); color: var(--ar-muted);
}
.ar-with-t { font: 400 var(--t-ui)/1.45 var(--font); color: var(--ar-muted); }
.ar-with-t b { font-weight: 600; color: var(--ar-ink); }
.ar-with-via { height: var(--h-xs); display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ar-line-2); font: 500 var(--t-caption)/1 var(--font); color: var(--ar-muted); }

/* 후기 */
.ar-prose { font: 400 var(--t-body)/1.75 var(--font); color: var(--ar-ink); }
.ar-prose :is(p, li) { font-size: var(--t-body); }
.ar-prose :is(h1, h2, h3) { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; }
.ar-prose > :last-child { margin-bottom: 0; }
.ar-recap-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }

/* 호스트에게 — 비어 있으면 기록을 남기도록 */
.ar-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6);
  padding: var(--s-6); border-radius: var(--r-xl); background: var(--ar-wash-3); box-shadow: inset 0 0 0 1px var(--ar-line);
}
.ar-invite-t { flex: 1 1 280px; min-width: 0; }
.ar-invite-t strong { display: block; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ar-ink); }
.ar-invite-t p { margin-top: 6px; max-width: 46ch; font: 400 var(--t-ui)/1.6 var(--font); color: var(--ar-muted); }
.ar-invite-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ar-invite-acts .ar-up-note, .ar-invite-acts .ar-up-bar { display: none; }

/* 후기 쓰기 — 같은 페이지 인라인. #recap-edit로 열린다(JS 없이도 :target) */
.ar-form { display: none; scroll-margin-top: 96px; }
.ar-form:target { display: block; animation: m-rise var(--dur-3) var(--ease-out) backwards; }
.ar:has(.ar-form:target) :is(.ar-recap, .ar-invite) { display: none; }
.ar-form-l { display: block; margin-bottom: var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ar-ink); }
.ar-ta {
  display: block; width: 100%; min-height: 200px; padding: var(--s-4); resize: vertical;
  border: 1px solid var(--ar-line-2); border-radius: var(--r-md); background: var(--paper); box-shadow: none;
  font: 400 var(--t-body)/1.75 var(--font); color: var(--ar-ink);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ar-ta::placeholder { color: var(--ar-dim); }
.ar-ta:focus { outline: none; box-shadow: var(--ring-input); }
.ar-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.ar-form-acts { display: flex; gap: var(--s-2); margin-left: auto; }
.ar-hint { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }

/* 사진 — 타일 r12(묶음 안), 모자이크 */
.ar-photos { margin-top: var(--s-7); scroll-margin-top: 72px; }
.ar-with + .ar-photos { margin-top: var(--s-2); }
.ar-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--s-4); margin-bottom: var(--s-3); }
.ar-sub h3 { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ar-ink); }
.ar-n { margin-left: var(--s-1); font: 500 var(--t-ui)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ar-dim); }
.ar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ar-ph { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--canvas-2); }
.ar-ph > a { position: absolute; inset: 0; display: block; border-radius: inherit; }
.ar-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
.ar-ph::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .ar-ph > a:hover img { scale: 1.03; } }
@media (min-width: 701px) {
  .ar-grid-n1 { grid-template-columns: minmax(0, 1fr); }
  .ar-grid-n1 > .ar-ph { aspect-ratio: 3 / 2; }
  .ar-grid-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-grid-n4 > .ar-ph:first-child { grid-column: span 3; aspect-ratio: 2 / 1; }
  .ar-grid-hero > .ar-ph:first-child { grid-column: span 2; grid-row: span 2; }
  .ar-grid-hero > .ar-ph:nth-child(3n+1):nth-child(n+4):last-child { grid-column: span 3; aspect-ratio: 3 / 1; }
  .ar-grid-hero > .ar-ph:nth-child(3n+1):nth-child(n+4):nth-last-child(2) { grid-column: span 2; aspect-ratio: auto; }
}
.ar-ph-del { position: absolute; z-index: 1; top: var(--s-2); right: var(--s-2); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.ar-ph:hover .ar-ph-del, .ar-ph:focus-within .ar-ph-del { opacity: 1; }
.ar-ph-del button {
  display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(23, 21, 15, .72); color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: background-color var(--dur-1) var(--ease-out);
}
.ar-ph-del button:hover { background: var(--ink); }
.ar-ph-del button:focus-visible { outline: var(--focus-dark); outline-offset: 1px; }
.ar-ph-del svg { width: var(--ic-sm); height: var(--ic-sm); }
@media (hover: none) { .ar-ph-del { display: none; } } /* 손가락으로는 사진을 연 뒤 라이트박스에서 지운다 */

/* 올리기 */
.ar-up { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ar-up label { position: relative; }
.ar-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.ar-up[data-js] .ar-up-go { display: none; }
.ar-up-note { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }
.ar-up-note.is-err { color: var(--danger); }
.ar-up-bar { display: none; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 0; background: var(--ar-line); overflow: hidden; }
.ar-up-bar i { display: block; width: 100%; height: 100%; background: var(--ar-ink); transform-origin: left; scale: var(--p, 0) 1; transition: scale var(--dur-2) linear; }
.ar-up.is-busy label { opacity: .8; pointer-events: none; }
.ar-up.is-busy .ar-up-bar { display: block; }
.ar-drop {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  padding: var(--s-5) var(--s-6); border: 1px solid var(--ar-line); border-radius: var(--r-xl);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.ar-drop p { flex: 1 1 260px; font: 400 var(--t-ui)/1.6 var(--font); color: var(--ar-muted); }
.ar-drop p strong { margin-right: 6px; font-weight: 600; color: var(--ar-ink); }
.ar.is-drag :is(.ar-drop, .ar-invite, .ar-grid) { outline: 2px solid var(--ar-ink); outline-offset: 6px; }
.ar.is-drag .ar-drop { background: var(--ar-wash-3); }
.ar-quiet { font: 400 var(--t-ui)/1.65 var(--font); color: var(--ar-subtle); }
.intro-page :is(.ar ~ .cmts-head, .ar ~ section > .cmts-head) { font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); }

/* ═══ 2. 지난 모임 타임라인 ═══════════════════════════════════════════════ */
.ar-list { margin-top: var(--s-4); }
.ar-page-note { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-1) 0 var(--s-3); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }
.ar-tl { display: flex; flex-direction: column; }
.ar-mo { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s-3); border-top: 1px solid var(--ar-line); }
.ar-mo:last-child { border-bottom: 1px solid var(--ar-line); }
.ar-mo-h { position: sticky; top: var(--ar-top); align-self: start; display: flex; flex-direction: column; gap: 6px; padding: var(--s-5) 0 var(--s-4); }
.ar-mo-h b { font: 600 var(--t-headline)/1 var(--font); letter-spacing: -0.02em; color: var(--ar-ink); }
.ar-mo-h span { font: 500 var(--t-caption)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ar-subtle); }
.ar-mo-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
.ar-mo-list > li + li { border-top: 1px solid var(--ar-line); }
.ar-it {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: start;
  margin: 0 calc(-1 * var(--s-3)); padding: var(--s-4) var(--s-3); border-radius: var(--r-md); color: inherit; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}
.ar-it:active { background: var(--wash-2); }
@media (hover: hover) and (pointer: fine) { .ar-it:hover { background: var(--ar-wash-3); } }
.ar-it-d { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding-top: 1px; }
.ar-it-d b { font: 600 var(--t-headline)/1 var(--font); letter-spacing: 0; color: var(--ar-ink); }
.ar-it-d span { font: 500 var(--t-caption)/1 var(--font); color: var(--ar-subtle); }
.ar-it-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.ar-it-t { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ar-ink); overflow-wrap: break-word; }
.ar-it-m { display: flex; flex-wrap: wrap; gap: 0 6px; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }
.ar-it-m i { font-style: normal; color: var(--ar-faint); }
.ar-it-x {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
  font: 400 var(--t-ui)/1.55 var(--font); color: var(--ar-muted);
}
.ar-strip { display: flex; gap: var(--s-1); }
.ar-strip-i { position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: var(--canvas-2); }
.ar-strip-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-strip-i[data-more]::after {
  content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(23, 21, 15, .52); color: #fff; font: 600 var(--t-footnote)/1 var(--font); font-variant-numeric: tabular-nums;
}
.ar-more { display: flex; justify-content: center; margin-top: var(--s-7); }
.ar-more-n { font: 500 var(--t-footnote)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ar-subtle); }
.ar-more .ar-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* 크게 — 소모임 홈: 사진이 본문 아래로 넓게 */
.ar-tl-lg .ar-it { grid-template-columns: 44px minmax(0, 1fr); padding: var(--s-5) var(--s-3); margin: 0 calc(-1 * var(--s-3)); }
.ar-tl-lg .ar-it-t { font-size: var(--t-card); }
.ar-tl-lg .ar-it-x { -webkit-line-clamp: 2; font-size: var(--t-ui); }
.ar-tl-lg .ar-strip { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: var(--s-3); }
.ar-tl-lg .ar-strip-i { width: auto; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.ar-tl-lg .ar-strip-i[data-more]::after { font-size: var(--t-body); }

/* ═══ 3. 공개 프로필 — 함께한 모임 ══════════════════════════════════════════ */
.ar-pf-note { margin: calc(-1 * var(--s-1)) 0 var(--s-3); font: 400 var(--t-footnote)/1.55 var(--font); color: var(--ar-subtle); }
.ar-pf-note a { color: var(--ar-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.ar-pf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-2); }
.ar-pf-it {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-3); border: 1px solid var(--ar-line); border-radius: var(--r-lg);
  background: var(--paper); color: inherit; text-decoration: none;
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.ar-pf-it::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
.ar-pf-it:active { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) {
  .ar-pf-it:hover { border-color: var(--ar-line-2); translate: 0 -2px; }
  .ar-pf-it:hover::after { opacity: 1; }
}
.ar-pf-th { flex: none; width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; background: var(--wash-2); }
.ar-pf-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-pf-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ar-pf-d b { font: 600 var(--t-headline)/1 var(--font); letter-spacing: 0; color: var(--ar-ink); }
.ar-pf-d span { font: 500 var(--t-caption)/1.2 var(--font); color: var(--ar-subtle); }
.ar-pf-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-pf-t strong, .ar-pf-t span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ar-pf-t strong { font: 600 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ar-ink); }
.ar-pf-t span { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ar-subtle); }

/* ═══ 4. 라이트박스 — 다크 크롬(§4.16 재질) ══════════════════════════════════ */
.ar-lb {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--d-bg); color: var(--d-fg); animation: m-fade var(--dur-2) var(--ease-out) both;
  -webkit-user-select: none; user-select: none;
}
.ar-lb.is-closing { animation: m-fade-out var(--dur-1) var(--ease-in) both; }
.ar-lb-top, .ar-lb-bot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.ar-lb-bot { min-height: 64px; padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
.ar-lb-count { font: 500 var(--t-footnote)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--d-fg-2); }
.ar-lb-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 76px; overflow: hidden; touch-action: pan-y; }
.ar-lb-stage img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-xs); -webkit-user-drag: none; animation: m-fade var(--dur-2) var(--ease-out) both;
}
.ar-lb-by { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--d-fg-2); }
.ar-lb-by b { font-weight: 600; color: var(--d-fg); }
.ar-lb-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.ar-lb button, .ar-lb a { font: inherit; }
.ar-lb-ic {
  display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border: 0; border-radius: 50%; cursor: pointer;
  background: var(--d-wash-2); color: var(--d-fg); transition: background-color var(--dur-1) var(--ease-out);
}
.ar-lb-ic:hover { background: var(--d-wash-3); }
.ar-lb-ic svg { width: var(--ic-md); height: var(--ic-md); }
.ar-lb-txt {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--d-wash-2); color: var(--d-fg); font: 500 var(--t-footnote)/1 var(--font); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}
.ar-lb-txt:hover { background: var(--d-wash-3); color: var(--d-fg); }
.ar-lb-txt.is-danger { color: var(--d-fg); box-shadow: inset 0 0 0 1px var(--d-line); }
.ar-lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: var(--h-lg); height: var(--h-lg); }
.ar-lb-prev { left: var(--s-4); }
.ar-lb-next { right: var(--s-4); }
.ar-lb [hidden] { display: none !important; }
.ar-lb :is(button, a):focus-visible { outline: var(--focus-dark); outline-offset: 2px; }

/* ═══ 모바일 ═══════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  .ar { margin-top: var(--s-7); padding-top: var(--s-6); }
  .ar-with { margin-bottom: var(--s-5); }
  .ar-invite { padding: var(--s-5); }
  .ar-invite-acts { width: 100%; }
  .ar-invite-acts > * { flex: 1; }
  .ar-invite-acts .ar-up label { width: 100%; }
  .ar-form-acts { width: 100%; }
  .ar-form-acts .ar-btn { flex: 1; height: var(--h-lg); }
  .ar-drop { padding: var(--s-5); }
  .ar-drop .ar-up, .ar-drop .ar-up label { width: 100%; }
  .ar-drop .ar-up label { height: var(--h-lg); }
  .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
  .ar-ph { border-radius: var(--r-md); }
  .ar-grid-n1 > .ar-ph { grid-column: span 2; aspect-ratio: 4 / 3; }
  :is(.ar-grid-n3, .ar-grid-hero) > .ar-ph:first-child { grid-column: span 2; aspect-ratio: 3 / 2; }
  .ar-grid-hero > .ar-ph:nth-child(even):last-child { grid-column: span 2; aspect-ratio: 2 / 1; }

  .ar-mo { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ar-mo:last-child { border-bottom: 0; }
  .ar-mo-h { position: static; flex-direction: row; align-items: baseline; gap: var(--s-2); padding: var(--s-6) 0 var(--s-2); }
  .ar-tl > .ar-mo:first-child .ar-mo-h { padding-top: var(--s-2); }
  .ar-mo-list { border-top: 1px solid var(--ar-line); border-bottom: 1px solid var(--ar-line); }
  .ar-it { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-3); margin: 0 calc(-1 * var(--s-2)); padding: var(--s-4) var(--s-2); }
  .ar-strip { grid-column: 2; margin-top: 10px; }
  .ar-tl-lg .ar-it { grid-template-columns: 36px minmax(0, 1fr); margin: 0 calc(-1 * var(--s-2)); padding: var(--s-4) var(--s-2); }
  .ar-tl-lg .ar-strip { gap: var(--s-1); margin-top: var(--s-3); }

  .ar-pf-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }

  /* 손가락 — 보이는 버튼은 40, 누르는 자리는 44(::after) */
  .ar-btn::after { content: ''; position: absolute; inset: -2px; }
  .ar-link { min-height: var(--hit); }
  .ar-lb-ic.ar-lb-x { width: var(--h-lg); height: var(--h-lg); }
  .ar-lb-txt { height: var(--h-md); padding: 0 var(--s-4); position: relative; }
  .ar-lb-txt::after { content: ''; position: absolute; inset: -2px 0; }

  .ar-lb-stage { padding: 0; }
  .ar-lb-nav { display: none; }
  .ar-lb-stage img { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-form:target, .ar-lb, .ar-lb.is-closing, .ar-lb-stage img { animation: none; }
  .ar-ph img, .ar-btn { transition: none; }
}