@charset "UTF-8";

/* 서울시 API 공고 상세 3차 리뉴얼. 정식 메인(main-renewal.css) 헤더/푸터 위에 본문만 정의한다. */

.apijob-main { padding:0 0 80px; background:#f7f9fc; }
.apijob-main .main-content-width { width:min(1180px, calc(100% - 40px)); margin:0 auto; }

.apijob-breadcrumb { display:flex; align-items:center; gap:6px; padding:18px 0 14px; color:#8a93a4; font-size:13px; }
.apijob-breadcrumb a { color:#8a93a4; }
.apijob-breadcrumb a:hover { color:#2163d8; text-decoration:underline; text-underline-offset:3px; }
.apijob-breadcrumb span[aria-current] { color:#4d596d; font-weight:600; word-break:keep-all; }

/* 공고 시트 */
.apijob-sheet { border:1px solid #e3e7ee; border-radius:14px; background:#fff; overflow:hidden; }
.apijob-sheet-head { padding:30px 34px 24px; border-bottom:1px solid #eef0f4; }
.apijob-sheet-badges { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.apijob-source { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:5px; background:#fff7d6; color:#9a6700; font-size:11px; font-weight:700; }
.apijob-status { display:inline-flex; align-items:center; height:24px; line-height:1; padding:0 9px; border-radius:5px; font-size:11px; font-weight:700; }
.apijob-status.is-run { background:#eaf1fd; color:#2163d8; }
.apijob-status.is-end { background:#f1f3f6; color:#7b8493; }
.apijob-company { display:block; margin-bottom:8px; color:#5b6679; font-size:14px; font-weight:600; }
.apijob-sheet-head h1, .apijob-stack-title { margin:0 0 22px; color:#171e2c; font-size:26px; line-height:1.36; font-weight:700; letter-spacing:-.5px; word-break:keep-all; }

/* 상단 핵심 정보 */
.apijob-sheet-summary { display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:26px; align-items:start; }
.apijob-keyinfo { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 26px; margin:0; }
.apijob-keyinfo > div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid #f2f4f8; }
.apijob-keyinfo > div[hidden] { display:none; }
.apijob-keyinfo dt { color:#8a93a4; font-size:13px; font-weight:600; }
.apijob-keyinfo dd { margin:0; color:#1f2838; font-size:13px; line-height:1.6; font-weight:700; word-break:break-word; }
.apijob-sheet-apply { display:grid; gap:8px; }
.apijob-hero-deadline { padding:14px 16px; border:1px solid #e6eaf1; border-radius:10px; background:#fbfcfe; text-align:center; }
.apijob-hero-deadline span { display:block; margin-bottom:5px; color:#8a93a4; font-size:11px; font-weight:700; }
.apijob-hero-deadline strong { display:block; margin-bottom:3px; color:#e15148; font-size:22px; font-weight:700; letter-spacing:-.5px; }
.apijob-hero-deadline small { color:#7b8493; font-size:12px; }
.apijob-hero-deadline.is-end strong { color:#98a0ae; }
.apijob-hero-meta { margin:16px 0 0; color:#98a0ae; font-size:12px; }

/* 상태 공지 */
.apijob-notice { display:flex; gap:10px; margin:22px 34px 0; padding:14px 18px; border:1px solid #f0d9a8; border-radius:10px; background:#fffaf0; }
.apijob-notice[hidden] { display:none; }
.apijob-notice i { color:#c07a00; font-size:18px; }
.apijob-notice strong { display:block; margin-bottom:3px; color:#8a5b00; font-size:14px; font-weight:700; }
.apijob-notice p { margin:0; color:#94714a; font-size:13px; line-height:1.55; }

/* 시트 내부 섹션. 카드로 쪼개지 않고 구분선으로만 나눈다. */
.apijob-sheet-section { padding:28px 34px; border-top:1px solid #eef0f4; }
.apijob-sheet-section:first-of-type { border-top:0; }
.apijob-sheet-section[hidden] { display:none; }
.apijob-sheet-section > h2 { margin:0 0 18px; padding-left:11px; border-left:3px solid #2163d8; color:#1c2535; font-size:17px; line-height:1.35; font-weight:700; }

.apijob-description { color:#3f4a5c; font-size:14px; line-height:1.78; white-space:pre-wrap; word-break:break-word; }

/* 스펙 표 */
.apijob-spec { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 26px; margin:0; }
.apijob-spec > div { display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; align-items:baseline; padding:11px 0; border-bottom:1px solid #f0f2f6; }
.apijob-spec > div[hidden] { display:none; }
.apijob-spec dt { color:#8a93a4; font-size:13px; font-weight:600; }
.apijob-spec dd { margin:0; color:#2b3446; font-size:13px; line-height:1.6; font-weight:600; word-break:break-word; }
.apijob-spec.is-single { grid-template-columns:minmax(0,1fr); }

.apijob-note { margin:16px 0 0; padding:12px 14px; border-radius:8px; background:#f5f7fa; color:#7b8493; font-size:12px; line-height:1.6; }

/* 시트 하단 */
.apijob-sheet-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:20px 34px 22px; border-top:1px solid #eef0f4; background:#fbfcfe; }
.apijob-action-note { margin:0; color:#98a0ae; font-size:11px; line-height:1.65; }
.apijob-action-note > span { display:block; word-break:keep-all; }
.apijob-action-note > span + span { margin-top:4px; }
.apijob-action-note > span:empty { display:none; }
.apijob-sheet-foot .apijob-button { width:auto; min-width:132px; height:42px; padding:0 18px; }

/* 버튼 */
.apijob-button { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:46px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; }
.apijob-button.is-primary { border:1px solid #2163d8; background:#2163d8; color:#fff!important; }
.apijob-button.is-primary:hover { background:#1a4ba8; border-color:#1a4ba8; }
.apijob-button.is-favorite { border:1px solid #e0e5ec; background:#fff; color:#4d596d; }
.apijob-button.is-favorite:hover { border-color:#f0c14b; color:#b98600; }
.apijob-button.is-favorite.is-active { border-color:#f0c14b; background:#fffaf0; color:#b98600; }
.apijob-button.is-favorite i { font-size:17px; }
.apijob-button.is-ghost { border:1px solid #e0e5ec; background:#fff; color:#5b6679!important; }
.apijob-button.is-ghost:hover { border-color:#c6cddb; color:#1c2535!important; }
.apijob-button:disabled { border-color:#eceff4; background:#f5f7fa; color:#b3bbc8; cursor:default; }

/* 관심공고 로그인 안내 / 토스트 */
.apijob-modal { position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(20,26,38,.45); }
.apijob-modal.is-open { display:flex; }
.apijob-modal-dialog { position:relative; width:min(340px, 100%); padding:28px 26px 24px; border-radius:14px; background:#fff; text-align:center; }
.apijob-modal-close { position:absolute; top:12px; right:14px; border:0; background:none; color:#98a0ae; font-size:20px; line-height:1; cursor:pointer; }
.apijob-modal-dialog span { display:block; margin-bottom:6px; color:#2e6edc; font-size:11px; font-weight:700; }
.apijob-modal-dialog h2 { margin:0 0 8px; color:#1c2535; font-size:18px; font-weight:700; }
.apijob-modal-dialog p { margin:0 0 18px; color:#7b8493; font-size:13px; line-height:1.6; }
.apijob-modal-actions { display:grid; gap:8px; }
.apijob-modal-actions a { display:flex; align-items:center; justify-content:center; height:44px; border-radius:8px; font-size:14px; font-weight:700; }
.apijob-modal-actions a:first-child { background:#2163d8; color:#fff; }
.apijob-modal-actions a:last-child { border:1px solid #e0e5ec; color:#5b6679; }

.apijob-toast { position:fixed; left:50%; bottom:34px; z-index:420; display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:10px; background:rgba(24,31,44,.94); color:#fff; font-size:13px; opacity:0; transform:translate(-50%, 12px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.apijob-toast.is-open { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.apijob-toast a { color:#8ab4ff; font-weight:700; }

@media (max-width:1024px) {
    .apijob-sheet-summary { grid-template-columns:minmax(0,1fr); gap:18px; }
    .apijob-sheet-apply { grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; }
    .apijob-hero-deadline { grid-column:1 / -1; }
    .apijob-spec { grid-template-columns:minmax(0,1fr); }
}

@media (max-width:768px) {
    .apijob-main .main-content-width { width:calc(100% - 32px); }
    /* 좁은 화면에서는 고정바가 제목만 보여 주고, 회사명과 맨 위로는 숨긴다. */
    .apijob-nowbar-inner { height:48px; gap:9px; width:calc(100% - 32px); }
    .apijob-nowbar-logo { font-size:16px; letter-spacing:-1px; }
    .apijob-nowbar-text { gap:0; }
    .apijob-nowbar-text strong { display:none; }
    .apijob-nowbar-text span { font-size:14px; }
    .apijob-nowbar-top { display:none; }
    .apijob-stack-item { margin-top:44px; }
    .apijob-stack-divider-name { max-width:60%; font-size:14px; }
    .apijob-sheet-head { padding:24px 20px 20px; }
    .apijob-sheet-head h1, .apijob-stack-title { margin-bottom:18px; font-size:21px; }
    .apijob-keyinfo { grid-template-columns:minmax(0,1fr); }
    .apijob-sheet-apply { grid-template-columns:minmax(0,1fr); }
    .apijob-notice { margin:18px 20px 0; }
    .apijob-sheet-section { padding:24px 20px; }
    .apijob-sheet-foot { padding:18px 20px; }
    .apijob-sheet-foot .apijob-button { width:100%; }
    .apijob-spec > div { grid-template-columns:88px minmax(0,1fr); }
}

/* 공고 상세 이어보기. 다음 공고 상세가 통째로 이어 붙고, 한도에 걸리면 흐린 배경 위에 안내창이 뜬다. */
/* 이어보기 상단 고정바. 스크롤 중에도 지금 보는 공고가 무엇인지 알려 준다. */
.apijob-nowbar { position:sticky; top:0; z-index:1200; border-bottom:1px solid #e2e7f0; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(8px); box-shadow:0 6px 18px rgba(32,45,72,.07); }
.apijob-nowbar[hidden] { display:none; }
.apijob-nowbar-inner { display:flex; align-items:center; gap:12px; height:56px; }
/* 메인 로고를 그대로 축소해 넣는다 */
.apijob-nowbar-logo { flex:none; display:inline-flex; align-items:center; color:#1d3f82!important; font-size:19px; line-height:1; font-weight:850; letter-spacing:-1.2px; text-decoration:none; }
.apijob-nowbar-logo span { color:#2f6feb; }
.apijob-nowbar-logo:hover { opacity:.82; }
.apijob-nowbar-sep { flex:none; width:1px; height:18px; background:#dfe4ee; }
.apijob-nowbar-text { display:flex; align-items:baseline; gap:10px; min-width:0; }
.apijob-nowbar-text strong { flex:none; max-width:32%; color:#5b6679; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apijob-nowbar-text span { min-width:0; color:#182235; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apijob-nowbar-top { flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border:1px solid #dfe4ee; border-radius:16px; background:#fff; color:#5b6679; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.apijob-nowbar-top:hover { border-color:#c3cddd; color:#2f5fd0; }
.apijob-nowbar-top i { font-size:14px; }
/* 공고가 바뀌는 순간을 눈으로 잡아 준다. */
.apijob-nowbar.is-swap .apijob-nowbar-text { animation:apijob-nowbar-slide .32s ease; }
@keyframes apijob-nowbar-slide { 0% { opacity:0; transform:translateY(6px); } 100% { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
    .apijob-nowbar.is-swap .apijob-nowbar-text { animation:none; }
}

.apijob-stack { position:relative; }
/* 공고 사이 간격을 크게 벌려 카드가 확실히 끊겨 보이게 한다. */
.apijob-stack-item { margin-top:64px; }
.apijob-stack-divider { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.apijob-stack-divider::before { content:""; width:0; }
.apijob-stack-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,#d5deed 0%,#eef1f6 60%,rgba(238,241,246,0) 100%); }
.apijob-stack-divider-tag { display:inline-flex; flex:none; align-items:center; height:24px; line-height:1; padding:0 11px; border-radius:12px; background:#2f5fd0; color:#fff; font-size:11px; font-weight:700; }
.apijob-stack-divider-name { flex:none; max-width:52%; color:#182235; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apijob-stack-title { margin:0; color:#182235; font-size:26px; line-height:1.32; font-weight:700; letter-spacing:-.5px; }
.apijob-stack-sentinel { height:1px; }
.apijob-stack-sentinel[hidden] { display:none; }
.apijob-stack-gate { position:relative; min-height:460px; margin-top:18px; overflow:hidden; border-radius:16px; isolation:isolate; }
.apijob-stack-gate[hidden] { display:none; }
.apijob-stack-gate-blur { height:460px; overflow:hidden; filter:blur(3.5px) saturate(.82); opacity:.58; transform:scale(.995); transform-origin:top center; pointer-events:none; user-select:none; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.52) 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.52) 76%,transparent 100%); }
.apijob-stack-gate-blur .apijob-stack-item { margin-top:0; }
.apijob-stack-gate-blur .apijob-stack-divider { display:none; }
.apijob-stack-gate-panel { position:absolute; inset:0; z-index:9; display:flex; align-items:flex-end; justify-content:center; padding:150px 20px 20px; background:linear-gradient(180deg,rgba(247,249,252,0) 0%,rgba(247,249,252,.12) 32%,rgba(247,249,252,.82) 68%,#f7f9fc 100%); }
.apijob-stack-gate.is-flat .apijob-stack-gate-blur { display:none; }
.apijob-stack-gate.is-flat { min-height:0; overflow:visible; }
.apijob-stack-gate.is-flat .apijob-stack-gate-panel { position:static; padding:0; background:none; }
.apijob-stack-gate-card { width:100%; max-width:560px; padding:22px 24px; border:1px solid rgba(211,220,235,.94); border-radius:16px; background:rgba(255,255,255,.96); text-align:center; box-shadow:0 8px 24px rgba(33,48,78,.1); backdrop-filter:blur(8px); }
.apijob-stack-gate-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:6px; background:#eef3ff; color:#3663c8; font-size:11px; font-weight:700; }
.apijob-stack-gate-card strong { display:block; margin-top:13px; color:#182235; font-size:19px; line-height:1.4; font-weight:700; }
.apijob-stack-gate-card p { margin:9px 0 0; color:#6f7b91; font-size:13px; line-height:1.6; }
.apijob-stack-gate-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin-top:19px; }
.apijob-stack-gate-primary { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 22px; border-radius:9px; background:#376fe0; color:#fff!important; font-size:14px; font-weight:700; box-shadow:0 8px 18px rgba(48,100,207,.2); }
.apijob-stack-gate-primary:hover { background:#285fcf; }
.apijob-stack-gate-ghost { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border:1px solid #cbd9f4; border-radius:9px; background:#fff; color:#3267ce!important; font-size:14px; font-weight:700; }
@media (max-width:900px) {
    .apijob-stack-title { font-size:21px; }
    .apijob-stack-gate { min-height:520px; margin-top:12px; border-radius:12px; }
    .apijob-stack-gate-blur { width:100%; height:520px; }
    .apijob-stack-gate-panel { padding:180px 12px 12px; }
    .apijob-stack-gate-card { max-width:100%; padding:20px 16px; }
    .apijob-stack-gate-card strong { font-size:17px; }
    .apijob-stack-gate-actions { width:100%; flex-direction:column; }
    .apijob-stack-gate-primary, .apijob-stack-gate-ghost { width:100%; min-width:0; padding:0 14px; white-space:normal; }
}

/* 본문은 Toast UI 뷰어. 뷰어 기본 타이포를 recruitment-info-renewal.css 기준으로 맞춘다 */
.apijob-description.is-viewer { white-space:normal; }
.apijob-description .toastui-editor-contents { font-family:inherit; color:#3f4a5c; font-size:14px; line-height:1.78; }
.apijob-description .toastui-editor-contents p { margin:0 0 12px; color:#3f4a5c; }
.apijob-description .toastui-editor-contents strong { color:#1c2535; font-weight:700; }
.apijob-description .toastui-editor-contents h1 { margin:28px 0 11px; padding-bottom:10px; border-bottom:2px solid #1c2535; color:#1c2535; font-size:20px; line-height:1.45; font-weight:700; letter-spacing:-.5px; }
/* 본문 제목에는 좌측 바를 쓰지 않는다. 그 바는 시트 섹션 제목(.apijob-sheet-section > h2) 전용 */
.apijob-description .toastui-editor-contents h2 { margin:30px 0 10px; padding:0; border:0; color:#1c2535; font-size:16px; line-height:1.45; font-weight:700; }
.apijob-description .toastui-editor-contents > h2:first-child { margin-top:0; }
.apijob-description .toastui-editor-contents h3 { margin:20px 0 7px; color:#1c2535; font-size:15px; line-height:1.5; font-weight:700; }
.apijob-description .toastui-editor-contents h4,
.apijob-description .toastui-editor-contents h5 { margin:17px 0 6px; color:#1c2535; font-size:14px; line-height:1.5; font-weight:700; }
.apijob-description .toastui-editor-contents ul,
.apijob-description .toastui-editor-contents ol { margin:0 0 12px; padding-left:20px; }
.apijob-description .toastui-editor-contents li { margin:3px 0; color:#3f4a5c; }
.apijob-description .toastui-editor-contents li::marker { color:#2163d8; }
.apijob-description .toastui-editor-contents blockquote { margin:16px 0; padding:14px 18px; border-left:3px solid #b9cef4; border-radius:0 10px 10px 0; background:#f4f7fd; color:#3d4759; }
.apijob-description .toastui-editor-contents blockquote p:last-child { margin-bottom:0; }
.apijob-description .toastui-editor-contents a { color:#2163d8; text-decoration:underline; text-underline-offset:3px; }
.apijob-description .toastui-editor-contents img { display:block; max-width:100%; height:auto; margin:18px auto; border-radius:10px; }
.apijob-description .toastui-editor-contents hr { margin:24px 0; border:0; border-top:1px solid #eef0f4; }
.apijob-description .toastui-editor-contents table { display:block; width:100%; overflow-x:auto; margin:18px 0; border-collapse:collapse; font-size:13px; }
.apijob-description .toastui-editor-contents th { padding:10px 13px; border:1px solid #dfe4ec; background:#f5f7fa; color:#1c2535; font-weight:700; text-align:left; }
.apijob-description .toastui-editor-contents td { padding:10px 13px; border:1px solid #eef0f4; }
.apijob-description .toastui-editor-contents code { padding:2px 6px; border-radius:5px; background:#eef1f6; color:#33405a; font-size:.92em; }
.apijob-description .toastui-editor-contents pre { overflow-x:auto; margin:18px 0; padding:16px 18px; border-radius:10px; background:#1e2533; color:#e7ecf5; }
.apijob-description .toastui-editor-contents pre code { padding:0; background:transparent; color:inherit; }

/* 뷰어가 만든 껍데기가 본문에 여백/테두리를 더하지 않게 한다. */
.apijob-description .toastui-editor-defaultUI { border:0; }
.apijob-description .toastui-editor-main { padding:0; }
.apijob-description .toastui-editor-md-container,
.apijob-description .toastui-editor-ww-container { background:transparent; }

/* 로딩 스켈레톤 - 정식 메인과 같은 shimmer 를 쓴다 */
@keyframes apijob-shimmer { 0% { background-position:-360px 0; } 100% { background-position:360px 0; } }
.apijob-stack-skeleton { min-height:280px; margin-top:18px; border:1px solid #e7eaf0; border-radius:14px; background:linear-gradient(90deg,#f4f6fa 25%,#eaeef5 37%,#f4f6fa 63%); background-size:720px 100%; animation:apijob-shimmer 1.3s linear infinite; }
@media (prefers-reduced-motion:reduce) { .apijob-stack-skeleton { animation:none; } }

/* 이어보기 사이에 끼우는 신규가입 쿠폰 카드.
   생김새는 main-renewal.css 의 .main-signupcard 가 정한다.
   여기서는 공고 카드 사이에 놓일 때의 위아래 여백만 맞춘다. */
.apijob-stack-promo { margin:28px 0; }

@media (max-width:640px) {
	.apijob-stack-promo { margin:20px 0; }
}

/* 관심공고 모달의 쿠폰 안내 한 줄. 이벤트가 열려 있을 때만 나온다. */
.apijob-modal-bonus { margin-top:10px; padding:9px 12px; border-radius:7px; background:#fff8e0; color:#7a5400; font-size:13px; font-weight:600; }