.home {
  max-width: 1120px;
  margin: 0 auto;
  padding: 38px 20px 65px;
}
.brief-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 26px;
}
.ai-label,
.section-kicker {
  margin: 0;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  letter-spacing: 0.05em;
}
.ai-label i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 5px;
}
.brief-head h1 {
  margin: 11px 0 8px;
  font-size: 32px;
  line-height: 1.28;
  letter-spacing: -0.075em;
}
.brief-head h1 b {
  color: var(--brand);
}
.brief-head > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.brief-count {
  display: flex;
  gap: 28px;
}
.brief-count span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}
.brief-count b {
  color: var(--ink);
  font:
    500 27px "DM Mono",
    monospace;
}
.ai-brief {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 19px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(115deg, var(--brand-soft), var(--surface) 70%);
}
.ai-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--brand);
  color: var(--brand-ink);
  font:
    500 16px "DM Mono",
    monospace;
}
.ai-brief h2 {
  margin: 7px 0 8px;
  font-size: 21px;
  line-height: 1.38;
  letter-spacing: -0.06em;
}
.ai-brief > div > p:not(.ai-label) {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.brief-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}
.brief-tags span {
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.brief-tags .positive {
  background: var(--up-soft);
  color: var(--up);
}
.brief-link {
  align-self: center;
  white-space: nowrap;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.brief-link b {
  margin-left: 6px;
  font-size: 16px;
}
.home-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  margin-top: 24px;
}
.home-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.home-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 18px 19px 14px;
  border-bottom: 1px solid var(--line);
}
.home-panel h2 {
  margin: 5px 0 0;
  font-size: 16px;
  letter-spacing: -0.06em;
}
.home-panel header a {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.rank-row {
  display: grid;
  grid-template-columns: 22px auto 1fr auto 16px;
  gap: 9px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.rank-row:last-child {
  border: 0;
}
.rank-row strong {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.rank-status {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  font-size: 12px;
}
.rank-status.up {
  background: var(--up-soft);
}
.rank-status.mixed {
  background: var(--mixed-soft);
}
.rank-status.down {
  background: var(--down-soft);
}
/*
 * 크기는 `.rank-title` 에 둔다 — 배지가 `font-size: inherit` 로 이 값을 따라야
 * 제목과 같은 줄로 읽힌다(D-441).
 */
.rank-title {
  font-size: 14px;
}
.rank-row b {
  display: block;
}
.rank-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.rank-row em {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  font-style: normal;
}
.rank-row i {
  color: var(--muted);
  font-style: normal;
}
.map-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 14px 20px;
}
.map-flow > div {
  min-width: 98px;
  padding: 12px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  text-align: center;
}
.map-flow .focus {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.map-flow span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.map-flow b {
  font-size: 12px;
  line-height: 1.45;
}
.map-flow > i {
  color: var(--muted);
  font-style: normal;
}
.map-list {
  margin: 0 19px 12px;
  border-top: 1px solid var(--line);
}
.map-list a {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 7px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
}
.map-list b {
  font-size: 12px;
}
.map-list em {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  font-style: normal;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.green {
  background: var(--up);
}
.violet {
  background: var(--mixed);
}
.gray {
  background: var(--muted);
}
.watch {
  display: grid;
  grid-template-columns: 190px repeat(3, 1fr);
  margin-top: 14px;
}
.watch header {
  display: block;
  border: 0;
}
.watch > div {
  padding: 19px;
  border-left: 1px solid var(--line);
}
.watch > div > span {
  display: block;
  color: var(--brand);
  font:
    500 12px "DM Mono",
    monospace;
}
.watch p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.watch p b {
  display: block;
  color: var(--ink);
  font-size: 14px;
}
/* 태블릿까지 단일 열이다 — 기획서 반응형 규칙: 데스크톱은 1024px 부터. */
@media (max-width: 1023px) {
  .home {
    padding: 22px 14px 86px;
  }
  .brief-head {
    display: block;
    padding-bottom: 20px;
  }
  .brief-head h1 {
    margin: 8px 0 7px;
    font-size: 27px;
  }
  .brief-count {
    margin-top: 18px;
    gap: 18px;
  }
  .brief-count b {
    font-size: 21px;
  }
  .ai-brief {
    grid-template-columns: 38px 1fr;
    padding: 17px;
    gap: 12px;
    border-radius: 11px;
  }
  .ai-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 14px;
  }
  .ai-brief h2 {
    font-size: 16px;
    line-height: 1.43;
  }
  .ai-brief > div > p:not(.ai-label) {
    font-size: 12px;
  }
  .brief-tags {
    margin-top: 11px;
  }
  .brief-tags span {
    font-size: 12px;
  }
  .brief-link {
    grid-column: 1/3;
    padding-top: 4px;
    font-size: 12px;
  }
  .home-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  .home-panel {
    border-radius: 8px;
  }
  .home-panel > header {
    padding: 16px 15px 12px;
  }
  .home-panel h2 {
    font-size: 16px;
  }
  .rank-row {
    grid-template-columns: 20px auto 1fr 16px;
    padding: 13px 14px;
  }
  .rank-row em {
    display: none;
  }
  .rank-row .rank-title {
    font-size: 14px;
    line-height: 1.4;
  }
  .map-flow {
    padding: 20px 8px 15px;
    gap: 5px;
  }
  .map-flow > div {
    min-width: 83px;
    padding: 10px 5px;
  }
  .map-flow b {
    font-size: 12px;
  }
  .map-list {
    margin: 0 15px 10px;
  }
  .watch {
    display: block;
    margin-top: 12px;
  }
  .watch header {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
  }
  .watch > div {
    display: flex;
    gap: 12px;
    padding: 13px 15px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .watch > div > span {
    padding-top: 2px;
  }
  .watch p {
    margin: 0;
  }
  .watch p b {
    display: inline;
    margin-right: 5px;
  }
}
/*
 * 작은 폰. **이 블록도 767 이었다** — 뒤에 있어서 앞 블록을 덮어써, 큰 폰에서도
 * 작은 폰용 글자 크기가 적용되고 있었다.
 */
@media (max-width: 480px) {
  /*
   * **폰에서는 아이콘이 열을 차지하지 않는다(D-435).**
   *
   * `.ai-brief` 는 아이콘에 고정 열(54px, 태블릿 38px)을 준다. 390px 폰에서 계산하면
   * 본문이 306px 로 밀린다 — 제목·요약·태그가 전부 카드 왼쪽에서 50px 안쪽으로 들어간다.
   * 폰에서는 한 열로 두고 아이콘을 제목 옆에 인라인으로 앉힌다.
   */
  /*
   * **긴 한글이 상자를 밀어내지 않게 한다.** 그리드 자식의 기본 `min-width` 는 `auto` 라
   * 내용보다 좁아지지 못한다. 그래서 제목이 길면 칸이 넓어지고 상자가 글과 어긋난다.
   */
  .ai-brief > *,
  .rank-row > * {
    min-width: 0;
  }
  .ai-brief h2,
  .rank-row b {
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  /*
   * **등락 표시를 제목 뒤로 보낸다.** 읽는 순서는 "무슨 일인가 → 어느 방향인가" 다.
   * 방향 배지가 앞에 오면 제목이 시작 위치조차 일정하지 않다.
   */
  /* 배지가 본문 칸 안으로 들어가 바깥 칸은 둘이다 — 순위와 본문(D-441). */
  .rank-row {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    padding: 12px 13px;
  }
  /*
   * **폰에서는 화살표를 지운다(D-440).**
   *
   * 행 전체가 링크다. 오른쪽 끝 `→` 는 "여기를 누르세요" 를 한 번 더 말하는 것인데,
   * 폰에서는 그 자리가 아깝다. "전체 보기 →" 도 같다 — 누르면 가는 링크에 화살표를
   * 덧붙일 이유가 없다.
   */
  .rank-row > i,
  .arw {
    display: none;
  }
  /* 배지가 본문 칸 안으로 들어가 바깥 칸은 둘이다 — 순위와 본문. */


  .home {
    padding-top: 16px;
  }
  .brief-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 13px;
  }
  .brief-head .ai-label {
    display: none;
  }
  .brief-head h1 {
    margin: 0;
    font-size: 21px;
    line-height: 1.25;
  }
  .brief-head h1 br {
    display: none;
  }
  .brief-head > div > p:last-child {
    margin-top: 5px;
    font-size: 12px;
  }
  .brief-count {
    gap: 13px;
    margin-top: 0;
  }
  .brief-count b {
    font-size: 16px;
  }
  .brief-count span {
    font-size: 12px;
  }
  /*
   * **폰에서는 아이콘이 열을 차지하지 않는다(D-435).**
   *
   * `32px 1fr` 는 아이콘에 열을 준다. 390px 폰에서 카드 안쪽 폭이 362px 인데 아이콘
   * 32 + 간격 10 을 빼면 본문이 320px 로 밀린다 — 제목·요약·칩이 전부 왼쪽에서
   * 42px 안으로 들어간다. 한 열로 두고 아이콘을 위에 올린다.
   */
  .ai-brief {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border-radius: 9px;
  }
  /*
   * **폰에서 AI 아이콘을 뺀다(D-440).**
   *
   * 카드가 이미 "AI MARKET BRIEFING" 이라고 적고 있다. 같은 말을 아이콘으로 한 번 더
   * 하면서 세로 자리를 먹는다 — 좁은 화면에서 그 자리는 문장 두 줄이다.
   * 데스크톱은 자리가 남으므로 그대로 둔다.
   */
  .ai-mark {
    display: none;
  }
  .ai-brief .ai-label {
    font-size: 12px;
  }
  .ai-brief h2 {
    margin: 4px 0 5px;
    font-size: 16px;
    line-height: 1.38;
  }
  .ai-brief > div > p:not(.ai-label) {
    font-size: 12px;
    line-height: 1.5;
  }
  .brief-tags {
    margin-top: 8px;
  }
  .brief-tags span {
    padding: 4px 5px;
    font-size: 12px;
  }
  .brief-link {
    grid-column: 1 / 3;
    padding-top: 0;
    font-size: 12px;
  }
}


/*
 * 테마 우세 표시. **점 색만으로 두지 않는다** — 옆의 `<b>` 가 `긍정 우세` 처럼 글자로
 * 같은 것을 적는다(기획서 공통 원칙: 텍스트 라벨을 항상 함께 쓴다).
 */
.dot.up {
  background: var(--up);
}
.dot.down {
  background: var(--down);
}
.dot.mixed {
  background: var(--mixed);
}
.dot.neutral {
  background: var(--line);
}

/* 확인할 조건에서 이슈로 넘어가는 링크. */
.watch p a {
  display: inline-block;
  margin-left: 4px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.watch p a:hover {
  text-decoration: underline;
}

/*
 * 조건 칸은 4열 고정이었다 — 조건이 6개까지 나오면 두 줄로 넘치며 칸 높이가 어긋난다.
 * 자동 배치로 두어 개수가 변해도 깨지지 않게 한다.
 */
.watch {
  grid-template-columns: 210px repeat(auto-fit, minmax(200px, 1fr));
}

/* 날짜별 핵심 변화로 넘어가는 링크. 큰 숫자 세 개가 있던 자리다. */
.brief-more {
  align-self: flex-end;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.brief-more:hover {
  border-color: var(--brand);
  color: var(--brand);
}
@media (max-width: 1023px) {
  .brief-more {
    align-self: center;
    padding: 7px 11px;
    font-size: 12px;
  }
}

/* ── 확인할 조건 ─────────────────────────────────────────────────────────── */

/*
 * **이슈 단위로 묶는다.** 조건만 01~06 으로 나열하면 `반대 신호: 개인투자자의 저가 매수세
 * 유입` 을 보고도 무슨 판단을 뒤집는다는 것인지 알 수 없다 — 반대 신호는 방향과 주장이
 * 있어야 뜻이 생긴다.
 */
.watch-panel {
  margin-top: 14px;
}
.watch-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.watch-group {
  padding: 4px 20px 18px;
  border-left: 1px solid var(--line);
}
.watch-group:first-child {
  border-left: 0;
}
.watch-issue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
}
/* 직계 자식만 — `>` 가 없으면 방향 배지 안의 <b>(`부정`)까지 제목 크기가 된다. */
/*
 * **크기는 줄(`.watch-issue`)에 둔다(D-442).** 배지는 `font-size: inherit` 라 조상에서
 * 값을 받는다. `b` 에만 크기를 주면 **배지가 자기 제목보다 커진다** — 실측 제목 13px 에
 * 배지 16px 이었다.
 */
.watch-issue {
  font-size: 16px;
}
.watch-issue > b {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  line-height: 1.5;
}
.watch-issue:hover > b {
  text-decoration: underline;
}
.watch-group dl {
  margin: 14px 0 0;
}
.watch-group dl > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.watch-group dt {
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}
/* 유지 조건은 "그대로 간다", 반대 신호는 "뒤집힌다" — 뜻이 반대라 색도 갈라 둔다. */
.watch-group dt.keep {
  color: var(--brand);
}
.watch-group dt.against {
  color: var(--down);
}
.watch-group dd {
  margin: 0;
  color: var(--muted);
  font:
    400 14px "Noto Sans KR",
    sans-serif;
  line-height: 1.6;
}
@media (max-width: 1023px) {
  .watch-groups {
    grid-template-columns: 1fr;
  }
  .watch-group {
    border-left: 0;
  }
}

/* 관심 종목 빈 상태. `.watch` 격자를 쓰면 3열로 갈라져 어색하다 — 한 줄로 둔다. */
.mywatch {
  margin-top: 14px;
}
.mywatch-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
}
.mywatch-body b {
  display: block;
  font:
    700 16px "Noto Sans KR",
    sans-serif;
}
.mywatch-body a {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.mywatch-body a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/*
 * 패널 제목 한 줄. 영문 표지만 두고 한글 부제와 설명문은 뺀다 — 설명은 물음표로 간다.
 * 위쪽 칸막이(header 경계선)도 없앤다.
 */
.panel-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 18px 20px 12px;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  letter-spacing: 0.05em;
}

/* 관심 종목 빈 상태에서 설명 문단을 뺐다 — 제목 한 줄과 버튼만 남는다. */
.mywatch-body > b {
  display: flex;
  align-items: center;
}

/*
 * 대표 카드 전체가 상세로 가는 링크다. 별도의 "보기" 링크를 두면 사용자가 그 작은 글자를
 * 찾아 눌러야 한다 — 카드를 누르면 열리는 게 자연스럽다.
 *
 * 덮개(`a`)를 카드 위에 깔고, 안쪽 업종 태그만 위로 올려 따로 눌리게 한다.
 * `a` 안에 `a` 를 넣을 수 없어서 겹치는 방식으로 푼다.
 */
.ai-brief {
  position: relative;
}
.brief-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.ai-brief:hover {
  border-color: var(--brand);
}
.ai-brief > div,
.ai-brief .ai-mark {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
/* 안쪽 링크는 다시 눌리게 한다 — 업종 태그는 이슈 검색으로 간다. */
.ai-brief a:not(.brief-cover) {
  pointer-events: auto;
}

/* D-430: 섹터 실측 행. 등락 색은 시세 규칙을 따르고 원인 줄은 이름 아래로 들어간다. */
.market-map .map-list { border-top: 0; }
.map-list .mkt-sector-item { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
.map-list .mkt-sector-item:last-child { border-bottom: 0; }
.map-list .mkt-sector-row { border-bottom: 0; padding: 0; }
.map-list .mkt-sector-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 7px;
  align-items: center;
  font-size: 12px;
}
.map-list .mkt-sector-row .pct.up { color: var(--up); }
.map-list .mkt-sector-row .pct.down { color: var(--down); }
.map-list .map-cause {
  display: block;
  margin: 3px 0 0 17px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.map-note {
  margin: 0 19px 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

/* D-430: WATCH 그룹을 카드로 묶고, 배지·제목은 한 줄, 조건은 기호로 구분한다 —
   라벨("반대 신호")이 매 행 반복되면 무엇의 묶음인지 구분이 안 간다(사용자 실측). */
.watch-group {
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.watch-group + .watch-group { margin-top: 10px; }
.watch-issue { flex-direction: row; align-items: center; gap: 8px; }
/* 같은 화면의 두 목록은 같은 크기다 — 주목할 이슈와 맞춘다(D-442). */
.watch-issue { font-size: 14px; }
.watch-issue > b { flex: 1; }
.watch-group dl > div { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; }
.watch-group dl dt { display: none; }
.watch-group dl dd { margin: 0; font-size: 13px; color: var(--ink); }
.watch-group dl dd::before { content: "·"; margin-right: 7px; color: var(--muted); }
.watch-group dl div:has(dt.against) dd::before { content: "↯"; color: var(--down); }
.watch-group dl div:has(dt.keep) dd::before { content: "✓"; color: var(--up); }

/* D-430 후속: 홈 카드 타이포 리듬 — 단위 중간 줄바꿈과 배지 과대 노출을 막는다. */
.brief-head .nw, .map-cause .nw { white-space: nowrap; }
.brief-tags span { white-space: nowrap; }
.brief-tags { gap: 8px; }
/* 크기는 `.rank-title` 에서 상속한다(D-441) — 여기서 고정하면 제목과 어긋난다. */
.rank-row .dirbadge { padding: 1px 6px; }
.watch-group dl dd { padding-left: 16px; }
.watch-group dl dd::before { margin-left: -16px; display: inline-block; width: 16px; }

/* D-430: 섹터 칩 판정어 색 — 긍정/부정을 색으로 이중 구분(작은 글자 오독 방지). */
.tagrow a b.up { color: var(--up); }
.tagrow a b.down { color: var(--down); }
.tagrow a b.neutral { color: var(--muted); }

/*
 * **제목 줄은 두 칸이다(D-441).** 왼쪽에 제목, 오른쪽에 방향 배지를 고정한다.
 *
 * 제목 뒤에 인라인으로 붙이면 제목 길이에 따라 배지가 들쭉날쭉해서 눈이 매번 찾아야
 * 한다. 오른쪽에 고정하면 한 자리에서 방향을 읽는다.
 *
 * `align-items: baseline` 이라야 배지 글자가 제목 글자와 같은 선에 앉는다.
 */
.rank-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}
/* 배지가 칸을 가지므로 인라인용 여백은 뺀다. */
.rank-title .dirbadge {
  margin-left: 0;
}

/*
 * AI 결과물 옆 한 줄(D-448). 본문보다 작고 흐리게 — 경고지 내용이 아니다.
 * 다만 회색 배경에 묻히지 않게 위에 선을 하나 둔다.
 */
.ai-note {
  /*
   * **카드 전체 폭을 쓴다(D-468).**
   *
   * `.ai-brief` 는 `54px 1fr` 그리드고 이 문단은 세 번째 자식이라, 지정을 안 하면
   * 둘째 줄 **첫 칸(54px)** 으로 떨어진다 — 한 줄에 두세 글자씩 끊겨 세로로 길게
   * 늘어졌다. 모바일(≤480px)은 단일 칸이라 멀쩡해서 **데스크톱·태블릿에서만** 깨졌다.
   */
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}