/* 대상 : 게시판 상세 링크복사 아이콘 + 복사 안내 토스트
   출처 : js/overrides/bbs-copy-link.js 가 만든 .ktdi_copy_btn / .ktdi_copy_toast
   이유 : 시안(ktdi_26)에 링크복사 요소가 없어 대응 클래스가 없다.

   🔴 지시 41(2026-09-16) — 하단 큰 버튼 → **상단 메타 줄 오른쪽의 작은 아이콘**으로 바꿨다.
      시안이 `.post_head .meta` 를 flex(gap: 0 1.6rem)로 잡아 두었기 때문에
      margin-left:auto 하나로 오른쪽 끝에 붙는다(레이아웃을 새로 잡지 않는다).
   ⚠ 40번 진행기간 배지(.ktdi_proc)는 같은 줄 왼쪽에 붙는다 — 서로 침범하지 않는다. */

/* ── 아이콘 버튼 ─────────────────────────────────────────────── */
.post_head .meta .ktdi_copy_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 🔴 2026-09-21 지시 — 아이콘만으로는 무슨 버튼인지 몰라 `링크복사` 라벨을 붙였다.
	   41번의 2rem 정사각 아이콘 버튼에서, 라벨이 들어갈 수 있게 폭을 풀고 테두리를 줬다.
	   메타 글자(0.9rem/#6c7075)와 같은 톤이라 줄에서 튀지 않는다. */
	gap: 0.35rem;
	width: auto;
	height: 2rem;
	padding: 0 0.7rem;
	border: 1px solid var(--line-color, #DDE2EA);
	border-radius: 6px;
	background: #fff;
	color: #6c7075;
	font-size: 0.9rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: 0.2s all;
}
.ktdi_copy_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px 미만이라도 터치가 되게 여백으로 히트영역을 벌린다 */
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #6c7075;            /* 메타 글자색과 같은 톤 — 튀지 않게 */
	cursor: pointer;
	transition: 0.2s all;
}
.ktdi_copy_btn .material-symbols-outlined {
	font-size: 1.15rem;
	line-height: 1;
}
.ktdi_copy_btn:hover {
	background: #f0f1f4;
	color: var(--main-color, #344dcf);
	border-color: var(--main-color, #344dcf);
}
/* 🔴 키보드 포커스 링을 지우지 않는다 — 아이콘만 있는 버튼이라 더 필요하다 */
.ktdi_copy_btn:focus-visible {
	outline: 2px solid var(--main-color, #344dcf);
	outline-offset: 2px;
}

/* BBSS005(포트폴리오) — .port_nav 는 이미 아이콘 바라 기본 룰(overrides/bbs.css)이 색·패딩을 준다.
   여기선 우리 버튼의 고정 크기만 풀어 주변 아이콘과 높이를 맞춘다. */
.port_nav .ktdi_copy_btn {
	width: auto;
	height: auto;
}
/* 라벨은 주변 링크(PREV/NEXT)와 같은 크기로 — 아이콘 바에서만 따로 맞춘다 */
.port_nav .ktdi_copy_btn .copy_label {
	font-size: inherit;
}

/* ── 토스트 ─────────────────────────────────────────────────
   🔴 네이티브 alert 금지(프론트에 SweetAlert2 미로드)라 직접 만든다.
      기본은 숨김(opacity 0 + pointer-events none)이고 .on 일 때만 보인다.
      display 로 껐다 켜면 transition 이 안 걸려 깜빡인다. */
.ktdi_copy_toast {
	position: fixed;
	left: 50%;
	bottom: 2.4rem;
	z-index: 9999;
	transform: translate(-50%, 0.6rem);
	max-width: calc(100vw - 2rem);
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: rgba(23, 28, 40, 0.92);
	color: #fff;
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.ktdi_copy_toast.on {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media screen and (max-width: 640px) {
	.ktdi_copy_toast {
		bottom: 1.2rem;
		white-space: normal;
	}
	/* 좁은 폭에서 메타 줄이 wrap 되면 margin-left:auto 가 의미를 잃는다 →
	   줄 전체를 차지하게 두지 말고 오른쪽 정렬을 유지한다 */
	.post_head .meta .ktdi_copy_btn {
		margin-left: auto;
		align-self: flex-start;
	}
}