/* ===========================================================
   board2.css  (Scoped by .board-scope)
   -----------------------------------------------------------
   - 화이트 테마 (페이지 배경 #fff 에 어울리도록 디자인)
   - 전역 충돌 방지를 위해 .board-scope를 접두로 사용
   =========================================================== */

/* 
   .board-scope : 게시판 전체 래퍼
   - 기본 글자색 #222
   - line-height 1.5
   - 배경을 #fff로 지정 (부모 페이지가 흰색일 경우)
*/
.board-scope {
  background: #fff;
  color: #222;
  line-height: 1.5;
}

/*
   .board-scope * : 마진/패딩 초기화, box-sizing, 폰트
*/
.board-scope * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/*
   .board-scope .container :
   - 가로 폭 제한 1024px
   - 내부 여백 1rem
   - 배경 흰색 카드 느낌 + 부드러운 그림자
*/
.board-scope .container {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ------------------------------------
   공통 버튼 / 링크 (btn-link)
------------------------------------- */
.board-scope .btn-link,
.board-scope a.btn-link {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  margin-right: 0.25rem;
  text-decoration: none;
  border: 1px solid #ccc;
  background: transparent;
  color: #555;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.25s ease;
}
.board-scope .btn-link:hover {
  background: #fff;      /* hover 시 밝은 배경 */
  border-color: #1a73e8; /* 테두리만 살짝 파란색 */
  color: #000;
}

/* 버튼 구역 */
.board-scope .btn-area {
  margin-bottom: 1rem;
}

/* ------------------------------------
   table (기본 text형 목록)
------------------------------------- */
.board-scope table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  margin-top: 0.8rem;
  background: #fff;
}
.board-scope table thead th {
  background: #fff;          /* 기존 #f5f5f5 → #fff */
  color: #222;
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
  font-weight: 600;
}
.board-scope table tbody td {
  padding: 0.75rem;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: middle;
  color: #555;
}
.board-scope table tbody tr:hover {
  background: #fff;          /* 기존 #fafafa → #fff */
}
.board-scope table a {
  color: #1a73e8;
}
.board-scope table a:hover {
  text-decoration: underline;
}

/* ------------------------------------
   공통 컨테이너
------------------------------------- */
.board-scope .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ------------------------------------
   그리드(grid) 목록
------------------------------------- */
.board-scope .grid-container {
  display: grid;
  gap: 28px;
  margin-top: 16px;
}
.board-scope .grid-container[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.board-scope .grid-container[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.board-scope .grid-container[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.board-scope .grid-container[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }

.board-scope .grid-item {
  background: transparent;
  border: 0;
  padding: 0;
}

/* 카드 이미지(정사각형) */
.board-scope .grid-item > a {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;         /* 정사각형 */
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.board-scope .grid-item > a img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.board-scope .grid-item > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* 제목 */
.board-scope .grid-item h3 {
  margin: 10px 4px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #1f2937;
}
.board-scope .grid-item p { display: none; }

.board-scope .grid-item h3 a {
  color: #111;
  text-decoration: none;
}
.board-scope .grid-item h3 a:visited { color: #111; text-decoration: none; }
.board-scope .grid-item h3 a:hover,
.board-scope .grid-item h3 a:focus { color: #1a73e8; text-decoration: none; }

/* ------------------------------------
   Project View (Detail) : 이미지 900 / 텍스트 300 (우측)
------------------------------------- */
.board-scope .project-view {
  display: grid;
  gap: 32px;
  /* 우측 300px 고정, 좌측은 컨테이너 폭에서 우측과 gap 뺀 나머지 */
  grid-template-columns: minmax(0, calc(100% - 200px - 32px)) 200px;
  align-items: start;
  justify-content: center; /* 가운데 정렬 */
  margin-top: 24px;
}


/* 갤러리(좌측 900px) */
.board-scope .project-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;                 /* 900x600 비율 느낌. 필요시 16/9 등으로 변경 */
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f7;

}

/* 슬라이드 트랙 */
.board-scope .project-gallery .slides {
  display: flex;
  width: 100%;
  height: 100%;                         /* 갤러리 비율 따라감 */
  transition: transform .35s ease;
}

/* 개별 슬라이드 */
.board-scope .project-gallery .slide {
  flex: 0 0 100%;
  position: relative;
}
.board-scope .project-gallery .slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* 꽉 채우기(컷 가능). 컷 방지: contain */
  display: block;
}

/* 좌/우 네비 버튼 */
.board-scope .project-gallery .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.92);

  cursor: pointer;
}
.board-scope .project-gallery .nav:hover { background: #fff; }
.board-scope .project-gallery .nav:active { transform: translateY(-50%) scale(.98); }
.board-scope .project-gallery .nav.prev { left: 20px; }
.board-scope .project-gallery .nav.next { right: 20px; }
.board-scope .project-gallery .nav::before {
  content: '‹';
  display: block;
  font-size: 30px;
  line-height: 54px;
  text-align: center;
  color: #6b7280;
}
.board-scope .project-gallery .nav.next::before { content: '›'; }

/* 정보(우측 300px) */
.board-scope .project-info { width: 100%; }
.board-scope .project-info .title {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
}
.board-scope .project-meta,
.board-scope .project-info .meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-top: 12px;
  font-size: 14px;
  color: #374151;
}
.board-scope .project-info .meta .label { min-width: 64px; color: #6b7280; margin-right: 6px; }
.board-scope .project-info .meta .value { font-weight: 500; }
.board-scope .project-desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.75;
  color: #374151;
}

/* ------------------------------------
   반응형
------------------------------------- */
@media (max-width: 992px) {
  .board-scope .project-view {
    grid-template-columns: 1fr; /* 세로 스택 */
    gap: 24px;
  }
  .board-scope .project-gallery .nav.prev { left: 12px; }
  .board-scope .project-gallery .nav.next { right: 12px; }
}


/* ------------------------------------
   썸네일(thumbnail) 목록
------------------------------------- */
.board-scope .thumb-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ddd;
}
.board-scope .thumb-item img {
  border: 1px solid #ccc;
  background: #fff; /* 기존 #f5f5f5 → #fff */
  border-radius: 4px;
  display: block;
}
.board-scope .thumb-item h3 {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
  color: #222;
}
.board-scope .thumb-item p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
}
.board-scope .thumb-item a {
  text-decoration: none;
  color: #1a73e8;
}
.board-scope .thumb-item a:hover {
  text-decoration: underline;
}

/* ------------------------------------
   블로그(blog) 목록
------------------------------------- */
.board-scope .blog-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin: 0.8rem 0;
  transition: box-shadow 0.2s;
}
.board-scope .blog-item:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.board-scope .blog-item h2 {
  margin-bottom: 0.6rem;
  font-size: 1.3rem;
  color: #222;
}
.board-scope .blog-item img {
  display: block;
  margin: 0.5rem 0;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff; /* 기존 #f5f5f5 → #fff */
}
.board-scope .blog-item p {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.5rem;
}

/* ------------------------------------
   글 보기(게시글 읽기)
------------------------------------- */
.board-scope .post-view {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 게시글 제목 */
.board-scope .post-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  color: #222;
  line-height: 1.3;
}

/* 게시글 메타정보 */
.board-scope .post-meta {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #777;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.5rem;
}

/* 게시글 실제 내용 */
.board-scope .post-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

/* 게시글 내 이미지 */
.board-scope .post-image {
  margin: 1rem 0;
  border: 1px solid #ccc;
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
.board-scope .post-image:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

/* ------------------------------------
   글쓰기/수정 폼
------------------------------------- */
.board-scope form p {
  margin-bottom: 1rem;
}
.board-scope form label {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #444;
}
.board-scope form input[type="text"],
.board-scope form input[type="file"],
.board-scope form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  background: #fff;
  color: #222;
}
.board-scope form textarea {
  resize: vertical;
}
.board-scope form button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.board-scope form button:hover {
  background: #1358ac;
}

/* ------------------------------------
   반응형
------------------------------------- */
@media (max-width: 768px) {
  /* 썸네일 목록은 세로로 배치 */
  .board-scope .thumb-item {
    flex-direction: column;
  }
}
/* =========================================================
   ▲ 기존 board2.css 끝  ─── 아래부터는 1500px 오버라이드 ▲
   ========================================================= */

/* 1) 컨테이너 폭 확대 */
.board-scope .container        {max-width:1800px;}

/* 2) 프로젝트 상세 뷰(좌·우 열) ― 우측 고정폭만 살짝 늘리고 싶다면 */
.board-scope .project-view{
  --info-w: 220px; /* ← 우측 정보 폭. 더 줄이고 싶으면 200px/180px */
  grid-template-columns: minmax(0, calc(100% - var(--info-w) - 32px)) var(--info-w);
}


/* 3) 필요 시 그리드 카드 등 다른 요소들은 % 기반이라 추가 조치 불필요.
      여기에 선택자만 더 적어주면 동일 방식으로 쉽게 확장 가능 */
.board-scope .container {border:none !important;}
/* ─── 그리드 카드 Hover 딤 오버레이 ────────────────────── */
.board-scope .grid-item > a::after{
  content:"";
  position:absolute;           /* 카드 전체 덮기 */
  inset:0;
  background:rgba(0,0,0,.28);  /* 어둡게 할 색상/투명도 */
  opacity:0;                   /* 기본 = 투명 */
  transition:opacity .22s ease;
  z-index:1;                   /* 이미지 위, 다른 요소 아래 */
}
.board-scope .grid-item > a:hover::after{
  opacity:1;                   /* Hover 시만 보이기 */
}
/* ── “다음 페이지 →” 링크 스타일  ───────────────────────── */
.board-scope .next-page-link{      /* ⬅ HTML에서 a태그에 이 클래스를 붙여 주세요 */
  display:inline-flex;
  align-items:center;
  gap:12px;                        /* 글자와 화살표 사이 여백 */
  font-size:15px;                  /* 스샷과 비슷한 크기 */
  font-weight:500;
  color:#222;                      /* 평상시 글자색 */
  text-decoration:none;            /* 밑줄 제거 */
  transition:color .2s ease;
}

.board-scope .next-page-link::after{   /* 화살표(→) 생성 */
  content:"→";
  font-size:15px;
  transition:transform .2s ease;
}

.board-scope .next-page-link:hover{
  color:#1a73e8;                  /* Hover 시 살짝 파란색 */
}
.board-scope .next-page-link:hover::after{
  transform:translateX(4px);      /* 화살표가 오른쪽으로 살짝 이동 */
}
/* ──── [Border-Reset] 게시판 내부 모든 1px 테두리 제거 ──── */
.board-scope .container,
.board-scope table,
.board-scope table * ,
.board-scope .thumb-item,
.board-scope .blog-item,
.board-scope .post-view,
.board-scope .project-gallery,
.board-scope .project-view,
.board-scope .grid-item > a,
.board-scope img,
.board-scope input,
.board-scope textarea {
  border:none !important;      /* 남은 실선 전부 제거 */
  box-shadow:none !important;  /* 그림자까지 싹 빼고 싶다면 추가 */
}
/* ───── 게시글 하단 ‘가로선’ 전부 제거 ───────────── */

/* ① 스킨에서 자주 쓰이는 클래스들 */
.board-scope .bo_v_nb,
.board-scope .bo_v_tline,
.board-scope .bo_v_bot,
.board-scope .bo_v_btn_wrap,
.board-scope .bo_v_tnb,
.board-scope hr {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    height: 0 !important;      /* 혹시 높이를 1px로 준 경우 대비 */
}

/* ② 버튼 그룹(.btn-area)의 위쪽 선까지 없애기 */
.board-scope .btn-area {
    border-top: none !important;
    margin-top: 24px;          /* 위 선이 사라지면서 공간이 붙으면 살짝 띄움 */
}

/* ③ 혹시 부모에서 outline·box-shadow로 그린 경우까지 방지 */
.board-scope .btn-area,
.board-scope .btn-area * {
    outline: none !important;
    box-shadow: none !important;
}



/*추가 */
/* 게시판 영역 패딩/폭 (원하면 포함) */
.board-scope .container { padding: 80px 20px; max-width: 1800px; margin: 0 auto; }

/* 그리드 */
.board-scope .grid-container {
  display: grid;
  gap: 30px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width:1024px){ .board-scope .grid-container { grid-template-columns: repeat(3,1fr); } }
@media (max-width:768px){ .board-scope .grid-container { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .board-scope .grid-container { grid-template-columns: 1fr; } }

/* 카드 */
.board-scope .grid-item{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:#fff;
  transition: transform .3s ease;
}
.board-scope .grid-item:hover{ transform: translateY(-2px); }

/* ✅ 이미지: '원본 비율 유지' (크롭 X) */
.board-scope .grid-item img{
  width:100% !important;
  height:auto !important;          /* 인라인 height:200px 덮어쓰기 */
  /* aspect-ratio: 1 / 1;  ← 정사각 강제 크롭 제거 */
  /* object-fit: cover;    ← 크롭 유발 제거 */
  object-fit: contain !important;  /* 혹시 어딘가에서 지정되면 안전하게 무력화 */
  display:block;
  background:#fff;              /* 세로 사진 양옆에 생기는 여백 배경 */
  transition: transform .4s ease, filter .4s ease;
}
/* 호버 효과 (원하면 유지) */
.board-scope .grid-item:hover img{
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* 하단 그라데이션 + 제목 가독성 */
.board-scope .grid-item::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  opacity:0; transition:opacity .3s ease;
}
.board-scope .grid-item:hover::after{ opacity:1; }

.board-scope .grid-item h3{
  position:absolute; left:12px; right:12px; bottom:52px; margin:0; z-index:2;
}
.board-scope .grid-item h3 a{
  font-size:1.03rem; font-weight:400;
  color:#fff !important;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* === Natural, soft shadow for thumbnails === */
/* 변수 재정의(맨 아래에 두면 위 값을 덮어써요) */
.board-scope{
  --thumb-radius: 12px;
  --thumb-bg: #fff;

  /* 얇은 인셋 라인 + 낮은/중간/큰 퍼짐 3단 그림자 */
  --thumb-shadow: 
    0 0 0 1px rgba(0,0,0,.05) inset,
    0 1px 2px rgba(0,0,0,.06),
    0 8px 16px rgba(0,0,0,.10);

  --thumb-shadow-hover:
    0 0 0 1px rgba(0,0,0,.05) inset,
    0 4px 8px rgba(0,0,0,.10),
    0 16px 32px rgba(0,0,0,.12);
}

/* 공통 카드: 보더는 없애고, 자연스러운 쉐도우만 사용 */
.board-scope[data-thumb] .grid-item > a,
.board-scope[data-thumb="box"] .grid-item > a,
.board-scope[data-thumb="box"] .grid-card{
  border: 0 !important;
  background: var(--thumb-bg) !important;
  border-radius: var(--thumb-radius) !important;
  box-shadow: var(--thumb-shadow) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}

/* 호버 시 살짝 띄워 보이게 */
.board-scope[data-thumb] .grid-item > a:hover,
.board-scope[data-thumb="box"] .grid-item > a:hover,
.board-scope[data-thumb="box"] .grid-card:hover{
  box-shadow: var(--thumb-shadow-hover) !important;
  transform: translateY(-1px);
}

/* 접근성: 키보드 포커스 링 */
.board-scope[data-thumb] .grid-item > a:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px rgba(30,120,255,.7), var(--thumb-shadow-hover) !important;
}
/* === Project View Slider: fixed box + contain (no crop) === */
/* 필요하면 이 두 변수만 바꾸면 사이즈가 바뀝니다. */
.board-scope .project-gallery{
  width: 100% !important;
  height: 700px !important;      /* 취향대로 700~900px */
  aspect-ratio: auto !important; /* 혹시 위쪽 16/9 규칙 영향 차단 */


  position: relative !important;
  overflow: hidden !important;
  background: #fff !important; /* 레터박스 배경 */
  border-radius: 12px !important;
}

/* 슬라이드 트랙: 가로로 나열 + 고정 높이/너비 유지 */
.board-scope .project-gallery .slides{
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform .3s ease !important; /* JS translateX(-100*idx%)와 호환 */
}

/* 각 슬라이드: 컨테이너 100% 차지 */
.board-scope .project-gallery .slide{
  flex: 0 0 100% !important; /* 한 화면 = 100% */
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important; /* 필요시 변경 */
}

/* 이미지: 원본비율 유지하여 내부에 맞춤(크롭 없음) */
.board-scope .project-gallery .slide img{
  position: static !important; /* 혹시 absolute 지정돼 있었다면 해제 */
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important; /* 핵심: 비율 유지 */
  display: block !important;
  transform: none !important;     /* 이전 효과 잔상 제거 */
  filter: none !important;
}

/* (선택) 버튼이 슬라이더 위에 잘 보이도록 */
.board-scope .project-gallery .nav{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}
.board-scope .project-gallery .nav.prev{ left: 8px !important; }
.board-scope .project-gallery .nav.next{ right: 8px !important; }

/* 1) 변수 자체를 무력화 */
.board-scope{
  --thumb-border: transparent !important;
  --thumb-shadow: none !important;
  --thumb-shadow-hover: none !important;
}

/* 2) 변수를 쓰는 곳까지 확실히 끄기 */
.board-scope[data-thumb] .grid-item > a,
.board-scope .grid-item > a,
.board-scope[data-thumb="box"] .grid-card{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 3) 이미지에 남아있는 기본 선/그림자 제거 */
.board-scope .thumb-item img,
.board-scope .blog-item img,
.board-scope .post-image{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.board-scope .project-info .title .tt { white-space: nowrap; }  /* G type 한 덩어리로 */



.board-scope .container { padding: 80px 20px; max-width: 1800px; margin: 0 auto; }

/*오버라이드

/* ▼ 게시글 보기 영역을 브라우저 최대폭으로 풀기(풀블리드) */
.board-scope .container{
  width: 100vw !important;                         /* 뷰포트 폭 사용 */
  max-width: none !important;                      /* 모든 상한 제거 */
  margin-left: calc(50% - 50vw) !important;        /* 부모 max-width 탈출(왼쪽) */
  margin-right: calc(50% - 50vw) !important;       /* 부모 max-width 탈출(오른쪽) */
  padding-left: 0 !important;                      /* 좌우 패딩이 필요 없으면 0 */
  padding-right: 0 !important;
}
/* =========================================
   board2.css OVERRIDES (append at the very end)
   ========================================= */

/* 1) 게시글 보기 컨테이너: 브라우저 가로 가득(풀블리드) */
.board-scope .container{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2) 레이아웃: 우측(제목/내용) 조금 더 넓게, 좌측(슬라이더) 조금 좁게 */
.board-scope .project-view{
  --gap: 32px;
  --info-w: clamp(340px, 30vw, 520px); /* 우측 폭 확장 */
  grid-template-columns:
    minmax(0, calc(100% - var(--info-w) - var(--gap)))
    var(--info-w) !important;
  gap: var(--gap) !important;
}

/* 3) 슬라이더 상한 + 중앙 정렬
      → 현재 최대 가로 1280px × 세로 650px */
.board-scope .project-gallery{
  width: 100% !important;
  max-width: 1280px !important;      /* 슬라이더 가로 최대치 */
  height: 650px !important;          /* 슬라이더 세로 최대치 */
  justify-self: center !important;   /* 그리드 셀 중앙 배치 */
}

/* 4) 이미지가 프레임 중앙에 오도록(기본: contain 유지) */
.board-scope .project-gallery .slide{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.board-scope .project-gallery .slide img{
  object-position: 50% 50% !important;
}

/* 5) 제목/본문 타이포 확대 */
.board-scope .project-info .title{
  font-size: clamp(15px, 2.2vw, 25px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.2px !important;
  margin: 0 0 20px !important;
  color: #111827 !important;
}
.board-scope .project-info .meta{ font-size: 15px !important; }
.board-scope .project-desc{
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #374151 !important;
}

/* (선택) 특정 이미지만 꽉 채우고 싶다면 해당 img에 is-cover 클래스 부여 */
.board-scope .project-gallery .slide img.is-cover{
  object-fit: cover !important;
  object-position: 50% 50% !important;
}




/*d오버라이드*/

/* ===== Typography override to match the reference ===== */

/* 0) 웹폰트 (원하면 지우고 시스템폰트만 써도 OK) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');

/* 1) 게시글 정보 영역 기본 폰트/정렬/색 */
.board-scope .project-info,
.board-scope .project-info * {
  font-family: 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif !important;
  text-align: left !important;
  color: #374151; /* 기본 본문색 */
}

/* 2) 제목 – 굵고 또렷하게 */
.board-scope .project-info .title,
.board-scope .post-title{
  font-weight: 400;
  font-size: clamp(10px, 1.5vw, 15px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1f2937; /* 진한 차콜 */
  margin: 0 0 10px;
}

/* 3) 메타(면적/바닥/가구 등) – 라벨 연한 회색, 값은 진한 회색 */
.board-scope .project-info .meta{
  font-size: 16px;
  line-height: 1.9;
  column-gap: 56px; /* 간격만 살짝 */
  color: #4b5563;   /* 기본 */
}

.board-scope .project-info .meta .label{
  color: #8b8b8b;   /* 이미지처럼 연한 라벨 */
  font-weight: 500;
  letter-spacing: -.01em;
}

/* 콜론 간격을 깔끔하게 (라벨 뒤에 자동 콜론 넣기 선택사항) */
.board-scope .project-info .meta .label::after{
  content: ' :';
  margin: 0 .25ch 0 .15ch;
  color: #8b8b8b;
}

.board-scope .project-info .meta .value{
  color: #333333;   /* 값은 더 진하게 */
  font-weight: 500;
}

/* 4) 본문 설명 */
.board-scope .project-desc,
.board-scope .post-content{
  font-size: 16px;
  line-height: 1.9;
  color: #334155;
}
.board-scope .project-desc strong{ color:#111; font-weight:700; }

/* 풀블리드 + 내부패딩(양쪽 30px) */
.board-scope .container{
  width: 100vw !important;
  max-width: none !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 100px !important;
  padding-right: 100px !important;
  box-sizing: border-box !important; /* 패딩 포함폭 */
}
/* === BOARD LIST: MOBILE (<=992px) — REPLACEMENT === */
@media (max-width: 992px){

  /* 레이아웃: 위 카테고리 / 아래 리스트 */
  .board-scope .board-layout{
    display: block !important; /* 인라인 grid 해제 */
  }

  /* 상단 카테고리 바 */
  .board-scope .board-sidebar{
    position: static !important;
    top: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }
  .board-scope .board-sidebar > div{
    font-size: 14px !important;
    color: #333 !important;                 /* 진한 회색 */
    margin: 0 0 8px !important;
  }
  .board-scope .board-sidebar ul{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .board-scope .board-sidebar ul li{
    margin: 0 !important; padding: 0 !important;
  }
  .board-scope .board-sidebar ul a{
    display: inline-block !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 9999px !important;
    color: #333 !important;                 /* 진한 회색 */
    background: #fff !important;
    text-shadow: none !important;           /* 혹시 모를 잔여 제거 */
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  /* 활성 카테고리 */
  .board-scope .board-sidebar ul a[style*="font-weight:700"],
  .board-scope .board-sidebar ul a.active{
    border-color: #333 !important;
    color: #333 !important;
    font-weight: 700 !important;
  }

  /* 게시물 리스트: 1열 */
  .board-scope .grid-container{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 카드 이미지 비율 & 오버레이 제거 */
  .board-scope .grid-item > a{ aspect-ratio: 16 / 9 !important; }
  .board-scope .grid-item::before,
  .board-scope .grid-item::after{ content: none !important; }

  /* 제목(테두리/그림자/스트로크 완전 제거) */
  .board-scope .grid-item h3,
  .board-scope .grid-item h3 a{
    position: static !important;
    margin: 8px 2px 0 !important;
    color: #333 !important;                 /* 진한 회색 */
    text-align: left !important;
    text-shadow: none !important;           /* ← 테두리처럼 보이는 그림자 제거 */
    -webkit-text-stroke: 0 !important;      /* ← 크롬/사파리 스트로크 제거 */
    text-stroke: 0 !important;              /* 표준 속성 */
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* (게시글 상세 제목에도 혹시 남아있다면 같이 제거) */
  .board-scope .project-info .title,
  .board-scope .project-info .title *{
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* 컨테이너 좌우 패딩 (데스크톱 큰 패딩 상쇄) */
  .board-scope .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* === BOARD LIST: DESKTOP (기본) — 제목을 이미지 하단 중앙 정렬 === */

/* 카드 위 덮는 그라데이션/오버레이 끄기 */
.board-scope .grid-item::before,
.board-scope .grid-item::after{
  content: none !important;
}

/* 제목을 일반 흐름으로 빼서 이미지 '바로 아래'에 배치 */
.board-scope .grid-item h3{
  position: static !important;
  margin: 10px 0 0 !important;   /* 이미지 바로 아래 여백만 */
  padding: 0 !important;
  text-align: center !important; /* 중앙 정렬 */
  color: #333 !important;        /* 진한 회색 */
  text-shadow: none !important;  /* 테두리처럼 보이는 효과 제거 */
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 링크 색도 동일하게 */
.board-scope .grid-item h3 a{
  color: #333 !important;
  text-decoration: none !important;
}
.board-scope .grid-item h3 a{
  color: #333 !important;
  text-decoration: none !important;
  text-shadow: none !important;      /* ← 그림자 제거 */
  -webkit-text-stroke: 0 !important; /* Safari/Chrome 스트로크 제거 */
  text-stroke: 0 !important;         /* 표준 */
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* === PROJECT VIEW: MOBILE (<=992px) — info 먼저, gallery 나중 === */
@media (max-width: 992px){

  /* 그리드를 끄고 세로 플렉스로 전환 */
  .board-scope .project-view{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* 1) 제목/메타/본문(정보) 블록을 위로 */
  .board-scope .project-info{
    order: 1 !important;
  }

  /* 2) 이미지 슬라이더를 아래로 */
  .board-scope .project-gallery{
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;              /* 고정 높이 해제 */
    aspect-ratio: 16 / 9 !important;      /* 화면비만 유지 */
    border-radius: 10px !important;
    background: #fff !important;          /* 회색 레터박스 방지 */
  }

  /* 슬라이더 내부 치수/정렬 */
  .board-scope .project-gallery .slides{
    height: 100% !important;
  }
  .board-scope .project-gallery .slide{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .board-scope .project-gallery .slide img{
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* 크롭 없이 맞춤 */
  }

  /* 버튼 살짝 컴팩트 + 위치 */
  .board-scope .project-gallery .nav{
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
  }
  .board-scope .project-gallery .nav.prev{ left: 10px !important; }
  .board-scope .project-gallery .nav.next{ right: 10px !important; }

  /* 컨테이너 넓은 패딩 축소(넘침 방지) */
  .board-scope .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* === OVERRIDES: Thumbnails width 180px, keep aspect ratio (no crop) === */

/* 1) 그리드: 200px 칼럼 반복 + 왼쪽 정렬 + 간격 */
.board-scope .grid-container{
  grid-template-columns: repeat(auto-fill, 200px) !important;
  justify-content: start !important;
  justify-items: stretch !important;
  gap: 18px 20px !important;
}

/* 2) 카드 프레임: 가로 200px, 세로 자동(비율 유지) */
.board-scope .grid-item,
.board-scope .grid-item > a,
.board-scope .grid-card{
  width: 200px !important;
  height: auto !important;
  aspect-ratio: auto !important;   /* 1:1, 16:9 등 이전 규칙 해제 */
  overflow: visible !important;
}

/* 3) 이미지: absolute/cover 제거 → 자연 비율로 확대/축소 */
.board-scope .grid-item > a img,
.board-scope .grid-card img{
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;      /* = 200px */
  height: auto !important;     /* 세로는 비율대로 */
  object-fit: contain !important;  /* 이미지를 온전히 표시(크롭 X) */
  object-position: 50% 50% !important;
}

/* 4) 리스트·블로그 썸네일도 동일 적용 */
.board-scope .thumb-item img,
.board-scope .blog-item img{
  width: 200px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 5) 제목 폭을 카드에 맞춤 */
.board-scope .grid-item h3{
  width: 200px !important;
  margin: 8px 0 0 !important;
  text-align: center !important;
}

/* 6) 모바일에서도 같은 규칙 유지(이전에 1fr/16:9로 바꾸던 것 무력화) */
@media (max-width: 992px){
  .board-scope .grid-container{
    grid-template-columns: repeat(auto-fill, 200px) !important;
    justify-content: start !important;
    gap: 14px 16px !important;
  }
  .board-scope .grid-item > a{ aspect-ratio: auto !important; }
}
/* === OVERRIDE: Rounded corners for thumbnails === */

/* 그리드 카드(목록 썸네일) */
.board-scope .grid-item > a,
.board-scope .grid-card{
  border-radius: 12px !important;  /* 원하는 값으로 조절 */
  overflow: hidden !important;      /* 라운드 안으로 이미지 클리핑 */
  background: #fff !important;      /* 가장자리 비치는 것 방지용 */
}

/* 카드 안 이미지도 라운드 상속(브라우저 호환성 보강) */
.board-scope .grid-item > a img,
.board-scope .grid-card img{
  border-radius: inherit !important;
  display: block !important;
}

/* 썸네일/블로그 리스트 이미지도 동일 라운드 */
.board-scope .thumb-item img,
.board-scope .blog-item img{
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* === LIST PAGE WIDTH LIMIT & CENTER ======================= */
/* 리스트 전체 래퍼(카테고리 + 그리드)를 1500px로 제한하고 가운데 정렬 */
.board-scope .board-layout{
  width: 100%;
  max-width: 1500px;            /* 원하는 최대 폭 */
  margin-left: auto;            /* 가운데 정렬 */
  margin-right: auto;           /* 가운데 정렬 */
  padding-left: 24px;           /* 좌우 여백(선택) */
  padding-right: 24px;
}

/* 그리드도 래퍼 기준으로 가운데 정렬되도록 보강 */
.board-scope .board-layout .grid-container{
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;            /* 부모와 동일하게 제한(안전장치) */
}

/* 카테고리/리스트 묶음을 시각적으로 가운데에 두기 위한 여백 보정 */
.board-scope .board-layout .board-sidebar{
  margin-left: 0;               /* 혹시 남아있는 좌측 여백 제거 */
}

/* 데스크톱에서만 적용되는 보조 레이아웃(선택): 
   카테고리(좌) + 리스트(우) 간격이 너무 벌어지지 않게 */
@media (min-width: 993px){
  .board-scope .board-layout{
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);  /* 좌측 카테고리 고정폭 + 우측 리스트 */
    column-gap: 32px;
    align-items: start;
  }
}
/* === LIST PAGE: width limit 1500px + center =================== */
/* 카테고리 + 리스트를 감싸는 래퍼(리스트 페이지 최상위 래퍼) */
.board-scope .board-layout{
  width: 100% !important;
  max-width: 1500px !important;     /* ← 원하는 최대 폭 */
  margin-left: auto !important;     /* 가운데 정렬 */
  margin-right: auto !important;    /* 가운데 정렬 */
  padding-left: 24px !important;    /* 좌우 여백 */
  padding-right: 24px !important;
}

/* 그리드 컨테이너도 래퍼 안에서 정렬/폭 보장 */
.board-scope .board-layout .grid-container{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1500px !important;     /* 안전장치 */
}

/* 데스크톱: 카테고리(좌) + 리스트(우) 컬럼 배치 */
@media (min-width: 993px){
  .board-scope .board-layout{
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important; /* 좌측 카테고리 고정폭 */
    column-gap: 32px !important;
    align-items: start !important;
  }
  /* 혹시 남아있는 좌측 오프셋 제거 */
  .board-scope .board-layout .board-sidebar{
    margin-left: 0 !important;
  }
}

/* 모바일: 폭 100%로 자연스럽게(이미 기존 규칙과 호환) */
@media (max-width: 992px){
  .board-scope .board-layout{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: block !important; /* 모바일에선 세로 스택 */
  }
}
/* 카드/리스트/블로그 제목에서 연속 공백 유지 + 공백 지점에서 줄바꿈 허용 */
.board-scope .grid-item h3 a,
.board-scope .thumb-item h3 a,
.board-scope .blog-item h2 a {
  white-space: break-spaces;    /* 크롬/사파리/파이어폭스 지원 */
  /* 구형 브라우저 대비 fallback 넣고 싶으면 다음 줄도 함께: */
  white-space: pre-wrap;
}
/* 보기 페이지 본문에서 연속 공백을 보존 + 공백 지점에서 줄바꿈 허용 */
.board-scope .project-desc,
.board-scope .post-content {
  white-space: break-spaces; /* 연속 스페이스 보존 + 줄바꿈 가능 */
  /* 구형 브라우저 대비 보강 */
  white-space: pre-wrap;
}
.board-scope .project-desc,
.board-scope .post-content {
  white-space: pre-wrap;   /* \n을 줄바꿈으로, 연속 스페이스 보존 */
}
.board-scope .project-desc,
.board-scope .post-content { white-space: pre-line; }

  /* =========================
     5) 모바일 최적화
     ========================= */
  @media (max-width: 768px){
    .process-info{
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(0,0,0,.05);
      padding: 20px 16px;                 /* 내부 여백 축소 */
    }
    .process-list{ padding-left: 1rem; }  /* 리스트 들여쓰기 살짝 축소 */
    .cta-btn{
      width: 100%;
      padding: 16px 20px;
      font-size: 17px;
      border-radius: 14px;
    }
  }

  /* 모션 최소화 환경 존중 */
  @media (prefers-reduced-motion: reduce){
    * { transition: none !important; animation: none !important; }
  }
  /* === FORCE 2-UP ON PHONES (put this AT THE VERY END) ================== */
@media (max-width: 992px){
  /* 1) 그리드를 2열로 고정 (이전 1열/200px 규칙 전부 무력화) */
  body .board-scope .grid-container,
  body .board-scope .board-layout .grid-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 14px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  /* 2) 카드/이미지의 고정폭(200px) 및 비율 규칙 해제 */
  body .board-scope .grid-item,
  body .board-scope .grid-item > a,
  body .board-scope .grid-card{
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  body .board-scope .grid-item > a img,
  body .board-scope .grid-card img{
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* 꽉 채우려면 cover 로 변경 */
    object-position: 50% 50% !important;
  }

  /* 3) 제목 폭/정렬 */
  body .board-scope .grid-item h3{
    width: auto !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
  }
}

/* 초협소 단말기(≤360px)에서도 2열 유지 */
@media (max-width: 360px){
  body .board-scope .grid-container,
  body .board-scope .board-layout .grid-container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* 모바일에서 제목은 일반 줄바꿈 + <br> 적용되게 */
@media (max-width: 768px){
  .board-scope .grid-item h3,
  .board-scope .grid-item h3 a{
    white-space: normal !important;  /* 기존 break-spaces / pre-wrap 무력화 */
    word-break: keep-all;            /* 한글 단어 단위 유지 */
    line-height: 1.35;
  }
}
/* 이 게시판 페이지에서만, 바깥 래퍼 패딩 제거 */
@media (max-width: 992px){
  .page-container,
  .page-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* 필요하면 전체를 0으로 */
    /* padding: 0 !important; */
  }
}