.management-shell {
	width: var(--shell-width);
	margin: clamp(28px, 5vw, 56px) auto;
}

.management-gate {
	width: min(620px, 100%);
	margin: 0 auto;
	padding: clamp(24px, 4vw, 36px);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.management-gate-heading {
	display: grid;
	gap: var(--space-2);
	margin-bottom: var(--space-7);
}

/* 이 제목들은 h1 이었는데, 조각이 projects.html 안에 삽입될 때 h1 이 두 개가 되어 h2 로 낮췄다.
   시각 크기는 화면의 주 제목 그대로 유지한다. */
.management-gate-heading h2,
.console-header-top h2 {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: 1.2;
}

.management-gate-heading p:last-child,
.settings-heading p {
	margin: 0;
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	line-height: 1.65;
	word-break: keep-all;
}

.management-auth-form {
	display: grid;
	gap: var(--space-4);
}

.secret-input-wrap {
	position: relative;
	display: block;
}

.secret-input-wrap .field-input {
	padding-right: 72px;
}

.input-action {
	position: absolute;
	top: 50%;
	right: 6px;
	min-width: 54px;
	height: 34px;
	padding: 0 10px;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

.management-auth-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-3);
}

.credential-privacy-note {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-4);
	color: var(--color-text-subtle);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-2xs);
	line-height: 1.55;
}

.management-console {
	display: grid;
	gap: 0;
}

.console-header {
	display: grid;
	gap: var(--space-5);
	padding: var(--panel-padding);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.console-header-top {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	justify-content: space-between;
}

.compact-action {
	min-height: var(--button-height);
	padding: 8px 12px;
	font-size: var(--text-xs);
}

.link-identity {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.8fr);
	gap: clamp(20px, 3vw, 36px);
	align-items: end;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.link-identity-main {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}

.link-status-line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.sample-badge {
	display: inline-flex;
	width: fit-content;
	padding: 5px 8px;
	color: var(--color-warning);
	background: var(--color-warning-soft);
	border: 1px solid var(--color-warning-border);
	border-radius: var(--radius-xs);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
}

.managed-short-url-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px auto;
	gap: var(--space-2);
	align-items: center;
}

.managed-short-url {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: 1.25;
	text-decoration: none;
}

.managed-short-url:hover {
	color: var(--color-brand);
}

.managed-destination {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text-subtle);
	font-size: var(--text-xs);
	line-height: 1.5;
}

.link-identity-meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
}

.link-identity-meta div {
	min-width: 0;
}

.link-identity-meta dt {
	margin-bottom: 4px;
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
}

.link-identity-meta dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--color-text);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: 1.45;
}

/* 탭 라벨을 본문 정렬축에 세운다.
   이전에는 탭마다 좌우 16px 패딩 + min-width 112px 이라 라벨이 박스 안에서 중앙 정렬돼
   첫 라벨이 x=57~83 에서 시작했다. 제목·URL·패널 제목은 모두 x=41 에 서 있어 축이 끊겼다.
   패딩을 없애고 라벨 사이를 gap 으로 벌리면 첫 라벨이 축에 붙고,
   선택 밑줄도 라벨 폭에 맞아 무엇이 선택됐는지 더 정확히 가리킨다. */
.console-tabs {
	display: flex;
	gap: var(--space-6);
	padding: 0 var(--panel-padding);
	background: var(--color-surface);
	border-right: 1px solid var(--color-border-strong);
	border-bottom: 1px solid var(--color-border-strong);
	border-left: 1px solid var(--color-border-strong);
}

.console-tab {
	min-width: 0;
	min-height: 48px;
	padding: 12px 0 10px;
	color: var(--color-text-subtle);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}


.console-tab[aria-selected="true"] {
	color: var(--color-brand-strong);
	border-bottom-color: var(--color-brand);
}

.console-tab:disabled {
	color: var(--color-text-placeholder);
	cursor: not-allowed;
}

.console-panel {
	padding: var(--panel-padding);
	background: var(--color-surface-muted);
	border-right: 1px solid var(--color-border-strong);
	border-bottom: 1px solid var(--color-border-strong);
	border-left: 1px solid var(--color-border-strong);
	border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}

.analytics-panel {
	display: grid;
	gap: var(--space-5);
}

.analytics-toolbar,
.analytics-section-heading,
.settings-heading {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	justify-content: space-between;
}

.analytics-toolbar h2,
.settings-heading h2 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.analytics-toolbar p,
.analytics-section-heading p {
	margin: 4px 0 0;
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	line-height: 1.5;
}

/* 옆에 놓이는 날짜 입력이 40px 이라 이 그룹도 40px 로 맞춘다.
   이전에는 padding 3px + 버튼 40px + 테두리 2px = 48px 라 같은 행의 컨트롤보다 8px 높았다. */
.period-control {
	display: grid;
	grid-template-columns: repeat(3, 56px);
	padding: 2px;
	background: var(--color-surface-rail);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
}

.period-control button {
	min-height: 34px;
	padding: 0 var(--space-2);
	color: var(--color-text-subtle);
	background: transparent;
	border: 0;
	border-radius: 6px;
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

/* 선택 상태는 채운 면으로 알린다. 그림자는 "떠 있음" 이라 선택 신호로 쓰지 않는다. */
.period-control button[aria-pressed="true"] {
	color: #ffffff;
	background: var(--color-brand);
}

.sample-data-notice {
	display: flex;
	flex-wrap: wrap;
	gap: 3px var(--space-2);
	padding: 10px 12px;
	color: var(--color-warning);
	background: var(--color-warning-soft);
	border-left: 3px solid var(--color-warning);
	font-size: var(--text-2xs);
	line-height: 1.5;
}

/* 지표가 6개라 3열이면 2줄이 정확히 채워진다. 4열은 둘째 줄에 빈칸 2개가 남았다. */
/* 지표 6개는 "전체 진입/이동", "사람 진입/이동", "미이동/봇" 세 쌍으로 읽는 값이다.
   카드 6개로 떼어 놓으면 테두리 6개가 쌍의 관계를 끊는다.
   하나의 면에 1px 간격을 두고 배경색을 비쳐 구분선을 만들면, 열 수가 바뀌는
   반응형 구간에서도 nth-child 계산 없이 격자가 유지된다. */
.metric-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

/* 좌우는 판과 같은 축(--panel-padding)에 세우고, 위아래만 타일답게 좁힌다.
   사방 --space-4 였던 동안 지표 라벨이 x=17, 옆 판 본문이 x=25 여서
   같은 화면에 8px 어긋난 축이 하나 더 있었다(실측). */
.metric-item {
	min-width: 0;
	padding: var(--space-4) var(--panel-padding);
	background: var(--color-surface);
}

.metric-item dt {
	color: var(--color-text-muted);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
}

/* 값은 지표의 본문이다. 라벨·보조설명과 크기 차이를 벌려 스캔이 값에 먼저 닿게 한다. */
.metric-item dd {
	margin: var(--space-2) 0 var(--space-1);
	color: var(--color-text);
	font-size: var(--text-xl);
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-bold);
	line-height: 1.15;
}

/* 사람 기준 진입·이동이 실제 성과 지표다. 이 둘만 값을 한 단계 키운다. */
.metric-item:nth-child(3) dd,
.metric-item:nth-child(4) dd {
	font-size: var(--text-2xl);
}

/* 미이동·봇은 진단용이라 값의 무게를 낮춘다. */
.metric-item:nth-child(5) dd,
.metric-item:nth-child(6) dd {
	color: var(--color-text-muted);
	font-weight: var(--weight-medium);
}

.metric-item p {
	margin: 0;
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	line-height: 1.4;
}

/* 다른 판(.console-header, .project-card, .campaign-workspace-header)과 같은
   --panel-padding 을 쓴다. --space-5(20px) 였던 동안 이 판의 본문은 x=21 에,
   옆 카드 본문은 x=25 에 서서 한 화면에 4px 어긋난 축이 두 개 있었다(실측). */
.analytics-section {
	min-width: 0;
	padding: var(--panel-padding);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
}

.analytics-section-heading h3 {
	margin: 0;
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
}

.chart-legend {
	display: flex;
	gap: var(--space-4);
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
}

.chart-legend span::before {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: 50%;
	content: "";
}

.chart-legend .entries::before {
	background: var(--color-brand);
}

.chart-legend .redirects::before {
	background: var(--color-success);
}

.trend-chart-wrap {
	width: 100%;
	height: 300px;
	margin-top: var(--space-4);
}

/* 통계 화면의 같은 필터(.statistics-filter)와 동일하게 공통 폼 컴포넌트를 쓴다.
   이전에는 이 블록만 rem 값과 hex 를 직접 써서 나머지 화면과 어긋나 있었다. */
/* 통계 화면의 .statistics-filter 와 같은 이유로 margin-bottom 을 두지 않는다.
   .analytics-panel 의 grid gap 이 이미 아래 간격을 만든다. */
.analytics-custom-period {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: end;
}

.analytics-custom-period button[type="submit"] {
	margin-left: auto;
}

.analytics-custom-period .field {
	flex: 0 1 auto;
	min-width: 9.5rem;
}

.trend-chart {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.trend-chart .chart-grid {
	stroke: var(--color-border);
	stroke-width: 1;
}

.trend-chart .chart-axis-label {
	fill: var(--color-text-subtle);
	font-size: var(--text-2xs);
}

.trend-chart .chart-line-entries,
.trend-chart .chart-line-redirects {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}

.trend-chart .chart-line-entries {
	stroke: var(--color-brand);
}

.trend-chart .chart-line-redirects {
	stroke: var(--color-success);
}

.analytics-breakdowns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.compact-breakdowns .analytics-section {
	padding-bottom: var(--space-4);
}

.breakdown-list,
.compact-data-list {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.breakdown-row {
	display: grid;
	grid-template-columns: minmax(88px, 0.8fr) minmax(120px, 1.8fr) auto;
	gap: var(--space-3);
	align-items: center;
	min-width: 0;
}

.breakdown-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-text);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
}

.breakdown-track {
	height: 7px;
	overflow: hidden;
	background: var(--color-surface-rail);
	border-radius: 4px;
}

.breakdown-fill {
	height: 100%;
	background: var(--color-brand);
	border-radius: 4px;
}

.breakdown-value {
	min-width: 42px;
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	font-variant-numeric: tabular-nums;
	font-weight: var(--weight-medium);
	text-align: right;
}

.compact-data-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-2xs);
}

.compact-data-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.compact-data-name {
	font-weight: var(--weight-medium);
}

.compact-data-count,
.compact-data-share {
	color: var(--color-text-subtle);
	font-variant-numeric: tabular-nums;
}

/* position:relative 는 표 안의 절대위치 요소(.sr-only 등)가 클리핑을 벗어나지 않게 한다. */
.data-table-wrap {
	position: relative;
	min-width: 0;
	margin-top: var(--space-4);
	overflow-x: auto;
}

.activity-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: var(--text-2xs);
}

.activity-table th,
.activity-table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	white-space: nowrap;
}

/* 표 안 링크는 글자 높이(17px)가 그대로 클릭 영역이었다. 위아래 4px 을 더해
   25px 로 올린다 — WCAG 2.5.8 의 24px 를 자체로 넘기므로 간격 예외에 기대지 않는다.
   행 높이는 셀 패딩(12px)이 이미 만들고 있어 표가 늘어나지는 않는다. */
.activity-table td a {
	display: inline-block;
	padding-block: 4px;
}

.activity-table th {
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
}

.activity-table tbody tr:last-child td {
	border-bottom: 0;
}

.activity-result {
	display: inline-flex;
	padding: 4px 7px;
	border-radius: 6px;
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
}

.activity-result.redirected {
	color: var(--color-success);
	background: var(--color-success-soft);
}

.activity-result.blocked {
	color: var(--color-warning);
	background: var(--color-warning-soft);
}

.settings-panel {
	display: grid;
	gap: var(--space-6);
}

.settings-form {
	display: grid;
	gap: var(--space-5);
	max-width: 820px;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
}

.settings-expiration-field {
	gap: var(--space-3);
}

#settings-expire-options button {
	min-width: 0;
	min-height: 40px;
	padding: 8px;
	color: var(--color-text-subtle);
	background: var(--color-surface-rail);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

/* 링크 설정의 만료 칩. 생성 화면의 .quick-expire-option 과 같은 선택 표현을 쓴다. */
#settings-expire-options button[aria-pressed="true"] {
	color: #ffffff;
	background: var(--color-brand);
	border-color: var(--color-brand);
}

.settings-actions {
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
}

/* .danger-zone 본체는 components.css 한 곳에만 둔다. 여기에 사본이 있던 동안
   이 파일이 srrrg.css 뒤에 실리는 탓에 사본이 이겨서, components.css 가 설명하는
   "중립 면 + 좌측 마커" 대신 사방이 danger 색으로 둘러졌다. */
.danger-zone h3 {
	margin: 0 0 4px;
	font-size: var(--text-md);
}

.danger-zone p {
	margin: 0;
	color: var(--color-text-subtle);
	font-size: var(--text-2xs);
	line-height: 1.5;
}

.confirmation-dialog {
	width: min(460px, calc(100% - var(--shell-gutter) * 2));
	padding: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	box-shadow: var(--shadow-modal);
}

.confirmation-dialog::backdrop {
	background: rgba(15, 23, 42, 0.48);
}

.confirmation-dialog form {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-6);
}

.confirmation-dialog h2,
.confirmation-dialog p {
	margin: 0;
}

.confirmation-dialog h2 {
	font-size: var(--text-xl);
}

.confirmation-dialog p {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.dialog-actions {
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
	margin-top: var(--space-2);
}

@media (max-width: 900px) {
	.link-identity {
		grid-template-columns: 1fr;
	}

	.metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.analytics-breakdowns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	/* 폭은 --shell-gutter 가 responsive.css 에서 줄어들며 따라온다. 위 여백만 좁힌다. */
	.management-shell {
		margin: 20px auto;
	}

	.management-gate {
		padding: var(--space-5);
	}

	.management-auth-actions,
	.managed-short-url-row {
		grid-template-columns: 1fr;
	}

	.console-header-top,
	.analytics-toolbar,
	.analytics-section-heading,
	.settings-heading,
	/* 좁은 폭에서는 설명과 버튼을 위아래로. .danger-zone 이 grid 라서
	   flex-direction 대신 열을 한 줄로 접는다. */
	.danger-zone {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.managed-short-url-row .copy-button,
	.managed-short-url-row .compact-action {
		width: 100%;
	}

	.link-identity-meta {
		grid-template-columns: 1fr;
	}

	/* 탭이 flex: 1 로 균등 분할되는 폭에서는 24px 갭이 과하다.
	   320px 에서 스트립 276px 중 4탭이면 갭만 72px(26%)를 먹어 라벨 예산이 51px 로 눌렸다.
	   8px 로 줄이면 같은 조건에서 63px 이 된다. */
	.console-tabs {
		gap: var(--space-2);
		padding: 0 var(--space-3);
	}

	.console-tab {
		flex: 1;
		min-width: 0;
	}

	.period-control {
		width: 100%;
		grid-template-columns: repeat(3, 1fr);
	}

	.metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.metric-item {
		padding: var(--space-3);
	}

	.trend-chart-wrap {
		height: 240px;
	}

	/* 표를 카드로 접는 규칙은 components.css 의 .stacking-table 로 옮겼습니다.
	   .activity-table 과 .campaign-link-table 이 같은 규칙을 공유합니다. */

	.breakdown-row {
		grid-template-columns: minmax(76px, 0.8fr) minmax(88px, 1.4fr) auto;
		gap: var(--space-2);
	}

	.settings-actions,
	.dialog-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.settings-actions button,
	.dialog-actions button,
	.danger-zone button {
		width: 100%;
	}

	#settings-expire-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {
	.metric-grid {
		grid-template-columns: 1fr;
	}
}