/*!
 * vm.css — 사이트 2 버전 지도
 * 테마를 가리지 않도록 vm- 클래스로만 쓴다.
 */

/*
 * ⚠ :root 에 정의한다 — 처음에 컨테이너 범위에 뒀더니, 그 컨테이너의
 *   DOM 자손이 아닌 화면(첫 화면 카드 등)에서 var() 가 미정의가 됐다.
 *   background: var(미정의) 는 조용히 투명이 된다 — 사이트 3 배지가
 *   실제로 그렇게 안 보였다 (2026-08-06). 접두사라 :root 에 둬도 안전하다.
 */
:root {
	--vm-border: var(--wd-border, rgba(127, 127, 127, 0.35));
	--vm-surface: var(--wd-bg, rgba(127, 127, 127, 0.07));
	--vm-muted: var(--wd-muted, color-mix(in srgb, currentColor 70%, transparent));
	--vm-ok: var(--wd-success, #1a7f37);
	--vm-warn: var(--wd-warning, #a06800);
	--vm-bad: var(--wd-danger, #b3261e);
	--vm-accent: var(--wd-primary, #1f6feb);

}

.vm-box {
	margin: 1.75rem 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--vm-border);
	border-radius: 10px;
	line-height: 1.7;
}

.vm-title { margin: 0 0 .35rem; font-size: 1.05rem; }
.vm-sub { margin: 0 0 .8rem; font-size: .86rem; color: var(--vm-muted); }

.vm-stats {
	display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
	margin: 0 0 .8rem; padding: 0; list-style: none; font-size: .92rem;
}
.vm-num { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vm-num--warn { color: var(--vm-warn); }

.vm-note {
	margin: 0 0 .9rem; padding: .6rem .8rem;
	background: var(--vm-surface); border-radius: 8px; font-size: .88rem;
}

.vm-compare {
	margin-top: 1rem; padding-top: .9rem;
	border-top: 1px solid var(--vm-border);
}
.vm-compare__title { margin: 0 0 .6rem; font-size: .98rem; }

.vm-compare__row {
	display: grid; grid-template-columns: 1fr; gap: .6rem;
}
@media (min-width: 34rem) {
	.vm-compare__row { grid-template-columns: 1fr 1fr; }
}

.vm-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.vm-field__label { font-size: .85rem; font-weight: 600; }
.vm-field select,
.vm-field input {
	min-height: var(--wd-touch, 44px);
	width: 100%; box-sizing: border-box;
	padding: .5rem .6rem; font: inherit; font-size: .95rem;
	color: inherit; background: transparent;
	border: 1px solid var(--vm-border); border-radius: 6px;
}
.vm-field input { font-variant-numeric: tabular-nums; }
.vm-field select:focus-visible,
.vm-field input:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 1px; }

.vm-result {
	margin: .8rem 0 .3rem; padding: .6rem .8rem;
	background: var(--vm-surface); border-radius: 8px;
	border-left: 3px solid var(--vm-border); font-size: .92rem;
}
.vm-result--current { border-left-color: var(--vm-ok); }
.vm-result--behind  { border-left-color: var(--vm-warn); }
.vm-result--ahead   { border-left-color: var(--vm-accent); }
.vm-result--unknown { border-left-color: var(--vm-bad); }

.vm-hint, .vm-api { margin: .3rem 0 0; font-size: .8rem; color: var(--vm-muted); }
.vm-api { margin-top: .9rem; }
.vm-api code { font-size: .85em; }

/* 관측한 릴리스 목록 (Stage 05).
   색은 전부 변수를 쓴다 — 새 블록을 변수 목록에 넣지 않아 본문색이 그대로
   나간 적이 있다(사이트 1 `.acc-ai`, 대비 17.76). 여기 있는 값은 위 :root
   에서 정의된 것들뿐이다. */
.vm-releases {
	margin: .8rem 0 .3rem; padding: .6rem .8rem;
	background: var(--vm-surface); border-radius: 8px;
}
.vm-releases[hidden] { display: none; }
.vm-releases__title { margin: 0 0 .5rem; font-size: .88rem; font-weight: 600; }
.vm-releases__list {
	margin: 0; padding-left: 1.2rem;
	display: flex; flex-direction: column; gap: .25rem;
	font-size: .88rem;
}
.vm-releases__list code { font-variant-numeric: tabular-nums; }
.vm-releases__date { margin-left: .5rem; color: var(--vm-muted); }
.vm-releases__pre {
	margin-left: .4rem; padding: 0 .35rem;
	font-size: .78rem; color: var(--vm-warn);
	border: 1px solid var(--vm-warn); border-radius: 4px;
}

/* 내 소프트웨어 (Stage 06). 색은 전부 위 :root 변수만 쓴다. */
.vm-mine__add { display: grid; grid-template-columns: 1fr; gap: .6rem; align-items: end; }
@media (min-width: 40rem) {
	.vm-mine__add { grid-template-columns: 2fr 1fr auto; }
}
.vm-btn {
	padding: .5rem .9rem; font: inherit; font-size: .92rem; cursor: pointer;
	color: inherit; background: var(--vm-surface);
	border: 1px solid var(--vm-border); border-radius: 6px;
}
.vm-btn:hover { border-color: var(--vm-accent); }
.vm-btn--quiet { font-size: .85rem; padding: .35rem .7rem; }
.vm-mine__msg { margin: .5rem 0 0; font-size: .88rem; min-height: 1.2em; }
.vm-mine__msg--ok { color: var(--vm-ok); }
.vm-mine__msg--warn { color: var(--vm-warn); }
.vm-mine__summary { margin: 1rem 0 .2rem; font-size: .95rem; }
.vm-mine__items { list-style: none; margin: .6rem 0 0; padding: 0;
	display: flex; flex-direction: column; gap: .6rem; }
.vm-mine__item {
	padding: .6rem .8rem; border-radius: 8px;
	background: var(--vm-surface); border-left: 3px solid var(--vm-border);
}
.vm-mine__item--ok   { border-left-color: var(--vm-ok); }
.vm-mine__item--info { border-left-color: var(--vm-accent); }
.vm-mine__item--warn { border-left-color: var(--vm-warn); }
.vm-mine__item--bad  { border-left-color: var(--vm-bad); }
.vm-mine__item.is-fav { box-shadow: inset 2px 0 0 var(--vm-warn); }
.vm-mine__head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.vm-badge { font-size: .78rem; padding: 0 .4rem; border-radius: 4px;
	border: 1px solid currentColor; }
.vm-badge--ok { color: var(--vm-ok); }
.vm-badge--info { color: var(--vm-accent); }
.vm-badge--warn { color: var(--vm-warn); }
.vm-badge--bad { color: var(--vm-bad); }
.vm-badge--unknown { color: var(--vm-muted); }
.vm-mine__vers { font-size: .9rem; margin-top: .25rem; }
.vm-mine__vers code { font-variant-numeric: tabular-nums; }
.vm-mine__date, .vm-mine__reason, .vm-mine__advice { color: var(--vm-muted); font-size: .85rem; }
.vm-mine__reason, .vm-mine__advice { margin: .3rem 0 0; }
.vm-mine__unknown { margin-top: .4rem; font-size: .82rem; color: var(--vm-muted); }
.vm-mine__unknown summary { cursor: pointer; }
.vm-mine__unknown ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.vm-mine__foot { display: flex; gap: .8rem; flex-wrap: wrap;
	margin-top: .5rem; font-size: .84rem; }
.vm-linkbtn { background: none; border: none; padding: 0; font: inherit;
	font-size: .84rem; color: var(--vm-accent); cursor: pointer; text-decoration: underline; }
.vm-mine__io { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.vm-empty { color: var(--vm-muted); font-size: .9rem; }

/* ── 첫 화면 대시보드 (Stage 07) ──────────────────────────────────────── */
/*
 * ⚠ 색을 직접 적지 않는다. 상태 색은 배지(`wd-badge-*`)가 가지고 있고,
 *   그 배지의 뜻은 `assets/data/status-vocab.json` 이 정한다.
 */

/* 최근 릴리스 */
.vm-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.vm-recent__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.7rem;
	border-top: 1px solid var(--wd-border);
}
.vm-recent__item:first-child { border-top: 0; }
.vm-recent__name { font-weight: 600; color: var(--wd-text); text-decoration: none; }
.vm-recent__name:hover { color: var(--wd-primary); text-decoration: underline; }
.vm-recent__ver {
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
	color: var(--wd-secondary);
}
/* ⚠ 경과일을 오른쪽 끝으로 민다. 눈이 한 줄로 훑을 수 있어야 비교가 된다. */
.vm-recent__when { margin-left: auto; font-size: 0.85rem; color: var(--wd-muted); }

/* 소프트웨어 표 */
.vm-table { font-size: 0.9375rem; }
.vm-ver { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 배지 범례 */
.vm-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wd-s-30);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.vm-legend__item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	align-items: flex-start;
	padding: var(--wd-s-30);
	background: var(--wd-surface);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-r-sm);
}
.vm-legend__meaning { font-size: 0.875rem; color: var(--wd-muted); }

/* 아직 판정하지 않는 것 */
.vm-unknowns__list { list-style: none; margin: var(--wd-s-30) 0 0; padding: 0; display: grid; gap: var(--wd-s-30); }
.vm-unknowns__list li { padding-top: var(--wd-s-30); border-top: 1px solid var(--wd-border); }
.vm-unknowns__list li:first-child { border-top: 0; padding-top: 0; }
.vm-unknowns__list strong { margin-right: 0.5rem; }
.vm-unknowns__list p { margin: 0.3rem 0 0; font-size: 0.875rem; }
.vm-unknown__fix { display: block; margin-top: 0.2rem; color: var(--wd-muted); }

/* 이번 주 요약 */
.vm-week {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wd-s-40);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.vm-week li {
	padding: var(--wd-s-40);
	background: var(--wd-surface);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-r-md);
}
.vm-week__n {
	display: inline-block;
	margin-top: 0.2rem;
	font-size: var(--wp--preset--font-size--figure, 2rem);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.vm-week__sub { color: var(--wd-muted); font-size: 0.9rem; }
.vm-week__note { margin: var(--wd-s-30) 0 0; font-size: 0.85rem; color: var(--wd-muted); }

/*
 * ⚠ 최근 릴리스의 이름은 이 목록의 **주된 조작 요소**다.
 *   글자 높이 24px 그대로 두면 좁은 화면에서 누르기 어렵다. 여백을 li 가
 *   아니라 a 에 준다 — 손가락이 닿는 것은 링크지 목록 항목이 아니다.
 *   (Stage 05 에서 사이트 1 의 상황별 목록에 같은 실수를 했다)
 */
.vm-recent__name {
	display: inline-flex;
	align-items: center;
	min-height: var(--wd-touch);
}

/* ── 소프트웨어 대표 페이지 (Stage 08) ────────────────────────────────── */
.vm-sw { display: grid; gap: var(--wd-s-50); }
.vm-sw__head { padding: var(--wd-s-50); }
.vm-sw__ver {
	margin: 0.1rem 0 var(--wd-s-40);
	font-size: var(--wp--preset--font-size--figure, 2rem);
	line-height: 1.1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
/*
 * ⚠ `dl` 을 격자로 놓되 항목이 짝을 잃지 않게 한다. `dt`/`dd` 를 각각
 *   따로 흘리면 좁은 화면에서 이름과 값이 어긋난 줄에 놓인다.
 */
/* 사실 목록은 wd-facts (공용, wp3-design.css) 로 옮겼다 — 사이트 3 도 쓴다. */
.vm-sw__note { margin: var(--wd-s-40) 0 0; font-size: 0.875rem; color: var(--wd-muted); }
/* 행동 줄은 wd-actions (공용) 로 옮겼다. */
.vm-sw__history h2 { font-size: 1.125rem; margin-bottom: var(--wd-s-30); }

.vm-sw-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.vm-sw-index li { border-top: 1px solid var(--wd-border); }
.vm-sw-index li:first-child { border-top: 0; }
.vm-sw-index a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wd-touch);
	font-weight: 600;
	color: var(--wd-text);
	text-decoration: none;
}
.vm-sw-index a:hover { color: var(--wd-primary); text-decoration: underline; }