/* ==========================================================================
   updates.css — 업데이트 /ko/updates/ [주소 미정] (B6 · DESIGN 8-9 · A 꼴 세로 기록 줄)
   - 날짜 · 제품 이름 · 제목 → 운영 주소(블로그 「제품 소식」 4편만 · 새 문장 0) · 날짜를 꿰는 세로 실 하나
   - 점은 정지 표시만(가장 새 줄 하나만 주황 — 5-3 점 주인과 무관한 정지 점) · 숫자 · 배지 0
   - ≤1023 오른쪽 84 비움(채팅 길 3-8) · ≤600 날짜가 제목 위로 · 머리 u- 만
   ========================================================================== */

.u-main { padding: 56px 0 24px; }
.u-head { max-width: 760px; margin: 0 0 44px; }
.u-head h1 { margin: 0; }
.u-lead { margin: 12px 0 0; font-size: 18px; font-weight: 550; line-height: 1.5; color: var(--ink-2); }

.u-log { position: relative; max-width: 900px; }
.u-item::before {                                      /* 세로 실 — 이 점에서 다음 점까지(마지막 점에서 끝남) */
  content: ""; position: absolute; left: 155px; top: 13px; bottom: -13px; width: 2px; margin-left: -1px;
  background: var(--line-2);
}
.u-item:last-child::before { display: none; }
.u-item {
  position: relative; display: grid; grid-template-columns: 132px 46px minmax(0, 1fr);
  grid-template-areas: "date node body"; align-items: start; padding-bottom: 36px;
}
.u-item:last-child { padding-bottom: 0; }
.u-date {
  grid-area: date; padding-top: 3px; text-align: right;
  font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.u-node {
  grid-area: node; justify-self: center; position: relative; z-index: 1; margin-top: 6px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2.5px var(--ink-2);
}
.u-item:first-child .u-node { background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.u-body { grid-area: body; position: relative; min-width: 0; padding: 0 0 0 2px; }
.u-prod { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink-3); }
.u-prod__sym { width: 18px; height: auto; color: #3E4553; }
html[data-theme="dark"] .u-prod__sym { color: #EEEAE3; }
.u-prod__ico { width: 18px; height: 18px; border-radius: 5px; }
.u-title { margin: 0; font-size: 20px; font-weight: 750; line-height: 1.4; letter-spacing: -.02em; word-break: keep-all; text-wrap-style: balance; }
.u-title a { color: var(--ink); border-radius: 4px; }
.u-title a::after { content: ""; position: absolute; inset: -10px -14px; border-radius: 14px; }   /* 줄 전체를 누를 자리로 */
.u-item:hover .u-title a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.u-desc { margin: 8px 0 0; font-size: 15.5px; font-weight: 450; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }

@media (max-width: 1023.98px) {
  .u-main { padding-top: 40px; }
  .u-head, .u-log { max-width: calc(100% - var(--lane-cut)); }   /* 채팅 길(3-8) */
}
@media (max-width: 600.98px) {
  .u-main { padding-top: 28px; }
  .u-head { margin-bottom: 32px; }
  .u-item::before { left: 7px; top: 11px; bottom: -11px; }
  .u-item { grid-template-columns: 14px minmax(0, 1fr); grid-template-areas: "node date" ". body"; column-gap: 16px; padding-bottom: 30px; }
  .u-node { margin-top: 4px; }
  .u-date { text-align: left; padding-top: 0; font-size: 14px; margin-bottom: 6px; }
  .u-title { font-size: 18px; }
  .u-desc { font-size: 15px; }
  .u-title a::after { inset: -8px -8px; }
}