@charset "utf-8";
/* ============================================================
   promise_news.css — 언론으로 보는 공약 (카드형 목록 게시판)
   · gallery.html(서브 레이아웃 / 검색 / 페이징 / 글쓰기)을 그대로 쓰고
     목록 영역만 이 파일로 교체한다.
   · 타이포 스케일은 모든 화면에서 동일하다(제목 2rem / 공약명 1.65rem / 언론사 1.5rem /
     날짜·배지 1.45rem). 화면이 좁아지면 글자 크기가 아니라
     "열 수 → 카드 간격" 순으로 줄이고, 카드 내부 여백은 넉넉하게 유지한다.
   ============================================================ */

/* pnews_list - 시작 */
.pnews_list{display:grid; grid-template-columns:repeat(var(--pn_cols,3),1fr); gap:2.8rem; margin-top:3.6rem;}

.pnews_list .pn_link{position:relative; overflow:hidden; display:flex; flex-direction:column; height:100%; min-height:23rem; padding:2.8rem 3rem 2.6rem; border-radius:1.6rem;
	background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75);
	-webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1.8rem 3.6rem -2.4rem rgba(20,40,80,.38);
	transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .28s, border-color .28s, box-shadow .3s;}
/* 상단 포인트 바 — hover 시 노출.
   카드 라운드(1.6rem)에 모서리가 잘려 보이지 않도록 좌우를 라운드보다 안쪽으로 들이고
   아래쪽만 둥글게 처리해 짧은 탭 형태로 둔다. */
.pnews_list .pn_link::before{content:""; position:absolute; left:2.6rem; right:2.6rem; top:0; height:.4rem; border-radius:0 0 .4rem .4rem;
	background:linear-gradient(90deg,rgba(50,120,205,.9),rgba(43,167,172,.6)); opacity:0; transform:translateY(-.4rem); transition:opacity .26s, transform .3s cubic-bezier(.16,1,.3,1);}
.pnews_list .pn_link:hover{transform:translateY(-.5rem); background:rgba(255,255,255,.82); border-color:rgba(157,189,230,.85);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2.6rem 4.6rem -2.4rem rgba(20,40,80,.45);}
.pnews_list .pn_link:hover::before{opacity:1; transform:none;}
.pnews_list .pn_link:focus-visible{outline:3px solid var(--point); outline-offset:.4rem;}

/* 상단 : 언론사 + 날짜 */
.pnews_list .pn_top{display:flex; align-items:center; justify-content:space-between; gap:1.6rem;}
.pnews_list .pn_media{overflow:hidden; display:inline-flex; align-items:center; gap:.7rem; min-width:0; font-size:1.5rem; font-weight:700; letter-spacing:-.03rem; color:#4d5563; white-space:nowrap; text-overflow:ellipsis;}
.pnews_list .pn_media::before{content:""; flex:none; width:.5rem; height:.5rem; border-radius:50%; background:rgba(26,95,180,.55);}
.pnews_list .pn_date{flex:none; font-size:1.45rem; font-weight:500; color:#8a93a0; font-variant-numeric:tabular-nums;}

/* 제목 : 2줄 클램프 */
.pnews_list .pn_tit{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:2rem 0 2.6rem; font-size:2rem; font-weight:700; line-height:1.55; letter-spacing:-.05rem; color:var(--ink); word-break:keep-all; text-wrap:pretty; transition:color .22s;}
.pnews_list .pn_link:hover .pn_tit{color:var(--point);}

/* 하단 : 공약 번호 배지 + 공약명 */
.pnews_list .pn_foot{display:flex; align-items:center; gap:1.1rem; min-width:0; margin-top:auto; padding-top:1.8rem; border-top:1px solid rgba(20,40,80,.1);}
.pnews_list .pn_no{flex:none; display:inline-flex; align-items:center; justify-content:center; height:3rem; padding:.05rem 1.15rem 0; border-radius:.8rem; line-height:1;
	background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff; font-size:1.45rem; font-weight:600; letter-spacing:-.02rem; font-variant-numeric:tabular-nums;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 .8rem 1.6rem -1rem rgba(26,95,180,.7);}
.pnews_list .pn_pledge{overflow:hidden; min-width:0; font-size:1.65rem; font-weight:600; letter-spacing:-.03rem; color:var(--point); white-space:nowrap; text-overflow:ellipsis;}

/* 버전 : 유리(기본) / 백색 솔리드 */
.pnews_list[data-variant="solid"] .pn_link{background:#fff; border-color:#e2e8f1; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1.4rem 3rem -2.4rem rgba(20,40,80,.35);}
.pnews_list[data-variant="solid"] .pn_link:hover{background:#fff; border-color:rgba(157,189,230,.9);}

	/* ────────────────────────────────────────────────────────────
	   반응형 — 웹접근성(WCAG 1.4.4 / 1.4.10 / 2.5.5) 기준
	   · 글자 크기는 어떤 화면에서도 바뀌지 않는다(확대/축소 없음).
	   · 카드 폭이 좁아 제목 한 줄에 15자 미만이 되기 전에 열 수를 줄인다.
	     3열(≥1181px) → 2열(860~1180px) → 1열(≤859px)
	   · 카드 내부 여백은 2.4rem 이하로 내려가지 않게 유지 — 빽빽함 방지.
	   · 카드 전체가 링크이므로 높이는 항상 44px 이상.
	   ──────────────────────────────────────────────────────────── */
	@media (max-width:1440px){
		.pnews_list{gap:2.6rem;}
		.pnews_list .pn_link{padding:2.7rem 2.8rem 2.5rem;}
	}
	@media (max-width:1280px){
		.pnews_list{gap:2.4rem; margin-top:3.2rem;}
		.pnews_list .pn_link{min-height:22rem; padding:2.6rem 2.6rem 2.4rem;}
		.pnews_list .pn_tit{margin:1.9rem 0 2.4rem;}
	}
	/* 3열 카드 폭이 34rem 아래로 내려가는 구간 → 2열로 넓혀 준다 */
	@media (max-width:1180px){
		.pnews_list{grid-template-columns:repeat(2,1fr); gap:2.4rem; margin-top:3.2rem;}
		.pnews_list .pn_link{min-height:0; padding:2.8rem 3rem 2.6rem;}
		.pnews_list .pn_tit{margin:2rem 0 2.6rem;}
	}
	@media (max-width:1024px){
		.pnews_list{gap:2.2rem; margin-top:3rem;}
		.pnews_list .pn_link{padding:2.6rem 2.8rem 2.4rem;}
	}
	/* 2열 카드가 40rem 아래로 좁아지는 구간 → 1열. 한 장이 전체 폭을 쓰므로
	   제목이 한 줄에 충분히 들어가고 카드 높이는 오히려 낮아진다. */
	@media (max-width:859px){
		.pnews_list{grid-template-columns:1fr; gap:1.8rem; margin-top:2.8rem;}
		.pnews_list .pn_link{padding:2.6rem 2.8rem 2.4rem;}
		.pnews_list .pn_tit{margin:1.8rem 0 2.4rem;}
	}
	@media (max-width:768px){
		.pnews_list{gap:1.6rem; margin-top:2.6rem;}
		.pnews_list .pn_link{padding:2.5rem 2.6rem 2.3rem; border-radius:1.4rem;}
		.pnews_list .pn_tit{-webkit-line-clamp:3;}
		/* 터치 환경 : 부상 효과 대신 눌림 상태 */
		.pnews_list .pn_link:hover{transform:none;}
		.pnews_list .pn_link:active{background:rgba(255,255,255,.88);}
		.pnews_list .pn_link:active::before{opacity:1; transform:none;}
	}
	@media (max-width:600px){
		.pnews_list .pn_link{padding:2.4rem 2.4rem 2.2rem;}
		.pnews_list .pn_tit{margin:1.7rem 0 2.2rem;}
		.pnews_list .pn_foot{padding-top:1.7rem;}
	}
	@media (max-width:480px){
		.pnews_list{gap:1.4rem;}
		.pnews_list .pn_link::before{left:2rem; right:2rem;}
		.pnews_list .pn_link{padding:2.4rem 2.2rem 2.2rem; border-radius:1.2rem;}
		.pnews_list .pn_top{gap:1.2rem;}
		/* 공약명은 한 줄 자르기 대신 두 줄까지 보여준다(정보 손실 방지) */
		.pnews_list .pn_foot{align-items:flex-start; gap:1rem;}
		/* 배지는 카드가 좁아진 만큼 살짝 아담하게 — 글자 크기는 유지 */
		.pnews_list .pn_no{height:2.9rem; padding:0 1rem; border-radius:.7rem;}
		.pnews_list .pn_pledge{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; line-height:1.5; padding-top:.2rem;}
	}
	@media (max-width:380px){
		.pnews_list .pn_link{padding:2.2rem 2rem;}
		.pnews_list .pn_tit{margin:1.6rem 0 2rem;}
		/* 배지와 공약명은 위아래로 — 공약명이 카드 폭을 다 쓰게 해서 줄바꿈이 자연스럽다 */
		.pnews_list .pn_foot{flex-direction:column; align-items:flex-start; gap:.9rem; padding-top:1.6rem;}
		.pnews_list .pn_no{height:2.8rem; padding:0 1rem; border-radius:.7rem;}
		.pnews_list .pn_pledge{-webkit-line-clamp:3; padding-top:0;}
	}
	/* 언론사명 + 날짜는 320px에서도 한 줄에 들어간다(88px + 86px < 카드 내부 231px).
	   초소형(≤300px)에서만 두 줄로 내린다. */
	@media (max-width:300px){
		.pnews_list .pn_link{padding:2rem 1.8rem;}
		.pnews_list .pn_top{flex-direction:column; align-items:flex-start; gap:.6rem;}
		.pnews_list .pn_tit{margin:1.4rem 0 1.8rem;}
	}

	/* 모션 최소화 설정 존중 */
	@media (prefers-reduced-motion:reduce){
		.pnews_list .pn_link,
		.pnews_list .pn_link::before,
		.pnews_list .pn_tit{transition:none;}
		.pnews_list .pn_link:hover{transform:none;}
	}
	/* 320~360px : 원본 board.css 페이징(44px 타깃 5개 + 화살표)이 컨테이너를 넘치는 구간 —
	   글자·타깃 크기는 유지하고 줄바꿈으로 해결한다 */
	@media (max-width:360px){
		.board_foot .paging{flex-wrap:wrap; row-gap:.8rem;}
	}
/* pnews_list - 끝 */