/* S6 기능 격자 — 틀 · 조각 원자 · 움직임 상태. 까닭과 치수: docs/plan-2026-10/LANDING-GRID.md §4 · §5 · ADR 0004.
   칸은 카드가 아니다 — 선(1px --line, 끝마다 10px 짧게 → 교차점이 빈다)과 교차점 점뿐. 글자는 실제 크기. v5 토큰만 */

.land-g {
  --g-cols: 3; --g-rows: 3; --g-rh: 404px; --g-pad: var(--s-9); --g-gap: var(--s-4); --g-gap2: var(--s-8); --g-stage: 234px;
  position: relative; background: var(--canvas);
  scroll-margin-top: var(--bar-h, 64px);
}
.land-g-sheet { position: relative; width: var(--g-w); margin-inline: auto; }

/* 머리 */
.land-g-hd { position: relative; padding: var(--s-12) var(--g-pad) var(--s-8); }
.land-g-h { margin: 0; font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }

/* 격자 */
.land-g-body { position: relative; }
.land-g-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)); grid-auto-rows: var(--g-rh);
  margin: 0; padding: 0; list-style: none;
}
.land-g-cell { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--g-pad) var(--g-pad) 0; overflow: hidden; }
.land-g-name { margin: 0; font: 500 var(--t-body)/22px var(--font); letter-spacing: -0.01em; color: var(--ink); }
.land-g-line {
  height: 44px; margin: var(--g-gap) 0 0; overflow: hidden;
  font: 400 var(--t-body)/22px var(--font); letter-spacing: -0.01em; color: var(--ink-3); text-wrap: pretty;
}
/* 무대 */
.land-g-stage { position: relative; flex: none; height: var(--g-stage); margin: var(--g-gap2) calc(-1 * var(--g-pad)) 0; }

/* 선 */
.land-g-cell::before, .land-g-cell::after, .land-g-grid::before, .land-g-grid::after,
.land-g-hd::before, .land-g-hd::after, .land-g-ft::before, .land-g-ft::after { content: ''; position: absolute; pointer-events: none; }
.land-g-cell::before {
  top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, var(--g-line) 0 calc(100% / var(--g-span, 1) - 10px), transparent 0 calc(100% / var(--g-span, 1)));
}
.land-g-cell::after { top: 10px; bottom: 10px; left: 0; width: 1px; background: var(--g-line); }
.land-g-grid::before {
  top: 0; bottom: 0; left: 100%; width: 1px;
  background: repeating-linear-gradient(180deg, transparent 0 10px, var(--g-line) 0 calc(var(--g-rh) - 10px), transparent 0 var(--g-rh));
}
.land-g-grid::after {
  top: 100%; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, var(--g-line) 0 calc(100% / var(--g-bcols, var(--g-cols)) - 10px), transparent 0 calc(100% / var(--g-bcols, var(--g-cols))));
}
/* 머리 · 그 밖에 줄의 레일 */
:is(.land-g-hd, .land-g-ft)::before, :is(.land-g-hd, .land-g-ft)::after { top: 10px; bottom: 10px; width: 1px; background: var(--g-line); }
:is(.land-g-hd, .land-g-ft)::before { left: 0; }
:is(.land-g-hd, .land-g-ft)::after { left: 100%; }

/* 점 */
.land-g-dots {
  position: absolute; inset: 0; display: grid; pointer-events: none;
  grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)) 0; grid-template-rows: repeat(var(--g-rows), minmax(0, 1fr)) 0;
}
.land-g-dots i { place-self: start; width: 3px; height: 3px; margin: -1px 0 0 -1px; background: var(--ink); }
.land-g-dots i:nth-child(n + 17) { display: none; }

/* 발 — 레일만 있는 빈 여백(도면이 위 머리와 같은 결로 닫힌다) */
.land-g-ft { position: relative; height: var(--s-10); } .land-g:not(.land-sc)::before { bottom: var(--g-d); } /* 아랫선 · 점이 다음 섹션 그림에 걸치지 않게 */

/* 1000–1265 */
@media (max-width: 1265px) {
  .land-g { --g-rh: 380px; --g-pad: var(--s-8); --g-gap: var(--s-3); --g-gap2: var(--s-7); --g-stage: 230px; }
}
/* 700–999 */
@media (max-width: 999px) {
  .land-g { --g-cols: 2; --g-rows: 5; --g-bcols: 1; --g-rh: 360px; --g-pad: var(--s-7); --g-gap2: 28px; --g-stage: 222px; }
  .land-g-cell:last-child { --g-span: 2; grid-column: 1 / -1; }
  .land-g-dots i:nth-child(n + 17) { display: block; }
  .land-g-dots i:nth-child(17) { visibility: hidden; }
  .land-g-dots i:nth-child(n + 19) { display: none; }
}
/* 699 이하 */
@media (max-width: 699px) {
  .land-g { --g-cols: 1; --g-rows: 9; --g-bcols: 1; --g-rh: 308px; --g-pad: var(--s-5); --g-gap2: var(--s-5); --g-stage: 190px; }
  .land-g-cell:last-child { --g-span: 1; }
  .land-g-dots i:nth-child(n + 17) { display: block; visibility: visible; }
  .land-g-hd { padding: var(--s-10) var(--g-pad) var(--s-7); }
}

/* ── 조각 원자 */
.land-g-stage { contain: layout paint; container-type: inline-size; }
.gf {
  position: absolute; box-sizing: border-box; overflow: hidden; text-align: left;
  background: var(--paper); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line), var(--e-1);
  color: var(--ink); font: 400 var(--t-caption)/1.5 var(--font); letter-spacing: -0.01em;
}
:where(.gf) :is(p, ol) { margin: 0; padding: 0; list-style: none; text-wrap: inherit; }
.gf b { font-weight: 600; }
.gf svg { flex: none; width: var(--ic-sm); height: var(--ic-sm); }
.gf-dark { background: var(--d-bg); color: var(--d-fg); }
.gf-av {
  display: inline-grid; place-items: center; flex: none; width: var(--av-xs); height: var(--av-xs); border-radius: 50%;
  background: var(--canvas-2); color: var(--ink-2); font: 600 var(--t-micro)/1 var(--font); letter-spacing: -0.06em;
}
.gf-logo { display: inline-grid; place-items: center; flex: none; width: var(--h-xs); height: var(--h-xs); border-radius: var(--r-xs); background: var(--ink); color: var(--paper); font: 600 var(--t-caption)/1 var(--font); }
.gf-k { color: var(--ink-4); font-size: var(--t-micro); } .gf-ph { color: var(--ink-4); }
.gf-dark .gf-k { color: var(--d-fg-3); }
.gf-n { font-variant-numeric: tabular-nums; }
.gf-kbd { flex: none; padding: 1px var(--s-1); border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font: 500 var(--t-micro)/1.4 var(--font); }
.gf-btn {
  display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--s-4); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-weight: 500; white-space: nowrap;
}
.gf-btn.is-quiet { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--e-1); }
.gf-caret { border-right: 1px solid var(--ink); }
/* 마감 글 · 꼬리표 알약 · 끝내기 원 */
.gf-due { flex: none; color: var(--ink-2); font: 500 var(--t-micro)/1.4 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-due:is(.is-near, .is-over) { color: var(--ink); font-weight: 600; }
.gf-due.is-far { color: var(--ink-3); }
.gf-tag { flex: none; padding: 0 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 var(--t-micro)/18px var(--font); }
.gf-tag.is-go { background: var(--ink); color: var(--paper); box-shadow: none; }
.gf-chk { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }

/* ── 움직임 상태 */
.gf-sw { display: inline-grid; } .gf-sw > * { grid-area: 1 / 1; } .gf-sz { visibility: hidden; }
.gf-ins { display: grid; grid-template-rows: 1fr; } .gf-ins > * { min-height: 0; overflow: hidden; }
.land-g-stage :is([data-g-in], [data-g-out], [data-g-push], [data-g-push] ~ *, :has(> [data-g-push])) { transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out), grid-template-rows var(--dur-4) var(--ease-out); transition-delay: calc(var(--g-i, 0) * var(--stagger)); }
.land-g-stage .is-off { opacity: 0; translate: 0 var(--m-rise); } .land-g-stage .is-gone { opacity: 0; translate: 0 calc(-1 * var(--m-rise)); }
.land-g-stage .gf-ins:is(.is-off, .is-gone) { grid-template-rows: 0fr; translate: none; }
/* 바꿔 끼움은 차례로 */
.land-g-stage .gf-sw > :is(.is-gone, .is-off) { transition-duration: var(--dur-1); transition-delay: 0s; }
.land-g-stage .gf-sw > [data-g-in]:not(.is-off), .land-g-stage [data-g-push]:not(.is-off) { transition-delay: var(--dur-1); }
[data-g-bar] { transform-origin: left; transform: scaleX(var(--v)); transition: transform var(--dur-4) var(--ease-out); }
.land-g-stage [data-g-bar].is-off { opacity: 1; translate: none; transform: scaleX(var(--v0)); }
.land-g-stage .is-press { scale: var(--m-press-chip); transition: scale var(--dur-1) var(--ease-out); } .land-g-stage .gf-kc.is-press { scale: var(--m-press-card); }
.land-g-stage .gf { transition: opacity var(--dur-2) var(--ease-out), height var(--dur-3) var(--ease-out); } .land-g-stage.is-rw .gf { opacity: 0; }
.land-g-stage.is-snap * { transition: none; } .land-g-stage [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .land-g-stage * { transition: none; } }