@charset "utf-8";
/* ==========================================================================
   게시판 스킨 — contact (문의 폼)
   --------------------------------------------------------------------------
   이 파일은 "contact 전용 레이아웃"만 담는다.

   버튼(.pf-btn) · 입력칸(.pf-input) · 입력묶음(.pf-fieldset) · 현재위치(.pf-crumb)
   · 캡차(.pf-captcha) 같은 공통 부품은 work 게시판 스킨(skin/board/portfolio/style.css)에
   이미 정의돼 있고, 그 파일을 이 스킨의 PHP 가 먼저 함께 싣는다.
   그래서 여기서 다시 정의하지 않는다. 같은 부품을 두 벌 두면 한쪽만 고쳐지고
   두 게시판의 버튼 모양이 조용히 갈라진다.

   ※ 게시판이 셋째로 늘어나면 그때는 공통 부품을 테마 쪽
     (theme/portfolio/css/board.css)으로 빼는 편이 낫다. 지금은 둘뿐이라
     "portfolio 스킨이 공통 부품을 갖고 있고 contact 가 얹어 쓴다"로 둔다.
     이 판단의 근거를 남겨 두는 이유는, 나중에 이 파일만 열어 본 사람이
     "왜 .pf-btn 이 여기 없지?" 하고 다시 조사하지 않게 하기 위해서다.

   토큰(--color-* / --sp-* / --fs-*)은 테마 base.css 에서 온다. 색·간격 값을
   직접 적지 않는다.
   ========================================================================== */


/* ==========================================================================
   1. 문의 폼 화면 (방문자가 보는 유일한 화면)
   --------------------------------------------------------------------------
   work 게시판의 쓰기 화면(.pf-write)은 52rem 한 단으로 가운데 정렬한다.
   여기서는 왼쪽에 안내, 오른쪽에 폼을 두는 두 단으로 간다.

   같은 사이트 안에서 굳이 다른 구조를 쓰는 이유:
   work 의 쓰기 화면은 관리자만 보는 입력 도구라 "폼" 이외의 내용이 없다.
   반면 이 화면은 방문자에게 Contact 페이지 그 자체다. 폼만 덩그러니 놓이면
   메뉴를 눌러 들어온 사람이 "글쓰기 창"에 떨어진 것처럼 느낀다.
   왼쪽 안내단이 있어야 페이지로 읽힌다.
   ========================================================================== */

.pf-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}

/*
 * 두 단 전환은 1024px 부터. (프로젝트 고정 브레이크포인트 — 임의 구간 금지)
 * 768~1023 구간을 한 단으로 두는 이유: 태블릿 폭에서 두 단으로 쪼개면
 * 폼 입력칸이 한글 2~3어절마다 줄바꿈될 만큼 좁아진다.
 *
 * 4fr : 7fr — 안내단보다 폼단을 넓게. 시선이 오래 머무는 쪽에 폭을 준다.
 * minmax(0, …) 를 씌우는 이유: 그리드 항목의 기본 min-width 는 auto 라서
 * 안쪽에 긴 문자열(메일 주소·URL)이 들어오면 칸이 지정 비율보다 넓어진다.
 */
@media (min-width: 1024px) {
  .pf-contact {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-9);
  }

  /*
   * 안내단이 없는 화면(관리자가 문의 글을 고칠 때)은 한 단으로 되돌린다.
   * 이 규칙이 없으면 폼 하나가 왼쪽 4fr 칸에 들어가 화면 절반이 비고,
   * 입력칸도 그만큼 좁아진다.
   */
  .pf-contact--solo { grid-template-columns: minmax(0, 1fr); }
}


/* ---- 1-1. 왼쪽 안내단 ---- */

/*
 * 스크롤을 따라 붙는다. 폼이 길어 아래로 내려가도 연락처가 화면에 남는다.
 * top 은 고정 헤더 높이만큼 띄운다 — 이 값을 직접 적지 않고 테마 토큰을 쓰는
 * 이유는, 헤더 높이는 ui.js 가 실측해 --header-h 를 갱신하기 때문이다.
 * 여기에 px 을 박아 두면 폰트가 바뀔 때 안내단이 헤더에 가려진다.
 */
@media (min-width: 1024px) {
  .pf-contact__aside {
    position: sticky;
    top: var(--anchor-offset);
    align-self: start;
  }
}

.pf-contact__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.pf-contact__lead + .pf-contact__direct { margin-top: var(--sp-6); }

/* 직접 연락 정보 — dl 한 줄씩. dt(라벨)와 dd(값)를 세로로 쌓는다. */
.pf-contact__direct {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.pf-contact__direct dt {
  margin-bottom: var(--sp-1);
  color: var(--color-text-sub);
}

.pf-contact__direct dd {
  font-size: var(--fs-sm);
  color: var(--color-text);
  word-break: break-all;   /* 긴 메일 주소가 칸을 밀어내지 않게 */
}

/*
 * 메일 링크에만 강조색을 준다.
 * CLAUDE.md 규칙: 강조색은 화면당 한 곳에 집중. 이 화면의 강조 지점은
 * 제출 버튼(면 채움)과 이 링크(글자색) 둘인데, 둘은 화면에서 멀찍이 떨어져
 * 있고 같은 버건디 계열이라 "여기가 행동 지점"이라는 신호가 흩어지지 않는다.
 * 딥 그린은 이 화면에서 쓰지 않는다.
 */
.pf-contact__direct a { color: var(--color-accent); }
.pf-contact__direct a:hover { color: var(--color-accent-hover); }


/* ---- 1-2. 전송 완료 안내 ---- */

/*
 * 색 반전 패널로 세운다.
 *
 * 성공 표시에 초록(--color-accent-alt)을 쓰지 않는 이유:
 * 바로 아래 제출 버튼이 버건디라서 한 화면에 버건디와 딥 그린이 나란히 놓인다.
 * CLAUDE.md 가 금지한 배치다. 반전 패널은 색을 더 쓰지 않고도 가장 눈에 띈다.
 */
.pf-contact__sent {
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
}

.pf-contact__sent strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
}

.pf-contact__sent p {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  /* 반전 배경 위 보조 텍스트. --color-text-sub 는 종이색 기준 값이라
     여기서는 대비가 무너진다. 반전 배경에서는 흰색을 옅게 쓴다. */
  color: rgba(247, 244, 239, 0.78);
}

/*
 * 포커스를 받는 요소다(전송 후 스크린리더가 이 문구부터 읽도록
 * write.skin.php 가 tabindex="-1" + focus() 를 건다).
 * tabindex 요소는 브라우저 기본 아웃라인이 붙는데, 마우스로 들어온 경우까지
 * 테두리가 보이면 오류처럼 읽힌다. :focus-visible 이 아닐 때만 지운다.
 */
.pf-contact__sent:focus { outline: none; }
.pf-contact__sent:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }


/* ---- 1-3. 폼 ---- */

/*
 * work 스킨의 .pf-form 은 fieldset 을 여러 개 쌓는 구조라 묶음 사이 간격이 넓다.
 * 문의 폼은 묶음이 둘(보내는 사람 / 문의 내용)뿐이라 그대로 쓰면 허전하다.
 * 간격만 좁힌다. 나머지(.pf-fieldset · .pf-field · .pf-input)는 전부 물려받는다.
 */
.pf-contact__main .pf-form {
  gap: var(--sp-4);
  margin-top: 0;
}

/*
 * 내용 textarea.
 * contact 게시판은 위지윅 에디터를 끈 상태(bo_use_dhtml_editor = 0)라
 * editor_html() 이 맨 textarea 를 돌려준다. work 스킨의 .pf-editor textarea 규칙이
 * min-height:300px 를 주는데, 문의 글은 그만큼 길지 않아 빈 칸이 크게 남는다.
 *
 * 인라인 style="height:300px" 를 플러그인이 박아 넣으므로(editor.lib.php:53)
 * 높이는 !important 로만 덮인다. 이 한 곳에서만 쓰는 예외라 스코프를 좁게 건다.
 */
.pf-contact__main .pf-editor textarea {
  min-height: 200px;
  height: 200px !important;
}

/* 개인정보 안내 — 제출 버튼 아래. 읽고 넘어갈 문구라 작게, 보조색으로. */
.pf-contact__notice {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-text-sub);
}

/*
 * 하단 버튼.
 * work 쓰기 화면은 "취소(왼쪽) / 작성완료(오른쪽)" 양끝 배치인데,
 * 여기에는 돌아갈 목록이 없어 취소 버튼 자체가 없다. 양끝 배치를 그대로 두면
 * 제출 버튼 하나가 오른쪽 끝에 홀로 걸린다. 왼쪽 정렬로 되돌린다.
 */
.pf-contact__main .pf-form__actions { justify-content: flex-start; }


/* ==========================================================================
   2. 문의함 목록 (관리자만)
   --------------------------------------------------------------------------
   work 목록은 썸네일 카드 그리드다. 여기서는 쓰지 않는다.
   문의는 훑어보고 고르는 대상이 아니라 "누가 · 언제 · 무슨 건으로" 를
   빠르게 확인하는 대상이라, 한 줄에 한 건씩 쌓는 편이 읽힌다.

   table 대신 ul 을 쓰는 이유: 열 수를 화면 폭에 따라 접어야 하는데
   table 은 모바일에서 열을 세로로 쌓으려면 display 를 통째로 바꿔야 하고
   그러면 표로서의 접근성(행·열 관계)도 같이 사라진다. 처음부터 목록으로 짜고
   각 항목 안에서 라벨을 붙이는 편이 정직하다.
   ========================================================================== */

.pf-inbox { list-style: none; }

.pf-inbox__item {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pf-inbox__item:first-child { border-top: 1px solid var(--color-border); }

/*
 * 호버 — 면을 한 톤 "눌러서" 표시한다.
 *
 * 처음에는 --color-bg-raised(#FFFDF9)로 밝게 띄웠는데, 페이지 배경이
 * 웜 오프화이트(#F7F4EF)라서 그 행만 흰 종이가 얹힌 것처럼 떠 보였다.
 * --color-bg-sunken(#EFEAE2)으로 방향을 뒤집는다. base.css 가 이 토큰에
 * 붙여 둔 뜻이 정확히 "배경보다 한 톤 눌린 구역"이다.
 *
 * work 목록 카드(.pf-card__link)와 왜 다른가
 * ------------------------------------------
 * 카드는 처음부터 테두리와 밝은 면을 가진 독립된 상자다. 그래서 호버에
 * 테두리를 진하게 + 살짝 들어 올리기(translateY + shadow)가 성립한다.
 * 목록 행은 얇은 구분선으로만 나뉜 페이지 표면의 일부라, 같은 연출을 쓰면
 * 위아래 행과 맞물린 경계선이 어긋나 깨져 보인다.
 *
 * 다르게 보이지만 규칙은 같다 — "떠 있는 것은 더 뜨고, 표면에 붙은 것은
 * 눌린다". 방향만 반대이고 물리적 모형은 하나다.
 *
 * 강조색(버건디)을 쓰지 않는 이유: 같은 행 안에 NEW 배지가 이미 버건디를
 * 쥐고 있다. 왼쪽에 강조색 막대까지 세우면 한 행에 강조가 두 개가 되어
 * "강조색은 화면당 한 곳" 원칙이 깨진다. 제목 글자색이 강조색으로 바뀌는
 * 것(.pf-inbox__link:hover .pf-inbox__subject)까지가 이 목록의 상한이다.
 *
 * :focus-within 을 함께 거는 이유: 클릭 대상은 안쪽 <a> 라서, 키보드로
 * Tab 이동하면 링크에 초점 링만 생기고 행 표시는 바뀌지 않았다.
 * 마우스와 키보드가 같은 신호를 받아야 한다.
 */
.pf-inbox__item:hover,
.pf-inbox__item:focus-within { background-color: var(--color-bg-sunken); }

/*
 * 한 건 = 체크박스 + 링크.
 * 체크박스를 링크 밖에 두는 이유: 링크 안에 넣으면 체크하려다 글이 열린다.
 */
.pf-inbox__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-2);
}

.pf-inbox__chk { padding-top: 2px; }

.pf-inbox__chk input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* 관리 도구를 닫아 두면 체크박스도 감춘다 (work 목록의 .pf-admin-js 와 같은 규칙).
   감추는 일을 JS 가 붙이는 클래스에 맡겨야, 스크립트가 막힌 환경에서
   체크박스가 영영 사라지는 일이 없다. */
.pf-admin-js .pf-inbox__chk { display: none; }
.pf-admin-js.is-admin .pf-inbox__chk { display: block; }

.pf-inbox__link {
  flex: 1;
  min-width: 0;          /* flex 항목 안에서 긴 제목이 줄임표 처리되게 */
  display: grid;
  gap: var(--sp-2);
  color: var(--color-text);
}

.pf-inbox__link:hover { text-decoration: none; }
.pf-inbox__link:hover .pf-inbox__subject { color: var(--color-accent); }

.pf-inbox__subject {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  transition: color var(--dur-fast) var(--ease-out);
}

/* 메타 줄 — 보낸이 · 메일 · 날짜. 모노 라벨 톤으로 제목과 위계를 벌린다. */
.pf-inbox__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  color: var(--color-text-sub);
}

/* 항목 사이 구분점. 첫 항목 앞에는 붙이지 않는다. */
.pf-inbox__meta > span + span::before {
  content: "·";
  margin-right: var(--sp-3);
  color: var(--color-text-muted);
}

/* 새 문의 표시 — 아직 아무도 열어 보지 않은 건(wr_hit = 0) */
.pf-inbox__new {
  display: inline-block;
  padding: 2px var(--sp-2);
  background-color: var(--color-accent);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: var(--ls-label);
}

@media (min-width: 768px) {
  /* 데스크톱에서는 제목과 메타를 한 줄에 나란히 — 훑는 속도가 빨라진다 */
  .pf-inbox__link {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--sp-5);
  }

  .pf-inbox__meta { justify-content: flex-end; }
}


/* ==========================================================================
   3. 문의 상세 (관리자만)
   --------------------------------------------------------------------------
   work 상세(.pf-view)는 케이스 스터디 레이아웃이라 여기 맞지 않는다.
   여기서 필요한 것은 "보낸 사람 정보 + 본문 + 답장" 셋뿐이다.
   ========================================================================== */

.pf-msg { max-width: 52rem; }   /* work 상세와 같은 폭 — 읽는 폭은 게시판이 달라도 같다 */

.pf-msg__head {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}

.pf-msg__subject {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* 보낸 사람 정보 — 라벨/값 쌍을 격자로 */
.pf-msg__from {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  background-color: var(--color-bg-sunken);
}

@media (min-width: 768px) {
  .pf-msg__from { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pf-msg__from dt {
  margin-bottom: var(--sp-1);
  color: var(--color-text-sub);
}

.pf-msg__from dd {
  font-size: var(--fs-sm);
  word-break: break-all;
}

.pf-msg__from a { color: var(--color-accent); }
.pf-msg__from a:hover { color: var(--color-accent-hover); }

/*
 * 본문 — 방문자가 보낸 평문이다.
 *
 * white-space: pre-wrap 을 쓰지 않는다.
 * 그누보드가 conv_content($wr_content, 0) 를 거치며 이미 줄바꿈을 <br> 로
 * 바꿔 놓기 때문에(common.lib.php:698 의 get_text($content, 1)),
 * pre-wrap 까지 걸면 줄바꿈이 두 번 먹어 한 줄 걸러 빈 줄이 생긴다.
 *
 * 긴 URL 이 들어와도 칸을 밀어내지 않도록 break-word 만 남긴다
 * (같은 함수가 url_auto_link() 로 주소를 링크로 바꿔 놓는다).
 */
.pf-msg__body {
  margin-bottom: var(--sp-7);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  word-break: break-word;
}

.pf-msg__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 첨부 */
.pf-msg__files {
  padding-top: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

.pf-msg__files h2 {
  margin-bottom: var(--sp-3);
  color: var(--color-text-sub);
}

.pf-msg__files ul { list-style: none; }
.pf-msg__files li + li { margin-top: var(--sp-2); }
.pf-msg__files a { color: var(--color-text); }
.pf-msg__files a:hover { color: var(--color-accent); text-decoration: none; }

.pf-msg__filesize {
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}

/* 하단 버튼 — work 상세의 .pf-view__btns 와 같은 구성(목록은 왼쪽, 나머지는 오른쪽) */
.pf-msg__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.pf-msg__btns-right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-left: auto;
}