/* feed.css — blogdemo 피드
 * ===========================================================================
 * ★2026-09-10 재설계. 앞 판(«글 한 장» 데모)은 제로님께 기각당했다:
 *   「내용은 임시이고 블로그 디자인도 별로고, 전체적으로 맘에 안 드는 데모였다.」
 *   자동 판정은 전부 통과했었다 — 자동 PASS 는 «안 깨졌다» 이지 «좋다» 가 아니다.
 *
 * ── 전제가 바뀌었다 ──────────────────────────────────────────────────────
 * 1차 독자는 «쓰는 사람 자신» 이다. 목표는 유입이 아니라
 * «1년 뒤에 ‹그거 어디서 했더라› 가 풀리는 것» 이다.
 * ⛔밀도를 낮추지 않는다. 훑을 것이 많아야 찾는다.
 *
 * ── 수치는 실측이다 (dev_tools/f1_baseline.json) ─────────────────────────
 * feed 축 — 2026-09-10 `feed_measure` 로 6곳 실측
 *   simonwillison · adactio · daringfireball · kottke · tantek · jvns
 *   본문 노출 비율 중앙값 0.96 — 6곳 중 5곳이 90% 이상이다.
 *   ⇒ 개인 기록 사이트는 «목록» 이 아니라 «피드» 다. 짧은 기록이 클릭 없이 스트림에서 읽힌다.
 *   첫 화면 항목 수 실측 1.0~4.2개. 우리는 위쪽(3개 이상)을 노린다 — 훑어서 찾는 것이 목적이다.
 *   모범 adactio(4.2)·jvns(3.8) 은 항목 높이가 215~240px 로 낮다.
 * 본문 타이포 — desktop 축(글 한 장에서 잰 값)을 그대로 쓴다: 744px = 한글 50자 · 행간 1.8
 * =========================================================================== */

:root {

  /* ── 역할 토큰 — 컴포넌트는 이쪽만 쓴다. 원색은 hivelink_tokens.css 에 있다 ──
   * ⚠2026-09-10: 여기가 var(--red) 를 가리키고 있었는데 --red 는 이제 없다.
   *   빈 값이 되면 «색이 안 나온다» 가 아니라 «상속된 색이 나온다» 라 눈에 잘 안 띈다.
   *   실측으로 잡았다 — 렌더된 값을 브라우저에서 읽어보니 빈 문자열이었다. */
  --text-body:    var(--ink);
  --text-quiet:   var(--mute);
  --text-faint:   var(--faint);
  --text-accent:  var(--hive);        /* ⛔«절제해서 사용» — 홈페이지 토큰 주석 그대로 */
  --accent-deep:  var(--hive-deep);
  --accent-soft:  var(--hive-soft);
  --ai:           var(--signal);      /* ★토큰이 «AI/시스템 응답» 으로 이미 정의한 색 */
  --ai-deep:      var(--signal-deep);
  --ai-soft:      var(--signal-soft);
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --border-hair:  var(--line);
  --focus-ring:   var(--hive);

  --font-display: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --font-body:    var(--font-sans);
  --font-util:    var(--font-mono);

  --fs-body:  17px;   /* f1_baseline desktop 15.5~17.5 */
  --fs-meta:  12px;
  --fs-lede:  15px;
  --lh-body:  1.8;    /* f1_baseline desktop 1.7~1.9 */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --measure: 744px;   /* 본문 폭 그 자체 = 한글 50자 */
  --gutter:  28px;    /* 갈래 띠가 이 안에 산다 — 본문 폭을 건드리지 않는다 */
  --rail-w:  4px;
  --rail-gap: 14px;

  /* ── 갈래 넷 — ⛔색을 새로 짓지 않는다. 이미 뜻이 배정된 토큰을 쓴다 ── */
  --k-news:  var(--hive);      /* 소식 — 밖에서 온 것 */
  --k-craft: var(--ink);       /* 기법 — 우리가 한 일 */
  --k-build: var(--mute);      /* 구현기 — 우리가 한 일(긴 것) */
  --k-talk:  var(--signal);    /* 대화 — ★토큰이 «AI/시스템 응답» 으로 정의한 색 */
}

* { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin-block: 0; }
b, strong { font-weight: 700; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.wrap { max-width: calc(var(--measure) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ── 머리 — 낮게. 훑는 것이 목적이라 헤더가 화면을 먹으면 안 된다 ── */
.masthead { border-bottom: 1px solid var(--border-hair); background: var(--surface-card); }
.masthead .wrap { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s4) var(--gutter); }
.masthead h1 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.masthead p { margin: 0; font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet); }


/* ── 갈래 거르개 ── */
.filters { background: var(--surface-card); border-bottom: 1px solid var(--border-hair); position: sticky; top: 0; z-index: 5; }
.filters .wrap { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s3); padding-bottom: var(--s3); }
.filters button {
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet);
  background: none; border: 1px solid var(--border-hair); border-radius: 2px;
  padding: var(--s1) var(--s3); cursor: pointer; line-height: 1.7;
}
.filters button[aria-pressed="true"] { color: var(--surface-card); background: var(--text-body); border-color: var(--text-body); }
.filters .count { margin-left: auto; font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet); align-self: center; }

/* ── 피드 ──
 * ★본문이 스트림에 그대로 실린다. 실측 6곳 중 5곳이 그렇다(노출 90%+).
 *   1차 독자가 본인이면 «클릭해야 읽힘» 은 치명적이다 — 훑다가 멈춰야 하니까. */
.feed { background: var(--surface-card); }
.entry {
  position: relative;
  border-bottom: 1px solid var(--border-hair);
  padding: var(--s5) 0;
}
.entry:last-child { border-bottom: 0; }

/* ★signature: 갈래 띠.
 * ⚠2026-09-10: 선택자가 data-kind="소식"(한글)이었는데 DB 전환으로 값이 news·craft(영문)가 됐다.
 *   전부 기본값으로 칠해지고 있었다 — 색이 비슷해서 눈으로는 못 봤고, 렌더된 값을 재서 잡았다.
 * 왼쪽 여백에 갈래가 세로 띠로 흐른다. 스크롤하면서 «색 패턴» 만 봐도 묶음이 보인다.
 * 1년 뒤에 찾는 것이 목적이므로 «분류가 눈에 보이는 것» 자체가 기능이다.
 * ⛔띠는 --gutter 안에 산다. 본문 폭을 건드리면 측정값이 흔들린다. */
.entry::before {
  content: ""; position: absolute;
  left: calc(var(--rail-gap) * -1);
  top: var(--s5); bottom: var(--s5); width: var(--rail-w);
  background: var(--k-talk);
}
.entry[data-kind="news"]::before  { background: var(--k-news); }
.entry[data-kind="craft"]::before  { background: var(--k-craft); }
.entry[data-kind="build"]::before{ background: var(--k-build); }
.entry[data-kind="talk"]::before  { background: var(--k-talk); }

.entry__meta {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet);
  margin-bottom: var(--s2);
}
.entry__kind { color: var(--text-body); font-weight: 500; }
.entry__body > * { margin: 0 0 var(--s3); }
.entry__body > *:last-child { margin-bottom: 0; }
.entry__body p { word-break: keep-all; }
.entry__body h2 { font-size: 19px; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; word-break: keep-all; }
.entry__body em { font-style: normal; color: var(--text-quiet); }
.entry__body a { color: var(--text-accent); }
.entry__body code {
  font-family: var(--font-util); font-size: .88em;
  background: var(--surface-page); padding: 1px 5px; border-radius: 2px;
}
.entry__body ul { padding-left: var(--s5); }
.entry__body li { margin-bottom: var(--s1); word-break: keep-all; }

.entry__foot {
  display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3);
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet);
}
.entry__foot a { color: var(--text-quiet); }
/* ★퍼머링크 — 항목마다 «주소» 를 준다.
 * 2026-09-10 실측: 개인 기록 사이트 6곳 전부 항목에 고유 주소가 있다.
 * «1년 뒤에 그거 어디서 했더라» 가 목적이면 그 항목을 «걸어둘 수 있어야» 한다. */
.entry__link { font-variant-numeric: tabular-nums; opacity: .55; }
.entry__link:hover, .entry__link:focus-visible { opacity: 1; color: var(--text-accent); }
.entry:target { background: var(--surface-page); }
.entry__more { color: var(--text-accent); font-weight: 500; }

footer {
  border-top: 1px solid var(--border-hair); background: var(--surface-card);
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet);
  padding: var(--s5) 0 var(--s7); line-height: 1.8;
}
footer p { margin: 0 0 var(--s1); }

@media (max-width: 780px) {
  :root { --fs-body: 16px; --gutter: 17px; --rail-gap: 11px; --measure: 100%; }
  .masthead .wrap { flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .entry { padding: var(--s4) 0; }
  .entry__body h2 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ── 재해석 항목: 사실 · 말 · 판단을 갈라 적는다 ──
 * ★기사 원문을 전재하지 않는다(저작권). 원문에서 «사실» 을 뽑고, 인용은 짧게,
 *   그 위에 «우리 판단» 을 얹는다 — 그러면 그건 우리 글이다.
 * 갈라 적는 이유는 이 프로젝트의 규율 그대로다: 추측한 것과 확인한 것을 구분한다. */
.claim { position: relative; padding-left: var(--s5); }
.claim::before {
  content: attr(data-claim);
  position: absolute; left: 0; top: .35em;
  font-family: var(--font-util); font-size: 10px; letter-spacing: .04em;
  color: var(--text-quiet); writing-mode: vertical-rl; text-orientation: upright;
}
.claim[data-claim="사실"]  { border-left: 2px solid var(--border-hair); }
.claim[data-claim="말"]    { border-left: 2px dotted var(--border-hair); }
.claim[data-claim="판단"]  { border-left: 2px solid var(--text-accent); }
.claim { border-left-width: 2px; margin-left: 2px; padding-left: var(--s5); }


/* ── ★문답 — 이 블로그의 본체 ──
 * 제로님 2026-09-10: 「그 기사를 바탕으로 너와 또는 관제탑과 문답을 나눈 결과를 올리는 것으로 하자.」
 * 기사 요약은 어디에나 있다. 그 기사를 놓고 «실제로 오간 문답» 은 여기밖에 없다.
 * ⛔지어내지 않는다. 실제로 주고받은 것만 싣는다 — 지어낸 문답은 남의 글보다 못하다.
 *
 * 재료(기사) → 문답 → 남은 것(미확인 포함)의 순서로 읽힌다. */
.qa { margin: var(--s4) 0 0; border-left: 2px solid var(--border-hair); padding-left: var(--s5); }
.qa__turn { position: relative; margin: 0 0 var(--s4); }
.qa__turn:last-child { margin-bottom: 0; }
.qa__who {
  display: block; font-family: var(--font-util); font-size: 11px; letter-spacing: .04em;
  color: var(--text-quiet); margin-bottom: var(--s1);
}
/* ★화자를 색으로 가른다 — ⛔새 색을 만들지 않는다.
 * 토큰이 이미 --signal 을 «AI/시스템 응답» 으로 정의해 두었다(hivelink_tokens.css).
 * 이 블로그는 사람과 AI 의 문답이 본체이므로, 그 배정을 그대로 쓴다.
 *   사람(제로님·나) = 잉크/강조 계열   ·   AI(관제탑) = --signal */
.qa__turn[data-who="관제탑"],
.qa__turn[data-who="AI"] {
  border-left: 2px solid var(--ai);
  margin-left: calc(var(--s5) * -1 - 2px); padding-left: var(--s5);
}
.qa__turn[data-who="관제탑"] .qa__who,
.qa__turn[data-who="AI"] .qa__who { color: var(--ai-deep); }
.qa__turn[data-who="제로님"] { border-left: 2px solid var(--text-accent);
  margin-left: calc(var(--s5) * -1 - 2px); padding-left: var(--s5); }
.qa__turn[data-who="제로님"] .qa__who { color: var(--accent-deep); }
.qa__turn p { margin: 0 0 var(--s2); }
.qa__turn p:last-child { margin-bottom: 0; }

/* 남은 것 — 미확인을 숨기지 않는다 */
.rest {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: var(--surface-page); border: 1px dashed var(--border-hair);
  font-size: var(--fs-lede);
}
.rest b { display: block; font-family: var(--font-util); font-size: 11px; letter-spacing: .04em;
          color: var(--text-quiet); margin-bottom: var(--s1); font-weight: 500; }
.rest ul { margin: 0; padding-left: var(--s5); }
.rest li { margin-bottom: var(--s1); }


/* ── ★날짜 구획 ──
 * 제로님 2026-09-10: 「매일 새로운 소식이 쏟아지는데 스크롤할 때마다 과거 피드가 올라오게 할 거냐」
 * 실측 6곳 중 3~4곳이 날짜 그룹 헤더를 쓴다(simonwillison 10 · adactio 11 · daringfireball 12).
 * 그리고 «과거로 가는 길» 은 5곳 모두 **날짜 경로**다 — jvns 608 · simonwillison 107 ·
 * tantek 104 · daringfireball 81. ⛔무한 스크롤을 쓰는 곳은 없다. */
.daymark {
  position: sticky; top: 41px; z-index: 4;
  display: flex; align-items: baseline; gap: var(--s3);
  margin: var(--s6) 0 0; padding: var(--s2) 0;
  background: var(--surface-card);
  border-bottom: 2px solid var(--text-body);
  font-family: var(--font-util); font-size: 13px; font-weight: 500; letter-spacing: .02em;
}
.daymark:first-child { margin-top: 0; }
.daymark span { font-size: var(--fs-meta); color: var(--text-quiet); font-weight: 400; }
.daymark__link { margin-left: auto; color: var(--text-quiet); text-decoration: none; opacity: .5; }
.daymark__link:hover, .daymark__link:focus-visible { opacity: 1; color: var(--text-accent); }
.daymark:target { background: var(--surface-page); }

/* 상단 날짜 점프 — 훑지 않고 «뛴다» */
.filters .count { margin-left: var(--s3); }


@media (max-width: 780px) {
  .daymark { top: 37px; }
    .filters .count { margin-left: auto; }
}

/* ── 갈래 좁히기가 «서버 질의» 가 됐다 (2026-09-10 DB 전환) ──
 * 홈은 링크(/?kind=news)로 서버에 다시 묻는다 — DOM 을 숨기는 것이 아니다.
 * 색인은 전체를 한 번에 그리므로 DOM 좁히기를 그대로 쓴다. 성격이 다르다. */
.kind-btn {
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet);
  text-decoration: none; border: 1px solid var(--border-hair); border-radius: 2px;
  padding: var(--s1) var(--s3); line-height: 1.7;
}
.kind-btn.is-on { color: var(--surface-card); background: var(--text-body); border-color: var(--text-body); }
.kind-btn:hover, .kind-btn:focus-visible { color: var(--text-accent); border-color: var(--text-accent); }
.kind-btn.is-on:hover { color: var(--surface-card); }
.more__status { font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet); }

/* 출처가 여럿일 때 — «어떤 것을 언제 열어봤는가» 가 각각 붙는다.
 * 2026-09-10 관제탑 실측: 문답 하나에 arXiv 2건이 걸렸는데 필드가 1개라 한 건만 들어갔다. */
.entry__foot a em { font-style: normal; opacity: .6; margin-left: 3px; }





/* ══ 머리 ══════════════════════════════════════════════════════════
 * 2026-09-10 제로님 지적으로 다시 만들었다.
 * 앞판의 문제: ①제목이 «링크» 로 보였다(파란 밑줄) ②설명문 두 줄이 화면을 먹고 있었다
 *   — 그건 «내가 왜 이렇게 만들었는지» 를 적은 메모지 «화면» 이 아니다
 * ⇒ 한 줄로 줄인다: 로고 · 회사명 · 얇은 구분선 · 이 페이지 이름. 오른쪽에 색인.
 *   ⛔색은 토큰만 쓴다. */
.masthead {
  position: sticky; top: 0; z-index: 6;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hair);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; color: var(--text-body);
}
.brand img { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  letter-spacing: -.02em;
}
.brand__sep {
  width: 1px; height: 14px; background: var(--border-hair);
  margin: 0 var(--s1);
}
/* 이 페이지의 이름만 명조로. 브랜드 이름이 아니라 «지면 이름» 이다 */
.brand__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--text-quiet); letter-spacing: -.01em;
}
.brand:hover .brand__title, .brand:focus-visible .brand__title { color: var(--text-accent); }
/* ★2026-09-10 제로님: 「색인 버튼하고 홈페이지 바로가기 버튼하고 왜 수평이 안맞냐」
   실측 — 색인 height 25.0 / 회사 height 31.6, 중심선이 4.5px 어긋나 있었다.
   같은 padding·글자크기를 줬는데도 다른 이유: display:inline 은 위아래 padding 이
   박스 높이에 «반영되지 않는다». 로고가 들어가며 「회사」만 inline-flex 가 됐고 「색인」은 옛 상태였다.
   ⛔둘 중 하나만 고치지 않는다. 오늘 세 번째로 나온 「같은 일을 하는데 한쪽만 손봤다」이다
     (상세 XSS · 확인일 표시 · 이 버튼). 부모에서 한 번에 잡아 버튼이 늘어도 저절로 맞게 한다. */
/* ⛔align-items 를 center 로 두면 «자식이 각자 자기 높이» 를 갖는다.
   실측 2026-09-10: 모바일에서 「회사」 글자가 숨고 로고만 남자 webkit·firefox 에서 3px 어긋났다.
   stretch 면 나란한 버튼이 같은 높이로 늘어난다 — 내용이 무엇이든 줄이 맞는다. */
.masthead__nav { display: flex; align-items: stretch; gap: var(--s2); }
.masthead__nav a {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-quiet);
  text-decoration: none; padding: var(--s1) var(--s3);
  border: 1px solid var(--border-hair); border-radius: 2px;
}
.masthead__nav a:hover, .masthead__nav a:focus-visible {
  color: var(--text-accent); border-color: var(--text-accent);
}

/* 갈래 거르개가 머리 아래에 붙는다 */
.filters { top: 53px; }
.daymark { top: 100px; }

/* ══ 피드 끝 ═══════════════════════════════════════════════════════
 * 앞판은 여기에 «여기까지가 전부다» + 색인 링크를 맨 텍스트로 늘어놨다.
 * 끝에 왔다는 것은 «더 안 나온다» 로 이미 안다 — 문장으로 말할 필요가 없다.
 * ⇒ 얇은 선 하나로 끝을 표시하고, 불러오는 중일 때만 그 자리에 표시가 뜬다. */
.feedend {
  height: var(--s7); margin-top: var(--s6);
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--border-hair);
}
.feedend__status {
  font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-faint);
  background: var(--surface-card); padding: 0 var(--s3); margin-top: calc(var(--s5) * -1);
}

/* ══ 바닥 ══════════════════════════════════════════════════════════ */
/* ⛔footer .wrap 이 두 곳에 따로 있었다(display:flex 와 flex-wrap:wrap).
   같은 것을 두 번 적으면 한쪽만 고쳐진다 — 오늘 네 번째로 나온 모양이다. 한 줄로 합친다. */
footer .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
footer a { color: var(--text-quiet); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--text-accent); }

@media (max-width: 780px) {
  .filters { top: 49px; }
  .daymark { top: 92px; }
  .brand__title { font-size: 16px; }
}

/* ── 홈페이지 바로가기 (제로님 2026-09-10) ──
 * 두 자리: 타이틀 오른쪽(작게)과 바텀(나가는 문). 아이콘은 «회사 로고» 다.
 * ⚠여기 원래 「로고를 또 쓰지 않는다 — 육각형 인라인 SVG 를 쓴다」고 적혀 있었다.
 *   제로님 지적으로 로고로 바꿨는데 이 주석만 옛말로 남아 있었다. */
/* ⛔.tohome 이 .masthead__nav a 와 «같은 값» 을 두 번 적고 있었다. 그래서 한쪽만 고쳐졌다.
   이제 공통은 위에서 한 번만 적고, 여기는 아무것도 덧붙이지 않는다. */
.tohome img { width: 18px; height: 18px; flex: none; }

/* 바텀 — 홈페이지 푸터와 같은 형식(kind · addr · desc) */
.crosslink {
  display: inline-flex; align-items: baseline; gap: var(--s3);
  text-decoration: none; color: var(--text-quiet); flex: 1 1 auto;
  padding: var(--s3) 0;
}
.crosslink img { width: 22px; height: 22px; align-self: center; flex: none; }
.crosslink__kind {
  font-family: var(--font-util); font-size: 11px; letter-spacing: .08em;
  color: var(--text-faint); border: 1px solid var(--border-hair);
  border-radius: 2px; padding: 1px var(--s2);
}
.crosslink__addr { font-family: var(--font-util); font-size: var(--fs-meta); color: var(--text-body); }
.crosslink__desc { font-size: var(--fs-meta); color: var(--text-quiet); }
.crosslink:hover .crosslink__addr, .crosslink:focus-visible .crosslink__addr { color: var(--text-accent); }
.crosslink img { opacity: .75; transition: opacity .12s; }
.crosslink:hover img, .crosslink:focus-visible img { opacity: 1; }

@media (max-width: 780px) {
  .tohome span { display: none; }          /* 좁으면 아이콘만 — aria-label 이 뜻을 지킨다 */
  /* ★2026-09-11 제로님이 아이폰 사파리로 잡으셨다. 여기 flex-direction: column 을 줬더니
     로고·WEB·주소·설명 네 조각이 «각자 한 줄» 을 차지해 바닥이 무너져 보였다.
     좁으니까 세로로 쌓으면 되겠지 하고 준 것인데, 실제로 폰에서 보지 않고 준 값이었다.
     ⇒ 줄바꿈은 «필요한 곳에서만» 한다 — 로고·배지·주소는 한 줄에 두고 설명만 내린다. */
  .crosslink { flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
  .crosslink img { align-self: center; }
  .crosslink__desc { flex-basis: 100%; }        /* 이것만 다음 줄로 */
  footer .wrap { align-items: flex-start; gap: var(--s2); }
}