/* ============================================================
   인재잇다 — 서브 페이지 스타일
   검색 / 목록 / 폼 / 인증 / 요금 / FAQ / 문서 / 모달
   ============================================================ */

/* ---------- 검색 레이아웃 (사이드 필터 + 결과) ---------- */
.srch { display: grid; grid-template-columns: 258px 1fr; gap: 24px; align-items: start; }
.fside {
  position: sticky; top: calc(var(--header-h) + 14px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px;
}
.fside__grp + .fside__grp { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.fside__grp h4 { font-size: 0.84rem; font-weight: 800; margin-bottom: 11px; letter-spacing: -0.02em; }
.fopt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.86rem; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.fopt input { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }
.fopt .n { margin-left: auto; font-size: 0.76rem; color: var(--faint); font-weight: 700; }
.fside__reset { margin-top: 18px; }

.listhead {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.listhead__count { font-size: 0.92rem; font-weight: 700; color: var(--ink-2); }
.listhead__count b { color: var(--accent); font-weight: 800; }
.sortbar { display: flex; gap: 3px; background: var(--surface-2); padding: 3px; border-radius: 10px; }
.sortbar button { padding: 7px 14px; border-radius: 8px; font-size: 0.83rem; font-weight: 700; color: var(--muted); }
.sortbar button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

.srch .talents { grid-template-columns: repeat(3, 1fr); }

/* ---------- 폼 페이지 ---------- */
.formwrap { max-width: 800px; margin: 0 auto; }
.fcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 32px; box-shadow: var(--shadow-sm);
}
.fcard + .fcard { margin-top: 16px; }
.fcard__title { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
.fcard__desc { font-size: 0.85rem; color: var(--muted); margin-bottom: 20px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frow + .frow { margin-top: 14px; }
.frow--1 { grid-template-columns: 1fr; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > label { font-size: 0.79rem; font-weight: 800; color: var(--ink-2); }
.fld > label .req { color: var(--danger); margin-left: 2px; }
.fld input, .fld select, .fld textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fld textarea { resize: vertical; min-height: 110px; line-height: 1.6; font-weight: 500; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld .hint { font-size: 0.76rem; color: var(--faint); font-weight: 600; }
.fsubmit { margin-top: 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fsubmit .note { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

.pillbox { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-2); background: var(--surface); transition: all 0.15s;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 인증 페이지 ---------- */
.auth { display: grid; place-items: center; padding: 52px 20px 70px; }
.authcard {
  width: 100%; max-width: 430px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 32px; box-shadow: var(--shadow);
}
.authcard h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; text-align: center; }
.authcard .lead { font-size: 0.86rem; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.6; }
.authtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin: 22px 0 20px; }
.authtabs button { padding: 11px; border-radius: 9px; font-size: 0.88rem; font-weight: 700; color: var(--muted); }
.authtabs button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.authform { display: flex; flex-direction: column; gap: 12px; }
.authmeta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.authmeta a:hover { color: var(--accent); }
.authdiv { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--faint); font-size: 0.78rem; font-weight: 700; }
.authdiv::before, .authdiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authfoot { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.authfoot a { color: var(--accent); font-weight: 800; }

/* ---------- 요금 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px; position: relative;
}
.plan--hl { border: 2px solid var(--accent); box-shadow: var(--glow); }
.plan__flag { position: absolute; top: -12px; left: 26px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.plan h3 { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.03em; }
.plan__desc { font-size: 0.83rem; color: var(--muted); margin-top: 7px; min-height: 38px; line-height: 1.55; }
.plan__price { margin: 14px 0 18px; display: flex; align-items: baseline; gap: 5px; }
.plan__price b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.045em; }
.plan__price span { font-size: 0.84rem; font-weight: 700; color: var(--muted); }
.plan ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.plan li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; color: var(--ink-2); font-weight: 600; line-height: 1.55; }
.plan li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--ok); }

.ptable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ptable th, .ptable td { padding: 14px 18px; text-align: left; font-size: 0.88rem; border-bottom: 1px solid var(--line-2); }
.ptable th { background: var(--surface-2); font-weight: 800; color: var(--ink-2); font-size: 0.82rem; }
.ptable td { color: var(--ink-2); font-weight: 600; }
.ptable tr:last-child td { border-bottom: none; }
.ptable td b { font-weight: 800; color: var(--ink); }

/* ---------- FAQ 아코디언 ---------- */
.faq { display: flex; flex-direction: column; gap: 9px; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 17px 20px;
  font-size: 0.93rem; font-weight: 700; text-align: left; color: var(--ink);
}
.faq__q .qm { color: var(--accent); font-weight: 800; flex-shrink: 0; }
.faq__q .ar { margin-left: auto; color: var(--faint); transition: transform 0.2s; display: flex; }
.faq__item.is-open .faq__q .ar { transform: rotate(90deg); }
.faq__a { display: none; padding: 0 20px 18px 50px; font-size: 0.88rem; color: var(--muted); line-height: 1.72; }
.faq__item.is-open .faq__a { display: block; }

/* ---------- 콘텐츠 문서 ---------- */
.doc { max-width: 880px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 36px; }
.doc h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.03em; margin: 26px 0 10px; }
.doc h2:first-child { margin-top: 0; }
.doc p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.8; margin-bottom: 10px; }
.doc ul { margin: 0 0 12px; }
.doc li { position: relative; padding-left: 15px; font-size: 0.89rem; color: var(--ink-2); line-height: 1.78; }
.doc li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.doc .note { background: var(--accent-soft); border-radius: 12px; padding: 15px 18px; font-size: 0.86rem; color: var(--accent-ink); font-weight: 600; line-height: 1.7; margin: 14px 0; }

/* ---------- 모달 ---------- */
.modal { position: fixed; inset: 0; z-index: 400; display: none; }
.modal.is-open { display: block; }
.modal__dim { position: absolute; inset: 0; background: rgba(9, 15, 28, 0.55); }
.modal__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow: auto;
  background: var(--surface); border-radius: 20px; padding: 28px 28px 24px; box-shadow: var(--shadow-lg);
}
.modal__x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.modal__x:hover { background: var(--surface-2); color: var(--ink); }
.modal h3 { font-size: 1.14rem; font-weight: 800; letter-spacing: -0.03em; }
.modal p { font-size: 0.88rem; color: var(--muted); margin-top: 9px; line-height: 1.66; }
.modal__rows { margin: 18px 0; display: flex; flex-direction: column; gap: 9px; }
.modal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 11px; font-size: 0.87rem; font-weight: 700; }
.modal__row .k { color: var(--muted); font-weight: 600; }
.modal__row.total { background: var(--accent-soft); color: var(--accent-ink); }
.modal__row.total b { font-size: 1.02rem; }

/* ---------- 프리랜서 랜딩 ---------- */
/* 프리랜서 면은 기업(에메랄드)과 구분되도록 따뜻한 브론즈 계열 */
.fhero {
  background: linear-gradient(135deg, #14100a 0%, #4d3210 52%, #9a6416 100%);
  color: #fff; padding: 58px 0 54px; position: relative; overflow: hidden;
}
.fhero::after { content: ""; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,0.07); }
.fhero__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; position: relative; }
.fhero__eyebrow { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; opacity: 0.82; }
.fhero h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.042em; line-height: 1.26; margin: 14px 0 14px; }
.fhero p { font-size: 1rem; opacity: 0.88; line-height: 1.66; max-width: 640px; }
.fhero__cta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.fhero__stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; }
.fhero__stats b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.035em; }
.fhero__stats span { display: block; font-size: 0.8rem; opacity: 0.75; margin-top: 5px; font-weight: 600; }

@media (max-width: 1024px) {
  .srch { grid-template-columns: 1fr; }
  .fside { position: static; }
  .srch .talents { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .srch .talents { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; }
  .fcard { padding: 24px 20px; }
  .doc { padding: 26px 20px; }
  .fhero h1 { font-size: 1.68rem; }
  .ptable th, .ptable td { padding: 11px 12px; font-size: 0.82rem; }
}