@charset "utf-8";

/* ============================================================
   포인트존 그룹 바로가기 버튼 (/bbs/group.php?gr_id=point)
   ------------------------------------------------------------
   마크업: theme/Nariya-A/group/point.php
   본문은 <main id="nt_body"> 안에 렌더되므로 #nt_body 스코프인
   skin/board/totolist/tokens.css 의 var(--*) 가 .pgz-* 까지 도달한다.
   하드코딩 hex 금지 — 값의 SSOT 는 tokens.css.
   ============================================================ */

/* ============================================
   상단 배너 (.board-list-banner 공통 형태 — DESIGN_SYSTEM.md §9.3)
   --------------------------------------------
   문구는 point.php 상단 $_banner 가 소유한다 (마크업 하드코딩 금지).
   ⚠ 클래스명은 16개 화면 공통 규약(.board-list-banner__*)이지만 값은 이 화면 전용 —
      다른 보드와 자동 공유되지 않는다. 골격을 바꿀 땐 §9.3 을 먼저 본다.
   값은 exchange/style.css:1588-1623 과 같다(같은 포인트존 소속이라 색을 잇는다).
   ============================================ */
.board-list-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 32px;
	background: linear-gradient(135deg, #3182f6 0%, #1b64da 60%, #0f4baf 100%);
	border-radius: var(--r-10,10px);
	overflow: hidden;
	/* 세로 150px — 이 화면 전용 값이다(형제 보드는 135px).
	   §9.3 은 「형태」만 고정하고 값(색·폭·높이·장식 원)은 화면마다 달라도 된다.
	   height 가 아니라 min-height 인 이유: 글자가 줄바꿈되면 배너가 스스로 늘어나야 한다. */
	min-height: 150px;
	/* 상단 배너 규정 — DESIGN_SYSTEM §9.3 */
	border: none;
	max-width: 1000px;
	margin: 0 auto 16px;
}
.board-list-banner__deco { position: absolute; border-radius: 50%; opacity: 0.1; background: #fff; }
.board-list-banner__deco--1 { width: 180px; height: 180px; top: -60px; right: 60px; }
.board-list-banner__deco--2 { width: 100px; height: 100px; bottom: -30px; right: -10px; }
.board-list-banner__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.board-list-banner__badge {
	display: inline-flex; align-items: center; width: fit-content; padding: 3px 10px;
	background: rgba(255,255,255,0.2); border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700;
	color: #fff; letter-spacing: 1.5px; backdrop-filter: blur(4px); line-height: 1.5; /* 상속 차단 — 페이지 문맥따라 1.5/1.6 갈려 배너 높이가 달라짐 */
}
.board-list-banner__title { font-size: 17px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.5px; line-height: 1.35; }
.board-list-banner__desc { font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.78); margin: 0; letter-spacing: -0.2px; line-height: 1.5; }
.board-list-banner__icon {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; min-width: 52px;
	background: rgba(255,255,255,0.15); border-radius: var(--r-12); color: #fff; font-size: 24px; backdrop-filter: blur(4px);
}
/* 모바일 — 글자가 실제 텍스트라 폭이 줄어도 읽힌다. 높이만 85px 로 낮춘다.
   (구 이미지 배너는 폭에 비례해 47px 까지 찌그러졌다.) */
@media (max-width: 575px) {
	.board-list-banner { padding: 22px 20px; min-height: 85px; }
	.board-list-banner__title { font-size: 15px; }
	.board-list-banner__icon { width: 44px; height: 44px; min-width: 44px; font-size: 20px; }
	/* 설명문 1줄 말줄임 — 배너 높이 유지 (totolist/style.css:419-425 와 같은 처리) */
	.board-list-banner__desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
}

/* ⚠ 버튼 그리드에는 폭(max-width)·좌우 패딩을 주지 말 것 — 정의처가 따로 있다.
   custom-sidebar.css:3489-3497
     .sbc-site-main #nt_body     { padding: 20px 20px 40px }
     .sbc-site-main #nt_body > * { max-width: 1000px; margin-left:auto; margin-right:auto }
   모든 게시판이 이 1000px 을 쓴다. 여기서 또 조이면 그만큼 좁아진다
   (구 max-width:960px + padding:0 16px = 실제 928px 로 다른 게시판보다 좁았다).
   위 .board-list-banner 의 max-width:1000px 은 공통 블록의 원본 값이라 그대로 둔다(같은 값이라 무해). */

.pgz-shortcuts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	/* 폭·좌우 패딩 없음(위 주석 참조). 세로 여백도 없음 —
	   #nt_body 의 padding:20px…40px 이 주인이고 여기서 주면 합산된다. */
	font-family: var(--font-ui);
}

/* 버튼 — height 를 강제하지 않는다. 위아래 대칭 패딩 + 정수 line-height 로
   글자가 상자를 만든다(DESIGN_SYSTEM.md 「뱃지·칩 만드는 법」).
   그리드가 행 높이를 stretch 로 맞추므로 한 줄/두 줄 라벨이 섞여도 나란하다. */
.pgz-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-12);
	box-shadow: var(--sh-card);
	color: var(--ink);
	text-decoration: none;
	text-align: center;
	transition: border-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.pgz-btn:hover,
.pgz-btn:focus {
	border-color: var(--brand);
	color: var(--brand);
	box-shadow: var(--sh-md);
	text-decoration: none;
	transform: translateY(-2px);
}

.pgz-btn:focus-visible {
	outline: 2px solid var(--field-focus-ring);
	outline-offset: 2px;
}

/* 아이콘 크기는 짝수 — (부모−자식)÷2 가 정수로 떨어지게 한다. */
.pgz-btn__ico {
	font-size: 24px;
	line-height: 1;
	color: var(--brand);
}

.pgz-btn__txt {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: -.2px;
	word-break: keep-all;
}

@media (max-width: 767px) {
	.pgz-shortcuts {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.pgz-btn { padding: 22px 10px; }
	.pgz-btn__ico { font-size: 22px; }
	.pgz-btn__txt { font-size: 15px; }
}

/* 다크모드 — 토큰이 라이트 전용이라 각 스킨이 담당하는 기존 규약을 따른다. */
html.dark-mode .pgz-btn {
	background: #25262b;
	border-color: #2c2d32;
	color: #e5e7eb;
	box-shadow: none;
}
html.dark-mode .pgz-btn:hover,
html.dark-mode .pgz-btn:focus {
	border-color: var(--brand);
	color: var(--brand);
}