/* 워크덴 공통 스타일. 색·글꼴·간격은 이 변수만 사용한다.
   브랜드: 블랙 / 화이트 / 옐로(포인트). 컬러칩이 확정되면 값만 교체한다.
   2026-10-21 피그마 '최종 시안' 값으로 교체. 검정만 #111111 유지(시안은 #14141a) */
:root {
  --wd-header-h: 84px; /* 상단 메뉴바 높이. 따라오는 카드가 이 아래에 붙음 */
  --wd-black: #111111;
  --wd-white: #ffffff;
  --wd-yellow: #ffe45f;
  --wd-yellow-soft: #fff6cc;
  --wd-yellow-badge: #fff1a8; /* 사업자 인증 배지 (11/12 시안) */

  --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-body: #3f3f46;        /* 후기 글 (11/09 후기 시안) */
  --wd-faint: #a1a1aa;       /* 후기 날짜 · 꺼진 정렬 */
  --wd-heart-off: #e4e4e7;   /* 빈 하트 · 꺼진 버튼 바탕 */

  --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: sticky; top: 0; z-index: 25; } /* 스크롤해도 맨 위에 고정 (11/06 QA) */
@media (max-width: 767px) { :root { --wd-header-h: 98px; } }
.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); }
.site-logout { font-size: 14px; font-weight: 400; color: var(--wd-white); }

.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); }
  .site-header-inner:has(.site-logout) { column-gap: var(--wd-space-2); }
  .site-header-right:has(.site-logout) { gap: var(--wd-space-2); }
  .site-logout { font-size: 13px; }
}

/* ── 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; }
.section-title.has-dot::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--wd-yellow); vertical-align: -0.12em; } /* 메인 제목 끝 노란 점: 8px 원, 글자와 3px, 점 아래를 한글 글자 바닥에 맞춤(기준선보다 4px 아래, 34px 기준 · 피그마 820:9789 점 y 28~36 / 글줄 41, 11/13) */
.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.is-dday { background: var(--wd-black); color: var(--wd-yellow); } /* 마감 D-5 · D-4 */
.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; } /* 일감명은 줄 가운데 (11/06 2차 QA, 스킬 태그 빈 줄 삭제) */
.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-title .pill { padding: 4px var(--wd-space-2) 2px; } /* 글자 1px 아래 (11/06 QA) */
.job-company { width: 130px; flex: none; font-size: 14px; font-weight: 500; }
.job-budget { width: 130px; flex: none; font-size: 17px; font-weight: 900; white-space: nowrap; }
.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; }
.btn-outline:disabled { border-color: var(--wd-soft); background: var(--wd-soft); color: var(--wd-muted); cursor: default; } /* 지원 완료 */

.cta-card { position: relative; overflow: hidden; flex: none; width: 320px; 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: 24px; font-weight: 700; line-height: normal; }
.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; width: 100%; 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-title .pill:not(.pill-closed) { padding: 4px 9px 2px; } /* 새 일감 · 마감 임박 글자 1px 아래 (시안 11/06) */
.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: 250px; }
.board-company { width: 110px; flex: none; font-size: 14px; font-weight: 500; }
.board-budget { width: 124px; flex: none; font-size: 14px; font-weight: 500; white-space: nowrap; } /* 회사명과 같은 글자, 왼쪽 정렬로 모든 줄 맞춤 (시안 11/06) */
.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-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 .btn-pill { box-sizing: border-box; width: 85px; padding-inline: 0; } /* 버튼 글자가 달라도 예산 칸 시작점이 같게 (피그마 85) */
.board-row.is-closed .btn-pill, .btn-pill:disabled { 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; }
.list-empty.is-none > div { display: flex; flex-direction: column; align-items: center; padding: 0 var(--wd-space-5); } /* 일감 0건 (11/13, 피그마 821:157 · 821:286): 제목 · 설명 · 버튼 가운데 */
.list-empty .list-empty-title { color: var(--wd-black); font-size: 16px; font-weight: 700; line-height: 1.5; }
.list-empty .list-empty-sub { margin-top: var(--wd-space-3); font-size: 14px; word-break: keep-all; }
.list-empty.is-none .btn-go { margin-top: var(--wd-space-5); }

@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; flex: 1; min-width: 0; }
  .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-head.is-left { justify-content: flex-start; gap: var(--wd-space-3); } /* 제목 바로 옆 안내 (시안 458:21) */
.form-block-hint { margin: 0; font-size: 14px; font-weight: 500; color: var(--wd-muted); }
.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.is-hint-sm::placeholder { font-size: 14px; } /* 일감 등록 한 줄 소개 · 홈페이지 · 링크 안내 글자 (시안 538:8297, 537:8297, 537:8298) */
.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: 150px; flex: none; }
.input-range { display: flex; align-items: center; gap: var(--wd-space-3); }
.input-range .input-unit { flex: 1; min-width: 0; }
.input-range-label { flex: none; font-size: 14px; color: var(--wd-black); }
.input-range-sep { flex: none; font-size: 16px; color: var(--wd-muted); }
.input-range .input { appearance: textfield; -moz-appearance: textfield; } /* 좁은 칸이라 숫자 화살표를 숨김 */
.input-range .input::-webkit-inner-spin-button, .input-range .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input-range.is-single { width: calc(50% - 18px); } /* 예산 건당 · 일당 · 월: 금액 칸 하나, 총액 한쪽과 같은 너비 (시안 840:10552, 11/13) */
.input-range[hidden] { display: none; }
.business-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wd-space-4); } /* 일감 등록 맨 위 사업자 정보 (시안 515:4216) */
.business-info.is-industry { grid-template-columns: repeat(6, 1fr); } /* 11/13 업종 추가: 윗줄 3칸(회사명 · 업종 · 닉네임) / 아랫줄 2칸(연락처 · 이메일), 피그마 195:3058 */
.business-info.is-industry > :nth-child(-n+3) { grid-column: span 2; }
.business-info.is-industry > :nth-child(n+4) { grid-column: span 3; }
.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); }
/* 입력칸 오류 두 종류 (COM-004)
   data-error="field"   값을 고쳐야 하는 오류: 빨간 테두리 + 칸 아래 빨간 한 줄 (로그인 실패 · 이메일 · 비밀번호 불일치 · 인증번호 오류 · 사업자 확인 실패 · 필수 빈칸)
   data-error="message" 값은 맞고 상태가 문제: 테두리는 회색 그대로, 빨간 한 줄만 (인증 시간 지남 · 휴업·폐업 · 반복 요청 차단)
   .is-error 클래스는 data-error="field"와 같음 (일감 등록 · 지원서에서 쓰던 이름) */
.form-field:is(.is-error, [data-error]) .field-error, .form-row .is-error .field-error { display: block; }
.form-field:is(.is-error, [data-error="field"]) > .input, .form-field:is(.is-error, [data-error="field"]) .input-unit .input, .form-field:is(.is-error, [data-error="field"]) .input-pair .input:first-child,
.form-field:is(.is-error, [data-error="field"]) .location-pair select.input, .form-field:is(.is-error, [data-error="field"]) .tag-input { border: 1.5px solid var(--wd-danger); }
.form-field:is(.is-error, [data-error="field"]) input.input, .form-field:is(.is-error, [data-error="field"]) .location-pair select.input { height: 49px; }
.form-field:is(.is-error, [data-error="field"]) .input-pair select.input { height: 49px; }
.form-field.is-error:not(.is-wrong) .input-range .input:not(:placeholder-shown) { border: 1px solid var(--wd-line); } /* 예산: 비어 있는 칸만 빨간 테두리 */

/* 화면 아래 안내 (토스트) */
.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: calc(var(--wd-header-h) + 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); }
.summary-notes { display: grid; gap: var(--wd-space-1); } /* 진행 안내 + 빨간 수정 불가 안내를 4px 간격으로 묶음 (시안 434:5744) */
.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; }
.btn-block.is-applied, .btn-block.is-applied:disabled { background: var(--wd-soft); color: var(--wd-muted); opacity: 1; cursor: default; } /* 지원서 요약 [지원 완료] */

/* 팝업 (등록 완료 · 결제창 자리) */
.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 p a.inline-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* 지원자 없음 팝업 '고객센터' (시안 507:1443, 11/13) */
.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); }
.done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--wd-radius-pill); background: var(--wd-black); } /* 일감 등록 완료 체크 (시안 575:55) */
.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: 150px; }
.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; }
  .business-info, .business-info.is-industry { grid-template-columns: 1fr; }
  .business-info.is-industry > * { grid-column: auto; }
  .input-range.is-single { width: 100%; }
  .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-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: calc(var(--wd-header-h) + 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; }
/* 사업자 인증 배지: 회사명(또는 업종 · 닉네임) 옆. 11/12 시안 '비교 · 신뢰 배지' A안 */
.biz-badge { display: inline-flex; flex: none; align-items: center; gap: var(--wd-space-1); padding: 3px var(--wd-space-2); border-radius: 6px; background: var(--wd-yellow-badge); color: var(--wd-black); font-size: 12px; font-weight: 700; line-height: normal; white-space: nowrap; }
.biz-badge img, .detail-company .biz-badge img, .company-card-name .biz-badge img, .profile-name .biz-badge img { width: 12px; height: 12px; }
/* 일감 등록 · 일감에 보일 이름(회사명 비공개 기본 / 공개) + 미리보기. 11/12 시안 794:24 */
.name-pick { display: grid; gap: var(--wd-space-3); margin-top: var(--wd-space-6); line-height: normal; }
.name-pick-title { margin: 0; font-size: 15px; font-weight: 700; }
.name-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wd-space-3); }
.name-option { position: relative; display: flex; align-items: flex-start; gap: var(--wd-space-3); padding: var(--wd-space-4) 18px; border: 1px solid var(--wd-heart-off); border-radius: 14px; background: var(--wd-white); cursor: pointer; }
.name-option:has(input:checked) { border: 1.5px solid var(--wd-black); padding: 15.5px 17.5px; }
.name-option input { position: absolute; opacity: 0; pointer-events: none; }
.name-radio { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--wd-line-strong); border-radius: 50%; background: var(--wd-white); box-sizing: border-box; }
.name-option input:checked + .name-radio { border: 6px solid var(--wd-black); }
.name-option input:focus-visible + .name-radio { outline: 2px solid var(--wd-yellow); outline-offset: 2px; }
.name-text { display: grid; gap: var(--wd-space-1); min-width: 0; }
.name-text b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.name-text small { font-size: 13px; color: var(--wd-muted); }
.name-tag { padding: 2px var(--wd-space-2); border-radius: var(--wd-radius-pill); background: var(--wd-soft); color: var(--wd-muted); font-size: 12px; font-weight: 500; }
.name-preview { display: inline-flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--wd-soft); font-size: 13px; color: var(--wd-muted); }
.name-preview-name { display: inline-flex; align-items: center; gap: 6px; }
.name-preview-name b { font-size: 14px; font-weight: 700; color: var(--wd-black); }
@media (max-width: 767px) { .name-options { grid-template-columns: 1fr; } }
.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; word-break: keep-all; font-size: 26px; font-weight: 700; line-height: 31px; letter-spacing: -0.39px; }
.similar-section .more-link { gap: var(--wd-space-1); }
.company-card.is-demo { width: min(380px, 100%); }

@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); }

/* ── 우선 오픈: 서류를 메일로 보내 주세요 팝업 (가입 완료 · 지원하기 · 마이페이지 홈) ── */
.modal.is-mail { max-height: calc(100vh - 32px); overflow: auto; }
.mail-box { width: 100%; border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); text-align: left; }
.mail-box.is-copied { border-color: var(--wd-black); }
.mail-box.is-copied .btn-copy { font-weight: 500; }
.mail-address { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-3); padding: 14px var(--wd-space-5); }
.mail-address b { font-size: 18px; font-weight: 700; color: var(--wd-black); overflow-wrap: anywhere; text-align: left; }
.mail-docs { display: grid; gap: 6px; padding: 14px var(--wd-space-5) 18px; }
.mail-docs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-3); }
.mail-docs-head b { font-size: 15px; font-weight: 700; color: var(--wd-black); }
.mail-docs ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--wd-black); overflow-wrap: anywhere; }
.btn-copy { flex: none; padding: 10px 18px; 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: normal; cursor: pointer; }

/* ── 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; }
.consent.is-stacked { flex-direction: column; } /* 체크 줄 아래에 회색 안내 한 줄 (일감 등록 회사명 공개, 시안 445:24) */
.consent.is-stacked label { line-height: 20px; } /* 두 줄 40px (시안) */
.consent-row { display: flex; align-items: flex-start; gap: var(--wd-space-2); width: 100%; }
.consent-hint { margin: 0; font-size: 12px; line-height: 14px; color: var(--wd-muted); }
.summary-warn { margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-danger); }
.summary-actions { display: grid; gap: var(--wd-space-2); }
.summary-info > div[hidden] { display: none; } /* 원격이면 근무 위치 줄 숨김 */

/* 팝업 (공개 동의 보기 · 내 서류에서 가져오기): 제목 + ✕ 머리, 아래에 버튼 두 개 */
.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); }
}

/* ── MYP-009 지원서 보기: 지원서 작성(PRJ-006)과 같은 모양을 읽기 전용으로. 칸은 글자만 보여 주고 누를 수 없음 ── */
.apply-view .input { display: block; margin: 0; cursor: default; }
.apply-view .view-text { height: 112px; overflow-y: auto; font-size: 14px; line-height: normal; white-space: pre-line; overflow-wrap: anywhere; } /* 글이 길면 칸 안에서 스크롤 */
.apply-view .radio, .apply-view .radio input { cursor: default; }
.apply-view .radio input:checked + span { font-weight: 400; }
.apply-view .form-field.is-works { gap: var(--wd-space-3); }
.apply-view .work-grid, .apply-view .work-card { cursor: default; }
/* 포트폴리오 파일: 파일 이름을 누르면 새 창에서 열고, 오른쪽 내려받기 아이콘(32×32)은 바로 다운로드. 줄 높이 58 (시안 426:3051) */
.apply-view a.pf-name { color: var(--wd-black); text-decoration: none; }
.apply-view a.pf-name:hover { text-decoration: underline; }
.pf-download { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; }
.summary-status { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-3); font-size: 14px; line-height: normal; }
@media (max-width: 767px) {
  .apply-view .quote-row { grid-template-columns: 1fr 64px; grid-template-areas: "name name" "price qty" "amount amount"; }
}

/* ── 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[data-error="field"] .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.is-muted { color: var(--wd-muted); }
.input.is-masked { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; background: var(--wd-soft); font-size: 14px; font-weight: 500; } /* 선정 전 가린 칸: 값은 내려보내지 않음 (시안 458:21) */
.applicant-info { display: grid; gap: var(--wd-space-7); width: 100%; margin-top: var(--wd-space-6); } /* 선정한 지원자 정보 (시안 441:193) */
.applicant-info hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--wd-line); } /* 사람 사이 구분선 (시안 548:58) */
.input-date.is-locked, .input-date.is-locked:focus { background: var(--wd-soft) url(assets/icon-calendar-locked.svg) no-repeat right var(--wd-space-4) center / 18px 18px; cursor: default; } /* 시안 503:235 */
.state-period { width: 394px; max-width: 100%; }
.state-period .form-field + .form-field { margin-top: var(--wd-space-4); }
.input.is-locked:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--wd-soft) inset; }
.field-hint[hidden] { display: none; }
/* 닉네임: 쓸 수 있으면 칸 아래 검정 한 줄(체크 아이콘) */
.field-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 16px; color: var(--wd-black); }
.field-ok[hidden], .form-field[data-error] .field-ok { display: none; }
.field-ok img { flex: none; width: 16px; height: 16px; }
/* 아이콘 붙은 오류 한 줄 (이미 가입된 이메일) · 테두리 없이 한 줄만 (반복 요청 차단) */
.form-field[data-error] .field-error.has-icon { display: flex; align-items: center; gap: 6px; }
.field-error 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; }
.toast.is-bold { 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; }

/* ── ACC-002 로그인 · 비밀번호 찾기 · 계정 찾기 ── */
.auth-box.is-login { width: min(360px, 100%); gap: var(--wd-space-6); }
.login-head { display: grid; justify-items: center; gap: 14px; }
.login-head h1 { margin: 0; line-height: 0; }
.login-head img { display: block; width: 192px; height: 36.067px; }
.login-head p { margin: 0; font-size: 15px; color: var(--wd-muted); text-align: center; }
.social-login { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* 폰 폭에서 카카오 버튼(358)이 칸 밖으로 나가지 않게 */
.btn-kakao { display: block; width: 358px; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.btn-kakao img { display: block; width: 100%; height: auto; }
.btn-kakao.is-full { width: 100%; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 49px; border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-white); color: var(--wd-black); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-google img { width: 21px; height: 21px; }
.btn-google.is-tall { height: 55px; } /* 계정 찾기 결과: 카카오 버튼(400×55)과 같은 높이 */
.login-divider { display: flex; align-items: center; gap: var(--wd-space-3); margin: 0; font-size: 13px; color: var(--wd-muted); white-space: nowrap; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--wd-line); }
.login-form { display: grid; gap: 10px; }
.login-links { display: flex; justify-content: center; align-items: center; gap: var(--wd-space-3); margin: 0; font-size: 14px; white-space: nowrap; }
.login-links a { color: var(--wd-muted); text-decoration: none; }
.login-links a.is-strong { color: var(--wd-black); font-weight: 700; }
.login-links span { color: var(--wd-line); }
.login-links.is-single { gap: 0; }
/* 계정 찾기 결과: 찾은 계정 한 줄 */
.account-box { display: flex; align-items: center; gap: var(--wd-space-3); padding: 18px var(--wd-space-5); border-radius: 12px; background: var(--wd-soft); }
.account-box img { flex: none; width: 22px; height: 22px; object-fit: contain; }
.account-box b { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.account-tag { flex: none; padding: 4px 10px; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-pill); background: var(--wd-white); font-size: 12px; font-weight: 500; color: var(--wd-muted); white-space: nowrap; }
.auth-box[data-step^="account"], .auth-box[data-step="find-account"], .auth-box[data-step="exists"] { gap: var(--wd-space-6); }
/* 폰 폭에서는 긴 토스트 문구가 화면 밖으로 나가지 않게 줄바꿈 */
@media (max-width: 767px) {
  .toast { width: max-content; max-width: calc(100vw - var(--wd-space-8)); white-space: normal; }
  .auth-main > .toast.is-static { top: auto; bottom: var(--wd-space-2); } /* 검토용 고정 토스트: 짧아진 본문 아래쪽에 */
}

/* ── MYP 마이페이지(프리랜서): 왼쪽 메뉴 + 오른쪽 본문 (홈 MYP-001 · 지원 내역 MYP-009 · 내 일감 MYP-012 · 저장한 일감 MYP-015) ── */
.myp-layout { display: flex; align-items: flex-start; gap: 56px; padding-top: var(--wd-space-12); padding-bottom: 120px; line-height: normal; }
.myp-side { flex: none; width: 220px; }
.myp-side-title { margin: 0; padding-bottom: var(--wd-space-6); font-size: 24px; font-weight: 700; }
.myp-side-title a { color: inherit; text-decoration: none; }
.myp-menu { display: grid; gap: var(--wd-space-4); padding: var(--wd-space-5) 0 var(--wd-space-6); border-top: 1px solid var(--wd-line); }
.myp-menu:first-of-type { padding-top: 0; border-top: 0; }
.myp-menu-label { margin: 0; font-size: 14px; font-weight: 700; }
.myp-menu a { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--wd-black); text-decoration: none; }
.myp-menu a[aria-current="page"] { font-weight: 700; }
.myp-menu a img { width: 16px; height: 16px; }
.myp-main { flex: 1; min-width: 0; display: grid; gap: var(--wd-space-6); }
.myp-main.is-home { gap: var(--wd-space-10); }
.myp-title { display: flex; align-items: baseline; gap: var(--wd-space-2); margin: 0; font-size: 24px; font-weight: 700; }
.myp-title span { color: var(--wd-muted); }

/* 홈: 프로필 카드 (검정 + 오른쪽 위 노란 빛) */
.profile-card { display: grid; gap: var(--wd-space-7); padding: var(--wd-space-7) var(--wd-space-8); border-radius: var(--wd-space-6); background: var(--wd-black) url(assets/glow-profile.svg) no-repeat 464px -190px / 640px 500px; color: var(--wd-white); }
.profile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-6); }
.profile-who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.profile-avatar { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border: 3px solid var(--wd-white); border-radius: 50%; background: var(--wd-soft); color: var(--wd-black); font-size: 28px; font-weight: 700; }
.profile-info { display: grid; gap: var(--wd-space-2); min-width: 0; }
.profile-info p { margin: 0; }
.profile-role { font-size: 14px; font-weight: 700; color: var(--wd-yellow); }
.profile-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wd-space-2); font-size: 28px; font-weight: 700; }
.profile-name img { width: 22px; height: 22px; }
.doc-pill { padding: 5px var(--wd-space-3); border-radius: var(--wd-radius-pill); background: var(--wd-yellow); color: var(--wd-black); font-size: 13px; font-weight: 700; white-space: nowrap; }
.doc-pill.is-review { background: rgba(255, 255, 255, .18); color: var(--wd-white); }
.doc-pill.is-fix { background: var(--wd-white); color: var(--wd-danger); }
.profile-actions { display: flex; flex: none; gap: var(--wd-space-2); }
.profile-actions .btn-accent { padding: var(--wd-space-3) var(--wd-space-5); font-size: 14px; }
.btn-ghost { display: inline-flex; align-items: center; padding: var(--wd-space-3) 18px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--wd-radius-pill); color: var(--wd-white); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.profile-stats { display: flex; margin: 0; }
.profile-stats > div { flex: 1 1 0; display: grid; gap: 6px; }
.profile-stats > div + div { padding-left: var(--wd-space-8); border-left: 1px solid rgba(255, 255, 255, .18); }
.profile-stats dt { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.profile-stats dd { margin: 0; font-size: 28px; font-weight: 900; }
.profile-stats a { color: inherit; text-decoration: none; }

/* 홈: 승인 전 안내 줄 */
.member-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); padding: var(--wd-space-4) var(--wd-space-4) var(--wd-space-4) var(--wd-space-6); border: 1.5px solid var(--wd-black); border-radius: var(--wd-radius-lg); }
.member-notice.is-plain { padding-right: var(--wd-space-6); }
.member-notice p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; }
.notice-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wd-black); color: var(--wd-white); font-size: 12px; font-weight: 700; }
.notice-mark.is-danger { background: var(--wd-danger); }

/* 홈: 영역(진행중인 일감 · 지원 내역) */
.myp-group { display: grid; gap: var(--wd-space-4); }
.myp-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.myp-group-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.myp-group-head .more-link { gap: var(--wd-space-1); }

/* 빈 화면 · 노란 화살표 버튼 [일감 보러가기] 등 */
.myp-empty { display: grid; justify-items: center; gap: var(--wd-space-5); padding: var(--wd-space-12) var(--wd-space-4); border: 1px solid var(--wd-line); border-radius: var(--wd-space-5); text-align: center; }
.myp-empty p { margin: 0; font-size: 18px; font-weight: 700; }
.myp-empty.is-tall { padding-block: 96px; }
.myp-empty.is-review { padding-block: 90px; } /* 후기 관리 빈 화면: 높이 200, 연한 회색 글자(피그마 753:21) */
.myp-empty.is-review p { font-size: 15px; font-weight: 400; color: var(--wd-faint); }
.myp-empty[hidden] { display: none; } /* 저장한 일감: 앱이 숨겨 둔 빈 화면이 목록과 같이 보이지 않게 */
.btn-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; padding: var(--wd-space-3) 18px; 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: normal; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-go img { width: 16px; height: 16px; }
.btn-go.is-large { gap: var(--wd-space-2); padding: var(--wd-space-4) 22px; font-size: 16px; }

/* 상태 칩 (지원 내역 · 내 일감) */
.status-chips { display: flex; flex-wrap: wrap; gap: var(--wd-space-2); }
.status-chips button { padding: 9px var(--wd-space-4); 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; }
.status-chips button[aria-pressed="true"] { padding-block: 10px; border: 0; background: var(--wd-black); color: var(--wd-yellow); font-weight: 700; }

/* 목록 한 줄: 일감명 · 날짜 / 회사명 / 상태 딱지 / 버튼 */
.myp-table { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wd-black); }
.myp-row { display: flex; align-items: center; gap: var(--wd-space-6); min-height: 96px; padding: var(--wd-space-6) 0; border-bottom: 1px solid var(--wd-line); }
.myp-row[hidden] { display: none; }
.myp-row-main { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 10px; }
.myp-row-title { font-size: 18px; font-weight: 700; color: var(--wd-black); text-decoration: none; }
.myp-row-date { margin: 0; font-size: 13px; color: var(--wd-muted); }
.myp-row-company { flex: none; width: 200px; font-size: 14px; font-weight: 500; }
.myp-row-status { flex: none; display: flex; justify-content: center; width: 180px; }
.myp-row-action { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--wd-space-1); width: 180px; }
.myp-row-buttons { display: flex; gap: var(--wd-space-2); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: var(--wd-space-2) 14px; border: 1px solid var(--wd-black); border-radius: var(--wd-radius-pill); background: var(--wd-white); color: var(--wd-black); font-size: 14px; font-weight: 700; white-space: nowrap; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wd-black); }
.status-pill.is-picked { border: 0; background: var(--wd-black); color: var(--wd-white); }
.status-pill.is-picked::before { background: var(--wd-yellow); }
.status-pill.is-done { border: 0; background: var(--wd-soft); color: var(--wd-muted); }
.status-pill.is-done::before { background: #bfbfc4; }
.status-pill.is-unpaid { border: 0; background: var(--wd-yellow-soft); }
.status-pill.is-unpaid::before { background: var(--wd-yellow); }

.btn-row { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; 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: normal; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-row.is-primary { border: 0; background: var(--wd-black); color: var(--wd-yellow); }
.btn-row:disabled, .btn-row.is-waiting { border: 0; background: var(--wd-soft); color: var(--wd-muted); cursor: default; }
/* 확인이 필요한 일감: 프리랜서가 지금 눌러야 하는 일감만 모은 상자. 0건이면 숨김 */
.todo-box { display: grid; gap: var(--wd-space-2); padding: var(--wd-space-6) 28px var(--wd-space-3); border: 1.5px solid var(--wd-black); border-radius: 20px; background: var(--wd-white); }
.todo-box[hidden] { display: none; }
.todo-head { display: flex; align-items: center; gap: var(--wd-space-2); margin: 0; padding-bottom: var(--wd-space-3); border-bottom: 1px solid var(--wd-line); font-size: 20px; font-weight: 700; line-height: normal; }
.todo-count { padding: 2px 10px; border-radius: var(--wd-radius-pill); background: var(--wd-black); color: var(--wd-yellow); font-size: 14px; }
.todo-list { display: grid; gap: var(--wd-space-2); margin: 0; padding: 0; list-style: none; }
.todo-item { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); padding: 14px 0; border-bottom: 1px solid var(--wd-line); }
.todo-item:last-child { border-bottom: 0; }
.todo-text { display: grid; gap: var(--wd-space-1); min-width: 0; margin: 0; line-height: normal; }
.todo-text b { font-size: 16px; color: var(--wd-black); }
.todo-text span { font-size: 14px; color: var(--wd-muted); }

/* 저장한 일감: 일감 목록 줄 + 왼쪽 북마크 */
.saved-row { gap: var(--wd-space-6); }
.bookmark-btn { flex: none; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; }
.bookmark-btn img { width: 24px; height: 24px; }
.saved-row .btn-pill { min-width: 0; }
.board-row.is-closed .bookmark-btn { opacity: 1; }

/* ── MYP-012 내 일감 상세: 일감 상세(PRJ-003)와 같은 본문 + 맨 위 사업자 정보 + 오른쪽 진행 단계 ── */
.myjob-detail { padding-bottom: 120px; }

.jstep-card { display: grid; gap: var(--wd-space-6); padding: var(--wd-space-7); border: 1.5px solid var(--wd-black); border-radius: var(--wd-space-6); }
.jstep-card h2 { margin: 0; font-size: 18px; font-weight: 700; }
.jstep-list { list-style: none; margin: 0; padding: 0; }
.jstep { display: flex; gap: 14px; }
.jstep-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.jstep-rail::after { content: ""; flex: 1; width: 2px; background: #bfbfc4; }
.jstep.is-done .jstep-rail::after { background: var(--wd-black); }
.jstep:last-child .jstep-rail::after { display: none; }
.jstep-dot { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid #bfbfc4; border-radius: 50%; background: var(--wd-white); color: var(--wd-muted); font-size: 13px; font-weight: 700; }
.jstep.is-now .jstep-dot { border: 0; background: var(--wd-yellow); color: var(--wd-black); }
.jstep.is-done .jstep-dot { border: 0; background: url(assets/icon-step-done-28.svg) no-repeat center / 28px 28px; font-size: 0; }
.jstep-text { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 6px; padding: var(--wd-space-1) 0 var(--wd-space-5); }
.jstep:last-child .jstep-text { padding-bottom: 0; }
.jstep-label { display: flex; margin: 0; align-items: center; gap: var(--wd-space-2); font-size: 15px; font-weight: 400; color: var(--wd-muted); }
.jstep.is-done .jstep-label, .jstep.is-now .jstep-label { font-weight: 700; color: var(--wd-black); }
.jstep-label small { font-size: 12px; font-weight: 500; color: var(--wd-muted); }
.jstep-guide { margin: 0; font-size: 14px; line-height: 1.5; }
.jstep-link { font-size: 13px; font-weight: 500; color: var(--wd-black); }

/* ── MYP-013 사업자 마이페이지: 함께한 일 관리(회사명 공개 토글) ── */
.myp-guide { margin: 0; font-size: 14px; color: var(--wd-muted); }
.myp-row-toggle { flex: none; display: flex; align-items: center; gap: 10px; width: 180px; font-size: 14px; font-weight: 500; cursor: pointer; }
.myp-row-toggle .switch:not(:checked) + span { color: var(--wd-muted); }
.myp-row-action.is-auto { width: auto; } /* 버튼 칸이 버튼 폭만큼 (시안 445:793) */
/* 토글 44×24: 켜짐 = 검정 바탕 + 흰 점(오른쪽) / 꺼짐 = 회색 바탕 + 흰 점(왼쪽) */
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 24px; margin: 0; border-radius: 12px; background: var(--wd-line); cursor: pointer; transition: background .15s; }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--wd-white); transition: left .15s; }
.switch:checked { background: var(--wd-black); }
.switch:checked::before { left: 23px; }
.switch:focus-visible { outline: 2px solid var(--wd-black); outline-offset: 2px; }

/* ── PRJ-009 등록한 일감 관리: 제목 줄 + [일감 올리기], 반려 딱지, 반려된 일감 수정의 반려 사유 상자 ── */
.myp-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.btn-go.is-title { padding: var(--wd-space-3) var(--wd-space-5); font-size: 15px; }
.status-pill.is-rejected { border-color: var(--wd-danger); color: var(--wd-danger); }
.status-pill.is-rejected::before { background: var(--wd-danger); }
.reject-box { display: grid; gap: 6px; width: 100%; padding: 18px 22px; border: 1px solid var(--wd-danger); border-radius: 12px; background: var(--wd-white); }
.reject-box p { margin: 0; }
.reject-head { display: flex; align-items: center; gap: var(--wd-space-2); font-size: 13px; color: var(--wd-muted); }
.reject-head b { font-size: 15px; color: var(--wd-danger); }
.reject-reason { font-size: 15px; }
.reject-guide { font-size: 13px; color: var(--wd-muted); }
.reject-box.is-extend { border-color: var(--wd-black); } /* 모집 기간 연장 안내 (시안 515:5008) */
.reject-box.is-extend .reject-head b { color: var(--wd-black); }
.form-field.is-todo .input { border-color: var(--wd-danger); } /* 다시 골라야 하는 칸: 문구 없이 빨간 테두리 (시안 515:4855, 515:4872) */

/* ── PRJ-010 등록한 일감 상세: 지원자 목록 + 진행 단계(모집부터) ── */
.detail-meta { margin: 0; padding-top: var(--wd-space-3); font-size: 14px; font-weight: 700; line-height: 17px; color: var(--wd-muted); }
.detail-body.is-applicants { gap: var(--wd-space-6); }
.detail-body.is-applicants .ref-tag { font-weight: 500; }
.appl-head { display: grid; gap: var(--wd-space-2); }
.appl-title { display: flex; align-items: center; gap: var(--wd-space-2); margin: 0; font-size: 22px; font-weight: 700; line-height: normal; }
.appl-total { color: var(--wd-muted); }
.appl-sep { width: 1px; height: 16px; margin: 0 6px; background: #d1d1d6; }
.appl-count { font-size: 16px; }
.appl-table .myp-row { min-height: 0; }
.detail-body.is-applicants { grid-template-columns: minmax(0, 1fr); }
.appl-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--wd-space-3); }
.appl-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--wd-soft); font-size: 16px; font-weight: 700; }
.appl-text { display: grid; gap: 6px; }
.appl-text p { margin: 0; }
.appl-name { font-size: 16px; font-weight: 700; }
.appl-sub { display: flex; align-items: center; gap: var(--wd-space-1); font-size: 13px; line-height: 16px; color: var(--wd-muted); }
.appl-sub img { width: 13px; height: 13px; }
.appl-quote { flex: none; width: 130px; margin: 0; font-size: 14px; font-weight: 500; line-height: 17px; }
.appl-status { flex: none; display: flex; width: 110px; }
.appl-status .status-pill { line-height: 17px; }
.appl-actions { flex: none; display: flex; gap: var(--wd-space-2); width: 202px; }
.appl-actions .btn-row { height: 37px; }
.detail-body.is-applicants .status-chips button { line-height: 17px; }
.appl-none { margin: 0; padding: var(--wd-space-12) 0; font-size: 15px; font-weight: 500; color: var(--wd-muted); text-align: center; }
.btn-block.is-outline { border: 1px solid var(--wd-black); background: var(--wd-white); color: var(--wd-black); }
/* 지원자 줄은 칸이 고정 폭이라 1279px 이하에서는 이름 / 견적 · 상태 / 버튼 세 줄로 */
@media (max-width: 1279px) {
  .appl-table .myp-row { flex-wrap: wrap; gap: var(--wd-space-3); }
  .appl-who { flex-basis: 100%; }
  .appl-quote { flex: 1; width: auto; }
  .appl-actions { flex-basis: 100%; width: auto; }
}

@media (max-width: 1023px) {
  .myp-layout { flex-direction: column; gap: var(--wd-space-8); padding-top: var(--wd-space-8); }
  .myp-side { width: 100%; }
  .myp-main { width: 100%; }
  .myp-row-company { width: 120px; }
  .myp-row-status, .myp-row-action, .myp-row-toggle { width: auto; }
}
@media (max-width: 767px) {
  .myp-layout { padding-bottom: 64px; }
  /* 좁은 화면: 메뉴는 가로로 넘겨 보기 */
  .myp-side { display: flex; gap: var(--wd-space-6); overflow-x: auto; }
  .myp-side-title { display: none; }
  .myp-menu, .myp-menu:first-of-type { display: flex; flex: none; gap: var(--wd-space-4); padding: 0 0 var(--wd-space-3); border: 0; }
  .myp-menu a { white-space: nowrap; }
  .myp-menu-label { display: none; }
  .myp-menu a img { display: none; }
  .profile-card { padding: var(--wd-space-6) var(--wd-space-5); background-position: 0 -190px; }
  .profile-top { flex-direction: column; align-items: flex-start; }
  .profile-name { font-size: 22px; }
  .profile-stats > div + div { padding-left: var(--wd-space-4); }
  .profile-stats dd { font-size: 22px; }
  .member-notice { flex-direction: column; align-items: flex-start; padding: var(--wd-space-4); }
  .member-notice p { align-items: flex-start; }
  .myp-row { flex-wrap: wrap; gap: var(--wd-space-3); }
  .myp-row-main { flex-basis: 100%; }
  .myp-row-company { flex: 1; width: auto; }
  .myp-row-action { flex-basis: 100%; align-items: flex-start; }
  /* 좁은 화면: 지원자 줄은 이름 / 견적 · 상태 / 버튼 세 줄로 */
  .appl-who { flex-basis: 100%; }
  .appl-quote { flex: 1; width: auto; }
  .appl-status { width: auto; }
  .appl-actions { flex-basis: 100%; width: auto; }
  .todo-item { flex-wrap: wrap; }
  .myp-row-action { align-items: flex-start; }
  .saved-row .board-main { flex-basis: calc(100% - 36px); }
  /* 좁은 화면: 상황별 정리 표는 한 줄씩 세로로 */
}

/* 검토용: 상태 구분 표시 (앱으로 옮길 때는 쓰지 않음) */
.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); }
/* 메뉴바가 있는 화면: 메뉴바 위에 여백 · 점선 없이 실제 화면처럼. 상태 이름은 메뉴바 아래에 작게 떠 있음 */
section[data-state]:has(.site-header) { display: flow-root; padding-block: 0; border-top: 0; }
section[data-state]:has(.site-header) > .state-label { position: relative; z-index: 20; box-sizing: border-box; width: fit-content; max-width: calc(100% - var(--wd-space-8)); height: 24px; margin: calc(var(--wd-header-h) + var(--wd-space-2)) 0 calc(-24px - var(--wd-header-h) - var(--wd-space-2)) var(--wd-space-4); padding: 0 10px; overflow: hidden; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-pill); background: rgba(255, 255, 255, .92); font-weight: 500; line-height: 22px; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
section[data-state]:has(.site-header):not(:has(.site-footer)) { padding-bottom: var(--wd-space-10); } /* COM 메뉴바만 있는 구역: 라벨 자리 */
.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; }

/* ── 11/09 함께한 일(FRL-001) · 포트폴리오(PTF-001 · 002, MYP-008) · 후기(RVW-001 · 004 · 005) ── */
/* 대표 이미지: 그라데이션 + 원 선 + 큰 태그 글씨. 시안의 예시 이미지(508:7854 · 508:8043). 실제 이미지를 넣으면 <img>가 덮음 */
.cover { position: relative; display: block; overflow: hidden; height: 248px; border-radius: var(--wd-radius-lg); background: linear-gradient(148deg, var(--wd-yellow) 0%, var(--wd-white) 100%); color: var(--wd-black); }
.cover::before { content: ""; position: absolute; left: 146px; top: -77px; width: 264px; height: 264px; border: 1.5px solid var(--wd-black); border-radius: 50%; }
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover:has(> img)::before { display: none; }
.cover-tag { position: absolute; left: 20px; top: 147px; font-size: 48px; font-weight: 900; line-height: normal; letter-spacing: -1.92px; white-space: nowrap; }
.cover.is-web { background: radial-gradient(ellipse 42% 38% at 22% 10%, rgba(255, 228, 95, .9), rgba(255, 228, 95, 0)), var(--wd-black); color: var(--wd-white); }
.cover.is-film { background: linear-gradient(180deg, var(--wd-black) 0%, var(--wd-muted) 100%); color: var(--wd-yellow); }
.cover.is-growth { background: linear-gradient(148deg, var(--wd-soft) 0%, var(--wd-white) 60%, var(--wd-yellow) 100%); }
.cover.is-app { background: radial-gradient(ellipse 40% 36% at 55% 10%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)), var(--wd-yellow); }
.cover.is-poster { background: linear-gradient(180deg, var(--wd-black) 0%, var(--wd-black) 70%, var(--wd-yellow) 100%); color: var(--wd-white); }
.cover.is-web::before, .cover.is-poster::before { border-color: rgba(255, 255, 255, .3); }
.cover.is-film::before { border-color: rgba(255, 228, 95, .3); }

/* 목록 화면 공통: 제목 + 칩 + 카드 (함께한 일 · 포트폴리오) */
.board-page { display: grid; gap: var(--wd-space-10); padding: 56px 0 96px; line-height: normal; }
.board-page .page-title { font-size: 40px; letter-spacing: -1px; }
.board-page .chip { padding: 9px var(--wd-space-4); }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wd-space-10) var(--wd-space-6); list-style: none; margin: 0; padding: 0; }
.story-card { display: grid; align-content: start; gap: 14px; color: var(--wd-black); text-decoration: none; }
.story-card b { font-size: 20px; font-weight: 700; }
.story-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wd-muted); }
.story-card time { font-size: 13px; color: var(--wd-muted); }

/* 함께한 일 상세: 가운데 920px */
.story-detail { display: grid; gap: var(--wd-space-10); width: min(920px, 100%); margin: 0 auto; padding: 56px 0 96px; line-height: normal; }
.story-crumb { justify-self: start; font-size: 14px; color: var(--wd-muted); text-decoration: none; }
.story-head { display: grid; gap: var(--wd-space-3); }
.story-head h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.72px; }
.story-head p { margin: 0; font-size: 14px; color: var(--wd-muted); }
.story-detail .cover.is-hero { height: 520px; }
.story-detail .cover.is-photo { height: 400px; }
.story-body { display: grid; gap: var(--wd-space-10); }
.story-text { margin: 0; font-size: 17px; line-height: 1.7; }
.story-more { display: grid; gap: var(--wd-space-5); }
.story-more h2 { margin: 0; font-size: 22px; font-weight: 700; }
.story-more .story-grid { gap: var(--wd-space-5); }
.story-more .story-card { gap: 10px; }
.story-more .story-card b { font-size: 16px; }
.story-more .cover { height: 180px; }

/* 포트폴리오 목록 (4칸) · 포트폴리오 관리 (3칸) */
.folio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wd-space-10) var(--wd-space-5); list-style: none; margin: 0; padding: 0; }
.folio-grid.is-manage { grid-template-columns: repeat(3, 1fr); }
.folio-grid > li[hidden] { display: none; }
.folio-card { display: grid; align-content: start; gap: var(--wd-space-3); color: var(--wd-black); text-decoration: none; }
.folio-card .cover { height: 220px; }
.folio-card b { font-size: 17px; font-weight: 700; }
.folio-owner { font-size: 14px; color: var(--wd-muted); }
.folio-actions { display: flex; gap: var(--wd-space-2); padding-top: var(--wd-space-1); }
.btn-go[hidden] { display: none; } /* 포트폴리오 빈 화면: 제목 옆 [포트폴리오 등록] 숨김 */
.btn-row.is-sm { padding: var(--wd-space-2) var(--wd-space-4); font-size: 13px; }
.list-empty[hidden] { display: none; }

/* 포트폴리오 상세: 제목 · 작성자 · 평균 / PDF 보기 / 받은 후기 */
.folio-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wd-space-10); padding: 56px 0 96px; line-height: normal; }
.folio-detail > .breadcrumb { justify-self: start; }
.folio-head { display: grid; justify-items: start; gap: var(--wd-space-3); }
.folio-head h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.72px; }
.folio-meta { margin: 0; font-size: 15px; color: var(--wd-muted); }
.folio-rating { display: inline-flex; align-items: center; gap: var(--wd-space-1); font-size: 14px; font-weight: 700; color: var(--wd-black); }
.folio-rating img { width: 15px; height: 15px; }
.pdf-viewer { display: grid; justify-items: center; align-content: start; gap: var(--wd-space-6); height: 1400px; overflow-y: auto; padding: var(--wd-space-10); border-radius: 20px; background: var(--wd-soft); }
.pdf-page { display: grid; grid-template-rows: 49% auto; width: min(820px, 100%); aspect-ratio: 820 / 1060; background: var(--wd-white); box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.pdf-page .cover { height: auto; border-radius: 0; }
.pdf-page b { padding: var(--wd-space-10) 48px; font-size: 24px; font-weight: 700; }

/* 받은 후기 상자 + 카드 넘기기 (시안 669:361 · 669:466 · 669:571) */
.review-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wd-space-6); padding: var(--wd-space-8); border: 1.5px solid var(--wd-line); border-radius: var(--wd-space-6); background: var(--wd-white); }
.review-box-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.review-box-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wd-space-3); margin: 0; font-size: 24px; font-weight: 700; }
.review-score { display: inline-flex; align-items: center; gap: var(--wd-space-1); font-size: 18px; font-weight: 900; }
.review-score img { width: 18px; height: 18px; }
.review-score small { font-size: 15px; font-weight: 400; color: var(--wd-muted); }
.review-all { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0; border: 0; background: none; color: var(--wd-black); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.review-all img { width: 16px; height: 16px; }
.review-carousel { position: relative; }
.review-viewport { overflow: hidden; }
.review-track { display: flex; gap: var(--wd-space-5); list-style: none; margin: 0; padding: 0; transition: transform .3s ease; }
.review-card { flex: none; display: grid; align-content: start; gap: 14px; width: calc((100% - 40px) / 2.5); padding: var(--wd-space-6); border-radius: 20px; background: var(--wd-soft); }
.review-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wd-body); }
.review-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wd-space-2); font-size: 14px; font-weight: 700; }
.review-by time, .review-item time { font-size: 13px; font-weight: 400; color: var(--wd-faint); }
.carousel-btn { position: absolute; top: 60px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--wd-heart-off); border-radius: 50%; background: var(--wd-white); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); cursor: pointer; }
.carousel-btn.is-prev { left: -22px; }
.carousel-btn.is-next { right: -22px; }
.carousel-btn[hidden] { display: none; }
.carousel-btn img { width: 18px; height: 18px; }
.review-none { margin: 0; padding: var(--wd-space-10) 0; font-size: 15px; color: var(--wd-muted); text-align: center; }
.hearts { display: inline-flex; align-items: center; gap: 3px; }
.hearts img { width: 16px; height: 16px; }
.hearts.is-sm { gap: 2px; }
.hearts.is-sm img { width: 14px; height: 14px; }

/* 평균 요약 (후기 목록 팝업 · 후기 관리) */
.score-box { display: flex; align-items: center; gap: var(--wd-space-4); padding: var(--wd-space-5) var(--wd-space-6); border-radius: 20px; background: var(--wd-soft); line-height: normal; }
.score-box.is-page { gap: var(--wd-space-5); padding: var(--wd-space-6) var(--wd-space-7); }
.score-big { display: inline-flex; align-items: center; gap: var(--wd-space-2); font-size: 32px; font-weight: 900; }
.score-big img { width: 28px; height: 28px; }
.score-meta { display: grid; gap: var(--wd-space-1); text-align: left; }
.modal .score-meta small, .score-meta small { font-size: 13px; color: var(--wd-muted); }
.score-meta b { font-size: 15px; }

/* 후기 한 줄 (후기 목록 팝업 · 후기 관리) */
.review-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.review-item { display: grid; gap: 10px; padding: var(--wd-space-5) 0; border-bottom: 1px solid var(--wd-line); }
.review-list.is-page .review-item { padding: var(--wd-space-6) 0; }
.review-item-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-3); }
.review-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wd-space-2); font-size: 15px; font-weight: 700; }
.review-who small { font-size: 14px; font-weight: 400; color: var(--wd-muted); }
.review-item time { flex: none; }
.modal .review-item p, .review-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wd-body); }
/* 11/12 운영진이 숨긴 후기: 쓴 사람의 쓴 후기에만 회색 꼬리표 + 글 회색 (피그마 813:9752) */
.review-tag { flex: none; padding: 2px var(--wd-space-2); border-radius: 4px; background: #f1f2f4; color: #6b7280; font-size: 12px; font-weight: 500; line-height: normal; white-space: nowrap; }
.review-item.is-hidden p { color: #9ca3af; }

/* 후기 목록 팝업 (RVW-005, 시안 658:1485) */
.modal.is-reviews { justify-items: stretch; gap: var(--wd-space-5); width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 36px var(--wd-space-10); text-align: left; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-4); }
.modal-close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.modal-close img { width: 20px; height: 20px; }
.sort-tabs { display: flex; gap: 14px; }
.sort-tabs button { padding: 0; border: 0; background: none; color: var(--wd-faint); font: inherit; font-size: 14px; cursor: pointer; }
.sort-tabs button[aria-pressed="true"] { color: var(--wd-black); font-weight: 700; }
.review-scroll { height: 368px; overflow-y: auto; }

/* 후기 관리 탭 (RVW-004, 시안 668:96 · 659:209) */
.line-tabs { display: flex; gap: var(--wd-space-7); border-bottom: 1px solid var(--wd-line); }
.line-tabs button { margin-bottom: -1px; padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--wd-muted); font: inherit; font-size: 17px; cursor: pointer; }
.line-tabs button b { color: var(--wd-faint); }
.line-tabs button[aria-selected="true"] { border-bottom-color: var(--wd-black); color: var(--wd-black); font-weight: 700; }
.line-tabs button[aria-selected="true"] b { color: inherit; }
.tab-wrap { display: grid; gap: var(--wd-space-6); }
.tab-panel[hidden] { display: none; }

/* 후기 쓰기 팝업 (RVW-001, 시안 664:428 외) */
.modal.is-review { justify-items: stretch; width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.modal.is-review h2, .modal.is-confirm h2 { letter-spacing: -0.36px; }
.review-head { display: grid; gap: var(--wd-space-2); }
.heart-pick { display: grid; justify-items: center; gap: var(--wd-space-3); }
.modal .heart-pick > p { font-size: 14px; font-weight: 700; color: var(--wd-black); }
.heart-pick > div { display: flex; }
.heart-pick label { position: relative; display: block; margin-right: -6px; cursor: pointer; }
.heart-pick label:last-child { margin-right: 0; }
.heart-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.heart-pick input:focus-visible + img { outline: 2px solid var(--wd-black); outline-offset: -4px; border-radius: 8px; }
.heart-pick img { display: block; width: 40px; height: 40px; }
.review-field { display: grid; gap: var(--wd-space-3); }
.review-text { display: block; width: 100%; height: 200px; padding: 12px 14px; border: 1.5px solid var(--wd-line); border-radius: var(--wd-radius-lg); background: var(--wd-white); color: var(--wd-black); font: inherit; font-size: 15px; line-height: 1.65; text-align: left; resize: none; outline: 0; }
.review-text::placeholder { color: var(--wd-faint); }
.review-text:focus, .review-text:not(:placeholder-shown) { border-color: var(--wd-black); }
.review-foot { display: flex; justify-content: space-between; gap: var(--wd-space-4); text-align: left; }
.modal .review-foot p { font-size: 13px; line-height: 1.6; }
.review-count { flex: none; font-size: 13px; line-height: 1.6; color: var(--wd-muted); }
.modal.is-review .btn-block:disabled { background: var(--wd-heart-off); color: var(--wd-muted); opacity: 1; }

/* 포트폴리오 올리기 (MYP-008, 시안 511:1638) */
.page-head .page-sub { margin: 0; font-size: 15px; color: var(--wd-muted); }
.upload-box[hidden] { display: none; }
.summary-card.is-folio .btn-block:disabled { background: var(--wd-heart-off); color: var(--wd-muted); opacity: 1; }
.summary-card.is-folio .summary-info dd { font-weight: 400; overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  .story-grid, .folio-grid.is-manage { grid-template-columns: repeat(2, 1fr); }
  .folio-grid { grid-template-columns: repeat(3, 1fr); }
  .story-detail .cover.is-hero { height: 360px; }
  .story-detail .cover.is-photo { height: 280px; }
  .review-card { width: calc((100% - 20px) / 1.5); }
}
@media (max-width: 767px) {
  .board-page, .story-detail, .folio-detail { gap: var(--wd-space-8); padding: var(--wd-space-8) 0 64px; }
  .board-page .page-title { font-size: 30px; }
  .story-grid, .folio-grid.is-manage { grid-template-columns: 1fr; gap: var(--wd-space-8); }
  .folio-grid { grid-template-columns: repeat(2, 1fr); gap: var(--wd-space-6) var(--wd-space-3); }
  .folio-grid:not(.is-manage) .cover { height: 150px; }
  .folio-grid:not(.is-manage) .cover-tag { top: 90px; font-size: 32px; }
  .story-head h1, .folio-head h1 { font-size: 26px; }
  .story-detail .cover.is-hero { height: 240px; }
  .story-detail .cover.is-photo { height: 200px; }
  .story-text { font-size: 16px; }
  .pdf-viewer { height: 640px; padding: var(--wd-space-3); gap: var(--wd-space-3); }
  .pdf-page b { padding: var(--wd-space-4); font-size: 16px; }
  .review-box { padding: var(--wd-space-5); }
  .review-box-head { flex-direction: column; align-items: flex-start; }
  .review-card { width: 85%; }
  .carousel-btn.is-prev { left: -14px; }
  .carousel-btn.is-next { right: -14px; }
  .modal.is-reviews, .modal.is-review { padding: var(--wd-space-6) var(--wd-space-5); }
  .review-foot { flex-direction: column; gap: var(--wd-space-1); }
  .review-item-top { align-items: flex-start; }
  .score-box.is-page { padding: var(--wd-space-5); }
  .line-tabs button { font-size: 16px; }
}

/* ── 11/10 피드백: 빈 화면 부제 · 숨김 · 포트폴리오 수정 파일 칸 ── */
.myp-empty p.myp-empty-sub { font-size: 15px; font-weight: 400; color: var(--wd-muted); }
.folio-grid[hidden], .pager[hidden], .myp-guide[hidden] { display: none; }
.board-page .list-head .btn-go { flex: none; }
.upload-box.is-file { padding: var(--wd-space-7) var(--wd-space-4); }
.upload-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wd-space-3); line-height: normal; }
.upload-box .upload-file b { font-size: 15px; font-weight: 700; line-height: normal; overflow-wrap: anywhere; }
.upload-box .upload-file small { font-size: 14px; line-height: normal; color: var(--wd-muted); }
.upload-file u { font-size: 14px; font-weight: 500; color: var(--wd-black); }
/* ── 11/10 후기 작성 단계: 프리랜서별 체크 · 평균 눌러 후기 목록 열기 ── */
.jstep-people { display: flex; flex-direction: column; gap: var(--wd-space-2); margin: var(--wd-space-1) 0 0; padding: 0; list-style: none; }
.jstep-person { display: flex; align-items: center; gap: var(--wd-space-2); font-size: 14px; line-height: normal; }
.jstep-person img { flex: none; width: 18px; height: 18px; }
.jstep-person b { font-weight: 700; }
.jstep-person a { font-size: 13px; font-weight: 700; color: var(--wd-black); text-decoration: underline; text-underline-offset: 2px; }
.jstep-person small { font-size: 13px; color: var(--wd-muted); }
.rating-open { display: inline-flex; align-items: center; gap: var(--wd-space-1); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.rating-open:hover > span, .rating-open:focus-visible > span { text-decoration: underline; text-underline-offset: 2px; }
.jstep-person.is-wait b, .jstep-person.is-wait small { color: var(--wd-faint); } /* 1달 전인 사람: 회색 이름 · 'MM.DD부터'(누를 수 없음) */

/* ── 11/10 후기 요청 팝업(RVW-006): 일감 줄 · 4건 넘으면 목록 안 스크롤 ── */
.modal.is-request h2 { letter-spacing: -0.36px; }
.request-list { display: grid; gap: var(--wd-space-2); width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.request-list.is-scroll { max-height: 304px; overflow-y: auto; }
.request-row { display: flex; align-items: center; gap: var(--wd-space-3); padding: var(--wd-space-4) var(--wd-space-4) var(--wd-space-4) var(--wd-space-5); border-radius: var(--wd-space-4); background: var(--wd-soft); }
.request-text { display: grid; flex: 1; gap: var(--wd-space-1); min-width: 0; }
.request-text b { font-size: 15px; font-weight: 700; color: var(--wd-black); }
.request-text small { font-size: 13px; color: var(--wd-muted); }
.request-row .btn-row { flex: none; padding: 9px 16px; }
.request-list.is-one .request-row { padding-inline: var(--wd-space-4); }
.request-list.is-one .request-text { justify-items: center; text-align: center; } /* 1건: 회색 칸 글자 가운데(피그마 720:22) */
/* 5건 이상: 4건 높이만 보이고 목록 안 스크롤. 스크롤바는 목록 오른쪽 바깥 10px, 굵기 4px(피그마 752:21) */
.request-list.is-scroll { width: calc(100% + 14px); margin-right: -14px; padding-right: 10px; }
@supports not selector(::-webkit-scrollbar) { .request-list.is-scroll { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; } }
.request-list.is-scroll::-webkit-scrollbar { width: 4px; }
.request-list.is-scroll::-webkit-scrollbar-thumb { border-radius: 2px; background: #d4d4d8; }

/* ── 11/11 포트폴리오 등록 · 수정: PDF 칸 아래 빨간 개인정보 안내 ── */
.field-warn { margin: 10px 0 0; font-size: 13px; font-weight: 500; line-height: normal; color: var(--wd-danger); }