/* 사이트 연동 자동화 체험 */
.y-note { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: var(--t-s); font-weight: 600; line-height: 1.5; }
.y-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 44px; font-size: var(--t-s); font-weight: 600; line-height: 1.45; }
.y-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }
.y-thr { min-width: 220px; flex: 1 1 220px; }
.y-table { min-width: 560px; }
.y-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.y-num.is-min > span { font-weight: 800; }
.y-chg { color: var(--err); font-size: var(--t-s); font-weight: 700; }
.y-chg.is-down { color: var(--ok); }
.y-alert { gap: 10px; }
.y-alert-t { flex: 1 1 220px; min-width: 0; font-size: .9375rem; line-height: 1.45; }
.y-alert.is-ack .y-alert-t { color: var(--ink-2); }
.y-log { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; font-size: .9375rem; line-height: 1.45; }
.y-log.is-bad { color: var(--err); }
.y-time { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .y-log { grid-template-columns: minmax(0, 1fr); gap: 0; } }