/* 카드 화면. cutesnail.stream 과 같은 종이 색을 씁니다.
   색은 전부 :root 에 한 번 선언하고, 어두운 화면에서는 값만 바꿉니다.
   세 가지 상태를 다 챙깁니다 — 직접 고른 밝게/어둡게, 그리고 아무것도 안 고른 기본. */

:root {
  --paper:   #f4f5f2;
  --card:    #ffffff;
  --ink:     #1b2127;
  --muted:   #5d6670;
  --faint:   #8a9099;
  --rule:    #dcded8;
  --rule-2:  #eceee8;
  --seal:    #9e3328;
  --seal-bg: #f3e4e1;
  --gold:    #a9834f;
  --gold-bg: #f5efe4;
  /* 글자로 쓰는 금색은 한 단 더 짙습니다. 위의 금색은 종이 위에서 3:1 밖에
     안 나와, 연도나 회사 이름처럼 작은 글자에 쓰면 읽다가 눈이 아픕니다.
     테두리·밑줄·바닥처럼 읽지 않는 자리에는 위의 것을 그대로 씁니다. */
  --gold-ink: #7a5c30;
  --shadow:  0 1px 2px rgba(27, 33, 39, .05), 0 8px 24px rgba(27, 33, 39, .05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #14181b;
    --card:    #1c2126;
    --ink:     #e7eae4;
    --muted:   #a2aab1;
    --faint:   #79828a;
    --rule:    #2e353b;
    --rule-2:  #252b30;
    --seal:    #e08a7a;
    --seal-bg: #2c2220;
    --gold:    #cfa76c;
    --gold-bg: #2b2419;
    /* 어두운 바닥에서는 밝은 금색이 이미 8:1 이라 더 짙게 할 것이 없습니다. */
    --gold-ink: #cfa76c;
    --shadow:  0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

:root[data-theme="dark"] {
  --paper:   #14181b;
  --card:    #1c2126;
  --ink:     #e7eae4;
  --muted:   #a2aab1;
  --faint:   #79828a;
  --rule:    #2e353b;
  --rule-2:  #252b30;
  --seal:    #e08a7a;
  --seal-bg: #2c2220;
  --gold:    #cfa76c;
  --gold-bg: #2b2419;
  --gold-ink: #cfa76c;
  --shadow:  0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── 머리 — 명함을 한 칸으로 압축한 자리 ── */

.head {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* 머리 맨 윗줄 — 왼쪽에 상호, 오른쪽에 다른 얼굴로 가는 작은 문.
   이력에서는 「모바일명함」, 명함에서는 「이력 보기」가 섭니다.

   한 줄이 아니라, 단추를 오른쪽 위에 띄우고 문장이 그 밑으로 감기는
   모양입니다. 푸는 이유는 하나입니다 — 영문은 같은 뜻을 적는 데 한글의 세 배
   넘는 글자를 씁니다. 360px 명함에서 영문 한 줄은 253px 를 불러 쓰는데,
   오른쪽 단추(146px)와 나란히 서면 남는 자리가 130px 입니다. 단추 글자를
   줄이든 글씨를 줄이든 닿지 않는 차이라, 줄을 나누는 것 말고는 답이 없었습니다. */
.head-top { display: block; }
.head-top::after { content: ""; display: block; clear: both; }

.corner {
  float: right;
  margin-left: 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--gold-ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .2rem .7rem;
}

.corner:hover { border-color: var(--gold); background: var(--gold-bg); }

/* 맨 위 줄. 자리가 모자라면 잘라 숨기지 않고 다음 줄로 내려갑니다.
   오른쪽 단추가 띄워 있어서 첫 줄만 짧고, 둘째 줄부터는 온폭을 씁니다.
   가운데 정렬하는 명함 머리 안에서도 이 줄은 왼쪽에 붙여 둡니다. */
.brand {
  margin: 0;
  min-width: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  text-align: left;
  /* 한글은 띄어쓰기에서만 감깁니다. 이것이 없으면 「기록으 / 로」처럼
     말 한가운데가 갈립니다. 띄어쓰기가 없는 긴 덩어리만 예외로 자릅니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--gold-ink);
}

/* 이름 위 동그라미. 그림은 네모로 와도 원으로 잘립니다 — 배경이 꽉 찬
   표지(검은 네모·남색 네모)는 원 안에서 오히려 또렷합니다.
   테두리를 한 겹 두르는 것은 밝은 표지가 들어왔을 때 흰 종이에 묻히지
   않게 하려는 것입니다. 이력에서는 왼쪽에, 명함에서는 가운데에 섭니다. */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .3rem 0 .15rem;
}

.logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  object-fit: cover;
  background: var(--card);
}

.head h1 {
  margin: 0;
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.head .sub {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.head .role {
  margin: .4rem 0 0;
  align-self: flex-start;
  padding: .3rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink);
}

.head .quote {
  margin: .5rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-2);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.65;
}

/* ── 연락처 ── */

.contacts {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.contact {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .35rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  font-size: .875rem;
}

a.contact:hover,
a.contact:focus-visible {
  border-color: var(--gold);
  background: var(--gold-bg);
}

a.contact:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 긴 주소가 들어와도 이름표는 줄어들지 않고, 값 쪽이 접힙니다.
   이 두 줄이 없으면 자리가 모자랄 때 좁은 쪽이 끝까지 짜부라져
   「스 마 트 스 토 어」처럼 한 자씩 서고, 주소는 칸 밖으로 비어져 나갑니다.
   이력 화면과 명함 화면 양쪽에 같이 걸립니다. */
.c-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--faint);
  flex: none;
}

/* anywhere 가 아니라 break-word 인 것이 요점입니다. anywhere 는 <wbr> 로
   일러 준 자리를 무시하고 글자 한복판에서 자릅니다 — 「…sho / p」가 그것입니다.
   break-word 는 끊을 자리가 있으면 거기서만 끊습니다.

   늘어나게(flex: 1 1 auto) 두지 않습니다. 값이 남은 자리를 다 먹으면
   명함 쪽의 가운데 맞추기(justify-content: center)가 죽어, 알약마다 글이
   왼쪽으로 쏠립니다. 접힌 뒷줄이 제자리에 서는 것은 값이 늘어나서가 아니라
   값이 제 칸을 가진 덕이고, 그것은 기본값으로도 그대로입니다. */
.c-value {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: break-word;
}

/* 선 아이콘. 글자 크기를 따라 줄고 빛깔도 글자에서 받아 옵니다 — 이름표보다
   여린 자리라 굵기를 올리지 않습니다. 「무엇인지」만 말하고 비켜서는 몫입니다. */
.i {
  width: 1em;
  height: 1em;
  flex: none;
  align-self: center;
  color: var(--faint);
}

/* 연락처 칸의 아이콘만 한 줄 높이(1lh)만 한 자리를 갖습니다. 그림 자체는
   그 안에서 저 혼자 가운데에 섭니다 — viewBox 가 알아서 합니다.

   이렇게 하는 까닭 둘.
   · 값이 두 줄로 접혀도 아이콘이 첫 줄에 남습니다. 가운데(center)로 두면
     두 줄 사이로 내려앉아 첫 줄의 이름표와 어긋납니다.
   · 여백으로 밀어 내리면 그 값이 소수점(.35em = 4.9px)이라, 명함을 그림으로
     저장할 때 획 끝이 한 줄 깎입니다. 밀지 않고 자리를 크게 줍니다.

   1lh 는 그 자리에 실제로 걸린 줄 높이를 그대로 따라가서, 명함 쪽 알약처럼
   줄 높이가 다른 데서도 따로 적을 것이 없습니다. 모르는 브라우저는 위의
   1.7em 에 머무릅니다 — 이력 화면의 줄 높이와 같은 값입니다. */
.contact > .i {
  align-self: flex-start;
  height: 1.7em;
  height: 1lh;
}

/* 전화는 이어지는 것끼리 한 칸에 모입니다. 위아래로 나뉘어 서면 한 사람의
   번호 둘이 아니라 서로 다른 칸처럼 보입니다 — 가운뎃점 하나가 그것을 막습니다. */
.contact.phones { flex-wrap: wrap; gap: .4rem; }

/* 이름표가 길면 번호 아래로 내려갑니다. 번호 자체는 절대 끊기지 않습니다 —
   「0507-1424-」에서 줄이 넘어가면 번호가 아니라 글자 무더기로 보입니다. */
.contact.phones a {
  color: inherit;
  text-decoration: none;
}

.contact.phones .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.contact.phones a:hover { color: var(--gold-ink); }
.contact.phones .dot { color: var(--faint); }

/* 번호 뒤에 붙는 작은 이름표 — 「0507-1424-4924 (매장)」처럼 읽히게. */
.contact.phones .tag {
  margin-left: .3em;
  font-size: .82em;
  color: var(--faint);
}

/* 맨 앞 웹주소는 꽉 찬 알약입니다 — 두 얼굴 다. 이 카드에서 눌러 보라고
   내놓은 자리가 하나라는 것을 빛깔로 말합니다. */
a.contact.cta,
a.contact.cta:hover,
a.contact.cta:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
  border-radius: 999px;
  padding: .45rem 1.1rem;
}

a.contact.cta .c-label,
a.contact.cta .i { color: var(--card); opacity: .7; }
a.contact.cta:hover { background: var(--gold); border-color: var(--gold); }

/* 나가는 화살표는 주소 뒤에 붙습니다. 글 흐름 안에 있어야 명함이 세로로
   포개질 때도 주소를 따라갑니다 — 따로 두면 혼자 한 줄을 차지합니다. */
.c-value .i {
  display: inline-block;
  vertical-align: -.1em;
  margin-left: .35em;
}

/* ── 명함 단추 ── */

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-2);
}

.act {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

/* hidden 은 display 값이 있으면 지고 마는데,
   공유·홈 화면 단추는 숨긴 채 내려오므로 여기서 다시 누릅니다. */
.act[hidden] { display: none; }

.act:hover,
.act:focus-visible { border-color: var(--gold); background: var(--gold-bg); }
.act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 첫 단추는 이 카드에서 가장 많이 누를 자리입니다. */
.acts .act:first-child {
  border-color: var(--seal);
  background: var(--seal-bg);
  color: var(--seal);
}
.acts .act:first-child:hover,
.acts .act:first-child:focus-visible { border-color: var(--seal); }
.acts .act:first-child:focus-visible { outline-color: var(--seal); }

/* ── 쌓창 ── */

.sheet {
  margin: auto;
  padding: 1.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: center;
}

.sheet::backdrop { background: rgba(0, 0, 0, .45); }

.sheet-t { margin: 0 0 1.1rem; font-size: .9rem; color: var(--muted); }

/* QR 그림은 어둠에서도 흰 바탕입니다 — 그래야 사진기가 읽습니다. */
.qr {
  display: block;
  width: 100%;
  max-width: 16.5rem;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--rule-2);
  background: #fff;
}

.sheet-u {
  margin: .8rem 0 1.25rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .75rem;
  color: var(--faint);
  word-break: break-all;
}

.how {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
  text-align: left;
  font-size: .875rem;
  color: var(--muted);
}

.how li { margin: .35rem 0; }

/* 안드로이드는 메뉴 한 번이라 걸음을 셀 것이 없습니다. 번호 없이 한 줄. */
.how1 {
  margin: 0 0 1.25rem;
  text-align: left;
  font-size: .875rem;
  color: var(--muted);
}

/* 겪고 나서야 아는 이야기 — 카톡 안에서는 안 되고, 네이버는 파일을 받아
   놓고도 열어 주지 않는다는 것. 걸음 아래에 선 하나를 긋고 붙입니다. */
.sheet-n {
  margin: 0 0 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-2);
  text-align: left;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
}

.how b,
.how1 b,
.sheet-n b { color: var(--ink); font-weight: 500; }

/* ── 이력 ── */

.block { display: flex; flex-direction: column; gap: .75rem; }

.block h2 {
  margin: 0;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--gold);
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-weight: 700;
  font-size: 1.4rem;
}

.block .note {
  margin: 0;
  color: var(--faint);
  font-size: .85rem;
}

.rows { list-style: none; margin: .25rem 0 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule-2);
}

.row:first-child { border-top: 0; }
.row.hl .r-value { color: var(--seal); }

/* 연도. 빈 줄은 앞 줄에 이어지는 항목이라 비워 둔 채로 둡니다.
   칸 너비 8.5rem 은 「2019~현재」에 세 글자 배지까지 한 줄에 서는 폭입니다 —
   7rem 이던 때는 「최초」가 연도 밑으로 떨어져 두 줄이 되었습니다. */
.r-when {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

.r-what { min-width: 0; }

.r-value {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.r-sub {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 「1세대」 배지 — 연도 옆에 섭니다. 연도 칸이 좁으면 연도 밑으로 내려옵니다. */
.rank {
  display: inline-block;
  vertical-align: baseline;
  margin-left: .5rem;
  padding: .1rem .5rem;
  line-height: 1.5;
  background: var(--seal-bg);
  color: var(--seal);
  border-radius: 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  color: var(--faint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .06em;
}

footer p { margin: 0; }

/* 발치 둘째 줄 — 무엇으로 만들었는지. 읽으라고 둔 글이 아니라 남겨 두는
   기록이라, 한 발 물러선 밝기로 둡니다. 비어 있으면 서지 않습니다. */
.credit { opacity: .75; }

/* 아직 안 켠 언어를 관리자가 들여다볼 때의 띠. 눈에 걸리라고 둔 것이라
   일부러 안 예쁩니다 — 이 화면이 지금 공개된 것이 아님을 잊으면 안 됩니다. */
.draft {
  margin: 0 0 1rem;
  padding: .55rem .85rem;
  border: 1px dashed var(--seal);
  border-radius: 2px;
  color: var(--seal);
  font-size: .8rem;
  line-height: 1.6;
}
.draft a { color: inherit; }

/* 언어 고르개 — 두 얼굴 다 머리 위 알약입니다. 명함은 받자마자 제 말을
   찾는 자리라 맨 위에 두었고, 이력도 끝까지 내려가서 고르게 할 것이 아니었습니다.
   지금 보고 있는 말은 링크가 아니라 그냥 글자입니다 — 제자리로 다시 보내는
   링크는 누를 이유가 없으니까요. 이력에서는 오른쪽, 명함에서는 가운데. */
.langs.pills {
  display: flex;
  align-self: flex-end;
  gap: .15rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
}

.langs.pills a,
.langs.pills [aria-current] {
  color: var(--muted);
  text-decoration: none;
  padding: .3rem .85rem;
  border-radius: 999px;
}

.langs.pills a:hover { color: var(--ink); background: var(--rule-2); }
.langs.pills [aria-current] { color: var(--ink); background: var(--rule-2); }

/* ── 모바일명함 ── */
/* 이력은 읽는 것이고 명함은 건네는 것입니다. 한 손에 드는 세로 카드가
   화면 가운데에 서고, 단추는 카드 바깥 아래에 따로 섭니다 — 건네받은
   사람이 「무엇을 눌러라」가 아니라 이름부터 보게 하려고요. */

body.mini main {
  /* 23rem 이던 것을 25rem 으로. 전화기에서는 어차피 화면이 좁아 그대로지만,
     책상 화면에서 「웹페이지 marshallspeaker.shop ↗」이 한 줄에 섭니다. */
  max-width: 25rem;
  min-height: 100vh;
  min-height: 100dvh;
  /* 가운데에 세우되, 내용이 화면보다 길어지면 가운데 맞춤을 포기합니다.
     그냥 center 로 두면 넘친 위쪽이 화면 밖으로 밀려 아예 못 보게 됩니다. */
  justify-content: center;
  justify-content: safe center;
  gap: 1.25rem;
  padding: 1.5rem 1rem 2rem;
}

body.mini .langs.pills { align-self: center; }

body.mini .head {
  border-radius: 1.25rem;
  padding: 2rem 1.25rem 1.75rem;
  text-align: center;
  align-items: center;
  gap: 0;
}

/* 명함은 폭이 좁고, 이 자리에 한 문장이 들어올 수도 있습니다.
   자간을 덜 벌려 글자 몇 개를 더 앉힙니다. */
body.mini .head-top { width: 100%; margin-bottom: 1.5rem; }
body.mini .corner { margin-left: .6rem; }
body.mini .brand { letter-spacing: .06em; }
body.mini .head h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
body.mini .logos { justify-content: center; margin-bottom: .35rem; }
body.mini .logo { width: 3.25rem; height: 3.25rem; }
body.mini .sub { margin-top: .5rem; font-size: .85rem; }
body.mini .role { margin-top: .9rem; align-self: center; }

/* 한마디 위의 작은 꺾쇠. 줄 하나를 긋는 것보다 가볍게 끊어집니다.
   글이 아니라 무늬라, 읽는 기계에는 안 잡히는 자리에 둡니다. */
body.mini .quote {
  position: relative;
  margin-top: 1.7rem;
  padding-top: 1.7rem;
  border-top: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.mini .quote::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: 50%;
  width: .5rem;
  height: .5rem;
  margin-left: -.28rem;
  border-right: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  transform: rotate(45deg);
}

/* 연락처는 한 줄에 하나씩. 전화·메일은 테두리 없는 조용한 줄로 두고,
   이름표를 값 뒤로 돌립니다 — 「0507-1424-4924 (매장)」처럼 읽히게. */
body.mini .contacts {
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-2);
}

body.mini .contact {
  justify-content: center;
  border-color: transparent;
  padding: .3rem .5rem;
  min-width: 0;
}

body.mini .contact:not([data-kind="url"]) .c-label { order: 2; }

/* 웹주소는 눌러 보라고 둔 자리입니다. 건네는 말 그대로 한 줄에 세웁니다 —
   「웹페이지 marshallspeaker.shop ↗」.
   다만 한 줄이 안 되는 주소가 있습니다(스마트스토어 쪽이 그렇습니다).
   그때는 이름표가 주소 위로 접힙니다 — 글자를 줄여 억지로 한 줄에 밀어
   넣는 것보다 접히는 편이 읽힙니다. 맨 앞 하나만 꽉 찬 단추입니다. */
body.mini .contact[data-kind="url"] {
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem .45rem;
  margin-top: .5rem;
  padding: .55rem 1rem;
  border-color: var(--rule);
  border-radius: 999px;
  line-height: 1.45;
}

body.mini .contact[data-kind="url"] .c-label { white-space: nowrap; }
body.mini .contact[data-kind="url"] .c-value { font-weight: 500; font-size: .84rem; }

/* 단추 넷은 카드 밖, 종이 바닥 위에 뜹니다. */
body.mini .acts {
  margin: 0;
  padding: 0;
  border-top: 0;
  justify-content: center;
  gap: .4rem;
}

body.mini .act {
  border-radius: 999px;
  padding: .45rem .9rem;
  font-size: .775rem;
}

body.mini footer {
  border-top: none;
  padding-top: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
}

/* 좁은 화면에서는 연도를 값 위로 올립니다. 8.5rem 을 떼어 주면
   긴 이력 줄이 두세 글자씩 끊어지기 때문입니다. */
@media (max-width: 34rem) {
  main { padding-top: 1.5rem; gap: 2rem; }
  .head { padding: 1.5rem 1.25rem 1.25rem; }
  .row { grid-template-columns: 1fr; gap: .15rem; }
  .r-when { line-height: 1.5; }
  .r-when:empty { display: none; }
}