/* 공고 화면 레이아웃 (layouts/bid) — 상세(iter-286)와 검색 결과(iter-288).
 * 공고 행방(whereabouts.css)과 기존 상세 섹션(공고일반·투찰제한·개찰결과·첨부·가입 안내·댓글)을 한 페이지로 읽히게 한다:
 * 책상 바탕, 섹션은 종이 한 장(흰 면·괘선·각진 모서리), 강조는 한강 남색(로고 한강과 같은 #1B2A6B, iter-415 — 전에는 결재 파랑 #2346C8). 사이트 머리·꼬리는 그대로.
 * 전에는 이 파일이 Tailwind 의 gold·amber·orange 를 남색으로 덮어 옛 화면을 남색으로 보이게 했다(iter-288~415).
 * 모든 화면이 navy 이름을 쓰게 된 뒤 덮어쓰기를 지웠다(iter-429). 색은 tailwind/application.css 의 @theme 한곳에서 정한다. */
body.bid-page { background: var(--wh-desk); }
body.bid-page footer { background: var(--color-paper); }

.bid-page #main-content {
  --color-ink-surface: var(--color-rule-soft);
  color: var(--wh-ink);
  /* 한국어는 낱말 사이에서만 줄을 바꾼다 — 공고 행방 칸만 그랬고 그 아래 기존 상세 칸은 "자/격요건"·"로그/인"처럼 낱말 중간에서 끊겼다
     (10/27 사용자 휴대폰, iter-359). 긴 기관명·번호는 넘칠 때만 끊는다. anywhere 는 flex 칸의 최소 폭까지 줄여 버튼 글자를 다시 쪼갠다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 섹션: 둥근 카드 대신 종이 한 장 */
.bid-page #main-content :is(.rounded-lg, .rounded-xl, .rounded-2xl) { border-radius: 4px; }

/* 섹션 머리: 영문식 대문자·자간 대신 공문 소제목 */
.bid-page #main-content :is(h2, h3).uppercase { text-transform: none; letter-spacing: -.2px; }
.bid-page #main-content h2.uppercase { font-size: 15px; font-weight: 700; color: var(--wh-ink); }



/* 경로 다음의 "공고 상세 정보" — 경로 제목과 같은 무게 */
.bid-page .wh-section-title { margin: 56px 0 4px 2px; font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -.5px; color: var(--wh-ink); }
.bid-page .wh-section-lede { margin: 0 0 18px 2px; font-size: 14px; color: var(--wh-ink-2); }
@media (min-width: 1024px) {
  .bid-page .wh-section-title { margin-top: 72px; font-size: 23px; }
}

/* 두 열 아래에 붙는 가입 안내·도움말 블록도 오른쪽 열에 맞춘다 */
@media (min-width: 1024px) {
  .bid-page .wh-page ~ * { margin-left: 416px; }
}

/* 오른쪽 열 맨 위 제작사 안내 (search/_maker_ad, iter-321) — 팀마일스톤 랜딩(team-milestone.io)과 같은 남색 칸·라임 버튼
 * (iter-345 에서 괘선만 있던 옛 칸과 비교해 10/17 확정, iter-346). 흰 종이·파랑과 확실히 갈라 서울비드 기능이 아닌 다른 회사의 안내로 읽히게 하고,
 * 눌러 넘어가도 같은 색이 이어진다. 휴대폰·좁은 창(1024px 아래)은 원래 공고 칸 다음, 경로("여기서 이어지는 공고"·"이 공고는 그 뒤로…") 바로 위 —
 * 전에는 숨겨 푸터 칸(방문자 7%만 닿는다)에만 있었다(10/27 사용자, iter-359). 옛 사이드바(aside, 상시 단가계약)는 aside 째로 데스크톱에만 */
.bid-page .maker-ad {
  display: block; margin: 0 0 32px; border-radius: 6px; background: #03172f;
  font-size: 14px; line-height: 1.55; color: #aebed1; word-break: keep-all;
}
.bid-page aside .maker-ad { margin-bottom: 16px; }
@media (max-width: 1023.98px) {
  .bid-page .wh-side + * .maker-ad { margin-top: 32px; }
}
/* 제목(방문자 수 질문)·부제·버튼 왼쪽, 갓 쓴 양반 그림(정사각형) 오른쪽 아래 (iter-366, 그 전 c 는 업무 구분 그림 띠 iter-347·348).
 * 그림 폭은 칸 폭의 38%(132~230px), 칸 높이는 그 폭 이상이라 갓이 잘리지 않는다 — 글자가 더 길면 그림 위로 남색이 남는다.
 * 그림 바탕은 칸과 같은 남색이지만 왼쪽 끝(부채)은 글자와 겹칠 수 있어 흐린다 */
.bid-page .maker-ad { position: relative; overflow: hidden; container-type: inline-size; }
/* 칸 전체가 링크 하나 (iter-370) — 그림·제목 어디를 눌러도 넘어가고, 칸 위에 마우스를 올리면 버튼 색이 바뀐다.
 * 칸이 overflow: hidden 이라 포커스 테두리는 안쪽으로 */
.bid-page .maker-ad-link { display: block; padding: 20px 22px; color: inherit; }
.bid-page .maker-ad-link:focus-visible { outline-offset: -3px; border-radius: 6px; }
.bid-page .maker-ad-art {
  position: absolute; right: 0; bottom: 0; width: clamp(132px, 38cqw, 230px); max-width: none; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.bid-page .maker-ad-copy {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: calc(100% - clamp(132px, 38cqw, 230px) + 28px); min-height: calc(clamp(132px, 38cqw, 230px) - 40px);
}
.bid-page .maker-ad-title { color: #fff; font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -.03em; }
.bid-page .maker-ad-brand { margin-top: 6px; color: #aebed1; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.bid-page .maker-ad-brand b { color: #fff; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.bid-page .maker-ad-brand b span { color: #d9ff21; }
.bid-page .maker-ad .maker-ad-cta {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 14px; padding: 0 16px; border-radius: 6px;
  background: #d9ff21; color: #03172f; font-weight: 800; transition: background-color .15s;
}
.bid-page .maker-ad-link:hover .maker-ad-cta { background: #bde600; }
@container (min-width: 640px) {
  .bid-page .maker-ad-title { font-size: 24px; }
  .bid-page .maker-ad-brand { font-size: 15px; }
}

/* ── 검색 결과 (iter-288): 공고명은 공문처럼 명조, 금액은 먹색, 파랑은 마감·D-day 같은 이어지는 정보에만 ── */
.bid-page .res-title { font-family: var(--wh-serif); font-weight: 800; letter-spacing: -.4px; line-height: 1.45; }
@media (min-width: 640px) { .bid-page .res-title { font-size: 17px; } }
.bid-page #main-content .res-price { color: var(--wh-ink); font-weight: 600; }
/* 빨강은 이 공고로 계약하지 않은 것(취소·유찰)에만 — 마감 임박은 파랑으로, 깜빡임 없이 */
.bid-page #main-content .card-urgent { border-left-color: var(--wh-route); }
.bid-page #main-content .dday-urgent { background: var(--wh-route); color: var(--wh-on-route); border-color: var(--wh-route); animation: none; }

/* 검색창도 종이 한 장 — 회색 칸·12px 모서리 대신 흰 면·괘선, 옆 버튼과 같은 4px */
.bid-page .search-input { background: var(--wh-sheet); border-color: var(--wh-rule); border-radius: 4px; }


/* 결과 위에 붙는 검색창 띠: 흰 띠 대신 책상 바탕 */
.bid-page #main-content .sticky.bg-ink { background: var(--wh-desk); }


/* 비회원 체험 안내: 빨강·호박 경고 대신 먹색 안내 + 파랑 가입 버튼 (빨강은 취소·유찰에만) */
.bid-page #main-content .guest-quota { background: var(--wh-shut-wash); color: var(--wh-ink-2); border-color: var(--wh-rule); }
.bid-page #main-content .guest-cap,
.bid-page #main-content .guest-cap strong:first-of-type { color: var(--wh-ink-2); }
.bid-page .guest-nudge { background: var(--wh-sheet); border-color: var(--wh-rule); border-radius: 4px; }
.bid-page .guest-nudge .guest-nudge-icon { background: var(--wh-route-wash); color: var(--wh-route); }

/* 공고명 검색의 "진행 중 공고가 없습니다" 안내와 최근 마감 카드 — 크림·살구 대신 닫힌 띠의 회색과 종이 */
.bid-page .sr-notice { background: var(--wh-shut-wash); border-color: var(--wh-rule); border-radius: 4px; }
.bid-page .sr-closed-card { border-color: var(--wh-rule); border-radius: 4px; }
.bid-page .sr-closed-card:hover { border-color: var(--wh-ink-2); }
.bid-page .sr-ago { background: var(--wh-shut-wash); color: var(--wh-ink-2); border-color: var(--wh-rule); }

/* ── 필터 (iter-289): 휴대폰 필터 줄이 옅은 테두리의 알약이라 글자처럼 읽혔다 —
 * 종이 칩(흰 면·괘선·4px)에 고르는 칸이 열리면 ▾, 켜고 끄는 것은 체크 상자, 하나만 고르는 금액은 동그라미. 켜지면 파랑 ── */
.bid-page .filter-chip {
  min-height: 34px; padding: 0 12px; gap: 6px;
  background: var(--wh-sheet); border: 1px solid var(--wh-rule); border-radius: 4px;
  color: var(--wh-ink); font-size: 13px; font-weight: 500;
}
.bid-page .filter-chip:hover { background: var(--wh-sheet); border-color: var(--wh-ink-2); color: var(--wh-ink); }
.bid-page .filter-chip.is-active,
.bid-page .filter-chip.is-active:hover { background: var(--wh-route-wash); border-color: var(--wh-route); color: var(--wh-route); font-weight: 600; }
.bid-page .filter-chip svg { opacity: .7; }
.bid-page .filter-chip--menu::after {
  content: ""; flex: none; width: 6px; height: 6px; margin: -4px 0 0 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6;
}
.bid-page :is(.filter-chip--check, .filter-chip--radio)::before {
  content: ""; flex: none; width: 14px; height: 14px; box-sizing: border-box;
  border: 1.5px solid var(--wh-ink-2); border-radius: 3px; background: var(--wh-sheet);
}
.bid-page .filter-chip--radio::before { border-radius: 50%; }
.bid-page .filter-chip--check.is-active::before {
  border-color: var(--wh-route); background: var(--wh-route) center / 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.3l2.4 2.4 5-5.2' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bid-page .filter-chip--radio.is-active::before { border-color: var(--wh-route); background: var(--wh-route); box-shadow: inset 0 0 0 2.5px var(--wh-sheet); }
.bid-page .filter-label { flex: none; margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--wh-ink-2); }
/* 결과가 많을 때 안내의 "바로 거르기" — 같은 종이 칩, 앞에 + */
.bid-page .hint-chip { background: var(--wh-sheet); border-color: var(--wh-rule); border-radius: 4px; color: var(--wh-ink); font-size: 12px; padding: 3px 9px; }
.bid-page .hint-chip::before { content: "+"; margin-right: 3px; color: var(--wh-route); font-weight: 700; }
.bid-page .hint-chip:hover { background: var(--wh-route-wash); border-color: var(--wh-route); color: var(--wh-route); }
/* 관련 검색어는 필터가 아니라 다른 검색 — 테두리 없는 파란 링크로 */
.bid-page .related-link { border-color: transparent; padding-left: 4px; padding-right: 4px; color: var(--wh-route); }
.bid-page .related-link:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
/* 적용된 필터(× 로 빼기)와 초기화도 같은 4px 칩 */
.bid-page .applied-filter { border-radius: 4px; background: var(--wh-route-wash); border-color: var(--wh-route); color: var(--wh-route); }
.bid-page .applied-filter:hover { background: var(--color-navy-100); }
.bid-page .filter-reset { border-radius: 4px; background: var(--wh-sheet); border-color: var(--wh-rule); color: var(--wh-ink-2); }