/* 홈 전용 층 (2026-09-04, extract 이후)
 *
 * 세계 자체는 `world.css`로 나갔다 — 토큰 재정의, 셸, 상태 블록, 모션은 어느
 * 화면에나 붙으므로 여기 있을 이유가 없었다. 이 파일에는 **홈에만 있는 부품**만
 * 남는다: 상단 시각 표시, 값 칸의 유령 셀, 보드의 빈 자리, 타일의 점등.
 *
 * 싣는 순서: `monitor.css` → `tokens.css` → `console.css` → `world.css` → 여기.
 *
 * extract를 하면서 §4 범례 규칙을 통째로 지웠다. `.tile-name`·`.tile-tag`·
 * `.tile-basis`·`.spark-period`·`.tile-unit`이 이미 전부 `var(--ink-2)`나
 * `var(--ink-3)`를 쓰고 있어서, 토큰을 덮은 순간 저절로 따라온다 — 죽은 코드였다.
 * 그중 `.tile-basis`는 특히 손대면 안 되는 자리였다. 기준일 표기를 `--ink-3`로
 * 낮춘 것은 PRODUCT.md가 금지하는 변경이다("기준일·출처·한계 표기가 작아지거나
 * 접히는 변경은 개선이 아니다"). 원래의 `--ink-2`로 돌아갔다.
 */

/* ======================================================================
 * 1. 상단 표시 — 이 세계가 문자 그대로 세그먼트여도 되는 유일한 자리
 *
 * 값에는 손대지 않으므로 "데이터는 중립"과 안 부딪힌다. 세션 배지는 새로
 * 만들지 않고 테이프에 있던 것을 올렸다 — `monitor.js`가 id로 찾는다.
 * ====================================================================== */
/* **두 층이다** — 위는 조건, 아래는 값.
 *
 * 여섯 조각을 한 밑줄에 나란히 두었더니 "코스피 200 / +2.49% / 1,132.70 /
 * 9/7 마감 이후 / 방금 갱신 / ● 정규장 진행 중"이 끊김 없는 한 줄로 읽혔다
 * (운영자 2026-09-08 "너무 올드해"). 조각은 다 필요한 것들이고 문제는 **층이
 * 없다**는 것이었다. 세션과 갱신 시각은 값의 각주가 아니라 화면의 조건이다. */
.page-landing .seg-readout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 0;
}
.page-landing .seg-status {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-3); min-height: 20px;
}
/* 이 자리는 두 번 바뀌었다 — 벽시계, 그다음 개장 카운트다운. 둘 다 같은
   잣대에 걸렸다: 첫 화면에서 가장 큰 글자가 **사용자가 물으러 온 것**이
   아니었다. 시계는 폰 상태 표시줄이 10mm 위에서 이미 주고, 카운트다운은
   기기가 못 주는 값이긴 하나 오늘 밤 할 수 있는 일을 하나도 바꾸지 않는다.

   지금 서는 것은 국내장이 닫힌 뒤 대표 지수가 움직인 만큼이다. `--fs-hero`
   (44)는 "한 화면을 대표하는 단일 지수 하나"에만 허용되는 단이고, 코스피200이
   정확히 그 정의에 든다 — 이 단이 드디어 제 용도로 쓰인다. */
/* 주어 · 값 · 기준이 각자 줄을 갖는다. 셋을 한 줄로 이으면 44px 옆의 12px이
   각주로 읽히는데, 그 각주가 사실 이 화면의 두 번째 숫자다. */
.page-landing .seg-hero {
  grid-column: 1; grid-row: 1;
  display: grid; gap: 2px;
  justify-items: start;
  text-decoration: none;
}
@media (max-width: 640px) {
  .page-landing .seg-readout { grid-template-columns: minmax(0, 1fr); }
  .page-landing .seg-status {
    grid-column: 1; grid-row: 1;
    justify-content: flex-start;
  }
  .page-landing .seg-hero { grid-column: 1; grid-row: 2; }
}
.page-landing .seg-hero-head {
  display: block;
}
/* 등락률과 지수 레벨은 한 사건의 두 얼굴이라 눈이 한 번에 읽어야 한다.
   200% 확대에서만 접힌다(WCAG 1.4.4). */
.page-landing .seg-hero-line {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
}
/* **12 → 22.** 44 옆의 12는 단이 아니라 절벽이다. 색은 중립(`--ink`) —
   색은 등락만 갖는다(The Value Wears No Colour Rule). */
.page-landing .seg-hero-level {
  color: var(--ink);
  font: 700 var(--fs-xl)/1 var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.page-landing .seg-hero-value {
  position: relative;
  font: 700 var(--fs-hero)/1 var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* 등락률은 `The Value Wears No Colour Rule`이 색을 허용하는 유일한 대상이다 —
   값이 아니라 **신호**이기 때문이다. 여기에 색이 드는 것은 규칙 위반이 아니라
   규칙 그 자체다. */
.page-landing .seg-hero.up .seg-hero-value { color: var(--up); }
.page-landing .seg-hero.down .seg-hero-value { color: var(--down); }
.page-landing .seg-hero.flat .seg-hero-value { color: var(--ink-2); }
/* 히어로에는 유령 셀을 두지 않는다.
 *
 * 시계에서 그대로 옮겨 왔다가 두 가지를 어겼다. 하나는 세기다 — Ghost Cell
 * Rule이 "값이 켜져 있을 때는 판의 격자가 비치는 정도(.18)로만, 두 번 다
 * 여기서 너무 진해 숫자 뒤가 얼룩졌다"고 적어 뒀는데 `.55`를 줬다(운영자가
 * 실제로 그 얼룩을 봤다).
 *
 * 다른 하나가 더 근본이다. **이 장치의 본업은 부재를 그리는 것**인데 히어로는
 * 값이 없으면 스스로 숨는다(`host.hidden = true`) — 부재를 보여줄 수 없는
 * 자리의 유령 셀은 장식이다. 세기를 낮추는 대신 없앤다.
 *
 * 타일 값은 유령 셀을 그대로 지킨다. 거기는 빈 칸(`7ch`)이 실제로 서는
 * 자리라 이 장치가 제 일을 한다. 규칙은 형태가 아니라 **기능**을 따른다. */
.page-landing .seg-hero:hover .seg-hero-label { color: var(--ink-2); }
/* 주어를 한 단 올린다. 크기가 아니라 **잉크 단**으로 가른다 — 이름은 읽는
   글이고 레벨·기준선은 훑는 범례다. 셋을 한 색으로 두면 가장 큰 글자가 무엇의
   등락인지 안 밝히게 된다(운영자 지적 2026-09-04). */
.page-landing .seg-hero-name {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0;
}
.page-landing .seg-hero-context {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}
/* 구분자는 **사이**에만 선다. `::before`를 전부에 붙였더니 첫 조각 앞에도
   붙어서 "· 1,086.30 · 9/4 15:30 이후"처럼 왼쪽에 아무것도 없는 가운뎃점이
   남았다(실기기 실측 2026-09-06, 412·390·360px 전부). 그 점이 둘째 줄 맨 앞에
   서면서 라벨 전체를 13px 오른쪽으로 밀어 이름과도 어긋났다. 구분자는 두 개가
   있을 때만 뜻이 있다. */
.page-landing .seg-hero-meta + .seg-hero-meta::before {
  content: "·";
  margin: 0 .35em;
  color: var(--ink-3);
}
.page-landing .seg-hero:hover .seg-hero-name-main { color: var(--accent); }

/* 라벨은 값이 무엇인지만 말한다 — 실크스크린 범례다. */
.page-landing .seg-hero-label {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
}
/* **값이 도착했다는 것을 한 번 말한다.**
 *
 * 폴링이 5초마다 도는데 화면은 아무 말도 안 했다 — 새 판이 와도 조용했다.
 * `motion.js`가 값이 실제로 바뀔 때만 `.is-arrived`를 붙인다.
 *
 * 번쩍이는 것은 **글자가 아니라 뒤의 면**이다. 등락 색을 건드리면 오른 것이
 * 잠깐 다른 색이 되고, 그건 값을 거짓말하게 만든다. */
/* **장식은 기본이 안 보여야 한다.**
 *
 * 첫 판은 값 위에 `currentColor` 면을 덮고 애니메이션으로 걷었다. 그런데
 * 애니메이션이 끝난 뒤에도 `opacity: 1`로 남아 **등락률을 통째로 가렸다**
 * (운영자 실측 2026-09-08: "코스피는 하약색으로 퍼센트가 가려지고").
 * `animation-fill-mode: forwards`가 마지막 키프레임을 붙들어 줄 것으로
 * 믿었는데 실측은 그렇지 않았다.
 *
 * 원인을 더 파는 대신 **덮을 수 없는 장치로 바꾼다.** 값 아래 2px 밑줄이면
 * 애니메이션이 안 돌든 중간에 멈추든 숫자를 가릴 방법이 없다. 그리고 기본
 * 상태를 `opacity: 0`으로 둔다 — 보이는 것이 애니메이션의 실행에 의존하면
 * 그 의존이 깨질 때 최악의 상태로 남는다.
 *
 * `forwards`도 뺀다. 끝나면 기본으로 돌아가는 것이 이 장치의 정의다. */
@keyframes seg-arrive {
  0%   { opacity: 0;  transform: scaleX(.25); }
  20%  { opacity: .95; transform: scaleX(1); }
  100% { opacity: 0;  transform: scaleX(1); }
}
.page-landing .seg-hero-value { position: relative; }
.page-landing .seg-hero-value::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  border-radius: 1px; background: currentColor;
  opacity: 0; transform: scaleX(.25); transform-origin: left center;
  pointer-events: none;
}
.page-landing .seg-hero-value.is-arrived::after {
  animation: seg-arrive .62s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .page-landing .seg-hero-value.is-arrived::after { animation: none; }
}
.page-landing .seg-readout .session-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); letter-spacing: .04em;
}
/* 세션 점은 켜져 있는 유일한 램프다. 장이 열려 있으면 청록, 닫혀 있으면 꺼짐.
   `monitor.js`가 `classList.toggle("open", ...)`으로 켠다 — data 속성이 아니다. */
/* **꺼진 램프도 램프로 보여야 한다.**
 *
 * 소등 상태를 `--seg-ghost` 면만으로 그렸더니 지면과 거의 같아서 점이 사라진
 * 것처럼 보였다(운영자 지적 2026-09-04). 실제 계기의 소등 램프도 테두리는
 * 남는다 — 안 켜진 것과 없는 것은 다르다.
 *
 * 색을 새로 주지 않는 이유: 이 세계에서 색은 신호(등락)와 동작(파랑)만 말한다.
 * 장 마감은 둘 중 어느 것도 아니므로 **형태**로 말한다. 유령 셀이 값에 대해
 * 하는 일을 램프에 대해 하는 것이다. */
.page-landing .seg-readout .session-badge i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--seg-ghost);
  /* `--line-strong`으로는 지면 위 1.59:1이라 여전히 흐렸다. 비텍스트 요소의
     바닥은 3:1(WCAG 1.4.11)이고, 잉크를 70% 섞으면 3.71로 넘는다. 그래도
     `--ink-3` 전체보다는 조용해서 "켜졌다"로 오해되지 않는다. */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink-3) 70%, transparent);
}
.page-landing .seg-readout .session-badge.open i {
  /* **점은 글자와 같은 색이다.**
   *
   * 이 배지 안에서 두 색이 갈려 있었다 — 글자는 `--green`(#34d8a4)인데 점만
   * `--seg-live`(#5ac8fa)라, 한 알약 안에서 초록 글자 옆에 파란 점이 섰다
   * (운영자 지적 2026-09-07). 값이 아니라 **토큰을 맞춘다**: 글자가 쓰는 그것을
   * 그대로 쓰면 나중에 토큰이 바뀌어도 둘이 다시 갈리지 않는다.
   *
   * 번짐은 되살린다. 처음에 "너무 튄다"를 번짐 탓으로 읽고 껐는데, 문제는 세기가
   * 아니라 **색**이었다(운영자 정정: "원 glow는 괜찮았어"). 켜진 램프가 빛을
   * 내는 것은 이 세계가 계기를 흉내 내는 방식이고, 그 자리는 여기 하나뿐이다.
   *
   * 꺼진 램프는 그대로 안쪽 테두리로 형태를 남긴다 — 켜짐은 빛으로, 꺼짐은
   * 형태로. */
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
/* 신선도 — 이 화면의 유일한 authored moment.
 *
 * 값이 안 바뀌어도 경과 시간은 흐르고, **새 판이 실제로 도착했을 때만** 한 번
 * 켜진다. 가짜 틱 없이 살아 있음을 내보내는 유일하게 정직한 방법이다.
 * 도착은 확신이므로 들어올 때 빠르고 나갈 때 느리다. */
.page-landing .seg-fresh {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@keyframes seg-arrive {
  0%   { color: var(--seg-live); }
  100% { color: var(--ink-3); }
}
.page-landing .seg-fresh.is-fresh { animation: seg-arrive .9s cubic-bezier(.16, 1, .3, 1) 1; }
@media (prefers-reduced-motion: reduce) {
  /* 색 변화는 남긴다 — 도착했다는 **사실**이 이 표시의 내용이다. 길이만 줄인다. */
  .page-landing .seg-fresh.is-fresh { animation-duration: .01ms; }
}

@media (max-width: 560px) {
  .page-landing .seg-readout { flex-wrap: wrap; gap: var(--sp-2); }
  .page-landing .seg-hero-value { font-size: var(--fs-display); }
  /* 둘째 줄로 내리는 것을 **이름과 성격을 합친 제목**으로 바꾼다.
     `코스피 200 24시간 시장 참고가`가 값과 떨어져도 한 주어로 읽힌다.
     기준값과 기준일은 등락률이 **무엇에 대해 잰 것인지**를 말한다. 그 둘이
     떨어져 있으면 눈이 두 줄을 오간다 — 값 옆에 붙어야 한 번에 읽힌다.

     셋을 한 줄에 넣는 길은 없다. 실측(라이브): 이름 81 + 값 142 + 라벨 141 +
     간격 16 = **380px**이 필요한데 쓸 수 있는 폭은 412px에서 380(딱 맞음),
     390에서 363, 360에서 333, 320에서 293이다. 그래서 줄을 바꾸는 쪽을
     **제목 묶음으로** 정한다 — 한 번 읽고 마는 주어라 값에서 떨어져도
     잃는 것이 적다.

     라벨은 `flex: 1 1 0`으로 남은 폭을 받는다. 넘칠 때 값 아래로 떨어지는
     대신 **자기 칸 안에서** 줄을 바꾸므로, 폭이 어떻든 값 옆자리를 지킨다
     (실측 412·390·360·320px 모두 값과 같은 줄 · 한 줄 · 가로 넘침 0).
     제목 묶음의 폭을 100%로 못 박아 우연히 넘기지 않는다. */
  .page-landing .seg-hero-head { width: 100%; }
  .page-landing .seg-hero-label { flex: 1 1 0; min-width: 0; }
}

/* 소리로만 있는 자리. `.odo-readable`과 같은 수법이다. */
.page-landing .seg-announce {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* 값의 기준 — 접지 않고 줄이지 않는다.
 *
 * 13px(`--fs-sm`)이다. DESIGN.md가 "해석·방법 문장은 라벨보다 한 단 위"라고
 * 적어 뒀고, 그 이유가 "읽으라고 쓴 줄이 훑는 줄과 같은 크기면 안 읽힌다"이다.
 * 12px 범례로 내리면 이 줄은 없는 것과 같아진다. */
.page-landing .board-basis {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.page-landing .board-basis strong { color: var(--ink); font-weight: 700; }

/* ======================================================================
 * 2. 유령 셀 — 비어 있음을 그리는 장치
 *
 * 셋으로 산다:
 *   ① 값이 켜져 있을 때 — 판의 격자가 비치는 정도(.18)
 *   ② 값 칸은 있는데 글자가 없을 때 — 또렷하게(.9). 이게 본업이다
 *   ③ 타일이 아직 하나도 없을 때 — 보드 자리에 꺼진 칸을 세운다
 *
 * ②의 판정이 `:empty`였을 때는 영원히 거짓이었다 — `console.js:409`가 값 칸에
 * 언제나 `<span>`을 넣기 때문이다. 그리고 빈 span은 높이가 0이라 유령이 그려질
 * 자리 자체가 없었다(실측 175x0 → min-height로 175x38).
 * ====================================================================== */
.page-landing .tile-value {
  position: relative;
  width: max-content;            /* 칸은 값의 자릿수만큼만 선다 */
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.page-landing .tile-value::before {
  content: "";
  position: absolute; inset: .14em 0 .1em;
  background-image: linear-gradient(
    90deg,
    var(--seg-ghost) 0 calc(var(--seg-cell) * .72),
    transparent calc(var(--seg-cell) * .72) var(--seg-cell)
  );
  background-size: var(--seg-cell) 100%;
  background-repeat: repeat-x;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.page-landing .tile-value > * { position: relative; z-index: 1; }

.page-landing .tile-value > span:empty { display: inline-block; min-width: 7ch; min-height: 1em; }
.page-landing .tile-value:has(> span:empty)::before { opacity: .9; }

/* 꺼진 칸이 켜지는 순간이 이 화면의 유일한 authored moment다. 값이 늦게 오는
   lane(4G·느린 레인)에서 유령이 잦아들며 숫자가 선다. 자연 감속 곡선을 쓰고,
   나가는 것이 들어오는 것보다 빠르지 않게 — 도착은 확신이어야 한다. */
.page-landing .tile-value::before { transition: opacity .45s cubic-bezier(.16, 1, .3, 1); }
.page-landing .tile { transition: box-shadow .45s cubic-bezier(.16, 1, .3, 1), border-color .15s, background .15s; }
@media (prefers-reduced-motion: reduce) {
  /* 움직임은 줄이되 **뜻은 남긴다** — 유령이 걷히는 사실은 그대로 보이고,
     시간만 짧아진다. 상태 변화를 지우는 것은 "줄이기"가 아니다. */
  .page-landing .tile-value::before,
  .page-landing .tile { transition-duration: .01ms; }
}

.page-landing #board:empty {
  display: block;
  min-height: 148px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    linear-gradient(90deg, var(--seg-ghost-2) 0 calc(var(--seg-cell) * .72),
                    transparent calc(var(--seg-cell) * .72) var(--seg-cell))
    repeat-x var(--panel);
  background-size: var(--seg-cell) 100%;
  animation: seg-unset 1.8s steps(2, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-landing #board:empty { animation: none; opacity: .75; }
}

/* ======================================================================
 * 3. 점등 — 교리의 나머지 절반
 *
 * 값에는 빛을 주지 않는다(1차의 실패가 거기였다). 타일이 서 있다는 것은 그
 * lane이 값을 냈다는 뜻이므로, 타일 위 모서리에 청록 실선이 켜진다.
 * ====================================================================== */
/* 청록 실선을 걷었다(운영자 2026-09-05: "일부러 넣은 건가?").
 *
 * 뜻은 "이 lane이 값을 냈다"였는데, **값이 있는 모든 타일에 켜진다.** 늘 켜져
 * 있는 표시는 신호가 아니라 무늬다 — 화면에서 그것이 꺼진 판을 보는 일이
 * 사실상 없다.
 *
 * 부재는 이미 더 크게 말하고 있다: 값이 없으면 유령 격자가 `.9`로 켜지고 7ch
 * 빈 칸이 선다. 1px 실선이 있고 없고보다 그쪽이 몇 배 또렷하다. 같은 사실을
 * 두 장치가 말할 때, 약한 쪽을 남길 이유가 없다. */

/* 값이 바뀌는 순간의 틱은 **손대지 않는다.**
 *
 * 2차에서 `seg-strike`(방향 무관 청록 한 번)를 넣었는데, `console.css`의
 * `console-tick-up/down`이 이미 **등락 방향 색으로** 번쩍이고 있었다. 이 파일이
 * 뒤에 실리므로 내 것이 이겼고, 그래서 홈에서만 "올랐는지 내렸는지"가 틱에서
 * 지워지고 있었다. 있던 것이 더 낫다 — 지운다.
 *
 * 세계의 "미끄러지지 않는다"는 오도미터 전이를 끊는 것으로 이미 지켜진다
 * (`world.css`). 색이 순간 바뀌는 것은 미끄러짐이 아니라 교체다. */

/* ======================================================================
 * 4. 스파크라인 — 색만 costume이었다
 *
 * 내용은 30일 실측이라 장식이 아니다. 방향색은 `console.css`가 이미 주므로
 * 여기서는 채움 경로의 외곽선만 끈다 — 이전 판의 `path` 셀렉터가 `path.fill`에
 * 까지 stroke를 얹어 닫힌 윤곽이 그려졌다.
 * ====================================================================== */
/* `display: block`을 쓰면 안 된다. `console.css:265`가 `.tile-spark svg`를
   `flex: 1 1 auto; min-width: 0`으로 잡아 두는데, 그건 이 자리가 flex 컨테이너일
   때만 듣는다. block으로 바꾼 순간 제약이 풀려 svg가 고유 폭 177px로 벌어졌고,
   390px에서 홈만 문서 폭이 394로 새면서 폰에서 가로 스크롤이 생겼다(실측
   18.9px, 자르는 조상 없음). 여기서 필요했던 것은 흐림 하나뿐이다. */
/* 흐림은 **그림에만** 준다. 상자에 걸었더니 같은 상자에 든 기간 표기
   (`.spark-period`)까지 반투명해져 대비가 2.57:1로 떨어졌다(실측 홈 9곳).
   PRODUCT.md가 금지하는 변경이다 — "기준일·출처·한계 표기가 작아지거나
   접히는 변경은 개선이 아니다". `.tile-basis`에서 한 번 밟은 함정을 옆칸에서
   반복했다: 흐림·축소는 **글자를 품은 상자**가 아니라 대상에 직접 건다. */
.page-landing .tile-spark > svg { opacity: .5; }

/* 계열이 아예 없는 자리 — 부재의 여섯째 이유(`absent`).
   `off`(권리 게이트)도 `collecting`(곧 온다)도 아니다. **이 심볼에 그 계열이
   없다.** 유령 셀을 또렷하게 켜서 "자리는 있는데 안 켜졌다"를 형태로 말하고,
   깜빡이지는 않는다 — 아무 일도 일어나고 있지 않은 것이 사실이다. */
.page-landing .tile-spark.is-absent {
  min-height: 34px;
  display: flex; align-items: center;
  border-radius: var(--r-sm);
  background:
    linear-gradient(90deg, var(--seg-ghost-2) 0 calc(var(--seg-cell) * .72),
                    transparent calc(var(--seg-cell) * .72) var(--seg-cell))
    repeat-x;
  background-size: var(--seg-cell) 100%;
}
.page-landing .tile-spark path.fill { fill: none; stroke: none; }

/* ======================================================================
 * 내 종목 고정 — 편집자 보드 **위**에 서는 내 칸
 *
 * 새 세계를 짓지 않는다. 타일 문법은 그대로이고, 여기서 정하는 것은 이
 * 칸이 아래 보드와 어떻게 갈리는지와 편집 상태의 생김새뿐이다.
 * ====================================================================== */
/* 아래 편집자 보드와 확실히 갈라야 한다. 안내 문장("이 기기에만 저장됩니다")이
   두 판 사이에 끼어 있어서, 간격이 같으면 아래 보드를 설명하는 말로 읽힌다. */
.page-landing .my-board-zone { margin: 0 0 var(--sp-6); }
.page-landing .market-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.page-landing .market-heading .lede-title { margin: 0; }
.page-landing .market-heading > button { flex-shrink: 0; align-self: center; }
.page-landing .pin-picker {
  padding: var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.page-landing .pin-picker > p { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: var(--fs-sm); }
.page-landing .pin-picker fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; }
.page-landing .pin-picker fieldset:last-child { margin-bottom: 0; }
.page-landing .pin-picker legend { padding: 0; margin-bottom: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); }
.page-landing .pin-picker button {
  font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-2); margin: 0 var(--sp-1) var(--sp-1) 0; min-height: 32px; cursor: pointer;
}
.page-landing .pin-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.page-landing .pin-picker button:disabled { color: var(--ink-3); cursor: default; }

/* 머리는 값보다 조용하다. 이 칸의 주인공은 제목이 아니라 타일이다.

   `baseline`에서 `center`로 바꿨다. 알약 둘의 속이 서로 달라졌기 때문이다 —
   한쪽은 아이콘+글자, 한쪽은 글자뿐이라 첫 기준선이 서로 다른 자리에서 온다.
   상자 높이는 둘 다 28px로 같으니 가운데로 맞추면 정확히 나란히 선다. */
.page-landing .my-board-head {
  display: flex; align-items: center;
  gap: var(--sp-2); margin: 0 0 var(--sp-2);
}
/* 단추 둘은 **붙어 서서 오른쪽 끝**에 간다. `space-between`은 셋을 고르게
   흩어 놓아 더하기가 제목과 고치기 사이에 떠 있었다(실측 390px: 제목 끝 90 ·
   더하기 155 · 고치기 324). 한 묶음으로 읽혀야 둘이 같은 대상(내 종목)의
   동작이라는 것이 보인다. */
.page-landing .my-board-head .my-board-edit:first-of-type { margin-left: auto; }
/* 13px으로 앉혔다가 올렸다 — 이 세계의 The Two Rungs Rule은 모든 `h2`가 22px
   아니면 17px이라고 못 박는다. 무리 제목은 17px(Subtitle) 단이다. 이 판이
   편집자 보드보다 먼저 서는 만큼, 이름도 그 자리에 맞게 선다. */
.page-landing .my-board-title {
  margin: 0; font-size: var(--fs-lg); font-weight: 650;
  letter-spacing: -.01em; text-transform: none; color: var(--ink);
}

/* 편집은 파괴적인 일(고정 해제)로 들어가는 문이라 텍스트로 둔다 — 아이콘만
   두면 무엇을 하는 단추인지 눌러 봐야 안다.

   **누를 수 있다는 것을 형태로 말한다** (운영자 2026-09-07: "지금 종목 고정이
   일반글자색 폰트랑 같아서 구별이 잘 안 가").

   면도 테두리도 없이 `--ink-2` 글자만이었다. 바로 옆 부제("한국 · 미국 ·
   암호화폐")가 같은 잉크라 **글자 두 덩이가 구별되지 않았다** — 하나는 읽는
   말이고 하나는 누르는 것인데.

   색으로 가르지 않는다. 파랑은 이 세계에서 "동작"이고, 같은 클래스를 쓰는
   `#my-board-edit`이 눌린 상태를 이미 파랑으로 말하고 있어 쉬는 상태까지
   파랑이면 그 구별이 사라진다. 대신 **판 한 단 위 면 + 1px 선**을 준다 —
   구역 제목 줄의 `구역 ⌄` 칩과 같은 꼴이라 화면 안에서 컨트롤의 생김새가
   하나로 모인다. */
.page-landing .my-board-edit {
  appearance: none; padding: 0 var(--sp-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 28px; min-width: 24px;
  font: inherit; font-size: var(--fs-xs); font-weight: 650; line-height: 1.2;
  background: var(--panel-2); border: 1px solid var(--line-strong);
  color: var(--ink-2); cursor: pointer; border-radius: var(--r-md);
}
.page-landing .market-heading #pin-picker-toggle {
  min-height: 36px;
  padding: 0 12px;
  border-color: var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
}
.page-landing .market-heading #pin-picker-toggle[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: var(--panel-2);
  color: var(--ink);
}
/* **폰에서 `:hover`는 탭한 뒤에도 남는다.**
   그래서 방금 누른 단추가 켜진 것처럼 보인다 — 운영자가 오늘 세 자리에서
   같은 것을 제보했다(종목 고정·종목 추가·차트/히트맵 막, 2026-09-18~19).
   실측: 탭 뒤 `matches(':hover')`가 계속 true.
   이 저장소는 `.icon-button`에서 같은 함정을 이미 겪고 `@media (hover: hover)`로
   막아 두었다(`ocean.css`). 상자를 그리는 호버는 전부 같은 문을 지난다. */
@media (hover: hover) {
  .page-landing .my-board-edit:hover { color: var(--ink); border-color: var(--accent); }
  .page-landing .market-heading #pin-picker-toggle:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
  }
}
.page-landing .my-board-edit:active { background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); }
/* 눌린 상태를 **테두리로 말하지 않는다** (운영자 2026-09-18: "종목 고정, 편집
   네모난 박스 좀 없애줘, 보기 안 좋아"). 액센트 1px 사각이 글자를 가두어,
   쉬는 다른 단추들 사이에서 이것만 상자가 됐다.
   색만 남겨도 색 하나에 기대는 것이 아니다 — 기호가 함께 바뀐다(연필 ↔ 체크,
   `console.js`). WCAG 1.4.1이 막는 것은 **색뿐인** 구분이다. */
.page-landing .my-board-edit[aria-pressed="true"] { color: var(--accent); border-color: transparent; }

/* 계정이 없다는 사실은 **한 번** 말한다. 작게 접지 않는다 — 다른 기기에서 왜
   비어 있는지를 나중에 설명하는 것보다 여기서 한 줄이 낫다. */
.page-landing .my-board-note {
  /* 빈 상태에서 이유 줄과 같은 무게로 읽혔다(2026-09-08). 색으로는 못 가른다 —
     `--faint`와 `--ink-3`이 이 세계에서 같은 값(#8b9db4)이라 세 번째 잉크 단이
     없다. 크기로 가른다: 이건 값에 대한 설명이 아니라 **저장 방식에 대한
     각주**이고, 각주는 12px이 제 단이다(라벨·범례·고지). */
  margin: var(--sp-2) 0 0; color: var(--ink-3);
  font-size: var(--fs-xs); line-height: 1.5;
}

/* 마지막 줄의 빈 칸. DESIGN.md의 유령 셀 규칙을 타일 크기로 옮긴 것이다 —
   사용자가 만든 목록은 개수를 고를 수 없어 고아 칸이 구조적으로 생긴다.
   **채우는 것이지 늘리는 것이 아니다**: 자리만 지키고 아무것도 말하지 않는다. */
/* **편집 중에는 줄마다 높이가 같아야 한다** (운영자 2026-09-07: "x 계속
   누르다가 마지막 하나 남은 카드만 커져서 x 위치가 달라져서 불편하고").

   격자 줄의 높이는 그 줄에서 가장 높은 칸이 정한다. 이름이 두 줄인 카드가
   하나 끼면 옆 카드까지 같이 늘어나고, 그 카드를 지우는 순간 줄이 내려앉아
   **남은 카드의 × 가 위로 튄다.** 실측(390px, 하이퍼리퀴드 (HYPE)를 섞어
   고정): 1번 줄 128.6px · 2번 줄 107.8px — × 의 y가 433과 549로 갈렸고,
   긴 이름을 지우면 남은 × 가 21px 올라간다. 연달아 누르는 동작에서 이건
   그대로 오조작이 된다.

   편집 중에는 이름을 한 줄로 자른다. 지금 하는 일은 읽기가 아니라 고르기이고,
   티커가 바로 옆에 있어 한 줄로도 무엇인지 안다. 그러면 모든 칸이 같은 높이라
   지워도 남은 것이 움직이지 않는다.

   `.my-board`이 아니라 `#my-board`인 것에 주의한다. 이 판의 클래스는
   `board is-editing`이고 `my-board`는 **id**다 — 아래 유령 규칙이 그 오타로
   여태 한 번도 안 걸려 있었다(실측: 편집 중 유령이 `min-height: 0`이어야
   하는데 158px로 섰다). 같은 자리에서 둘 다 고친다. */
.page-landing #my-board.is-editing .tile-name {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-landing #my-board.is-editing .tile.is-ghost { min-height: 0; }
.page-landing .tile.is-ghost {
  min-height: 158px; padding: var(--sp-4);
  /* 점선이 아니다. 이 세계의 유령은 **꺼진 것**이지 스케치가 아니다 —
     타일과 똑같은 테두리를 그대로 두고 밝기만 내린다. 점선을 쓰면 "아직
     안 만든 자리"로 읽히고, 그건 사실이 아니다(자리는 이미 있다). */
  background: none; border: 1px solid var(--line);
  border-radius: var(--r-md); opacity: .18;
}

/* 편집 중인 타일. 링크가 아니라 `<article>`이 되므로 중첩 대화형 문제가
   애초에 사라진다 — 이 기능이 막혀 있던 이유가 그것이었다. */
/* 판 어디를 잡아도 **사방으로** 끌린다.
 *
 * `pan-y`였다. 세로 스크롤을 지키려던 값인데, 브라우저가 세로 팬을 가져가는
 * 대가가 곧 "위로 끌면 종목이 아니라 화면이 움직인다"였다(운영자 제보
 * 2026-09-06). 세로가 되는 곳은 `touch-action: none`이 걸린 22×22 손잡이
 * 하나뿐이었고, 그건 이 저장소가 정한 24px 바닥에도 못 미치는 자리다.
 * 2열 격자에서 순서 바꾸기는 가로만이 아니다 — 줄을 넘는 순간 세로다.
 *
 * `none`으로 바꾼다. 잃는 것은 편집 중 **카드 위에서** 손가락으로 페이지를
 * 굴리는 것 하나이고, 그 자리는 `console.js`의 가장자리 자동 스크롤이 받는다
 * — 끌고 있는 동안 화면 위·아래 끝에 닿으면 페이지가 따라 굴러간다.
 * 편집이 아닌 평소에는 이 규칙이 아예 안 걸리고, 편집 중에도 카드 바깥은
 * 그대로 굴러간다. 재정렬은 ← → 단추라는 길이 따로 있어 끌기가 유일한 문도
 * 아니다. */
.page-landing .tile-editing { touch-action: none; cursor: grab; }
.page-landing .my-board.is-dragging .tile-editing { cursor: grabbing; }

/* 손잡이는 잡는 자리를 **말해 준다**.
   판 전체에 `pan-y`를 걸던 것을 걷었다 — 그러면 판 위 어디서든 브라우저가
   가로 제스처를 이쪽에 넘기게 되고, 정작 "끌 수 있다"는 것은 아무 데도 안
   적혀 있었다. 잡는 자리를 눈에 보이게 두고 그 자리에만 `touch-action: none`을
   건다: 판 위에서는 페이지가 그대로 굴러간다. */
.page-landing .tile-grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: -4px; flex: 0 0 auto;
  touch-action: none; cursor: grab; color: var(--ink-3);
  border-radius: var(--r-sm);
}
.page-landing .tile-grip .ico { width: 16px; height: 16px; }
.page-landing .tile-grip:hover { color: var(--ink-2); background: var(--panel); }
.page-landing .my-board.is-dragging .tile-grip { cursor: grabbing; }

/* 집어 든 판. 이 세계는 그림자를 안 쓰므로 들어 올린 것을 **테두리와 면**으로
   말한다. 다른 판 위를 지나가야 하므로 z를 올리고, 아래 판이 `elementFromPoint`에
   잡히도록 포인터를 통과시킨다. */
.page-landing .tile-editing.is-lifted {
  position: relative; z-index: 5; pointer-events: none;
  border-color: var(--accent); background: var(--panel-2);
  will-change: transform;
}
/* 비켜 주는 판들이 미끄러지는 동안 글자가 흐르지 않게 — 위치만 움직인다. */
.page-landing .my-board.is-dragging .tile-editing { user-select: none; }

/* 편집 중 타일은 이름과 단추 셋만 담는다. `.tile`의 158px 바닥을 그대로 쓰면
   여덟을 고정한 사람이 158px 상자 여덟 개를 스크롤하게 된다 — 값이 있을 때
   필요한 높이이지 편집할 때 필요한 높이가 아니다. */
.page-landing .tile-editing {
  justify-content: space-between; gap: var(--sp-3);
  min-height: 0; padding: var(--sp-3);
  background: var(--panel-2);
  border-color: var(--line-strong);
}
/* 파괴적인 단추를 **자리로** 떼어 놓는다. 셋이 8px 간격으로 나란히 섰는데
   `.is-remove`는 `:hover`에서만 색이 달라져서, 마우스가 없는 폰에서는 쉬는
   상태의 셋이 똑같이 생겼다. 색으로 가르지 않는 이유는 이 세계에서 빨강이
   이미 "내렸다"를 뜻하기 때문이다 — 같은 색에 두 뜻을 주지 않는다. */
.page-landing .tile-edit-controls { display: flex; gap: var(--sp-2); }
.page-landing .tile-edit-button.is-remove { margin-left: auto; }

/* 끌기가 아니라 버튼이다. 끌기는 키보드·스크린리더로 같은 일을 할 길이 없고
   (WCAG 2.1.1) 좁은 화면에서 스크롤과 다툰다. 44px은 AAA 타겟이다 — 여기는
   파괴적인 조작이 모여 있어 잘못 누르는 값이 크다. */
.page-landing .tile-edit-button {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  /* `font:` 단축은 `font-variant-numeric`을 초깃값으로 되돌린다(The Shorthand
     Resets Tabular Rule). 이 단추의 글자는 화살표 기호라 눈에 띄는 피해는
     없었지만, 규칙을 지키는 테스트가 `segment.css`를 안 보고 있어서 샌
     자리다 — 2026-09-09에 그 시트를 목록에 넣으면서 드러났다. */
  font: 600 16px/1 var(--num); font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .page-landing .tile-edit-button:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
}
@media (hover: hover) {
  .page-landing .tile-edit-button.is-remove:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
}
/* 비활성은 흐리게가 아니라 **말없이** 둔다 — 첫 줄의 '위로'는 갈 곳이 없다.
   대비를 3:1 아래로 떨어뜨리지 않는다(비활성도 읽혀야 무엇이 막혔는지 안다). */
.page-landing .tile-edit-button:disabled { color: var(--ink-3); cursor: default; }

/* 소리로만 있는 자리. 화면에서는 판이 다시 그려지는 것으로 이미 말했다. */
.page-landing .pin-live {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); margin: 0;
}

/* 편집 중의 '종목 추가' 자리. 마지막 줄을 메우던 빈 칸에 뜻을 준 것이라, 유령 셀과
   같은 크기·같은 테두리로 서되 **꺼져 있지 않다**(불투명도를 내리지 않는다). */
.page-landing .tile-add {
  appearance: none; cursor: pointer;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 0; padding: var(--sp-3);
  background: none; border: 1px dashed var(--line-strong);
  border-radius: var(--r-md); color: var(--ink-2);
  /* `font:` 단축을 쓰지 않는다 — family 자리의 `inherit`은 선언을 통째로
     버린다(실측: 13px/600으로 적었는데 15px/400으로 그려지고 있었다).
     family는 어차피 상속되므로 나머지만 적는다. */
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  text-align: center;
}
@media (hover: hover) {
  .page-landing .tile-add:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
}
/* 눌렀다는 것을 **손가락이 있는 자리에서** 말한다.
 *
 * 이 단추의 유일한 피드백이 호버였는데, 1순위 기기에는 호버가 없다. 누르면
 * 초점이 286px 위 마스트헤드 검색칸으로 건너뛰므로(실측), 여기서 아무 일도
 * 안 일어나면 탭이 먹었는지 알 수 없다.
 *
 * 뜨지 않는다 — The Instrument Does Not Lift Rule. 위치를 바꾸는 대신 면을
 * 액센트 8%로 씻고 테두리를 실선으로 바꾼다(점선은 "비어 있다"는 뜻이라
 * 누르는 순간에는 잠시 닫는다). 돌아오는 길만 짧게 전이시킨다. */
.page-landing .tile-add { transition: color .12s, border-color .12s, background .12s; }
.page-landing .tile-add:active:not(:disabled) {
  color: var(--ink);
  border-style: solid; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transition: none;
}
.page-landing .tile-add .ico { width: 18px; height: 18px; flex: 0 0 auto; }
/* 가득 찼을 때는 이유를 그 자리에 적는다 — 누를 수 없는 단추를 말없이 두지 않는다. */
.page-landing .tile-add:disabled { cursor: default; color: var(--ink-3); border-style: solid; }

/* --- 빈 보드 -----------------------------------------------------------
 *
 * 담을 자리를 세우는 상태다. 세 가지가 바뀐다.
 *
 * 1. 편집 단추를 걷는다 — 뺄 것도 옮길 것도 없는데 "편집"이 서 있으면
 *    누르고 나서야 아무것도 없다는 걸 알게 된다.
 * 2. 무엇이 여기 설 것인지 한 줄이 제목 밑에 선다(`data-i18n`이 주인).
 * 3. 추가 자리가 **줄을 통째로** 쓴다. 2열 격자에서 반 칸짜리 점선 상자는
 *    빠뜨린 타일처럼 보이는데, 이 화면에서 이것이 유일한 시작점이라
 *    못 보고 지나가는 것이 이 상태의 유일한 실패다.
 *
 * 색을 새로 쓰지 않는다 — 점선 테두리와 잉크 두 단이면 충분하고, 이 세계에서
 * 색은 신호와 동작만 말한다. */
/* 더하는 쪽은 기호를 단다. 같은 알약 둘이 나란히 서면 어느 쪽이 무슨 동작인지
   글자를 읽어야 알 수 있는데, 기호 하나면 눈으로 갈린다. 색으로 가르지 않는
   이유는 늘 같다 — 파랑은 눌린 상태(`aria-pressed`)의 것이다.

   **기호는 이제 그림이다**(`console.js`의 `icon()`). 글자 `+`를 `::before`로
   달았더니 둘이 어긋났다:

   ① `+`는 글꼴 안에서 수학 축(baseline 위 약 0.25em)에 맞춰 그려진다. 상자를
      가운데 정렬해도 먹은 상자 가운데보다 아래에 온다 — 한글 옆에서 특히
      보인다(운영자: "+ 버튼마저 살짝 내려가서 균형이 안 맞아").
   ② `line-height: 1`짜리 `::before`가 첫 플렉스 아이템이라 **단추의 기준선까지**
      그것이 정했다. 그래서 이 단추가 옆의 `편집`보다 0.2px 내려앉아 있었다.
   ③ CSS로 단 기호는 JS가 글자를 갈아 끼워도 안 바뀐다 — 글자는 "닫기"인데
      기호는 `+`로 남았다.

   셋 다 그림으로 옮기면서 함께 사라진다. */
.page-landing .my-board-edit .ico { width: 14px; height: 14px; }
/* 빈 보드에서는 **편집만** 숨는다. 고칠 것이 없으니 고치기도 없다 — 대신
   더하기는 남아야 한다. 그것이 이 상태에서 유일하게 할 수 있는 일이다. */
.page-landing .my-board-zone.is-empty #my-board-edit { display: none; }
.page-landing .my-board-zone:not(.is-empty) .my-board-empty { display: none; }
/* 빈 상태에서 두 문장은 **한 덩이**로 읽힌다. 사이에 빈 격자가 끼어 있어서
   20px(아래 12 + 위 8)이 벌어져 있었고, 그러면 관련 없는 두 안내처럼 보인다.
   실측 390px: 문장 사이 20px → 6px. */
.page-landing .my-board-zone.is-empty .my-board-empty { margin-bottom: 0; }
.page-landing .my-board-zone.is-empty .my-board-note {
  margin-top: var(--sp-1h); text-align: center;
}

/* 「+ 종목 고정하기」 — 빈 보드에서만 (운영자 2026-09-09).
 *
 * 안내 문장이 사실을 말하고, 이 줄이 **다음에 할 일**을 말한다. 지금까지 그
 * 길은 위 「24시간 시장」 제목 줄의 작은 단추뿐이었는데, 빈 화면을 보는 사람의
 * 눈은 거기 있지 않다.
 *
 * **큰 추가 영역이 아니다.** 2026-09-05 판정이 막은 것은 값이 들어설 칸을
 * 통째로 먹는 상자였다. 이건 글자 한 줄이고 높이가 그만큼이다.
 *
 * 알약도 테두리도 주지 않는다 — 알약을 주면 바로 위 문장과 두 덩이가 되고,
 * 그러면 그 판정이 막으려던 모양에 가까워진다. 동작색과 손가락 자리만 준다. */
.page-landing .my-board-empty-cta {
  display: none;
  appearance: none; cursor: pointer;
  margin: var(--sp-1h) auto 0; padding: var(--sp-1h) var(--sp-3);
  border: 0; background: none;
  color: var(--accent); font: 600 var(--fs-sm)/1.4 var(--sans);
  /* 손가락 자리는 컨트롤 단이다(`--tap-control`). 주 동작(56)이 아닌 이유는
     이 화면의 주 동작이 값을 읽는 것이고 이건 시작점이기 때문이다. */
  min-height: var(--tap-control);
}
.page-landing .my-board-zone.is-empty .my-board-empty-cta { display: block; }
.page-landing .my-board-empty-cta:hover { text-decoration: underline; }
/* **사실은 굵게, 이유는 흐리게.**
   한 문장 13px 회색이었을 때는 안내가 아니라 설명문으로 읽혔다(운영자
   2026-09-08 "폰트랑 문구랑 크기 다 마음에 안들어"). 앞 판은 사실·방법·이유를
   한 줄에 담고 바로 옆에 선 단추의 이름을 따옴표로 인용했다 — 화면이 자기
   자신을 설명하는 꼴이다.

   큰 추가 영역은 여전히 안 만든다(2026-09-05 재확정). 바뀌는 것은 단이지
   자리가 아니다. */
.page-landing .my-board-empty {
  margin: 0;
  /* **가운데, 22px**(운영자 2026-09-08: "왼쪽보다 가운데가 나을 것 같아
     폰트 더 키우고"). 왼쪽 정렬 15px일 때는 값이 들어설 자리에 문장이 하나
     놓인 모양이라 빈 상태로 안 읽혔다 — 가운데로 놓으면 그 자리가 통째로
     비어 있다는 것을 형태가 말한다.

     제목(17px)보다 커지지만 위계가 뒤집히지는 않는다: 가운데 정렬은 제목과
     겨루는 자리가 아니라 **판 안의 상태**를 말하는 자리다.

     단추는 여전히 안 만든다 — 2026-09-05 재확정("빈 보드의 큰 추가 영역은
     표시하지 않는다")은 글이 아니라 **추가 영역**에 관한 것이고, 여기서
     커지는 것은 글자뿐이다. */
  /* 위 여백을 32 → 16으로 줄였다(운영자 2026-09-08 "살짝 위로 올려줘").
     가운데로 옮기면서 위아래를 넉넉히 뒀는데, 이 자리는 값이 들어설 칸이지
     여백을 자랑할 칸이 아니다. */
  padding: var(--sp-2) 0 var(--sp-2); text-align: center;
  color: var(--ink); font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.4;
}
/* 96px은 타일(158px)보다 낮다. 담긴 값과 같은 무게로 서면 안 되는 자리다 —
   시작점이지 값이 아니다. 24px 손가락 바닥은 네 배로 넘긴다.

   줄은 통째로 쓰되 **420px에서 멈춘다.** 3열이 되는 폭에서 끝까지 늘리면
   840px짜리 점선 공백이 되고, 그 안에 가운데로 놓인 라벨이 위의 제목·설명이
   맞춰 둔 왼쪽 모서리를 혼자 벗어난다(실측 1026px). 폰에서는 한 줄이 420보다
   좁으므로 이 상한이 보이지 않는다 — 좁은 쪽 동작은 그대로다. */
.page-landing .my-board-zone.is-empty .tile-add {
  grid-column: 1 / -1; min-height: 96px; max-width: 420px;
}

/* 참고가 고지 — 보드 **맨 위**, 참고가인 타일이 실제로 있을 때만.
 *
 * 아래 보드를 설명하는 `.board-basis`와 같은 문장이고 같은 단(13px `--fs-sm`,
 * `--ink-2`)이다. 12px 범례로 내리면 이 줄은 없는 것과 같아진다 — 기준·한계
 * 표기가 작아지는 변경은 이 제품에서 개선이 아니다. */
.page-landing .my-board-basis {
  grid-column: 1 / -1;
  margin: 0 0 var(--sp-1h);
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5;
}

/* 두 근거를 가르는 한 줄. 격자 한 줄을 통째로 쓰고, 값보다 조용하다 —
   이건 값이 아니라 **다음 줄부터 무엇이 다른지**를 말하는 자리다. */
.page-landing .my-board-split {
  grid-column: 1 / -1;
  margin: var(--sp-2) 0 0;
  color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5;
}