@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-09-29
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 * gallery 게시판 스킨의 **썸네일 격자** — 이 스킨에만 있는 구조.
 *
 * style.css (skin/bbs/gallery/asset) — 이 스킨의 list.php 가 `asset_head('skin::style.css')` 로 건다.
 *   셸(base.php)이 공통 여섯 장 **뒤**에 `<head>` 로 낸다 → global-template "그 화면에만 필요한 CSS".
 *
 *   ── 왜 이 파일이 있나 ───────────────────────────────────────────────────────
 *   게시판 스킨은 대개 CSS 가 **필요 없다** — 표·폼·버튼은 공통 컴포넌트(`c-table`·`c-input`·`c-btn`)로
 *   다 그려진다(basic·basic_multi 가 그렇다). 이 스킨만 목록이 **표가 아니라 격자**라서 예외다.
 *
 *   ── 담는 것 / 담지 않는 것 ──────────────────────────────────────────────────
 *     담는다   c-gallery (+ __item · __fig · __layer · __txt) — 격자 한 벌
 *     ✗ 그 밖   분류 탭 · 검색줄 · 페이징 · 글쓰기 버튼은 **공통 것 그대로**다(list.php 를 보면 c-*·l-* 뿐).
 *              view·form·comment 도 basic 과 같은 마크업이라 여기 규칙이 없다.
 *
 *   ⛔ **색·여백을 숫자로 박지 않는다** — 박으면 이 스킨이 어느 사이트에서 열리든 같은 모양이 되어
 *     "값은 사이트가 정한다" 가 무너진다(global-template). 그래서 토큰을 읽는다.
 *     ※ 다만 **격자의 치수**(칸 수·비율·hover 원 크기)는 토큰이 아니라 여기 적는다 — 그건 사이트가
 *       바꾸는 축이 아니라 **이 스킨이 그런 물건**이기 때문이다(레거시 값 그대로).
 *     ※ 레거시가 쓰던 `--transition1`·`--border-color1` 은 main 사이트의 옛 토큰이라 **읽지 않는다** —
 *       이 스킨은 gwizard 에서도 열릴 수 있고 그쪽엔 그 이름이 없다. 값을 직접 적거나 공통 토큰으로 바꿨다.
 *
 *   ※ 값의 출처는 레거시 `_skin/board/gallery/style.css` 의 `.board_list` 절이다 — 구조는 그대로다.
 *   ※ 2026-09-29 KRDS — 카드 사이 24px(KRDS 카드 gap) · 모서리는 `--radius-md`(KRDS large 10) · 글자 크기는 rem 토큰. 구조·hover 는 그대로.
 * ---------------------------------------------------------------------------------------------- */


/*  격자 — 기본 3열. 칸 사이는 24px (KRDS 카드 gap, 2026-09-29. 레거시 1.4em 과 같은 값).  */
.c-gallery					{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:0; padding:0; list-style:none;}
.c-gallery__item			{position:relative; width:100%; max-width:340px; overflow:hidden;}
.c-gallery__item > a		{display:block; color:inherit; text-decoration:none;}

/*  이미지 칸 — 4:2.6 비율을 못 박아 둔다. 그래야 썸네일 크기가 제각각이어도 격자가 흔들리지 않는다.
    이미지가 없는 글은 <img> 자체가 없다 — 그때는 이 바탕색이 그대로 보인다(대체 이미지 파일 ✗).  */
.c-gallery__fig				{position:relative; width:100%; aspect-ratio:4/2.6; margin:0; overflow:hidden;
							 border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-label);}
.c-gallery__fig img			{width:100%; height:100%; object-fit:cover; transition:all 0.35s ease;}
.c-gallery__item:hover .c-gallery__fig img	{transform:scale(1.12); opacity:0.8;}

/*  hover 에서 퍼지는 ⊹ 표시 — **이미지가 아니라 CSS 도형**이다(레거시도 그랬다).
    가운데에서 원이 커지고 그 안에 + 가 그려진다. 마크업은 빈 <span> 하나뿐.  */
.c-gallery__layer			{position:absolute; top:50%; left:50%; width:0; height:0; z-index:1;
							 border-radius:100%; background:var(--color-ink); opacity:0;
							 box-shadow:0 0 50px 0 rgba(0,0,0,.25); transform:translate(-50%,-50%);
							 transition:all 0.35s ease;}
.c-gallery__layer::before,
.c-gallery__layer::after	{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%,-50%);
							 background:#fff; border-radius:5px;}
.c-gallery__layer::before	{width:28px; height:2px;}
.c-gallery__layer::after	{width:2px; height:28px;}
.c-gallery__item:hover .c-gallery__layer	{opacity:1; width:80px; height:80px;}

/*  제목·날짜 — 제목은 **두 줄까지**만 보이고 넘치면 말줄임(칸 높이가 들쭉날쭉해지지 않게).  */
.c-gallery__txt				{padding:15px 0 10px 0; font-style:normal;}
.c-gallery__txt p			{margin:0 0 10px 0; font-size:var(--font-size-base); font-weight:700; line-height:1.4; color:var(--color-thead-ink);
							 overflow:hidden; text-overflow:ellipsis; word-wrap:break-word;
							 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.c-gallery__txt time		{font-size:var(--font-size-sm); color:var(--color-mute);}


/*  좁은 화면 — 3열 → 2열 → 1열 (레거시 중단점 그대로).
    1열에서는 칸 최대폭을 풀어야 화면을 꽉 채운다.  */
@media screen and (max-width:768px) {
	.c-gallery				{grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width:580px) {
	.c-gallery				{grid-template-columns:repeat(1, 1fr);}
	.c-gallery__item		{max-width:initial;}
}