/* ══════════════════════════════════════════════════════════════════════════
   value.css — **그 자리에서 고치는 값의 생김새.**

   계약·진행 배지(`.tag`) · 담당자 같은 «정해진 값» 글자 단추(`.cell-set`) · 그 둘을 누르면
   뜨는 축 고르개(`.axis-menu`). 목록과 상세가 같은 규약으로 쓰므로 셸에 있다.
   무엇을 그리는지는 `core/value-controls.js`, 어떻게 보이는지는 이 파일이다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 계약·진행 배지 ══ **목록과 상세가 함께 쓴다** — 그래서 셸에 있다.
   (목록 CSS 에 있던 것을 상세 작업에서 올렸다. 화면마다 한 벌씩 두면 갈린다.)
   
   두 축(`core/vocabulary.js` 의 `CONTRACTS`·`PROGRESS`)을 이름 옆에 찍는다.

   **색을 쓴다 — 다만 상태 색과 섞이지 않게.** 이 표에는 이미 색 언어가 하나 있다(주소 칩의
   점·응답 코드: 초록 200 · 황 401 · 빨강 실패). 그래서 ① 계약 축은 상태에 없는 계열(보라·
   파랑·회색)을 쓰고, ② 두 축을 **모양으로** 가른다 — 계약은 채운 배지, 진행은 테두리 배지.
   색이 겹치는 곳(진행의 초록·황)은 자리와 모양이 달라 구별된다.

   진행 축에 배경을 깔지 않는 이유는 대비다: `--warn` 는 흰 바탕에서 4.68:1 로 AA 를 겨우
   넘는데, 옅은 배경을 깔면 그 아래로 내려간다. 테두리는 대비를 깎지 않는다. */
.tag {
	flex: none;
	/* 미지정 배지는 **누르는 것**이라 24px 을 준다(WCAG SC 2.5.8). 값이 정해진 배지에도
	   같은 높이를 주는 이유는 한 줄에 20px 과 그 값이 섞이면 배지 줄이 흔들리기 때문이다.
	   **줄은 안 두꺼워진다** — 이름 칸(43px)이 주소 칸(50px)보다 낮아 줄 높이를 정하는 것은
	   주소 쪽이고, 이름 칸이 48px 이 돼도 여전히 낮다(실측 69px 그대로). */
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0.05rem 0.35rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--t-micro);
	font-weight: 500;
	line-height: 1.45;
	white-space: nowrap;
	/* 미지정 배지는 `<button>` 이다 — 브라우저 기본 꼴(회색 면·중앙 정렬·다른 서체)을 끈다.
	   `<span>` 배지에는 아무 영향이 없다. */
	background: none;
}

/* ── 계약 — 채운다 ── */
.tag.is-poc {
	background: color-mix(in srgb, var(--poc) 14%, transparent);
	color: var(--poc);
}

.tag.is-main {
	background: var(--accent-soft);
	color: var(--accent);
}

.tag.is-internal {
	background: var(--bg-2);
	color: var(--fg-3);
}

/* ── 진행 — 테두리만 ── */
.tag.is-dev {
	border-color: color-mix(in srgb, var(--warn) 45%, transparent);
	color: var(--warn);
}

.tag.is-live {
	border-color: color-mix(in srgb, var(--ok) 45%, transparent);
	color: var(--ok);
}

.tag.is-ended {
	border-color: var(--line-strong);
	color: var(--fg-3);
}

/* ── 미지정 — 점선 ── 채움(계약)도 실선 테두리(진행)도 아닌 **제3의 모양**이다.
   점선은 «칸이 비어 있다» 를 색 없이 말한다 — 색으로 하면 상태 색 언어(초록·황·빨강)에
   낱말 하나를 더 얹게 되고, 회색 채움은 이미 「사내 서비스」가 쓰고 있다.

   그리고 이것만 **누를 수 있다** — 누르면 그 축의 값을 그 자리에서 정한다. 눌린다는 것을
   커서와 호버로 말한다: 24px 은 주지 않는다(이름 줄의 높이가 배지를 따라 커지면 표가
   49줄 내내 두꺼워진다). 대신 목록에는 줄마다 「편집」 단추가 이미 있어 손가락 경로가
   따로 있다 — 이 배지는 **가리키는 장치(마우스·키보드)의 지름길**이다. */
.tag.is-none-contract,
.tag.is-none-progress,
.tag.is-none-owner {
	border-style: dashed;
	border-color: var(--line-strong);
	color: var(--fg-3);
}

/* 배지는 전부 단추다 — 미지정은 정하러, 정해진 값은 바꾸러. **가만히 있을 때의 모습은
   건드리지 않는다**: 표의 주된 일은 읽기이고, 열두 개 배지가 전부 «단추처럼» 보이면 그
   줄에서 무엇이 값이고 무엇이 동작인지 흐려진다. 눌린다는 것은 **가리켰을 때** 말한다. */
button.tag {
	cursor: pointer;
}
button.tag[aria-expanded='true'] {
	border-style: solid;
	border-color: var(--accent);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	/* 테두리 색만 바꾼다(굵기·여백이 아니라) — 굵기를 바꾸면 배지 폭이 변해 이름이 흔들린다.
   점선 배지는 이때 실선이 되어 «비었다» 에서 «다룰 수 있다» 로 읽힌다. */
button.tag:hover {
		border-style: solid;
		border-color: var(--accent);
	}
}

button.tag:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/* ══ 값 단추와 축 고르개 ══ **목록과 상세가 함께 쓴다** — 그래서 셸에 있다.
   (목록 CSS 에 있던 것을 상세 작업에서 올렸다. `.tag`·`.dot` 과 같은 이유다.)

   담당자의 «정해진 값» — 이 열에서 원래 글자였고 그대로 글자다. 이름을 배지로 감싸면
   담당자 열이 배지 열이 되어 표의 리듬이 바뀐다. 누를 수 있다는 것은 가리켰을 때만 말한다. */
.cell-set {
	display: inline-flex;
	align-items: center;
	/* 누르는 것이라 표적 최소(SC 2.5.8). 담당자 칸은 줄 높이를 정하는 칸이 아니라 값이 없다. */
	min-height: var(--tap-min);
	margin-left: -0.3rem;      /* 왼쪽 여백만큼 당겨 글자를 원래 자리에 둔다 */
	padding: 0 0.3rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.cell-set[aria-expanded='true'] {
	background: var(--bg-2);
	color: var(--accent);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.cell-set:hover {
		background: var(--bg-2);
		color: var(--accent);
	}
}

.cell-set:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/* ══ 축 고르개 ══ 미지정 배지를 누르면 그 배지 아래에 뜬다(`core/axis-menu.js` 가 좌표를
   준다). 뷰포트 기준(`fixed`)이라 표가 스크롤돼도 배지를 따라간다.

   본문 표면은 **불투명**하다 — 뒤에 표의 글자가 비치면 대비가 «움직이는 값» 이 된다. */
.axis-menu {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 9rem;
	padding: 0.35rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: 0 8px 24px var(--shadow);
}

.axis-menu[hidden] {
	display: none;
}

/* 머리글 — 어느 축을 고르는 중인지. 배지가 「미지정」 한 낱말이라 자리 순서로만 축을 알 수
   있는데, 고르개가 열리면 그 순서가 보이지 않는다. */
.axis-menu-head {
	margin: 0 0 0.15rem;
	padding: 0 0.3rem;
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--fg-3);
}

/* 항목은 **누르는 것**이라 표적 최소를 준다(WCAG SC 2.5.8). 여기서는 줄 높이에 영향이 없다. */
.axis-menu-item {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0.15rem 0.3rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	font-family: inherit;
	font-size: var(--t-sm);
	color: var(--fg-2);
	text-align: left;
	cursor: pointer;
}
.axis-menu-item:focus-visible {
	outline: none;
	background: var(--bg-2);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.axis-menu-item:hover {
		outline: none;
		background: var(--bg-2);
	}
}

.axis-menu-item:disabled {
	opacity: 0.5;
	cursor: default;
}

/* 지금 값 — 바꾸러 연 고르개에서 «무엇이 지금인가» 가 보여야 고른 것이 바뀐 것인지 안다. */
.axis-menu-item[aria-current='true'] {
	background: var(--accent-soft);
}

/* 되돌리기는 «값 하나» 가 아니라 «값을 없애기» 라 목록에서 선으로 가른다. */
.axis-menu-item.is-clear {
	margin-top: 0.15rem;
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	padding-top: 0.3rem;
	color: var(--fg-3);
}

/* 담당자는 목록이 자라는 축이다(지금 10명). 창을 넘기지 않게 **여기만** 스크롤한다 —
   고르개 전체에 걸면 머리글과 「직접 입력…」도 같이 밀려 올라간다. */
.axis-menu-list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	max-height: 15rem;
	overflow-y: auto;
}

/* 「직접 입력…」은 목록이 아니라 **다른 종류의 길**이라 선으로 가른다. */
.axis-menu-item.is-free {
	margin-top: 0.15rem;
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	padding-top: 0.3rem;
	color: var(--fg-3);
}

.axis-menu-input {
	margin-bottom: 0.35rem;
}

.axis-menu .btn.is-small {
	width: 100%;
}

@media (hover: hover) {
	.entry-main:hover .entry-name {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* 설명은 **한 줄까지.** 두 줄을 허용하면 줄 높이가 116px 이 되어 49건이 6000px 문서가
   된다(실측) — 목록은 훑는 화면이라 높이가 곧 훑는 비용이다. 전문은 상세에 있다. */
.entry-desc {
	display: block;
	overflow: hidden;
	font-size: var(--t-sm);
	line-height: 1.5;
	color: var(--fg-2);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 카드·피드에서는 줄 수를 풀어 준다 — 그 둘은 «읽는» 보기다. */
.entries:not([data-view='list']) .entry-desc {
	white-space: normal;
	word-break: keep-all;
}

.is-muted {
	color: var(--fg-3);
}

/* 주소 칩 — 각 칩이 그 주소를 연다. 상태는 점·색·코드 셋으로 알린다(색만으로 말하지 않는다). */
/* 주소 칸 — 두 줄이 위아래로. 머리의 손잡이 둘과 같은 순서다(운영 위, 개발 아래). */
.entry-urls {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
}

.entry-url-line {
	display: block;
	min-width: 0;
}

/* 칩은 **테두리를 갖지 않는다.** 한 칸에 두 줄이 들어가면서 테두리 둘이 세로로 붙어
   «작은 상자 두 개» 로 읽혔다 — 점과 글자만으로 충분하다.

   네 조각이 **각자 칸**을 갖는다. 순서는 `PROD ● 200 https://…` — **고정 폭을 앞에 모으고
   가변 폭(주소)을 마지막에** 둔다. 이유 둘:
     ① 상태를 말하는 것(점·코드)이 한 덩어리로 붙는다. 코드를 오른쪽 끝에 두면 같은 사실이
        칩의 양 끝으로 갈라져 눈이 두 번 움직인다.
     ② 오른쪽에 코드 자리를 예약하지 않으므로 주소가 그만큼 넓어진다(3.5ch + 간격).
   `inline-flex` 로 두면 칩 폭이 내용에 맞춰져 줄마다 조각이 다른 자리에 섰다(실측 16가지). */
/* 값이 시작하는 x — 주소 줄과 담당자 줄이 **함께 쓴다.** 카드·피드에서는 두 줄이 위아래로
   놓이므로 값이 한 기준선에 서야 한다(라벨은 왼쪽 끝에서, 값은 이 x 에서). 아래 `.url-chip`
   의 앞 세 조각(4ch 슬롯 · 7px 점 · 3.5ch 코드)과 그 사이 간격 셋(0.35rem)의 합이다.

   **줄이 아니라 칸(`.entry`)에 선언한다** — 커스텀 속성은 아래로만 흐르므로 칩에 두면 형제인
   담당자 줄이 받지 못하고, `var()` 가 무효가 되어 라벨 칸이 사라졌다(실측: 값이 78px 왼쪽).
   `ch` 는 «쓰는 자리» 의 글자로 풀리는데 두 줄이 같은 서체·크기(고정폭 micro)라 같은 값이 된다.
   여기 숫자를 고치면 칩의 트랙도 따라와야 하고, 그 일치는 회귀 검사가 지킨다. */
.entry {
	--value-x: calc(7.5ch + 7px + 1.05rem);
}

.url-chip {
	display: grid;
	grid-template-columns: 4ch 7px 3.5ch minmax(0, 1fr);
	align-items: center;
	/* 실제로 누르는 링크다 — 표적 최소를 준다(WCAG SC 2.5.8). 글자 높이(17px)에 맡기면 두 줄이
	   붙어 있어 «옆 줄이 눌리는» 표가 된다. 줄이 그만큼 높아지는 것은 값을 치른 것이다. */
	min-height: var(--tap-min);
	gap: 0 0.35rem;
	color: var(--fg-2);
	text-decoration: none;
	white-space: nowrap;
}

.url-chip-slot {
	color: var(--fg-3);
}

/* 주소는 넘치면 **뒤를 자른다.** 앞(호스트)이 무엇인지가 정보고 뒤(경로)는 대개 반복이다. */
.url-chip-host {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 주소가 없는 줄. 링크가 아니므로 커서도 손가락이 아니다. */
.url-chip.is-none {
	color: var(--fg-3);
}

@media (hover: hover) {
	a.url-chip:hover {
		color: var(--fg);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* 코드는 **왼쪽 정렬**이다 — 자기 칸의 시작이 모든 줄에서 같아야 점 다음의 리듬이 유지된다
   (오른쪽 정렬은 코드가 오른쪽 끝에 있던 시절의 규칙이었다). */
.url-chip-code {
	color: var(--fg-3);
}

.url-chip.is-ok .url-chip-code { color: var(--ok); }
.url-chip.is-auth .url-chip-code { color: var(--warn); }
.url-chip.is-down .url-chip-code { color: var(--bad); }

/* 상태 점 — 목록·상세가 같은 것을 쓴다. */
.state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--t-sm);
	color: var(--fg-2);
}