@charset "UTF-8";
/* 퍼블리싱 main.css 보정 — 사용자·관리자 화면 공용. main.css는 퍼블리싱 빌드 결과물이라 직접 고치지 않고,
   퍼블리싱에 없는 것만 여기서 더한다(퍼블리싱 규칙과 반대로 덮지 않는다). main.css 바로 다음에 싣는다(admin·site 기본 레이아웃). */

/* 사용자 화면 줄바꿈 — 퍼블리싱은 몇몇 제목·안내문에만 단어 단위 줄바꿈(keep-all)을 두어, 나머지 국문은 좁은 화면에서 '지원을'이
   '지 / 원을'처럼 글자 단위로 끊긴다. 사용자 화면 전체를 단어 단위로 바꾸고, 띄어쓰기 없이 칸보다 긴 값(주소·이메일)만 칸 안에서 나눈다.
   퍼블리싱이 요소에 직접 정한 줄바꿈(말줄임 문단의 break-all 등)은 그대로 따른다. 팝업은 레이아웃 뒤(.pat-layout ~ *)에 붙는다 */
.pat-layout,
.pat-layout ~ * {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 표 안 뱃지(카테고리 등) — 퍼블리싱은 한 줄(nowrap)만 정해, 칸보다 긴 이름(예: Policy Documents & Templates)이
   옆 제목 칸 위로 넘친다. 이름을 줄이지 않고 칸 안에서 줄을 바꾼다(단어 단위, 띄어쓰기 없는 긴 이름은 아무 곳에서나). */
.pat-board-table td .mod-badge {
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  vertical-align: middle;
}

/* 공고 분야 칸(파트너 검색 목록·마이페이지 관심 표시한 글 2번째) — 글 하나에 공고 분야가 여러 개라 뱃지를 여러 개 그린다.
   칸 전체가 한 줄(td.text-center nowrap)이면 뒤 뱃지가 남은 폭에 눌려 글자 단위로 쪼개지고 옆 칸과 겹치므로, 뱃지 사이에서 줄을 바꾸고 줄 사이를 띄운다. */
.pat-board-table--partner td:nth-child(2),
.pat-board-table--my-interests td:nth-child(2) {
  white-space: normal;
}

.pat-board-table--partner td:nth-child(2) .mod-badge,
.pat-board-table--my-interests td:nth-child(2) .mod-badge {
  margin: 2px;
}

/* 공고 분야 칸 폭 — 퍼블리싱은 짧은 분야(Mission·Cluster1) 기준 110px(태블릿 100px)라 가장 긴 분야 'EIC Pathfinder' 뱃지(약 114px)가
   한 단어 안에서 쪼개진다. 가장 긴 단어('Pathfinder')가 들어가는 폭까지만 넓힌다 — 'EIC Pathfinder'는 단어 사이에서 두 줄이 된다
   (남는 폭을 쓰는 제목 칸이 덜 줄게 최소로, 카드형 모바일은 그대로). */
.pat-board-table--partner col:nth-child(2),
.pat-board-table--my-interests col:nth-child(2) {
  width: 130px;
}

@media (min-width: 769px) and (max-width: 1439px) {
  .pat-board-table--partner col:nth-child(2) {
    width: 120px;
  }
}

/* 공고번호 칸 — 퍼블리싱 공고 목록(.pat-board-table--call 4번째 칸)처럼 칸이 좁으면 줄을 바꾼다.
   파트너 검색 목록(3번째)·마이페이지 내 파트너 검색 글(2번째)은 한 줄 기준이라 긴 공고번호가 옆 제목 칸으로 넘친다. */
.pat-board-table--partner td:nth-child(3),
.pat-board-table--my-posts td:nth-child(2) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 행사정보 장소/진행방식 칸 — 퍼블리싱은 줄바꿈(word-break·overflow-wrap)을 의도했지만 전역 td.text-center의 nowrap보다 명시도가 낮아
   한 줄로 남아 긴 장소가 표 밖으로 넘친다. 주관기관 칸(td.pat-board-table__org)처럼 td를 붙여 nowrap을 푼다. */
.pat-board-table--schedule td.pat-board-table__place {
  white-space: normal;
}

/* 제목 옆 NEW·자물쇠 표시 — 제목이 길어 말줄임될 때 같이 눌려 찌그러지지 않게 제 폭을 지킨다 */
.pat-board-table__title-box > :not(.pat-board-table__title) {
  flex-shrink: 0;
}
.pat-board-table__new {
  white-space: nowrap;
}

/* 공지 뱃지(자료실·소식지 목록) — 좁은 순번 칸에서 "공지"가 두 줄로 갈라지지 않게 한 줄로 두고,
   검은(네이비) 채움이 눈에 띄지 않는다는 요청으로 같은 필형에 파랑(element/primary) 채움 변형을 더한다.
   순번 칸(80px)의 글자 폭은 48px이고 공지 뱃지는 52px 안팎이라, 위의 표 안 뱃지 줄바꿈 규칙(.pat-board-table td .mod-badge)이 이기면
   글꼴이 조금 넓게 그려지는 환경(Windows)에서 두 줄로 갈라진다 — 표 안에서도 이기도록 같은 우선순위로 한 줄·폭 제한 없음을 준다 */
.mod-badge--notice,
.pat-board-table td .mod-badge--notice {
  max-width: none;
  white-space: nowrap;
}
.mod-badge--notice.mod-badge--notice-primary {
  background-color: var(--element-primary, #396cfa);
}

/* 필수·형식 오류(.is-error) 빨간 테두리 — 퍼블리싱은 .mod-input·.mod-select·.mod-editor에만 정의한다.
   에디터는 TinyMCE가 .mod-editor 대신 .tox-tinymce를 그리고, 아래 입력들은 퍼블리싱 자체 클래스라 같은 색을 붙인다. */
.tox.tox-tinymce.is-error,
.pat-comment__textarea.is-error {
  border-color: var(--input-border-error, #d0121b);
}
.mod-checkbox.is-error .mod-checkbox__box {
  border-color: var(--input-border-error, #d0121b);
}
/* 포커스 테두리(파랑)가 오류 테두리를 덮지 않게 — 오류 칸으로 포커스를 옮기므로 첫 오류 칸이 파랗게 보이던 문제.
   .mod-input은 퍼블리싱이 .is-error:focus를 두었고, 아래는 자체 :focus 규칙이 더 뒤에 있는 입력들이다. */
.pat-signup__input.is-error:focus,
.pat-comment__textarea.is-error:focus {
  border-color: var(--input-border-error, #d0121b);
  box-shadow: 0 0 0 3px rgba(208, 18, 27, 0.12);
}

/* hidden 속성은 늘 숨긴다 — 퍼블리싱 기본 초기화의 [hidden]은 우선순위가 낮아 display를 정한 클래스(.el-btn·.mod-input 등)에 진다.
   화면에서 처음 숨겨 둘 요소는 style="display:none" 대신 hidden 속성을 쓰고, 스크립트는 element.hidden으로 바꾼다. */
[hidden] {
  display: none !important;
}

/* 파트너 검색 목록은 행 전체가 상세로 가는 링크다(partner-list.js) — 글이 있는 행에만 손가락 커서 */
.pat-board-table--partner tbody tr:has(.pat-board-table__title) {
  cursor: pointer;
}

/* 메인 [온라인 상담하기] — 상담 주소를 설정하지 않으면 로그인 회원에게는 href 없이 그려져(home.html) 브라우저 기본 화살표가 된다. 언제나 손가락 커서 */
.pat-home .visual-section .helpdesk__action .connect-link {
  cursor: pointer;
}

/* 다중 선택 상자의 체크 표시 — 퍼블리싱의 "고른 선택지 아이콘을 파랗게"(.mod-select__option.is-selected svg)가 체크박스 아이콘에도 걸려,
   파란 체크 상자 위의 체크가 같은 파란색이 되어 보이지 않는다. 체크박스 아이콘은 체크박스 색(흰색)을 그대로 쓴다. */
.mod-select--multi .mod-select__option.is-selected .mod-checkbox__icon {
  color: var(--text-inverse, #ffffff);
}

/* 상단 이동(TOP) 버튼 — 퍼블리싱에 없는 사용자 화면 부품. 하단 우측에 떠 있다가 위로 스크롤할 때 올라오며 나타난다(layout.js) */
.pat-top-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary, #396cfa);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(17, 31, 70, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background-color 0.2s ease;
}
.pat-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s, background-color 0.2s ease;
}
.pat-top-button:hover {
  background: var(--color-primary-hover, #2e56c8);
}
@media (max-width: 767px) {
  .pat-top-button {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* 행사 검색 기간 — 모바일(767px 이하)에서 날짜 칸이 세로로 쌓이면 칸의 flex 기준값(140px·200px)이 높이가 되어 입력 칸이 위아래로 크게 벌어진다.
   세로로 쌓일 때는 기준값을 풀어 입력 높이만큼만 차지하게 한다. */
@media screen and (max-width: 767px) {
  .pat-board-search__period .mod-date-range--sm .mod-date-range__input,
  .mod-date-range--sm .mod-date-range__input {
    flex: 0 0 auto;
  }
}

/* 메인 행사 카드 — 카드는 그리드 칸이라 기본 최소 폭이 내용 폭(auto)이다. 한 줄(nowrap) 제목이 길면 카드가 슬라이드보다 넓게 늘어나
   퍼블리싱이 정한 말줄임(…)이 걸리지 않고 오른쪽이 잘린다. 최소 폭을 0으로 풀어 카드가 칸 폭을 지키게 한다. */
.pat-home .event-section .event-wrap .event-board .board-item {
  min-width: 0;
}

/* 통합검색 바로가기(.pat-gnb__search-link) — 퍼블리싱은 1279px 이하에서 헤더 검색창(.pat-gnb__search)을 숨기고 모바일 메뉴에도 검색을 두지 않는다.
   그 구간에서만 돋보기 버튼을 햄버거 버튼 앞에 둔다(퍼블리싱 규칙은 그대로, 퍼블리싱에 없는 요소만 더한다) */
.pat-gnb__search-link {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  color: var(--color-text-primary, #222222);
}
.pat-gnb__search-link + .pat-gnb__toggle-btn {
  margin-left: 12px;
}
@media screen and (max-width: 1279px) {
  .pat-gnb__search-link {
    display: inline-flex;
  }
}

/* 에디터 본문(.editor-content)의 글머리 기호 목록 — 퍼블리싱의 대시 목록(.pat-board-view__body ul li::before)은 고정 문구용이다.
   에디터 본문은 li의 위치 지정이 브라우저 기본으로 되돌려져(editor-content.css) 그 대시가 본문 왼쪽 끝에 따로 떠 보이므로 에디터 본문에서는 대시를 쓰지 않는다 */
.pat-board-view__body.editor-content ul li::before {
  content: none;
}

/* 게시글 상세 본문 높이 — 퍼블리싱은 Figma 높이(min-height: 455px)를 두어 짧은 글 아래가 비어 보인다. 본문 길이만큼만 차지하게 한다(CLAUDE.md 예외) */
.pat-board-view__body {
  min-height: 0;
}

/* 메인 행사 슬라이더 — 페이지가 하나여도 이전·다음 버튼과 페이지 표시(1 / 1)를 보인다(퍼블리싱은 한 페이지면 숨긴다) */
.event-board .mod-slider__controls:has(.swiper-pagination-lock) {
  display: flex;
}
.event-board .mod-slider__nav.swiper-button-lock {
  display: flex;
}

/* 토스트 문구의 줄바꿈(\n)을 그대로 보인다 — 국문 아래 줄에 영문을 두는 안내(로그인 등)용. 퍼블리싱 토스트는 한 문단뿐이라 줄을 나눌 방법이 없다 */
.mod-toast__message {
  white-space: pre-line;
}

/* 사용자 화면 하단 버튼 줄(팝업·계정찾기·회원가입·마이페이지·글쓰기) — 퍼블리싱은 모바일에서도 버튼을 가로로 나란히 두어, 국문·영문을 함께 쓴
   한 줄(nowrap) 글자가 버튼 밖으로 넘치거나 두 줄 글자가 버튼 높이에 눌린다. 게시글 상세 하단(.pat-board-view__actions)처럼
   한 줄에 하나씩 폭을 꽉 채워 쌓고, 오른쪽(주요) 버튼을 위로 올린다. 글자가 길면 버튼 안에서 줄을 바꾸고 높이를 늘린다.
   관리자 화면도 같은 클래스를 쓰므로 사용자 레이아웃(.pat-layout)과 그 뒤에 붙는 팝업(.pat-layout ~ *)에만 건다 */
@media (max-width: 767px) {
  .pat-layout .mod-modal__foot,
  .pat-layout ~ * .mod-modal__foot,
  .pat-layout .pat-signup__actions,
  .pat-layout .pat-myaccount__actions,
  .pat-layout .pat-board-foot__actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pat-layout .pat-board-foot__actions {
    width: 100%;
  }
  .pat-layout .mod-modal__foot > .el-btn,
  .pat-layout ~ * .mod-modal__foot > .el-btn,
  .pat-layout .pat-signup__btn,
  .pat-layout .pat-myaccount__btn,
  .pat-layout .pat-board-foot__actions .el-btn {
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: normal;
  }
}

/* 회원가입 아이디·이메일 칸 옆 버튼(중복확인·인증메일 발송) — 퍼블리싱은 버튼 최소 폭(130px)을 지켜 나란히 두어, 모바일에서 입력 칸만
   줄어 입력값이 몇 글자만 보인다. 입력 칸을 한 줄 전체로 쓰고 버튼은 그 아래에 폭을 꽉 채워 두며, 국문·영문 두 줄 글자를 한 줄로 잇는다 */
@media (max-width: 767px) {
  .pat-signup__input-group {
    flex-direction: column;
  }
  .pat-signup__input-group .pat-signup__input {
    flex: none; /* 퍼블리싱의 flex: 1(기준 0)이 세로 배치에서는 높이를 줄인다 */
  }
  .pat-signup__inline-btn {
    flex-direction: row;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: 48px;
  }
  .pat-signup__inline-btn br {
    display: none;
  }
}

/* 로그인 하단 링크(아이디 찾기·비밀번호 찾기·회원가입) — 퍼블리싱은 모바일에서 찾기 두 링크를 한 줄, 회원가입을 다음 줄에 두고
   링크마다 국문/영문 두 줄이라 줄과 높이가 어긋나 보인다. 링크마다 "국문 (영문) >" 한 줄로 쓰고 세 링크를 세로로 쌓는다 */
@media (max-width: 480px) {
  .pat-login__find-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .pat-login__link br {
    display: none;
  }
  .pat-login__link [lang="en"]::before {
    content: " (";
  }
  .pat-login__link [lang="en"]::after {
    content: ")";
  }
}

/* 사용자 화면 폼 라벨 — 퍼블리싱은 PC 기준 17px를 모바일에서도 그대로 써 입력 칸 글자(15~16px)보다 크고 무거워 보인다.
   모바일에서는 입력 칸 글자·목록 검색 라벨과 같은 15px로 줄인다. 표 라벨은 관리자 화면도 쓰므로 사용자 레이아웃에만 건다 */
@media (max-width: 767px) {
  .pat-login__label,
  .pat-signup__label,
  .pat-layout .mod-form-table__label {
    font-size: var(--font-size-xs); /* 15px */
  }
}

/* 입력 칸 안내 문구(placeholder) — 국문·영문을 함께 써 모바일 입력 칸보다 길고, 퍼블리싱은 넘치는 끝을 그냥 자른다("(Enter your use").
   모바일에서는 안내 문구만 14px로 줄이고(퍼블리싱이 이미 13px로 둔 계정찾기·회원가입 칸은 그대로), 그래도 넘치면 끝에 말줄임(…)을 붙인다(입력한 값은 그대로) */
@media (max-width: 767px) {
  .pat-layout input:not(.pat-signup__input)::placeholder,
  .pat-layout ~ * input::placeholder,
  .pat-layout textarea::placeholder,
  .pat-layout ~ * textarea::placeholder {
    font-size: 14px;
  }
  .pat-layout input:placeholder-shown,
  .pat-layout ~ * input:placeholder-shown {
    text-overflow: ellipsis;
  }
}

/* 상세·글쓰기 화면 콘텐츠 제목(.el-content-title) — 퍼블리싱은 작은 제목(--md)만 화면 폭에 따라 줄이고 기본 제목은 모바일에서도 40px라
   위 페이지 제목(30px)보다 커진다. 모바일에서 24px로 줄인다. 관리자 화면도 같은 클래스를 쓰므로 사용자 레이아웃에만 건다 */
@media (max-width: 767px) {
  .pat-layout .el-content-title:not(.el-content-title--md) {
    font-size: var(--font-title-small-size); /* 24px */
  }
}

/* 계정찾기·회원가입 카드(.pat-signup-card) — 퍼블리싱은 카드를 감싼 .pat-signup에 상하좌우 여백(위 40·아래 64·좌우 16px)을 두어, 좁은 화면에서
   페이지 여백 안쪽에 여백이 한 번 더 겹친다. 카드가 헤더보다 안쪽·아래에서 시작하고 입력 칸이 로그인 화면보다 좁아진다.
   카드 안쪽 여백을 줄이는 구간(640px 이하)에서 바깥 여백을 없애 다른 화면처럼 페이지 여백에서 시작하게 한다 */
@media (max-width: 640px) {
  .pat-signup {
    padding: 0;
  }
}

/* 헤더 로고 — 퍼블리싱은 모바일(767px 이하)에서 로고를 40px(폭 255px)로만 줄여, 360px 화면에서는 통합검색·메뉴 버튼이 눌리고
   320px에서는 메뉴 버튼이 사라진다. 모바일 32px(폭 204px), 360px 미만 28px로 줄인다.
   푸터 로고는 퍼블리싱에 크기가 없어 원본(60px)이거나 모바일에서 화면 폭만큼 커지므로 헤더 로고와 같은 높이로 맞춘다 */
@media (max-width: 767px) {
  .pat-gnb__logo-img,
  .pat-footer__logo img {
    width: auto;
    height: 32px;
  }
}

/* 헤더 높이 — 퍼블리싱은 모든 폭에서 80px라, 로고를 줄인 모바일에서는 헤더 위아래가 비어 보이고 본문을 가린다.
   모바일은 퍼블리싱 반응형 안내(믹스인 예시)의 56px로 줄인다. 헤더 바·메뉴 패널 머리·본문 위 여백이 모두 이 값을 따른다 */
@media (max-width: 767px) {
  :root {
    --size-header-height: 56px;
  }
  /* 모바일 메뉴 패널 머리는 이 값을 따르지 않아(위아래 24px + 로고 40px) 메뉴를 열면 로고가 커진다. 헤더와 같은 높이·로고로 맞춘다 */
  .pat-gnb-drawer__header {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .pat-gnb-drawer__logo-img {
    width: auto;
    height: 32px;
  }
}
@media (max-width: 359px) {
  .pat-gnb__logo-img,
  .pat-footer__logo img {
    height: 28px;
  }
}

/* 푸터 Follow us — 퍼블리싱은 모든 폭에서 글자 17px·아이콘 40px·간격 20px라, 모바일에서 줄인 푸터 로고(32px)보다 커 보인다.
   로고를 줄인 비율에 맞춰 모바일에서 글자 15px·아이콘 32px·간격 12px로 줄인다(아이콘 SVG에 크기 속성이 있어 SVG도 함께) */
@media (max-width: 767px) {
  .pat-footer__contact-link {
    gap: 12px;
    font-size: var(--font-size-xs); /* 15px */
  }
  .pat-footer__contact-link .icon,
  .pat-footer__contact-link .icon svg {
    width: 32px;
    height: 32px;
  }
}

/* 로그인 폼(.pat-login) — 퍼블리싱은 모바일(480px 이하)에서 폼에 좌우 1rem을 두어 페이지 좌우 여백 안쪽에 여백이 한 번 더 겹친다.
   입력 칸이 다른 화면 본문보다 안쪽(36px)에서 시작하므로 좌우 여백을 없애 페이지 여백(20px)에 맞춘다 */
@media (max-width: 480px) {
  .pat-login {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 계정찾기·회원가입 제목 — 퍼블리싱은 로그인 제목만 모바일(480px 이하)에서 32px로 줄이고 이 제목은 34px로 둔다. 로그인 제목에 맞춘다 */
@media (max-width: 480px) {
  .pat-signup__title {
    font-size: 2rem;
  }
}

/* 비밀글 자물쇠 — 퍼블리싱은 질의응답 표(.pat-board-table--qna)에만 있어 공용 게시판 목록·FAQ에 같은 모양을 더한다 */
.pat-board-table__lock {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-left: 8px;
    color: var(--text-bold, #262f3c);
}

/* 푸터 저작권·청사 주소 — Figma 푸터 기준. 퍼블리싱은 저작권 + 약관 링크라 청사 주소가 없고, 저작권 글자(15px·흰색 70%)와
   간격(20px)도 Figma(16px·흰색 90%, 16px)와 달라 맞춘다. 모바일 글자 크기는 퍼블리싱(13px)을 그대로 따른다 */
.pat-footer__bottom {
  gap: 1rem;
}
@media (min-width: 768px) {
  .pat-footer__copy {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
  }
}
.pat-footer__address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
}
.pat-footer__address-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.pat-footer__address-name {
  margin-right: 6px; /* 이름 ↔ 주소 16px(줄 간격 10px + 6px) */
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.9);
}
.pat-footer__address-text {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.pat-footer__address-divider {
  width: 1px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.25);
}
/* 좁은 화면 — 청사 이름을 한 줄로 두고 주소·전화를 아래 줄로 나눈다 */
@media (max-width: 767px) {
  .pat-footer__address {
    gap: 12px;
  }
  .pat-footer__address-row {
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--font-size-xxs);
  }
  .pat-footer__address-divider {
    display: none;
  }

}
/* 목록 첨부파일 — 긴 파일명은 말줄임하고 다운로드 아이콘의 공간은 유지한다 */
.pat-board-table__attach .mod-dropdown__file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 상세 정보 표가 앞 영역 바로 아래 붙을 때 앞 영역 하단선과 표 상단선이 겹쳐 2px로 보이는 것 방지 —
   퍼블리싱은 메타 바로 아래 표만 처리한다(.pat-board-view__header + .mod-form-table). 상세는 정보 표·첨부 표·내용 표가 이어지거나
   (행사정보) 행사정보 줄(.pat-board-view__event) 아래에 첨부 표가 오므로(주요 공지사항) 같은 방식으로 앞 영역 하단선이 상단선 역할을 한다 */
.mod-form-table--view + .mod-form-table--view,
.pat-board-view__event + .mod-form-table--view {
  border-top: 0;
}

/* 메인 온라인 헬프데스크 — 퍼블리싱은 1279px 이하에서 제목·안내문·버튼을 한 줄씩 쌓아(1열) 넓은 화면에서도 오른쪽이 비고 세로로만 길어진다(기획 요청).
   940~1279px은 데스크톱 3열(제목 | 안내문 | 버튼)을 그대로 쓰고(안내문이 두 줄로 들어가는 너비까지 — 상자 약 890px),
   768~939px은 왼쪽 제목·안내문 / 오른쪽 버튼 2열(안내문은 강제 줄바꿈 없이 칸 폭을 채운다), 모바일은 1열을 유지하되 헤드셋 그림 높이와 사이 여백을 줄인다. */
/* 939px 이하 헤드셋 제목 칸 — 퍼블리싱은 칸 높이를 100%로 두고 그림을 위에서 15px에 붙여, 쌓인 배치(2열·1열)에서 제목과 그림이 어긋난다.
   칸 높이를 내용만큼으로 하고 그림을 세로 가운데에 둔다(예전에 main.css에 직접 넣었던 보정 — main.css는 퍼블리싱 결과물이라 여기로 옮김) */
@media screen and (max-width: 939px) {
  .pat-home .visual-section .helpdesk__ttl {
    height: auto;
    background-position: right center;
  }
}

@media screen and (min-width: 940px) and (max-width: 1279px) {
  .pat-home .visual-section .helpdesk {
    grid-template-columns: 245px 1fr auto;
    gap: 24px;
    padding: 0 32px;
  }

  .pat-home .visual-section .helpdesk__ttl {
    height: 100%;
    min-height: 0;
    background-size: auto;
    background-position: right 0 top 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 939px) {
  .pat-home .visual-section .helpdesk {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title action"
      "guide action";
    column-gap: 24px;
    row-gap: 8px;
    padding: 24px 28px;
  }

  .pat-home .visual-section .helpdesk__ttl {
    grid-area: title;
    justify-self: start; /* 칸을 제목 폭에 맞춰 헤드셋 그림이 제목 옆에 붙게 */
    min-height: 56px;
    padding-right: 72px; /* 헤드셋 그림 자리 */
    background-size: auto 56px;
  }

  .pat-home .visual-section .helpdesk__guide {
    grid-area: guide;
    word-break: keep-all;
  }

  /* 데스크톱 3열용 강제 줄바꿈 — 2열에서는 안내문이 왼쪽 칸 폭을 채우게 없앤다(퍼블리싱 모바일과 같은 방식) */
  .pat-home .visual-section .helpdesk__guide br {
    display: none;
  }

  .pat-home .visual-section .helpdesk__action {
    grid-area: action;
  }
}

@media screen and (max-width: 767px) {
  .pat-home .visual-section .helpdesk {
    gap: 12px;
    padding: 20px 16px;
  }

  .pat-home .visual-section .helpdesk__ttl {
    min-height: 56px;
    background-size: auto 56px;
  }

  .pat-home .visual-section .helpdesk__guide {
    word-break: keep-all; /* 좁은 화면에서 '지원을'이 '지 / 원을'처럼 글자 단위로 끊기지 않게 */
  }
}

/* FAQ 답변 첨부링크·첨부파일 — 항목명(dt)은 한 번만 두고 링크·파일을 dd 안에 줄마다 쌓으므로(faq-answer.html),
   여러 줄일 때 퍼블리싱의 세로 가운데 정렬이면 항목명이 목록 가운데에 붙는다. 항목명을 첫 줄에 맞춘다(한 줄이면 같은 모양) */
.pat-faq-row__attach-row {
  align-items: flex-start;
}

/* 탭(.mod-tab__item — 프로그램 안내 등 3뎁스 탭·마이페이지 탭) hover — 퍼블리싱은 반투명 덮개(rgba 0.08)라 기본 회색(#DCE0EA)보다 오히려 밝아진다.
   검색 칩(.el-chip--fill) hover처럼 명도가 진해지도록 #C6CCDD로 둔다(기획 요청). 언더라인·테두리형 탭은 각자 hover가 있어 그대로다 */
.mod-tab__item:hover:not(.is-active):not([aria-selected="true"]) {
  background-color: #c6ccdd;
}

/* 행사 캘린더의 국내·해외 뱃지 — 퍼블리싱 글자색(#929AAA)이 연해 바탕과 구분이 잘 안 된다. 목록 표의 국내·해외 라벨(.mod-event-info__zone)과 같은 글자색으로 둔다(기획 요청) */
.mod-calendar__region {
  color: var(--text-default, #4a5667);
}

/* 관심 표시한 연구자 모달의 글 정보 — 위는 제목, 아래 한 줄은 공고번호 | 등록일(상세 메타 .pat-board-view__meta)로 한 칸처럼 붙인다.
   제목과 메타 사이에는 선 없이 좁은 간격만 두고, 메타의 위·아래 테두리는 없앤다 — 연구자 목록과의 구분선은 목록 자체의 위 테두리(사이트 마이페이지·관리자 파트너 검색 목록 공용) */
.mod-modal__body > .pat-myaccount__modal-post:has(+ .pat-board-view__meta) {
  margin-bottom: 6px;
  font-weight: var(--font-weight-bold, 700); /* 아래 연구자 이름(.mod-person-list__name)보다 옅어 보이지 않게 같은 굵기 */
}

.mod-modal__body > .pat-myaccount__modal-post + .pat-board-view__meta {
  border-top: 0;
  border-bottom: 0;
  padding: 0 0 16px;
  margin-bottom: 0;
}

.mod-modal__body > .pat-myaccount__modal-post + .pat-board-view__meta dt {
  font-weight: var(--font-weight-semibold, 600);
}

.mod-modal__body > .pat-myaccount__modal-post + .pat-board-view__meta dd {
  color: var(--text-bolder, #090c10);
}

/* 공고정보 호라이즌 유럽 목록(.pat-board-table--call-title, --call과 함께) — 퍼블리싱 --call은 태블릿(769~1279)에서 5번째 칸(공고 내용)을 숨기는데,
   이 목록은 5번째 칸이 상세로 가는 공고명(Call title)이라 숨기면 링크가 사라진다. 그 폭에서는 목표(3번째)를 대신 숨긴다(고객 요청으로 링크를 목표에서 공고명으로 옮긴 예외). */
@media (min-width: 769px) and (max-width: 1279px) {
  .pat-board-table--call.pat-board-table--call-title th:nth-child(5),
  .pat-board-table--call.pat-board-table--call-title td:nth-child(5) {
    display: table-cell;
  }

  .pat-board-table--call.pat-board-table--call-title th:nth-child(3),
  .pat-board-table--call.pat-board-table--call-title td:nth-child(3) {
    display: none;
  }
}

/* 공고정보 호라이즌 유럽 목록의 영문 칸 이름 — 퍼블리싱 표 머리글은 한 줄(nowrap)이라 좁은 칸(연구유형 70~90px)에서 "Type of Action"이
   옆 칸으로 넘친다. 영문 이름만 칸 안에서 단어 단위로 줄을 바꾼다(옆 칸과 겹치는 값은 칸 안에서 줄바꿈하는 예외와 같은 방식) */
.pat-board-table--call-title .pat-board-table__th-en {
  white-space: normal;
  word-break: keep-all;
}

/* 공고정보 한국연구재단 목록 7칸(.pat-board-table--call-kr) — 퍼블리싱에 없는 표라 기본 표(.pat-board-table)에 칸 폭·모바일 카드 배치를 더한다.
   1 순번 / 2 공고구분 / 3 등록일 / 4 공고제목 / 5 접수일자 / 6 마감일자 / 7 진행상태 */
.pat-board-table--call-kr col:nth-child(1) { width: 70px; }
.pat-board-table--call-kr col:nth-child(2) { width: 120px; }
.pat-board-table--call-kr col:nth-child(3) { width: 130px; }
.pat-board-table--call-kr col:nth-child(5) { width: 130px; }
.pat-board-table--call-kr col:nth-child(6) { width: 130px; }
.pat-board-table--call-kr col:nth-child(7) { width: 110px; }

/* 촘촘한 표(769~1279px) — 퍼블리싱 --call과 같이 여백·글자를 줄이고 고정 칸을 좁혀 공고제목 칸 폭을 지킨다 */
@media (min-width: 769px) and (max-width: 1279px) {
  .pat-board-table--call-kr th,
  .pat-board-table--call-kr td {
    padding: 14px 10px;
    font-size: var(--font-body-small-regular-size, 0.9375rem);
  }

  .pat-board-table--call-kr col:nth-child(1) { width: 50px; }
  .pat-board-table--call-kr col:nth-child(2) { width: 90px; }
  .pat-board-table--call-kr col:nth-child(3) { width: 100px; }
  .pat-board-table--call-kr col:nth-child(5) { width: 100px; }
  .pat-board-table--call-kr col:nth-child(6) { width: 100px; }
  .pat-board-table--call-kr col:nth-child(7) { width: 80px; }
}

/* 접수일자·마감일자 칸의 라벨(.pat-board-table__cell-label)은 모바일 카드 전용 — 표에서는 th가 대신한다(--scroll과 같은 규칙) */
.pat-board-table--call-kr .pat-board-table__cell-label {
  display: none;
}

/* 마감일이 여러 개면 표에서는 한 줄에 하나씩, 모바일 카드에서는 한 줄에 " / "로 잇는다(--call과 같은 모양) */
.pat-board-table--call-kr .pat-board-table__dates time {
  display: block;
  line-height: 1.4;
}

/* 공고정보 상세 정보 칸 — 3열(≥1280)에서만 2칸을 차지한다. 퍼블리싱 --span-2는 2열(태블릿)에서 한 줄 전체가 되어 옆 칸(접수일자·공고분야)이 홀로 남는다 */
@media (min-width: 1280px) {
  .mod-desc-list--grid .mod-desc-list__row--span-2-wide {
    grid-column: span 2;
  }
}

/* 공고정보 목록 마감일 단계(1단계·2단계) — 퍼블리싱에 없는 표시. 마감일자 칸(120px)은 날짜 폭에 맞춰져 있어 같은 줄에 붙이면 옆 칸과 겹친다.
   표에서는 날짜 위에 작은 회색 글자로 올리고(날짜 폭 그대로), 모바일 카드(날짜를 " / "로 한 줄에 잇는 폭)에서는 날짜 앞에 붙인다 */
.pat-board-table__date-stage {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #7f8aa3);
}
.pat-board-table__dates time + time {
  margin-top: 6px;
}
@media (max-width: 768px) {
  .pat-board-table__date-stage {
    display: inline;
    margin-right: 4px;
  }
  .pat-board-table__dates time + time {
    margin-top: 0;
  }
}

/* 모바일 카드: [진행상태·공고구분 ··· 등록일] / [공고제목] / [접수일자 ··· 마감일자] — 순번은 숨긴다(퍼블리싱 --call 카드와 같은 배치).
   기본 카드 배치(1·2 / 3 / 4 ··· 5·6)는 6칸 기준이라 칸마다 자리를 다시 정한다 */
@media (max-width: 768px) {
  .pat-board-table.pat-board-table--call-kr td {
    width: auto !important;
    margin: 0 !important;
  }

  .pat-board-table.pat-board-table--call-kr td:nth-child(1) { display: none; }
  .pat-board-table.pat-board-table--call-kr td:nth-child(7) { order: 1; display: inline-flex; margin-right: 6px !important; }

  .pat-board-table.pat-board-table--call-kr td:nth-child(2) {
    order: 2;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-body-xsmall-medium-size, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-bold, #262f3c);
  }

  .pat-board-table.pat-board-table--call-kr td:nth-child(3) {
    order: 3;
    display: inline-flex;
    margin-left: auto !important;
    font-size: var(--font-size-xxs);
    color: var(--text-muted, #929aaa);
  }

  .pat-board-table.pat-board-table--call-kr td:nth-child(4) {
    order: 4;
    display: block;
    width: 100% !important;
    margin: 10px 0 12px !important;
  }

  .pat-board-table.pat-board-table--call-kr td:nth-child(5) { order: 5; display: inline-flex; }

  .pat-board-table.pat-board-table--call-kr td:nth-child(6) {
    order: 6;
    display: inline-flex;
    margin-left: auto !important;
  }

  /* 접수일자·마감일자: 라벨과 값 사이를 띄우고 --call 카드와 같은 크기로 */
  .pat-board-table--call-kr .pat-board-table__cell-label {
    display: inline;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-bold, #262f3c);
  }

  .pat-board-table--call-kr td:nth-child(5),
  .pat-board-table--call-kr td:nth-child(6) {
    align-items: baseline;
    gap: var(--spacing-8, 8px);
    font-size: var(--font-body-xsmall-regular-size, 0.875rem);
  }

  .pat-board-table--call-kr .pat-board-table__dates {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 6px;
  }

  .pat-board-table--call-kr .pat-board-table__dates time {
    display: inline;
  }

  .pat-board-table--call-kr .pat-board-table__dates time + time::before {
    content: '/ ';
  }
}

/* NCP 조직도 담당자 행의 정보보기·문의하기(.mod-staff-list__actions) — 퍼블리싱 행은 이름·소속 2칸이라, NCP 목록(카드) 화면을 닫으며 옮겨 온
   두 버튼 칸을 오른쪽에 더한다(이름·소속 칸 비율은 퍼블리싱 그대로). 좁은 화면(퍼블리싱이 1칸으로 쌓는 폭)에서는 소속 아래 줄에 반씩 나눈다.
   버튼 칸 때문에 소속 칸이 좁아져 영문 소속이 두 줄이 되면(ERC KRISS 등) 가운데 정렬이 이름을 내려 소속이 한 줄 위로 보였다 — 행을 위로 맞춘다(요청 2026-11-05) */
.mod-staff-list__person {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: start;
}

.mod-staff-list__actions {
  display: flex;
  gap: var(--spacing-8);
}

/* 메인 화면 분야 카드의 'NCP 바로가기'(/ncp/list#분야)가 고정 헤더 아래에 분야 제목이 보이게 멈춘다 */
.mod-staff-list__group[id] {
  scroll-margin-top: var(--size-header-height);
}

@media screen and (max-width: 1279px) {
  .mod-staff-list__person {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  }
}

@media screen and (max-width: 767px) {
  .mod-staff-list__person {
    grid-template-columns: minmax(0, 1fr);
  }

  .mod-staff-list__actions .el-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* 소식지 상세 사진(참여행사 등) — 퍼블리싱에 없는 영역. 본문 아래 3열(태블릿 2열 · 모바일 1열) 썸네일, 누르면 원본을 새 창으로 */
.pat-board-view__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16, 16px);
  padding: 0 var(--spacing-16, 16px) var(--spacing-32, 32px);
}
.pat-board-view__photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}
.pat-board-view__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1023px) {
  .pat-board-view__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .pat-board-view__photos {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
}

/* NCP 담당자 "담당자 확정 전" — 요청(2026-11-05)으로 한 단계 키우고(17 → 18px) 담당자 칸 가운데에 둔다 */
.mod-staff-list__person--empty {
  font-size: 18px;
  text-align: center;
}

/* 로그인 아이디 안내 — 퍼블리싱 로그인에 없는 말풍선. 아이디 칸을 누르면(포커스) 칸 아래에 펼쳐지고 벗어나면 접힌다(스크립트 없음) */
.pat-login__id-tip {
  display: none;
  position: relative;
  margin-top: var(--spacing-10, 10px);
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  border-radius: var(--radius-md, 4px);
  background-color: var(--alert-info-bg, #eef3ff);
  color: var(--alert-info-text, #396cfa);
  font-size: 14px;
  line-height: 1.5;
}
.pat-login__id-tip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--spacing-20, 20px);
  width: 12px;
  height: 12px;
  background-color: inherit;
  transform: rotate(45deg);
}
.pat-login__field:focus-within .pat-login__id-tip {
  display: block;
}
.pat-login__id-tip-en {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.85;
}