/* 워크덴 공통 스타일. 색·글꼴·간격은 이 변수만 사용한다.
   브랜드: 블랙 / 화이트 / 옐로(포인트). 컬러칩이 확정되면 값만 교체한다.
   2026-10-21 피그마 '최종 시안' 값으로 교체. 검정만 #111111 유지(시안은 #14141a) */
:root {
  --wd-black: #111111;
  --wd-white: #ffffff;
  --wd-yellow: #ffe45f;
  --wd-yellow-soft: #fff6cc;

  --wd-bg: var(--wd-white);
  --wd-soft: #f4f4f5;
  --wd-surface: var(--wd-white);
  --wd-text: var(--wd-black);
  --wd-muted: #6b6b73;
  --wd-line: #e5e5e8;
  --wd-line-strong: #d4d4d9;  /* 체크박스 테두리 (지원서 공개 동의) */
  --wd-zebra: #fafafa;       /* 표 줄무늬 (공개 동의 팝업) */

  --wd-ok: #2f6b3a;
  --wd-ok-soft: #e5f2e7;
  --wd-warn: #9a5b00;
  --wd-warn-soft: #fdf0dc;
  --wd-danger: #e5484d; /* 10/22 피그마 빨간색으로 교체 (전: #b42318) */
  --wd-danger-soft: #fde7e4;

  --wd-font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --wd-radius: 10px;
  --wd-space-1: 4px;
  --wd-space-2: 8px;
  --wd-space-3: 12px;
  --wd-space-4: 16px;
  --wd-space-5: 20px;
  --wd-space-6: 24px;
  --wd-space-7: 28px;
  --wd-space-8: 32px;
  --wd-space-10: 40px;
  --wd-space-12: 48px;
  --wd-space-25: 100px;

  --wd-radius-lg: 16px;
  --wd-radius-pill: 999px;
  --wd-content-max: 1240px; /* 시안 1440px 화면에서 좌우 100px 을 뺀 본문 폭 */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--wd-bg);
  color: var(--wd-text);
  font-family: var(--wd-font);
  font-size: 15px;
  line-height: 1.6;
}
.page { max-width: 720px; margin-inline: auto; padding: var(--wd-space-6) var(--wd-space-4) 64px; }
h1 { font-size: 24px; margin: 0 0 var(--wd-space-2); }
h2 { font-size: 18px; margin: 0 0 var(--wd-space-2); }
p { margin: var(--wd-space-2) 0; }

.card { background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius); padding: var(--wd-space-6); }
.stack { display: grid; gap: var(--wd-space-4); }

.field { display: grid; gap: var(--wd-space-1); }
.field label { font-weight: 600; font-size: 14px; }
.field input[type="text"], .field input[type="url"], .field input[type="file"] {
  font: inherit; padding: 10px 12px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-white); width: 100%;
}
.hint { color: var(--wd-muted); font-size: 13px; margin: 0; }
.required::after { content: " *"; color: var(--wd-danger); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wd-space-2); font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--wd-black); background: var(--wd-black); color: var(--wd-white); cursor: pointer; text-decoration: none; }
.btn-secondary { background: var(--wd-white); color: var(--wd-black); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--wd-yellow-soft); color: var(--wd-black); }
.badge-ok { background: var(--wd-ok-soft); color: var(--wd-ok); }
.badge-warn { background: var(--wd-warn-soft); color: var(--wd-warn); }
.badge-danger { background: var(--wd-danger-soft); color: var(--wd-danger); }

.notice { border-left: 3px solid var(--wd-yellow); background: var(--wd-surface); padding: var(--wd-space-3) var(--wd-space-4); border-radius: 0 8px 8px 0; }
.notice-danger { border-left-color: var(--wd-danger); }

/* ── 넓은 본문 폭: 1440 화면에서 좌우 100px, 좁은 화면에서 16px ── */
.container { width: 100%; max-width: calc(var(--wd-content-max) + var(--wd-space-4) * 2); margin-inline: auto; padding-inline: var(--wd-space-4); }

/* ── COM-001 상단 메뉴바 (로그인 전) ── */
.btn-accent { display: inline-flex; align-items: center; gap: var(--wd-space-1); font: inherit; font-size: 15px; font-weight: 700; line-height: normal; padding: 11px var(--wd-space-5); border: 0; border-radius: var(--wd-radius-pill); background: var(--wd-yellow); color: var(--wd-black); cursor: pointer; text-decoration: none; white-space: nowrap; }

.site-header { background: var(--wd-black); color: var(--wd-white); line-height: normal; position: relative; z-index: 10; }
.site-header a { color: inherit; text-decoration: none; }
.site-header .btn-accent { color: var(--wd-black); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-6); min-height: 84px; }
.site-header-left { display: flex; align-items: center; gap: var(--wd-space-10); align-self: stretch; }
.site-logo { display: block; line-height: 0; }
.site-logo img { width: 120px; height: auto; }
.site-nav { display: flex; gap: var(--wd-space-7); align-self: stretch; font-size: 15px; font-weight: 500; white-space: nowrap; }
.site-nav a { position: relative; display: flex; align-items: center; }
/* 지금 보고 있는 메뉴: 글자 아래 노란 밑줄 3px (메인은 표시 없음) */
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--wd-yellow); }
.site-header-right { display: flex; align-items: center; gap: var(--wd-space-5); font-size: 15px; font-weight: 500; white-space: nowrap; position: relative; }

@media (max-width: 767px) {
  /* 모바일 시안 없음: 메뉴를 로고 아래 한 줄로 내리고, 넘치면 옆으로 밀어서 본다 */
  .site-header-inner { flex-wrap: wrap; min-height: 0; padding-top: var(--wd-space-3); row-gap: var(--wd-space-1); }
  .site-header-left { display: contents; }
  .site-header .site-logo { order: 1; }
  .site-header-right { order: 2; gap: var(--wd-space-3); font-size: 14px; }
  .site-header-right .btn-accent { font-size: 14px; padding: var(--wd-space-2) var(--wd-space-4); }
  .site-nav { order: 3; width: 100%; overflow-x: auto; gap: var(--wd-space-6); }
  .site-nav a { padding-block: var(--wd-space-3); }
}

/* ── COM-002 상단 메뉴바 (로그인 후): 알림 종 + 마이페이지 ── */
.btn-light { display: inline-flex; align-items: center; font: inherit; font-size: 15px; font-weight: 700; line-height: normal; padding: 10px 18px; border: 0; border-radius: var(--wd-radius-pill); background: var(--wd-white); color: var(--wd-black); cursor: pointer; text-decoration: none; white-space: nowrap; }
.site-header .btn-light { color: var(--wd-black); }

.notif > summary { list-style: none; cursor: pointer; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--wd-radius-pill); }
.notif > summary::-webkit-details-marker { display: none; }
.notif > summary img { width: 24px; height: 24px; }
/* 새 알림이 있을 때만 노란 점 */
.notif-badge { position: absolute; top: 8px; left: 24px; width: 8px; height: 8px; border-radius: var(--wd-radius-pill); background: var(--wd-yellow); }

/* 알림 창: 종을 누르면 메뉴바 오른쪽 아래에 열림 */
.notif-panel { position: absolute; right: 0; top: calc(100% + var(--wd-space-2)); width: 380px; max-width: calc(100vw - var(--wd-space-8)); overflow: hidden; background: var(--wd-surface); color: var(--wd-text); border: 1px solid var(--wd-line); border-radius: var(--wd-radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .12); line-height: 1.45; white-space: normal; text-align: left; }
.notif-panel a { color: inherit; text-decoration: none; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--wd-space-5); border-bottom: 1px solid var(--wd-line); }
.notif-head b { font-size: 16px; }
.notif-head a { font-size: 13px; font-weight: 500; color: var(--wd-muted); }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: min(520px, calc(100vh - 180px)); overflow-y: auto; }
.notif-item { display: flex; gap: var(--wd-space-3); padding: var(--wd-space-4) var(--wd-space-5); }
.notif-item:hover { background: var(--wd-soft); }
.notif-item::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: var(--wd-radius-pill); background: transparent; }
.notif-item.is-unread::before { background: var(--wd-yellow); }
.notif-text { display: grid; gap: var(--wd-space-1); }
.notif-item:not(.is-unread) .notif-text { opacity: .55; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--wd-black); }
.notif-body { font-size: 13px; color: var(--wd-muted); }
.notif-time { font-size: 12px; color: var(--wd-muted); opacity: .8; }
.notif-empty { display: grid; justify-items: center; gap: 14px; padding: var(--wd-space-12) var(--wd-space-5) 52px; font-size: 15px; font-weight: 500; color: var(--wd-muted); }
.notif-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--wd-radius-pill); background: var(--wd-soft); }

@media (max-width: 767px) {
  .site-header-right .btn-light { font-size: 14px; padding: var(--wd-space-2) var(--wd-space-4); }
}

/* ── COM-003 푸터 ── */
.site-footer { background: var(--wd-soft); padding-block: var(--wd-space-12); line-height: normal; }
.site-footer-inner { display: grid; gap: var(--wd-space-6); justify-items: start; }
.site-footer a { color: inherit; text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--wd-space-2) var(--wd-space-6); font-size: 14px; line-height: 22px; color: var(--wd-muted); }
.footer-links strong { font-weight: 700; }
.footer-biz { display: grid; gap: var(--wd-space-4); font-size: 12px; line-height: 20px; color: var(--wd-muted); }
.footer-biz-lines { display: grid; gap: 2px; }
.footer-biz-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.footer-biz-row .sep { opacity: .4; }
.site-footer .footer-biz-check { color: var(--wd-black); font-weight: 500; text-decoration: underline; }
.footer-copy { margin: 0; }

@media (max-width: 767px) {
  /* 모바일 시안 없음: 사업자 정보를 한 줄에 하나씩 */
  .site-footer { padding-block: var(--wd-space-8); }
  .footer-biz-row { flex-direction: column; align-items: flex-start; }
  .footer-biz-row .sep { display: none; }
}

/* ── MAIN 메인 화면 구성 요소 (일감·함께한 일·모임 목록에서도 다시 쓸 수 있게 공통으로 둠) ── */
.section { padding-top: 120px; }
.section:first-child { padding-top: 88px; }
.section-inner { display: grid; gap: var(--wd-space-7); }
.section-inner.is-tight { gap: var(--wd-space-6); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.section-title { margin: 0; font-size: 34px; font-weight: 700; line-height: normal; letter-spacing: -0.68px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; line-height: normal; color: var(--wd-black); text-decoration: none; white-space: nowrap; }
.more-link img, .btn-accent img { width: 16px; height: 16px; }

/* 작은 표시: 새 일감·마감 임박(노랑), 스킬 태그(연회색), 공동 */
.pill { display: inline-flex; align-items: center; padding: 3px var(--wd-space-2); border-radius: 4px; background: var(--wd-yellow); color: var(--wd-black); font-size: 11px; font-weight: 700; line-height: normal; white-space: nowrap; }
.pill-tag { padding: 5px 10px; background: var(--wd-soft); font-size: 12px; font-weight: 500; }
.pill-round { padding: 2px 7px; border-radius: var(--wd-radius-pill); font-size: 10px; }

/* MAIN-001·003 새로 올라온 일감: 일감 표 + 오른쪽 카드 */
.jobs-row { display: flex; gap: var(--wd-space-6); align-items: stretch; }
.job-table { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: 12px; overflow: hidden; }
.job-row { display: flex; align-items: center; gap: var(--wd-space-4); padding: var(--wd-space-6); border-bottom: 1px solid var(--wd-line); line-height: normal; }
.job-row:last-child { border-bottom: 0; }
.job-main { flex: 1; min-width: 0; display: grid; gap: 10px; }
.job-title { display: flex; align-items: center; gap: var(--wd-space-2); font-size: 18px; font-weight: 700; color: var(--wd-black); text-decoration: none; }
.job-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.job-company { width: 130px; flex: none; font-size: 14px; font-weight: 500; }
.job-budget { width: 96px; flex: none; font-size: 17px; font-weight: 900; }
.job-meta { width: 104px; flex: none; font-size: 14px; color: var(--wd-muted); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 100px; padding: 11px var(--wd-space-4); border: 1px solid var(--wd-black); border-radius: 8px; background: var(--wd-white); color: var(--wd-black); font: inherit; font-size: 14px; font-weight: 700; line-height: normal; text-decoration: none; cursor: pointer; }

.cta-card { position: relative; overflow: hidden; flex: none; width: 360px; min-height: 417px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--wd-space-4); padding: 36px var(--wd-space-8); border-radius: var(--wd-space-6); background: var(--wd-black) url(assets/glow-card.svg) no-repeat 40px 260px / 420px 420px; color: var(--wd-white); line-height: normal; }
.cta-eyebrow { margin: 0; font-size: 14px; font-weight: 700; color: var(--wd-yellow); }
.cta-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; }
.cta-card .btn-accent { margin-top: auto; gap: var(--wd-space-2); padding: var(--wd-space-4) 22px; font-size: 16px; }

/* MAIN-002 워크덴에서 함께한 일: 카드 6개 (3칸) */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wd-space-7) var(--wd-space-6); list-style: none; margin: 0; padding: 0; }
.project-card { display: grid; gap: 14px; color: var(--wd-black); text-decoration: none; line-height: normal; }
.project-cover { display: block; height: 280px; border-radius: var(--wd-space-5); background: var(--wd-soft) center / cover no-repeat; }
.project-title { font-size: 18px; font-weight: 700; }
.project-people { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--wd-muted); }
.avatars { display: flex; }
.avatar { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -8px; border: 2px solid var(--wd-white); border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-yellow); font-size: 11px; font-weight: 900; }
.avatar:nth-child(even) { background: var(--wd-yellow); color: var(--wd-black); }
.avatar:last-child { margin-right: 0; }

/* MAIN-004 이번 주 모임: 유형 탭 + 카드 4개 */
.chip-tabs { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); }
.chip { padding: 10px 18px; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-pill); background: var(--wd-white); color: var(--wd-black); font: inherit; font-size: 14px; line-height: normal; cursor: pointer; }
.chip[aria-selected="true"] { border-color: var(--wd-black); background: var(--wd-black); color: var(--wd-yellow); font-weight: 700; }
.meetup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wd-space-6); list-style: none; margin: 0; padding: 0; }
.meetup-card { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--wd-line); border-radius: var(--wd-space-6); background: var(--wd-white); box-shadow: 0 10px 30px rgba(20, 20, 26, .05); line-height: normal; }
.meetup-cover { position: relative; display: grid; place-items: center; height: 180px; background: var(--wd-soft) center / cover no-repeat; }
.meetup-cover > img { width: 36px; height: 36px; }
.meetup-badge { position: absolute; top: var(--wd-space-4); left: var(--wd-space-4); padding: 5px 10px; border-radius: var(--wd-radius-pill); background: var(--wd-yellow); color: var(--wd-black); font-size: 11px; font-weight: 900; line-height: 13px; }
.meetup-badge.is-today { background: var(--wd-black); color: var(--wd-yellow); }
.meetup-host-photo { position: absolute; top: 151px; left: 19px; display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid var(--wd-white); border-radius: var(--wd-radius-pill); background: var(--wd-soft); }
.meetup-host-photo img { width: 35px; height: 35px; }
.meetup-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--wd-space-10) var(--wd-space-5) var(--wd-space-5); }
.meetup-host { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.meetup-host small { font-size: 12px; font-weight: 700; color: var(--wd-muted); }
.meetup-type { padding: var(--wd-space-1) 10px; border: 1px solid var(--wd-yellow); border-radius: var(--wd-radius-pill); background: var(--wd-yellow); font-size: 11px; font-weight: 700; line-height: 13px; }
.meetup-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.17px; }
.meetup-info { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.meetup-info img { width: 14px; height: 14px; }
.btn-apply { display: flex; justify-content: center; width: 100%; margin-top: auto; padding: var(--wd-space-3) var(--wd-space-4); border: 0; border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-yellow); font: inherit; font-size: 14px; font-weight: 700; line-height: 17px; text-decoration: none; cursor: pointer; }
/* 모집 마감 */
.meetup-card.is-closed .meetup-cover { background: var(--wd-black); }
.meetup-closed { padding: 6px 14px; border: 1.5px solid var(--wd-white); border-radius: var(--wd-radius-pill); color: var(--wd-white); font-size: 14px; font-weight: 700; }
.meetup-card.is-closed .meetup-host, .meetup-card.is-closed .meetup-title { color: var(--wd-muted); }
.meetup-card.is-closed .meetup-type { border-color: transparent; background: var(--wd-soft); color: var(--wd-muted); }
.meetup-card.is-closed .meetup-info img { opacity: .6; }
.meetup-card.is-closed .btn-apply { background: var(--wd-soft); color: var(--wd-muted); cursor: default; }

/* MAIN-005 하단 소개 띠 */
.band-section { padding-block: 120px; }
.band { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--wd-space-10); padding: 80px 64px; border-radius: var(--wd-space-10); background: url(assets/glow-band-top.svg) no-repeat -160px -200px / 500px 500px, url(assets/glow-band-bottom.svg) no-repeat 120px 220px / 1000px 600px, var(--wd-black); line-height: normal; }
.band-title { margin: 0; font-size: 52px; font-weight: 900; line-height: 1.25; letter-spacing: -1.56px; text-align: center; background: linear-gradient(to bottom, var(--wd-white), var(--wd-white) 50%, var(--wd-yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wd-space-4); width: 100%; list-style: none; margin: 0; padding: 0; }
.band-stat { display: grid; justify-items: center; gap: 6px; padding: var(--wd-space-6); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--wd-space-5); background: rgba(255, 255, 255, .06); }
.band-stat b { font-size: 36px; font-weight: 900; letter-spacing: -0.72px; color: var(--wd-yellow); }
.band-stat span { font-size: 14px; color: var(--wd-white); }
.band .btn-accent { gap: var(--wd-space-2); padding: 18px 34px; font-size: 17px; }

@media (max-width: 1023px) {
  .jobs-row { flex-direction: column; }
  .cta-card { width: 100%; min-height: 0; }
  .cta-card .btn-accent { margin-top: var(--wd-space-6); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .meetup-grid { grid-template-columns: repeat(2, 1fr); }
  .band-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .section { padding-top: 64px; }
  .section:first-child { padding-top: var(--wd-space-10); }
  .section-title { font-size: 24px; }
  .job-row { flex-wrap: wrap; gap: var(--wd-space-2) var(--wd-space-3); padding: var(--wd-space-5); }
  .job-main { flex-basis: 100%; }
  .job-title { flex-wrap: wrap; font-size: 16px; }
  .job-company, .job-budget, .job-meta { width: auto; }
  .job-row .btn-outline { margin-left: auto; }
  .project-grid, .meetup-grid { grid-template-columns: 1fr; }
  .project-cover { height: 200px; }
  .band-section { padding-block: 64px; }
  .band { padding: 48px var(--wd-space-5); border-radius: var(--wd-space-6); gap: var(--wd-space-6); }
  .band-title { font-size: 30px; letter-spacing: -0.9px; }
  .band-stat { padding: var(--wd-space-4) var(--wd-space-2); }
  .band-stat b { font-size: 24px; }
  .band-stat span { font-size: 12px; }
}

/* ── PRJ 일감 목록 (필터 PRJ-001 · 일감 카드 PRJ-002) ── */
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-6); padding: 56px 0 var(--wd-space-8); }
.page-title { margin: 0; font-size: 44px; font-weight: 700; line-height: normal; letter-spacing: -1.1px; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 57px; width: 560px; max-width: 100%; padding: 6px 6px 6px 22px; border: 1.5px solid var(--wd-black); border-radius: var(--wd-radius-pill); background: var(--wd-white); }
.search-box img { width: 20px; height: 20px; flex: none; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; line-height: normal; color: var(--wd-black); }
.search-box input::placeholder { color: var(--wd-muted); }
.btn-dark { display: inline-flex; align-items: center; justify-content: center; padding: var(--wd-space-3) var(--wd-space-6); border: 0; border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-white); font: inherit; font-size: 15px; font-weight: 700; line-height: 18px; text-decoration: none; white-space: nowrap; cursor: pointer; }

.wide-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-6); margin-bottom: var(--wd-space-8); padding: var(--wd-space-8) var(--wd-space-10); border-radius: var(--wd-space-6); background: var(--wd-black) url(assets/glow-banner.svg) no-repeat 560px -120px / 700px 420px; color: var(--wd-white); line-height: normal; }
.wide-banner-text { display: grid; gap: var(--wd-space-2); }
.wide-banner-eyebrow { margin: 0; font-size: 14px; font-weight: 700; line-height: 17px; color: var(--wd-yellow); }
.wide-banner-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 31px; }
.wide-banner .btn-accent { gap: var(--wd-space-2); padding: var(--wd-space-4) var(--wd-space-6); font-size: 16px; }

.list-layout { display: flex; align-items: flex-start; gap: 56px; padding: var(--wd-space-10) 0 120px; }
.filters { flex: none; width: 220px; line-height: normal; }
.filter-group { display: grid; justify-items: start; gap: var(--wd-space-3); margin: 0; padding: var(--wd-space-5) 0 var(--wd-space-6); border: 0; border-top: 1px solid var(--wd-line); }
.filter-group legend { float: left; padding: 0; font-size: 14px; font-weight: 700; line-height: 17px; }
.filter-group legend + * { clear: left; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 17px; color: var(--wd-muted); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--wd-muted); border-radius: 0; background: var(--wd-white); cursor: pointer; }
.check input:checked { border-color: var(--wd-black); background: var(--wd-black) url(assets/icon-check.svg) no-repeat center / 11px 11px; }
.check:has(input:checked) { font-weight: 500; color: var(--wd-black); }
.filter-reset { display: block; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 16px; color: var(--wd-muted); text-decoration: underline; cursor: pointer; }

.job-list { flex: 1; min-width: 0; display: grid; gap: var(--wd-space-4); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); line-height: normal; }
.list-count { margin: 0; display: flex; gap: 6px; font-size: 16px; font-weight: 700; line-height: 19px; }
.list-count span { color: var(--wd-muted); }
.list-count.is-empty span { font-weight: 500; }
.sort-select { appearance: none; -webkit-appearance: none; padding: 9px 38px 9px 18px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-white) url(assets/icon-chevron-down.svg) no-repeat right 14px center / 16px 16px; font: inherit; font-size: 14px; font-weight: 500; line-height: 17px; color: var(--wd-black); cursor: pointer; }

.job-board { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wd-black); }
.board-row { display: flex; align-items: center; gap: var(--wd-space-6); padding: var(--wd-space-6) 0; border-bottom: 1px solid var(--wd-line); line-height: normal; }
.board-main { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 10px; }
.board-title { display: flex; align-items: center; gap: var(--wd-space-2); font-size: 18px; font-weight: 700; line-height: 21px; letter-spacing: -0.18px; color: var(--wd-black); text-decoration: none; }
.board-title .pill { padding: 3px 9px; border-radius: var(--wd-radius-pill); line-height: 13px; }
.board-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.board-tags .pill-tag { padding: var(--wd-space-1) 10px; border-radius: var(--wd-radius-pill); font-size: 11px; line-height: 13px; }
.board-meta { margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.board-meta.is-urgent { font-weight: 700; color: var(--wd-black); }
.board-side { flex: none; display: flex; align-items: center; gap: var(--wd-space-4); width: 220px; }
.board-company { width: 110px; flex: none; font-size: 14px; font-weight: 500; }
.board-budget { font-size: 18px; font-weight: 900; letter-spacing: -0.18px; white-space: nowrap; }
.btn-pill { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 10px 18px; border: 0; border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-white); font: inherit; font-size: 14px; font-weight: 700; line-height: normal; text-decoration: none; white-space: nowrap; cursor: pointer; }
/* 모집 마감: 사업자가 마감일 전에 모집을 끝냄 → 마감일까지 흐리게 */
.board-row.is-closed .board-title > span:first-child, .board-row.is-closed .board-tags, .board-row.is-closed .board-side { opacity: .45; }
.pill-closed { padding: 3px 9px; border: 1px solid var(--wd-muted); border-radius: var(--wd-radius-pill); background: none; color: var(--wd-muted); }
.board-row.is-closed .btn-pill { background: var(--wd-soft); color: var(--wd-muted); cursor: default; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--wd-space-6); padding-top: var(--wd-space-6); line-height: normal; }
.pager a { padding-bottom: var(--wd-space-1); border-bottom: 2px solid transparent; font-size: 15px; color: var(--wd-muted); text-decoration: none; }
.pager a[aria-current="page"] { border-bottom-color: var(--wd-black); font-weight: 700; color: var(--wd-black); }
.pager .pager-arrow { padding: 0; border: 0; line-height: 0; }
.pager .pager-arrow img { width: 18px; height: 18px; }

.list-empty { display: grid; place-items: center; height: 520px; border: 1px solid var(--wd-line); border-radius: 12px; font-size: 15px; line-height: 1.6; color: var(--wd-muted); text-align: center; }
.list-empty p { margin: 0; }

@media (max-width: 1023px) {
  .page-intro { flex-direction: column; align-items: stretch; }
  .search-box { width: 100%; }
  .list-layout { flex-direction: column; gap: var(--wd-space-6); }
  .filters { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--wd-space-6); align-items: start; }
  .filter-group { align-content: start; }
  .filters .filter-reset { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) {
  .page-intro { padding-top: var(--wd-space-8); }
  .page-title { font-size: 32px; }
  .wide-banner { flex-direction: column; align-items: flex-start; padding: var(--wd-space-6); background-position: 0 -40px; }
  .wide-banner-title { font-size: 20px; }
  .list-layout { padding-bottom: 64px; }
  .board-row { flex-wrap: wrap; gap: var(--wd-space-3); }
  .board-main { flex-basis: 100%; }
  .board-title { flex-wrap: wrap; font-size: 16px; }
  .board-side { width: auto; flex: 1; }
  .board-company { width: auto; }
  .pager { gap: var(--wd-space-4); }
}

/* ── PRJ-008 일감 등록 (입력 양식 · 요약 카드 · 빈칸 오류 · 등록 완료 팝업) ── */
.page-head { display: grid; justify-items: start; gap: var(--wd-space-3); padding: var(--wd-space-10) 0 var(--wd-space-8); line-height: normal; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--wd-muted); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb img { width: 14px; height: 14px; }
.page-head .page-title { font-size: 40px; letter-spacing: -1px; }

.form-layout { display: flex; align-items: flex-start; gap: 56px; padding-bottom: 120px; }
.form-layout.is-review { padding-top: var(--wd-space-6); }
.post-form { flex: 1; min-width: 0; border-top: 2px solid var(--wd-black); line-height: normal; }
.form-block { display: grid; gap: var(--wd-space-7); padding: var(--wd-space-7) 0 var(--wd-space-10); border-bottom: 1px solid var(--wd-line); }
.form-block:last-of-type { border-bottom: 0; }
.form-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.form-block-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 26px; letter-spacing: -0.22px; }
.required-note { margin: 0; display: flex; gap: 3px; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.required-note b { font-weight: 700; }
.form-row { display: flex; align-items: flex-start; gap: var(--wd-space-4); }
.form-row > .form-field { flex: 1; min-width: 0; }
.form-field { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-label { display: flex; gap: var(--wd-space-1); padding: 0; font-size: 15px; font-weight: 700; line-height: 18px; }
fieldset.form-field > legend { float: left; width: 100%; }
fieldset.form-field > legend + * { clear: left; }
.form-label.is-required::after { content: "*"; color: var(--wd-muted); }

/* 입력칸 */
.input { width: 100%; padding: 14px var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); font: inherit; font-size: 15px; line-height: 18px; color: var(--wd-black); outline: 0; }
.input::placeholder { color: var(--wd-muted); }
.input:focus { border-color: var(--wd-black); }
/* 브라우저 자동 채우기(크롬 하늘색 바탕)가 칸 색을 덮지 않게 */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--wd-white) inset; -webkit-text-fill-color: var(--wd-black); caret-color: var(--wd-black); transition: background-color 9999s; }
input.input, select.input { height: 48px; }
textarea.input { height: 112px; resize: vertical; font-size: 14px; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--wd-white) url(assets/icon-chevron-down-18.svg) no-repeat right var(--wd-space-4) center / 18px 18px; cursor: pointer; }
select.input:invalid { color: var(--wd-muted); }
.input-date { padding-right: 44px; background: var(--wd-white) url(assets/icon-calendar.svg) no-repeat right var(--wd-space-4) center / 18px 18px; }
.input-date { cursor: pointer; }
.input-unit { position: relative; display: block; }
.input-unit .input { padding-right: 56px; }
.input-unit > span { position: absolute; right: var(--wd-space-4); top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--wd-muted); pointer-events: none; }
.input-pair { display: flex; gap: var(--wd-space-2); }
.input-pair .input:first-child { flex: 1; min-width: 0; }
.input-pair select.input { width: 110px; flex: none; }
.location-pair { display: flex; gap: var(--wd-space-3); }
.location-pair select.input { width: 220px; flex: none; }

/* 직군 칩 · 근무 형태: 골라도 글자 폭이 그대로라 옆 칩이 움직이지 않음
   (굵은 글자 폭만큼 미리 자리를 잡아 둠: ::after 에 같은 글자를 굵게 넣고 숨김) */
.chip-radios { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); }
.chip-radio, .segment label { position: relative; }
.chip-radio input, .segment input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span, .segment span { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; }
.chip-radio span::after, .segment span::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; }
.chip-radio span { padding: 9px var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: var(--wd-radius-pill); background: var(--wd-white); font-size: 14px; line-height: 17px; }
.chip-radio input:checked + span { border-color: var(--wd-black); background: var(--wd-black); color: var(--wd-yellow); font-weight: 700; }
.chip-radio input:focus-visible + span, .segment input:focus-visible + span { outline: 2px solid var(--wd-yellow); outline-offset: 2px; }

/* 스킬: 입력하고 Enter → 태그 */
.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px var(--wd-space-3); border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); }
.tag-input:focus-within { border-color: var(--wd-black); }
.tag { display: inline-flex; align-items: center; gap: var(--wd-space-1); padding: 6px var(--wd-space-2) 6px var(--wd-space-3); border-radius: var(--wd-radius-pill); background: var(--wd-soft); font-size: 13px; font-weight: 500; line-height: 16px; }
.tag button { display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.tag button img { width: 14px; height: 14px; }
.tag-input input { flex: 1; min-width: 160px; padding: 1px 0; border: 0; outline: 0; font: inherit; font-size: 14px; line-height: 17px; }
.tag-input:has(.tag) input { padding: 5px 0; }
.tag-input input::placeholder { color: var(--wd-muted); }

/* 근무 형태: 원격 / 상주 */
.segment { display: inline-flex; gap: var(--wd-space-1); padding: var(--wd-space-1); border-radius: var(--wd-radius-pill); background: var(--wd-soft); }
.segment span { padding: 10px var(--wd-space-7); border-radius: var(--wd-radius-pill); font-size: 14px; font-weight: 500; line-height: 17px; color: var(--wd-muted); }
.segment input:checked + span { background: var(--wd-black); color: var(--wd-yellow); font-weight: 700; }
/* 원격을 고르면 근무 위치를 숨김 */
.post-form:has(input[name="workType"][value="원격"]:checked) .field-location { display: none; }

/* 필수 항목 빈칸: 빨간 테두리 + 안내 문구 */
.field-error { display: none; margin: 0; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--wd-danger); }
.form-field.is-error .field-error, .form-row .is-error .field-error { display: block; }
.form-field.is-error > .input, .form-field.is-error .input-unit .input, .form-field.is-error .input-pair .input:first-child,
.form-field.is-error .location-pair select.input, .form-field.is-error .tag-input { border: 1.5px solid var(--wd-danger); }
.form-field.is-error input.input, .form-field.is-error .location-pair select.input { height: 49px; }
.form-field.is-error .input-pair select.input { height: 49px; }

/* 화면 아래 안내 (토스트) */
.toast { position: fixed; left: 50%; bottom: var(--wd-space-12); z-index: 30; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px; border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 15px; font-weight: 500; line-height: 18px; white-space: nowrap; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast img { width: 20px; height: 20px; }
.toast.is-static { position: static; transform: none; opacity: 1; }

/* 파일 첨부 · 안내 */
.upload-box { position: relative; display: grid; justify-items: center; gap: var(--wd-space-2); padding: var(--wd-space-7) var(--wd-space-4); border-radius: 12px; background: var(--wd-soft); text-align: center; cursor: pointer; }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-box img { width: 22px; height: 22px; }
.upload-box b { font-size: 14px; font-weight: 500; line-height: 17px; }
.upload-box small { font-size: 12px; line-height: 14px; color: var(--wd-muted); }
.upload-box.is-dragover { outline: 1.5px dashed var(--wd-black); outline-offset: -1.5px; }
.upload-box.is-full { opacity: .45; cursor: default; }
.upload-box.is-full input { cursor: default; }
/* 올린 파일 목록 · 한 줄에 종류 아이콘 · 이름 · 크기 · × */
.upload-list { display: grid; gap: var(--wd-space-2); list-style: none; margin: 0; padding: 0; }
.upload-list:empty { display: none; }
.upload-list li { display: flex; align-items: center; gap: var(--wd-space-3); padding: 14px var(--wd-space-4) 14px 18px; border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-bg); }
.upload-list li > img { flex: none; width: 20px; height: 20px; }
.upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; line-height: 18px; }
.upload-size { flex: none; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.upload-list button { display: grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.upload-list button img { width: 18px; height: 18px; }
.policy-notice { display: flex; align-items: center; gap: 10px; padding: var(--wd-space-4) 18px; border: 1px solid var(--wd-line); border-radius: 12px; font-size: 13px; line-height: 18px; color: var(--wd-muted); }
.policy-notice img { width: 18px; height: 18px; flex: none; }
.policy-notice p { margin: 0; }

/* 오른쪽: 등록 요약 (스크롤해도 따라옴) */
.post-aside { position: sticky; top: var(--wd-space-6); flex: none; width: 380px; line-height: normal; }
.summary-card { display: grid; gap: var(--wd-space-5); padding: var(--wd-space-7); border: 1px solid var(--wd-line); border-radius: var(--wd-space-6); background: var(--wd-white); box-shadow: 0 12px 32px rgba(20, 20, 26, .06); }
.summary-eyebrow { margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.summary-budget { display: grid; gap: var(--wd-space-1); }
.summary-budget span { font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.summary-budget b { font-size: 32px; font-weight: 900; line-height: 38px; letter-spacing: -0.64px; }
.summary-info { display: grid; gap: var(--wd-space-3); margin: 0; padding-top: var(--wd-space-5); border-top: 1px solid var(--wd-line); font-size: 14px; line-height: 17px; }
.summary-info div { display: flex; justify-content: space-between; gap: var(--wd-space-3); }
.summary-info dt { color: var(--wd-muted); }
.summary-info dd { margin: 0; font-weight: 700; text-align: right; }
.summary-fee { display: flex; align-items: center; justify-content: space-between; padding-top: var(--wd-space-4); border-top: 1px solid var(--wd-line); }
.summary-fee span { font-size: 14px; font-weight: 700; }
.summary-fee b { font-size: 18px; font-weight: 900; line-height: 21px; }
.summary-note { margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.btn-block { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--wd-space-4) var(--wd-space-5); border: 0; border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-yellow); font: inherit; font-size: 16px; font-weight: 700; line-height: 19px; text-decoration: none; cursor: pointer; }
.btn-block.is-secondary { border: 1px solid var(--wd-line); background: var(--wd-white); color: var(--wd-black); }
.btn-block:disabled { opacity: .45; cursor: not-allowed; }

/* 팝업 (등록 완료 · 결제창 자리) */
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--wd-space-4); background: rgba(17, 17, 17, .55); }
.modal-backdrop[hidden] { display: none; }
/* 검토용: 피그마 프레임처럼 1440×900 화면 한 장 안에 팝업·토스트를 보여 줌 */
.screen-frame { position: relative; height: 900px; overflow: hidden; }
.screen-frame > .modal-backdrop { position: absolute; }
.screen-frame > .toast { position: absolute; opacity: 1; transform: translate(-50%, 0); }
.modal { display: grid; justify-items: center; gap: var(--wd-space-6); width: min(480px, 100%); padding: var(--wd-space-10) var(--wd-space-10) var(--wd-space-8); border-radius: 28px; background: var(--wd-white); box-shadow: 0 24px 60px rgba(20, 20, 26, .2); text-align: center; line-height: normal; }
.modal h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 29px; }
.modal p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--wd-muted); }
.modal-actions { display: grid; gap: var(--wd-space-2); width: 100%; padding-top: var(--wd-space-2); }
.stepper { display: flex; align-items: flex-start; justify-content: center; list-style: none; margin: 0; padding: 0; }
.stepper li { display: grid; justify-items: center; gap: var(--wd-space-2); width: 96px; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--wd-muted); }
.stepper .step-line { width: 40px; height: 2px; margin-top: 15px; background: var(--wd-line); }
.stepper .step-line.is-done { background: var(--wd-black); }
.step-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--wd-radius-pill); background: var(--wd-soft); font-weight: 700; color: var(--wd-muted); }
.step-dot img { width: 16px; height: 16px; }
.stepper .is-done { color: var(--wd-black); }
.stepper .is-done .step-dot { background: var(--wd-black); }
.stepper .is-current { font-weight: 700; color: var(--wd-black); }
.stepper .is-current .step-dot { border: 2px solid var(--wd-black); background: var(--wd-yellow); color: var(--wd-black); }
.pg-placeholder { display: grid; place-items: center; width: 100%; height: 160px; border: 1.5px dashed var(--wd-line); border-radius: 12px; font-size: 14px; color: var(--wd-muted); }

/* 드롭다운 목록 · 달력 (펼친 모습) */
.dropdown-list { display: grid; gap: 2px; padding: 6px; border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); list-style: none; margin: 0; line-height: normal; }
.dropdown-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--wd-space-3); border-radius: 8px; font-size: 15px; }
.dropdown-list li[aria-selected="true"] { background: var(--wd-soft); font-weight: 700; }
.dropdown-list img { width: 16px; height: 16px; }
.dropdown-list.is-region { width: 202px; }
.dropdown-list.is-unit { width: 110px; }
.datepicker { display: grid; gap: var(--wd-space-2); width: max-content; padding: var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); line-height: normal; }
.datepicker-month { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; font-size: 16px; font-weight: 700; }
.datepicker-month img { width: 20px; height: 20px; }
.datepicker-month button { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.datepicker-month button:disabled { cursor: default; }
.datepicker-month .is-flip { transform: scaleX(-1); }
/* 날짜 칸을 누르면 칸 바로 아래에 뜨는 달력 */
.form-field { position: relative; }
.datepicker.is-popup { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; }
.datepicker-grid { display: grid; grid-template-columns: repeat(7, 48px); }
.datepicker-grid span, .datepicker-grid button { display: grid; place-items: center; height: 40px; padding: 0; border: 1px solid transparent; border-radius: var(--wd-space-5); background: none; font: inherit; font-size: 14px; color: var(--wd-black); }
.datepicker-grid button { cursor: pointer; }
.datepicker-grid button:not(:disabled):not(.is-selected):hover { background: var(--wd-soft); }
.datepicker-grid button:disabled { cursor: default; }
.datepicker-grid .is-week { font-size: 13px; font-weight: 500; color: var(--wd-muted); }
.datepicker-grid .is-past { color: rgba(107, 107, 115, .35); }
.datepicker-grid .is-today { border-color: var(--wd-black); font-weight: 700; }
.datepicker-grid .is-selected { background: var(--wd-black); color: var(--wd-yellow); font-weight: 700; }
.state-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--wd-space-10); align-items: start; }
.state-files h3 { margin: 0; font-size: 18px; }
.state-files .hint { margin: 0; font-size: 14px; }
.state-demo { display: flex; flex-wrap: wrap; gap: var(--wd-space-12); align-items: flex-start; }
.state-demo > div { display: grid; gap: 6px; }
.state-demo h3 { margin: 0; font-size: 18px; }
.state-demo .hint { margin-bottom: var(--wd-space-3); font-size: 14px; }

@media (max-width: 1023px) {
  .form-layout { flex-direction: column; align-items: stretch; gap: var(--wd-space-8); }
  .post-aside { position: static; width: 100%; }
}
@media (max-width: 767px) {
  .page-head .page-title { font-size: 32px; }
  .form-block-head { flex-wrap: wrap; }
  .form-row, .location-pair { flex-direction: column; align-items: stretch; }
  .location-pair select.input { width: 100%; }
  .datepicker-grid { grid-template-columns: repeat(7, 40px); }
  .modal { padding: var(--wd-space-8) var(--wd-space-5) var(--wd-space-6); }
  .stepper li { width: 72px; }
  .stepper .step-line { width: 24px; }
}

/* ── PRJ-003·004 일감 상세 (기본 정보 · 본문 · 지원 카드 · 비슷한 일감) ── */
.detail-head { display: grid; justify-items: start; gap: var(--wd-space-4); padding: var(--wd-space-10) 0; line-height: normal; }
.detail-badges { display: flex; gap: var(--wd-space-2); }
.detail-badge { display: inline-flex; align-items: center; padding: var(--wd-space-1) 10px; border-radius: var(--wd-radius-pill); background: var(--wd-yellow); color: var(--wd-black); font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.detail-badge.is-dday { background: var(--wd-black); color: var(--wd-yellow); }
.detail-badge.is-closed { padding: 3px 9px; border: 1px solid var(--wd-muted); background: none; color: var(--wd-muted); }
.detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); width: 100%; }
.detail-title { margin: 0; font-size: 40px; font-weight: 700; line-height: 48px; letter-spacing: -1px; }
.detail-actions { display: flex; flex: none; gap: var(--wd-space-2); }
.btn-line { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px 11px var(--wd-space-4); border: 1px solid var(--wd-black); border-radius: var(--wd-radius-pill); background: var(--wd-white); color: var(--wd-black); font: inherit; font-size: 14px; font-weight: 700; line-height: 17px; white-space: nowrap; cursor: pointer; }
.btn-line img { width: 18px; height: 18px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-tags .pill-tag { padding: 6px var(--wd-space-3); border-radius: var(--wd-radius-pill); font-size: 13px; line-height: 16px; }
.detail-company { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: var(--wd-space-3); font-size: 15px; font-weight: 700; line-height: 18px; }
.detail-company img { width: 18px; height: 18px; }

.detail-layout { display: flex; align-items: flex-start; gap: 56px; }
.detail-body { flex: 1; min-width: 0; display: grid; gap: 36px; padding: var(--wd-space-8) 0 var(--wd-space-10); border-top: 2px solid var(--wd-black); line-height: normal; }
.detail-body h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 26px; letter-spacing: -0.22px; }
.detail-sub, .detail-locked { display: grid; gap: 10px; }
.detail-sub h3, .detail-locked h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 20px; letter-spacing: -0.085px; }
/* 사업자가 쓴 글을 줄바꿈 그대로 보여 줌 */
.detail-text { margin: 0; font-size: 16px; line-height: 1.75; white-space: pre-line; }
.ref-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ref-link { display: flex; align-items: center; gap: 10px; padding: var(--wd-space-4) 18px; border: 1px solid var(--wd-line); border-radius: 12px; color: var(--wd-black); font-size: 14px; font-weight: 500; line-height: 17px; text-decoration: none; }
.ref-link img { flex: none; width: 18px; height: 18px; }
/* 비회원: 구인 배경 다음 항목은 흐리게 + 로그인 안내 */
.detail-locked { filter: blur(3px); opacity: .5; pointer-events: none; user-select: none; }
.login-card { display: grid; justify-items: center; gap: var(--wd-space-4); padding: 36px var(--wd-space-10); border-radius: var(--wd-space-6); background: var(--wd-soft); text-align: center; }
.login-card img { width: 28px; height: 28px; }
.login-card p { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.2px; }
.login-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wd-space-2); padding-top: var(--wd-space-1); }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px var(--wd-space-7); border: 1px solid var(--wd-black); border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-yellow); font-size: 15px; font-weight: 700; line-height: 18px; text-decoration: none; white-space: nowrap; }
.btn-cta.is-outline { border-color: var(--wd-line); background: var(--wd-white); color: var(--wd-black); }

/* 오른쪽: 지원 카드(일감 등록 요약 카드와 같은 모양) · 회사 카드 · 안내. 스크롤해도 따라옴 */
.detail-aside { position: sticky; top: var(--wd-space-6); flex: none; display: grid; gap: var(--wd-space-4); width: 380px; line-height: normal; }
.btn-block.is-closed, .btn-block.is-closed:disabled { padding: var(--wd-space-3) var(--wd-space-4); background: var(--wd-soft); color: var(--wd-muted); font-size: 14px; line-height: 17px; opacity: 1; cursor: default; }
.company-card { display: grid; gap: var(--wd-space-3); padding: var(--wd-space-6); border-radius: var(--wd-space-5); background: var(--wd-soft); }
.company-card p { margin: 0; }
.company-card-name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; line-height: 19px; }
.company-card-name img { width: 16px; height: 16px; }
.company-card-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; line-height: 16px; }
.company-card-row > span { color: var(--wd-muted); }
.company-card-row .rating { display: inline-flex; align-items: center; gap: var(--wd-space-1); }
.company-card-row .rating img { width: 13px; height: 13px; }
.detail-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: 12px; font-size: 12px; line-height: 1.6; color: var(--wd-muted); }
.detail-notice img { flex: none; width: 16px; height: 16px; }

/* 하단: 비슷한 일감 (줄 모양은 일감 목록과 같음) */
.similar-section { display: grid; gap: var(--wd-space-5); padding: 96px 0 120px; }
.similar-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 31px; letter-spacing: -0.39px; }
.similar-section .more-link { gap: var(--wd-space-1); }

@media (max-width: 1023px) {
  .detail-layout { flex-direction: column; align-items: stretch; gap: var(--wd-space-8); }
  /* 좁은 화면: 예산·[지원하기]가 먼저 보이게 지원 카드를 본문 위로 */
  .detail-aside { position: static; order: -1; width: 100%; }
}
@media (max-width: 767px) {
  .detail-title { font-size: 32px; line-height: 40px; }
  .detail-title-row { flex-direction: column; align-items: flex-start; }
  .login-card { padding: var(--wd-space-8) var(--wd-space-5); }
  .similar-section { padding: var(--wd-space-12) 0 80px; }
}

/* ── PRJ-006 지원 안내 팝업 (회원 미승인). 틀·단계 표시는 일감 등록 완료 팝업과 같음 ── */
.modal.is-apply h2 { letter-spacing: -0.36px; }
.modal.is-apply h2.is-plain { letter-spacing: 0; }
.modal-text-btn { width: 100%; padding: var(--wd-space-3) var(--wd-space-5); border: 0; background: none; color: var(--wd-muted); font: inherit; font-size: 14px; font-weight: 500; line-height: 17px; cursor: pointer; }
.modal .modal-help { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wd-space-1); padding-top: var(--wd-space-1); font-size: 13px; line-height: 16px; }
.modal-help a { font-weight: 700; color: var(--wd-black); }

/* ── PRJ-006 지원서 작성 (견적 · 작업 내용 · 포트폴리오 · 지원 메시지 · 지원 요약). 틀은 일감 등록(PRJ-008) 양식과 같음 ── */
.form-block-title.is-required::after { content: "*"; margin-left: var(--wd-space-1); font-size: 15px; vertical-align: top; color: var(--wd-muted); }
/* 지원서의 빈칸 표시: 시안대로 테두리 1px · 안내 글자 보통 두께 (일감 등록은 1.5px · 중간 두께) */
.apply-form .field-error { font-weight: 400; }
.apply-form .form-field.is-error > .input, .apply-form .form-field.is-error .input-won .input, .apply-form .form-field.is-error .upload-box { border: 1px solid var(--wd-danger); }
.apply-form .form-field.is-error input.input { height: 48px; }
.apply-form .form-field.is-error .input-won .input { height: 44px; }

/* 견적 방식에 따라 총액 칸 / 항목별 칸 중 하나만 보임 */
.apply-form [hidden] { display: none; }
.apply-form p.form-label { margin: 0; }

/* 지원하는 일감 */
.ref-job { display: grid; gap: var(--wd-space-4); padding: 22px var(--wd-space-6); border: 1.5px solid var(--wd-black); border-radius: var(--wd-radius-lg); background: var(--wd-white); line-height: normal; }
.ref-job hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--wd-line); }
.ref-job-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.ref-job-name { display: grid; justify-items: start; gap: var(--wd-space-2); font-size: 18px; }
.ref-tag { padding: var(--wd-space-1) 10px; border-radius: var(--wd-radius-pill); background: var(--wd-yellow); font-size: 12px; font-weight: 700; }
.ref-job-budget { display: grid; justify-items: end; gap: var(--wd-space-1); margin: 0; font-size: 18px; white-space: nowrap; }
.ref-job-budget span { font-size: 13px; font-weight: 500; color: var(--wd-muted); }
.ref-job-scope { display: grid; gap: var(--wd-space-2); font-size: 14px; }
.ref-job-scope p { margin: 0; line-height: 1.6; white-space: pre-line; }

/* 견적 방식 · 부가세: 동그라미 선택 (골라도 글자 폭 그대로) */
.radio-row { display: flex; flex-wrap: wrap; gap: var(--wd-space-6); }
.radio { display: inline-flex; align-items: center; gap: var(--wd-space-2); font-size: 15px; line-height: 18px; cursor: pointer; }
.radio input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--wd-line); border-radius: 50%; background: var(--wd-white); cursor: pointer; }
.radio input:checked { border: 6px solid var(--wd-black); }
.radio input:focus-visible { outline: 2px solid var(--wd-yellow); outline-offset: 2px; }
.radio span { display: inline-flex; flex-direction: column; }
.radio span::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 500; }
.radio input:checked + span { font-weight: 500; }

/* 금액 칸: 오른쪽 정렬 + '원' */
.input.is-sm { height: 44px; padding: var(--wd-space-3) 14px; border-radius: 10px; }
.input-won { position: relative; display: block; }
.input-won .input { padding-right: 33px; text-align: right; }
.input-won > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--wd-muted); pointer-events: none; }

/* 항목별 견적: 항목명 · 단가 · 수량 · 금액 · ✕ */
.quote-head, .quote-row { display: flex; align-items: center; gap: var(--wd-space-2); }
.quote-head span { font-size: 13px; line-height: 16px; color: var(--wd-muted); text-align: right; }
.quote-head span:nth-child(1) { flex: 1; text-align: left; }
.quote-head span:nth-child(2), .quote-row .is-price { width: 160px; flex: none; }
.quote-head span:nth-child(3), .quote-row .is-qty { width: 88px; flex: none; }
.quote-head span:nth-child(4), .quote-amount { width: 140px; flex: none; }
.quote-head span:nth-child(5), .quote-del { width: 20px; flex: none; }
.quote-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quote-row > .input:first-child { flex: 1; min-width: 0; }
.quote-row .is-qty { text-align: right; }
.quote-amount { font-size: 15px; font-weight: 700; line-height: 18px; text-align: right; white-space: nowrap; }
.quote-del { padding: 0; border: 0; background: none; font-size: 14px; color: var(--wd-muted); cursor: pointer; }
.quote-add { display: flex; align-items: center; justify-content: space-between; }
.btn-add { padding: 10px 18px; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-pill); background: var(--wd-white); font: inherit; font-size: 14px; font-weight: 700; line-height: 17px; cursor: pointer; }
.btn-add:disabled { opacity: .45; cursor: default; }
.quote-count { margin: 0; font-size: 13px; color: var(--wd-muted); }
.quote-count b { color: var(--wd-black); }

/* 공급가액 · 부가세 · 총액 */
.totals { display: grid; gap: 10px; padding: 18px var(--wd-space-5); border-radius: 12px; background: var(--wd-soft); line-height: normal; }
.totals p { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 14px; line-height: 17px; }
.totals span { color: var(--wd-muted); }
.totals hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--wd-line); }
.totals .is-total span { font-weight: 700; color: var(--wd-black); }
.totals .is-total b { font-size: 18px; font-weight: 900; line-height: 21px; }

/* 포트폴리오: 칸 머리(라벨 + 오른쪽 버튼) */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-3); }
.field-head .form-label { margin: 0; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--wd-black); text-decoration: underline; cursor: pointer; }
.view-tabs { display: flex; align-items: center; gap: var(--wd-space-2); margin: 0; font-size: 14px; color: var(--wd-line); }
.view-tabs button { padding: 0; border: 0; background: none; font: inherit; color: var(--wd-muted); cursor: pointer; }
.view-tabs button[aria-pressed="true"] { font-weight: 700; color: var(--wd-black); }

/* 워크덴에서 함께한 일: 한 줄에 4.5개, 가로로 넘기기. 고른 카드는 검정 테두리(굵어져도 크기 그대로) */
.work-grid { display: flex; gap: var(--wd-space-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.work-grid::-webkit-scrollbar { display: none; }
.work-grid { cursor: grab; }
.work-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.work-grid.is-dragging .work-card { cursor: grabbing; }
.work-card { flex: none; display: grid; gap: 10px; width: 168px; padding: var(--wd-space-2) var(--wd-space-2) 14px; border: 1px solid var(--wd-line); border-radius: 14px; background: var(--wd-white); font: inherit; text-align: left; line-height: normal; cursor: pointer; scroll-snap-align: start; }
.work-card.is-picked { border-color: var(--wd-black); box-shadow: inset 0 0 0 1px var(--wd-black); }
.work-card.is-locked { opacity: .45; cursor: default; }
.work-thumb { position: relative; height: 104px; border-radius: 10px; background: var(--wd-soft); }
.work-check { position: absolute; top: var(--wd-space-2); right: var(--wd-space-2); width: 24px; height: 24px; border: 1.5px solid var(--wd-line); border-radius: 50%; background: var(--wd-white); }
.work-card.is-picked .work-check { border: 0; background: url(assets/icon-check-circle-24.svg) center / 24px 24px; }
.work-text { display: grid; gap: var(--wd-space-1); padding: 0 var(--wd-space-1); }
.work-title { font-size: 14px; font-weight: 500; line-height: 17px; }
.work-meta { font-size: 12px; line-height: 14px; color: var(--wd-muted); }

/* 포트폴리오 파일 · 추가 서류 목록 */
.pf-list { display: grid; gap: var(--wd-space-2); margin: 0; padding: 0; list-style: none; }
.pf-list:empty { display: none; }
.pf-row { display: flex; align-items: center; gap: var(--wd-space-3); padding: var(--wd-space-3) var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); line-height: normal; }
.pf-tag { flex: none; padding: 2px 6px; border-radius: 6px; background: var(--wd-soft); font-size: 12px; font-weight: 500; }
.pf-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--wd-space-2); }
.pf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.pf-meta { flex: none; font-size: 12px; color: var(--wd-muted); }
.pf-del { flex: none; padding: 0; border: 0; background: none; font-size: 14px; line-height: 17px; color: var(--wd-muted); cursor: pointer; }
.pf-field .upload-box.is-full { opacity: .4; }
.pii-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 16px; }
.pii-note span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--wd-black); font-size: 11px; font-weight: 700; color: var(--wd-white); }
.apply-form .policy-notice { padding: var(--wd-space-4) 18px; }

/* 지원 요약: 공개 동의 체크 · 빨간 안내 */
.consent { display: flex; align-items: flex-start; gap: var(--wd-space-2); padding: var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); }
.consent label { flex: 1; display: flex; align-items: flex-start; gap: var(--wd-space-2); font-size: 13px; line-height: 1.5; cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--wd-line-strong); border-radius: 4px; background: var(--wd-white); cursor: pointer; }
.consent input:checked { border: 0; background: url(assets/icon-checkbox-18.svg) center / 18px 18px; }
.consent button { flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 16px; color: var(--wd-muted); text-decoration: underline; cursor: pointer; }
.summary-warn { margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-danger); }

/* 팝업 (공개 동의 보기 · 내 서류에서 가져오기): 제목 + ✕ 머리, 아래에 버튼 두 개 */
.sheet-modal { display: grid; gap: var(--wd-space-6); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--wd-space-8); border-radius: var(--wd-space-6); background: var(--wd-white); line-height: normal; }
.sheet-modal.is-wide { width: min(560px, 100%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-3); }
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.sheet-head button { padding: 0; border: 0; background: none; font-size: 18px; color: var(--wd-muted); cursor: pointer; }
.sheet-head.is-ink button { color: var(--wd-black); }
.sheet-desc { margin: 0; font-size: 14px; color: var(--wd-muted); }
.sheet-desc.is-loose { line-height: 1.5; }
.sheet-actions { display: flex; gap: var(--wd-space-3); }
.sheet-foot { margin: 0; font-size: 12px; color: var(--wd-muted); text-align: center; }
.consent-table { margin: 0; border: 1px solid var(--wd-line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.consent-table div { display: flex; gap: var(--wd-space-4); padding: 14px 18px; border-bottom: 1px solid var(--wd-line); }
.consent-table div:nth-child(odd) { background: var(--wd-zebra); }
.consent-table div:last-child { border-bottom: 0; }
.consent-table dt { flex: none; width: 112px; font-weight: 700; }
.consent-table dd { flex: 1; margin: 0; line-height: 1.5; }
.doc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc-row { display: flex; align-items: center; gap: var(--wd-space-3); padding: 14px var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: 12px; cursor: pointer; }
.doc-row:has(input:checked) { border-color: var(--wd-black); box-shadow: inset 0 0 0 0.5px var(--wd-black); }
.doc-row:has(input:disabled) { opacity: .45; cursor: default; }
.doc-row input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--wd-line); border-radius: 6px; cursor: pointer; }
.doc-row input:checked { border: 0; background: url(assets/icon-checkbox-20.svg) center / 20px 20px; }
.doc-row > span { display: grid; gap: 2px; }
.doc-row b { font-size: 15px; font-weight: 500; }
.doc-row small { font-size: 12px; color: var(--wd-muted); }

@media (max-width: 767px) {
  .ref-job-top { flex-direction: column; align-items: flex-start; }
  .ref-job-budget { justify-items: start; }
  .quote-head { display: none; }
  .quote-row { display: grid; grid-template-columns: 1fr 64px 20px; grid-template-areas: "name name del" "price qty del" "amount amount amount"; padding-bottom: 10px; border-bottom: 1px solid var(--wd-line); }
  .quote-row > .input:first-child { grid-area: name; }
  .quote-row .is-price { grid-area: price; width: auto; }
  .quote-row .is-qty { grid-area: qty; width: auto; }
  .quote-amount { grid-area: amount; width: auto; }
  .quote-del { grid-area: del; }
  .pf-text { flex-wrap: wrap; gap: 2px var(--wd-space-2); }
  .sheet-modal { padding: var(--wd-space-6) var(--wd-space-5); }
  .consent-table div { flex-direction: column; gap: var(--wd-space-1); }
}

/* ── ACC-001 회원가입 (가운데 좁은 칸 하나에 한 단계씩). 로그인 · 계정 찾기도 같은 틀을 씀 ── */
.auth-main { display: flex; justify-content: center; align-items: flex-start; min-height: 937px; padding: 88px var(--wd-space-4) 80px; line-height: normal; }
.auth-main > form { display: flex; justify-content: center; width: 100%; }
.auth-box { display: grid; gap: var(--wd-space-5); width: min(400px, 100%); }
.auth-box.is-mid { width: min(440px, 100%); }
.auth-box.is-wide { width: min(480px, 100%); gap: var(--wd-space-6); }
.auth-box[data-step="phone"] { gap: var(--wd-space-6); }
.auth-box[hidden] { display: none; }
.auth-head { display: grid; gap: 6px; }
.auth-head h1, .auth-box.is-center h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 29px; }
.auth-head p { margin: 0; font-size: 15px; color: var(--wd-muted); }
.auth-box .btn-block:disabled { opacity: .35; }
/* 입력칸은 공통 규칙(기본 회색 · 누르면 검정 · 오류 빨강). 오류일 때 칸 크기는 그대로 */
.auth-box .form-field.is-error .input { border: 1px solid var(--wd-danger); height: 48px; }
.auth-box .field-error { font-weight: 400; }
.field-hint { margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.auth-row { display: flex; gap: var(--wd-space-2); }
.auth-row .input { flex: 1; min-width: 0; }
.btn-side { flex: none; height: 48px; padding: 0 var(--wd-space-4); border: 1.5px solid var(--wd-black); border-radius: 12px; background: var(--wd-white); font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.btn-side:disabled { opacity: .35; cursor: default; }
.btn-side[hidden] { display: none; }
/* 인증번호 칸: 오른쪽에 남은 시간(빨강) */
.input-timer-wrap { position: relative; flex: 1; min-width: 0; display: block; }
.input-timer-wrap .input { width: 100%; padding-right: 60px; }
.input-timer { position: absolute; right: var(--wd-space-4); top: 50%; transform: translateY(-50%); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--wd-danger); pointer-events: none; }
/* 인증이 끝나 잠긴 칸: 회색 바탕 */
.input.is-locked, .input.is-locked:focus { border-color: var(--wd-line); background: var(--wd-soft); }
.input.is-locked:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--wd-soft) inset; }
.field-success { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 16px; }
.field-success[hidden], .field-hint[hidden] { display: none; }
.field-success img { flex: none; width: 16px; height: 16px; }
.input[readonly]:not(.input-date) { cursor: default; }

/* 1) 회원 유형: 아이콘 카드 두 개. 고르면 검정 테두리 + 노란 아이콘 + 체크 (굵어져도 크기 그대로) */
.type-options { display: flex; gap: var(--wd-space-4); }
.type-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; height: 238px; padding: 36px var(--wd-space-5) var(--wd-space-8); border: 1px solid var(--wd-line); border-radius: var(--wd-space-5); background: var(--wd-white); text-align: center; cursor: pointer; }
.type-card:has(input:checked) { border-color: var(--wd-black); box-shadow: inset 0 0 0 1px var(--wd-black); }
.type-card input { appearance: none; -webkit-appearance: none; position: absolute; top: 14px; right: 18px; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--wd-line); border-radius: 50%; background: var(--wd-white); cursor: pointer; }
.type-card input:checked { border: 0; background: url(assets/icon-radio-check-24.svg) center / 24px 24px; }
.type-card input:focus-visible { outline: 2px solid var(--wd-yellow); outline-offset: 2px; }
.type-icon { flex: none; width: 80px; height: 80px; background: center / 80px 80px no-repeat; }
.type-icon.is-business { background-image: url(assets/icon-type-business-off.svg); }
.type-icon.is-freelancer { background-image: url(assets/icon-type-freelancer-off.svg); }
.type-card input:checked ~ .type-icon.is-business { background-image: url(assets/icon-type-business-on.svg); }
.type-card input:checked ~ .type-icon.is-freelancer { background-image: url(assets/icon-type-freelancer-on.svg); }
.type-card b { font-size: 20px; font-weight: 700; }
.type-card > span:last-child { margin-top: -8px; font-size: 14px; line-height: 1.5; color: var(--wd-muted); }

/* 2) 약관 동의 */
.terms-all, .terms-list label { display: flex; align-items: center; gap: var(--wd-space-3); cursor: pointer; }
.terms-all { padding: var(--wd-space-4); border-radius: 12px; background: var(--wd-soft); font-size: 16px; font-weight: 700; }
.terms-all input, .terms-list input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--wd-line); border-radius: 6px; background: var(--wd-white); cursor: pointer; }
.terms-all input:checked, .terms-list input:checked { border: 0; background: url(assets/icon-checkbox-22.svg) center / 22px 22px; }
.terms-list { display: grid; gap: 14px; margin: 0; padding: 0 var(--wd-space-1); list-style: none; }
.terms-list li { display: flex; align-items: center; gap: var(--wd-space-3); }
.terms-list li[hidden] { display: none; }
.terms-list label { flex: 1; font-size: 15px; }
.terms-list a { flex: none; font-size: 14px; color: var(--wd-muted); text-decoration: none; }
.terms-list .terms-note { padding-left: 34px; font-size: 13px; color: var(--wd-muted); }

/* 가입 완료 */
.auth-box.is-center { justify-items: center; text-align: center; }
.auth-box.is-center > p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wd-muted); }
.auth-actions { display: grid; gap: var(--wd-space-2); width: 100%; padding-top: var(--wd-space-2); }
a.modal-text-btn { display: block; text-align: center; text-decoration: none; }

@media (max-width: 767px) {
  .auth-main { min-height: 0; padding-top: var(--wd-space-12); }
  .type-card { padding-inline: var(--wd-space-3); }
}

/* ── ACC-001A 사업자 정보 입력: 확인 버튼 + 오류 한 줄 · 번호 없음 링크 · 확인 완료 토스트 ── */
.check-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.check-group[hidden] { display: none; }
.auth-error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-danger); }
.auth-error[hidden] { display: none; }
.auth-error img { flex: none; width: 16px; height: 16px; }
.auth-main { position: relative; }
.auth-main .toast { font-weight: 700; }
.auth-main > .toast.is-static { position: absolute; top: 720px; bottom: auto; left: 50%; transform: translateX(-50%); }
.btn-check { width: 100%; height: 51px; border: 1.5px solid var(--wd-black); border-radius: 12px; background: var(--wd-white); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-check:disabled { opacity: .35; cursor: default; }
.link-muted { width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 17px; color: var(--wd-muted); text-decoration: underline; cursor: pointer; }
.btn-check[hidden], .link-muted[hidden] { display: none; }

/* 검토용: 상태 구분 표시 (앱으로 옮길 때는 쓰지 않음) */
.state-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--wd-muted); text-transform: uppercase; margin: 0 0 var(--wd-space-3); }
section[data-state] { padding-block: var(--wd-space-8); border-top: 2px dashed var(--wd-line); }
.state-nav { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); margin: var(--wd-space-4) 0; }
.state-nav a { font-size: 13px; color: var(--wd-muted); }
.review-intro { padding-top: var(--wd-space-6); }
.state-label.container { margin-inline: auto; }
.review-toggle { display: flex; flex-wrap: wrap; gap: var(--wd-space-4); margin-bottom: var(--wd-space-4); font-size: 14px; }
.review-stage { background: var(--wd-soft); min-height: 560px; }
.review-stage.is-short { min-height: 360px; }