@charset "utf-8";
/* ==========================================================================
   ContentRix — board.css
   그누보드 게시판 스킨 이식용 공통 스타일.
   · 리스트형 게시판 / 갤러리형 게시판 / 뷰 / 쓰기폼 / 페이지네이션 / 검색
   · 클래스 이름은 그누보드 기본 스킨 구조( #bo_list, #bo_v, #bo_w 등 )와
     충돌하지 않도록 ctx- 접두사를 사용한다.
     그누보드 스킨 제작 시 이 클래스를 그대로 붙여 쓰면 된다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 게시판 상단 — 총 건수 / 검색 / 카테고리
   -------------------------------------------------------------------------- */
.ctx-bo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
}
.ctx-bo-count {
  font-size: .875rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.ctx-bo-count b { color: var(--ink-900); font-weight: 800; }

/* 카테고리 필터 */
.ctx-bo-cate { display: flex; flex-wrap: wrap; gap: 7px; }
.ctx-bo-cate a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-500);
  transition: border-color .25s, background .25s, color .25s;
}
.ctx-bo-cate a:hover { border-color: var(--ink-300); color: var(--ink-900); }
.ctx-bo-cate a.is-on {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}

/* 검색 */
.ctx-bo-search {
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding-left: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  transition: border-color .25s;
}
.ctx-bo-search:focus-within { border-color: var(--ink-900); }
.ctx-bo-search select {
  height: 100%;
  padding: 0 8px 0 12px;
  border: 0;
  background: transparent;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-600);
  cursor: pointer;
}
.ctx-bo-search input {
  width: clamp(120px, 22vw, 220px);
  height: 100%;
  padding: 0 6px;
  border: 0;
  background: transparent;
  font-size: .875rem;
}
.ctx-bo-search input::placeholder { color: var(--ink-400); }
.ctx-bo-search button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 100%;
  color: var(--ink-500);
  transition: color .2s;
}
.ctx-bo-search button:hover { color: var(--ink-900); }
.ctx-bo-search button svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   2. 리스트형 게시판
   -------------------------------------------------------------------------- */
.ctx-bo-list { border-top: 2px solid var(--ink-900); }
.ctx-bo-list__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 130px 92px 76px;
  align-items: center;
  gap: 14px;
  padding: 18px 12px;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
}
.ctx-bo-list__row--head {
  padding-block: 14px;
  border-bottom-color: var(--line);
  background: var(--paper-2);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-500);
  text-align: center;
}
.ctx-bo-list__row--head span:nth-child(2) { text-align: left; }

.ctx-bo-list__row:not(.ctx-bo-list__row--head) { transition: background .3s; }
.ctx-bo-list__row:not(.ctx-bo-list__row--head):hover { background: var(--paper-2); }

.ctx-bo-num, .ctx-bo-date, .ctx-bo-hit, .ctx-bo-writer {
  text-align: center;
  color: var(--ink-400);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.ctx-bo-num--notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--o-500);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
}
.ctx-bo-subj { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ctx-bo-subj a {
  min-width: 0;
  font-weight: 600;
  letter-spacing: -.024em;
  color: var(--ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}
.ctx-bo-subj a:hover { color: var(--o-600); }
.ctx-bo-cat {
  flex: none;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--paper-3);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-500);
}
.ctx-bo-new {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 5px;
  background: var(--o-500);
  color: #fff;
  font-size: .5625rem;
  font-weight: 800;
}
.ctx-bo-cmt {
  flex: none;
  font-size: .75rem;
  font-weight: 800;
  color: var(--t-600);
}

@media (max-width: 800px) {
  .ctx-bo-list__row--head { display: none; }
  /* 공지 리스트(관리자 문의목록 제외) — 제목 아래 '작성자 · 날짜 · 조회' 한 줄 */
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-list__row:not(.ctx-bo-list__row--head) { display: block; padding: 15px 4px; }
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-num { display: none; }
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-subj { margin-bottom: 7px; }
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-writer,
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-date,
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-hit {
    display: inline; text-align: left; font-size: .75rem; color: var(--ink-400);
  }
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-date::before { content: '·'; margin: 0 6px; color: var(--ink-300); }
  .ctx-bo-list:not(.ctx-qna-adm) .ctx-bo-hit::before { content: '· 조회 '; margin-left: 6px; color: var(--ink-300); }
}

/* --------------------------------------------------------------------------
   3. 갤러리형 게시판
   -------------------------------------------------------------------------- */
.ctx-bo-gall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
.gitem {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gitem__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--gi-bg, var(--paper-3));
  box-shadow: var(--sh-1);
}
.gitem__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e-out);
}
.gitem:hover .gitem__thumb img { transform: scale(1.06); }

/* 이미지가 없을 때 쓰는 브랜드 컬러 플레이스홀더 */
.gitem__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  transition: transform .8s var(--e-out);
}
.gitem__ph svg { width: 62px; height: 62px; }
.gitem:hover .gitem__ph { transform: scale(1.06); }
.gitem--o  .gitem__thumb { --gi-bg: linear-gradient(148deg, #F0996B, #D2621F); }
.gitem--t  .gitem__thumb { --gi-bg: linear-gradient(148deg, #7FC9C1, #2F9084); }
.gitem--g  .gitem__thumb { --gi-bg: linear-gradient(148deg, #F7C88C, #DE9236); }
.gitem--k  .gitem__thumb { --gi-bg: linear-gradient(148deg, #4B5563, #14181F); }

.gitem__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(17,24,39,.5);
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .4s var(--e-out);
}
.gitem:hover .gitem__over { opacity: 1; }

.gitem__body { padding-top: 16px; }
.gitem__cat {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--o-500);
}
.gitem__t {
  margin-top: 7px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.5;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gitem:hover .gitem__t { color: var(--o-600); }
.gitem__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: .75rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.gitem__meta span + span::before { content: '·'; margin-right: 10px; color: var(--ink-300); }

/* --------------------------------------------------------------------------
   4. 페이지네이션
   -------------------------------------------------------------------------- */
.ctx-page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: clamp(36px, 5vw, 56px);
}
.ctx-page a, .ctx-page strong {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  transition: border-color .25s, color .25s, background .25s;
}
.ctx-page a:hover { border-color: var(--ink-900); color: var(--ink-900); }
.ctx-page strong {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}
.ctx-page .is-nav svg { width: 14px; height: 14px; }
.ctx-page .is-prev svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   5. 게시판 하단 버튼줄
   -------------------------------------------------------------------------- */
.ctx-bo-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.ctx-bo-btns--right { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   6. 게시글 보기 (view)
   -------------------------------------------------------------------------- */
.ctx-bo-view { }   /* 상단 검정 가로선 제거(요청) — 제목 밑 border 로 구분 */
.ctx-bo-view__head { padding: clamp(26px, 3vw, 38px) 4px clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.ctx-bo-view__cat {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 6px;
  background: var(--o-50);
  font-size: .6875rem;
  font-weight: 800;
  color: var(--o-600);
}
.ctx-bo-view__t {
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.038em;
  color: var(--ink-900);
}
.ctx-bo-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  font-size: .8125rem;
  color: var(--ink-400);
}
.ctx-bo-view__meta b { font-weight: 700; color: var(--ink-600); }
.ctx-bo-view__body {
  padding: clamp(30px, 4vw, 48px) 4px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-700);
}
.ctx-bo-view__body p + p { margin-top: 1.2em; }
.ctx-bo-view__body img { border-radius: 14px; margin-block: 1.4em; }
.ctx-bo-view__body h3 {
  margin: 1.8em 0 .7em;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink-900);
}

/* 이전/다음 글 */
.ctx-bo-nav { border-bottom: 1px solid var(--line); }
.ctx-bo-nav a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-top: 1px solid var(--line-soft);
  font-size: .875rem;
}
.ctx-bo-nav a:first-child { border-top: 0; }
.ctx-bo-nav b { font-size: .75rem; font-weight: 800; color: var(--ink-400); }
.ctx-bo-nav span {
  min-width: 0;
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-bo-nav a:hover span { color: var(--o-600); }
.ctx-bo-nav time { font-size: .75rem; color: var(--ink-400); }

/* --------------------------------------------------------------------------
   7. 폼 (쓰기 / 문의)
   -------------------------------------------------------------------------- */
.ctx-form {
  padding: clamp(26px, 3.4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.ctx-fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.ctx-fgrid > .is-full { grid-column: 1 / -1; }
@media (max-width: 620px) { .ctx-fgrid { grid-template-columns: 1fr; } }

.ctx-field label,
.ctx-field .ctx-label {
  display: block;
  margin-bottom: 8px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-700);
}
.ctx-field label em,
.ctx-field .ctx-label em {
  font-style: normal;
  margin-left: 3px;
  color: var(--o-500);
}

.ctx-input,
.ctx-select,
.ctx-textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  font-size: .9375rem;
  color: var(--ink-900);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.ctx-input::placeholder, .ctx-textarea::placeholder { color: var(--ink-400); }
.ctx-input:focus,
.ctx-select:focus,
.ctx-textarea:focus {
  outline: 0;
  border-color: var(--o-500);
  background: #fff;
  box-shadow: 0 0 0 3px var(--o-50);
}
.ctx-textarea { min-height: 170px; resize: vertical; line-height: 1.75; }
.ctx-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.ctx-help { margin-top: 7px; font-size: .75rem; color: var(--ink-400); }

/* 동의 체크 */
/* 개인정보 동의 — 기본 체크박스는 숨기고 직접 그린다.
   OS·브라우저마다 크기와 정렬이 달라 글줄과 어긋나기 때문이다. */
/* ※ 선택자를 .ctx-field 로 한 단계 좁힌 이유 :
   위쪽 `.ctx-field label { display:block; font-weight:700 }` 이 더 높은 우선순위라
   `.ctx-agree` 만으로는 display 도 글자 굵기도 전부 덮어써진다. */
.ctx-field .ctx-agree {
  position: relative;              /* 숨긴 input 의 기준점 */
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-600);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.ctx-agree:hover { border-color: var(--ink-300); }
.ctx-agree:has(input:checked) { border-color: var(--o-500); background: var(--o-50); }

.ctx-agree input {                 /* 화면에서만 감춤 — 키보드·스크린리더는 그대로 */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ctx-agree__box {                  /* 직접 그린 체크박스 — 첫 줄 글자 높이에 맞춘다 */
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink-300);
  border-radius: 6px;
  background: #fff;
  transition: background .2s, border-color .2s;
}
.ctx-agree__box::before {          /* 체크 표시 */
  content: '';
  width: 5px; height: 9px;
  margin-top: -2px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .18s, transform .22s var(--e-out);
}
.ctx-agree input:checked + .ctx-agree__box {
  background: var(--o-500);
  border-color: var(--o-500);
}
.ctx-agree input:checked + .ctx-agree__box::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.ctx-agree input:focus-visible + .ctx-agree__box {
  outline: 2px solid var(--o-500);
  outline-offset: 3px;
}

.ctx-agree__txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.ctx-agree__txt b {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 3px;
}
.ctx-agree__txt b em {
  font-style: normal;
  color: var(--o-600);
}
.ctx-agree__txt > span {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
}
.ctx-agree__txt i {
  font-style: normal;
  font-weight: 700;
  color: var(--ink-500);
}
.ctx-agree a {
  justify-self: start;
  margin-top: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  color: var(--ink-900);
}

@media (max-width: 520px) {
  .ctx-agree__txt > span { grid-template-columns: 1fr; gap: 0; }
  .ctx-agree__txt i { color: var(--ink-600); }
}

.ctx-form__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   8. 비어있을 때
   -------------------------------------------------------------------------- */
.ctx-empty {
  padding: clamp(56px, 8vw, 100px) 20px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.ctx-empty svg { width: 34px; height: 34px; margin: 0 auto 16px; color: var(--ink-300); }
.ctx-empty p { font-size: .9375rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   9. 그누보드 연동 안내 배지 (개발 중에만 노출 — 배포 시 삭제)
   -------------------------------------------------------------------------- */
.gnu-slot {
  position: relative;
  margin-bottom: 16px;
  padding: 13px 16px 13px 44px;
  border: 1px dashed var(--t-500);
  border-radius: 12px;
  background: var(--t-50);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--t-700);
}
.gnu-slot::before {
  content: 'G5';
  position: absolute;
  left: 13px; top: 13px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--t-500);
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
}
.gnu-slot code {
  font-family: var(--ff-mono);
  font-size: .8125em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.75);
  color: var(--t-700);
}

/* ── 그누보드 default.css 의 폰트 리셋(h1~h6 맑은고딕) 무력화 ──────────────
   게시판 페이지(body.page-board)에서만, 헤딩·폼요소·버튼을 회사 폰트로 되돌린다.
   .page-board 스코프(specificity 0,1,1)라 그누보드 h1 규칙(0,0,1)을 이긴다. */
body.page-board,
.page-board h1, .page-board h2, .page-board h3, .page-board h4, .page-board h5, .page-board h6,
.page-board button, .page-board input, .page-board select, .page-board textarea, .page-board .btn {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 헤더 '프로젝트 문의' 등 버튼이 위 규칙으로 안 잡히는 경우 강제 복구 */
.page-board .btn,
.page-board .header .btn,
.page-board button {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

/* ──────────────────────────────────────────────────────────────
   [그누보드 버튼 크기 충돌 복구]
   그누보드 default.css 262행: `a.btn,.btn { font-size:1.4em; height:35px;
   line-height:35px; padding:0 10px; border:0 }`
   → `a.btn`(특정성 0,1,1)이 우리 `.btn`/`.btn--sm`(0,1,0)을 이겨서
     게시판 페이지의 버튼이 커진다(22.4px 등).
   → `.page-board a.btn`(0,2,1)로 특정성을 높여 우리 디자인 값으로 복구.
   ────────────────────────────────────────────────────────────── */
/* `.page-board .btn`(0,2,0) 로 잡으면 `<a class="btn">` 과 `<button class="btn">`
   둘 다 커버하면서 그누보드 `a.btn`(0,1,1)·`.btn`(0,1,0) 을 모두 이긴다. */
.page-board .btn {
  width: auto;   /* 모바일 mobile.css 의 a.btn{width:30px} 무력화 */
  height: auto;
  line-height: 1;
  border: 1px solid var(--btn-bd);
  padding: 14px 26px;
  font-size: .9375rem;
  /* 그누보드 a.btn 의 `transition:background-color` 가 우리 떠오르는(translateY+그림자)
     애니메이션을 덮어써서 호버 동작이 달라진다 → 원본 transition 으로 복구. */
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-out);
}
/* 변형 규칙 순서는 base.css 원본과 동일하게 dot → sm → lg 로 둔다.
   그래야 sm+dot 버튼에서 sm 의 좌우 패딩(18px)이 dot 의 padding-right(8px)를
   덮어써서 더미와 폭이 같아진다(오른쪽 18px). */
.page-board .btn.btn--dot { padding-right: 8px; }
.page-board .btn.btn--sm { padding: 10px 18px; font-size: .875rem; }
.page-board .btn.btn--lg { padding: 17px 32px; font-size: 1rem; }

/* ──────────────────────────────────────────────────────────────
   [검색창 폼 충돌 복구]
   · 그누보드 default.css 38~42행: select/input :focus 에 파란 테두리(!important)
     + 글로우를 강제 → 검색 알약이 깨진다.
   · 우리 base.css 의 :focus-visible 주황 아웃라인(2px)이 알약(overflow:hidden)
     안에서 양옆 줄로 잘려 보인다.
   → 알약 컨테이너가 :focus-within 으로 포커스를 표시하므로, 안쪽 select/input 의
     테두리·아웃라인·그림자·배경은 전부 제거해 원래 디자인으로 복구한다.
   ────────────────────────────────────────────────────────────── */
.page-board .ctx-bo-search select,
.page-board .ctx-bo-search input,
.page-board .ctx-bo-search textarea {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 그누보드 default.css 38~42행의 input:focus 파란 테두리(!important)가 우리 폼
   입력(.ctx-input/.ctx-select/.ctx-textarea)의 주황 포커스를 덮어쓴다.
   특정성(0,3,0)+!important 로 우리 포커스 스타일을 복구한다. */
.page-board .ctx-input:focus,
.page-board .ctx-select:focus,
.page-board .ctx-textarea:focus {
  border-color: var(--o-500) !important;
  box-shadow: 0 0 0 3px var(--o-50) !important;
}

/* --------------------------------------------------------------------------
   8. 글쓰기 스킨 (ctx-basic write.skin.php)
   -------------------------------------------------------------------------- */
/* .ctx-form 안 필드 간 세로 간격 (게시판 페이지 한정) */
.page-board .ctx-form > * + * { margin-top: 20px; }

/* 내용 textarea (에디터 미사용 시 그누보드가 <textarea id="wr_content"> 출력) */
.page-board .wr_content textarea {
  width: 100%;
  min-height: 340px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--ink-900);
  resize: vertical;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.page-board .wr_content textarea:focus {
  outline: 0;
  border-color: var(--o-500) !important;
  background: #fff;
  box-shadow: 0 0 0 3px var(--o-50) !important;
}
.page-board #char_count_desc { margin-bottom: 10px; font-size: .8125rem; color: var(--ink-500); }
.page-board #char_count_wrap { margin-top: 8px; text-align: right; font-size: .75rem; color: var(--ink-400); }

/* 옵션 체크박스(공지·비밀글·html·답변메일) */
.ctx-opts { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.ctx-opts .chk_box { display: inline-flex; align-items: center; }
.ctx-opts label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  font-size: .875rem !important;
  font-weight: 700;
  color: var(--ink-700) !important;
  cursor: pointer;
}
.ctx-opts input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--o-500); cursor: pointer; }
.ctx-opts label span { display: none; }   /* 그누보드 커스텀 체크 마크용 빈 span 숨김 */

/* 파일 첨부 */
.ctx-file { font-size: .875rem; color: var(--ink-600); }
.page-board .file_del { display: inline-block; margin-top: 8px; font-size: .8125rem; color: var(--ink-500); }

/* 하단 버튼 (취소 / 작성완료) */
.ctx-write-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* 임시저장(회원 전용) UI — 그누보드 스킨 style.css 없이는 팝업이 열린 채 나오고
   기본 폰트로 깨져 보인다. 공지 게시판엔 불필요하므로 숨긴다. */
.page-board #btn_autosave,
.page-board #autosave_pop { display: none !important; }

/* --------------------------------------------------------------------------
   9. 글보기 스킨 추가 (ctx-basic view.skin.php)
   -------------------------------------------------------------------------- */
.ctx-bo-view__sign { margin-top: 2em; padding-top: 1.2em; border-top: 1px dashed var(--line); font-size: .875rem; color: var(--ink-400); }

/* 추천 / 비추천 */
.ctx-bo-act { display: flex; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 40px); }
.ctx-bo-act__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .875rem; font-weight: 700; color: var(--ink-600);
  transition: border-color .25s, color .25s;
}
.ctx-bo-act__btn:hover { border-color: var(--ink-300); color: var(--ink-900); }
.ctx-bo-act__btn strong { color: var(--o-600); }
.ctx-bo-act__btn.is-nogood strong { color: var(--ink-500); }

/* 첨부파일 / 관련링크 */
.ctx-bo-files { padding: 20px 4px; border-bottom: 1px solid var(--line); }
.ctx-bo-files__ttl { margin-bottom: 10px; font-size: .8125rem; font-weight: 800; color: var(--ink-500); }
.ctx-bo-files ul { display: flex; flex-direction: column; gap: 10px; }
.ctx-bo-files li { font-size: .875rem; }
.ctx-bo-files a { color: var(--ink-800); font-weight: 600; }
.ctx-bo-files a:hover strong { color: var(--o-600); }
.ctx-bo-files__cnt { display: block; margin-top: 3px; font-size: .75rem; color: var(--ink-400); }

/* 글보기 하단 버튼 */
.ctx-bo-view__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(26px, 3.4vw, 40px); }

/* --------------------------------------------------------------------------
   10. 댓글 (그누보드 view_comment.skin.php 재디자인)
   -------------------------------------------------------------------------- */
.page-board .cmt_btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: clamp(30px, 4vw, 50px);
  padding: 0; border: 0; background: none;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink-900); cursor: pointer;
}
.page-board .cmt_btn .total b { color: var(--o-600); }

.page-board #bo_vc { margin-top: 16px; }
.page-board #bo_vc > h2 { font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-400); margin-bottom: 6px; }
.page-board #bo_vc article {
  display: flex; gap: 13px;
  padding: 18px 4px; border-top: 1px solid var(--line);
}
.page-board #bo_vc .pf_img img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.page-board #bo_vc .cm_wrap { flex: 1; min-width: 0; }
.page-board #bo_vc .cm_wrap > header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 7px; font-size: .8125rem; color: var(--ink-500); }
.page-board #bo_vc .cm_wrap > header h2 { display: none; }
.page-board #bo_vc .bo_vc_hdinfo { color: var(--ink-400); }
.page-board #bo_vc .cmt_contents p { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--ink-700); white-space: pre-line; word-break: break-word; }
.page-board #bo_vc_empty { padding: 26px 4px; border-top: 1px solid var(--line); color: var(--ink-400); font-size: .875rem; }
.page-board .bo_vl_opt { position: relative; }
.page-board .bo_vc_act { list-style: none; }

/* 댓글쓰기 */
.page-board #bo_vc_w { margin-top: 22px; padding: clamp(18px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.page-board #bo_vc_w > h2 { font-size: .8125rem; font-weight: 800; color: var(--ink-700); margin-bottom: 12px; }
.page-board #bo_vc_w textarea {
  width: 100%; min-height: 96px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: .9375rem; line-height: 1.7; color: var(--ink-900); resize: vertical;
}
.page-board #bo_vc_w textarea:focus { outline: 0; border-color: var(--o-500) !important; box-shadow: 0 0 0 3px var(--o-50) !important; }
.page-board #bo_vc_w .bo_vc_w_wr { display: flex; align-items: center; justify-content: flex-end; gap: 12px 18px; margin-top: 12px; flex-wrap: wrap; }
.page-board #bo_vc_w .bo_vc_w_info { display: flex; gap: 8px; flex-wrap: wrap; }
.page-board #bo_vc_w .frm_input { padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: .875rem; }
.page-board #bo_vc_w .btn_confirm { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.page-board #bo_vc_w .secret_cm { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink-600); }
.page-board #bo_vc_w .secret_cm label { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.page-board #bo_vc_w .secret_cm label span { display: none; }
.page-board #bo_vc_w .btn_submit {
  padding: 11px 24px; border: 0; border-radius: 999px;
  background: var(--o-500); color: #fff; font-size: .875rem; font-weight: 700; cursor: pointer;
  transition: background .25s;
}
.page-board #bo_vc_w .btn_submit:hover { background: var(--o-600); }

/* 글쓰기 옵션 체크박스 — 체크박스와 라벨 간격 */
.ctx-opts .chk_box { display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   11. 게시판 페이지 상단 여백 축소
   phead(상단 밴드) + ptab(LNB)가 이미 상단을 잡아주므로, 스킨을 감싼
   .section 의 위 여백(기본 clamp 72~140px)을 줄여 콘텐츠가 위로 붙게 한다.
   (.page-board .section = 0,2,0 이 base 의 .section = 0,1,0 을 이김. 아래 여백은 유지)
   -------------------------------------------------------------------------- */
.page-board .section { padding-top: clamp(34px, 4.2vw, 60px); }

/* --------------------------------------------------------------------------
   12. 포트폴리오 정적 페이지 — 대표작(featured) + 카드 요약
   -------------------------------------------------------------------------- */
.pf-feat {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 3.6vw, 60px);
  align-items: center;
  margin-bottom: clamp(40px, 5.5vw, 80px);
}
@media (max-width: 760px) { .pf-feat { grid-template-columns: 1fr; gap: 22px; } }
.pf-feat__thumb {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.pf-feat__thumb .ph-img { transition: transform .8s var(--e-out); }
.pf-feat__thumb:hover .ph-img { transform: scale(1.04); }
.pf-feat__thumb:hover .gitem__over { opacity: 1; }
.pf-feat__t {
  margin: 10px 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.3;
  color: var(--ink-900);
}
.pf-feat__sum { font-size: 1rem; line-height: 1.85; color: var(--ink-600); }
.pf-feat__meta { margin-top: 18px; font-size: .8125rem; color: var(--ink-400); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.pf-tags li {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-500);
}

/* 그리드 카드 요약 */
.gitem__sum {
  margin-top: 8px;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   13. 문의 게시판(ctx-qna) — 보기 필드표 / 관리자 목록
   -------------------------------------------------------------------------- */
.ctx-qna-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 560px) { .ctx-qna-dl { grid-template-columns: 1fr; } }
.ctx-qna-dl > div { display: grid; grid-template-columns: 120px 1fr; background: #fff; }
.ctx-qna-dl dt { margin: 0; padding: 14px 16px; background: var(--paper-2); font-size: .8125rem; font-weight: 700; color: var(--ink-500); }
.ctx-qna-dl dd { margin: 0; padding: 14px 16px; font-size: .9375rem; color: var(--ink-900); word-break: break-word; }
.ctx-qna-dl a { color: var(--o-600); }

.ctx-qna-msg { margin-top: 26px; }
.ctx-qna-msg__ttl { margin-bottom: 10px; font-size: .8125rem; font-weight: 800; color: var(--ink-500); }
.ctx-qna-msg #bo_v_con { font-size: 1rem; line-height: 1.9; color: var(--ink-700); white-space: pre-line; word-break: break-word; }

/* 관리자 최근 문의 목록 (문의폼 하단) */
.ctx-qna-adm .ctx-bo-list__row { grid-template-columns: 52px minmax(0,0.95fr) minmax(0,2fr) 124px 92px; }
.ctx-qna-adm a.ctx-bo-list__row { text-decoration: none; color: inherit; }
.ctx-qna-adm .ctx-bo-subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 관심분야(3번째 칸) — 넓게 + 왼쪽 정렬로 여러 줄도 읽기 좋게 */
.ctx-qna-adm .ctx-bo-list__row > span:nth-child(3) { text-align: left; line-height: 1.55; }
.ctx-qna-adm .ctx-bo-subj b { color: var(--ink-900); font-weight: 800; }
@media (max-width: 800px) {
  .ctx-qna-adm .ctx-bo-list__row { grid-template-columns: minmax(0,1fr) 96px; }
  .ctx-qna-adm .ctx-bo-list__row > span:nth-child(3),
  .ctx-qna-adm .ctx-bo-list__row > span:nth-child(4) { display: none; }
}

/* 그누보드 default.css 371행: .required 입력란에 별표 이미지(require.png)를 붙인다.
   우리 폼은 라벨의 <em>*</em> 로 필수표시를 하므로, 입력란 별표는 없앤다. */
.page-board .required { background-image: none !important; }

/* --------------------------------------------------------------------------
   14. 문의 접수 완료 모달 레이어
   -------------------------------------------------------------------------- */
.ctx-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.ctx-modal.is-on { display: grid; place-items: center; }
.ctx-modal__dim { position: absolute; inset: 0; background: rgba(17,24,39,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ctx-modal__box {
  position: relative;
  width: min(92vw, 380px);
  padding: 40px 30px 30px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px -22px rgba(17,24,39,.5);
  text-align: center;
  animation: ctxModalIn .34s cubic-bezier(.2,.7,.3,1);
}
@keyframes ctxModalIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ctx-modal__ico {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--o-50); color: var(--o-600);
}
.ctx-modal__box h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); margin: 0 0 10px; }
.ctx-modal__box p { font-size: .9375rem; line-height: 1.7; color: var(--ink-500); margin: 0 0 22px; }

/* 문의하기(write.php = page-write)는 폼 페이지라 일반 서브페이지와 같은 상단 여백을 쓴다.
   (.page-board .section 축소 규칙을 덮어씀. 하단 관리자 목록 .section--tight 은 제외) */
.page-write .section:not(.section--tight) { padding-top: clamp(72px, 11vw, 140px); }

/* 포트폴리오 카드(.gitem) — 사각형 + 마우스오버 효과 제거(요청) */
.gitem__thumb { border-radius: 0; }
.gitem:hover .gitem__thumb img,
.gitem:hover .gitem__ph { transform: none; }
.gitem:hover .gitem__t { color: var(--ink-900); }
.gitem__over { display: none; }

/* 포트폴리오 카드 내부 실제 이미지(.ph-img)도 사각형으로 (라운드 제거) */
.gitem__thumb .ph-img,
.gitem__thumb .ph,
.gitem__thumb img { border-radius: 0 !important; }

/* ──────────────────────────────────────────────────────────────
   [모바일 그누보드 mobile.css 보정]
   mobile.css 는 html·body 에 height:100% 를 줘서 sticky 헤더가 깨진다
   (스크롤하면 상단 로고/메뉴가 사라짐). 게시판 페이지에서 높이 강제를 풀어
   뷰포트 스크롤로 되돌리면 헤더 sticky 가 정상 동작한다. 배경도 흰색으로.
   ────────────────────────────────────────────────────────────── */
html { height: auto !important; }
body.page-board { height: auto !important; background: var(--paper); }

/* FAQ — 펼칠 때 내용이 살짝 페이드+슬라이드로 나타난다. 접힘은 네이티브(즉시)라
   '두 번 접히는' 문제가 없다. (::details-content 높이 애니메이션은 닫힘 이중처리 이슈로 제외) */
.faq__item[open] .faq__a { animation: faqReveal .32s var(--e-out); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 모바일(1열) 포트폴리오 — 카드 사이 세로 여백을 넉넉히 줘서 다음 카드와 구분되게 */
@media (max-width: 560px) {
  .ctx-bo-gall { gap: 36px; }
}