@charset "UTF-8";

/* ==========================================================================
   연세대학교 산학협력단 채용시스템
   ========================================================================== */

:root {
    --navy:        #0b2d5c;
    --navy-dark:   #071e3f;
    --navy-light:  #1b4b8f;
    --accent:      #1f6fd0;
    --gold:        #a8863f;

    --ink:         #1b1f27;
    --ink-soft:    #4a5260;
    --ink-faint:   #7b8393;

    --line:        #e2e6ec;
    --line-soft:   #eef1f5;
    --bg:          #f6f8fa;
    --surface:     #ffffff;

    --ok:          #0f7a52;
    --ok-bg:       #e3f5ed;
    --ready:       #9a6a00;
    --ready-bg:    #fdf1d8;
    --off:         #6b7280;
    --off-bg:      #eef0f3;
    --danger:      #c0392b;
    --danger-bg:   #fdecea;

    --radius:      10px;
    --shadow:      0 1px 2px rgba(11, 45, 92, .06), 0 4px 16px rgba(11, 45, 92, .05);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    /* 한글은 단어(어절) 단위로 줄을 바꾼다. 좁은 화면에서 "채/용"처럼 단어
       한가운데서 끊기는 것을 막고, 공백 없이 긴 문자열(이메일 등)만 강제로 끊는다. */
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: rgba(31, 111, 208, .14);
}

button, .btn, select, input[type=checkbox], input[type=radio] { touch-action: manipulation; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; }

.inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-nav {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--navy);
    color: #fff;
    padding: 10px 18px;
}
.skip-nav:focus { left: 0; }

/* --------------------------------------------------------------- 헤더 */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-mark {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 19px;
    font-family: Georgia, "Times New Roman", serif;
}

.brand-text { display: flex; flex-direction: row; align-items: baseline; gap: 6px; line-height: 1; white-space: nowrap; }
.brand-text strong { font-size: 15px; color: var(--navy); }
.brand-text span   { font-size: 13px; color: var(--ink-faint); }

.gnb ul { display: flex; gap: 4px; }

.gnb a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-soft);
}
.gnb a:hover { background: var(--line-soft); color: var(--navy); }
.gnb a.on    { background: var(--navy); color: #fff; }

/* --------------------------------------------------------------- 페이지 타이틀 */

.page-head {
    background: linear-gradient(180deg, #0b2d5c 0%, #123a70 100%);
    color: #fff;
    padding: 34px 0 30px;
}
.page-head h1 { font-size: 27px; }
.page-head .breadcrumb {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}
.page-head .breadcrumb a:hover { text-decoration: underline; }
.page-head .breadcrumb span { margin: 0 6px; }

/* --------------------------------------------------------------- 본문 */

.site-main { padding: 6px 0 8px; }

/* --------------------------------------------------------------- 메인 히어로 */

/* 히어로 상하 padding 은 화면 높이에 맞춰 common.js 가 --hero-pad 변수를
   동적으로 조절한다 (initMainFitToScreen). 기본값(22px)은 JS 실행 전
   깜빡임 방지 + JS 비활성 환경 대비 fallback. */
.hero {
    background: linear-gradient(135deg, #0b2d5c 0%, #1b4b8f 100%);
    color: #fff;
    border-radius: 14px;
    padding: var(--hero-pad, 22px) 32px;
    text-align: center;
    margin-bottom: 18px;
}
.hero h1 { font-size: 20px; }
.hero p  { margin: 4px 0 10px; color: rgba(255, 255, 255, .8); font-size: 13px; }

.hero-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}
.hero-search input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}
.hero-search button {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    background: var(--gold);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.hero-search button:hover { background: #96762f; }

/* --------------------------------------------------------------- 메인 그리드 */

/* 1fr 은 minmax(auto, 1fr) 라서, 카드 안의 한 줄 고정(nowrap) 제목이 칸을 밀어
   내 모바일에서 페이지가 옆으로 넓어진다. minmax(0, 1fr) 로 칸 폭을 고정한다. */
.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
}

/* 채용공고 / 공지사항 / 자주하는질문 카드 공용 축소 스타일 - 1366x768 처럼
   낮은 화면에서도 스크롤 없이 다 들어오도록 내부 여백을 최대한 줄인다.
   .card 와 동일한 특이도(specificity)를 가지는 단일 클래스 선택자로는 뒤에
   나오는 .card 규칙에 상쇄되므로, 반드시 .card.card-compact 복합 선택자를 쓴다. */
.card.card-compact { padding: 8px 14px 10px; }
.card-compact .card-head { padding-bottom: 4px; margin-bottom: 0; }
.card-compact .dot-list li { padding: 3px 4px; }
.card-compact .recruit-list a { padding: 3px 4px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px 24px;
    min-width: 0;
}
.card-wide { grid-column: 1 / -1; }

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--navy);
}
.card-head h2 { font-size: 19px; color: var(--navy); }
.card-head .more { font-size: 13px; color: var(--ink-faint); }
.card-head .more:hover { color: var(--accent); text-decoration: underline; }

.empty {
    padding: 28px 0;
    text-align: center;
    color: var(--ink-faint);
    font-size: 14px;
}

/* 메인 채용공고 */
.recruit-list li { border-bottom: 1px solid var(--line-soft); }
.recruit-list li:last-child { border-bottom: 0; }
.recruit-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    flex-wrap: wrap;
}
.recruit-list a:hover .title { color: var(--accent); text-decoration: underline; }
.recruit-list .title {
    flex: 1 1 260px;
    font-weight: 600;
    min-width: 0;
}
.recruit-list .period {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ink-faint);
}
.recruit-list .step {
    display: inline-block;
    margin-left: 8px;
    font-style: normal;
    color: var(--accent);
    font-weight: 600;
}

/* 메인 공지 / FAQ */
.dot-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--line-soft);
}
.dot-list li:last-child { border-bottom: 0; }
.dot-list a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dot-list .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dot-list a:hover .title { color: var(--accent); text-decoration: underline; }
.dot-list .date {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------- 배지 / 상태 */

.status {
    display: inline-block;
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}
.status.open   { background: var(--ok-bg);    color: var(--ok); }
.status.ready  { background: var(--ready-bg); color: var(--ready); }
.status.closed { background: var(--off-bg);   color: var(--off); }

.chip {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-soft);
    background: #fff;
}
.chip.urgent {
    border-color: #f3c6c0;
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 700;
}
/* 목록 상단에 고정된 공고 표시 */
.chip.pin {
    flex: 0 0 auto;
    border-color: #b9cdea;
    background: #eaf1fb;
    color: var(--accent);
    font-weight: 700;
}

.badge {
    display: inline-block;
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--navy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}
.badge.cat { background: var(--line-soft); color: var(--navy); }

/* --------------------------------------------------------------- 검색 박스 */

.search-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 18px;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.search-row select,
.search-row input[type=text] {
    height: 42px;
    border: 1px solid #ccd3dd;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
}
.search-row select { flex: 0 0 auto; min-width: 118px; }
.search-row input[type=text] { flex: 1 1 220px; min-width: 0; }
.search-row select:focus,
.search-row input[type=text]:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.btn-search {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 24px;
    border: 0;
    border-radius: 7px;
    background: var(--navy);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.btn-search:hover { background: var(--navy-dark); }

.btn-reset {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--ink-soft);
    font-size: 14px;
}
.btn-reset:hover { background: var(--line-soft); }

/* --------------------------------------------------------------- 분류 탭 */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.tabs a {
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}
.tabs a:hover { border-color: var(--accent); color: var(--accent); }
.tabs a.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --------------------------------------------------------------- 결과 요약 */

.result-count {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--ink-soft);
}
.result-count strong { color: var(--navy); }
.result-count .page-info { color: var(--ink-faint); margin-left: 4px; }

.empty-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 56px 20px;
    text-align: center;
    color: var(--ink-faint);
    margin: 0;
}

/* --------------------------------------------------------------- 채용공고 카드 목록 */

.recruit-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.recruit-cards > li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .15s, transform .15s;
}
.recruit-cards > li:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.recruit-cards a { display: block; padding: 20px 22px 18px; }

.rc-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.rc-title {
    font-size: 17px;
    line-height: 1.45;
    color: var(--navy);
    margin-bottom: 12px;
}
.recruit-cards a:hover .rc-title { text-decoration: underline; }

.rc-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    font-size: 13.5px;
}
.rc-meta dt { color: var(--ink-faint); }
.rc-meta dd { color: var(--ink-soft); }

/* --------------------------------------------------------------- 게시판 표 */

.board {
    width: 100%;
    background: var(--surface);
    border-top: 2px solid var(--navy);
    border-collapse: collapse;
    box-shadow: var(--shadow);
}
.board th, .board td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
}
.board thead th {
    background: #fafbfc;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
}
.board .col-no   { width: 82px;  text-align: center; }
.board .col-date { width: 120px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.board .col-hit  { width: 76px;  text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.board .col-title a { display: block; }
.board .col-title a:hover { color: var(--accent); text-decoration: underline; }
.board tr.top-row { background: #fbfcfe; }
.board tr.top-row .col-title a { font-weight: 600; }
.board tbody tr:hover { background: #f8fafc; }

/* --------------------------------------------------------------- FAQ 아코디언 */

.faq-list {
    background: var(--surface);
    border-top: 2px solid var(--navy);
    box-shadow: var(--shadow);
}
.faq-list > li { border-bottom: 1px solid var(--line); }

.faq-q {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
}
.faq-q:hover { background: #f8fafc; }
.faq-q .q-text { flex: 1 1 auto; font-weight: 600; }

.faq-q .q-arrow {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg);
    margin: -4px 4px 0 0;
    transition: transform .18s;
}
.faq-q[aria-expanded=true] { background: #f3f7fc; }
.faq-q[aria-expanded=true] .q-arrow { transform: rotate(-135deg); margin-top: 2px; }

.faq-a {
    padding: 4px 22px 20px 50px;
    color: var(--ink-soft);
    font-size: 14.5px;
    background: #fbfcfe;
}
.faq-a p { margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- 상세 */

.detail {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.detail-head {
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.detail-head h2 { font-size: 23px; line-height: 1.45; color: var(--navy); }

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin-top: 16px;
    font-size: 13.5px;
}
.detail-meta > div { display: flex; gap: 8px; }
.detail-meta dt { color: var(--ink-faint); }
.detail-meta dd { color: var(--ink-soft); font-weight: 600; }

/* 지원 자격 (학력 / 경력 / 자격) */
.detail-req { padding: 22px 28px; border-bottom: 1px solid var(--line); background: #f9fbfc; }
.detail-req h3 { margin: 0 0 12px; font-size: 16px; color: var(--ink); }
.detail-req dl { margin: 0; display: grid; gap: 10px; }
.detail-req dl > div { display: flex; gap: 16px; }
.detail-req dt { flex: 0 0 76px; color: var(--ink-faint); font-weight: 600; }
.detail-req dd { margin: 0; flex: 1; min-width: 0; line-height: 1.7; color: var(--ink-soft);
                 white-space: pre-line; overflow-wrap: anywhere; }

.detail-body { padding: 28px; min-height: 180px; line-height: 1.8; }
.detail-body h4 {
    margin: 26px 0 10px;
    font-size: 16px;
    color: var(--navy);
    padding-left: 11px;
    border-left: 3px solid var(--accent);
}
.detail-body h4:first-child { margin-top: 0; }
.detail-body p  { margin: 0 0 12px; }
.detail-body ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
.detail-body ol { list-style: decimal; padding-left: 22px; margin: 0 0 12px; }
.detail-body table { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
.detail-body th, .detail-body td { border: 1px solid var(--line); padding: 9px 12px; }
.detail-body th { background: #f7f9fb; }
.detail-body a { color: var(--accent); text-decoration: underline; }

/* 이전 / 다음 */
.sibling {
    margin-top: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.sib-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    font-size: 14.5px;
}
.sib-row + .sib-row { border-top: 1px solid var(--line-soft); }
.sib-label {
    flex: 0 0 56px;
    color: var(--ink-faint);
    font-size: 13.5px;
}
.sib-row a:hover { color: var(--accent); text-decoration: underline; }
.sib-none { color: var(--ink-faint); }

.detail-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 34px;
    border-radius: 7px;
    background: var(--navy);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}
.btn:hover { background: var(--navy-dark); }
.btn.ghost {
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--line);
}
.btn.ghost:hover { background: var(--line-soft); }
/* 되돌릴 수 없는 동작(삭제 실행)의 주 버튼 */
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #a02f23; }

/* --------------------------------------------------------------- 공용 폼 요소
   관리자 화면과 지원자 화면이 함께 쓴다. 한쪽에만 두면 다른 쪽에서 스타일이
   빠지므로 여기에 모아 둔다. (클래스 이름의 adm- 접두어는 처음 만들어진 곳의
   흔적이고, 지금은 양쪽 공용이다.)
   --------------------------------------------------------------- */

.adm-alert {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    background: var(--line-soft);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}
.adm-alert.ok  { background: var(--ok-bg);     color: var(--ok);     border-color: #b9e3d1; }
.adm-alert.err { background: var(--danger-bg); color: var(--danger); border-color: #f3c6c0; }

.adm-table-form { width: 100%; border-collapse: collapse; }
.adm-table-form th,
.adm-table-form td {
    padding: 15px 8px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}
.adm-table-form th {
    width: 150px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    padding-top: 22px;
}
.adm-table-form tr:last-child th,
.adm-table-form tr:last-child td { border-bottom: 0; }

.req { color: var(--danger); font-style: normal; }

.hint {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-faint);
}
.hint code {
    background: var(--line-soft);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

.adm-form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}

.inline-form { display: inline; }

.btn-xs {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--ink-soft);
    cursor: pointer;
    vertical-align: middle;
}
.btn-xs:hover { border-color: var(--accent); color: var(--accent); }
.btn-xs.danger { color: var(--danger); }
.btn-xs.danger:hover { border-color: var(--danger); background: var(--danger-bg); }

.btn-login {
    width: 100%;
    height: 46px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.btn-login:hover { background: var(--navy-dark); }

/* --------------------------------------------------------------- 페이징 */

.paging {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
}

.pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    font-size: 14px;
    color: var(--ink-soft);
}
.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 700;
}
.pg.disabled { color: #c3c9d3; background: #fafbfc; cursor: default; }
.pg.disabled:hover { border-color: var(--line); color: #c3c9d3; }

/* --------------------------------------------------------------- 오류 화면 */

.error-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 64px 24px;
    text-align: center;
}
.error-box .code {
    margin: 0;
    font-size: 54px;
    font-weight: 800;
    color: var(--line);
    line-height: 1;
}
.error-box h2 { margin: 14px 0 8px; font-size: 21px; color: var(--navy); }
.error-box p  { color: var(--ink-faint); margin: 0; }

/* 접수 전 / 마감 공고 안내 (apply/not_open.jsp) */
.error-box.not-open .status { font-size: 13px; padding: 4px 14px; }
.error-box.not-open h2 { margin-top: 12px; }
.error-box.not-open .not-open-title { margin-top: 14px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.error-box.not-open .not-open-period { margin: 4px 0 14px; font-size: 14px; }

/* --------------------------------------------------------------- 푸터 */

/* footer 상하 padding 도 --footer-pad 변수를 통해 common.js 가 화면 높이에
   맞춰 동적으로 조절한다 (initMainFitToScreen, 메인 화면 한정). */
.site-footer {
    background: var(--navy-dark);
    color: rgba(255, 255, 255, .62);
    padding: var(--footer-pad, 14px) 0;
    font-size: 13.5px;
}
.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.foot-links a { color: rgba(255, 255, 255, .85); font-weight: 600; }
.foot-links a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.4; }
.site-footer .copyright { margin: 8px 0 0; color: rgba(255, 255, 255, .4); font-size: 12.5px; }

/* --------------------------------------------------------------- 반응형 */

@media (max-width: 860px) {
    .main-grid,
    .recruit-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    /* ---- 헤더 / 상단 ---- */
    .site-header .inner { min-height: 56px; padding-top: 8px; padding-bottom: 8px; gap: 10px; }
    .brand-mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
    .gnb ul { justify-content: space-between; }
    .gnb a { flex: 1 1 0; text-align: center; padding: 9px 6px; font-size: 14px; }

    .page-head { padding: 22px 0 18px; }
    .page-head h1 { font-size: 21px; line-height: 1.35; }
    .page-head .breadcrumb { font-size: 12.5px; }

    .site-main { padding: 12px 0 18px; }

    /* ---- 메인 히어로 ---- */
    .hero { padding: 26px 18px 22px; margin-bottom: 14px; border-radius: 12px; }
    .hero h1 { font-size: 21px; line-height: 1.4; }
    .hero p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.6; }
    .hero-search { flex-direction: column; gap: 10px; }
    /* 16px 미만 글자의 입력칸은 iOS 가 포커스 때 화면을 확대해 버린다. */
    .hero-search input[type=text] { height: 46px; font-size: 16px; }
    .hero-search button { height: 46px; font-size: 16px; }

    /* ---- 카드 ---- */
    .card { padding: 18px 16px 18px; }
    .card.card-compact { padding: 14px 14px 12px; }
    .card-head { padding-bottom: 10px; }
    .card-head h2 { font-size: 17.5px; }
    .card-head .more { padding: 6px 0 6px 10px; }

    /* 메인 채용공고: 제목은 줄바꿈, 기간은 아래 줄 */
    .recruit-list a, .card-compact .recruit-list a { padding: 11px 2px; gap: 4px 10px; }
    .recruit-list .title { flex: 1 1 100%; line-height: 1.5; }
    .recruit-list .period { font-size: 12.5px; }

    /* 메인 공지 / FAQ: 제목은 두 줄까지, 날짜는 아래 줄 */
    .dot-list li, .card-compact .dot-list li { flex-wrap: wrap; gap: 3px 10px; padding: 10px 2px; }
    .dot-list a { flex: 1 1 100%; align-items: flex-start; }
    .dot-list .title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
    .dot-list .date { padding-left: 2px; font-size: 12.5px; }

    /* ---- 검색 / 탭 ---- */
    .search-box { padding: 14px; }
    .search-row select,
    .search-row input[type=text],
    .btn-search,
    .btn-reset { flex: 1 1 100%; height: 46px; font-size: 16px; justify-content: center; }
    .btn-reset { font-size: 15px; }

    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px 14px;
        padding: 0 16px 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { flex: 0 0 auto; white-space: nowrap; padding: 9px 16px; }

    /* ---- 채용공고 카드 ---- */
    .recruit-cards { gap: 10px; }
    .recruit-cards a { padding: 16px 16px 14px; }
    .rc-title { font-size: 16px; margin-bottom: 10px; }
    .rc-meta { font-size: 13px; gap: 3px 12px; }

    /* ---- 게시판 표 ---- */
    .board th, .board td { padding: 12px 6px; font-size: 14px; }
    .board .col-no, .board .col-hit { display: none; }
    .board .col-date { width: 84px; font-size: 12.5px; }
    .board .col-title { padding-left: 10px; }

    /* ---- 상세 ---- */
    .detail-head { padding: 20px 16px 16px; }
    .detail-head h2 { font-size: 19px; }
    .detail-meta { flex-direction: column; gap: 4px; margin-top: 14px; }
    .detail-meta > div { gap: 12px; }
    .detail-meta dt { flex: 0 0 62px; }
    .detail-req { padding: 16px; }
    .detail-req dl > div { flex-direction: column; gap: 2px; }
    .detail-req dt { flex: none; }
    .detail-body { padding: 20px 16px 22px; min-height: 120px; line-height: 1.75; }
    .detail-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .detail-body img { height: auto; }
    .detail-body th, .detail-body td { padding: 8px 10px; }

    .sib-row { padding: 12px 14px; gap: 10px; font-size: 14px; }
    .sib-label { flex-basis: 44px; font-size: 12.5px; }
    .sib-row a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .detail-actions { margin-top: 18px; }
    .detail-actions .btn { flex: 1 1 0; padding: 0 12px; }

    /* ---- FAQ ---- */
    .faq-q { padding: 15px 14px; gap: 8px; }
    .faq-a { padding: 4px 16px 18px 16px; }

    /* ---- 공용 폼 ---- */
    .adm-alert { padding: 11px 14px; font-size: 14px; }

    .adm-form-actions { flex-wrap: wrap; gap: 8px; }
    .adm-form-actions .btn { flex: 1 1 calc(50% - 4px); padding: 0 12px; height: 46px; }
    /* 주 버튼(저장 / 최종제출)은 맨 위 한 줄 전체를 차지하게 한다. */
    .adm-form-actions .btn:not(.ghost) { flex-basis: 100%; order: -1; }

    .btn-login { height: 48px; font-size: 16px; }

    /* ---- 페이징 ---- */
    .paging { flex-wrap: wrap; margin-top: 22px; }
    .pg { min-width: 40px; height: 40px; }
    .paging .pg.first, .paging .pg.last { display: none; }

    /* ---- 오류 화면 ---- */
    .error-box { padding: 44px 18px; }
    .error-box .code { font-size: 46px; }

    /* ---- 푸터 ---- */
    .site-footer { padding-top: 22px; padding-bottom: 28px; }
    .foot-links { gap: 10px 18px; }
    .foot-links a { padding: 4px 0; }
}

/* 아주 좁은 화면(아이폰 SE, 구형 안드로이드) */
@media (max-width: 360px) {
    .inner { padding-left: 12px; padding-right: 12px; }
    .hero h1 { font-size: 19px; }
    .brand-text span { display: none; }
    .tabs { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}