/* ══════════════════════════════════════════════════════════════
   크루딧 (CREWDIT) — 서버 화면 추가 스타일
   ㈜매스티지 · 2026-08-16

   crewdit.css 를 먼저 불러온 뒤 이 파일을 불러옵니다.
   시안에 없던 요소(오류 문구·입력칸·기록 목록)만 여기에 있습니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 상태 색 토큰 (성공 · 대기 · 거절) ──────────
   crewdit.css 는 이 토큰을 .my-scope / .mp-scope / .vf-scope 안에만 두었습니다.
   서버 화면은 그 바깥(등록폼 · 크레딧 · 커뮤니티)에서도 같은 색을 쓰므로,
   여기서 body 에 한 번 깔아 둡니다. 값은 crewdit.css 와 똑같습니다.
   :root 가 아니라 body 이므로, 안쪽 스코프가 다시 정하면 그쪽이 이깁니다.
   ─────────────────────────────────────────── */
body{
  --ok:#2A7A4B;      --ok-lt:#EAF6EE;     --ok-line:#CFE6D9;
  --wait:#A96A00;    --wait-lt:#FFF4E2;   --wait-line:#F2DFBE;
  --rej:#C2334D;     --rej-lt:#FDEDF1;    --rej-line:#F3CBD5;
}

/* ── 입력칸 ────────────────────────────────── */
.ws-in{
  width:100%;height:46px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--field);font:inherit;font-size:14px;color:var(--ink);font-weight:600;
  transition:border-color .16s,background .16s;
}
.ws-in:focus{outline:2px solid var(--brand);outline-offset:-1px;background:#fff}
.ws-in::placeholder{color:var(--mute);font-weight:500}
.ws-in.ws-bad{border-color:#E39A9A;background:#FDF6F6}

.ws-err{display:block;margin-top:6px;font-size:12px;font-weight:700;color:#B23A3A;line-height:1.6}

.au-slabel em{
  font-style:normal;font-weight:600;font-size:11.5px;color:var(--mute);letter-spacing:0;
}

/* ── 알림 띠 ───────────────────────────────── */
.ws-alert{
  padding:13px 15px;border-radius:var(--r-sm);font-size:13px;line-height:1.65;
  margin-bottom:16px;font-weight:600;
}
.ws-alert.ng{background:#FDF6F6;border:1px solid #F1D8D8;color:#8E2F2F}
.ws-alert.ok{background:#F1FAF4;border:1px solid #CBE8D6;color:#1E6B45}
.ws-alert.wn{background:#FEF9EE;border:1px solid #F0DDB4;color:#6B5522}

/* ── 직군 고르기 ───────────────────────────── */
.ws-jobs{display:flex;gap:6px;flex-wrap:wrap}
.ws-job{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;
  font-size:13px;font-weight:700;color:var(--body);cursor:pointer;transition:.16s;
}
.ws-job:hover{border-color:var(--brand-lt2)}
.ws-job.on,.ws-job:has(input:checked){
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.ws-job input{width:14px;height:14px;accent-color:#fff;cursor:inherit}

/* ── 자동가입 프로그램 잡는 칸 (사람에겐 안 보임) ── */
.ws-hp{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
}

/* ── 키:값 목록 ────────────────────────────── */
.ws-kv{display:grid;gap:1px;background:var(--line);border-radius:var(--r-sm);overflow:hidden}
.ws-kv > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 15px;background:#fff;font-size:13px;
}
.ws-kv span{color:var(--mute);font-weight:700;flex:none}
.ws-kv b{color:var(--ink);font-weight:800;text-align:right;min-width:0;overflow-wrap:anywhere}

/* ── 알림 목록 ─────────────────────────────── */
.ws-noti{
  padding:13px 0;border-bottom:1px solid var(--line);
}
.ws-noti:last-child{border-bottom:0;padding-bottom:0}
.ws-noti b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:3px}
.ws-noti p{font-size:12.5px;line-height:1.7;color:var(--body);margin-bottom:4px}
.ws-noti span{font-size:11px;color:var(--mute);font-weight:600}

/* ── 로그인 기록 ───────────────────────────── */
.ws-log{display:grid;gap:1px;background:var(--line);border-radius:var(--r-sm);overflow:hidden}
.ws-log > div{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 15px;background:#fff;font-size:12.5px;color:var(--mute);font-weight:600;
}
.ws-log b{margin-left:auto;font-weight:800}
.ws-log b.y{color:#0F9D58}
.ws-log b.n{color:#B23A3A}
.ws-mono{font-family:'SF Mono',Consolas,monospace;font-size:11.5px;color:var(--body)}

.ws-note{margin-top:10px;font-size:11.5px;line-height:1.7;color:var(--mute)}

/* ── 준비 중 표시 ──────────────────────────── */
.ws-soon{
  margin-left:6px;font-size:10.5px;font-weight:800;color:var(--mute);
  background:var(--field);padding:2px 7px;border-radius:4px;
}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── 카드가 여러 장 이어질 때 간격 ─────────── */
.au-stage .au-card + .au-card{margin-top:14px}
.au-stage .au-card .btn + .btn{margin-top:8px}

@media (max-width:560px){
  .ws-kv > div{flex-direction:column;gap:2px}
  .ws-kv b{text-align:left}
  .ws-log > div{gap:8px}
  .ws-log b{margin-left:0;width:100%}
}

/* 비밀번호 규칙 안내 — 시안은 <li> 기준이라 <span> 도 같은 모양으로 */
.au-rules span{
  display:flex;gap:7px;align-items:flex-start;
  font-size:11.5px;line-height:1.6;color:var(--mute);font-weight:600;
}
.au-rules span:before{
  content:"";width:13px;height:13px;border-radius:50%;border:1.5px solid #D5D7E0;
  flex:none;margin-top:2px;
}

/* ══════════════════════════════════════════════════════════════
   관리자 3·4단계 (tf-) — 2단계 인증 · 회원 관리 · 크론
   ══════════════════════════════════════════════════════════════ */

/* ── 2단계 인증 화면 ───────────────────────── */
.ad2-lgmark{display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:15px;font-weight:800;color:#fff;letter-spacing:.06em;margin-bottom:22px}
.ad2-lgmark svg{width:20px;height:20px;color:var(--brand)}
.ad2-lgmark em{font-style:normal;color:#A99BFA}
.tf-card{width:100%;max-width:430px;margin:0 auto;background:#23252F;border:1px solid #32343F;
  border-radius:var(--r-lg);padding:28px 30px;color:#9295A8}
.tf-card h1{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.025em;margin-bottom:8px;line-height:1.4}
.tf-sub{font-size:13px;line-height:1.75;color:#9295A8;margin-bottom:20px}
.tf-sub b{color:#D7D9E4;font-weight:800}
.tf-steps{margin:0 0 18px 18px;display:grid;gap:11px}
.tf-steps li{font-size:13.5px;color:#B9BCCB;line-height:1.6}
.tf-steps li b{display:block;color:#E4E6EF;font-weight:800;margin-bottom:2px}
.tf-steps li span{font-size:12.5px;color:#7B7E90;line-height:1.65}
.tf-steps li span b{display:inline;color:#9295A8}
.tf-kv{display:grid;gap:1px;background:#32343F;border-radius:var(--r-sm);overflow:hidden;margin-bottom:14px}
.tf-kv > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 14px;background:#1B1C24;font-size:12.5px}
.tf-kv span{color:#63667A;font-weight:700;flex:none}
.tf-kv b{color:#E4E6EF;font-weight:800;text-align:right;min-width:0;overflow-wrap:anywhere}
.tf-secret{font-family:'SF Mono',Consolas,monospace!important;font-size:14px!important;
  letter-spacing:.08em;color:#C4B6FF!important}
.tf-note{font-size:12px;line-height:1.7;color:#7B7E90;margin-bottom:14px}
.tf-note b{color:#9295A8}
.tf-code{text-align:center;font-size:24px!important;letter-spacing:.35em;font-weight:800!important;
  height:56px!important;background:#1B1C24!important;border-color:#32343F!important;color:#fff!important}
.tf-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:14px 0}
.tf-codes span{font-family:'SF Mono',Consolas,monospace;font-size:13.5px;letter-spacing:.04em;
  background:#1B1C24;border:1px solid #32343F;border-radius:6px;padding:9px 10px;
  text-align:center;color:#C4B6FF;font-weight:700}
.tf-lost{margin-top:18px;padding-top:16px;border-top:1px solid #32343F}
.tf-lost summary{font-size:12.5px;color:#7B7E90;cursor:pointer;font-weight:700}
.tf-lost summary:hover{color:#B9BCCB}
.tf-lost p{font-size:12.5px;color:#7B7E90;margin:10px 0;line-height:1.7}
.tf-lost .ws-in{background:#1B1C24;border-color:#32343F;color:#E4E6EF;margin-bottom:8px}
.tf-foot{text-align:center;margin-top:20px;font-size:12px;color:#63667A}
.tf-foot a{color:#9295A8;font-weight:700}
.tf-card .ws-alert.ng{background:#3A2222;border-color:#5A2E2E;color:#F0B4B4}
.tf-card .ws-alert.wn{background:#3A3222;border-color:#5A4B26;color:#DDB262}

/* ── 임시 비밀번호 · 복구 코드 상자 ───────────── */
.tf-pwbox{border:1px solid var(--brand-lt2);background:var(--brand-lt);border-radius:var(--r-md);
  padding:18px 20px;margin-bottom:18px}
.tf-pwhd{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.tf-pwhd svg{width:17px;height:17px;color:var(--brand-dk)}
.tf-pwhd b{font-size:14px;font-weight:800;color:var(--ink)}
.tf-pwval{font-family:'SF Mono',Consolas,monospace;font-size:26px;font-weight:800;
  letter-spacing:.06em;color:var(--brand-dk);background:#fff;border:1px solid var(--brand-lt2);
  border-radius:var(--r-sm);padding:14px 16px;text-align:center;margin-bottom:12px;
  user-select:all;overflow-wrap:anywhere}
.tf-pwbox p{font-size:12.5px;line-height:1.7;color:var(--body);margin-bottom:5px}
.tf-pwwarn{color:#B23A3A!important;font-weight:700}
.tf-pwbox .tf-codes{grid-template-columns:repeat(2,1fr)}
.tf-pwbox .tf-codes span{background:#fff;border-color:var(--brand-lt2);color:var(--brand-dk)}

/* ── 회원 목록 ─────────────────────────────── */
.tf-search{display:flex;gap:8px;margin-bottom:12px}
.tf-search .ws-in{flex:1;min-width:0}
.tf-mlist{display:grid;gap:9px}
.tf-m{display:flex;gap:16px;align-items:flex-start;padding:15px 17px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;flex-wrap:wrap}
.tf-mx{flex:1;min-width:200px}
.tf-mtop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.tf-mtop b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.tf-mid{font-size:11px;font-weight:700;color:var(--mute)}
.tf-mmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mute);font-weight:600}
.tf-warn{color:#C4552B;font-weight:800}
.tf-mact{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;flex:none}
.tf-inline{display:inline-flex}
.tf-more{position:relative}
.tf-more summary{list-style:none;cursor:pointer;height:28px;padding:0 11px;border-radius:6px;
  background:var(--field);font-size:11.5px;font-weight:800;color:var(--body);
  display:inline-flex;align-items:center}
.tf-more summary::-webkit-details-marker{display:none}
.tf-more summary:hover{background:#FBE9E9;color:#8E2F2F}
.tf-more[open] > form{position:absolute;right:0;top:34px;z-index:20;width:290px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:12px;box-shadow:0 8px 28px rgba(22,23,29,.14)}
.tf-morebtn{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.tf-actrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}

/* ── 크론 등록 ─────────────────────────────── */
.tf-cron{display:grid;gap:9px;margin-bottom:16px}
.tf-cronrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-soft)}
.tf-cronl{flex:none;width:120px}
.tf-cronl b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.tf-cronl span{font-size:11.5px;color:var(--mute);font-weight:600}
.tf-cronurl{flex:1;min-width:200px;font-family:'SF Mono',Consolas,monospace;font-size:11.5px;
  background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;
  overflow-wrap:anywhere;color:var(--body);user-select:all}
.tf-how{border:1px solid var(--line-2);border-radius:var(--r-md);padding:15px 18px;background:#fff}
.tf-how > b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
.tf-how ol{margin:0 0 10px 18px}
.tf-how li{font-size:13px;line-height:1.7;color:var(--body);margin-bottom:5px}
.tf-how p{font-size:12.5px;line-height:1.7;color:var(--mute);margin:0}

/* ── 관리자 좌측 메뉴 — 아직 안 만든 항목 ────── */
.adm-nav-off .adm-nav-it{opacity:.4;cursor:default;justify-content:space-between}
.adm-nav-off .adm-nav-it:hover{background:none}
.adm-nav-off small{font-size:10px;font-weight:700;opacity:.8}

@media (max-width:720px){
  .tf-card{padding:22px 20px}
  .tf-codes{grid-template-columns:1fr}
  .tf-m{flex-direction:column}
  .tf-mact{width:100%}
  .tf-more[open] > form{position:static;width:100%;box-shadow:none;margin-top:8px}
  .tf-cronrow{flex-direction:column;align-items:stretch}
  .tf-cronl{width:auto}
  .tf-pwval{font-size:20px}
}

/* 2단계 인증 화면 배경 (시안의 관리자 로그인 배경을 그대로) */
.ad2-lg{min-height:100vh;background:#14141B;display:flex;align-items:center;
  justify-content:center;padding:40px 20px}
.ad2-lg .ad2-lgwrap{width:100%;max-width:430px;display:block}

/* ── 2단계 인증 비밀키 상자 (공백 없이 · 복사 버튼) ── */
.tf-keybox{border:1px solid #3A3454;background:#1E1B33;border-radius:var(--r-sm);
  padding:13px 15px;margin-bottom:14px}
.tf-keyhd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tf-keyhd b{font-size:12px;font-weight:800;color:#9295A8}
.tf-keycopy{height:26px;padding:0 11px;border-radius:6px;background:#32343F;
  font-size:11.5px;font-weight:800;color:#C4B6FF}
.tf-keycopy:hover{background:var(--brand);color:#fff}
.tf-keyval{font-family:'SF Mono',Consolas,monospace;font-size:16px;font-weight:700;
  letter-spacing:.14em;color:#C4B6FF;word-break:break-all;line-height:1.7;
  user-select:all;-webkit-user-select:all}
.tf-keyhint{font-size:11.5px;line-height:1.7;color:#7B7E90;margin:9px 0 0;
  padding-top:9px;border-top:1px solid #32343F}
.tf-keyhint b{color:#B9BCCB;font-weight:800}

/* ══════════════════════════════════════════════════════════════
   5단계 — 프로젝트 등록 · 아카이브 · 승인
   ㈜매스티지 · 2026-08-17

   시안(crewdit.css)에 이미 있는 것은 다시 만들지 않습니다.
   여기에는 서버 화면에서만 새로 필요한 것만 둡니다.
   ══════════════════════════════════════════════════════════════ */

/* 주의: 시안에는 프로필 화면용 .pf-head · .pf-bio 등이 이미 있습니다.
   여기 .pf- 는 「프로젝트 폼」입니다. 이름이 겹치지 않는지 확인하고 추가하세요. */

/* ── 공통 ──────────────────────────────────── */
.tbd{color:#B79BFF;font-weight:700}

/* 링크로 만든 칩·탭도 버튼처럼 보이게 (a 에는 기본 밑줄이 있습니다) */
#s3 .v4-chip{text-decoration:none}
#s3 .v4-sorts a{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;color:var(--mute);transition:.12s;text-decoration:none;
}
#s3 .v4-sorts a:hover{background:var(--bg-soft);color:var(--body)}
#s3 .v4-sorts a.on{background:var(--ink);color:#fff;font-weight:700}
.my-tab{text-decoration:none}

/* 진짜 이미지가 들어간 카드 썸네일 */
#s3 .v4-at img{width:100%;height:100%;object-fit:cover;display:block;background:var(--field)}

/* ── 아카이브: 결과 없음 · 쪽 넘기기 ────────── */
.ar-empty{
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:#fff;
  padding:52px 24px;text-align:center;margin-top:8px;
}
.ar-empty svg{width:34px;height:34px;color:#C4C7D2;margin-bottom:12px}
.ar-empty b{display:block;font-size:15.5px;color:var(--ink);letter-spacing:-.02em}
.ar-empty p{font-size:13px;color:var(--mute);margin-top:7px}
.ar-emptyact{display:flex;gap:8px;justify-content:center;margin-top:18px}

.ar-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:30px}
.ar-pg{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 9px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  font-size:13px;font-weight:700;color:var(--mute);text-decoration:none;transition:.12s;
}
.ar-pg:hover{border-color:var(--line-2);color:var(--body)}
.ar-pg.on{background:var(--ink);border-color:var(--ink);color:#fff}

.ar-foot{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
}
.ar-foot h2{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ar-foot p{font-size:12.5px;color:var(--mute);line-height:1.75;margin-top:8px;max-width:760px}

/* ══════════════════════════════════════════════
   등록 폼
   ══════════════════════════════════════════════ */

.pf-body,.pf-lead{max-width:820px}
/* ★ 시안의 .content > * 는 max-width 가 있으면 가운데로 몰아 줍니다.
   등록 폼은 왼쪽에 붙어 있어야 단계 표시(steps)와 줄이 맞습니다. */
/* .content > * 에 걸린 가운데 정렬 때문에, 폭을 좁게 준 덩어리가 화면 한가운데로 밀립니다.
   폭을 좁게 준 것들은 왼쪽에 붙입니다. */
.content > .pf-body,.content > .pf-lead,.content > .po-wrap,
.content > .pf-hero,.content > .pf-body2,.content > .my-shell{margin-left:0;margin-right:auto}
.pf-lead{margin-top:8px}
.pf-f{margin-top:18px}
.pf-f .flab b{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pf-f select.ws-in{appearance:none;background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A8D9A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}
.pf-f.is-bad .ws-in,.pf-f.is-bad .ta{border-color:var(--rej);box-shadow:0 0 0 3px rgba(210,60,70,.08)}
.pf-err{font-size:12px;font-weight:700;color:var(--rej);margin-top:7px;line-height:1.6}

.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-four{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ── AI 제작방식 5축 ───────────────────────── */
.pf-ax{border:0;padding:0;margin-top:20px}
.pf-ax legend{padding:0;margin-bottom:9px;display:flex;align-items:baseline;gap:9px}
.pf-ax legend b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.pf-ax legend span{font-size:12px;color:var(--mute);font-weight:600}
.pf-axopts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

.pf-axo{
  position:relative;display:grid;grid-template-columns:20px 1fr;gap:3px 11px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:14px 15px;cursor:pointer;transition:.14s;
}
.pf-axo:hover{border-color:var(--brand-lt2);background:var(--brand-lt)}
.pf-axo input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pf-axo .rd{grid-row:1 / span 2;margin-top:1px}
.pf-axo .t{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pf-axo .d{font-size:11.5px;color:var(--mute);line-height:1.6}
.pf-axo input:checked ~ .rd{border-color:var(--brand);background:var(--brand)}
.pf-axo input:checked ~ .rd::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.pf-axo:has(input:checked){
  border-color:var(--brand);background:var(--brand-lt);box-shadow:0 0 0 3px rgba(124,92,252,.12);
}
/* 키보드로 옮겨 다닐 때도 어디 있는지 보이게 */
.pf-axo:focus-within{outline:2px solid var(--brand);outline-offset:2px}

/* ── 이미지 ────────────────────────────────── */
.pf-file{
  display:block;width:100%;margin-top:12px;padding:14px;
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--bg-soft);
  font-size:12.5px;color:var(--body);cursor:pointer;
}
.pf-file::file-selector-button{
  margin-right:12px;padding:7px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:12px;font-weight:700;color:var(--body);cursor:pointer;
}

.pf-thumb{
  margin-top:12px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;
  max-width:420px;
}
.pf-thumb img{display:block;width:100%;height:auto}
.pf-thumbm{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--mute);font-weight:600;
}
.pf-thumbm b{color:var(--ink);font-weight:800}

.pf-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.pf-shot{
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
}
.pf-shot img{display:block;width:100%;height:110px;object-fit:cover;object-position:top}
.pf-shot span{font-size:10.5px;color:var(--mute);font-weight:700;padding:6px 8px 0}

.pf-del{
  margin:4px 8px 8px auto;padding:4px 9px;border-radius:5px;border:1px solid var(--line-2);
  background:#fff;font:inherit;font-size:11px;font-weight:700;color:var(--rej);cursor:pointer;
}
.pf-del:hover{background:var(--rej-lt);border-color:var(--rej-line)}
.pf-thumbm .pf-del{margin:0 0 0 auto}

.pf-badlist{margin:8px 0 0 16px;font-size:12.5px;line-height:1.9}
.pf-badlist a{margin-left:6px;font-weight:700;text-decoration:underline}

/* ══════════════════════════════════════════════
   프로젝트 상세 — 시안 자리표시를 진짜 이미지로
   ══════════════════════════════════════════════ */
.pd-hero{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--field)}
.pd-hero img{display:block;width:100%;height:auto}
.pd-body{white-space:normal;line-height:1.85}
.pd-shots{display:flex;flex-direction:column;gap:0}
.pd-shots img{display:block;width:100%;height:auto}

/* ══════════════════════════════════════════════
   관리자 — 프로젝트 승인
   ══════════════════════════════════════════════ */
.pj-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line);
  padding-bottom:0;margin-bottom:18px;flex-wrap:wrap}
.pj-tab{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-size:13px;font-weight:700;color:var(--mute);text-decoration:none;
}
.pj-tab:hover{color:var(--body)}
.pj-tab.on{color:var(--ink);font-weight:800;border-bottom-color:var(--brand)}
.pj-tab span{font-size:11.5px;font-weight:800;color:#B0B3BF}
.pj-tab.on span{color:var(--brand)}
.pj-tabs .tf-search{margin-left:auto;margin-bottom:6px}

.pj-row{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:16px;margin-bottom:14px;
}
.pj-row.hot{border-color:var(--wait-line);box-shadow:0 2px 10px rgba(22,23,29,.05)}

.pj-top{display:flex;gap:15px;align-items:flex-start}
.pj-th{
  width:150px;height:94px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--field);display:block;
}
.pj-th img{width:100%;height:100%;object-fit:cover;display:block}
.pj-th.none{
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#A8ABB8;
  text-align:center;line-height:1.5;
}
.pj-info{flex:1;min-width:0}
.pj-info h3{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
}
.pj-url{margin-top:5px;font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pj-url a{color:var(--brand);font-weight:700;text-decoration:underline;word-break:break-all}
.pj-open{font-size:11px;color:var(--mute);font-weight:600}
.pj-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;
  font-size:11.5px;color:var(--mute);font-weight:600}
.pj-meta .dot{width:3px;height:3px;border-radius:50%;background:#CFD2DC}
.pj-who{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px;
  font-size:11.5px;color:var(--mute);font-weight:600}
.pj-who b{color:var(--ink);font-weight:800;font-size:12.5px}
.pj-warn{color:var(--rej);font-weight:800}
.pj-sum{margin-top:10px;font-size:13px;color:var(--body);line-height:1.7}

.pj-checks{
  margin-top:13px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.pj-checks b{font-size:11px;font-weight:800;color:var(--mute);letter-spacing:.03em}
.pj-ck{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:5px;
  font-size:11.5px;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--body);
}
.pj-ck.warn{background:var(--wait-lt);border-color:var(--wait-line);color:var(--wait)}
.pj-ck.ok{background:var(--ok-lt);border-color:transparent;color:var(--ok)}
.pj-ck.info{color:var(--mute)}

.pj-body{margin-top:12px}
.pj-body summary{font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer}
.pj-body p{margin-top:9px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg-soft);
  font-size:12.5px;color:var(--body);line-height:1.8;max-height:280px;overflow:auto}

.pj-axes{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.pj-ax{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
  font-size:11.5px;font-weight:700;color:var(--body);
}
.pj-ax i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--mute)}

.pj-act{display:flex;align-items:center;gap:10px;margin-top:15px;padding-top:14px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.pj-memo{flex:1;min-width:240px}
.pj-btns{display:flex;gap:7px;align-items:center;margin-left:auto;flex-wrap:wrap}
.pj-danger{color:var(--rej);border-color:var(--rej-line)}
.pj-danger:hover{background:var(--rej-lt)}

/* ── 좁은 화면 ─────────────────────────────── */
@media (max-width:1100px){
  .pf-axopts{grid-template-columns:1fr}
  .pf-four{grid-template-columns:repeat(2,1fr)}
  .pf-shots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .pf-two{grid-template-columns:1fr}
  .pf-shots{grid-template-columns:repeat(2,1fr)}
  .pj-top{flex-direction:column}
  .pj-th{width:100%;height:150px}
  .pj-btns{margin-left:0;width:100%}
  .pj-memo{min-width:0;width:100%}
  .ar-pager{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════════
   CREWDIT 워드마크 — 서버 화면 (2026-08-17)
   ══════════════════════════════════════════════════════════════ */
.wm-in{display:inline-flex;align-items:center;line-height:0}
.wm-in svg{width:112px;height:auto;display:block}

/* 관리자 상단 · 2단계 인증 화면 (어두운 배경) */
.adm-mark, .ad2-lgmark{--wm-accent:#A896FF;color:#fff}
.adm-mark .wm-adm svg, .ad2-lgmark .wm-adm svg{width:104px;height:auto}
.adm-mark em, .ad2-lgmark em{
  font-style:normal;font-weight:800;letter-spacing:.06em;font-size:12px;
  color:#A896FF;margin-left:9px;
}

/* 로그인 · 가입 화면의 정사각 배지를 가로로 눕힙니다 */
.au-mark.wm-au{
  width:auto;height:auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;padding:13px 20px;color:var(--ink);
}
.au-mark.wm-au svg{width:128px;height:auto;display:block}

/* 좌측 레일 · 푸터 */
.rail .logo.wm-rail{width:auto;height:auto;display:block;place-items:unset;
  padding-left:2px;margin-bottom:20px;color:var(--ink)}
.rail .logo.wm-rail svg{width:74px;height:auto;display:block}
.foot .flogo.wm-foot{gap:0;color:#fff;--wm-accent:#A896FF}
.foot .flogo.wm-foot svg{width:126px;height:auto;display:block}

/* 레일 안에서는 svg 규칙이 색을 덮어써서 여기서 다시 지정합니다 */
.rail .logo.wm-rail svg{color:var(--ink);--wm-accent:var(--brand)}

/* 푸터는 CREW 를 흰색, DIT 를 연보라로 — svg 규칙이 색을 덮어써서 다시 지정 */
.foot .flogo.wm-foot svg{color:#fff;--wm-accent:#A896FF}
.adm-mark .wm-adm svg, .ad2-lgmark .wm-adm svg{color:#fff;--wm-accent:#A896FF}

/* ══════════════════════════════════════════════════════════════
   6단계 — Roles · Project Credits (2026-08-17)

   사람에게 점수·등급·순위를 매기지 않습니다.
   그래서 이름을 크게 키우거나 숫자로 줄 세우는 표현을 쓰지 않았습니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 역할 이름표 ───────────────────────────── */
.cr-role{
  display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--brand-lt);color:#5B45C8;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;flex:none;
}
.cr-role.sm{height:20px;padding:0 8px;font-size:10.5px}

/* ── 확인 상태 ─────────────────────────────── */
.cr-st{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  font-size:10.5px;font-weight:800;font-style:normal;white-space:nowrap;
  background:var(--field);color:var(--mute);
}
.cr-st.own {background:var(--brand-lt);color:#5B45C8}
.cr-st.ok  {background:var(--ok-lt);color:var(--ok)}
.cr-st.wait{background:var(--wait-lt);color:var(--wait)}
.cr-st.gst {background:var(--field);color:#7A7D8A}
.cr-st.rej {background:var(--rej-lt);color:var(--rej)}

/* ── 참여자 관리 화면 ──────────────────────── */
.cr-oneline{display:flex;gap:8px;align-items:center}
.cr-oneline .ws-in{flex:1;min-width:0}

.cr-addgrid{display:grid;grid-template-columns:130px 1fr 1fr 1fr;gap:12px;margin-top:16px}
.cr-add .pf-f{margin-top:0}

.cr-list{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.cr-row{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-bottom:1px solid var(--line);
}
.cr-row:last-child{border-bottom:0}
.cr-row.off{opacity:.5}
.cr-row.off .cr-who b{text-decoration:line-through}
.cr-who{flex:1;min-width:0}
.cr-who b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cr-org{font-size:11.5px;color:var(--mute);font-weight:600;margin-left:7px}
.cr-who p{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.5}
.cr-del{
  border:1px solid var(--line-2);background:#fff;border-radius:6px;padding:5px 10px;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--rej);cursor:pointer;flex:none;
}
.cr-del:hover{background:var(--rej-lt);border-color:var(--rej-line)}

.cr-empty{
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:#fff;
  padding:34px 20px;text-align:center;
}
.cr-empty b{display:block;font-size:14.5px;color:var(--ink)}
.cr-empty p{font-size:12.5px;color:var(--mute);margin-top:7px}

/* ── 내 크레딧 — 확인 요청 ─────────────────── */
.cr-ask{
  border:1px solid var(--wait-line);border-radius:var(--r-md);background:var(--wait-lt);
  padding:16px 18px;margin-bottom:20px;
}
.cr-askhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cr-askhd svg{width:17px;height:17px;color:var(--wait);flex:none}
.cr-askhd b{font-size:14px;font-weight:800;color:#4E3D14}
.cr-askhd span{font-size:12px;color:#6B5522}
.cr-askrow{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--wait-line);
  border-radius:var(--r-sm);padding:13px 15px;margin-bottom:8px;flex-wrap:wrap;
}
.cr-askinfo{flex:1;min-width:220px}
.cr-askinfo h4{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cr-askinfo p{font-size:12.5px;color:var(--body);margin-top:4px;line-height:1.6}
.cr-askwhen{font-size:11px;color:var(--mute);font-weight:600}
.cr-askact{display:flex;gap:7px;flex:none}
.cr-asknote{font-size:11.5px;color:#6B5522;line-height:1.7;margin-top:4px}

/* ── 상세 화면의 Made by · Roles 판 ────────── */
.cr-panel h4 span{
  font-style:normal;font-size:11px;font-weight:600;color:var(--mute);margin-left:6px;letter-spacing:0;
}
.cr-madeby{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:6px}
.cr-none{font-size:12.5px;color:var(--mute);margin-top:6px}
.cr-rolelist{margin-top:10px;display:flex;flex-direction:column;gap:11px}
.cr-rrow{display:flex;gap:10px;align-items:flex-start}
.cr-rname{
  width:58px;flex:none;font-size:11.5px;font-weight:800;color:var(--mute);
  letter-spacing:-.01em;padding-top:2px;
}
.cr-rppl{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.cr-p{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cr-p b{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cr-p i{font-style:normal;font-size:11px;color:var(--mute);font-weight:600}
.cr-p small{width:100%;font-size:11px;color:var(--mute);line-height:1.5}

/* 카드에 붙는 크레딧 한 줄 */
.v4-acrd{
  font-size:11px;color:var(--mute);font-weight:600;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.my-nav-it .c.hot{color:var(--rej)}

@media (max-width:900px){
  .cr-addgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cr-addgrid{grid-template-columns:1fr}
  .cr-row{flex-wrap:wrap}
  .cr-askact{width:100%;justify-content:flex-end}
}

/* ══════════════════════════════════════════════════════════════
   7단계 — 커뮤니티 (2026-08-17)

   ※ 비추천 버튼이 없습니다. 등급·랭킹 표시도 없습니다.
     그래서 「점수판」처럼 보이는 표현을 일부러 쓰지 않았습니다.
   ══════════════════════════════════════════════════════════════ */

.rx-shell{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;align-items:start;margin-top:22px}

/* 게시판 목록 */
.rc-nav{position:sticky;top:20px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;padding:14px}
.rc-navh{font-size:11px;font-weight:800;color:var(--mute);letter-spacing:.05em;
  padding:0 6px 7px;text-transform:uppercase}
.rc-navlk{display:block;padding:7px 9px;border-radius:var(--r-sm);font-size:12.5px;
  font-weight:600;color:var(--body);text-decoration:none;transition:.12s}
.rc-navlk:hover{background:var(--bg-soft)}
.rc-navlk.on{background:var(--brand-lt);color:#4A38B0;font-weight:800}
.rc-navwrite{width:100%;margin-top:14px}

/* 글 수 · 정렬 줄
   시안의 .v4-tools 는 #s2 · #s3(아카이브) 안에서만 정의돼 있어서
   커뮤니티(#s4)에서는 스타일이 하나도 안 먹었습니다. 여기서 다시 정합니다. */
#s4 .v4-tools{display:flex;align-items:center;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
#s4 .v4-cnt{font-size:13px;color:var(--mute);font-weight:600}
#s4 .v4-cnt b{color:var(--ink);font-weight:800}
#s4 .v4-sorts{margin-left:auto;display:flex;gap:4px}
#s4 .v4-sorts a{
  height:32px;padding:0 13px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:700;color:var(--mute);text-decoration:none;transition:.14s;
}
#s4 .v4-sorts a:hover{background:var(--bg-soft);color:var(--body)}
#s4 .v4-sorts a.on{background:var(--ink);color:#fff;font-weight:800}

/* 「예시」 · 「공지」 · 「운영팀」 표시 */
.po-sample{
  display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;
  background:var(--wait-lt);color:var(--wait);border:1px solid var(--wait-line);
  font-size:10.5px;font-weight:800;white-space:nowrap;
}
.po-notice{
  display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;
  background:var(--brand-lt);color:#5B45C8;font-size:10.5px;font-weight:800;
}
.po-adm{
  display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;
  background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;
}

/* 글 상세 */
.po-wrap{max-width:820px}
.po-title{font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.38}
.po-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--mute);font-weight:600}
.po-meta b{font-size:13px;color:var(--ink);font-weight:800}
.po-meta .dot{width:3px;height:3px;border-radius:50%;background:#CFD2DC}
.po-own{margin-left:auto;display:flex;align-items:center;gap:10px}
.po-own a,.po-linkbtn{font-size:11.5px;font-weight:700;color:var(--mute);
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-decoration:underline}
.po-own a:hover,.po-linkbtn:hover{color:var(--rej)}

.po-body{font-size:15px;color:var(--body);line-height:1.9;margin-top:22px;word-break:keep-all}
.po-tags{margin-top:20px}

.po-actbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.po-up{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--body);cursor:pointer;text-decoration:none}
.po-up svg{width:15px;height:15px}
.po-up b{font-weight:800;color:var(--ink)}
.po-up:hover{border-color:var(--brand-lt2);background:var(--brand-lt)}
.po-up.on{background:var(--brand);border-color:var(--brand);color:#fff}
.po-up.on b{color:#fff}
.po-actnote{font-size:11.5px;color:var(--mute)}

/* 댓글 */
.po-cmts{margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
/* 답글 깊이는 --d 로 넘어옵니다 (0~4). 화면 폭에 따라 한 칸 너비만 바꿉니다. */
.po-cmt{padding:14px 0;border-bottom:1px solid var(--line);margin-left:calc(var(--d,0) * 26px)}
.po-cmt-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--mute);font-weight:600}
.po-cmt-hd b{font-size:12.5px;color:var(--ink);font-weight:800}
.po-cmt-body{font-size:13.5px;color:var(--body);line-height:1.8;margin-top:7px;word-break:keep-all}
.po-cmt-none{font-size:13px;color:var(--mute);padding:20px 0}
.po-reply{margin-top:8px}
.po-reply summary{font-size:11.5px;font-weight:700;color:var(--brand);cursor:pointer}
.po-reply form{margin-top:8px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.po-cmt-new{margin-top:20px}

/* ★ 940px — 시안 CSS 가 왼쪽 레일을 서랍으로 바꾸는 지점입니다.
      전에는 여기 900 이라 940~900 구간에서 메뉴가 어중간했습니다. */
@media (max-width:940px){
  .rx-shell{grid-template-columns:minmax(0,1fr)}
  .po-title{font-size:21px}

  /* 좁은 화면에서 게시판 15개가 세로로 쌓이면 첫 화면이 통째로 메뉴가 됩니다.
     옆으로 넘겨 보는 한 줄로 눕힙니다. */
  .rc-nav{
    position:static;border:0;border-bottom:1px solid var(--line);border-radius:0;
    padding:0 0 12px;margin:0 -4px 4px;
    display:flex;align-items:center;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .rc-nav::-webkit-scrollbar{display:none}
  .rc-navh{
    padding:0 2px 0 6px;margin:0 !important;flex:none;
    border-left:1px solid var(--line);line-height:1;
  }
  .rc-nav > .rc-navh:first-child{border-left:0;padding-left:2px}
  .rc-navlk{
    flex:none;white-space:nowrap;padding:7px 12px;border-radius:var(--r-pill);
    background:var(--bg-soft);
  }
  .rc-navwrite{
    flex:none;width:auto;margin:0 0 0 4px;position:sticky;right:0;
    box-shadow:-10px 0 12px -6px rgba(255,255,255,.9);
  }

  /* 답글 들여쓰기는 좁은 화면에서 절반만 */
  .po-cmt{margin-left:calc(var(--d,0) * 11px)}
}

/* ── 내 정보 화면의 「내가 쓴 글」 ─────────────── */
.my-cnt{
  display:inline-flex;align-items:center;height:19px;padding:0 7px;margin-left:5px;
  border-radius:var(--r-pill);background:var(--brand-lt);color:#5B45C8;
  font-size:11px;font-weight:800;vertical-align:2px;
}
.my-plist{display:flex;flex-direction:column;margin:2px 0 12px}
.my-plist a{
  display:block;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;
}
.my-plist a:last-child{border-bottom:0}
.my-plist b{
  display:block;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em;
  line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.my-plist a:hover b{color:var(--brand)}
.my-plist span{display:block;margin-top:4px;font-size:11.5px;color:var(--mute);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   제작방식 캐릭터 아이콘 (2026-08-17)

   사람 · 로봇 · 사람과 로봇 — 글자를 읽기 전에 그림으로 먼저 알아봅니다.
   ※ 점수도 등급도 아닙니다. 세 아이콘의 크기와 무게를 똑같이 맞춰서
     어느 쪽이 「더 낫다」로 보이지 않게 했습니다.
   ══════════════════════════════════════════════════════════════ */

.wayic{flex:none;display:block}

/* 배지 안 — 아이콘 + 글자 */
.badge .wayic{margin-left:-1px}
.badge > i{font-style:normal;font-weight:inherit;letter-spacing:inherit;line-height:1}

/* 아카이브 필터 칩 안 */
#s3 .v4-chip,#s2 .v4-chip{display:inline-flex;align-items:center;gap:5px}
#s3 .v4-chip > i,#s2 .v4-chip > i{font-style:normal;font-weight:inherit;line-height:1}

/* 상세 화면의 큰 배지 — 아이콘도 같이 커집니다 */
#s7 .ax-sumbadge .badge{gap:7px}
#s9 .ax-pv-badge .badge{gap:8px}

/* 썸네일 위에 얹히는 배지는 흰 판을 살짝 깔아 글자와 그림이 다 보이게 */
.v4-at .badge.v4-tb{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 4px rgba(22,23,29,.16);
  backdrop-filter:saturate(140%) blur(2px);
}
.v4-at .badge.v4-tb.way-full{color:#4A38B0}
.v4-at .badge.v4-tb.way-part{color:#23589B}
.v4-at .badge.v4-tb.way-human{color:#1F5F3A}

@media (prefers-reduced-motion:no-preference){
  .v4-ac:hover .v4-tb .wayic{transform:translateY(-1px);transition:transform .18s}
}
.pf-waypv{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════
   역할 아이콘 (2026-08-17)

   두 층으로 씁니다.
     · 30px 이상 = 캐릭터형(사람+소품) — 넉넉한 자리
     · 30px 미만 = 도구형(소품만)     — 배지·목록
   캐릭터형은 15px 에서 머리와 소품이 겹쳐 뭉갭니다. 그래서 갈랐습니다.
   ══════════════════════════════════════════════════════════════ */

.roleic{flex:none;display:block}

/* 아이콘 + 이름 한 덩어리 */
.cr-rname,.cr-role{display:inline-flex;align-items:center;gap:5px}
.cr-rname > i,.cr-role > i{font-style:normal;font-weight:inherit;letter-spacing:inherit;line-height:1}
.cr-rname{align-items:flex-start}
.cr-rname .roleic{margin-top:.5px}

/* 역할 안내 — 캐릭터형이 사는 자리 */
.cr-rguide{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-soft);
  margin:14px 0 4px;overflow:hidden;
}
.cr-rguide > summary{
  padding:13px 16px;font-size:13px;font-weight:800;color:var(--body);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px;
}
.cr-rguide > summary::-webkit-details-marker{display:none}
.cr-rguide > summary::before{
  content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--mute);
  border-bottom:2px solid var(--mute);transform:rotate(-45deg);margin-left:2px;transition:.16s;
}
.cr-rguide[open] > summary::before{transform:rotate(45deg);margin-top:-3px}
.cr-rguide > summary:hover{color:var(--ink)}
.cr-rgrid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  padding:4px 14px 14px;
}
.cr-rcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;
}
.cr-rcard b{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cr-rcard span{font-size:10.5px;line-height:1.5;color:var(--mute);word-break:keep-all}
.cr-rnote{padding:0 16px 14px;font-size:12px;color:var(--mute);line-height:1.7}
.cr-rnote b{color:var(--body);font-weight:800}

@media (max-width:1000px){ .cr-rgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:620px){  .cr-rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══════════════════════════════════════════════════════════════
   커뮤니티 목록 (2026-08-17 · 다시 정리)

   전에는 왼쪽에 88px 열을 두고 추천·댓글·조회 세 숫자를 세로로 쌓았는데,
   예시 글처럼 값이 0인 글이 여러 개면 화면 왼쪽 한 칸이 통째로 「0 0 0」이 됐습니다.

   추천만 왼쪽에 남깁니다 — 「어느 글이 도움이 됐나」는 세로로 나란히 서야 보입니다.
   댓글·조회는 읽을지 정한 뒤에 보는 값이라 제목 아래로 내렸습니다.

   ※ 왼쪽 게시판 메뉴(.rc-nav)는 그대로입니다. 손댄 것은 글 카드 안쪽뿐입니다.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   2026-08-18 — 목록이 「밋밋하다」를 고쳤습니다.

   ★ 진짜 원인은 <색이 정보를 담고 있지 않은 것>이었습니다.
     게시판 14개가 전부 같은 회색 글자라, 목록이 한 덩어리로 읽혔습니다.
     그래서 게시판마다 색을 주고(bd_color), 그 색을 행에 심어 씁니다.
     장식이 아니라 <구분>입니다 — 지도의 노선 색과 같은 쓰임입니다.

   ★ 두 번째 원인은 <제목과 본문의 크기 차이가 작은 것>이었습니다.
     16.5px 제목 옆에 13px 본문이면 눈이 어디부터 볼지 못 정합니다.
     제목을 키우고 본문을 한 톤 물렸습니다.
   ══════════════════════════════════════════════════════════════ */

.pl-row{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;
  padding:19px 14px 19px 10px;margin:0 -14px 0 -10px;
  border-bottom:1px solid var(--line);border-radius:var(--r-md);
  transition:background .13s;
}
.pl-row:last-of-type{border-bottom:0}
/* 줄 위에 커서를 올리면 그 줄만 살짝 뜹니다 — 어디를 보고 있는지 알려 줍니다 */
.pl-row:hover{background:var(--soft)}

/* 왼쪽 — 추천 하나만 */
.pl-up{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:2px}
.pl-up svg{width:16px;height:16px;color:var(--brand)}
.pl-up b{font-size:17px;font-weight:800;color:var(--ink);line-height:1.15;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pl-up i{font-style:normal;font-size:10px;font-weight:700;color:var(--mute)}
/* 아직 추천이 없으면 물러납니다 — 「0 추천」이 줄마다 반복되면 소음입니다 */
.pl-up.zero svg{color:#DCDEE6}
.pl-up.zero b{color:#C6C8D2}
.pl-up.zero i{visibility:hidden}

.pl-bd{min-width:0}
.pl-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12px;color:var(--mute);font-weight:600}

/* 게시판 배지 — 게시판 색이 여기 들어갑니다 */
.pl-b{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;
  border-radius:var(--r-pill);text-decoration:none;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;
  color:var(--bc,var(--body));background:var(--bcbg,var(--field));transition:.12s}
.pl-b:hover{filter:brightness(.94)}
.pl-bdot{width:6px;height:6px;border-radius:50%;background:var(--bc,var(--mute));flex:none}
.pl-dot{color:var(--line-2)}

/* 제목 — 목록에서 <가장 큰 글자>여야 합니다 */
.pl-t{margin-top:9px;font-size:18px;font-weight:800;letter-spacing:-.035em;line-height:1.42}
.pl-t a{color:var(--ink);text-decoration:none}
.pl-t a:hover{color:var(--brand)}

/* 본문 미리보기 — 한 톤 물러섭니다. 제목과 같은 무게로 보이면 안 됩니다 */
.pl-s{margin-top:7px;font-size:13px;color:var(--mute);line-height:1.72;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pl-ft{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:11px}
.pl-n{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.pl-n svg{width:13px;height:13px;color:var(--mute)}
.pl-n b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pl-n i{font-style:normal;font-weight:600;color:var(--mute);font-size:11.5px}
.pl-n.dim svg{color:#C6C8D2}
.pl-n.dim b{color:var(--mute);font-weight:700}
/* 태그 — 목록에서는 <작게>. 전에는 30px 짜리 알약이라 제목보다 눈에 띄었습니다 */
.pl-tags{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
.pl-tags .rx-pill{height:23px;padding:0 9px;font-size:11px;font-weight:700;
  background:transparent;border:1px solid var(--line);color:var(--mute)}
.pl-tags .rx-pill:hover{background:var(--brand-lt);border-color:var(--brand-lt2);color:#5B45C8}

@media (max-width:620px){
  .pl-row{grid-template-columns:38px minmax(0,1fr);gap:12px}
  .pl-tags{margin-left:0;width:100%;margin-top:4px}
  .pl-t{font-size:15.5px}
}

/* ══════════════════════════════════════════════════════════════
   8단계 — 공개 프로필 · 레퍼런스 이력 (2026-08-17)

   ※ 여기에 점수 · 등급 · 순위 · 별점을 나타내는 모양은 하나도 없습니다.
     프로필이 곧 이력서라서 사람에게 점수가 붙으면 안 됩니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 이력 관리 · 공개 상태 띠 ─────────────── */
.rm-band{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:18px 20px}
.rm-bandhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rm-blb{font-size:11.5px;font-weight:700;color:var(--mute)}
.rm-bnow{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.rm-bandhd .btn{margin-left:auto}

.rm-vis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
.rm-vc{
  text-align:left;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;
  padding:13px 14px;cursor:pointer;font:inherit;color:var(--body);transition:.14s;position:relative;
}
.rm-vc:hover:not(:disabled){border-color:var(--brand-lt2);background:var(--brand-lt)}
.rm-vc.on{border-color:var(--brand);background:var(--brand-lt);box-shadow:0 0 0 3px rgba(124,92,252,.10)}
.rm-vc.lock{opacity:.55;cursor:not-allowed}
.rm-vh{display:flex;align-items:center;gap:6px}
.rm-vh b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.rm-vnow,.rm-vlock{font-style:normal;font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px}
.rm-vnow{background:var(--brand);color:#fff}
.rm-vlock{background:var(--wait-lt);color:var(--wait);border:1px solid var(--wait-line)}
.rm-vd{display:block;margin-top:5px;font-size:11.5px;line-height:1.6;color:var(--mute)}
.rm-vc code{position:absolute;right:12px;top:13px;font-size:10px;color:#C6C8D2;
  font-family:'SF Mono',Consolas,monospace}

.rm-goband{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute);line-height:1.7}
.rm-goband > span{flex:1;min-width:220px}
.rm-goband b{color:var(--body);font-weight:800}

/* ── 링크 전용 주소 ───────────────────────── */
.rm-linkbox{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-soft);
  padding:16px 18px;margin-top:14px}
.rm-lh{font-size:12px;font-weight:800;color:var(--body);margin-bottom:8px}
.linkfield{display:flex;gap:7px}
.linkfield .ws-in{font-size:13px}
.linkfield .btn{flex:none}

/* ── 소개 접이식 ──────────────────────────── */
.rm-intro{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;margin-top:14px;overflow:hidden}
.rm-intro > summary{padding:14px 18px;font-size:13px;font-weight:800;color:var(--body);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px}
.rm-intro > summary::-webkit-details-marker{display:none}
.rm-intro > summary::before{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--mute);
  border-bottom:2px solid var(--mute);transform:rotate(-45deg);transition:.16s}
.rm-intro[open] > summary::before{transform:rotate(45deg);margin-top:-3px}
.rm-introform{padding:0 18px 18px}
.rm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── 크레딧에서 가져오기 ──────────────────── */
.rm-pull{border:1px solid var(--ok-line);background:var(--ok-lt);border-radius:var(--r-md);
  padding:15px 17px;margin-top:14px}
.rm-pullhd b{display:block;font-size:13.5px;font-weight:800;color:#1E5B38}
.rm-pullhd span{display:block;margin-top:3px;font-size:12px;color:#2A7A4B;line-height:1.6}
.rm-pulllist{display:flex;flex-direction:column;gap:5px;margin-top:11px}
.rm-pullit{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ok-line);
  border-radius:var(--r-sm);padding:9px 12px;text-decoration:none;transition:.14s}
.rm-pullit:hover{border-color:var(--ok);box-shadow:0 2px 8px rgba(42,122,75,.10)}
.rm-pullit b{font-size:13px;font-weight:800;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-pullit i{font-style:normal;font-size:11px;font-weight:700;color:var(--mute);flex:none}
.rm-pullit span{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;color:var(--ok)}

/* ── 이력 목록 ────────────────────────────── */
.rm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.rm-cnt{font-size:13px;color:var(--mute);font-weight:600}
.rm-cnt b{color:var(--ink);font-weight:800}
.rm-tabs{display:flex;gap:3px}
.rm-tabs a{height:30px;padding:0 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:700;color:var(--mute);text-decoration:none}
.rm-tabs a:hover{background:var(--bg-soft);color:var(--body)}
.rm-tabs a.on{background:var(--ink);color:#fff;font-weight:800}
.rm-bar .btn{margin-left:auto}

.rm-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line)}
.rm-row.off{opacity:.55}
.rm-th{width:96px;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;background:var(--field);flex:none}
.rm-th img{width:100%;height:100%;object-fit:cover;display:block}
.rm-mid{min-width:0}
.rm-mhd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rm-mhd b{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.rm-pin{font-size:10.5px;font-weight:800;color:var(--wait);background:var(--wait-lt);
  border:1px solid var(--wait-line);border-radius:4px;padding:2px 6px}
.rm-mrole{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;
  font-size:11.5px;color:var(--mute);font-weight:600}
.rm-per{font-variant-numeric:tabular-nums}
.rm-self{font-size:10.5px;font-weight:700;color:var(--mute);background:var(--field);
  border-radius:4px;padding:2px 6px}
.rm-scope{margin-top:7px;font-size:12.5px;color:var(--body);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.rm-act{flex:none}
.rm-actf{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.rm-sw{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--mute);cursor:pointer}
.rm-sw i{width:26px;height:15px;border-radius:999px;background:#D8DAE3;position:relative;transition:.16s}
.rm-sw i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#fff;transition:.16s}
.rm-sw.on{color:#4A38B0;border-color:var(--brand-lt2);background:var(--brand-lt)}
.rm-sw.on i{background:var(--brand)}
.rm-sw.on i::after{left:13px}
.rm-mini{display:inline-flex;gap:2px}
.rm-mini button{width:26px;height:26px;border:1px solid var(--line-2);border-radius:6px;background:#fff;
  font-size:10px;color:var(--mute);cursor:pointer;line-height:1}
.rm-mini button:hover{border-color:var(--brand);color:var(--brand)}

/* ── 공개 전 확인 화면 ────────────────────── */
.vf-why{display:flex;gap:14px;border:1px solid var(--brand-lt2);background:var(--brand-lt);
  border-radius:var(--r-md);padding:18px 20px;margin-top:18px}
.vf-why .tx{font-size:13px;color:#4A38B0;line-height:1.8}
.vf-why b{font-weight:800}
.pts{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.pt{background:#fff;border:1px solid var(--brand-lt2);border-radius:var(--r-sm);padding:8px 12px;
  font-size:12px;color:var(--body)}
.pt.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(124,92,252,.12)}
.pt b{color:var(--ink)}

.vf-sec{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:20px 22px;margin-top:16px}
.vf-sech{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vf-sech .d{font-size:12.5px;color:var(--mute)}
.vf-verdict{margin-left:auto;display:flex;align-items:baseline;gap:7px;padding:6px 13px;border-radius:var(--r-pill)}
.vf-verdict b{font-size:15px;font-weight:800}
.vf-verdict span{font-size:11.5px;font-weight:700}
.vf-verdict.pass{background:var(--ok-lt);color:var(--ok)}
.vf-verdict.fail{background:var(--wait-lt);color:var(--wait)}

.vf-chks{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.vf-chk{display:flex;align-items:center;gap:12px;background:#fff;padding:13px 15px}
.vf-chk .mk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.vf-chk .mk svg{width:12px;height:12px}
.vf-chk.pass .mk{background:var(--ok-lt);color:var(--ok)}
.vf-chk.fail .mk{background:var(--wait-lt);color:var(--wait)}
.vf-chk .ti{flex:1;min-width:0}
.vf-chk .ti b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.vf-chk .ti i{display:block;font-style:normal;font-size:11.5px;color:var(--mute);line-height:1.6;margin-top:2px}
.vf-chk .rs{flex:none}

.vf-prevwrap{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:var(--bg-soft)}
.vf-prevbar{background:var(--dark);color:#9295A8;padding:9px 14px;font-size:11.5px;
  font-family:'SF Mono',Consolas,monospace}
.vf-prevbody{background:#fff;padding:18px 20px}
.vf-prcnt{font-size:12px;color:var(--mute);font-weight:700;margin:16px 0 8px}
.vf-prcnt b{color:var(--ink)}
.vf-prow2{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.vf-prow2:last-child{border-bottom:0}
.vf-prow2 .th{width:56px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--field);flex:none}
.vf-prow2 .th img{width:100%;height:100%;object-fit:cover;display:block}
.vf-prow2 .m{min-width:0}
.vf-prow2 .m b{display:block;font-size:13px;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vf-prow2 .m i{display:block;font-style:normal;font-size:11px;color:var(--mute);margin-top:2px}
.vf-prmore{font-size:11.5px;color:var(--mute);margin-top:9px}

/* ── 공개 프로필 ──────────────────────────── */
.pf-hero{display:flex;gap:20px;align-items:flex-start;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.av.lg{width:84px;height:84px;border-radius:50%;flex:none}
.pf-hi{flex:1;min-width:0}
.pf-hnm{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-hnm b{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.035em}
/* ★ 2026-08-19 — 여기가 「@홍 세 화」로 벌어져 보이던 이유입니다.
   고정폭 글꼴(SF Mono·Consolas)에는 한글이 없습니다. 그래서 글자마다
   다른 글꼴로 떨어지면서 자간이 제멋대로 벌어졌습니다.
   한글 아이디를 쓰는 곳이라 고정폭을 쓰지 않습니다. */
.pf-hid{font-size:14px;font-weight:700;color:var(--mute);letter-spacing:-.01em}
.pf-work{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:5px;
  background:var(--ok-lt);color:var(--ok);border:1px solid var(--ok-line);font-size:11px;font-weight:800}
.pf-work.sm{height:19px;padding:0 7px;font-size:10px}
.pf-hjobs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.pf-yr{font-size:11.5px;font-weight:700;color:var(--mute)}
.pf-hline{margin-top:11px;font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.6;letter-spacing:-.02em}
.pf-hbio{margin-top:7px;font-size:13px;color:var(--body);line-height:1.75;max-width:640px}
.pf-hcnt{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12px;color:var(--mute);font-weight:600}
.pf-hcnt b{color:var(--ink);font-weight:800}
.pf-hcnt .dot{width:3px;height:3px;border-radius:50%;background:#CFD2DC}
.pf-hact{flex:none}

.pf-body2{max-width:900px}
.pf-ref{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;
  padding:24px 0;border-bottom:1px solid var(--line)}
.pf-ref.pin{background:linear-gradient(90deg,var(--brand-lt) 0%,transparent 70%);
  margin-left:-14px;padding-left:14px;border-radius:var(--r-sm)}
.pf-rth{width:180px;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;background:var(--field)}
.pf-rth img{width:100%;height:100%;object-fit:cover;display:block}
.pf-rbd{min-width:0}
.pf-rtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-rpin{font-size:10.5px;font-weight:800;color:var(--wait);background:var(--wait-lt);
  border:1px solid var(--wait-line);border-radius:4px;padding:2px 6px}
.pf-rt{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.4}
.pf-rt a{color:inherit;text-decoration:none}
.pf-rt a:hover{color:var(--brand)}
.pf-rmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  font-size:11.5px;color:var(--mute);font-weight:600}
.pf-rmeta .dot{width:3px;height:3px;border-radius:50%;background:#CFD2DC}
.pf-rscope{margin-top:11px;font-size:14px;color:var(--body);line-height:1.85;word-break:keep-all}
.pf-rtools{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pf-rtools .tool{height:24px;padding:0 10px;border-radius:5px;background:var(--bg-soft);
  border:1px solid var(--line);display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:700;color:var(--mute)}

/* ── 사람 찾기 ────────────────────────────── */
.pp-toggle{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--mute);text-decoration:none}
.pp-toggle i{width:26px;height:15px;border-radius:999px;background:#D8DAE3;position:relative;transition:.16s}
.pp-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;
  border-radius:50%;background:#fff;transition:.16s}
.pp-toggle.on{color:#1E5B38;border-color:var(--ok-line);background:var(--ok-lt)}
.pp-toggle.on i{background:var(--ok)}
.pp-toggle.on i::after{left:13px}

.pp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.pp-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;padding:16px 17px;text-decoration:none;transition:.16s}
.pp-c:hover{border-color:var(--brand-lt2);box-shadow:0 4px 16px rgba(22,23,29,.07);transform:translateY(-1px)}
.pp-hd{display:flex;align-items:center;gap:10px}
.pp-hd .av{width:40px;height:40px;border-radius:50%;flex:none}
.pp-id{min-width:0;flex:1}
.pp-id b{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-id span{display:block;font-size:11px;color:var(--mute);font-family:'SF Mono',Consolas,monospace}
.pp-jobs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:11px}
.pp-bio{margin-top:9px;font-size:12.5px;color:var(--body);line-height:1.65;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;
  padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);font-weight:600}
.pp-ft b{color:var(--ink);font-weight:800}
.pp-ft em{font-style:normal;font-weight:800;color:var(--brand)}

/* ── 이력 등록 폼 조각 ────────────────────── */
.re-search{display:flex;gap:7px}
.re-search .btn{flex:none}
.re-or{display:flex;align-items:center;gap:12px;margin:16px 0 10px;
  font-size:11.5px;font-weight:700;color:var(--mute)}
.re-or::before,.re-or::after{content:"";flex:1;height:1px;background:var(--line)}
.re-hits{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.re-hit{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;font:inherit}
.re-hit:hover{border-color:var(--brand);background:var(--brand-lt)}
.re-hth{width:52px;aspect-ratio:16/10;border-radius:5px;overflow:hidden;background:var(--field);flex:none}
.re-hth img{width:100%;height:100%;object-fit:cover;display:block}
.re-hti{min-width:0}
.re-hti b{display:block;font-size:13px;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-hti i{display:block;font-style:normal;font-size:11px;color:var(--mute);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.re-picked{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--brand-lt2);background:var(--brand-lt);border-radius:var(--r-sm);padding:11px 13px}
.re-pth{width:64px;aspect-ratio:16/10;border-radius:5px;overflow:hidden;background:var(--field);flex:none}
.re-pth img{width:100%;height:100%;object-fit:cover;display:block}
.re-pin{flex:1;min-width:0}
.re-pin b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.re-pin span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.re-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.re-role{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;padding:13px 8px;
  cursor:pointer;transition:.14s}
.re-role:hover{border-color:var(--brand-lt2);background:var(--brand-lt)}
.re-role.on,.re-role:has(input:checked){border-color:var(--brand);background:var(--brand-lt);
  box-shadow:0 0 0 2px rgba(124,92,252,.12)}
.re-role input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.re-role b{font-size:12.5px;font-weight:800;color:var(--ink)}
.re-role span{font-size:10px;line-height:1.5;color:var(--mute)}
.re-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ta.big{min-height:180px}

/* ── 관리자 · 공개 프로필 ───────────────────
   ★ 2026-08-20 색 고침 — 이 칸도 어두운 화면인 줄 알고 짰던 곳입니다.
     관리자 본문은 흰 종이라 이름·제목이 흰 바탕에 흰 글씨로 찍히고 있었습니다. */
.apf-hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.apf-who{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.apf-who b{font-size:15px;font-weight:800;color:var(--ink)}
.apf-id{font-size:12px;color:var(--mute);font-family:'SF Mono',Consolas,monospace;margin-left:5px}
.apf-sub{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.6}
.apf-sub b{font-size:11.5px;color:var(--body)}
.apf-jobs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:none}
.apf-intro{margin-top:12px;padding:11px 13px;background:var(--bg-soft);border-radius:var(--r-sm)}
.apf-intro b{font-size:13px;color:var(--ink);font-weight:800}
.apf-intro p{font-size:12px;color:var(--body);line-height:1.7;margin-top:4px}
.apf-warn{margin-top:12px;padding:11px 13px;border:1px solid #F2DFBE;background:#FFF4E2;
  border-radius:var(--r-sm)}
.apf-warn b{font-size:12px;color:#5E3F08;font-weight:800}
.apf-warn ul{margin:6px 0 0 16px}
.apf-warn li{font-size:11.5px;color:#7A5310;line-height:1.7}
.apf-res{margin-top:14px}
.apf-rh{font-size:12px;color:var(--mute);margin-bottom:8px}
.apf-rh b{color:var(--body)}
.apf-r{padding:10px 0;border-bottom:1px solid var(--line)}
.apf-r:last-child{border-bottom:0}
.apf-rt{font-size:13px;font-weight:800;color:var(--ink)}
.apf-rr{font-size:11px;color:var(--mute);margin-left:7px}
.apf-rlen{font-size:10.5px;color:var(--mute);margin-left:7px;font-family:'SF Mono',Consolas,monospace}
.apf-r p{font-size:12px;color:var(--body);line-height:1.7;margin-top:4px}
.apf-more{font-size:11.5px;color:var(--mute);margin-top:8px}
.apf-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line)}
.apf-act .ws-in{flex:1;min-width:220px}
.apf-reason{margin-top:12px;font-size:12px;color:#7A5310;line-height:1.7}
.apf-reason b{color:#5E3F08;margin-right:6px}

@media (max-width:1100px){
  .pp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .re-roles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .rm-vis{grid-template-columns:1fr}
  .rm-two{grid-template-columns:1fr}
  .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-ref{grid-template-columns:1fr;gap:12px}
  .pf-rth{width:100%;max-width:280px}
  .re-cols{grid-template-columns:1fr 1fr}
  .rm-row{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .rm-th{width:72px}
  .rm-act{grid-column:1/-1}
  .rm-actf{justify-content:flex-start}
}
@media (max-width:620px){
  .pp-grid{grid-template-columns:1fr}
  .re-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .re-cols{grid-template-columns:1fr}
  .pf-hero{flex-direction:column;gap:14px}
  .av.lg{width:64px;height:64px}
  .pf-hnm b{font-size:20px}
}

/* ── 필터 바 · 정렬 줄을 커뮤니티(#s4)·사람(#s40) 화면에도 ─────
   시안 CSS 는 이 조각들을 아카이브(#s2 #s3) 안에만 정의해 두었습니다.
   화면을 늘릴 때마다 여기에 한 줄씩 더해야 합니다. */
#s40 .v4-fbar{display:flex;flex-direction:column;gap:8px;
  margin-top:16px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
#s40 .v4-fr{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#s40 .v4-flb{width:58px;flex:none;font-size:11.5px;font-weight:800;color:var(--mute);letter-spacing:.02em}
#s40 .v4-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;
  font-size:12px;font-weight:600;color:var(--body);text-decoration:none;transition:.12s}
#s40 .v4-chip:hover{border-color:#CFD1DA;background:var(--bg-soft)}
#s40 .v4-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

#s40 .v4-tools{display:flex;align-items:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
#s40 .v4-cnt{font-size:13px;color:var(--mute);font-weight:600}
#s40 .v4-cnt b{color:var(--ink);font-weight:800}
#s40 .v4-sorts{margin-left:auto;display:flex;gap:4px}
#s40 .v4-sorts a{height:32px;padding:0 13px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;
  color:var(--mute);text-decoration:none;transition:.14s}
#s40 .v4-sorts a:hover{background:var(--bg-soft);color:var(--body)}
#s40 .v4-sorts a.on{background:var(--ink);color:#fff;font-weight:800}

/* ══════════════════════════════════════════════════════════════
   9단계 — 알림함 · 설정 (2026-08-17)

   ※ 알림 개수를 등급·점수로 쓰지 않습니다. 그냥 세기만 합니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 머리의 종 ────────────────────────────── */
.tb-bell{
  position:relative;width:40px;height:40px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--mute);transition:.14s;
}
.tb-bell:hover{background:var(--bg-soft);color:var(--body)}
.tb-bell svg{width:20px;height:20px}
.tb-bell.has{color:var(--ink)}
.tb-bell i{
  position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--brand);color:#fff;border:2px solid #fff;
  font-style:normal;font-size:10px;font-weight:800;line-height:13px;text-align:center;
}
.tb-bell.hot i{background:#C2334D}

/* ── 확인이 필요한 참여 표기 ──────────────── */
.nt-ask{border:1px solid var(--wait-line);background:var(--wait-lt);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:18px}
.nt-askhd b{display:block;font-size:14px;font-weight:800;color:#6B4A10}
.nt-askhd span{display:block;margin-top:4px;font-size:12.5px;color:#7A5A20;line-height:1.7}
.nt-askrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--wait-line);border-radius:var(--r-sm);padding:13px 15px;margin-top:10px}
.nt-askinfo{flex:1;min-width:220px}
.nt-askinfo h4{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.nt-askinfo p{font-size:12.5px;color:var(--body);margin-top:4px;line-height:1.6}
.nt-askact{display:flex;gap:7px;flex:none}

/* ── 고르기 줄 ────────────────────────────── */
.nt-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.nt-tabs{display:flex;gap:3px;flex-wrap:wrap}
.nt-tabs a{height:30px;padding:0 11px;border-radius:var(--r-pill);display:inline-flex;
  align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--mute);text-decoration:none}
.nt-tabs a b{font-size:11px;font-weight:800;color:var(--mute)}
.nt-tabs a:hover{background:var(--bg-soft);color:var(--body)}
.nt-tabs a.on{background:var(--ink);color:#fff;font-weight:800}
.nt-tabs a.on b{color:#fff;opacity:.75}
.nt-only{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
  margin-left:auto;border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;
  font-size:12px;font-weight:700;color:var(--mute);text-decoration:none}
.nt-only i{width:24px;height:14px;border-radius:999px;background:#D8DAE3;position:relative;transition:.16s}
.nt-only i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;
  border-radius:50%;background:#fff;transition:.16s}
.nt-only.on{color:#4A38B0;border-color:var(--brand-lt2);background:var(--brand-lt)}
.nt-only.on i{background:var(--brand)}
.nt-only.on i::after{left:12px}

.nt-acts{display:flex;align-items:center;gap:9px;margin:12px 0 2px;font-size:12px}
.nt-sep{color:var(--line-2)}
.nt-acts .po-linkbtn:disabled{opacity:.4;cursor:not-allowed;text-decoration:none}

/* ── 알림 한 줄 ───────────────────────────── */
.nt-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.nt-row.new{background:linear-gradient(90deg,var(--brand-lt) 0%,transparent 60%);
  margin-left:-12px;padding-left:12px;border-radius:var(--r-sm)}
.nt-row.urg.new{background:linear-gradient(90deg,var(--wait-lt) 0%,transparent 60%)}
.nt-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.nt-ic svg{width:18px;height:18px}
.nt-ic.k-brand{background:var(--brand-lt);color:#5B45C8}
.nt-ic.k-ok   {background:var(--ok-lt);color:var(--ok)}
.nt-ic.k-wait {background:var(--wait-lt);color:var(--wait)}
.nt-ic.k-rej  {background:var(--rej-lt);color:var(--rej)}
.nt-ic.k-mute {background:var(--field);color:var(--mute)}

.nt-bd{min-width:0}
.nt-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;font-weight:700}
.nt-k{color:var(--mute)}
.nt-urg{background:var(--wait-lt);color:var(--wait);border:1px solid var(--wait-line);
  border-radius:4px;padding:1px 6px;font-weight:800}
.nt-new{background:var(--brand);color:#fff;border-radius:4px;padding:1px 6px;font-weight:800}
.nt-when{margin-left:auto;color:var(--mute);font-weight:600}
.nt-t{display:block;margin-top:5px;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.nt-b{margin-top:5px;font-size:13px;color:var(--body);line-height:1.7}
.nt-ft{display:flex;align-items:center;gap:12px;margin-top:9px}
.nt-go{font-size:12px;font-weight:800;color:var(--brand);text-decoration:none}
.nt-go:hover{text-decoration:underline}

/* ── 설정 ─────────────────────────────────── */
.st-sec{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:20px 22px;margin-bottom:16px}
.st-hd{margin-bottom:14px}
.st-hd .lead{display:block;margin-top:4px;font-size:12.5px}
.st-handle{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);
  border-radius:var(--r-sm);overflow:hidden;background:var(--field)}
.st-hpre{padding:0 2px 0 13px;font-size:12.5px;color:var(--mute);font-weight:700;
  white-space:nowrap;font-family:'SF Mono',Consolas,monospace}
.st-handle .ws-in{border:0;border-radius:0;background:transparent;padding-left:2px}
.st-handle .ws-in:focus{outline:none;background:#fff}

.st-leave{border:1px solid var(--rej-line);border-radius:var(--r-md);background:var(--rej-lt);
  overflow:hidden}
.st-leave > summary{padding:15px 20px;font-size:13.5px;font-weight:800;color:#8A2440;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.st-leave > summary::-webkit-details-marker{display:none}
.st-leave > summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid #B2536B;border-bottom:2px solid #B2536B;transform:rotate(-45deg)}
.st-leave[open] > summary::before{transform:rotate(45deg);margin-top:-3px}
.st-lbody{padding:0 20px 20px;background:#fff;border-top:1px solid var(--rej-line)}
.st-lbody .ws-alert{margin-top:16px}
.st-danger{color:var(--rej);border-color:var(--rej-line)}
.st-danger:hover{background:var(--rej-lt)}

@media (max-width:620px){
  .nt-row{grid-template-columns:32px minmax(0,1fr);gap:11px}
  .nt-ic{width:32px;height:32px;border-radius:9px}
  .nt-only{margin-left:0}
  .nt-askact{width:100%;justify-content:flex-end}
}

/* ── 홈의 커뮤니티 줄 (2026-08-17) ─────────────
   시안에는 없던 자리입니다. 크루딧은 아카이브·커뮤니티·이력서 3축인데
   홈에 커뮤니티가 아예 없으면 세 번째 축이 숨습니다. */
/* ★ 2026-08-24 — [stated] hong: "뭔가 디자인이 쪼잘쪼잘해보이지 않는가? 정리가 좀 필요해보여"
     5열은 칸이 너무 좁았습니다. 제목이 세 줄로 접히고 카드 키가 제각각이 되니
     글자 무덤처럼 보입니다. 4열로 넓히고 <제목을 두 줄로 고정>해 키를 맞춥니다. */
#s6 .hm-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#s6 .hm-post{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  text-decoration:none;transition:.16s}
#s6 .hm-post:hover{border-color:var(--brand-lt2);box-shadow:0 4px 16px rgba(22,23,29,.07);
  transform:translateY(-1px)}
#s6 .hm-pb{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:-.01em}
/* ★ 2026-08-24 — [stated] hong: "박스는 큰데 글씨가 아이콘이 많이 작아보여요"
     칸 수가 아니라 <글자 크기>가 문제였습니다. 카드는 309×207 인데
     게시판 이름이 11px, 수치가 11.5px 라 큰 상자 안에 깨알이 박힌 꼴이었습니다.
     칸 폭에 맞게 한 단씩 올립니다.

   ★ 제목은 <늘 두 줄 자리>를 차지합니다 — 한 줄짜리 글이 섞여도 카드 키가 흔들리지 않습니다.
     ※ `> b` 로 <바로 아래 b> 만 겨눕니다.
       전에는 그냥 `b` 라서 <아래쪽 닉네임까지 제목 크기(14.5px·두 줄 높이)>가 먹었습니다. */
#s6 .hm-post > b{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.028em;
  line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(16.5px * 1.5 * 2)}
#s6 .hm-pm{margin-top:auto;padding-top:13px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  font-size:12.5px;color:var(--mute);font-weight:600;min-width:0}
#s6 .hm-pm .av{flex:none;border-radius:50%;overflow:hidden;width:30px;height:30px}
#s6 .hm-pm .av img{width:100%;height:100%;object-fit:cover;display:block}
/* 누가 썼는지가 먼저 읽히게 — 이름을 진하게, 시각은 옅게 */
#s6 .hm-pm .hm-pw{font-size:13.5px;font-weight:800;color:var(--body);line-height:1.4;min-height:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block}
#s6 .hm-pm .v4-dot{flex:none;color:var(--line-2)}
#s6 .hm-pm .po-sample{height:17px;padding:0 5px;font-size:9.5px;font-style:normal}
#s6 .v4-wayp{font-size:12.5px;color:var(--mute);line-height:1.65;margin-top:9px}
#s6 .v4-wayn{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin-left:auto}
#s6 .v4-wayfoot{display:flex;align-items:center;gap:9px}

@media (max-width:1360px){ #s6 .hm-posts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){  #s6 .hm-posts{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ★ 좁아져도 <두 칸>으로 둡니다 (2026-08-19)
   [stated] hong: "메인에 반응형일때 게시글이 한줄씩 나오는데 두줄씩 나오도록"
   한 칸이면 글 카드 하나가 화면 폭을 통째로 먹어, 손가락으로 한참 내려야
   다음 글이 나옵니다. 두 칸이라야 <훑어보는 화면>이 됩니다. */
@media (max-width:520px){
  /* 2026-08-24 — 여기도 같은 이유로 한 단씩 올립니다.
     10px·18px 는 손에 들고 보는 화면에서 너무 작습니다. */
  #s6 .hm-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #s6 .hm-post{padding:14px 13px 13px;gap:7px}
  #s6 .hm-post > b{font-size:14px;-webkit-line-clamp:3;min-height:0}
  #s6 .hm-pb{font-size:11.5px}
  #s6 .hm-pm{font-size:11.5px;gap:6px;padding-top:9px}
  #s6 .hm-pm .av{width:24px!important;height:24px!important}
  #s6 .hm-pm .hm-pw{font-size:12px}
  #s6 .hm-pn{gap:10px;margin-top:7px;padding-top:8px}
  #s6 .hm-pk{font-size:12px}
  #s6 .hm-pk svg{width:13px;height:13px}
}

/* 홈 카드 안의 진짜 사진 — 시안은 자리표시(.ph)만 있어서 img 규칙이 없었습니다 */
#s6 .v4-bg-thumb img,#s6 .v4-f-thumb img,#s6 .v4-n-thumb img,#s6 .v4-st img{
  width:100%;height:100%;object-fit:cover;display:block}
#s6 .v4-bg-thumb{overflow:hidden}

/* 공개 프로필의 이름은 h1 입니다 — 화면마다 h1 이 하나는 있어야 합니다 */
.pf-hnm h1{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.035em;line-height:1.25}
@media (max-width:620px){ .pf-hnm h1{font-size:20px} }

/* ── 관리자 · 스위치와 설정 칸 (2026-08-17 / 2026-08-20 색 고침) ──
   ★ 관리자 본문은 흰 종이입니다. 처음에 어두운 화면인 줄 알고 짰다가
     스위치 칸만 시커멓게 튀고 그 안 설명 글씨가 흐려서 다시 잡았습니다.
     이 규칙은 보안·메일·광고·접속 통계 네 화면이 함께 씁니다. */
.adm-form{display:flex;flex-direction:column;gap:8px}
.adm-form > .adm-lb{font-size:12px;font-weight:800;color:var(--ink);width:auto;display:block}
.adm-form .adm-hint{display:block;margin-top:3px;font-size:11.5px;font-weight:600;
  color:var(--mute);line-height:1.7}
.adm-form .adm-hint code{background:var(--brand-lt);color:#4A38B0;padding:1px 5px;border-radius:4px;
  font-family:'SF Mono',Consolas,monospace;font-size:11px}
.adm-form .ws-in{background:#fff;border-color:var(--line-2);color:var(--ink)}
.adm-form .ws-in::placeholder{color:var(--mute)}
.adm-form > .btn{align-self:flex-start;margin-top:14px}

.adm-sw{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-soft);cursor:pointer}
.adm-sw:hover{border-color:var(--brand)}
.adm-sw input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--brand);cursor:pointer}
.adm-sw span{font-size:12.5px;color:var(--body);line-height:1.7}
.adm-sw b{display:block;font-size:13.5px;color:var(--ink);font-weight:800;margin-bottom:3px}
.adm-sw:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}

.adm-warn{padding:12px 14px;border:1px solid #F2DFBE;background:#FFF4E2;border-radius:var(--r-md);
  font-size:12px;color:#7A5310;line-height:1.7}
.adm-warn b{display:block;color:#5E3F08;font-weight:800;margin-bottom:3px}

.adm-sec-h .adm-more.ok {color:#1F6B41}
.adm-sec-h .adm-more.off{color:#A8324A}

/* ══════════════════════════════════════════════
   안내 문서 화면 (AI · 크루딧은 어떻게 만들어졌나 · 약관 등)
   ── app/doc.php 가 씁니다.
   ── .ar-foot 를 빌려 쓰다가 제목 밑에 줄이 그어지고 글씨가 너무 작아져서
      전용 규칙을 따로 둡니다.
   ══════════════════════════════════════════════ */
.doc-sec{margin-top:12px}
.doc-sec p{font-size:14px;color:var(--ink);line-height:1.82;margin:0 0 13px}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec p > b:first-child{font-weight:800}
.content > .pf-body > .h2{margin-top:34px}

/* 관리자 · 메일 화면 — 포트와 암호 방식을 나란히 놓습니다 */
.adm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:560px){ .adm-row2{grid-template-columns:1fr} }
.adm-form select.ws-in{appearance:auto;height:40px}
.adm-sec details summary::-webkit-details-marker{display:none}

/* 가운뎃점 구분자 — 홈의 큰 카드 안에서는 작은 원으로 그려지지만,
   그 밖에서는 그냥 「·」 글자입니다. <i> 라서 기울어지는 것만 막아 둡니다. */
.v4-dot{font-style:normal;color:var(--mute);margin:0 5px;display:inline}
#s6 .v4-bg-by .v4-dot{margin:0}

/* ══════════════════════════════════════════════
   홈 · 제작방식으로 골라보기 — A안 (2026-08-18, hong 선택)
   ──────────────────────────────────────────────
   [stated] hong: "크루딧 a 시안이 좋겠어"

   흰 카드 + 옅은 색 아이콘 칸. 캐릭터 아이콘 42px (시안 규격).

   ※ 세 갈래(전면·부분·사람)는 <종류>지 <등급>이 아닙니다.
     그래서 셋의 크기·무게·글자 굵기를 한 톨도 다르게 두지 않았습니다.
     하나만 화려하면 그게 더 좋은 것처럼 읽힙니다.

   ※ 네 번째 통계 칸은 <갈래>가 아니라 <다음 행동>입니다.
     같은 모양으로 두면 「제작방식이 네 가지」로 잘못 읽히므로
     회색 바탕 + 점선 테두리로 성격이 다르다는 걸 보여 줍니다.
   ══════════════════════════════════════════════ */

#s6 .v4-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

#s6 .v4-way{
  display:flex;flex-direction:column;
  padding:20px 18px 17px;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  color:inherit;text-decoration:none;
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
/* 갈래마다 색 두 개만 바꿉니다 — 진한 색(--c)과 옅은 바탕(--cbg).
   나머지 모양은 넷이 완전히 같습니다. */
#s6 .v4-way.way-full {--c:#7C5CFC;--cbg:#F1EDFE}
#s6 .v4-way.way-part {--c:#3B82D9;--cbg:#EAF1FD}
#s6 .v4-way.way-human{--c:#2E9A62;--cbg:#EAF6EE}
#s6 .v4-way.way-stat {--c:#4B4E5C;--cbg:#E5E6EC}

#s6 .v4-way:hover{
  border-color:var(--c);transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(22,23,29,.09);
}
#s6 .v4-way:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* 캐릭터를 얹는 칸 */
#s6 .v4-wayart{
  width:58px;height:58px;border-radius:16px;background:var(--cbg);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;line-height:0;flex:none;transition:transform .2s;
}
#s6 .v4-wayart svg{display:block;width:42px;height:42px}
#s6 .v4-way:hover .v4-wayart{transform:translateY(-2px)}

/* 제목과 건수는 한 줄 */
#s6 .v4-waytop{display:flex;align-items:baseline;gap:8px}
#s6 .v4-wayt{
  font-size:15px;font-weight:800;letter-spacing:-.03em;
  color:var(--c);line-height:1.3;
}
#s6 .v4-wayn{
  /* ★ 시안 CSS 쪽 #s6 .v4-wayn 에 margin-left:auto 가 있어 그대로 씁니다 —
       여기서는 오른쪽으로 미는 게 맞습니다. 다만 아래 값들은 다시 못박아 둡니다. */
  margin:0 0 0 auto;display:inline-flex;align-items:baseline;gap:1px;flex:none;
  font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;
}
#s6 .v4-wayn i,#s6 .v4-wayn em{
  font-style:normal;font-size:11px;font-weight:700;color:var(--mute);margin-left:2px;
}
#s6 .v4-wayn em{margin:0 3px 0 0}

#s6 .v4-wayp{
  margin:9px 0 0;font-size:12.5px;font-weight:500;line-height:1.65;color:var(--mute);
}

#s6 .v4-waygo{
  margin-top:auto;padding-top:14px;
  font-size:12px;font-weight:800;color:var(--c);
}

/* 통계 칸만 성격이 다르다는 표시 */
#s6 .v4-way.way-stat{background:var(--bg-soft,#F7F7FA);border-style:dashed}
#s6 .v4-way.way-stat:hover{border-style:solid}

/* ══ 네 칸을 <끝까지> 네 칸으로 (2026-08-19) ═══════════════
   [stated] hong: "모바일에서는 두줄 pc에서는 네줄 나란히 나오게 해주세요"

   ★ 전에는 1320px 아래에서 벌써 두 칸으로 접혔습니다.
     보통 노트북(1440px 창을 반만 쓰거나 1280px 화면)이면 곧바로 2×2 가 되어
     PC 에서 네 칸을 볼 일이 거의 없었습니다. 접는 지점을 1100px 로 내립니다.
   ★ 그리고 좁은 화면에서 <한 칸>으로 떨어뜨리지 않습니다.
     한 칸이면 카드 하나가 화면을 통째로 먹어, 네 갈래가 있다는 것 자체가 안 보입니다.
     두 칸이면 손바닥 안에서도 <고르는 화면>으로 읽힙니다. */
@media (max-width:1100px){
  #s6 .v4-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* ★ 시안 CSS 9029줄의 1칸 규칙(≤940px)을 여기서 되돌립니다 */
  #s6 .v4-ways{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #s6 .v4-way{padding:15px 13px 13px}
  #s6 .v4-wayart{width:44px;height:44px;margin-bottom:9px}
  #s6 .v4-wayart svg{width:32px;height:32px}
  #s6 .v4-waytop{flex-wrap:wrap;gap:2px 7px}
  #s6 .v4-wayt{font-size:14px}
  #s6 .v4-wayn{font-size:15px}
  #s6 .v4-wayp{font-size:11.5px;line-height:1.6;margin-top:6px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #s6 .v4-waygo{font-size:11.5px}
}
@media (max-width:400px){
  #s6 .v4-ways{gap:8px}
  #s6 .v4-way{padding:13px 11px 12px}
  #s6 .v4-wayt{font-size:13px}
}

/* ══════════════════════════════════════════════
   프로젝트 상세 · 이 프로젝트에 대한 이야기
   ──────────────────────────────────────────────
   커뮤니티 글의 댓글과 같은 결로 보이되, 여기는 「등록자」 표시가 붙습니다.
   누가 만든 사람인지가 이 화면의 핵심이라 그렇습니다.
   ══════════════════════════════════════════════ */

.pt-wrap{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.pt-head{margin-bottom:16px}
.pt-head .h2{display:flex;align-items:center;gap:8px}
.pt-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 7px;border-radius:999px;background:var(--brand-lt);color:var(--brand);
  font-size:12px;font-weight:800;
}
.pt-sub{margin-top:6px;font-size:12.5px;color:var(--mute);line-height:1.7}

.pt-none{
  margin:0;padding:22px 0;text-align:center;font-size:13px;color:var(--mute);
  border:1px dashed var(--line-2);border-radius:var(--r-md);
}

.pt-row{
  margin-left:calc(var(--d, 0) * 26px);
  padding:14px 0;border-bottom:1px solid var(--line);
}
.pt-row:last-of-type{border-bottom:0}
.pt-rhd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.pt-who{font-weight:800;color:var(--ink);text-decoration:none}
a.pt-who:hover{color:var(--brand);text-decoration:underline}
/* ★ 2026-08-19 — 여기서 화면이 깨지고 있었습니다.
   운영팀 표를 <span class="pt-tag adm"> 로 달아 뒀는데,
   시안 CSS 1646줄에 관리자 화면 껍데기용 `.adm{min-height:900px}` 이 있습니다.
   이름이 겹쳐서 <18px 짜리 알약이 900px 짜리 초록 기둥>이 되었고,
   그 옆의 글이 세로 가운데로 밀려 댓글이 통째로 무너졌습니다.
   딱지 이름을 op 로 바꾸고, 다시 겹쳐도 안 늘어나게 못 박아 둡니다. */
.pt-tag{
  height:18px;min-height:0;flex:none;align-self:center;
  padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:-.01em;
}
.pt-tag.own{background:var(--brand-lt);color:var(--brand)}
.pt-tag.op,.pt-tag.adm{background:#EAF6EE;color:#2A7A4B}
/* 댓글 줄 안에서는 어떤 것도 제 키를 마음대로 늘릴 수 없게 합니다 */
.pt-rhd > *{min-height:0}
.pt-when{color:var(--mute)}
.pt-linkbtn{
  margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font-size:12px;color:var(--mute);text-decoration:underline;
}
.pt-linkbtn:hover{color:var(--ng)}
.pt-body{margin-top:7px;font-size:13.5px;color:var(--body);line-height:1.78;word-break:break-word}

.pt-reply{margin-top:9px}
.pt-reply summary{
  cursor:pointer;font-size:12px;font-weight:700;color:var(--mute);
  list-style:none;display:inline-block;
}
.pt-reply summary::-webkit-details-marker{display:none}
.pt-reply summary:hover{color:var(--brand)}
.pt-reply form{margin-top:9px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}

.pt-new{margin-top:20px}
.pt-newfoot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;
  font-size:12px;color:var(--mute);
}

.pt-foot{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mute);line-height:1.75;
}
.pt-foot > b:first-child{display:block;color:var(--ink);font-weight:800;margin-bottom:3px}
.pt-foot b{color:var(--ink);font-weight:700}

@media (max-width:620px){
  .pt-row{margin-left:calc(var(--d, 0) * 14px)}
  .pt-newfoot{flex-direction:column;align-items:stretch}
}

/* ══════════════════════════════════════════════
   커뮤니티 3분할 (시안 복구)
   ──────────────────────────────────────────────
   시안은 왼쪽 게시판 · 가운데 글 · 오른쪽 사이드 셋이었는데,
   목록을 다시 짜면서 오른쪽이 빠져 있었습니다. 되살립니다.

   ※ 왼쪽 열 너비는 지금 쓰는 게시판 목록(.rc-nav)에 맞춥니다.
     시안의 220px 는 옛 목록 기준이라 지금은 헐렁합니다.
   ══════════════════════════════════════════════ */

#s4 .rx-3col{grid-template-columns:190px minmax(0,1fr) 260px;gap:26px}

#s4 .rx-side-r{display:flex;flex-direction:column;gap:16px;position:sticky;top:18px}
#s4 .rx-side-r .rx-sec{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:14px 15px 13px;
}
#s4 .rx-side-r .rx-sec-h{
  display:flex;align-items:baseline;gap:6px;
  font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:9px;
}
#s4 .rx-side-r .rx-n{margin-left:auto;font-size:11px;font-weight:600;color:var(--mute)}

#s4 .rx-pop{
  display:flex;align-items:center;gap:7px;padding:6px 0;
  font-size:12.5px;color:var(--body);text-decoration:none;
}
#s4 .rx-pop:hover{color:var(--brand)}
#s4 .rx-pop .rx-pi{flex:none;display:flex;color:var(--mute)}
#s4 .rx-pop .rx-pi svg{width:13px;height:13px}
#s4 .rx-pop .rx-pc{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--mute)}

#s4 .rx-mini{
  display:flex;gap:9px;padding:7px 0;text-decoration:none;align-items:flex-start;
  border-top:1px solid var(--line);
}
#s4 .rx-mini:first-of-type{border-top:0}
#s4 .rx-mnum{
  flex:none;width:17px;height:17px;border-radius:5px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--field);color:var(--mute);font-size:10.5px;font-weight:800;
}
#s4 .rx-mini:first-of-type .rx-mnum{background:var(--brand-lt);color:var(--brand)}
#s4 .rx-mbody{min-width:0;display:flex;flex-direction:column;gap:2px}
#s4 .rx-mt{
  font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#s4 .rx-mini:hover .rx-mt{color:var(--brand)}
#s4 .rx-mm{font-size:11px;color:var(--mute)}

#s4 .rx-secnote p{margin:0 0 11px;font-size:12px;color:var(--mute);line-height:1.7}
#s4 .rx-secnote b{color:var(--ink);font-weight:700}
#s4 .rx-secnote .btn{width:100%;justify-content:center}

@media (max-width:1180px){
  #s4 .rx-3col{grid-template-columns:180px minmax(0,1fr)}
  #s4 .rx-side-r{display:none}
}
@media (max-width:760px){
  #s4 .rx-3col{grid-template-columns:minmax(0,1fr)}
}

/* ══════════════════════════════════════════════
   글 속 링크 · 미리보기 카드
   ──────────────────────────────────────────────
   ※ 카드의 그림은 <우리 서버에 받아 둔> 파일입니다.
     남의 주소를 그대로 걸면 보는 사람의 IP 가 그 사이트로 새어 나가고,
     그쪽이 죽으면 우리 화면도 깨집니다.
   ══════════════════════════════════════════════ */

.po-link{
  color:var(--brand);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;word-break:break-all;
}
.po-link:hover{color:var(--brand-dk);text-decoration-thickness:2px}

.lp-card{
  display:flex;align-items:stretch;gap:0;margin-top:18px;max-width:520px;min-height:98px;
  border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;
  background:#fff;text-decoration:none;transition:border-color .14s, box-shadow .14s;
}
.lp-card:hover{border-color:var(--brand-lt2);box-shadow:0 6px 18px rgba(22,23,29,.08)}

/* 그림 칸은 높이를 카드에 맞춥니다.
   flex 안에서 height:100% 만 주면 브라우저가 높이를 못 정해 그림이 안 보입니다. */
.lp-th{
  flex:none;width:132px;align-self:stretch;position:relative;
  background:var(--field);overflow:hidden;display:block;
}
.lp-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.lp-bd{
  min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;justify-content:center;
}
.lp-site{font-size:11px;color:var(--mute);letter-spacing:.01em}
.lp-t{
  font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-card:hover .lp-t{color:var(--brand)}
.lp-d{
  font-size:12px;color:var(--mute);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media (max-width:560px){
  .lp-card{max-width:none}
  .lp-th{width:96px}
}

/* 홈에서 아직 자료가 없는 자리 — 통째로 지우지 않고 한 줄로 알려 줍니다.
   자리를 지우면 홈이 「최근 글」 하나짜리 화면으로 보입니다. */
.hm-blank{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:20px 22px;border:1px dashed var(--line-2);border-radius:var(--r-md);
  background:var(--soft);
}
.hm-blank b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.hm-blank span{font-size:12.5px;color:var(--mute);line-height:1.7;max-width:640px}
.hm-blank .btn{margin-top:7px}

/* ══════════════════════════════════════════════
   커뮤니티 글 사진 (18단계)
   ──────────────────────────────────────────────
   ※ 사진은 본문 <아래>에 붙습니다.
     본문 안에 넣으려면 HTML 을 저장해야 하는데, 그러면
     글로 코드를 심는 통로가 새로 열립니다. 그 통로를 안 엽니다.
   ══════════════════════════════════════════════ */

/* ── 글 상세 ── */
.po-photos{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.po-photo{display:block;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--field)}
.po-photo img{display:block;width:100%;height:auto}
.po-photo:hover{border-color:var(--brand-lt2)}

/* ── 목록 ── */
#s4 .pl-main{display:flex;gap:16px;align-items:flex-start}
#s4 .pl-txt{min-width:0;flex:1}
#s4 .pl-th{
  flex:none;width:112px;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;
  background:var(--field);border:1px solid var(--line);display:block;
}
#s4 .pl-th img{width:100%;height:100%;object-fit:cover;display:block}
#s4 .pl-row:hover .pl-th{border-color:var(--brand-lt2)}
@media (max-width:620px){
  #s4 .pl-th{width:84px}
  #s4 .pl-main{gap:12px}
}

/* ── 글쓰기 화면의 사진 칸 ── */
.po-imgedit{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.po-imgcell{
  position:relative;width:132px;aspect-ratio:4/3;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line);background:var(--field);
}
.po-imgcell img{width:100%;height:100%;object-fit:cover;display:block}
.po-imgdel{
  position:absolute;right:5px;top:5px;height:22px;padding:0 8px;border:0;cursor:pointer;
  border-radius:999px;background:rgba(22,23,29,.72);color:#fff;font-size:11px;font-weight:700;
}
.po-imgdel:hover{background:var(--ng)}

/* ══════════════════════════════════════════════
   통계 (19단계)
   ──────────────────────────────────────────────
   그래프는 바깥 라이브러리 없이 SVG 로 직접 그립니다.
   ══════════════════════════════════════════════ */

.st-caveat{
  display:flex;gap:10px;align-items:flex-start;max-width:840px;
  margin:20px 0 6px;padding:13px 16px;border-radius:var(--r-md);
  background:var(--wn-lt, #FEF9EE);border:1px solid var(--wn-ln, #F0DDB4);
  font-size:12.5px;line-height:1.72;color:#6B5522;
}
.st-caveat svg{width:15px;height:15px;flex:none;margin-top:3px;color:#B8801A}
.st-caveat b{color:#4E3D14;font-weight:800}

.st-sec{margin-top:36px}
/* ※ 시안 CSS(crewdit.css)에도 같은 이름의 .st-note 가 있고 그쪽은 <상자>입니다.
   이름이 겹치면 안 쓴 값(display · padding · 테두리)이 그대로 남습니다.
   그래서 여기서 <전부> 되돌려 놓습니다. 안 그러면 문장이 두 칸으로 쪼개집니다. */
.st-note{
  display:block;margin:10px 0 14px;padding:0;border:0;background:none;
  font-size:12.5px;color:var(--mute);line-height:1.72;max-width:760px;
}

.st-now{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 16px}
.st-card{
  display:flex;flex-direction:column;gap:3px;padding:16px 18px;
  border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--r-md);
  background:#fff;text-decoration:none;transition:.14s;
}
.st-card:hover{border-color:var(--line-2);border-left-color:var(--c);box-shadow:0 6px 18px rgba(22,23,29,.07)}
.st-cn{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1}
.st-cn i{font-style:normal;font-size:13px;font-weight:700;color:var(--mute);margin-left:3px}
.st-cl{font-size:13px;font-weight:800;color:var(--c);letter-spacing:-.02em;margin-top:4px}
.st-cp{font-size:12px;color:var(--mute)}
@media (max-width:720px){ .st-now{grid-template-columns:1fr} }

.st-bar{
  display:flex;width:100%;height:14px;border-radius:999px;overflow:hidden;
  background:var(--field);min-width:0;
}
.st-bar span{display:block;height:100%;transition:filter .14s}
.st-bar span:hover{filter:brightness(1.12)}
.st-bar.empty{background:var(--field)}

.st-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px}
.st-legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute)}
.st-legend i{width:9px;height:9px;border-radius:3px;flex:none}

.st-rows{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.st-row{display:grid;grid-template-columns:92px minmax(0,1fr) 66px;gap:12px;align-items:center}
.st-rk{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.st-rn{font-size:12px;color:var(--mute);text-align:right;white-space:nowrap}
@media (max-width:620px){
  .st-row{grid-template-columns:74px minmax(0,1fr) 56px;gap:9px}
  .st-rk{font-size:12px}
}

.st-chart{
  margin-top:6px;padding:14px 12px 4px;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;
}
.st-cols{display:block;width:100%;height:auto}
.st-cols rect{transition:filter .14s}
.st-cols rect:hover{filter:brightness(1.15)}

/* ── 추세 (20단계) ──
   이 화면이 답하려는 질문은 「지금 몇 건이냐」가 아니라
   「어느 쪽으로 가고 있냐」입니다. 그래서 한 줄 요약을 맨 위에 크게 둡니다.
   ※ 그래도 <숫자>지 <점수>가 아닙니다. 화살표는 방향일 뿐 좋고 나쁨이 아닙니다. */
.st-lead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding:16px 18px;margin:0 0 16px;max-width:none;   /* 시안 CSS 의 max-width:760px 를 되돌립니다 */
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--field);
}
.st-leadk{font-size:12.5px;font-weight:800;color:var(--mute);letter-spacing:-.02em}
.st-leadv{display:inline-flex;align-items:baseline;gap:9px}
.st-leadv b{font-size:24px;font-weight:800;letter-spacing:-.04em;color:#A8ABB8;line-height:1}
.st-leadv b.now{font-size:30px;color:var(--ink)}
.st-leadv i{font-style:normal;font-size:16px;color:#A8ABB8;font-weight:700}
.st-lead.up   .st-leadv b.now{color:#5B45C8}
.st-lead.down .st-leadv b.now{color:#2A7A4B}
.st-leadn{font-size:12px;color:var(--mute);line-height:1.6}
.st-leadn b{color:var(--ink);font-weight:800}

/* 이름을 stt- 로 뗀 이유: 시안 CSS 의 .st-two 는 max-width:420px 짜리 작은 격자입니다.
   같은 이름을 쓰면 그래프가 420px 안으로 접혀 손톱만 해집니다. */
.stt-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.stt-half{min-width:0}
.stt-halfh{
  font-size:12px;font-weight:800;color:var(--mute);letter-spacing:-.02em;
  margin-bottom:2px;
}
.stt-halfh i{font-style:normal;color:var(--ink)}
@media (max-width:900px){ .stt-two{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════
   커뮤니티 — 사진 크기 · SNS 형 목록 · 앞뒤 글 (20단계)
   ══════════════════════════════════════════════ */

/* ── 글 상세의 사진 ──
   ※ 크기를 안 묶으면 세로로 긴 사진 하나가 화면을 통째로 밀어냅니다.
     그렇다고 object-fit:contain 으로 눌러 담으면
     양옆에 <빈칸>이 생깁니다 — 그게 「블랭크」의 정체입니다.
     그래서 상자를 씌우고 <넘치는 부분만 잘라> 둡니다.
     원본은 눌러서 새 창으로 봅니다. */
.po-photos{
  display:flex;flex-direction:column;align-items:flex-start;   /* 사진마다 제 크기대로 */
  gap:14px;margin-top:20px;max-width:760px;
}
.po-photo{
  position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--field);line-height:0;max-width:100%;
}
/* 높이를 640 으로 묶고 <가로를 그에 맞춰 줄입니다.>
   width:100% 로 두고 높이만 자르면 양옆에 빈칸이 생깁니다. */
.po-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:640px}
.po-photo:hover{border-color:var(--brand-lt2)}

/* 세로가 가로의 2.2배를 넘는 사진 — 실무 화면 통짜 캡처가 대개 여기 걸립니다.
   높이에 맞춰 줄이면 손톱만 해지니, 이것만 폭을 살리고 아래를 잘라 둡니다.
   자른 자리를 숨기지 않고 「이 아래로 더 있습니다」라고 밝힙니다. */
.po-photo.tall{max-height:640px;width:100%;max-width:520px}
.po-photo.tall img{width:100%;max-height:none}
.po-photo.tall::after{
  content:"사진 전체 보기 ›";position:absolute;left:0;right:0;bottom:0;
  padding:44px 14px 12px;text-align:center;line-height:1.4;
  font-size:12.5px;font-weight:800;color:#fff;letter-spacing:-.02em;
  background:linear-gradient(180deg,rgba(18,19,24,0) 0%,rgba(18,19,24,.72) 62%,rgba(18,19,24,.86) 100%);
}
.po-photo.tall:hover::after{background:linear-gradient(180deg,rgba(18,19,24,0) 0%,rgba(18,19,24,.8) 62%,rgba(18,19,24,.92) 100%)}

/* ── 목록: SNS 처럼 글 아래에 넓게 ── */
#s4 .pl-pics{
  display:grid;gap:4px;margin-top:11px;border-radius:var(--r-md);overflow:hidden;
  position:relative;max-width:520px;
}
#s4 .pl-pics.n1{grid-template-columns:1fr}
#s4 .pl-pics.n2{grid-template-columns:1fr 1fr}
#s4 .pl-pics.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
#s4 .pl-pics.n3 span:first-child{grid-row:span 2}
#s4 .pl-pics span{display:block;background:var(--field);overflow:hidden}
#s4 .pl-pics.n1 span{aspect-ratio:16/9}
#s4 .pl-pics.n2 span,#s4 .pl-pics.n3 span{aspect-ratio:1/1}
#s4 .pl-pics.n3 span:first-child{aspect-ratio:auto}
#s4 .pl-pics img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
#s4 .pl-row:hover .pl-pics img{transform:scale(1.02)}
#s4 .pl-picmore{
  position:absolute;right:8px;bottom:8px;padding:2px 9px;border-radius:999px;
  background:rgba(22,23,29,.72);color:#fff;font-size:11.5px;font-weight:800;font-style:normal;
}

/* ── 앞뒤 글 ── */
.po-near{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.po-nearnav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.po-nn{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;text-decoration:none;
}
.po-nn:hover{border-color:var(--brand-lt2);background:var(--brand-lt)}
.po-nn span{font-size:11.5px;color:var(--mute);font-weight:700}
.po-nn b{
  font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.po-nn.next{text-align:right}
.po-nn.off{background:var(--soft);border-style:dashed;cursor:default}

.po-nearlist{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.po-nearh{
  display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:800;color:var(--ink);background:var(--soft);
}
.po-nearh a{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand);text-decoration:none}
.po-nl{display:flex;flex-direction:column;gap:2px;padding:10px 15px;border-top:1px solid var(--line);text-decoration:none}
.po-nl:first-of-type{border-top:0}
.po-nl:hover{background:var(--soft)}
.po-nl b{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.5}
.po-nl:hover b{color:var(--brand)}
.po-nl span{font-size:11px;color:var(--mute)}

.po-nearact{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}

@media (max-width:620px){
  .po-nearnav{grid-template-columns:1fr}
  .po-nn.next{text-align:left}
  #s4 .pl-pics{max-width:none}
}


/* ══════════════════════════════════════════════
   인재채용 (21단계) — #s11
   ──────────────────────────────────────────────
   ※ 여기에도 순위 · 별점 · 「추천 공고」가 없습니다.
     정렬은 마감 임박순과 최신순뿐입니다.
   ※ 「상단 고정」은 <산 자리>라서 반드시 그렇게 적힌 표를 답니다.
     표 없이 위에 올리면 그건 크루딧이 추천한 것처럼 읽힙니다.
   ══════════════════════════════════════════════ */

/* 시안 CSS 의 v4-* 는 화면마다 따로 정의돼 있습니다(#s6 · #s3 · #s4 …).
   #s11 자리를 안 만들면 제목과 정렬 줄이 <꾸밈 없는 글자>로 떨어집니다. */
#s11 .v4-sec{margin-top:38px}
#s11 .v4-shead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
#s11 .v4-stitle{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.025em}
#s11 .v4-ssub{font-size:12.5px;color:var(--mute);font-weight:600}
#s11 .v4-tools{display:flex;align-items:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
#s11 .v4-cnt{font-size:13px;color:var(--mute);font-weight:600}
#s11 .v4-cnt b{color:var(--ink);font-weight:800}
#s11 .v4-sorts{margin-left:auto;display:flex;gap:4px;flex:none}
#s11 .v4-sorts a{
  display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:var(--r-pill);
  background:transparent;color:var(--mute);font-size:12.5px;font-weight:700;
  text-decoration:none;transition:.12s;white-space:nowrap;
}
#s11 .v4-sorts a:hover{background:var(--bg-soft);color:var(--body)}
#s11 .v4-sorts a.on{background:var(--ink);color:#fff;font-weight:800}

/* ── 직군 탭 ── */
#s11 .jb-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
#s11 .jb-tab{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:13px;font-weight:700;color:var(--body);text-decoration:none;transition:.13s;
}
#s11 .jb-tab:hover{border-color:var(--line-2);background:var(--field)}
#s11 .jb-tab i{font-style:normal;font-size:12px;font-weight:800;color:var(--mute)}
#s11 .jb-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
#s11 .jb-tab.on i{color:rgba(255,255,255,.72)}

#s11 .jb-tools-row{margin-top:16px;flex-wrap:wrap;gap:10px}
#s11 .jb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
#s11 .jb-chips .chip{text-decoration:none}

#s11 .jb-clear{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:12.5px;color:var(--mute);
}
#s11 .jb-clear a{font-weight:800;color:var(--brand);text-decoration:underline}

/* ── 상단 고정 카드 ── */
#s11 .jb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:980px){ #s11 .jb-grid{grid-template-columns:1fr} }

#s11 .jb-card{
  display:block;padding:18px 20px 16px;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;text-decoration:none;transition:.14s;
}
#s11 .jb-card:hover{border-color:var(--line-2);box-shadow:0 8px 22px rgba(22,23,29,.07)}
#s11 .jb-card.pin{border-color:var(--brand-lt2);background:linear-gradient(180deg,#FBFAFF 0%,#fff 42%)}

#s11 .jb-co,#s11 .jd-co{display:flex;align-items:center;gap:11px}
.jb-lg{
  width:38px;height:38px;flex:none;border-radius:11px;
  background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:var(--mute);letter-spacing:-.03em;
}
.jb-lg.big{width:48px;height:48px;border-radius:13px;font-size:15px}
#s11 .jb-cot{min-width:0;display:flex;flex-direction:column;gap:1px}
#s11 .jb-cot b{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s11 .jb-cot span{font-size:11.5px;color:var(--mute)}

#s11 .jb-pin{
  margin-left:auto;height:22px;padding:0 9px;border-radius:6px;
  display:inline-flex;align-items:center;flex:none;
  background:var(--brand-lt);color:#5B45C8;font-size:11px;font-weight:800;letter-spacing:-.02em;
}
#s11 .jb-pin + .jb-dd{margin-left:8px}

.jb-dd{
  margin-left:auto;flex:none;height:24px;padding:0 10px;border-radius:7px;
  display:inline-flex;align-items:center;background:var(--field);
  font-size:12px;font-weight:800;color:var(--body);letter-spacing:-.02em;white-space:nowrap;
}
.jb-dd.soon{background:#FDF1F1;color:#B23A3A}
.jb-dd.any {background:#EFF6F1;color:#2A7A4B}
.jb-dd.big {height:30px;padding:0 13px;font-size:13.5px}
.jb-dd.sm  {height:21px;padding:0 8px;font-size:11px}

#s11 .jb-t{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1.42;margin-top:13px}

.jb-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.jb-role{
  display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:6px;
  background:var(--field);color:var(--body);font-size:11.5px;font-weight:700;letter-spacing:-.02em;
}
.jb-role.mn{background:var(--brand-lt);color:#5B45C8;font-weight:800}
.jb-role.sm{height:20px;padding:0 7px;font-size:11px;margin-right:5px}
.jb-tool{
  display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:6px;
  border:1px solid var(--line);background:#fff;color:var(--mute);font-size:11.5px;font-weight:600;
}

#s11 .jb-cond{margin-top:10px;font-size:12.5px;color:var(--body);line-height:1.6}
#s11 .jb-cond.pay{margin-top:4px;color:var(--mute)}
#s11 .jb-tools{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
#s11 .jb-tools span{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;
  border:1px solid var(--line);color:var(--mute);font-size:11px;font-weight:600;
}

/* ── 목록 줄 ── */
#s11 .jb-list{display:flex;flex-direction:column;margin-top:14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
#s11 .jb-row{
  display:flex;align-items:center;gap:13px;padding:15px 18px;
  border-bottom:1px solid var(--line);text-decoration:none;transition:background .12s;
}
#s11 .jb-row:last-child{border-bottom:0}
#s11 .jb-row:hover{background:var(--soft)}
#s11 .jb-ri{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#s11 .jb-rco{font-size:11.5px;color:var(--mute);font-weight:600}
#s11 .jb-rt{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.4}
#s11 .jb-rc{font-size:12px;color:var(--mute);line-height:1.6}

#s11 .jb-empty{
  margin-top:14px;padding:34px 24px;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--soft);
}
#s11 .jb-empty b{font-size:14.5px;color:var(--ink);letter-spacing:-.03em}
#s11 .jb-empty p{font-size:12.5px;color:var(--mute);margin-top:8px;line-height:1.75}
#s11 .jb-empty .actband{justify-content:center}

/* ── 공고 등록 안내 ── */
#s11 .jb-cta{
  display:grid;grid-template-columns:1.5fr 1fr;gap:0;margin-top:40px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;
}
@media (max-width:900px){ #s11 .jb-cta{grid-template-columns:1fr} }
#s11 .jb-ctal{padding:28px 30px}
#s11 .jb-ctal h2{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.04em}
#s11 .jb-ctal p{font-size:13px;color:var(--body);line-height:1.85;margin-top:10px;max-width:560px}
#s11 .jb-ctan{font-size:12px;color:var(--mute);margin-top:14px}
#s11 .jb-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
#s11 .jb-steps li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--body);line-height:1.6}
#s11 .jb-steps i{
  flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand-lt);color:#5B45C8;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800;
  margin-top:1px;
}
#s11 .jb-ctar{padding:28px 26px;background:var(--soft);border-left:1px solid var(--line)}
@media (max-width:900px){ #s11 .jb-ctar{border-left:0;border-top:1px solid var(--line)} }
#s11 .jb-ctar h3{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s11 .jb-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mute)}
#s11 .jb-kv b{font-size:13px;font-weight:800;color:var(--ink)}
#s11 .jb-free{font-size:11.5px;color:var(--mute);line-height:1.75;margin-top:12px}

/* ── 등록 폼: 라디오 ── */
#s11 .jb-rds{display:flex;flex-wrap:wrap;gap:8px}
#s11 .jb-rd{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;transition:.12s;
}
#s11 .jb-rd:hover{border-color:var(--line-2);background:var(--soft)}
#s11 .jb-rd input{position:absolute;opacity:0;width:0;height:0}
#s11 .jb-rd .rd{width:17px;height:17px;flex:none}
#s11 .jb-rd .t{font-size:12.5px;font-weight:700;color:var(--body);letter-spacing:-.02em}
#s11 .jb-rd input:checked ~ .rd{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
#s11 .jb-rd input:checked ~ .t{color:var(--ink)}
#s11 .jb-rd:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
#s11 .jb-rd input:focus-visible ~ .rd{outline:2px solid var(--ink);outline-offset:2px}

/* ── 광고 화면에서도 같은 라디오 모양을 씁니다.
   ★ 전에는 #s60 안에서만 정의돼 있어서, 광고 주문서·문의 화면에서는
     네모 칸과 빈 동그라미가 따로 보였습니다. ── */
#s60 .jb-rds{display:flex;flex-wrap:wrap;gap:8px}
#s60 .jb-rd{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;transition:.12s;
}
#s60 .jb-rd:hover{border-color:var(--line-2);background:var(--soft)}
#s60 .jb-rd input{position:absolute;opacity:0;width:0;height:0}
#s60 .jb-rd .rd{width:17px;height:17px;flex:none}
#s60 .jb-rd .t{font-size:12.5px;font-weight:700;color:var(--body);letter-spacing:-.02em}
#s60 .jb-rd input:checked ~ .rd{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
#s60 .jb-rd input:checked ~ .t{color:var(--ink)}
#s60 .jb-rd:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
#s60 .jb-rd input:focus-visible ~ .rd{outline:2px solid var(--ink);outline-offset:2px}


/* ══════════════════════════════════════════════
   공고 상세
   ══════════════════════════════════════════════ */

#s11 .jd-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;margin-top:16px;align-items:start}
@media (max-width:1080px){ #s11 .jd-two{grid-template-columns:1fr} }
#s11 .jd-main{min-width:0}

#s11 .jd-head{padding-bottom:20px;border-bottom:1px solid var(--line)}
#s11 .jd-cot{display:flex;flex-direction:column;gap:2px;min-width:0}
#s11 .jd-cot b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s11 .jd-cot span{font-size:12px;color:var(--mute)}
#s11 .jd-t{font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.045em;
  line-height:1.35;margin-top:16px}
#s11 .jd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
#s11 .jd-own{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;
  padding:10px 14px;border-radius:var(--r-sm);background:var(--field);
  font-size:12px;color:var(--mute);
}
#s11 .jd-own a{font-weight:800;color:var(--brand);text-decoration:underline}

/* 요약 넉 줄 */
#s11 .jd-sum{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;
}
@media (max-width:720px){ #s11 .jd-sum{grid-template-columns:repeat(2,1fr)} }
#s11 .jd-sum > div{padding:15px 16px;border-right:1px solid var(--line);min-width:0}
#s11 .jd-sum > div:last-child{border-right:0}
@media (max-width:720px){
  #s11 .jd-sum > div:nth-child(2n){border-right:0}
  #s11 .jd-sum > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
#s11 .jd-sum span{display:block;font-size:11px;font-weight:700;color:var(--mute);letter-spacing:-.01em}
#s11 .jd-sum b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.03em;margin-top:5px;line-height:1.35}
#s11 .jd-sum small{display:block;font-size:11px;color:var(--mute);margin-top:3px}

#s11 .jd-sec{margin-top:32px}
#s11 .jd-sec h2{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s11 .jd-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
#s11 .jd-list li{
  position:relative;padding-left:16px;font-size:13.5px;color:var(--body);line-height:1.85;
}
#s11 .jd-list li::before{
  content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;
  background:var(--brand);
}
#s11 .jd-list.plain li::before{background:#CBCEDA}

#s11 .jd-cond{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;overflow:hidden}
#s11 .jd-cond > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line)}
#s11 .jd-cond > div:last-child{border-bottom:0}
@media (max-width:620px){ #s11 .jd-cond > div{grid-template-columns:1fr;gap:4px} }
#s11 .jd-cond span{font-size:12px;font-weight:800;color:var(--mute);letter-spacing:-.02em}
#s11 .jd-cond p{font-size:13px;color:var(--body);line-height:1.75;min-width:0}
#s11 .jd-cond small{font-size:11.5px;color:var(--mute)}

/* 지원 */
#s11 .jd-apply{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px;
  padding:22px 24px;border-radius:var(--r-md);
  background:linear-gradient(140deg,#F6F3FF 0%,#F4F5F8 100%);
  border:1px solid var(--brand-lt2);
}
#s11 .jd-apply.off{background:var(--soft);border-color:var(--line)}
#s11 .jd-applyl{flex:1;min-width:240px}
#s11 .jd-applyl > b:first-child{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s11 .jd-applyl p{font-size:12.5px;color:var(--body);line-height:1.8;margin-top:7px}
#s11 .jd-applyl code{
  display:inline-block;margin-top:6px;padding:3px 8px;border-radius:5px;
  background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--mute);
  word-break:break-all;
}
#s11 .jd-applybtn{
  display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;flex:none;
  border-radius:var(--r-sm);background:var(--brand);color:#fff;
  font-size:14.5px;font-weight:800;letter-spacing:-.03em;text-decoration:none;transition:.14s;
}
#s11 .jd-applybtn:hover{background:var(--brand-dk);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(124,92,252,.28)}
#s11 .jd-applybtn svg{width:16px;height:16px}
#s11 .jd-applyoff{
  height:48px;padding:0 24px;flex:none;display:inline-flex;align-items:center;
  border-radius:var(--r-sm);background:var(--field);color:var(--mute);
  font-size:14px;font-weight:800;
}

/* 신고 */
#s11 .jd-report{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
#s11 .jd-report p{font-size:12px;color:var(--mute);line-height:1.8;max-width:760px}
#s11 .jd-rep{margin-top:12px}
#s11 .jd-rep summary{
  display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--mute);list-style:none;
}
#s11 .jd-rep summary::-webkit-details-marker{display:none}
#s11 .jd-rep summary:hover{border-color:var(--line-2);color:var(--body)}
#s11 .jd-rep[open] summary{border-color:var(--ink);color:var(--ink)}
#s11 .jd-repf{margin-top:14px;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--soft);max-width:640px}
#s11 .jd-repr{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
#s11 .jd-repr label{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer;
  font-size:12px;color:var(--body);
}
#s11 .jd-repr label:has(input:checked){border-color:var(--brand);background:var(--brand-lt);color:#5B45C8;font-weight:700}
#s11 .jd-repr input{margin:0}
#s11 .jd-replink{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;
  color:var(--brand);text-decoration:underline}

/* 오른쪽 */
#s11 .jd-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
@media (max-width:1080px){ #s11 .jd-side{position:static} }
#s11 .jd-panel{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:17px 18px}
#s11 .jd-panel h3{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:6px}
#s11 .jd-panel h3 i{font-style:normal;color:var(--brand);font-size:12px}
#s11 .jd-prj{border-color:var(--brand-lt2);background:linear-gradient(180deg,#FBFAFF 0%,#fff 46%)}
#s11 .jd-pnote{font-size:11.5px;color:var(--mute);line-height:1.7;margin-top:7px}
#s11 .jd-pnote.none{
  margin-top:9px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--field);color:var(--mute);
}
#s11 .jd-pnote b{color:var(--body)}

#s11 .jd-mini{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line);text-decoration:none}
#s11 .jd-mini:last-of-type{border-bottom:0}
#s11 .jd-mini:hover .jd-mi b{color:var(--brand)}
#s11 .jd-mth{
  width:56px;height:38px;flex:none;border-radius:6px;overflow:hidden;
  background:var(--field);border:1px solid var(--line);
}
#s11 .jd-mth img{display:block;width:100%;height:100%;object-fit:cover}
#s11 .jd-mi{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#s11 .jd-mi b{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em;
  line-height:1.45;transition:color .12s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s11 .jd-mi > span{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:11px;color:var(--mute)}
#s11 .jd-mi .badge{height:18px;padding:0 6px;font-size:10.5px}
#s11 .jd-more{display:block;margin-top:11px;text-align:center;font-size:12px;
  font-weight:800;color:var(--brand);text-decoration:none}
#s11 .jd-more:hover{text-decoration:underline}

#s11 .jd-codesc{font-size:12px;color:var(--body);line-height:1.75;margin-top:8px}
#s11 .jd-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--mute)}
#s11 .jd-kv:last-of-type{border-bottom:0}
#s11 .jd-kv b{font-size:12px;font-weight:700;color:var(--ink)}

#s11 .jd-tip{background:var(--field);border-color:var(--line-2)}
#s11 .jd-tip b{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s11 .jd-tip p{font-size:11.5px;color:var(--mute);line-height:1.75;margin:7px 0 11px}


/* ══════════════════════════════════════════════
   내 공고
   ══════════════════════════════════════════════ */

#s11 .mj-list{display:flex;flex-direction:column;margin-top:20px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
#s11 .mj-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px;
  border-bottom:1px solid var(--line)}
#s11 .mj-row:last-child{border-bottom:0}
#s11 .mj-row.off{background:var(--soft)}
#s11 .mj-i{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
#s11 .mj-m{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:11.5px;color:var(--mute)}
#s11 .mj-st{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  font-size:11px;font-weight:800;letter-spacing:-.02em;
}
#s11 .mj-st.on {background:#EFF6F1;color:#2A7A4B}
#s11 .mj-st.off{background:var(--field);color:var(--mute)}
#s11 .mj-st.hid{background:#FDF1F1;color:#B23A3A}
#s11 .mj-t{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  text-decoration:none;line-height:1.4}
#s11 .mj-t:hover{color:var(--brand)}
#s11 .mj-n{font-size:11.5px;color:var(--mute)}
#s11 .mj-rep{color:#B23A3A}
#s11 .mj-act{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
#s11 .mj-act .btn.danger{color:#B23A3A;border-color:#F1D8D8}
#s11 .mj-act .btn.danger:hover{background:#FDF6F6;border-color:#E8BFBF}


/* ── 관리자 · 채용 공고 (21단계) ──
   ※ 여기에도 공고에 점수를 매기는 칸이 없습니다.
     하는 일은 「신고를 보고 노출을 멈출지」와 「산 자리를 켜고 끄기」 둘뿐입니다. */
.adm-cardhd{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:12px}
.adm-cardhd > div:first-child{flex:1;min-width:0}
.adm-cardhd b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.45}
.adm-cardhd .adm-sub{font-size:11.5px;color:var(--mute);line-height:1.75;margin-top:5px}
.adm-cardst{display:flex;flex-wrap:wrap;gap:5px;flex:none}

.adm-kvrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:7px 0;
  border-top:1px solid var(--line);font-size:12px}
.adm-kvrow span{flex:none;width:78px;font-weight:800;color:var(--mute)}
.adm-kvrow a{color:var(--brand);text-decoration:underline;word-break:break-all}

.adm-why{margin-top:12px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--rej-lt,#FDF6F6);border:1px solid var(--rej-ln,#F1D8D8);
  font-size:12.5px;color:#7A4A4A;line-height:1.7}
.adm-why b{display:block;color:#8E2F2F;font-weight:800;margin-bottom:2px}

.adm-reps{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.adm-reps > b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:9px}
.adm-rep{padding:10px 13px;border-radius:var(--r-sm);background:var(--soft);
  border:1px solid var(--line);margin-bottom:7px}
.adm-rep.new{background:#FEF9EE;border-color:#F0DDB4}
.adm-repk{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  background:#fff;border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--body)}
.adm-rep p{font-size:12.5px;color:var(--body);line-height:1.7;margin-top:7px}
.adm-rep em{display:block;font-style:normal;font-size:11px;color:var(--mute);margin-top:5px}

.adm-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.adm-actf{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.adm-actf.grow{flex:1;min-width:280px}
.adm-actf.grow .ws-in{flex:1;min-width:180px;height:36px;font-size:12.5px}
.adm-actf .ws-in.sm{height:36px;font-size:12.5px}

/* 관리자 탭 — profiles.php 도 같은 것을 쓰는데 규칙이 없어 글자로만 나오고 있었습니다 */
.adm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.adm-tabs a{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--mute);text-decoration:none;transition:.12s;
}
.adm-tabs a:hover{border-color:var(--line-2);color:var(--body)}
.adm-tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.adm-tabs a b{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--field);
  font-size:11px;font-weight:800;color:var(--body);
}
.adm-tabs a.on b{background:rgba(255,255,255,.22);color:#fff}


/* ══════════════════════════════════════════════
   SNS 공유 · 목록에서 그 자리에 펼치기 (22단계)
   ──────────────────────────────────────────────
   ※ 공유 단추는 <그냥 링크>입니다. 바깥 스크립트를 하나도 안 씁니다.
     보통 공유 버튼은 각 SNS 의 JS 를 불러다 쓰는데, 그 순간
     우리 화면을 보는 사람이 그 회사에 그대로 노출됩니다.
   ※ 공유 수를 세지 않습니다. 세면 그게 곧 순위가 됩니다.
   ══════════════════════════════════════════════ */

.sh-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.sh-lb{font-size:11.5px;font-weight:700;color:var(--mute);margin-right:2px}
.sh-b{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:32px;height:32px;padding:0;flex:none;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--mute);cursor:pointer;transition:.13s;text-decoration:none;
}
.sh-b svg{width:15px;height:15px;display:block}
.sh-b:hover{border-color:var(--line-2);color:var(--ink);background:var(--soft);transform:translateY(-1px)}
.sh-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sh-x:hover {border-color:#16171D;color:#16171D}
.sh-fb:hover{border-color:#1877F2;color:#1877F2}
.sh-li:hover{border-color:#0A66C2;color:#0A66C2}
.sh-th:hover{border-color:#16171D;color:#16171D}
.sh-ig:hover{border-color:#C13584;color:#C13584}
.sh-ig.ok{border-color:#C13584;color:#C13584;background:#FDF2F8}

/* 인스타는 웹에서 링크 공유 창이 없습니다. 그래서 <어디에 붙일지>를 알려 줍니다. */
.sh-bar{position:relative}
.sh-ignote{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(320px,86vw);
  padding:12px 14px;border-radius:var(--r-md);background:var(--ink);color:#fff;
  font-size:12px;line-height:1.75;letter-spacing:-.01em;
  box-shadow:0 10px 28px rgba(22,23,29,.28);
}
.sh-ignote b{color:#fff;font-weight:800}
.sh-ignote::before{
  content:"";position:absolute;right:60px;top:-5px;width:10px;height:10px;
  background:var(--ink);transform:rotate(45deg);
}

/* 「복사」만 글자를 답니다 — 카톡·슬랙에는 이게 제일 잘 붙습니다 */
.sh-cp{width:auto;padding:0 11px}
.sh-cp em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:-.02em}
.sh-cp.ok{border-color:var(--ok,#0F9D58);color:var(--ok,#0F9D58);background:var(--ok-lt,#EAF7EF)}

.sh-bar.sh-inline{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
@media (max-width:620px){
  .sh-bar{margin-left:0;width:100%;padding-top:12px;border-top:1px solid var(--line)}
}

/* ── 목록에서 펼치기 ── */
#s4 .pl-open{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 8px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:11.5px;font-weight:700;color:var(--mute);cursor:pointer;transition:.13s;
}
#s4 .pl-open svg{width:13px;height:13px;transition:transform .18s}
#s4 .pl-open:hover{border-color:var(--line-2);color:var(--ink);background:var(--soft)}
#s4 .pl-open.on{border-color:var(--ink);color:var(--ink);background:var(--field)}
#s4 .pl-open.on svg{transform:rotate(180deg)}
#s4 .pl-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#s4 .pl-fullwrap{margin-top:14px}
#s4 .pl-full{
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--soft);
}
#s4 .pl-full .po-body{font-size:13.5px;line-height:1.9}
#s4 .pl-full .po-photos{max-width:100%}
#s4 .pl-loading{padding:20px;text-align:center;font-size:12.5px;color:var(--mute)}
#s4 .pl-loading a{color:var(--brand);font-weight:700;text-decoration:underline}

#s4 .pl-cms{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#s4 .pl-cmh{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:9px}
#s4 .pl-cmh.none{color:var(--mute);font-weight:600}
#s4 .pl-cm{padding:9px 0;border-bottom:1px solid var(--line)}
#s4 .pl-cm:last-of-type{border-bottom:0}
#s4 .pl-cm b{font-size:12px;font-weight:800;color:var(--ink)}
#s4 .pl-cm > span{font-size:11px;color:var(--mute);margin-left:7px}
#s4 .pl-cm p{font-size:12.5px;color:var(--body);line-height:1.75;margin-top:4px}
#s4 .pl-cmmore{display:inline-block;margin-top:9px;font-size:12px;font-weight:800;
  color:var(--brand);text-decoration:none}
#s4 .pl-cmmore:hover{text-decoration:underline}

#s4 .pl-fullact{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}

/* 펼치면 목록 썸네일은 숨깁니다 — 같은 사진이 위아래로 두 번 나오면 안 됩니다 */
#s4 .pl-row.pl-on .pl-pics{display:none}

/* ── 공고 저장 (갈피) ──
   ※ 저장한 사람 수를 어디에도 안 보여 줍니다.
     보여 주는 순간 그건 「인기 공고 순위」가 됩니다. 본인만 보는 갈피입니다. */
/* ※ 겹쳐 놓는 것은 <목록 카드 안>에서만입니다.
     이 규칙이 밖으로 새면 상세 화면의 저장 단추가 화면 구석으로 날아갑니다. */
#s11 .jb-cardwrap,#s11 .jb-rowwrap{position:relative}
#s11 .jb-cardwrap > .jb-savef,
#s11 .jb-cardwrap > .jb-save{position:absolute;right:14px;bottom:13px;margin:0;line-height:0}
#s11 .jb-rowwrap > .jb-savef,
#s11 .jb-rowwrap > .jb-save{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0;line-height:0;
}
#s11 .jb-rowwrap .jb-row{padding-right:60px}
/* 상세 화면 것은 제자리에 그냥 놓입니다 */
#s11 .jd-co .jb-savef{position:static;margin:0 0 0 8px;flex:none;line-height:0}

.jb-save{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:32px;height:32px;padding:0;flex:none;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  color:#A8ABB8;cursor:pointer;transition:.13s;text-decoration:none;
}
.jb-save svg{width:15px;height:15px;display:block}
.jb-save:hover{border-color:var(--line-2);color:var(--ink);background:var(--soft)}
.jb-save:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.jb-save.on{border-color:var(--brand);background:var(--brand-lt);color:#5B45C8}
.jb-save.on svg{fill:currentColor}
.jb-save.big{width:auto;height:34px;padding:0 13px;margin-left:8px;flex:none}
.jb-save.big em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:-.02em}

/* ── 채용 목록 검색 ──
   위쪽 검색창은 아카이브로 갑니다. 채용 화면에서 회사명을 넣었는데
   프로젝트 목록이 나오면 그건 고장으로 보입니다. */
#s11 .jb-search{display:flex;gap:7px;margin:16px auto 0 0;max-width:520px}
#s11 .jb-search input{
  flex:1;min-width:0;height:40px;padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;font-size:13px;color:var(--ink);
}
#s11 .jb-search input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
#s11 .jb-search button{
  height:40px;padding:0 16px;flex:none;border:0;border-radius:var(--r-sm);
  background:var(--ink);color:#fff;font-size:13px;font-weight:800;cursor:pointer;
}
#s11 .jb-search button:hover{background:#000}


/* ══════════════════════════════════════════════
   신고 · 통합검색 (23단계)
   ══════════════════════════════════════════════ */

/* 신고 단추 — 눈에 띄면 안 됩니다. 있는 줄만 알면 됩니다. */
.rp-btn{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;
  border-radius:var(--r-pill);border:1px solid transparent;background:none;
  font-size:11.5px;font-weight:600;color:#A8ABB8;text-decoration:none;transition:.12s;
}
.rp-btn:hover{border-color:var(--line);color:var(--body);background:#fff}
.rp-btn.done{color:var(--mute);border-color:var(--line);background:var(--field);cursor:default}

.rp-peek{
  margin-top:20px;padding:16px 18px;border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:var(--r-md);background:var(--soft);
}
.rp-peekk{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  background:#fff;border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--mute);
}
.rp-peek b{display:block;margin-top:8px;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.rp-peek p{margin-top:7px;font-size:12.5px;color:var(--body);line-height:1.75}
.rp-peek a{display:inline-block;margin-top:9px;font-size:12px;font-weight:700;color:var(--brand)}

.rp-reasons{display:flex;flex-wrap:wrap;gap:8px}
.rp-r{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;transition:.12s;
}
.rp-r:hover{border-color:var(--line-2);background:var(--soft)}
.rp-r input{position:absolute;opacity:0;width:0;height:0}
.rp-r .rd{width:17px;height:17px;flex:none}
.rp-r .t{font-size:12.5px;font-weight:700;color:var(--body);letter-spacing:-.02em}
.rp-r input:checked ~ .rd{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.rp-r:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
.rp-r input:focus-visible ~ .rd{outline:2px solid var(--ink);outline-offset:2px}

/* 관리자 · 신고 처리 */
.rp-t{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  background:var(--field);font-size:11px;font-weight:800;color:var(--mute);margin-right:7px;
}
.rp-body{
  margin-top:12px;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--soft);border:1px solid var(--line);
  font-size:12.5px;color:var(--body);line-height:1.8;
  max-height:180px;overflow:auto;
}
.adm-gone{color:var(--mute);font-weight:600}
/* ★ crewdit.css 쪽에도 같은 이름의 .adm-filter 가 있고 거기엔 flex-direction:column 이
   들어 있습니다. 여기서 방향을 안 적으면 그 세로 방향이 그대로 남고,
   align-items:center 가 <가로 가운데 정렬>로 뒤바뀌어 고르는 칸이 한가운데로 떠 버립니다.
   그래서 방향과 시작점을 여기서 못박습니다. */
.adm-filter{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:flex-start;
  /* 바깥 .adm-card 가 이미 상자를 그립니다. 시안 쪽 테두리·바탕·여백은 지웁니다. */
  border:0;background:transparent;padding:0}
.adm-filter .ws-in{height:38px;font-size:12.5px;max-width:260px}
.adm-tl{font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.5}
a.adm-tl:hover{color:var(--brand);text-decoration:underline}
.adm-tsub{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.6}
.adm-foot-note{font-size:12px;color:var(--mute);line-height:1.8;margin-top:14px}

/* ── 통합검색 ── */
/* ※ .content > * 에 max-width + margin:0 auto 가 걸려 있습니다.
     폭을 좁히면 <가운데로 밀려납니다.> margin-left:0 을 반드시 같이 줍니다. */
#s2 .sr-box{display:flex;gap:8px;margin:20px auto 0 0;max-width:620px}
#s2 .sr-box.small{margin:14px auto 0 0;max-width:520px}
#s2 .sr-box input{
  flex:1;min-width:0;height:46px;padding:0 16px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:#fff;font-size:14px;color:var(--ink);
}
#s2 .sr-box.small input{height:40px;font-size:13px}
#s2 .sr-box input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
#s2 .sr-box button{
  height:46px;padding:0 22px;flex:none;border:0;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;font-size:14px;font-weight:800;cursor:pointer;
}
#s2 .sr-box.small button{height:40px;padding:0 18px;font-size:13px;background:var(--ink)}
#s2 .sr-box button:hover{background:var(--brand-dk)}
#s2 .sr-box.small button:hover{background:#000}

#s2 .v4-sec{margin-top:34px}
#s2 .v4-shead{display:flex;align-items:baseline;gap:10px;margin-bottom:13px}
#s2 .v4-stitle{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s2 .v4-ssub{font-size:12.5px;color:var(--mute);font-weight:600}
#s2 .v4-smore{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--brand);text-decoration:none}
#s2 .v4-smore:hover{text-decoration:underline}
#s2 .jb-tabs{display:flex;flex-wrap:wrap;gap:7px}
#s2 .jb-tab{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--body);text-decoration:none;transition:.13s;
}
#s2 .jb-tab:hover{border-color:var(--line-2);background:var(--field)}
#s2 .jb-tab i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--mute)}
#s2 .jb-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
#s2 .jb-tab.on i{color:rgba(255,255,255,.72)}

#s2 .sr-prj{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){ #s2 .sr-prj{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){  #s2 .sr-prj{grid-template-columns:1fr} }
#s2 .sr-pcard{
  display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;text-decoration:none;transition:.14s;
}
#s2 .sr-pcard:hover{border-color:var(--line-2);box-shadow:0 6px 18px rgba(22,23,29,.07)}
#s2 .sr-pth{
  width:82px;height:58px;flex:none;border-radius:7px;overflow:hidden;
  background:var(--field);border:1px solid var(--line);
}
#s2 .sr-pth img{display:block;width:100%;height:100%;object-fit:cover}
#s2 .sr-pi{display:flex;flex-direction:column;gap:4px;min-width:0}
#s2 .sr-pi b{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s2 .sr-pm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;color:var(--mute)}
#s2 .sr-pm .badge{height:18px;padding:0 6px;font-size:10.5px}
#s2 .sr-px{font-size:11.5px;color:var(--mute);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

#s2 .sr-crew{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:1100px){ #s2 .sr-crew{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){  #s2 .sr-crew{grid-template-columns:1fr} }
#s2 .sr-ccard{
  display:flex;align-items:center;gap:11px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  text-decoration:none;transition:.14s;
}
#s2 .sr-ccard:hover{border-color:var(--line-2);box-shadow:0 6px 18px rgba(22,23,29,.07)}
#s2 .sr-cav{
  width:40px;height:40px;flex:none;border-radius:12px;overflow:hidden;
  background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
#s2 .sr-cav img{width:100%;height:100%;object-fit:cover}
#s2 .sr-cav i{font-style:normal;font-size:15px;font-weight:800;color:var(--mute)}
#s2 .sr-ci{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#s2 .sr-ci b{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s2 .sr-ci span{font-size:11.5px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s2 .sr-open{
  flex:none;font-style:normal;height:20px;padding:0 8px;border-radius:5px;
  display:inline-flex;align-items:center;
  background:#EFF6F1;color:#2A7A4B;font-size:11px;font-weight:800;
}

#s2 .sr-list{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;overflow:hidden}
#s2 .sr-row{
  display:flex;align-items:center;gap:13px;padding:14px 17px;
  border-bottom:1px solid var(--line);text-decoration:none;transition:background .12s;
}
#s2 .sr-row:last-child{border-bottom:0}
#s2 .sr-row:hover{background:var(--soft)}
#s2 .sr-rb{
  flex:none;height:22px;padding:0 9px;border-radius:6px;display:inline-flex;align-items:center;
  background:var(--field);font-size:11px;font-weight:800;color:var(--mute);
}
#s2 .sr-ri{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#s2 .sr-ri b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.45}
#s2 .sr-ri span{font-size:12px;color:var(--mute);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#s2 .sr-rn{flex:none;font-size:11.5px;color:var(--mute);white-space:nowrap}
#s2 .sr-none{font-size:12.5px;color:var(--mute);padding:12px 0}


/* ══════════════════════════════════════════════
   광고 (24단계)
   ──────────────────────────────────────────────
   ★ 「광고」 표기를 숨기는 규칙을 만들지 않습니다.
     display:none 으로 뗄 수 있게 해 두면 언젠가 뗍니다.
   ★ 광고는 콘텐츠 <사이>에만 들어가고 순서를 바꾸지 않습니다.
   ══════════════════════════════════════════════ */

.adx{
  position:relative;display:block;margin:26px 0;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--soft);overflow:hidden;line-height:0;
}
.adx img{display:block;width:100%;height:auto;max-width:100%}
.adx-a{display:block}
.adx-tag{
  position:absolute;left:8px;top:8px;z-index:2;
  display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;
  background:rgba(22,23,29,.72);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;line-height:1;
}
.adx-adv{
  display:block;padding:6px 10px;line-height:1.5;
  font-size:11px;color:var(--mute);background:#fff;border-top:1px solid var(--line);
}

/* 자리별 최대 폭 — 광고가 콘텐츠보다 커 보이면 안 됩니다 */
.adx-home_top{max-width:1200px}
.adx-archive_mid{margin:0}
.adx-detail_side,.adx-community_side{margin:0 0 14px}

/* ── 광고 사는 화면 ── */
#s60 .ad-vow{
  margin-top:20px;padding:18px 20px;border-radius:var(--r-md);
  background:var(--field);border:1px solid var(--line);max-width:880px;
}
#s60 .ad-vow > b{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s60 .ad-vow ul{margin:10px 0 0;padding-left:18px}
#s60 .ad-vow li{font-size:12.5px;color:var(--body);line-height:1.85;margin-bottom:4px}

#s60 .ad-step{margin-top:34px}
#s60 .v4-shead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
#s60 .v4-stitle{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s60 .v4-ssub{font-size:12.5px;color:var(--mute);font-weight:600}

#s60 .ad-dates{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
#s60 .ad-dates label{display:flex;flex-direction:column;gap:5px;font-size:12px;
  font-weight:700;color:var(--mute)}
#s60 .ad-dates .ws-in{height:40px;max-width:180px}
#s60 .ad-daysn{
  height:40px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--r-sm);
  background:var(--field);font-size:13px;font-weight:800;color:var(--ink);
}

#s60 .ad-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:900px){ #s60 .ad-slots{grid-template-columns:1fr} }
#s60 .ad-slot{
  position:relative;display:block;padding:16px 18px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.14s;
}
#s60 .ad-slot:hover{border-color:var(--line-2);box-shadow:0 6px 18px rgba(22,23,29,.06)}
#s60 .ad-slot.on{border-color:var(--brand);background:var(--brand-lt)}
#s60 .ad-slot.off{opacity:.5;cursor:not-allowed}
#s60 .ad-slot input{position:absolute;right:14px;top:16px;width:18px;height:18px;accent-color:var(--brand)}
#s60 .ad-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-right:26px}
#s60 .ad-sh b{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s60 .ad-sh em{font-style:normal;font-size:11px;font-weight:700;color:var(--mute);
  background:var(--field);padding:2px 7px;border-radius:5px}
#s60 .ad-left{font-style:normal;font-size:11.5px;font-weight:700;color:#2A7A4B}
#s60 .ad-left.none{color:#B23A3A}
#s60 .ad-sp{display:block;font-size:12px;color:var(--mute);line-height:1.7;margin-top:7px}
#s60 .ad-ss{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;font-size:11.5px;color:var(--mute)}
#s60 .ad-ss b{color:var(--body);font-weight:700}
#s60 .ad-price{display:flex;align-items:baseline;gap:5px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
#s60 .ad-price b{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.04em}
#s60 .ad-price i{font-style:normal}
#s60 .ad-price u{margin-left:auto;text-decoration:none;font-size:13px;font-weight:800;color:var(--brand)}
#s60 .ad-warn{display:block;margin-top:8px;font-size:11.5px;color:#B8801A;font-weight:700}

#s60 .ad-quote,.ad-quote{border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;overflow:hidden}
.ad-quote table{width:100%;border-collapse:collapse}
.ad-quote th{background:var(--soft);text-align:left;font-size:11.5px;color:var(--mute);
  font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)}
.ad-quote td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--body)}
.ad-quote td b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ad-quote td span{display:block;font-size:11.5px;color:var(--mute);margin-top:3px}
.ad-quote .r{text-align:right;white-space:nowrap}
.ad-quote tfoot td{border-bottom:0;padding:8px 14px;font-size:12.5px;color:var(--mute)}
.ad-quote tfoot .tot td{padding-top:12px;padding-bottom:14px;border-top:1px solid var(--line-2);
  font-size:15px;font-weight:800;color:var(--ink)}

/* ── 좁은 화면(휴대폰)에서 견적표 ──
   표를 그대로 두면 <칸이 네 개>라 화면 밖으로 밀려 나가고, 바깥 상자가 overflow:hidden 이라
   금액이 <잘려서 아예 안 보입니다.> 가로로 미는 대신 줄로 쌓아 보여 줍니다.
   「일 단가」는 기간(30일)과 금액이 있으면 굳이 없어도 되는 값이라 좁은 화면에서는 뺍니다. */
@media (max-width:560px){
  #s60 .ad-quote thead{display:none}
  #s60 .ad-quote table,#s60 .ad-quote tbody,#s60 .ad-quote tfoot,
  #s60 .ad-quote tr,#s60 .ad-quote td{display:block;width:100%}
  #s60 .ad-quote tbody tr{border-bottom:1px solid var(--line);padding:10px 0}
  #s60 .ad-quote tbody tr:last-child{border-bottom:0}
  #s60 .ad-quote tbody td{border-bottom:0;padding:2px 14px}
  #s60 .ad-quote tbody td:nth-child(3){display:none}
  #s60 .ad-quote tbody td.r{text-align:right;font-size:14px;font-weight:800;color:var(--ink);margin-top:4px}
  #s60 .ad-quote tfoot{border-top:1px solid var(--line)}
  #s60 .ad-quote tfoot tr{display:flex;justify-content:space-between;align-items:baseline;
    gap:12px;padding:0 14px;width:auto}
  #s60 .ad-quote tfoot td{width:auto;padding:7px 0;border-top:0}
  #s60 .ad-quote tfoot .tot{border-top:1px solid var(--line-2);padding-top:4px;padding-bottom:4px}
  #s60 .ad-quote tfoot .tot td{padding-top:8px;padding-bottom:10px;border-top:0}
  /* 작은 제목과 설명이 한 줄에 끼어 어색하게 접히던 것 */
  #s60 .v4-shead{display:block}
  #s60 .v4-ssub{display:block;margin-top:4px}
}

.ad-bank{border:1px solid var(--brand-lt2);border-radius:var(--r-md);
  background:linear-gradient(160deg,#F8F6FF 0%,#fff 60%);padding:16px 18px}
.ad-bank > div{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line)}
.ad-bank > div:last-child{border-bottom:0}
.ad-bank span{flex:none;width:92px;font-size:12px;font-weight:700;color:var(--mute)}
.ad-bank b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ad-bank b.big{font-size:20px;color:#5B45C8;letter-spacing:-.04em}

/* ── 내 광고 ── */
.ad-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
/* ★ 전에는 .ad-kpis.adm 이었는데, 관리자 화면 바깥 상자가 쓰는 .adm 에
   min-height:900px 이 걸려 있어서 숫자 상자 넉 장이 900px 로 늘어났습니다.
   같은 이름을 두 뜻으로 쓰면 이런 일이 생깁니다. .k4 로 갈라 둡니다. */
.ad-kpis.k4{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
@media (max-width:760px){ .ad-kpis,.ad-kpis.k4{grid-template-columns:repeat(2,1fr)} }
.ad-kpis > div{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:14px 16px}
.ad-kpis span{display:block;font-size:11.5px;color:var(--mute);font-weight:700}
.ad-kpis b{display:block;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.04em;
  line-height:1;margin-top:7px}
.ad-kpis b i{font-style:normal;font-size:12px;font-weight:700;color:var(--mute);margin-left:3px}
.ad-kpis em{display:block;font-style:normal;font-size:11.5px;color:var(--mute);margin-top:5px}

#s60 .ad-two{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
@media (max-width:980px){ #s60 .ad-two{grid-template-columns:1fr} }
#s60 .ad-list{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:14px}
#s60 .ad-li{display:block;padding:11px 12px;border-radius:var(--r-sm);text-decoration:none;transition:.12s}
#s60 .ad-li:hover{background:var(--soft)}
#s60 .ad-li.on{background:var(--brand-lt)}
#s60 .ad-li b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s60 .ad-li span{display:block;font-size:11.5px;color:var(--mute);margin-top:3px}

.ad-st{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:-.02em;margin-top:6px;
}
.ad-st.big{height:26px;padding:0 12px;font-size:12.5px;margin-top:0}
.ad-st.wait_pay{background:#FEF9EE;color:#B8801A}
.ad-st.paid    {background:#EFF3FE;color:#3B5FD9}
.ad-st.live    {background:#EFF6F1;color:#2A7A4B}
.ad-st.done    {background:var(--field);color:var(--mute)}
.ad-st.canceled{background:#FDF1F1;color:#B23A3A}

#s60 .ad-detail{min-width:0}
#s60 .ad-dhead{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
#s60 .ad-dhead b{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s60 .ad-dhead span{display:block;font-size:12px;color:var(--mute);margin-top:4px}
#s60 .ad-dhead .ad-st{margin-left:auto}

#s60 .ad-item{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:16px 18px;margin-top:14px}
#s60 .ad-ih{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
#s60 .ad-ih b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s60 .ad-ih span{font-size:11.5px;color:var(--mute)}
#s60 .ad-perf{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--mute)}
#s60 .ad-perf b{font-size:12.5px;color:var(--ink)}

#s60 .ad-cres{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:900px){ #s60 .ad-cres{grid-template-columns:1fr} }
#s60 .ad-cre{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);padding:12px}
#s60 .ad-crh{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
#s60 .ad-crh b{font-size:12.5px;font-weight:800;color:var(--ink)}
#s60 .ad-crh span{font-size:11px;color:var(--mute)}
.ad-cst{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;
  margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800}
.ad-cst.wait{background:#FEF9EE;color:#B8801A}
.ad-cst.ok  {background:#EFF6F1;color:#2A7A4B}
.ad-cst.ng  {background:#FDF1F1;color:#B23A3A}
.ad-cst.none{background:var(--field);color:var(--mute)}
#s60 .ad-crimg{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;
  margin-bottom:10px;line-height:0}
#s60 .ad-crimg img{display:block;width:100%;height:auto}
#s60 .ad-crng{font-size:11.5px;color:#B23A3A;line-height:1.7;margin-bottom:10px}
#s60 .ad-crng b{font-weight:800}
#s60 .ad-crf{display:flex;flex-direction:column;gap:7px}
#s60 .ad-crf .ws-in{height:36px;font-size:12.5px}
#s60 .ad-receipt{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:16px 18px;margin-top:18px}
#s60 .ad-receipt h3{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px}

/* 관리자 · 광고 */
.adm-cre{display:flex;gap:12px;margin-top:10px;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft)}
.adm-cre img{width:150px;height:auto;flex:none;border:1px solid var(--line);
  border-radius:4px;background:#fff;object-fit:contain}
.adm-cre > div{flex:1;min-width:0}
.adm-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
@media (max-width:900px){ .adm-grid3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .adm-grid3{grid-template-columns:1fr} }
.adm-lb{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--mute)}
.adm-lb .ws-in{height:38px;font-size:12.5px}


/* ══════════════════════════════════════════════════════════════
   25단계 — 기업회원 · 회사 (2026-08-18)

   화면 스코프: 회사 찾기 · 회사 페이지 · 회사 정보 = #s50

   ※ 회사에 점수 · 등급 · 순위 · 별점을 매기지 않습니다.
     그래서 여기에 「별」 「금·은·동」 「1위」 같은 모양이 하나도 없습니다.
     「사업자 확인됨」 하나만 있고, 그것도 <사실 표시>지 등급이 아닙니다.
     그래서 눈에 튀는 금색·빨강이 아니라 <조용한 초록>으로 둡니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 필터 바 · 정렬 줄을 회사 화면(#s50)에도 ─────
   ★ 시안 CSS 는 이 조각들을 아카이브(#s2 #s3) 안에만 정의해 두었습니다.
     화면을 늘릴 때마다 여기에 한 벌씩 더해야 합니다.
     안 더하면 제목·정렬이 꾸밈 없는 글자로 떨어집니다. */
#s50 .v4-fbar{display:flex;flex-direction:column;gap:8px;
  margin-top:16px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
#s50 .v4-fr{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#s50 .v4-flb{width:58px;flex:none;font-size:11.5px;font-weight:800;color:var(--mute);letter-spacing:.02em}
#s50 .v4-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;
  font-size:12px;font-weight:600;color:var(--body);text-decoration:none;transition:.12s}
#s50 .v4-chip:hover{border-color:#CFD1DA;background:var(--bg-soft)}
#s50 .v4-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

#s50 .v4-tools{display:flex;align-items:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
#s50 .v4-cnt{font-size:13px;color:var(--mute);font-weight:600}
#s50 .v4-cnt b{color:var(--ink);font-weight:800}
#s50 .v4-sorts{margin-left:auto;display:flex;gap:4px}
#s50 .v4-sorts a{height:32px;padding:0 13px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;
  color:var(--mute);text-decoration:none;transition:.14s}
#s50 .v4-sorts a:hover{background:var(--bg-soft);color:var(--body)}
#s50 .v4-sorts a.on{background:var(--ink);color:#fff;font-weight:800}

#s50 .v4-shead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#s50 .v4-stitle{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s50 .v4-ssub{font-size:12px;color:var(--mute);font-weight:600}
#s50 .sec{margin-top:30px}

/* ── 「사업자 확인됨」 표시 ────────────────────
   ★ 이것은 등급이 아닙니다. 그렇게 안 읽히도록 작고 조용하게 둡니다.
     크게 만들거나 금색을 쓰면 그 순간 등급이 됩니다. */
.co-vf{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;
  border-radius:var(--r-pill);background:var(--ok-lt);border:1px solid var(--ok-line);
  font-size:10.5px;font-weight:800;color:var(--ok);font-style:normal;letter-spacing:-.01em;
  white-space:nowrap;flex:none}
.co-vf.lg{height:24px;padding:0 11px;font-size:11.5px}
.co-vf.xs{height:17px;padding:0 6px;font-size:9.5px;margin-left:4px}
.co-vf::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);flex:none}

/* ── 로고 자리 ────────────────────────────────
   바깥 이미지를 쓰지 않습니다. 로고가 없으면 상호 첫 글자를 둡니다. */
.co-logo{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:#fff}
.co-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
.co-logo.ph{background:linear-gradient(160deg,#EFEDFB 0%,#E4E1F7 100%);
  color:#6B58C4;font-size:18px;font-weight:800;letter-spacing:-.04em;border-color:#DCD8F2}
.co-logo.lg{width:76px;height:76px;border-radius:16px}
.co-logo.lg.ph{font-size:30px}
.co-logo.big{width:96px;height:96px;border-radius:18px}
.co-logo.big.ph{font-size:38px}

/* ── 회사 목록 ────────────────────────────── */
.co-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
@media (max-width:1100px){ .co-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){  .co-list{grid-template-columns:1fr} }
.co-c{display:flex;flex-direction:column;gap:11px;padding:16px 17px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  text-decoration:none;color:inherit;transition:.14s}
.co-c:hover{border-color:var(--line-2);box-shadow:0 3px 14px rgba(18,19,24,.06);transform:translateY(-1px)}
.co-chd{display:flex;align-items:center;gap:11px}
.co-cid{flex:1;min-width:0}
.co-cid b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-cid span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.co-csvc{display:flex;flex-wrap:wrap;gap:5px}
.co-cbio{font-size:12.5px;color:var(--body);line-height:1.7;min-height:22px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-cft{display:flex;align-items:center;justify-content:space-between;
  padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute)}
.co-cft b{color:var(--ink);font-weight:800}
.co-cft em{font-style:normal;font-weight:700;color:var(--brand)}

/* ── 회사 페이지 머리 ─────────────────────── */
.co-hero{display:flex;align-items:flex-start;gap:18px;margin-top:16px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.co-hi{flex:1;min-width:0}
.co-hi .h1{margin:0}
.co-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.co-yr{font-size:11.5px;color:var(--mute);font-weight:600}
.co-head{font-size:14px;color:var(--body);line-height:1.75;margin-top:11px;max-width:720px}
.co-svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.co-svc span{display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--brand-lt);color:#5B45C8;
  font-size:11.5px;font-weight:700}
.co-heroact{display:flex;flex-direction:column;gap:7px;flex:none}
@media (max-width:760px){
  .co-hero{flex-wrap:wrap;gap:14px}
  .co-heroact{flex-direction:row;flex-wrap:wrap;width:100%}
}

/* ── 회사 페이지 두 칸 ────────────────────── */
.co-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;
  margin-top:24px;align-items:start}
@media (max-width:1080px){ .co-two{grid-template-columns:1fr} }
#s50 .co-two > .main{min-width:0}
#s50 .co-two > .side{display:flex;flex-direction:column;gap:14px}

/* ── 만든 것 ─────────────────────────────── */
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
@media (max-width:900px){ .co-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .co-grid{grid-template-columns:1fr} }
.co-pc{display:block;text-decoration:none;color:inherit}
.co-pth{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line);background:var(--field)}
.co-pth img{display:block;width:100%;height:100%;object-fit:cover}
.co-pth .ph{display:block;width:100%;height:100%;
  background:linear-gradient(140deg,#F2F3F7 0%,#E7E8EF 100%)}
.co-pc b{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-top:9px;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-pcat{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}

.co-intro{font-size:14px;color:var(--body);line-height:1.9;max-width:760px;
  word-break:break-word;overflow-wrap:anywhere}

.co-jobs{display:flex;flex-direction:column;gap:8px}
.co-jb{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;text-decoration:none;color:inherit;transition:.12s}
.co-jb:hover{border-color:var(--line-2);background:var(--bg-soft)}
.co-jb b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.co-jb span{display:block;font-size:11.5px;color:var(--mute);margin-top:3px}

.co-reportrow{display:flex;justify-content:flex-end}

/* ── 회사 정보 화면(등록·고치기) ───────────── */
#s50 .co-form{max-width:820px}
.co-slug{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.co-slug span{font-size:12px;color:var(--mute);font-weight:700;
  padding:0 10px;height:46px;display:inline-flex;align-items:center;
  border:1px solid var(--line-2);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--soft);white-space:nowrap}
.co-slug .ws-in{flex:1;min-width:160px;border-radius:0 var(--r-sm) var(--r-sm) 0}
@media (max-width:560px){
  .co-slug span{border-right:1px solid var(--line-2);border-radius:var(--r-sm);width:100%}
  .co-slug .ws-in{border-radius:var(--r-sm);margin-top:6px}
}
.co-logorow{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.co-logoform{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.co-logoform .ws-in{height:auto;padding:10px 12px;font-size:12.5px}

/* ── 프로젝트 상세에 붙는 회사 ─────────────── */
.pd-co{font-size:12.5px;color:var(--mute);font-weight:600;margin-top:6px}
.co-line{font-weight:800;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.co-line:hover{color:var(--brand);border-bottom-color:var(--brand)}
.pd-cobox{display:flex;align-items:center;gap:11px;padding:11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
  text-decoration:none;color:inherit;transition:.12s}
.pd-cobox:hover{border-color:var(--line-2);background:#fff}
.pd-cobi{flex:1;min-width:0}
.pd-cobi b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-cobi em{display:block;font-style:normal;font-size:11.5px;color:var(--mute);margin-top:2px}
.cr-madenote{display:block;font-size:11px;color:var(--mute);line-height:1.65;margin-top:5px}

/* 아카이브 카드에 회사 이름이 들어갈 때 */
.v4-aby.co{font-weight:800;color:var(--ink)}

/* ── 가입 화면 · 개인/기업 고르기 ──────────── */
.au-pick{margin-bottom:16px}
.au-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){ .au-picks{grid-template-columns:1fr} }
.au-pk{display:block;padding:15px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  background:#fff;text-decoration:none;color:inherit;transition:.14s}
.au-pk:hover{border-color:#CFD1DA;background:var(--bg-soft)}
.au-pk.on{border-color:var(--brand);background:var(--brand-lt)}
.au-pk b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin-bottom:5px}
.au-pk.on b{color:#5B45C8}
.au-pk span{display:block;font-size:12px;color:var(--mute);line-height:1.7}

/* ── 관리자 · 기업회원 ────────────────────── */
.adm-kvs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;
  margin-top:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--soft)}
@media (max-width:760px){ .adm-kvs{grid-template-columns:1fr} }
.adm-kvs > div{display:flex;align-items:baseline;gap:9px;min-width:0}
.adm-kvs span{flex:none;width:104px;font-size:11.5px;font-weight:700;color:var(--mute)}
.adm-kvs b{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);
  word-break:break-all;overflow-wrap:anywhere}
.adm-kvs a{color:var(--brand)}
.adm-memo{margin-top:10px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--rej-lt);border:1px solid var(--rej-line);
  font-size:12px;color:#8A3348;line-height:1.7}

/* 회사 페이지의 프로젝트 카드에 붙는 AI 제작방식 배지.
   ★ 아카이브(#s3)에서 쓰는 .v4-tb 는 그 화면 스코프 안에만 위치가 정의돼 있어서
     여기서는 안 먹습니다. 회사 화면용으로 따로 둡니다. */
#s50 .co-pth .badge.co-tb{position:absolute;left:8px;top:8px;z-index:3;
  height:22px;padding:0 8px;font-size:10.5px;border-radius:var(--r-pill)}

/* ★ .content > * 에 max-width:1440px + margin:0 auto 가 걸려 있습니다.
   회사 화면의 좁은 덩어리들이 가운데로 밀리지 않도록 왼쪽을 못박습니다.
   전에 통계·검색·채용 화면에서 똑같이 걸렸던 자리입니다. */
#s50 .lead,#s50 .crumb,#s50 .h1,#s50 .co-form,#s50 .ar-foot{margin-left:0;margin-right:auto}

/* ══════════════════════════════════════════════════════════════
   ★ 라디오(.jb-rd) 를 <화면 스코프 없이> 한 번 정의합니다.

   이 모양은 처음에 채용 화면(#s11) 안에서만 만들었습니다.
   그 뒤로 광고 화면(#s60), 회사 화면(#s50)을 만들 때마다
   「네모 칸과 빈 동그라미가 따로 논다」는 같은 증상이 되풀이됐습니다.
   화면을 늘릴 때마다 CSS 를 한 벌씩 베끼는 방식이 원인이라,
   여기서 스코프 없이 한 번만 정의해 끊습니다.

   #s11 · #s60 안의 기존 정의는 값이 같고 더 구체적이라 그대로 이깁니다.
   ══════════════════════════════════════════════════════════════ */
.jb-rds{display:flex;flex-wrap:wrap;gap:8px}
.jb-rd{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;transition:.12s;
  position:relative;
}
.jb-rd:hover{border-color:var(--line-2);background:var(--soft)}
.jb-rd input{position:absolute;opacity:0;width:0;height:0}
.jb-rd .rd{width:17px;height:17px;flex:none;
  border-radius:50%;border:2px solid #CBCEDA;background:#fff;
  display:inline-flex;align-items:center;justify-content:center}
.jb-rd .t{font-size:12.5px;font-weight:700;color:var(--body);letter-spacing:-.02em}
.jb-rd input:checked ~ .rd{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.jb-rd input:checked ~ .t{color:var(--ink)}
.jb-rd:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
.jb-rd input:focus-visible ~ .rd{outline:2px solid var(--ink);outline-offset:2px}


/* ══════════════════════════════════════════════════════════════
   서비스 소개 (2026-08-18) — 화면 스코프 #s70

   ※ 이 화면은 <읽히는 것>이 목적입니다. 장식을 얹지 않습니다.
   ※ 「여기에 없는 것」 칸만 어둡게 둡니다 —
     약속을 적어 두는 자리라 눈에 남아야 합니다.
   ══════════════════════════════════════════════════════════════ */

/* ★ .content > * 에 max-width + margin:0 auto 가 걸려 있어서
   좁은 덩어리를 두면 가운데로 밀립니다. 왼쪽을 못박습니다. */
#s70 .crumb,#s70 .sec,#s70 .ab-hero,#s70 .ab-quote,#s70 .ab-never,#s70 .ab-end{
  margin-left:0;margin-right:auto;max-width:1000px}

#s70 .sec{margin-top:46px}
#s70 .v4-shead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
#s70 .v4-stitle{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.035em}
#s70 .v4-ssub{font-size:12.5px;color:var(--mute);font-weight:600}

/* ── 한 문장 ─────────────────────────────── */
.ab-hero{padding:14px 0 6px}
.ab-hero .cp-slog{display:inline-flex;align-items:center;height:26px;padding:0 12px;
  border-radius:var(--r-pill);background:var(--brand-lt);color:#5B45C8;
  font-size:12px;font-weight:800;letter-spacing:-.01em}
.ab-hero h1{font-size:40px;line-height:1.32;font-weight:800;color:var(--ink);
  letter-spacing:-.045em;margin:16px 0 0}
.ab-hero p{font-size:15.5px;line-height:1.9;color:var(--body);margin-top:16px;max-width:760px}
@media (max-width:760px){ .ab-hero h1{font-size:28px} }

/* ── 왜 (인용) ───────────────────────────── */
.ab-quote{margin-top:34px;padding:26px 30px;border-left:3px solid var(--brand);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--soft)}
.ab-quote p{font-size:15px;line-height:1.95;color:var(--body);margin:0 0 12px;max-width:780px}
.ab-quote p:last-of-type{margin-bottom:0}
.ab-quote b{color:var(--ink);font-weight:800}
.ab-qn{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mute);font-weight:700;letter-spacing:.01em}
@media (max-width:560px){ .ab-quote{padding:20px 18px} }

/* ── 세 축 ───────────────────────────────── */
.ab-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){ .ab-three{grid-template-columns:1fr} }
.ab-c{display:flex;flex-direction:column;padding:20px 20px 17px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  text-decoration:none;color:inherit;transition:.14s}
.ab-c:hover{border-color:var(--brand-lt2);box-shadow:0 3px 16px rgba(18,19,24,.06);transform:translateY(-1px)}
.ab-c em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.06em}
.ab-c b{display:block;font-size:17px;font-weight:800;color:var(--ink);
  letter-spacing:-.035em;margin-top:8px}
.ab-cs{display:block;font-size:12px;color:var(--mute);font-weight:700;margin-top:4px}
.ab-c p{font-size:13px;line-height:1.85;color:var(--body);margin:12px 0 0;flex:1}
/* ★ 위의 .ab-c b 가 display:block 이라, 문장 <안>의 굵은 글씨까지 줄바꿈됩니다.
   ("등록자와 참여자 양쪽의 확인" 이 혼자 한 줄로 떨어져 문장이 두 동강 났습니다.) */
.ab-c p b{display:inline;font-size:inherit;font-weight:800;color:var(--ink);margin:0}
.ab-c i{font-style:normal;font-size:12px;font-weight:800;color:var(--brand);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

.ab-note{font-size:13px;line-height:1.9;color:var(--mute);margin-top:16px;max-width:820px}
.ab-note b{color:var(--ink);font-weight:800}
.ab-body p{font-size:14.5px;line-height:1.95;color:var(--body);margin:0 0 13px;max-width:820px}
.ab-body b{color:var(--ink);font-weight:800}
#s70 .actband{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ── ★ 여기에 없는 것 ────────────────────── */
.ab-never{margin-top:52px;padding:32px 34px;border-radius:var(--r-md);
  background:linear-gradient(160deg,#22242D 0%,#16171D 100%);color:#C9CBD6}
.ab-nh{margin-bottom:20px}
/* ★ 위쪽 #s70 .v4-stitle 이 <아이디 선택자>라 더 세서, 그냥 .ab-never .v4-stitle 로는
   어두운 상자 위에 <검은 글씨>가 그대로 남습니다. 여기서도 #s70 을 붙여 이깁니다. */
#s70 .ab-never .v4-stitle{color:#fff;font-size:20px}
#s70 .ab-never .v4-ssub{color:#8A8D9A}
.ab-never ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px}
.ab-never li{position:relative;padding-left:22px;font-size:14px;line-height:1.9;color:#B9BCC8;max-width:840px}
.ab-never li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;
  border-radius:2px;background:#6F5AD8}
.ab-never li b{color:#fff;font-weight:800}
.ab-why{margin-top:24px;padding:18px 20px;border-radius:var(--r-sm);
  background:rgba(124,92,252,.10);border:1px solid rgba(124,92,252,.28);
  font-size:14px;line-height:1.95;color:#CFC7F5;max-width:860px}
.ab-why b{color:#fff;font-weight:800}
.ab-oneline{margin:24px 0 0;font-size:16.5px;line-height:1.7;color:#E4E6EF;
  font-weight:700;letter-spacing:-.03em}
.ab-oneline b{color:#fff;font-weight:800}
@media (max-width:560px){ .ab-never{padding:24px 20px} .ab-oneline{font-size:15px} }

/* ── 누가 쓰나 ───────────────────────────── */
.ab-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){ .ab-two{grid-template-columns:1fr} }
.ab-w{padding:20px 22px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.ab-w b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.ab-w p{font-size:13.5px;line-height:1.9;color:var(--body);margin:10px 0 14px}
.ab-w p b{display:inline;font-size:inherit}

/* ── 지금 담긴 것 ─────────────────────────── */
.ab-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){ .ab-nums{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ab-nums > div{padding:18px 18px 16px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--soft)}
.ab-nums b{display:block;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.045em}
.ab-nums span{display:block;font-size:12px;color:var(--mute);font-weight:600;margin-top:5px}

/* ── 자주 묻는 것 ─────────────────────────── */
.ab-faq{display:flex;flex-direction:column;gap:2px}
.ab-q{padding:17px 0;border-bottom:1px solid var(--line)}
.ab-q:first-child{padding-top:4px}
.ab-q b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.025em}
.ab-q p{font-size:13.5px;line-height:1.9;color:var(--body);margin:8px 0 0;max-width:860px}
.ab-q p b{display:inline;font-size:inherit;font-weight:800}

/* ── 시작 ───────────────────────────────── */
.ab-end{margin-top:52px;padding:34px 0 10px;border-top:1px solid var(--line);text-align:left}
.ab-end > b{display:block;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.045em}
.ab-end > p{font-size:14px;color:var(--mute);margin:8px 0 0}
.ab-run{display:block;margin-top:22px;font-size:12px;color:var(--mute)}
.ab-run a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}
.ab-run a:hover{color:var(--brand)}

/* ── 왼쪽 게시판 메뉴에도 같은 색 점 (2026-08-18) ──
   목록에서 본 색과 메뉴에서 본 색이 같아야 「아, 저기 글이구나」가 됩니다. */
#s4 .rc-navlk{display:flex;align-items:center;gap:8px}
#s4 .rc-navlk .pl-bdot{width:7px;height:7px;flex:none}
#s4 .rc-navlk:hover{background:var(--bcbg,var(--soft));color:var(--bc,var(--ink))}
#s4 .rc-navlk.on{background:var(--bcbg,var(--brand-lt));color:var(--bc,#5B45C8);font-weight:800}

/* ── 커뮤니티 머리와 본문을 나눕니다 (2026-08-18) ──
   ★ 「타이틀과 내용이 구분되지 않는다」는 말이 정확했습니다.
     제목·설명·목록이 같은 흰 바탕에 그냥 이어져 있어서 어디서 끊기는지 안 보였습니다. */
#s4 .cm-head{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
#s4 .cm-head .h1{margin:0}
#s4 .cm-head .lead{margin:9px 0 0;max-width:820px}
#s4 .cm-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#s4 .cm-badges a{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;
  border-radius:var(--r-pill);text-decoration:none;font-size:12px;font-weight:800;
  color:var(--bc);background:var(--bcbg);transition:.12s}
#s4 .cm-badges a:hover{filter:brightness(.94)}
#s4 .cm-badges .pl-bdot{width:6px;height:6px}

/* ── 남은 세 군데 마무리 (2026-08-18) ──
   1) 왼쪽 메뉴 글자가 오른쪽으로 밀리던 것.
      crewdit.css 의 .rc-navlk 에 justify-content:space-between 이 걸려 있어
      점과 글자가 양쪽 끝으로 벌어졌습니다. 여기서 되돌립니다. */
#s4 .rc-navlk{justify-content:flex-start;padding:0 10px}

/*  2) 목록 사진이 글보다 커서 화면을 다 먹던 것.
       목록에서는 <곁들이는 그림>이면 됩니다. 상세 화면(.po-photos)은 그대로 큽니다. */
#s4 .pl-pics{max-width:330px}
#s4 .pl-pics.n1 span{aspect-ratio:16/10}

/*  3) 머리 제목에도 게시판 색 점 */
#s4 .cm-head .h1{display:flex;align-items:center;gap:10px}
#s4 .cm-head .h1 .pl-bdot{width:11px;height:11px;flex:none}

/* ══ 좋아요 수 (2026-08-18, hong 요청) ═══════════════════════════
   ★ 순위·등급·별점이 아닙니다. 「몇 사람이 눌렀는지」만 적습니다.
     그래서 등수 번호도, 「인기」 딱지도, 색으로 잘 만든 것/못 만든 것을
     가르는 표시도 붙이지 않습니다. 목록 차례는 이 수와 무관합니다.
     0 이면 아예 안 그립니다 (prj_like_html 참고). */
.a11y{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.v4-alk{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:11.5px;font-weight:800;font-style:normal;letter-spacing:-.01em;
  color:#B0546B;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;
}
.v4-alk svg{flex:none;opacity:.88}

/* 아카이브 카드 — 날짜 오른쪽에 조용히 붙습니다 */
#s3 .v4-al2 .v4-alk{margin-left:8px}

/* 홈 — 어두운 그림 위에 얹히는 큰 카드에서는 흰색으로 */
.v4-alk.on-dark{color:#FFC6D2;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.v4-bg-scrim .v4-alk{margin-top:6px}
.v4-f-cap .v4-alk,.v4-n-cap .v4-alk{margin-top:5px}

/* 회사 화면 카드 · 통합검색 결과 */
#s50 .co-pcat .v4-alk{margin-left:7px}
#s2 .sr-pm .v4-alk{margin-left:2px}

/* ★ 이름 충돌 막기 — crewdit.css 의 #s6 규칙은 ID 라서 그냥 두면 이깁니다.
     #s6 .v4-f-cap span 이 색을 회색으로 덮어써서 하트가 회색으로 나왔고,
     #s6 .v4-f-cap b 의 max-width:56% 가 「214」를 「2…」로 잘랐습니다.
     (그래서 숫자 안의 <b> 는 아예 없앴습니다 — app/project.php 참고) */
#s6 .v4-f-cap .v4-alk,#s6 .v4-n-cap .v4-alk,#s6 .v4-bg-by .v4-alk,
#s3 .v4-al2 .v4-alk,#s50 .co-pcat .v4-alk,#s2 .sr-pm .v4-alk{
  flex:none;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;
  color:#B0546B;font-size:11.5px;font-weight:800;
}
#s6 .v4-f-cap .v4-alk{margin-left:auto}
#s6 .v4-n-cap .v4-alk{margin-left:6px}
#s6 .v4-bg-by .v4-alk{margin-left:auto;color:#FFC6D2;text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* ══ 홈 큰 카드 겹침 고침 (2026-08-18) ═══════════════════════
   [stated] hong: "화면겹침현상이 나왔어"

   ★ 원인은 딱 한 줄이었습니다 — `.v4-bg-card` 에 position 이 없었습니다.

   큰 카드의 글자판(.v4-bg-scrim)은 `position:absolute; left:0; right:0; bottom:0` 입니다.
   그런데 기준이 될 부모에 position 이 없으면 <화면 전체>를 기준으로 잡습니다.
   그래서 글자판이 카드 밖으로 뛰쳐나가 화면을 가로질러 옆 카드들을 덮었습니다.

   왜 이제야 보였나 — 큰 카드(bento)는 프로젝트가 <5건 이상>일 때만 그려집니다.
   대표님이 매스티지 프로젝트를 여러 건 올리시면서 이번에 처음 그려진 것입니다.
   (자료가 쌓여야 나타나는 자리는 시험할 때도 자료를 채워 놓고 봐야 합니다) */
#s6 .v4-bg-card{position:relative}

/* 같은 이유로 넘칠 수 있는 곳을 미리 막아 둡니다 — 안에 absolute 를 쓰는 카드들 */
#s6 .v4-f-card,#s6 .v4-n-card,#s3 .v4-ac{position:relative}

/* ══ 홈 커뮤니티 두 줄로 (2026-08-18) ═════════════════════
   [stated] hong: "이것도 두줄이상이면 좋겠어"

   한 줄(5장)만 나오니 크루딧 3축 중 커뮤니티가 홈에서 너무 얌전했습니다.
   글을 10장 내려받아 두 줄로 놓습니다.

   ※ 좁은 화면에서는 뒤쪽 몇 장을 감춥니다. 휴대폰에서 열 장이 세로로 쌓이면
     그 아래 자리까지 손가락으로 한참을 내려야 합니다. */
#s6 .hm-posts{grid-auto-rows:1fr}

/* 한 줄에 3장이면 9장(세 줄), 2장이면 6장(세 줄), 1장이면 4장까지만 */
/* 2026-08-24 — 4열 12개 · 3열 9개 · 2열 6개 (전부 세 줄) */
@media (max-width:1360px){ #s6 .hm-post:nth-child(n+10){display:none} }
@media (max-width:760px){  #s6 .hm-post:nth-child(n+7){display:none} }
/* 두 칸이니 <짝수 장>이어야 마지막 줄이 안 빕니다 — 6장(3줄) */
@media (max-width:520px){
  #s6 .hm-post:nth-child(n+5){display:flex}
  #s6 .hm-post:nth-child(n+7){display:none}
}

/* 홈 글 카드에도 게시판 색 (커뮤니티 목록과 같은 색 지도) */
#s6 .hm-pb{display:inline-flex;align-items:center;gap:6px;color:var(--bc,var(--brand))}
#s6 .hm-post:hover{border-color:var(--bc,var(--brand-lt2))}

/* ══ 홈 프로젝트 — 전부 같은 크기 (2026-08-18) ═══════════════════
   [stated] hong: "차라리 동일한 사이즈로 갈까" → "그래 이거 가자"

   큰 카드(bento)를 버렸습니다. 취향이 아니라 <고장 날 자리>라서 버린 것입니다 —
   사진 위에 글자를 얹는 구조라 겹침 사고가 났고,
   5건 미만이면 배치가 통째로 달라져 자료가 늘 때마다 홈이 다른 화면이 됐습니다.
   이제 1건이든 100건이든 생김새가 같습니다.

   ★ 줄이 반쯤 비지 않게 합니다.
     화면이 좁아져 열 수가 줄면, 딱 떨어지는 개수만 남기고 뒤쪽을 감춥니다.
     한 줄에 넷인데 열 장이면 마지막 줄에 두 장만 남아 이가 빠져 보입니다. */
#s6 .v4-grid5{grid-auto-rows:1fr}
#s6 .v4-n-card{height:100%}

/*  ★ 감췄던 것을 <다시 보이게> 해 주는 줄이 반드시 필요합니다.
     좁아지는 쪽으로만 숨기면, 한 번 숨긴 장은 그다음 구간에서도 계속 숨어 있습니다.
     (1180px 에서 3열인데 8장만 남아 마지막 줄에 2장만 서던 것이 이 때문이었습니다)
     열 수가 바뀌는 지점은 시안 CSS 를 그대로 따릅니다 — 1400 / 1180 / 940 / 480 */
/* ★ 2026-08-24 — [stated] hong: "메인에 노출되는 숫자가 너무 적어요"
     10장(두 줄)에서 20장(네 줄)으로 늘렸습니다.
     열 수가 바뀌는 지점마다 <딱 떨어지는 개수>를 다시 잡아 줍니다 —
     안 그러면 마지막 줄에 한두 장만 남아 이가 빠져 보입니다.
     5열 20장 · 4열 16장 · 3열 12장 · 2열 10장 · 1열 6장 (전부 4~6줄) */
@media (max-width:1400px){                                                 /* 4열 → 16장 */
  #s6 .v4-n-card:nth-child(n+9){display:flex}
  #s6 .v4-n-card:nth-child(n+17){display:none}
}
@media (max-width:1180px){                                                 /* 3열 → 12장 */
  #s6 .v4-n-card:nth-child(n+13){display:none}
}
@media (max-width:940px){                                                  /* 2열 → 10장 */
  #s6 .v4-n-card:nth-child(n+11){display:none}
}
@media (max-width:480px){                                                  /* 1열 → 6장 */
  #s6 .v4-n-card:nth-child(n+7){display:none}
}

/* ── 사진 위에 얹는 좋아요 ──
   ※ 순위·등급이 아닙니다. 「몇 사람이 눌렀는지」만 적습니다.
     0 이면 아예 안 그립니다 (prj_like_html 참고). */
#s6 .v4-n-thumb .v4-nlk{
  position:absolute;right:8px;bottom:8px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  height:23px;padding:0 9px 0 8px;border-radius:var(--r-pill,999px);
  background:rgba(22,23,29,.62);color:#fff;
  font-size:11.5px;font-weight:800;font-style:normal;letter-spacing:-.01em;
  white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;
  backdrop-filter:saturate(140%) blur(3px);
}
#s6 .v4-n-thumb .v4-nlk svg{flex:none;opacity:.95}
#s6 .v4-n-card:hover .v4-nlk{background:rgba(22,23,29,.78)}

/* ══ 하트를 눈에 띄게 · 글 카드에 추천·댓글·읽은 수 (2026-08-18) ══
   [stated] hong: "하트가 눈에 잘 안띄네요. 여기에도 추천수 노출을 좀 부탁해요 그리고 읽은수?" */

/* 반투명 먹색 알약은 어두운 사진 위에서 배경에 묻혔습니다.
   흰 알약 + 분홍 하트로 바꿉니다. 어떤 사진 위에서도 뜹니다. */
#s6 .v4-n-thumb .v4-nlk{
  height:26px;padding:0 11px 0 9px;gap:5px;
  background:rgba(255,255,255,.95);color:#C43F5F;
  font-size:12.5px;font-weight:800;
  box-shadow:0 2px 8px rgba(22,23,29,.22);
  backdrop-filter:saturate(160%) blur(4px);
}
#s6 .v4-n-thumb .v4-nlk svg{width:13px;height:13px;opacity:1}
#s6 .v4-n-card:hover .v4-nlk{background:#fff;color:#B0304F;transform:translateY(-1px)}

/* 글 카드 아래 숫자 줄 — 추천 · 댓글 · 읽음.
   ※ 추천만 있고 비추천은 없습니다. 등수도 매기지 않습니다. 0이면 그 항목을 안 그립니다. */
#s6 .hm-pn{display:flex;align-items:center;gap:14px;margin-top:9px;padding-top:10px;
  border-top:1px solid var(--line)}
#s6 .hm-pk{display:inline-flex;align-items:center;gap:5px;font-style:normal;
  font-size:13px;font-weight:800;color:var(--mute);letter-spacing:-.01em}
/* 아이콘도 글자에 맞춰 키웁니다 — 마크업에 박힌 값을 여기서 덮습니다 */
#s6 .hm-pk svg{width:15px;height:15px}
#s6 .hm-pk svg{flex:none}
#s6 .hm-pk.up{color:#5B45C8}
#s6 .hm-pk.cm{color:#2A7A4B}
#s6 .hm-pm{margin-top:auto;padding-top:8px}

/* ══ 관리자 회원 수 판 (2026-08-18) ══════════════════════
   [stated] hong: "회원이 몇명인지 ... 기능이 없는것같아요"
   ★ `.adx-kpis.wdk` 를 그대로 쓰면 화면 폭에 따라 두 칸으로 접혀
     여덟 칸이 네 줄로 늘어집니다. 이 화면만 쓰는 이름을 따로 둡니다. */
.mem-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 8px}
.mem-kpis .adx-kpi{text-decoration:none;color:inherit;transition:.14s}
.mem-kpis .adx-kpi:hover{border-color:var(--brand,#7C5CFC);transform:translateY(-2px)}
@media (max-width:1080px){ .mem-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){  .mem-kpis{grid-template-columns:minmax(0,1fr)} }

/* ── 서랍 안에 여러 폼을 넣을 때 (2026-08-18) ──
   ★ `.tf-more[open] > form` 이 절대 위치라, 서랍 안에 form 을 여러 개 두면
     전부 같은 자리에 <겹쳐> 쌓입니다. 판(.tf-panel) 하나로 감싸고
     그 안의 form 은 보통 흐름으로 되돌립니다. */
.tf-more[open] > .tf-panel{
  position:absolute;right:0;top:34px;z-index:20;width:340px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:13px;box-shadow:0 10px 30px rgba(22,23,29,.16);
  max-height:min(70vh,560px);overflow:auto;text-align:left;
}
.tf-more[open] > .tf-panel > form{
  position:static;width:auto;background:transparent;border:0;padding:0;box-shadow:none;
}
.tf-panel .adx-anote{margin:0 0 8px;font-size:12px;line-height:1.6;color:var(--mute)}
.tf-panel .adx-anote b{color:var(--body)}
@media (max-width:760px){
  .tf-more[open] > .tf-panel{position:static;width:100%;box-shadow:none;margin-top:8px;max-height:none}
}

/* ══════════════════════════════════════════════════════════
   글자를 또렷하게 (2026-08-18)
   ──────────────────────────────────────────────────────────
   [stated] hong: "우리글자가 너무 눈에 아늘어와요 색도 좀 제목은 조금짙게하고"

   ★ 글꼴 문제가 아니라 <색> 문제였습니다. 재어 보니 그렇습니다.

     지금 --mute (부가 글씨) #8A8D9A 는 흰 바탕에서 대비가 3.30 : 1 입니다.
     웹 접근성 기준(WCAG AA)은 보통 글씨에 4.5 : 1 을 요구합니다. <기준 미달>입니다.
     그런데 크루딧의 작은 글씨 — 카드 밑 설명, 목록 요약, 폼 안내 — 가 거의 다 이 색입니다.
     그래서 「글자가 눈에 안 들어온다」가 됩니다.

     대비 재는 법: (밝은쪽+0.05) / (어두운쪽+0.05). 1 부터 21 까지 나옵니다.

   ※ 글자 <크기>는 건드리지 않았습니다.
     시안 CSS 에 높이를 픽셀로 못박아 둔 자리가 982곳이라, 크기를 키우면
     그 상자들이 전부 터집니다. 색과 굵기만으로 먼저 해결합니다.
   ══════════════════════════════════════════════════════════ */
body{
  --ink:#0F1014;    /* 제목 — 17.9 → 19.0 : 1  (더 짙게) */
  --body:#2A2C35;   /* 본문 — 11.0 → 13.9 : 1 */
  --mute:#5F6373;   /*  부가 —  3.30 → 5.97 : 1  ★ 기준 미달에서 통과로 */
}

/* 작은 글씨는 색만으로 부족합니다. 굵기를 한 단 올려 획을 살립니다. */
#s3 .v4-al2,#s6 .v4-n-cap span,#s6 .v4-f-cap span,#s6 .hm-pm,
#s4 .pl-s,#s2 .sr-px,.fhint,.lead{font-weight:600}

/* 제목은 「조금 짙게」 — 색은 위에서 이미 짙어졌고, 여기서 획을 확실히 잡습니다 */
#s3 .v4-al1 b,#s6 .v4-n-cap b,#s6 .v4-f-cap b,#s6 .hm-post b,#s4 .pl-t{color:var(--ink)}

/* 어두운 바탕 위에서는 위 토큰이 오히려 해가 됩니다. 원래 값을 되돌립니다.

   ★ 2026-08-20 고침 — 여기에 `.adm` 이 들어 있었습니다.
     그런데 관리자 화면에서 어두운 곳은 <위 검은 띠>와 <왼쪽 메뉴>뿐이고,
     본문은 흰 종이입니다. `.adm` 통째로 밝은 글자색을 물려주는 바람에
     본문 글씨가 흰 바탕에 연회색(#D5D7E0)으로 찍혀 거의 안 보였습니다.
     — 관리자 12개 화면 전부에 걸린 문제였습니다.
     그래서 어두운 두 곳(.adm-top · .adm-side)에만 다시 물려줍니다. */
.rail,.wm-rail,.foot,.wm-foot,.adm-top,.adm-side,.wm-adm,
#s6 .v4-bg-scrim{--mute:#9A9DAA;--body:#D5D7E0}

/* ══════════════════════════════════════════════════════════
   영상 (2026-08-18 · 27단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "우리 영상 파트를 하나 추가하자. 영상쪽은 유투브 영상이나
                   링크를 통해서 제공한다고하고 url을 입력하면 썸네일을 뽑아오는 방식으로"

   ★ 재생기는 <누르기 전에는> 남의 서버에 접속하지 않습니다.
     우리가 받아 둔 그림만 먼저 깔고, 누르면 그때 iframe 을 붙입니다.
   ══════════════════════════════════════════════════════════ */

.vd-play{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:var(--r-lg,18px);overflow:hidden;
  background:#101118 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid var(--line);
}
.vd-play::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,16,.10) 0%,rgba(10,11,16,.34) 100%);
  transition:background .16s;
}
.vd-play:hover::after{background:linear-gradient(180deg,rgba(10,11,16,.04) 0%,rgba(10,11,16,.24) 100%)}
.vd-play.ph{background:var(--field)}

.vd-btn{
  position:relative;z-index:2;
  width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:#16171D;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.30);
  transition:transform .16s, background .16s;
  padding-left:4px;   /* 삼각형은 시각 중심이 오른쪽으로 쏠려 보정합니다 */
}
.vd-play:hover .vd-btn{transform:scale(1.06);background:#fff}
.vd-play:focus-within .vd-btn{outline:3px solid var(--brand,#7C5CFC);outline-offset:3px}

.vd-host{
  position:absolute;z-index:2;left:14px;bottom:12px;
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.vd-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vd-play.on::after,.vd-play.on .vd-btn,.vd-play.on .vd-host{display:none}

/* 목록 카드 위의 「영상」 표시 */
.vd-tag{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill,999px);
  background:rgba(22,23,29,.72);color:#fff;
  font-size:11px;font-weight:800;font-style:normal;letter-spacing:-.01em;
  backdrop-filter:saturate(140%) blur(3px);
}
#s6 .v4-n-thumb .vd-tag{left:8px;bottom:8px}

/* 등록 폼 — 무엇을 올리는지 고르는 두 칸 */
.pk-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-kind{margin:0}
/* 이름과 설명을 줄로 나눕니다. 안 그러면 「웹사이트브라우저에서 여는…」으로 붙어 버립니다. */
.pk-kind span b{display:block;margin-bottom:3px;font-size:14px}
.pk-kind span{font-size:12.5px;line-height:1.6}
@media (max-width:640px){ .pk-kinds{grid-template-columns:1fr} }

/* ══ 아카이브 한 줄에 다섯 (2026-08-18) ════════════════════
   [stated] hong: "아카이브도 한줄에 5개씩 노출이 좋겠어"

   ★ 줄이 반쯤 비지 않게 <열 수의 배수>로 내려받습니다 (한 쪽에 15개).
     홈에서 배운 것과 같습니다 — 열 수가 줄면 뒤쪽을 감춥니다. */
#s3 .v4-agrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
@media (max-width:1600px){ #s3 .v4-agrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1280px){ #s3 .v4-agrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:940px){  #s3 .v4-agrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 다섯 칸이면 카드가 좁아집니다. 글자를 그에 맞게 줄입니다. */
#s3 .v4-al1 b{font-size:13.5px}
#s3 .v4-acat{font-size:10.5px}
#s3 .v4-al2{font-size:11px;gap:6px}
#s3 .v4-acrd{font-size:11px}

/* 좋아요를 사진 위로 — 홈과 같은 자리, 같은 모양 */
#s3 .v4-at{position:relative}
#s3 .v4-at .v4-nlk{
  position:absolute;right:8px;bottom:8px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  height:25px;padding:0 10px 0 8px;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.95);color:#C43F5F;
  font-size:12px;font-weight:800;font-style:normal;letter-spacing:-.01em;
  white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;
  box-shadow:0 2px 8px rgba(22,23,29,.22);
  backdrop-filter:saturate(160%) blur(4px);
}
#s3 .v4-at .v4-nlk svg{flex:none;width:12px;height:12px;opacity:1}
#s3 .v4-ac:hover .v4-nlk{background:#fff;color:#B0304F}

/* ══════════════════════════════════════════════════════════
   저장(북마크) · 모바일 두 칸 (2026-08-18 · 28단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "모바일 정렬이 맘에 들지 않아 모바일 UI 바꿔보자"
                  "즐겨찾기? 아니면 저아이콘은 뭐지? 저것도 추가"

   ★ 저장은 좋아요와 <다른 것>입니다.
     좋아요는 왼쪽 아래(분홍 하트) — 남에게 보이는 수.
     저장은 오른쪽 위(북마크) — 나만 보는 서랍. 수를 세지 않습니다.
     자리를 멀리 떼어 놓아야 헷갈리지 않습니다.
   ══════════════════════════════════════════════════════════ */

/* 카드 한 장을 감싸는 자리. 저장 단추가 카드 <a> 밖에서 그 위에 얹힙니다. */
.v4-acw{position:relative;display:flex;min-width:0}
.v4-acw > .v4-ac{flex:1;min-width:0}

.pv-savef{position:absolute;right:9px;top:9px;z-index:5;margin:0;line-height:0}
.pv-save{
  position:absolute;right:9px;top:9px;z-index:5;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:#3A3C46;
  box-shadow:0 2px 8px rgba(22,23,29,.20);
  transition:transform .14s, background .14s, color .14s;
  backdrop-filter:saturate(160%) blur(4px);
  text-decoration:none;
}
.pv-savef .pv-save{position:static;right:auto;top:auto}
.pv-save:hover{background:#fff;color:#16171D;transform:scale(1.07)}
.pv-save.on{background:#16171D;color:#fff}
.pv-save.on:hover{background:#2A2C35}
.pv-save:focus-visible{outline:3px solid var(--brand,#7C5CFC);outline-offset:2px}
/* 제작방식 배지가 왼쪽 위에 있으므로 북마크는 오른쪽 위. 겹치지 않습니다. */

/* ── 모바일: 카드 두 칸 ──
   전에는 480px 아래에서 한 칸이라 카드 하나가 화면을 통째로 먹었습니다.
   손가락으로 한참 내려야 다음 것이 나옵니다. 두 칸이면 훑어보기가 됩니다. */
@media (max-width:720px){
  #s3 .v4-agrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px}
  #s6 .v4-grid5{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px}
  #s3 .v4-acap,#s6 .v4-n-cap{padding:10px 10px 12px}
  #s3 .v4-al1{display:block}
  #s3 .v4-al1 b,#s6 .v4-n-cap b{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;white-space:normal;font-size:13px;line-height:1.42;
  }
  #s3 .v4-acat{display:block;margin-bottom:4px;font-size:10.5px}
  #s3 .v4-al2{margin-top:6px;font-size:10.5px;flex-wrap:wrap;gap:4px}
  #s3 .v4-acrd{display:none}          /* 좁은 칸에서 크레딧 요약까지 넣으면 글자 무덤이 됩니다 */
  .pv-save{width:30px;height:30px;right:7px;top:7px}
  .pv-savef{right:7px;top:7px}
  #s3 .v4-at .v4-nlk,#s6 .v4-n-thumb .v4-nlk{height:22px;padding:0 8px 0 6px;font-size:11px}
  #s6 .v4-n-card:nth-child(n+11){display:none}   /* 2열이면 10장(5줄) */
}
@media (max-width:480px){
  /* ★ 여기서 한 칸으로 떨어뜨리지 않습니다. 시안 CSS 의 1칸 규칙을 되돌립니다. */
  #s3 .v4-agrid,#s6 .v4-grid5{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  #s3 .v4-al1 b,#s6 .v4-n-cap b{font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════
   회사 카드 — 로고를 크게, 단추 둘 (2026-08-18)
   ──────────────────────────────────────────────────────────
   [stated] hong: "기업의 경우 포트폴리오보기/ 연락하기 버튼 이렇게 두개 넣어줘도
                   좋을거 같아 기존형태 유지하되 로고를 넣을수 있게 해줘"

   ★ 단추는 카드 <a> 밖에 둡니다. <a> 안에 <a> 를 넣으면 브라우저가 못 읽습니다.
   ★ 로고를 44px → 60px 으로 키웠습니다. 회사는 이름보다 <로고>로 먼저 알아봅니다.
     로고를 안 올린 회사는 이름 첫 글자가 그 자리를 채웁니다 — 빈칸으로 두지 않습니다.
   ══════════════════════════════════════════════════════════ */

.co-cw{display:flex;flex-direction:column;min-width:0}
.co-cw > .co-c{flex:1;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}

.co-cact{
  display:grid;grid-template-columns:1.35fr 1fr;gap:8px;
  padding:12px 17px 14px;background:#fff;
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);
}
.co-cw:hover > .co-c,.co-cw:hover > .co-cact{border-color:var(--line-2)}
.co-cact .btn{width:100%;justify-content:center}
.co-cact .btn.off{
  background:var(--field);color:var(--mute);border-color:var(--line);
  cursor:default;pointer-events:none;font-weight:700;
}

/* 로고를 조금 크게 — 회사는 이름보다 로고로 먼저 알아봅니다 */
.co-c .co-logo{width:60px;height:60px;border-radius:14px}
.co-c .co-logo.ph{font-size:24px}
.co-chd{align-items:flex-start}
.co-cid{padding-top:3px}

@media (max-width:480px){
  .co-cact{grid-template-columns:1fr 1fr;padding:10px 13px 12px}
  .co-c{padding:14px 13px 12px}
  .co-c .co-logo{width:52px;height:52px}
}

/* 카드 높이를 줄마다 맞춥니다 — 확인됨 배지 때문에 들쭉날쭉하던 것 */
.co-list{grid-auto-rows:1fr}
#s3 .v4-agrid,#s6 .v4-grid5{grid-auto-rows:1fr}
.v4-acw{height:100%}

/* ══ 좁은 화면에서 아래 권유 띠가 깨지던 것 (2026-08-19) ══════
   [stated] hong: "반응형일때 아래 꺠져요"

   ★ `.v4-cta` 가 좁아져도 계속 <가로>로 서 있었습니다.
     글 칸은 flex:1 이라 계속 줄어드는데 단추 칸은 flex:none 이라 안 줄어듭니다.
     그래서 글이 「만든 / 걸 / 올리면,」 처럼 한 낱말씩 끊겼습니다.
     좁아지면 <세로로> 세웁니다. */
@media (max-width:820px){
  #s6 .v4-cta{flex-direction:column;align-items:stretch;gap:18px;padding:22px 20px}
  #s6 .v4-cta-t h3{font-size:18px}
  #s6 .v4-cta-t p{max-width:none}
  #s6 .v4-cta-b{flex:1 1 auto}
  #s6 .v4-cta-b .btn{flex:1 1 0;justify-content:center}
}
@media (max-width:420px){
  #s6 .v4-cta-b{flex-direction:column}
}

/* 같은 이유로 깨질 수 있는 가로 띠들을 함께 세웁니다 */
@media (max-width:760px){
  .actband{flex-direction:column;align-items:stretch;gap:12px}
  .actband .rt{margin-left:0;flex-wrap:wrap}
  .actband .rt .btn{flex:1 1 46%;justify-content:center}
}

/* ══ 관리자 본문이 메뉴 아래로 밀려 내려가던 것 (2026-08-19) ═══
   [stated] hong: "관리자 메뉴에 좌측은 보이는데 오른쪽은 보이지 않습니다."

   ★ 시안 CSS 에 이런 줄이 있었습니다 —
       @media (max-width:1320px){ .adm-main{flex:1 1 100%} }
     화면 폭이 1320px 아래로 내려가면 본문이 「가로 100%」가 되면서
     왼쪽 메뉴 <옆>이 아니라 <아래>로 밀려 내려갑니다.
     원래 그 규칙은 관리자 안쪽의 「목록+상세」 분할용인데 바깥 본문까지 같이 잡았습니다.

   메뉴가 보이는 구간(941px~1320px)에서만 되돌립니다.
   940px 아래에서는 메뉴가 숨으므로 본문이 100% 인 게 맞습니다. */
@media (min-width:941px) and (max-width:1320px){
  /* ★ 진짜 원인은 <부모>였습니다. `.adm-body{flex-wrap:wrap}` 때문에
       본문이 남은 자리보다 넓으면 통째로 다음 줄(= 메뉴 아래)로 내려갑니다.
       그 wrap 은 관리자 안쪽 「목록+상세」를 접으려고 넣은 것인데
       바깥 「메뉴+본문」까지 접어 버렸습니다. 여기서는 접지 않습니다. */
  .adm-body{flex-wrap:nowrap}
  .adm-main{flex:1 1 auto;min-width:0;width:auto}
  /* 안쪽 「목록+상세」는 원래대로 접히게 둡니다 — 그건 접히는 게 맞습니다 */
  .adm-inner,.adm-split{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════
   프로필 그림 (아바타) — 2026-08-19
   ──────────────────────────────────────────────────────────
   [stated] hong: "커뮤니티도 글올린사람의 프로필을 동그라미로 표현해주시고
                   그안에 사진을 본인들이 넣을수 있도록 ...
                   기본프로필을 몇개 그림으로 디자인해주세요"

   ★ 캐릭터는 새로 그리지 않고 역할 아이콘 8종을 그대로 씁니다.
     같은 손으로 그린 그림이라야 사이트 안에서 따로 놀지 않습니다.
   ══════════════════════════════════════════════════════════ */

.av{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;overflow:hidden;background:var(--field);
  border:1px solid rgba(22,23,29,.07);
  line-height:0;vertical-align:middle;
}
.av img{width:100%;height:100%;object-fit:cover;display:block}
/* 캐릭터는 그림이 아래쪽에 그려져 있어 조금 내려 앉혀야 얼굴이 가운데로 옵니다 */
.av-ch svg{display:block;margin-bottom:-8%}

/* 커뮤니티 목록 — 글쓴이 */
#s4 .pl-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#s4 .pl-hd .av{margin-right:1px}

/* 글 상세 · 댓글 */
.po-av{margin-right:9px}
.cm-av{margin-right:8px}

/* 홈 글 카드 */
#s6 .hm-pm{display:flex;align-items:center;gap:6px}
#s6 .hm-pm .av{margin-right:2px}

/* 고르는 화면 — 기본 캐릭터 여덟 개 */
.av-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.av-pick label{
  display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  padding:12px 6px 10px;border:1.5px solid var(--line);border-radius:14px;
  background:#fff;transition:.14s;text-align:center;
}
.av-pick label:hover{border-color:var(--line-2);transform:translateY(-1px)}
.av-pick label:has(input:checked){border-color:var(--brand);background:var(--brand-lt);box-shadow:0 0 0 1px var(--brand)}
.av-pick input{position:absolute;opacity:0;width:0;height:0}
.av-pick b{font-size:11.5px;font-weight:700;color:var(--body);letter-spacing:-.02em}
.av-pick label:has(input:checked) b{color:#4A38B0;font-weight:800}
@media (max-width:520px){ .av-pick{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* 내 정보 화면의 지금 그림 */
.av-now{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.av-now .av{box-shadow:0 3px 12px rgba(22,23,29,.10)}
.av-nowtx{min-width:0}
.av-nowtx b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.av-nowtx span{display:block;font-size:12px;color:var(--mute);margin-top:3px;line-height:1.6}

/* ══════════════════════════════════════════════════════════
   커뮤니티 — 좁은 화면 (2026-08-19 · 31단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "지금 반응형에서 모바일부분 커뮤니티는 수정이 안된것같아"

   재 본 결과 <넘치지는> 않았습니다. 다만 좁은 화면에서 쓰기 나쁜 곳이
   네 군데 있었습니다. 하나씩 이유와 함께 고칩니다.

   1) 왼쪽 46px 추천 칸이 모바일에서도 그대로 서 있었습니다.
      390px 화면에서 46+16=62px, 곧 <글 폭의 16%>를 숫자 하나가 먹습니다.
      칸을 접고 그 값을 아래 「댓글·조회」 줄로 옮깁니다.
      ※ 값을 지우는 게 아닙니다. 자리를 옮길 뿐입니다.

   2) 게시판 색 지도(.cm-badges) 14개가 첫 화면 절반을 덮었습니다.
      바로 아래 .rc-nav 가 900px 이하에서 이미 <옆으로 넘기는 한 줄>로
      같은 목록을 보여 줍니다. 같은 것이 둘이면 하나는 소음입니다.
      좁은 화면에서는 지도를 접고 넘기는 줄만 남깁니다.

   3) 목록 사진이 330px 로 묶여 있었습니다(3361줄).
      나중에 쓴 규칙이라 620px 용 max-width:none 을 덮고 있었습니다.
      좁은 화면에서는 폭을 다 씁니다 — 손바닥 안에서 330px 는 이미 꽉 찬 폭입니다.

   4) 760~900px 구간에서 왼쪽 메뉴가 <180px 칸 안에 든 가로 스크롤>이 됐습니다.
      .rc-nav 가 눕는 지점(900px)과 .rx-3col 이 한 줄로 떨어지는 지점(760px)이
      어긋나 있어서 생긴 틈입니다. 두 지점을 900px 로 맞춥니다.
   ══════════════════════════════════════════════════════════ */

/* 넓은 화면에서는 아래 줄의 추천을 감춥니다 — 왼쪽 세로 칸이 그 일을 합니다 */
#s4 .pl-nup{display:none}

/* 4) 메뉴가 눕는 지점과 본문이 한 줄로 떨어지는 지점을 맞춥니다.
      ★ 여기서 <진짜 원인>을 하나 더 찾았습니다.
        시안 CSS 8965줄의 `.rx-3col > *:first-child{display:none}` 이
        940px 아래에서 게시판 메뉴를 통째로 지우고 있었습니다.
        그래서 휴대폰에서는 게시판을 고를 방법이 아예 없었습니다.
        (crewdit-server.css 의 「옆으로 넘기는 한 줄」 규칙도 여태 헛돌았습니다.)
        커뮤니티에서만 되살립니다 — 커뮤니티는 게시판을 고르는 게 곧 쓰는 일입니다. */
@media (max-width:940px){
  #s4 .rx-3col{grid-template-columns:minmax(0,1fr);gap:0}
  #s4 .rx-3col > *:first-child{display:flex}   /* 되살립니다 (넘기는 한 줄) */
  #s4 .cm-badges{display:none}                 /* 2) 그 줄과 겹칩니다 */
  #s4 .cm-head{padding-bottom:16px;margin-bottom:18px}

  /* 손가락으로 누를 자리는 38px 이상. 31px 짜리 알약은 옆칸을 잘못 누르게 됩니다. */
  #s4 .rc-navlk{min-height:38px;align-items:center;padding:0 13px}
  /* 「글쓰기」는 오른쪽에 붙어 따라옵니다. 밑으로 지나가는 게시판 알약이
     단추에 잘린 것처럼 보이지 않도록, 단추 왼쪽에 흰 여백을 확실히 깔아 둡니다. */
  #s4 .rc-navwrite{min-height:38px;box-shadow:-16px 0 14px 6px #fff}
  #s4 .v4-sorts a{min-height:36px;display:inline-flex;align-items:center}
  #s4 .pl-open{min-height:36px}
}

@media (max-width:720px){
  /* 1) 왼쪽 추천 칸을 접고 아래 줄로 옮깁니다 */
  #s4 .pl-row{grid-template-columns:minmax(0,1fr);gap:0;
    padding:16px 12px 17px;margin:0 -12px}
  #s4 .pl-up{display:none}
  #s4 .pl-nup{display:inline-flex}
  #s4 .pl-nup svg{color:var(--brand)}
  #s4 .pl-nup.dim svg{color:#C6C8D2}

  /* 머리줄 — 게시판 배지·글쓴이·시각이 두 줄 넘게 흐르지 않도록 조금 줄입니다 */
  #s4 .pl-hd{gap:6px;font-size:11.5px}
  #s4 .pl-b{height:20px;padding:0 8px 0 7px;font-size:11px}
  #s4 .pl-t{margin-top:8px;font-size:16.5px;line-height:1.38}
  #s4 .pl-s{margin-top:6px;font-size:12.5px;line-height:1.65;-webkit-line-clamp:2}

  /* 3) 사진은 <칸 폭까지> 씁니다. 다만 420px 을 넘기지 않습니다.
        720px 짜리 화면에서 그냥 100% 로 두면 656px 사진이 되어,
        전에 「사진이 글보다 커서 화면을 다 먹는다」던 그 문제가 그대로 돌아옵니다.
        휴대폰(390px)에서는 칸이 326px 이라 어차피 꽉 찹니다. */
  #s4 .pl-pics{max-width:min(100%,420px);margin-top:10px}
  #s4 .pl-pics.n1 span{aspect-ratio:16/9}

  /* 아래 줄 — 「펼쳐 보기」가 먼저, 그다음 숫자 셋. 태그는 다음 줄로 내려갑니다 */
  #s4 .pl-ft{gap:10px 12px;margin-top:10px}
  #s4 .pl-n{font-size:11.5px}
  #s4 .pl-n svg{width:12px;height:12px}
  #s4 .pl-tags{margin-left:0;width:100%;margin-top:2px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #s4 .pl-tags::-webkit-scrollbar{display:none}
  #s4 .pl-tags .rx-pill{flex:none}

  /* 정렬 단추 — 세 개가 오른쪽 끝에 몰려 눌리기 어려웠습니다.
     한 줄을 통째로 내주고 옆으로 넘기게 둡니다. */
  #s4 .v4-tools{gap:8px}
  #s4 .v4-sorts{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px}
  #s4 .v4-sorts::-webkit-scrollbar{display:none}
  #s4 .v4-sorts a{flex:none}

  /* 글 상세 — 사진과 앞뒤 글 */
  #s4 .po-photos{margin-top:16px}
  #s4 .po-photo.tall{max-width:none}
}

@media (max-width:480px){
  #s4 .pl-t{font-size:15.5px}
  #s4 .pl-row{padding:14px 12px 15px}
  /* 「펼쳐 보기」 글자는 접고 화살표만 남깁니다 — 옆에 숫자 셋이 서야 합니다.
     ★ display:none 이 아니라 <눈에만> 감춥니다. 아예 없애면 화면 읽어 주는
       프로그램이 이 단추의 이름을 잃어버려 「단추」라고만 읽습니다. */
  #s4 .pl-open{padding:0 9px}
  #s4 .pl-open span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ══════════════════════════════════════════════════════════
   회사 카드 — 최근 올린 프로젝트 세 장 (2026-08-19)
   ──────────────────────────────────────────────────────────
   [stated] hong: "이렇게 최근 올린 프로젝트가 노출되면 좋을것같아"

   ⚠ 이 규칙이 빠져 있어서 카드 안의 사진이 <원본 크기(800px)> 그대로
     펼쳐지며 화면을 가로로 밀어내고 있었습니다. 좌표 검사에서 잡혔습니다.
     그림을 넣을 때는 <담는 그릇>을 반드시 같이 정해 두어야 합니다.
   ══════════════════════════════════════════════════════════ */

.co-cthumbs{
  display:grid;gap:6px;margin:12px 0 2px;min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* ★ 장수가 몇이든 <칸 크기는 똑같이> 3칸으로 둡니다.
   한 장일 때 넓게 펼쳐 보았더니 그림이 카드의 주인공이 되어 버렸습니다.
   여기 필요한 것은 「이런 걸 만드는 회사구나」를 알려 주는 <썸네일>이지
   보여 주는 그림이 아닙니다. 칸이 같아야 카드끼리 줄도 맞습니다. */

.co-ct{
  position:relative;display:block;min-width:0;overflow:hidden;
  aspect-ratio:4/3;border-radius:9px;background:var(--field);
  border:1px solid rgba(22,23,29,.06);
}
/* ★ 캡처는 <위쪽>이 그 사이트의 얼굴입니다.
   가운데를 잘라 내면 본문 중간의 아무 문단이 잡혀 무슨 사이트인지 안 보입니다. */
.co-ct img{object-position:center top}
.co-ct img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.co-c:hover .co-ct img{transform:scale(1.03)}

/* 그림이 아직 없는 프로젝트 — 빈 네모 대신 이름 앞글자를 둡니다.
   빈 네모 세 개가 나란히 서면 「고장」처럼 보입니다. */
.co-ct.ph::after{
  content:attr(data-l);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--mute);letter-spacing:-.02em;
  padding:0 6px;text-align:center;line-height:1.3;overflow:hidden;
}

/* 영상 프로젝트 표시 — 작은 재생 삼각형 */
.co-ctv{
  position:absolute;right:5px;bottom:5px;width:16px;height:16px;border-radius:50%;
  background:rgba(22,23,29,.72);
}
.co-ctv::before{
  content:"";position:absolute;left:6px;top:4.5px;
  border-left:5px solid #fff;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}

@media (max-width:480px){
  .co-cthumbs{gap:5px;margin-top:10px}
  .co-ct{border-radius:7px}
}

/* ══════════════════════════════════════════════════════════
   AI 도구 모음 — #s80 (2026-08-19 · 32단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "도구추천은 각 파트별로 나눠주세요.
                   그리고 임의로 도구좀 넣어주세요 아이콘이랑 소개와 함꼐요"

   ★ 여기에 순위를 나타내는 모양이 하나도 없습니다.
     번호 · 별 · 배지 · 「1등」 색 — 전부 없습니다.
     카드 크기도 전부 같습니다. 하나만 크면 그게 곧 추천이 됩니다.
   ══════════════════════════════════════════════════════════ */

#s80 .ait-head{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
#s80 .ait-head .h1{margin:0}
#s80 .ait-head .lead{margin:9px 0 0;max-width:820px}

/* ── 파트로 건너뛰는 줄 ──
   목록이 길어서, 자기 파트로 바로 가는 길이 있어야 합니다. */
#s80 .ait-jump{
  display:flex;gap:7px;flex-wrap:wrap;margin:0 0 26px;
}
#s80 .ait-jump a{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  text-decoration:none;color:var(--body);font-size:13px;font-weight:700;
  letter-spacing:-.02em;transition:.13s;
}
#s80 .ait-jump a:hover{border-color:var(--brand-lt2);background:var(--brand-lt);color:#4A38B0}
#s80 .ait-jump a i{
  font-style:normal;font-size:11px;font-weight:800;color:var(--mute);
  background:var(--field);border-radius:999px;padding:1px 7px;
}
#s80 .ait-jump a:hover i{background:#fff;color:#5B45C8}
#s80 .ait-jump .roleic{width:16px;height:16px;flex:none}

/* ── 파트 머리 ── */
#s80 .ait-sec{margin:0 0 34px;scroll-margin-top:18px}
#s80 .ait-sh{display:flex;align-items:center;gap:10px;margin-bottom:13px}
#s80 .ait-shic{
  flex:none;width:38px;height:38px;border-radius:11px;background:var(--brand-lt);
  display:flex;align-items:center;justify-content:center;
}
#s80 .ait-shic .roleic{width:26px;height:26px}
#s80 .ait-sh h2{
  margin:0;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
}
#s80 .ait-shn{font-size:12px;font-weight:700;color:var(--mute)}

/* ── 도구 카드 ──
   ★ 카드 크기가 전부 같습니다. 하나만 크면 그게 추천으로 읽힙니다. */
#s80 .ait-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  grid-auto-rows:1fr;
}
#s80 .ait-c{
  display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;
  padding:20px 16px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;text-decoration:none;transition:border-color .14s, box-shadow .14s, transform .14s;
}
#s80 .ait-c:hover{
  border-color:var(--brand-lt2);box-shadow:0 8px 22px rgba(22,23,29,.07);transform:translateY(-2px);
}
#s80 .ait-c:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* 아이콘 — <무엇을 하는 도구인지>를 그린 그림입니다. 회사 로고가 아닙니다.
   남의 상표를 그대로 쓰지 않고, 바깥 주소에서 그림을 불러오지도 않습니다. */
#s80 .ait-ico{
  width:56px;height:56px;border-radius:16px;margin-bottom:13px;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--brand-lt);color:#5B45C8;transition:.14s;
}
#s80 .ait-c:hover .ait-ico{background:var(--brand);color:#fff}

/* 도구마다 그린 표시 · 올려 둔 진짜 아이콘 — 둘 다 <바탕색을 빼고> 그림만 보여 줍니다.
   보라 네모 안에 그 회사 색을 넣으면 서로 싸웁니다. */
#s80 .ait-ico.has,#s80 .ait-ico.mk{background:transparent;border-radius:14px;overflow:visible}
#s80 .ait-c:hover .ait-ico.has,#s80 .ait-c:hover .ait-ico.mk{background:transparent}
#s80 .ait-ico.mk .ait-mk{display:block;transition:transform .16s;
  filter:drop-shadow(0 2px 6px rgba(22,23,29,.10))}
#s80 .ait-c:hover .ait-ico.mk .ait-mk{transform:scale(1.06)}
#s80 .ait-ico.has img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .16s;
}
#s80 .ait-c:hover .ait-ico.has img{transform:scale(1.06)}

#s80 .ait-nm{
  font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.4;
}
#s80 .ait-wt{
  margin:7px 0 0;font-size:12.5px;color:var(--body);line-height:1.68;flex:1;
  word-break:keep-all;   /* 가운데 맞춘 글은 낱말 중간에서 끊기면 특히 읽기 나쁩니다 */
}
#s80 .ait-url{
  display:inline-flex;align-items:center;gap:4px;margin-top:11px;
  font-size:11.5px;font-weight:700;color:var(--mute);
}
#s80 .ait-url{min-width:0;max-width:100%}
/* 주소가 길면(notebooklm.google.com) 카드를 뚫고 나갑니다 — 말줄임으로 잘라 둡니다 */
#s80 .ait-url > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#s80 .ait-url svg{width:12px;height:12px;flex:none}
#s80 .ait-c:hover .ait-url{color:var(--brand)}

/* 넓은 화면에서는 네 칸 — 세 칸이면 카드가 넓어져 한 줄 소개가 헐렁해집니다 */
@media (min-width:1400px){
  #s80 .ait-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){
  #s80 .ait-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  /* ★ 여기서도 한 칸으로 떨어뜨리지 않습니다 — 두 칸이라야 <고르는 화면>으로 읽힙니다 */
  #s80 .ait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #s80 .ait-c{padding:13px 12px 12px}
  #s80 .ait-ico{width:46px;height:46px;border-radius:13px;margin-bottom:10px}
  #s80 .ait-ico svg{width:22px;height:22px}
  /* 표시·진짜 아이콘은 칸을 꽉 채웁니다 (안쪽 그림 아이콘만 작게 둡니다) */
  #s80 .ait-ico.mk svg,#s80 .ait-ico.has img{width:46px;height:46px}
  #s80 .ait-nm{font-size:13.5px}
  #s80 .ait-wt{font-size:11.5px;line-height:1.6;margin-top:5px}
  #s80 .ait-url{font-size:10.5px;margin-top:9px}
  #s80 .ait-jump{gap:6px;margin-bottom:20px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #s80 .ait-jump::-webkit-scrollbar{display:none}
  #s80 .ait-jump a{flex:none}
  #s80 .ait-sh h2{font-size:15.5px}
  #s80 .ait-shic{width:32px;height:32px;border-radius:9px}
  #s80 .ait-shic .roleic{width:22px;height:22px}
  #s80 .ait-sec{margin-bottom:26px}
}

/* 게시판 목록 아래의 <자료 화면> 링크 — 게시판 알약과 구별되게 둡니다 */
#s4 .rc-navdoc{
  display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);border-radius:0;
  font-weight:800;color:#4A38B0;
}
#s4 .rc-navdoc svg{width:14px;height:14px;flex:none}
#s4 .rc-navdoc:hover{background:transparent;color:var(--brand)}
@media (max-width:940px){
  #s4 .rc-navdoc{margin-top:0;padding-top:0;border-top:0;
    background:var(--brand-lt);color:#4A38B0;border-radius:var(--r-pill);
    padding:0 13px;white-space:nowrap}
}

/* ══════════════════════════════════════════════════════════
   커뮤니티 — 문장으로 찾기 (2026-08-19 · 33단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "커뮤니티에서 검색도 할수 있게 ...
                   자연어로 문장으로 검색하면 관련된 글을 찾아 리스트업"

   ★ 위쪽 통합검색과 <생김새를 다르게> 둡니다.
     똑같이 생기면 「같은 검색인데 왜 두 개지」가 됩니다.
     이건 <이 게시판 안에서> 찾는 자리라 게시판 목록 바로 위에 붙입니다.
   ══════════════════════════════════════════════════════════ */

#s4 .cm-find{
  display:flex;align-items:center;gap:8px;position:relative;
  margin:0 0 14px;padding:5px 6px 5px 14px;
  border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:#fff;
  transition:border-color .14s, box-shadow .14s;
}
#s4 .cm-find:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,92,252,.12)}
#s4 .cm-findic{width:18px;height:18px;flex:none;color:var(--mute)}
#s4 .cm-find:focus-within .cm-findic{color:var(--brand)}
#s4 .cm-findin{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  height:38px;font:inherit;font-size:14px;color:var(--ink);letter-spacing:-.02em;
}
#s4 .cm-findin::placeholder{color:#9A9DAB;font-weight:500}
#s4 .cm-findin::-webkit-search-cancel-button{display:none}
#s4 .cm-findx{
  flex:none;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--mute);background:var(--field);
}
#s4 .cm-findx svg{width:13px;height:13px}
#s4 .cm-findx:hover{background:var(--line);color:var(--ink)}
#s4 .cm-findgo{flex:none;height:38px;padding:0 20px;border-radius:var(--r-pill)}

/* 찾은 결과 알림 — 무엇으로 찾았는지 <보여 줍니다>.
   검색이 왜 그렇게 나왔는지 모르면 사람은 검색을 못 믿습니다. */
#s4 .cm-found{
  margin:0 0 18px;padding:12px 16px;border-radius:var(--r-md);
  background:var(--brand-lt);border:1px solid var(--brand-lt2);
  font-size:13px;color:#4A38B0;line-height:1.7;
}
#s4 .cm-found > b{font-size:15px;font-weight:800;color:#3B2A9E;margin-right:5px}
#s4 .cm-fterms{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-left:8px;font-size:11.5px;color:#6B5FB8}
#s4 .cm-fterms i{
  font-style:normal;background:#fff;border-radius:999px;padding:2px 9px;
  font-size:11.5px;font-weight:800;color:#4A38B0;
}
#s4 .cm-fnone{margin:8px 0 0;font-size:12.5px;color:#4A38B0;line-height:1.75}
#s4 .cm-fnone a{color:#3B2A9E;font-weight:800}

@media (max-width:720px){
  #s4 .cm-find{padding:4px 5px 4px 12px;gap:6px}
  #s4 .cm-findin{height:36px;font-size:13.5px}
  #s4 .cm-findgo{height:34px;padding:0 15px;font-size:13px}
  #s4 .cm-found{font-size:12.5px;padding:11px 13px}
  #s4 .cm-fterms{display:flex;margin-left:0;margin-top:5px}
}

/* ══ 첫 화면의 다음 걸음 (2026-08-19 · 33단계) ═══════════════
   ★ 「올릴수록 내 이력이 됩니다」를 읽고 마음이 움직인 <그 자리>에
     올리러 가는 길이 있어야 합니다. 밑으로 내려가면서 마음은 식습니다. */
#s6 .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
#s6 .hero-cta .btn.lg{
  height:50px;padding:0 26px;font-size:15px;font-weight:800;border-radius:var(--r-pill);
  letter-spacing:-.025em;
}
/* 「무료」는 값이 아니라 <망설임을 없애는 말>이라 단추 안에 붙입니다 */
#s6 .hero-cta .btn.solid span{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;margin-left:9px;
  border-radius:999px;background:rgba(255,255,255,.22);
  font-size:11.5px;font-weight:800;letter-spacing:0;
}
@media (max-width:640px){
  #s6 .hero-cta{margin-top:20px;gap:8px}
  #s6 .hero-cta .btn.lg{height:46px;padding:0 18px;font-size:14px;flex:1 1 0;justify-content:center}
}
@media (max-width:420px){
  #s6 .hero-cta{flex-direction:column}
  #s6 .hero-cta .btn.lg{width:100%}
}

/* ══ 「지금 크루 목록에 보이나」 (2026-08-19 · 34단계) ═══════════
   [stated] hong: "노출에 체크했어요 ... 크루는 지금 0이 아니고 2명이어야해요"

   ★ 승인 딱지(「확인 필요」)를 떼고, 사람이 진짜 알고 싶은 한 가지만 적습니다 —
     <지금 목록에 보이는가.> 짐작하게 두면 「했는데 왜 안 되냐」가 반복됩니다. */
.rm-live{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:800;letter-spacing:-.02em;
  margin-left:8px;vertical-align:2px;
}
.rm-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rm-live.on{background:#EAF6EE;color:#1D7A4E;border:1px solid #BFE3CD}
.rm-live.off{background:var(--field);color:var(--mute);border:1px solid var(--line)}
.rm-livewhy{margin:11px 0 0;font-size:12.5px;color:var(--mute);line-height:1.75}
.rm-livewhy.on{color:var(--body)}
.rm-livewhy a{color:var(--brand);font-weight:700}
.rm-livewhy code{
  background:var(--field);border-radius:5px;padding:2px 7px;font-size:11.5px;
  font-family:'SF Mono',Consolas,monospace;color:var(--body);word-break:break-all;
}

/* ══════════════════════════════════════════════════════════
   공개 프로필 = 미니홈피 (2026-08-19 · 34단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "미니홈피처럼 링크를 보내면 내 정보만 보여주는 페이지여야해요"

   ★ 전에는 「레퍼런스 이력」만 있었습니다.
     남에게 보내는 주소라면 <내가 만든 것>이 먼저 보여야 합니다 —
     이력은 글이고, 프로젝트는 결과물입니다.
   ══════════════════════════════════════════════════════════ */

#s40 .pf-sec{margin-top:34px}
#s40 .pf-sech{display:flex;align-items:baseline;gap:9px;margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
#s40 .pf-sech h2{margin:0;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
#s40 .pf-secn{font-size:12px;font-weight:700;color:var(--mute)}
#s40 .pf-secmore{margin-left:auto;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none}
#s40 .pf-secmore:hover{color:var(--brand-dk)}

/* 올린 프로젝트 */
#s40 .pf-prj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#s40 .pf-pc{display:flex;flex-direction:column;min-width:0;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;
  transition:border-color .14s, box-shadow .14s, transform .14s}
#s40 .pf-pc:hover{border-color:var(--brand-lt2);box-shadow:0 6px 18px rgba(22,23,29,.07);
  transform:translateY(-2px)}
#s40 .pf-pth{display:block;aspect-ratio:16/10;background:var(--field);overflow:hidden;position:relative}
#s40 .pf-pth img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
#s40 .pf-pth.ph::after{content:attr(data-l);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;padding:0 10px;text-align:center;
  font-size:12px;font-weight:700;color:var(--mute);line-height:1.4}
#s40 .pf-pc b{display:block;padding:11px 12px 0;font-size:13px;font-weight:800;color:var(--ink);
  letter-spacing:-.025em;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s40 .pf-pc i{display:block;padding:5px 12px 12px;font-style:normal;font-size:11.5px;color:var(--mute)}

/* 커뮤니티에서 */
#s40 .pf-posts{display:flex;flex-direction:column}
#s40 .pf-po{display:flex;align-items:center;gap:9px;padding:11px 2px;min-width:0;
  border-bottom:1px solid var(--line);text-decoration:none}
#s40 .pf-po:last-child{border-bottom:0}
#s40 .pf-po:hover b{color:var(--brand)}
#s40 .pf-po .pl-bdot{flex:none;background:var(--bc,var(--mute))}
#s40 .pf-pob{flex:none;font-size:11.5px;font-weight:800;color:var(--bc,var(--mute))}
#s40 .pf-po b{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s40 .pf-po em{flex:none;font-style:normal;font-size:11.5px;color:var(--mute)}

/* 주소 보내기 */
#s40 .pf-share{
  margin-top:30px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--brand-lt);border:1px solid var(--brand-lt2);
}
#s40 .pf-share b{display:block;font-size:12.5px;font-weight:800;color:#4A38B0}
#s40 .pf-share code{display:block;margin-top:7px;font-size:12.5px;color:#3B2A9E;
  font-family:'SF Mono',Consolas,monospace;word-break:break-all;line-height:1.6}
#s40 .pf-share span{display:block;margin-top:6px;font-size:11.5px;color:#6B5FB8}

@media (max-width:1100px){ #s40 .pf-prj{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
  #s40 .pf-prj{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #s40 .pf-sec{margin-top:26px}
  #s40 .pf-pc b{font-size:12.5px;padding:10px 10px 0}
  #s40 .pf-pc i{padding:4px 10px 10px;font-size:11px}
  #s40 .pf-po b{font-size:12.5px}
  #s40 .pf-po em{display:none}   /* 좁은 화면에서는 시각보다 제목이 먼저입니다 */
}

/* ══════════════════════════════════════════════════════════
   법적 문서 — 이용약관 · 개인정보처리방침 (2026-08-19 · 34단계)
   ──────────────────────────────────────────────────────────
   ★ 이런 문서는 <안 읽히려고> 만든 것처럼 생긴 경우가 많습니다.
     빽빽한 회색 글씨에 줄간격이 좁으면 사람은 첫 줄에서 포기합니다.
     읽을 수 있게 만들어 두는 것도 약속을 지키는 방법입니다.
   ══════════════════════════════════════════════════════════ */

.doc-when{margin:10px 0 0;font-size:12.5px;color:var(--mute);font-weight:600}
.doc{max-width:800px;margin-top:30px}
.doc-a{padding:0 0 26px}
.doc-a + .doc-a{padding-top:26px;border-top:1px solid var(--line)}
.doc-a h2{
  margin:0 0 12px;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
}
.doc-a p{margin:0 0 11px;font-size:14px;color:var(--body);line-height:1.95}
.doc-a p:last-child{margin-bottom:0}
.doc-a b{color:var(--ink);font-weight:700}
.doc-a a{color:var(--brand);font-weight:700}
.doc-ol{margin:0 0 11px;padding-left:0;list-style:none;counter-reset:dl}
.doc-ol li{
  counter-increment:dl;position:relative;padding:7px 0 7px 30px;
  font-size:14px;color:var(--body);line-height:1.9;
}
.doc-ol li::before{
  content:counter(dl);position:absolute;left:0;top:11px;
  width:20px;height:20px;border-radius:6px;background:var(--field);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--mute);
}
.doc-dim{color:var(--mute);font-size:12.5px}

.doc-note{
  max-width:800px;margin:6px 0 0;padding:16px 18px;border-radius:var(--r-md);
  background:var(--wait-lt,#FFF8E8);border:1px solid var(--wait-line,#F2E0B4);
  font-size:13px;color:#6B5417;line-height:1.8;
}
.doc-note b{color:#4A3A08}
.doc-note a{color:#5B45C8;font-weight:700}

@media (max-width:720px){
  .doc-a h2{font-size:15px}
  .doc-a p,.doc-ol li{font-size:13.5px;line-height:1.9}
  .doc-a{padding-bottom:22px}
  .doc-a + .doc-a{padding-top:22px}
}

/* ══ 크루 카드 · 글 공유 자리 (2026-08-19 · 35단계) ═══════════
   [stated] hong: "본래화면은 두번째 디자인이 아니었습니다"
                  "커뮤니티의 공유하기를 위로 올려주세요"

   ★ 크루 카드가 이상해 보인 이유 두 가지
     ① 소개가 비어 있어도 min-height:38px 로 자리를 잡아 뒀습니다 → 회색 구멍
     ② 좁은 화면에서 한 칸이 되어 카드 하나가 화면 폭을 통째로 먹었습니다 */
#s6 .v4-mk-bio.none{
  min-height:0;color:var(--mute);font-size:11.5px;font-style:normal;opacity:.85;
}
#s6 .v4-mk-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#s6 .v4-mk-foot b{color:var(--ink);font-weight:800}
#s6 .v4-mk-foot .dim{color:#B9BCCB;font-weight:600}
/* ★ 한 칸으로 떨어뜨리지 않습니다 — 크루가 한둘일 때 특히 이상해 보입니다 */
@media (max-width:1180px){ #s6 .v4-grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important} }

/* ★ 2026-08-24 — 크루 자리를 한 줄(4명)에서 두 줄(8명)로 늘렸습니다.
     [stated] hong: "메인에 노출되는 숫자가 너무 적어요"
     프로젝트와 같은 원칙 — 열 수가 바뀌면 <딱 떨어지는 개수>만 남깁니다.
     4열 8명(2줄) · 3열 6명(2줄) · 2열 8명(4줄) · 1열 4명 */
@media (max-width:1400px) and (min-width:1181px){
  #s6 .v4-mk:nth-child(n+7){display:none}          /* 3열 → 6명 */
}
@media (max-width:560px){
  #s6 .v4-mk:nth-child(n+5){display:none}          /* 1열 → 4명 */

  /* ★ 「일 받을 수 있어요」 가 「구직 중」보다 길어서, 좁은 화면에서 <이름을 밀어냈습니다>.
       배지를 아랫줄로 내려 이름이 온전히 보이게 합니다.
       말을 화면마다 다르게 쓰는 대신(그게 더 헷갈립니다) 자리를 바꿉니다. */
  #s6 .v4-mk-head{flex-wrap:wrap}
  #s6 .v4-mk-id{flex:1 1 calc(100% - 43px)}
  #s6 .v4-mk-head .v4-open{order:9;margin-left:43px;height:20px;font-size:10.5px;padding:0 8px}
}
@media (max-width:520px){
  #s6 .v4-grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  #s6 .v4-mk-body{padding:11px 11px 12px}
  #s6 .v4-mk-av{width:34px!important;height:34px!important;border-radius:10px}
  #s6 .v4-mk-id b{font-size:12.5px}
  #s6 .v4-mk-id small{font-size:10.5px}
  #s6 .v4-mk-bio{font-size:11.5px;margin-top:8px;min-height:0}
  #s6 .v4-mk-foot{font-size:10.5px;gap:8px;margin-top:9px;padding-top:8px}
}

/* 글 공유 — 제목 바로 아래 */
#s4 .po-share-top{
  display:flex;justify-content:flex-end;margin:-4px 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
#s4 .po-share-top .sh-bar{margin:0}
@media (max-width:640px){
  #s4 .po-share-top{justify-content:flex-start;margin-top:2px}
}

/* ══════════════════════════════════════════════════════════
   프로젝트 빠른 등록 — #s20 (2026-08-19 · 35단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "포폴등록 이 프로세스가 너무 어렵다. 심플하게 갑시다."

   ★ 전에는 3단계 · 칸 열아홉 개 · 썸네일을 직접 만들어 올려야 끝났습니다.
     이제 <주소 한 칸>으로 시작하고, 이름·그림은 주소에서 가져옵니다.
     나머지는 나중에 — 안 올리는 것보다 덜 채우고 올리는 게 낫습니다.
   ══════════════════════════════════════════════════════════ */

#s20 .qk{max-width:660px;margin-top:26px}
#s20 .qk-step{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:20px 22px;margin:0 0 14px;
}
#s20 .qk-step.on{border-color:var(--brand-lt2);box-shadow:0 6px 20px rgba(124,92,252,.08)}
#s20 .qk-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#s20 .qk-h i{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:12px;font-weight:800;
}
#s20 .qk-h b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.03em}

#s20 .qk-url{display:flex;gap:8px}
#s20 .qk-url .ws-in{flex:1;min-width:0}
#s20 .qk-url .btn{flex:none;white-space:nowrap}
#s20 .qk-hint{margin:9px 0 0;font-size:12px;color:var(--mute);line-height:1.7}
#s20 .qk-hint b{color:var(--body);font-weight:700}

#s20 .qk-lb{
  display:block;margin:16px 0 6px;font-size:12.5px;font-weight:800;color:var(--ink);
}
#s20 .qk-lb em{font-style:normal;font-size:11px;font-weight:600;color:var(--mute);margin-left:6px}
#s20 .qk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

#s20 .qk-kind{display:flex;gap:8px}
#s20 .qk-kb{
  flex:1;height:42px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--body);cursor:pointer;transition:.13s;
}
#s20 .qk-kb:hover{border-color:var(--line-2)}
#s20 .qk-kb.on{border-color:var(--brand);background:var(--brand-lt);color:#4A38B0;font-weight:800}

/* 주소에서 가져온 그림 */
#s20 .qk-thumb{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--field);
}
#s20 .qk-thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center top}
#s20 .qk-thumb span{
  display:block;padding:9px 13px;font-size:11.5px;color:var(--mute);background:#fff;
  border-top:1px solid var(--line);
}
#s20 .qk-nothumb{
  padding:16px;border:1px dashed var(--line-2);border-radius:var(--r-md);
  background:var(--soft);font-size:12.5px;color:var(--mute);text-align:center;
}
#s20 .qk-nothumb b{color:var(--body)}

#s20 .qk-go{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
#s20 .qk-go .btn.lg{height:48px;padding:0 30px;font-size:15px;font-weight:800}
#s20 .qk-go span{font-size:12px;color:var(--mute);line-height:1.7;flex:1;min-width:160px}

#s20 .qk-later{
  margin-top:6px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--soft);border:1px solid var(--line);
}
#s20 .qk-later b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
#s20 .qk-later p{margin:7px 0 0;font-size:12.5px;color:var(--mute);line-height:1.8}
#s20 .qk-later p b{display:inline;color:var(--body)}

#s20 .ws-bad{margin:6px 0 0;font-size:12px;color:#B4342F;font-weight:700}

@media (max-width:640px){
  #s20 .qk-step{padding:16px 15px}
  #s20 .qk-url{flex-direction:column}
  #s20 .qk-url .btn{width:100%;justify-content:center}
  #s20 .qk-two{grid-template-columns:1fr;gap:0}
  #s20 .qk-go .btn.lg{width:100%;justify-content:center}
}

/* ══ 자주 묻는 질문 — 줄 맞춤 (2026-08-19 · 36단계) ═══════════
   [stated] hong: "빈공간의 여백이 제목과 맞지 않아"
   제목을 감싸는 칸 안으로 넣었습니다(index.php). 여백만 다듬습니다. */
.ws-faq{margin-top:34px}
.ws-faq-in{padding-top:34px}
.ws-faq h2{margin:0 0 6px}
.ws-faq-kicker{margin:0 0 7px}
.ws-faq-it:first-of-type{border-top:1px solid var(--line-2,#E7E7EF);margin-top:16px}
@media (max-width:720px){
  .ws-faq{margin-top:24px}
  .ws-faq-in{padding:26px 16px 32px}
  .ws-faq h2{font-size:19px;letter-spacing:-.035em;line-height:1.35}
  .ws-faq-it > summary{padding:13px 0;font-size:14px;line-height:1.5}
  .ws-faq-it > p{padding:0 0 15px;font-size:13px}
  .ws-faq-it:first-of-type{margin-top:13px}
}

/* ══════════════════════════════════════════════════════════
   수상 기록 (2026-08-19 · 36단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "웹어워드 수상뱃지 같은거 알지? 그런거말이야"

   ★ 이건 크루딧이 매기는 등급이 아닙니다. 그래서 <일부러> 이렇게 둡니다.
     · 금·은·동 같은 등급 색을 쓰지 않습니다. 한 가지 색만 씁니다.
     · 배지가 카드에서 <가장 눈에 띄는 것>이 되지 않게 작게 둡니다.
       제목보다 커지는 순간 그건 「좋은 프로젝트」 표시가 됩니다.
     · 배지 글자에 <어디서 받았는지>가 들어갑니다 — 「수상작」이라고만 쓰지 않습니다.
   ══════════════════════════════════════════════════════════ */

.aw-b{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;
  border-radius:var(--r-pill);white-space:nowrap;
  background:#F5F1E6;border:1px solid #E6DCC2;color:#7A6320;
  font-size:11px;font-weight:800;letter-spacing:-.02em;
}
.aw-b svg{width:13px;height:13px;flex:none}
.aw-b i{font-style:normal;font-weight:700;opacity:.75;margin-left:1px}

/* 아카이브 카드 — 제목 위 작은 줄 */
#s3 .v4-aaw{margin:0 0 5px}
#s3 .v4-aaw .aw-b{height:19px;padding:0 7px 0 6px;font-size:10px}
#s3 .v4-aaw .aw-b svg{width:11px;height:11px}

/* 프로젝트 상세 — 옆기둥 패널 */
.aw-panel h4{display:flex;align-items:center;gap:8px}
.aw-edit{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand);text-decoration:none}
.aw-edit:hover{color:var(--brand-dk)}

.aw-list{display:flex;flex-direction:column}
.aw-row{
  display:flex;align-items:flex-start;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--line);
}
.aw-row:last-child{border-bottom:0}
.aw-row.sm{padding:9px 0}
.aw-ic{
  flex:none;width:30px;height:30px;border-radius:9px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:#F5F1E6;color:#7A6320;
}
.aw-ic svg{width:17px;height:17px}
.aw-row.sm .aw-ic{width:26px;height:26px;border-radius:8px}
.aw-row.sm .aw-ic svg{width:15px;height:15px}
.aw-tx{min-width:0;flex:1}
.aw-tx b{display:block;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.45}
.aw-row.sm .aw-tx b{font-size:12.5px}
.aw-tx span{display:block;margin-top:2px;font-size:11.5px;color:var(--mute)}
.aw-tx a{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--brand)}
.aw-row form{flex:none}

/* 등록 화면의 접이식 수상 칸 */
#s20 .qk-aw{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);
}
#s20 .qk-aw > summary{
  padding:12px 14px;cursor:pointer;font-size:13px;font-weight:800;color:var(--body);
  list-style:none;display:flex;align-items:center;gap:8px;
}
#s20 .qk-aw > summary::-webkit-details-marker{display:none}
#s20 .qk-aw > summary::before{
  content:"＋";font-size:14px;color:var(--mute);font-weight:800;
}
#s20 .qk-aw[open] > summary::before{content:"－"}
#s20 .qk-aw > summary em{
  font-style:normal;font-size:11px;font-weight:700;color:var(--mute);
  background:#fff;border-radius:999px;padding:2px 8px;
}
#s20 .qk-awin{padding:0 14px 14px}
#s20 .qk-three{display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:10px}
#s20 .qk-awin .qk-lb{margin-top:0}
#s20 .qk-awnote{margin:10px 0 0;font-size:11.5px;color:var(--mute);line-height:1.75}
#s20 .qk-awnote b{color:var(--body)}

@media (max-width:640px){
  #s20 .qk-three{grid-template-columns:1fr;gap:0}
}

/* 직군을 아직 안 정한 본인에게만 보이는 안내 (2026-08-19) */
#s40 .pf-jobset{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:9px 14px;border-radius:var(--r-sm);text-decoration:none;
  background:var(--brand-lt);border:1px dashed var(--brand-lt2);
  font-size:12.5px;font-weight:800;color:#4A38B0;
}
#s40 .pf-jobset span{font-size:11px;font-weight:600;color:#6B5FB8;letter-spacing:-.01em}
#s40 .pf-jobset:hover{background:#EDE7FF;border-style:solid}

/* ══════════════════════════════════════════════════════════
   읽는 글자를 한 눈금 키웁니다 (2026-08-19 · 37단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "전체적인 폰트를 1포인트씩 살짝씩 키우는건 어떨까?"

   ★ <전부>를 키우지 않습니다. 이 사이트에는 키를 px 로 못 박아 둔 자리가
     1,228곳 있습니다 — 단추 · 알약 · 배지 · 왼쪽 메뉴가 그렇습니다.
     그 안의 글자를 키우면 글자가 상자를 뚫거나 잘립니다.
     그래서 <읽는 글자>만 1px 올립니다. 누르는 것은 그대로 둡니다.

   ★ 줄 간격은 손대지 않습니다. 배수(1.7 같은 것)로 잡혀 있어서
     글자가 커지면 줄 간격도 저절로 같이 커집니다.

   ※ 올린 뒤 12개 화면 × 5가지 폭에서 <글자가 잘리는 곳>을 기계로 훑었습니다.
   ══════════════════════════════════════════════════════════ */

/* ── 공통 설명문 ── */
.lead{font-size:15px}
.ar-foot p{font-size:13.5px}

/* ── 홈 ── */
#s6 .v4-hero p,.v4-hero p{font-size:15.5px}
#s6 .v4-wayp{font-size:13.5px}
/* 2026-08-24 — 「박스는 큰데 글씨가 작다」 → 한 단 올립니다. `> b` 는 제목만 겨눕니다. */
#s6 .hm-post > b{font-size:16.5px}
#s6 .hm-pm .hm-pw{font-size:13.5px}
#s6 .v4-n-cap b{font-size:14px}
#s6 .v4-mk-bio{font-size:13px}
#s6 .v4-cta-t p{font-size:14.5px}
.ws-faq-it > summary{font-size:16.5px}
.ws-faq-it > p{font-size:15px}

/* ── 아카이브 ── */
#s3 .v4-al1 b{font-size:14.5px}
#s3 .v4-acrd{font-size:12px}
#s3 .v4-al2{font-size:12px}

/* ── 커뮤니티 ── */
#s4 .pl-t{font-size:19px}
#s4 .pl-s{font-size:14px}
#s4 .pl-hd{font-size:13px}
#s4 .po-body,.po-body{font-size:16px}
#s4 .po-title,.po-title{font-size:26px}

/* ── 프로젝트 ── */
.pt-body{font-size:14.5px}
.ax-selfnote{font-size:12px}
.aw-tx b{font-size:13.5px}
.aw-tx span{font-size:12.5px}

/* ── 회사 · 크루 ── */
.co-cbio{font-size:13.5px}
.pf-hline{font-size:15.5px}
.pf-hbio{font-size:14px}
.pf-rscope{font-size:15px}
#s40 .pf-pc b{font-size:14px}
#s40 .pf-po b{font-size:14.5px}

/* ── AI 도구 ── */
#s80 .ait-nm{font-size:16px}
#s80 .ait-wt{font-size:13.5px}

/* ── 약관 · 처리방침 ── */
.doc-a p,.doc-ol li{font-size:15px}

/* ── 좁은 화면 ──
   좁은 화면에서는 이미 한 톤 줄여 두었습니다. 그 값에서 다시 1px 올립니다.
   (여기서 규칙을 안 쓰면, 위의 큰 값이 모바일 규칙을 덮어써서 글자가 너무 커집니다) */
@media (max-width:720px){
  #s4 .pl-t{font-size:17.5px}
  #s4 .pl-s{font-size:13.5px}
  #s4 .pl-hd{font-size:12.5px}
  #s80 .ait-nm{font-size:14.5px}
  #s80 .ait-wt{font-size:12.5px}
  #s40 .pf-pc b{font-size:13.5px}
  #s40 .pf-po b{font-size:13.5px}
  .ws-faq-it > summary{font-size:15px}
  .ws-faq-it > p{font-size:14px}
}
@media (max-width:520px){
  #s6 .hm-post > b{font-size:14.5px}
  #s6 .v4-mk-bio{font-size:12.5px}
}
@media (max-width:640px){
  .po-title{font-size:22px}
}

/* ══════════════════════════════════════════════════════════
   수상 표 — 썸네일 오른쪽 위 (2026-08-19 · 38단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "썸네일 오른쪽 상단에 상 표기해줘 텍스트말고 이미지어때?"

   ★ 상 종류와 상관없이 <똑같은 표> 하나만 씁니다.
     금·은·동으로 나누는 순간 크루딧이 줄을 세우는 것이 됩니다.
   ★ 사진 위에 얹히므로 흰 테를 한 겹 두르고 그림자를 깝니다 —
     밝은 사진에서도 어두운 사진에서도 보여야 합니다.
   ★ 무슨 상인지는 <손을 올리면> 글자로 나옵니다. 그림만 있으면
     「좋은 것」이라는 느낌만 남고 무슨 상인지는 모릅니다.
   ══════════════════════════════════════════════════════════ */

.aw-seal{
  position:absolute;right:8px;top:8px;z-index:4;
  display:block;line-height:0;pointer-events:auto;
  filter:drop-shadow(0 2px 5px rgba(22,23,29,.30));
  transition:transform .16s;
}
.aw-seal svg{display:block}
.v4-ac:hover .aw-seal,.v4-n-card:hover .aw-seal,.pf-pc:hover .aw-seal{transform:scale(1.06)}

/* 두 건 이상이면 개수를 작게 */
.aw-seal-n{
  position:absolute;right:-3px;bottom:2px;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:#6E541A;color:#fff;border:1.5px solid #fff;
  font-style:normal;font-size:10px;font-weight:800;line-height:13px;text-align:center;
}

/* 저장(북마크) 단추도 오른쪽 위입니다 — 표가 있으면 왼쪽으로 비켜 줍니다 */
.v4-acw.has-aw .pv-save,.v4-acw.has-aw .pv-savef{right:50px}

@media (max-width:720px){
  .aw-seal{right:6px;top:6px}
  .aw-seal svg{width:24px;height:29px}
  .aw-seal-n{min-width:14px;height:14px;font-size:9px;line-height:11px}
  .v4-acw.has-aw .pv-save,.v4-acw.has-aw .pv-savef{right:38px}
}

/* ══ 누가 만들었나 (2026-08-20 · 39단계) ══════════════════════
   [stated] hong: "일반인대 전체 작업자 통계 하나 넣어도 좋을것같아"
   ★ AI 5축 색과 겹치지 않는 색을 씁니다. 겹치면 한 화면에서 두 축이 섞여 보입니다. */

#s6 .st-sub2,.st-sub2{
  margin:22px 0 0;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
}
.st-rdot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;vertical-align:1px;flex:none;
}
/* 교차표 줄은 오른쪽 글이 길어집니다(「40건 · 비전공 30%」) —
   왼쪽 이름 칸에 색점이 붙어 넓어지기도 해서, 이 구역만 칸을 다시 잡습니다.
   ※ 원래 66px 이라 오른쪽 글자가 잘려 나갔습니다. */
.st-sub2 ~ .st-rows .st-row{grid-template-columns:104px minmax(0,1fr) 118px}
.st-rn em{font-style:normal;color:#C0397A;font-weight:800}
@media (max-width:640px){
  .st-sub2 ~ .st-rows .st-row{grid-template-columns:1fr;gap:5px}
  .st-sub2 ~ .st-rows .st-rn{text-align:left}
}
/* 누를 수 없는 카드(통계용)는 손 모양이 나오지 않게 */
.st-now > div.st-card{cursor:default}

/* 등록 화면 — 누가 만들었나 (2026-08-20)
   ★ 셋을 같은 크기·같은 색으로 둡니다. 하나만 크거나 진하면 「그게 정답」으로 읽힙니다. */
#s20 .qk-maker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px}
#s20 .qk-mk{
  display:block;padding:11px 12px;cursor:pointer;text-align:left;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:.14s;
}
#s20 .qk-mk:hover{border-color:var(--line-2);background:var(--soft)}
#s20 .qk-mk:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
#s20 .qk-mk input{position:absolute;opacity:0;width:0;height:0}
#s20 .qk-mk b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s20 .qk-mk:has(input:checked) b{color:#4A38B0}
#s20 .qk-mk span{display:block;margin-top:3px;font-size:11px;color:var(--mute);line-height:1.6}
@media (max-width:640px){
  #s20 .qk-maker{grid-template-columns:1fr;gap:6px}
  #s20 .qk-mk span{display:none}   /* 좁은 화면에서는 이름만 — 설명은 손 올리면 나옵니다 */
}

/* ══════════════════════════════════════════════
   관리자 · 접속 통계 (admin/visits.php) — 2026-08-20
   ── ★ 관리자 본문은 「흰 바탕」입니다. 위 검은 띠와 왼쪽 메뉴만 어둡습니다.
      처음에 어두운 색으로 짰다가 글씨가 하얀 종이에 하얗게 찍혀 안 보였습니다.
      그래서 여기서는 본문용 색(--ink · --body · --mute · --line)만 씁니다.
   ── 막대는 전부 CSS 만으로 그립니다. 바깥에서 가져오는 그림·스크립트가 없습니다.
   ══════════════════════════════════════════════ */

/* 오늘 — 큰 숫자 네 칸 */
.vs-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vs-b{padding:15px 16px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff}
.vs-b.ai{border-color:var(--brand-lt2);background:var(--brand-lt)}
.vs-bn{display:block;font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.04em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.vs-b.ai .vs-bn{color:#4A38B0}
.vs-bn i{font-style:normal;font-size:13px;font-weight:700;color:var(--mute);margin-left:3px;
  letter-spacing:0}
.vs-b b{display:block;margin-top:7px;font-size:12.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em}
.vs-bd{display:block;margin-top:4px;font-size:11px;font-weight:600;color:var(--mute);line-height:1.6}
.vs-bd.up{color:#2A7A4B}
.vs-bd.dn{color:#C2334D}
@media (max-width:900px){ .vs-big{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 휴대폰에서도 두 칸씩 — 한 줄에 하나면 화면이 끝없이 길어집니다.
   [stated] hong: 모바일에서는 두 줄씩 나오게 */
@media (max-width:460px){
  .vs-big{gap:8px}
  .vs-b{padding:12px 12px 11px}
  .vs-bn{font-size:23px}
  .vs-bn i{font-size:11px}
  .vs-b b{font-size:11.5px;margin-top:5px}
  .vs-bd{font-size:10.5px}
}

/* 기간 고르기 */
.vs-tabs{display:flex;gap:6px;margin:18px 0 0;flex-wrap:wrap}
.vs-tabs a{padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  font-size:12px;font-weight:700;color:var(--body);text-decoration:none;letter-spacing:-.01em}
.vs-tabs a:hover{border-color:var(--brand);color:var(--brand)}
.vs-tabs a.on{border-color:var(--brand);background:var(--brand);color:#fff}

/* 날마다 — 세로 막대 */
.vs-cols{display:flex;align-items:flex-end;gap:2px;height:132px;padding:0 2px;
  border-bottom:1px solid var(--line-2)}
.vs-col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;cursor:default}
.vs-col i{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#9C82FF 0%,#7C5CFC 100%);transition:.14s}
.vs-col:hover i{background:linear-gradient(180deg,#7C5CFC 0%,#5B41C4 100%)}
.vs-colx{display:flex;justify-content:space-between;gap:8px;margin-top:8px;
  font-size:11px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.vs-colx span:nth-child(2){color:var(--body);font-weight:700}
@media (max-width:560px){ .vs-cols{height:104px} }

/* 어느 채널로 — 가로 띠 + 범례 */
.vs-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--field)}
.vs-bar > span{display:block;height:100%;min-width:2px}
.vs-chs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.vs-ch{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-soft)}
.vs-ch i{display:block;width:18px;height:4px;border-radius:999px}
.vs-ch b{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.vs-ch span{font-size:11.5px;font-weight:700;color:var(--body);font-variant-numeric:tabular-nums}
.vs-ch em{font-style:normal;color:var(--mute);font-weight:600;margin-left:4px}
@media (max-width:820px){ .vs-chs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:460px){ .vs-chs{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 목록형 막대 (많이 본 화면 · AI 가 읽어 간 화면) */
.vs-rows{display:flex;flex-direction:column;gap:6px}
.vs-row{display:grid;grid-template-columns:minmax(0,1fr) 160px 64px;align-items:center;gap:10px}
.vs-rk{min-width:0;font-size:12px;font-weight:700;color:var(--body);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'SF Mono',Consolas,'D2Coding',monospace;letter-spacing:0}
.vs-rk:hover{color:var(--brand);text-decoration:underline}
.vs-rbar{display:block;height:8px;border-radius:999px;background:var(--field);overflow:hidden}
.vs-rbar i{display:block;height:100%;min-width:3px;border-radius:999px;background:var(--brand)}
.vs-rn{text-align:right;font-size:11.5px;font-weight:700;color:var(--body);
  font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .vs-row{grid-template-columns:minmax(0,1fr) 56px;row-gap:5px}
  .vs-rbar{grid-column:1/-1;order:3}
}

/* AI 구역 — 크루딧에서 제일 중요한 칸이라 테두리를 살짝 다르게 둡니다 */
.vs-aisec{border:1px solid var(--brand-lt2);border-radius:var(--r-lg);padding:18px 18px 20px;
  background:linear-gradient(180deg,#FBFAFF 0%,#fff 120px)}
.vs-aisec > .adm-sec-h{margin-top:0}
.vs-h4{margin:0 0 10px;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.025em}
.vs-h4 span{margin-left:7px;font-size:11px;font-weight:600;color:var(--mute);letter-spacing:-.01em}
@media (max-width:560px){ .vs-aisec{padding:14px 13px 16px} }

/* ── 관리자 · 자동 처리 상태 (보안 · 크론) — 2026-08-20 ──
   [stated] hong: "우리는 웹호스팅이라 보안크론 을 할수가 없다는데 어떻게 하지?"
   크론 없이 도는 「웹 크론」의 현재 상태를 네 칸으로 보여 줍니다. */
.tk-state{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tk-s{padding:12px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff}
.tk-s b{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1.3;overflow-wrap:anywhere}
.tk-s span{display:block;margin-top:4px;font-size:11px;font-weight:600;color:var(--mute)}
.tk-s.hot{border-color:#F3CBD5;background:#FDEDF1}
.tk-s.hot b{color:#A8324A}
@media (max-width:820px){ .tk-state{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── 관리자 · 메일 열기 세 단계 — 2026-08-20 ──
   [stated] hong: "이메일 처리 해결합시다 다시 설명해주세요"
   화면에 필요한 건 다 있었는데 「지금 어디까지 했는지」가 안 보였습니다.
   ①②③ 을 맨 위에 놓고, 실제로 마지막에 켜야 하는 스위치를 맨 아래로 내렸습니다. */
.ml-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ml-step{display:flex;flex-direction:column;gap:2px;padding:14px 15px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff}
.ml-step i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--field);color:var(--mute);font-style:normal;font-size:12px;font-weight:800;
  margin-bottom:5px}
.ml-step b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.025em}
.ml-step span{font-size:11.5px;font-weight:600;color:var(--mute)}
.ml-step.now{border-color:var(--brand);background:var(--brand-lt)}
.ml-step.now i{background:var(--brand);color:#fff}
.ml-step.now span{color:#4A38B0;font-weight:700}
.ml-step.done{border-color:#CFE6D9;background:#F4FBF7}
.ml-step.done i{background:#2A7A4B;color:#fff;font-size:13px}
.ml-step.done span{color:#1F5637;font-weight:700}
@media (max-width:700px){ .ml-steps{grid-template-columns:1fr} }

/* 칸 제목 앞의 번호 — 위 ①②③ 과 짝이 맞게 */
.adm-sec-h h3 .ml-n{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--brand-lt);color:#4A38B0;font-size:11.5px;font-weight:800;margin-right:6px;
  vertical-align:2px}

/* 보내는 방법 고르기 — 관리자 본문(흰 바탕)용.
   전에 쓰던 .jb-rd 는 #s11(채용) 안에서만 스타일이 걸려 있어 여기서는 맨 라디오였습니다. */
.ml-rd{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff;transition:.14s}
.ml-rd:hover{border-color:var(--brand)}
.ml-rd input{position:absolute;opacity:0;width:0;height:0}
.ml-rd .rd{flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%;
  border:1.5px solid var(--line-2);background:#fff;transition:.14s}
.ml-rd input:checked ~ .rd{border-color:var(--brand);background:var(--brand);
  box-shadow:inset 0 0 0 3px #fff}
.ml-rd input:focus-visible ~ .rd{outline:2px solid var(--ink);outline-offset:2px}
.ml-rd:has(input:checked){border-color:var(--brand);background:var(--brand-lt)}
.ml-rd span{font-size:12.5px;color:var(--body);line-height:1.75}
.ml-rd b{color:var(--ink);font-weight:800}

/* 「서버가 직접 보냅니다」를 고르면 메일 계정 칸은 접습니다 —
   안 채워도 되는 칸이 보이면 채워야 하는 줄 압니다. */
.adm-form:has(input[name="mail_way"][value="server"]:checked) .ml-smtp{display:none}

/* ── 관리자 · 정보 가져오기 진단 (보안 · 크론) — 2026-08-20 ──
   [stated] hong: "정보크롤링이 잘 되고 있나요? 손봐야할것같아요"
   「안 가져와진다」만으로는 손쓸 데가 없어서, 어디에서 막혔는지 한 줄씩 보여 줍니다. */
.lp-probe{margin-top:14px;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.lp-probe.ok{border-color:#CFE6D9}
.lp-probe.ng{border-color:#F3CBD5}
.lp-ph{padding:11px 15px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.lp-probe.ok .lp-ph{background:#EAF6EE;border-bottom-color:#CFE6D9}
.lp-probe.ng .lp-ph{background:#FDEDF1;border-bottom-color:#F3CBD5}
.lp-ph b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.025em}
.lp-probe.ok .lp-ph b{color:#12402A}
.lp-probe.ng .lp-ph b{color:#8E2038}
.lp-ph span{display:block;margin-top:2px;font-size:11.5px;color:var(--mute);
  font-family:'SF Mono',Consolas,monospace;overflow-wrap:anywhere}
.lp-steps{list-style:none;margin:0;padding:6px 15px 12px}
.lp-steps li{display:grid;grid-template-columns:20px 130px minmax(0,1fr);align-items:baseline;
  gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.lp-steps li:last-child{border-bottom:0}
.lp-steps i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font-style:normal;font-size:10px;font-weight:800;align-self:center}
.lp-steps li.y i{background:#EAF6EE;color:#1F6B41}
.lp-steps li.n i{background:#FDEDF1;color:#A8324A}
.lp-steps b{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.lp-steps span{font-size:12px;color:var(--body);line-height:1.7;overflow-wrap:anywhere}
.lp-steps li.n span{color:#8E2038}
.lp-got{padding:0 15px 14px}
.lp-got dl{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 12px;
  padding:12px 14px;background:var(--bg-soft);border-radius:var(--r-sm)}
.lp-got dt{font-size:11.5px;font-weight:800;color:var(--mute)}
.lp-got dd{font-size:12.5px;color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
.lp-got dd i{font-style:normal;color:var(--mute)}
@media (max-width:620px){
  .lp-steps li{grid-template-columns:20px minmax(0,1fr);row-gap:2px}
  .lp-steps span{grid-column:2}
}

/* ── 관리자 · 소셜 채널 — 2026-08-20 ──
   방문자 의견: "웹사이트에 소셜 미디어 링크가 없어 아쉽습니다."
   푸터에 있던 동그라미 셋은 아무 데도 연결되지 않은 시안용 도형이었습니다. */
.soc-prev{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--dark);flex-wrap:wrap}
.soc-pl{font-size:11.5px;font-weight:700;color:#8B8FA0}
.soc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.soc-row{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:#fff}
.soc-row.on{border-color:var(--brand-lt2);background:#FCFBFF}
.soc-row.ng{border-color:#F3CBD5;background:#FDEDF1}
.soc-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--field);
  display:grid;place-items:center;color:var(--body);margin-top:2px}
.soc-row.on .soc-ic{background:var(--brand-lt);color:#4A38B0}
.soc-row.ng .soc-ic{background:#FBE0E7;color:#A8324A}
.soc-ic svg{width:17px;height:17px}
.soc-in{flex:1;min-width:0}
.soc-in .adm-lb{display:block;margin-bottom:5px}
.soc-err{display:block;margin-top:5px;font-size:11.5px;font-weight:700;color:#A8324A;line-height:1.6}
@media (max-width:820px){ .soc-grid{grid-template-columns:1fr} }

/* 푸터의 진짜 소셜 링크 — 시안의 죽은 동그라미(.fsoc i)를 <a> 로 바꿨습니다.
   ★ 관리자 미리보기(.soc-prev)도 같은 규칙을 씁니다. 안 그러면 미리보기가 텅 빕니다. */
.foot .fsoc a,.soc-prev .fsoc a{width:32px;height:32px;border-radius:50%;background:var(--dark-2);
  display:grid;place-items:center;color:#8B8FA0;transition:.14s}
.foot .fsoc a:hover,.soc-prev .fsoc a:hover{background:var(--brand);color:#fff}
.foot .fsoc a svg,.soc-prev .fsoc a svg{width:15px;height:15px}
.foot .fsoc a:focus-visible,.soc-prev .fsoc a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.soc-prev .fsoc{display:flex;gap:8px;flex-wrap:wrap}

/* ── 크루 공개 프로필 · 공유 — 2026-08-20 ──
   [stated] hong: "사람을 데려오는쪽으로 이 홈페이지를 링크걸어 공유해서 데려오게 하는 부분"
   ★ 여기가 크루딧에 사람을 데려오는 자리인데 정작 공유 단추가 없었습니다
     (프로젝트·글·채용·회사에는 다 있었는데).
   ★ 아래에 따로 있던 「이 페이지 주소」 칸(.pf-share)도 여기로 합쳤습니다. */
#s40 .pf-shr{margin:16px 0 6px;padding:15px 17px;border:1px solid var(--brand-lt2);
  border-radius:var(--r-md);background:var(--brand-lt)}
#s40 .pf-shl{margin:0 0 11px;font-size:13px;color:#4A38B0;line-height:1.75}
#s40 .pf-shl b{color:#3B2A9E;font-weight:800}
#s40 .pf-shl span{display:block;margin-top:2px;font-size:12px;color:#6B5FB8}
#s40 .pf-shl a{color:#3B2A9E;text-decoration:underline;font-weight:700}
#s40 .pf-shr .sh-bar{margin:0}
#s40 .pf-shu{display:block;margin-top:11px;padding-top:10px;border-top:1px solid #DDD5FA;
  font-size:12px;color:#5B4BC0;font-family:'SF Mono',Consolas,monospace;
  word-break:break-all;line-height:1.65}
@media (max-width:560px){ #s40 .pf-shr{padding:13px 14px} }

/* ══════════════════════════════════════════════
   크루딧 알리기 — 사이트 자체를 공유하는 칸 (2026-08-20 · 46단계)
   [stated] hong: "이 홈페이지자체를 공유하는 공유기능이 있어야해요"

   ★ 화면마다 붙는 공유(share_bar)와 하는 일이 다릅니다.
     그쪽은 <지금 보는 화면>을, 이쪽은 <크루딧이라는 곳>을 보냅니다.
   ══════════════════════════════════════════════ */

/* ── 홈 · 소개 아래의 큰 칸 ── */
.ws-share{margin:34px 0 0;padding:26px 28px;border:1px solid var(--brand-lt2);
  border-radius:var(--r-lg);background:linear-gradient(180deg,#FBFAFF 0%,#fff 160px)}
.wsh-t h3{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.035em;line-height:1.35}
.wsh-t p{margin-top:6px;font-size:13.5px;color:var(--mute);line-height:1.75}
.ws-share .sh-bar{margin-top:16px}
.wsh-copy{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.wsh-copy pre{margin:0 0 11px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--bg-soft);border:1px solid var(--line);
  font-family:inherit;font-size:13px;color:var(--body);line-height:1.85;
  white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.wsh-cb.ok{border-color:#2A7A4B;color:#1F5637;background:#EAF6EE}
@media (max-width:640px){
  .ws-share{padding:20px 17px;margin-top:26px}
  .wsh-t h3{font-size:16.5px}
  .wsh-copy pre{font-size:12.5px;padding:12px 13px}
}

/* ── 푸터 오른쪽 두 줄 ──
   ★ 두 줄이 하는 일이 다릅니다. 그래서 각각 이름표를 답니다.
       크루딧 알리기 — 크루딧을 <남에게 보냅니다> (데려오는 쪽)
       크루딧 채널   — 크루딧의 <소셜 계정으로 갑니다> (내보내는 쪽)
     이름표가 없으면 똑같이 생긴 동그라미 두 줄로만 보입니다. */
.foot .fright{margin-left:auto;flex:none;display:flex;flex-direction:column;
  align-items:flex-end;gap:9px}
.foot .fshare,.foot .fsocrow{display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;justify-content:flex-end}
.foot .fsh-l{font-size:11px;font-weight:700;color:#797D8E;white-space:nowrap;
  letter-spacing:-.01em;min-width:62px;text-align:right}
.foot .sh-foot{margin:0;gap:5px;flex-wrap:nowrap}
.foot .sh-foot .sh-lb{display:none}
.foot .sh-foot .sh-b{width:30px;height:30px;flex:none;border-radius:50%;
  background:transparent;box-shadow:inset 0 0 0 1px #3A3A46;border:0;color:#8B8FA0}
.foot .sh-foot .sh-b:hover{background:var(--brand);box-shadow:none;color:#fff}
.foot .sh-foot .sh-b svg{width:14px;height:14px}
.foot .sh-foot .sh-cp{width:auto;padding:0 11px;gap:5px}
.foot .sh-foot .sh-cp em{font-style:normal;font-size:11.5px;font-weight:700}
.foot .fsocrow .fsoc{margin-left:0;gap:5px;flex-wrap:nowrap}
/* ★ 좁은 화면에서 .sh-bar 에 밝은 윗줄이 그어집니다 (2569줄).
   어두운 푸터에서는 그 줄이 흰 선으로 떠 보입니다. 여기서만 지웁니다. */
.foot .sh-foot{border-top:0!important;padding-top:0!important;width:auto!important;margin-left:0}
@media (max-width:980px){
  .foot .fright{margin-left:0;align-items:flex-start;width:100%;margin-top:6px}
  .foot .fshare,.foot .fsocrow{justify-content:flex-start;flex-wrap:wrap}
  .foot .fsh-l{text-align:left;min-width:0}
  .foot .sh-foot,.foot .fsocrow .fsoc{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════
   모든 크루 — 명함형 카드 (2026-08-24 · 34단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "모든크루들을 여기와 같지 않게 다른형식으로 하지만
                   이런 내용이 나오도록 보여주세요"

   ★ 그라폴리오는 <그림이 위 · 사람이 아래> 인데, 여기는 반대로
     <사람이 위 · 만든 것이 아래 띠> 입니다. 명함처럼 읽히게 했습니다.
     지금 크루딧에는 썸네일 없는 프로젝트가 많아서, 그림을 앞세우면
     카드가 텅 비어 보입니다. 그래서 사람을 먼저 놓았습니다.

   ★ 좋아요 · 팔로워 · 조회수 · 순위는 <없습니다>.
     같은 자리에 「올린 프로젝트 · 레퍼런스 이력 · 경력」이라는 사실만 적습니다.

   ★ 여기는 흰 종이입니다. 어두운 토큰(.rail/.foot)을 물려받지 않습니다.
   ══════════════════════════════════════════════════════════ */

.cw-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;
}
.cw-c{
  display:block;border:1px solid var(--line);border-radius:var(--r-md,12px);
  background:#fff;overflow:hidden;transition:border-color .16s, box-shadow .16s;
}
.cw-c:hover{border-color:var(--brand-lt2);box-shadow:0 4px 16px rgba(16,17,25,.07)}
.cw-c:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.cw-hd{display:flex;gap:12px;align-items:flex-start;padding:16px 16px 13px}
.cw-hd .cw-av{flex:none;border-radius:14px;overflow:hidden}
.cw-hd .cw-av img{width:100%;height:100%;object-fit:cover;display:block}
.cw-id{flex:1;min-width:0}
.cw-id b{
  display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cw-id p{
  margin-top:2px;font-size:12px;font-weight:700;color:var(--brand-dk);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cw-id small{
  display:block;margin-top:7px;font-size:11.5px;line-height:1.6;color:var(--mute);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 사실 세 칸 — 점수가 아니라 이력입니다 */
.cw-fx{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cw-fx div{flex:1;min-width:0;padding:10px 6px;text-align:center;border-right:1px solid var(--line)}
.cw-fx div:last-child{border-right:0}
/* 연차를 안 적은 사람 — 두 칸으로 나눕니다 (빈 「—」 칸을 만들지 않습니다) */
.cw-fx.two div{flex:1 1 50%}
.cw-fx b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.2}
.cw-fx em{
  display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--mute);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 만든 것 미리보기 넉 장 — 없으면 자리표시만 */
/* 그림이 있는 만큼만 — 빈 칸을 깔면 깨진 그림처럼 보입니다 */
.cw-st{display:flex;gap:2px;padding:2px}
.cw-st .cw-t{
  flex:1;min-width:0;height:54px;border-radius:5px;overflow:hidden;display:block;
  background:var(--bg-soft);
}
.cw-st .cw-t img{width:100%;height:100%;object-fit:cover;display:block}
.cw-st .cw-t.ph{
  background:repeating-linear-gradient(135deg,#F4F4F8 0 8px,#EFEFF5 8px 16px);
}

.cw-ft{display:flex;align-items:center;gap:8px;padding:11px 16px}
.cw-open{
  font-size:11px;font-weight:800;color:#0B6B37;background:#EAF7EF;
  border-radius:var(--r-pill,999px);padding:4px 10px;
}
.cw-open.off{color:var(--mute);background:var(--field)}
.cw-ft small{margin-left:auto;font-size:11px;font-weight:700;color:var(--mute);flex:none}

@media (max-width:1080px){ .cw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .cw-grid{grid-template-columns:1fr;gap:12px}
  .cw-st .cw-t{height:62px}
}

/* ══════════════════════════════════════════════════════════
   내 계정 = 공개 프로필 한 화면 (2026-08-24 · 34단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "지금 마이페이지가 굉장히 복잡하고 혼돈스럽다"
                  "이 화면의 구성자체를 이렇게 쉽고 심플하고
                    개인화된 계정으로 디자인되어 볼수 있기를 바라낟"

   왼쪽에 사람 · 오른쪽에 탭과 목록. 화면 9개가 여기 하나로 모입니다.

   ★ 여기는 <흰 종이>입니다. .rail/.foot 의 어두운 토큰을 물려받지 않습니다.
   ★ 좋아요·팔로워·조회수·뱃지 자리는 없습니다. 사실만 적습니다.
   ══════════════════════════════════════════════════════════ */

.pfx{margin-top:14px}

/* 커버 — 그림을 올릴 수 있게 되기 전까지는 브랜드 색 띠입니다 */
.pfx-cov{
  height:148px;border-radius:var(--r-lg,16px);
  background:linear-gradient(115deg,#6247E0 0%,#7C5CFC 42%,#A98BFF 100%);
}

.pfx-cols{
  display:grid;grid-template-columns:302px minmax(0,1fr);gap:34px;
  align-items:start;
}

/* ── 왼쪽 ───────────────────────────────────── */
.pfx-left{margin-top:-52px;min-width:0}
.pfx-av{margin-bottom:14px}
.pfx-av .av{
  width:104px;height:104px;border:4px solid #fff;border-radius:50%;
  box-shadow:0 3px 14px rgba(16,17,25,.16);
}
/* ★ 사진일 때만 잘라 넣습니다. 캐릭터(av-ch)는 원래 자리를 잡아 두었으므로
     여기서 overflow 를 걸면 얼굴이 잘립니다. */
.pfx-av .av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

.pfx-nm{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.035em;line-height:1.25}
.pfx-hid{margin-top:3px;font-size:13px;font-weight:700;color:var(--mute)}

.pfx-tags{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}
.pfx-tags .chip{
  font-size:11.5px;font-weight:800;color:var(--brand-dk);background:var(--brand-lt);
  border-radius:var(--r-pill,999px);padding:4px 11px;border:0;
}
.pfx-yr{
  font-size:11.5px;font-weight:800;color:var(--body);background:var(--field);
  border-radius:var(--r-pill,999px);padding:4px 11px;
}
.pfx-work{
  font-size:11.5px;font-weight:800;color:#0B6B37;background:#EAF7EF;
  border-radius:var(--r-pill,999px);padding:4px 11px;
}

.pfx-todo{
  display:block;margin-top:12px;border:1px dashed var(--brand-lt2);background:var(--brand-lt);
  border-radius:var(--r-sm,8px);padding:11px 13px;
  font-size:13px;font-weight:800;color:var(--brand-dk);
}
.pfx-todo span{display:block;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--body);line-height:1.6}

.pfx-line{margin-top:14px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.65;letter-spacing:-.02em}
.pfx-bio{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--body);font-weight:500}

/* 주소 한 줄 — 누르면 복사됩니다 */
.pfx-url{margin-top:16px}
.pfx-url code{
  display:block;border:1px solid var(--line-2);border-radius:var(--r-sm,8px);
  background:var(--bg-soft);padding:9px 12px;
  font-family:'SF Mono',Consolas,monospace;font-size:11px;color:var(--body);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;
}
.pfx-url code:hover{border-color:var(--brand-lt2);background:#fff}
.pfx-url .pfx-sh{margin-top:9px}
.pfx-hint{margin-top:9px;font-size:11.5px;line-height:1.7;color:var(--mute);font-weight:600}

.pfx-btns{margin-top:14px;display:grid;gap:8px}
.pfx-btns a{
  height:40px;border-radius:var(--r-sm,8px);display:flex;align-items:center;justify-content:center;
  gap:7px;font-size:13.5px;font-weight:800;letter-spacing:-.02em;
}
.pfx-btns a svg{width:16px;height:16px;flex:none}
.pfx-btns .pfx-b1{background:var(--brand);color:#fff}
.pfx-btns .pfx-b1:hover{background:var(--brand-dk)}
.pfx-btns .pfx-b2{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.pfx-btns .pfx-b2:hover{border-color:var(--brand-lt2)}

/* 사실 기록 — 점수가 아닙니다 */
.pfx-facts{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:11px}
.pfx-facts div{display:flex;align-items:baseline;gap:9px}
.pfx-facts em{font-style:normal;font-size:13px;color:var(--mute);font-weight:700;flex:1;min-width:0}
.pfx-facts b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.02em;flex:none}
.pfx-facts b.sm{font-size:13px}
.pfx-facts b span{font-size:12px;font-weight:700;color:var(--mute);margin-left:2px}
.pfx-note{
  margin-top:12px;font-size:11.5px;line-height:1.7;color:var(--mute);font-weight:600;
  background:var(--bg-soft);border-radius:var(--r-sm,8px);padding:9px 11px;
}

.pfx-kw{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.pfx-kw em{display:block;font-style:normal;font-size:11.5px;font-weight:800;color:var(--mute);margin-bottom:9px}
.pfx-kw div{display:flex;flex-wrap:wrap;gap:6px}
.pfx-kw span{
  font-size:11.5px;font-weight:700;color:var(--body);border:1px solid var(--line-2);
  border-radius:var(--r-pill,999px);padding:4px 10px;
}

/* ── 오른쪽 ─────────────────────────────────── */
.pfx-right{padding-top:22px;min-width:0}

.pfx-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:20px;
  overflow-x:auto;scrollbar-width:thin;
}
.pfx-tabs a{
  flex:none;padding:11px 12px 13px;font-size:13.5px;font-weight:800;color:var(--mute);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:6px;white-space:nowrap;letter-spacing:-.02em;
}
.pfx-tabs a:hover{color:var(--body)}
.pfx-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
.pfx-tabs a b{font-size:12.5px;font-weight:800;color:var(--mute)}
.pfx-tabs a.on b{color:var(--brand)}
.pfx-tabs a b.hot{color:#C2185B}
.pfx-tabs a .lk{width:12px;height:12px;flex:none;color:var(--mute)}
.pfx-tabs .pfx-tsep{flex:none;width:1px;background:var(--line-2);margin:9px 10px;align-self:stretch}

/* 나만 보이는 탭이라는 표시 */
.pf-onlyme{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;
  border:1px solid var(--brand-lt2);background:var(--brand-lt);border-radius:var(--r-sm,8px);
  padding:9px 12px;font-size:12px;font-weight:700;color:var(--brand-dk);line-height:1.6;
}
.pf-onlyme svg{width:13px;height:13px;flex:none;margin-top:3px}
.pf-onlyme b{font-weight:800}

.pfx-rowhd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pfx-rowhd h2{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.025em}
.pfx-rowhd span{font-size:12.5px;font-weight:700;color:var(--mute)}
.pfx-rowhd .btn{margin-left:auto}

.pfx-mine{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:12px;font-weight:650;color:var(--mute);
}
.pfx-more{margin-top:20px;text-align:center}

/* 좁은 화면 — 왼쪽이 위로 올라옵니다 */
@media (max-width:900px){
  .pfx-cols{grid-template-columns:1fr;gap:0}
  .pfx-left{margin-top:-44px}
  .pfx-cov{height:112px;border-radius:var(--r-md,12px)}
  .pfx-av .av{width:84px;height:84px}
  .pfx-nm{font-size:21px}
  .pfx-facts{grid-template-columns:1fr 1fr;display:grid;gap:10px 18px}
  .pfx-right{padding-top:26px}
}
@media (max-width:520px){
  .pfx-tabs a{padding:10px 9px 12px;font-size:13px}
  .pfx-facts{grid-template-columns:1fr}
}

/* 마이 설정 왼쪽 메뉴 — 34단계에서 「내 계정으로」 한 줄이 맨 위에 붙었습니다 */
.my-nav .my-nav-back{color:var(--brand-dk);font-weight:800}
.my-nav .my-nav-back svg{color:var(--brand)}
.my-nav .my-who .av{border-radius:50%;overflow:hidden;flex:none}
.my-nav .my-who .av img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════════════════════════════════════════════════════
   팔로우 (2026-08-24 · 35단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "우리 팔로우기능없나요? 구독기능이나"
   [stated] hong: "팔로우정도는 순위로 두고 생각하지 않습니다"

   ★ 숫자는 그대로 냅니다. 다만 이 숫자로 목록을 정렬하지 않고,
     「팔로워 많은 크루」 같은 화면도 만들지 않습니다.
   ★ 여기는 흰 종이입니다.
   ══════════════════════════════════════════════════════════ */

.fo-f{display:inline-block}
.fo-b{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 15px;border-radius:var(--r-sm,8px);
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  font-size:13.5px;font-weight:800;letter-spacing:-.02em;cursor:pointer;
  font-family:inherit;transition:background .15s,border-color .15s,color .15s;
}
.fo-b svg{width:15px;height:15px;flex:none}
.fo-b:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
/* 팔로우 중 — 「이미 하고 있다」는 <조용한> 상태입니다 */
.fo-b.on{background:#fff;color:var(--body);border-color:var(--line-2)}
.fo-b.on:hover{background:#FDF3F5;color:#9A2340;border-color:#F0CBD5}
.fo-b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fo-b.wide{width:100%;height:40px}
.fo-b.sm{height:30px;padding:0 12px;font-size:12.5px}
.fo-b.sm svg{width:13px;height:13px}

/* 왼쪽 열 첫 단추로 들어갈 때 */
.pfx-btns .fo-f{display:block}
.pfx-btns .fo-b.wide{font-size:13.5px}

/* 크루 카드 위에 얹는 자리 */
.cw-w{position:relative}
.cw-fo{position:absolute;right:14px;bottom:11px;z-index:2}
/* 단추가 활동 시각을 덮지 않게 그만큼 비워 둡니다 */
.cw-ft.hasfo{padding-right:104px;min-height:52px}

/* 팔로잉 탭 */
.fo-set{
  display:flex;align-items:center;gap:12px;margin:16px 0 18px;
  border:1px solid var(--line);border-radius:var(--r-sm,8px);padding:12px 14px;background:var(--bg-soft);
}
.fo-set span{flex:1;min-width:0;font-size:12.5px;color:var(--mute);font-weight:600;line-height:1.6}
.fo-set span b{color:var(--ink);font-weight:800}
.fo-sw{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  border-radius:var(--r-pill,999px);border:1px solid var(--line-2);background:#fff;
  font-size:12.5px;font-weight:800;color:var(--mute);cursor:pointer;font-family:inherit;
}
.fo-sw i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
.fo-sw.on{color:#0B6B37;border-color:#CDEBD9;background:#F1FAF4}
.fo-sw.on i{background:#1E9E5A}

.fo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fo-c{
  display:flex;align-items:center;gap:10px;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-md,12px);background:#fff;padding:12px 14px;
}
.fo-cl{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.fo-cl .fo-av{flex:none;border-radius:12px;overflow:hidden}
.fo-cl .fo-av img{width:100%;height:100%;object-fit:cover;display:block}
.fo-id{min-width:0;flex:1}
.fo-id b{
  display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.028em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fo-id em{
  display:block;font-style:normal;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--brand-dk);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fo-id small{
  display:block;margin-top:3px;font-size:11px;font-weight:600;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:760px){
  .fo-grid{grid-template-columns:1fr}
  .fo-set{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:640px){
  .cw-fo{right:12px;bottom:10px}
  .cw-ft.hasfo{padding-right:100px}
}

/* ══════════════════════════════════════════════════════════
   빠른 등록 — 제작방식 5축 (2026-08-24 · 37단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "프로젝트등록시 바로 제작방식이 나오지 않고있음"

   ★ 2단계 폼(.pf-ax)은 카드가 커서 등록 화면에 그대로 넣으면
     칸 셋짜리 화면이 다시 열아홉 칸짜리로 돌아갑니다.
     그래서 <한 줄에 한 축> 짜리 납작한 모양을 따로 둡니다.
   ★ 세 선택지는 <같은 크기·같은 색>입니다. 어느 쪽이 낫다는 뜻이 없습니다.
   ══════════════════════════════════════════════════════════ */

.qk-ax{margin-top:22px}
.qk-axr{border:0;padding:0;margin:0 0 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qk-axr legend{
  float:left;width:132px;padding:0;margin:0;flex:none;
}
.qk-axr legend b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.qk-axr legend span{
  display:block;margin-top:1px;font-size:11px;font-weight:600;color:var(--mute);line-height:1.45;
}
.qk-axo{display:flex;gap:6px;flex:1;min-width:0;flex-wrap:wrap;clear:none}
.qk-axb{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;border-radius:var(--r-pill,999px);
  border:1px solid var(--line-2);background:#fff;cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--body);letter-spacing:-.02em;white-space:nowrap;
  transition:border-color .14s,background .14s,color .14s;
}
.qk-axb input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.qk-axb:hover{border-color:var(--brand-lt2)}
.qk-axb:has(input:checked),.qk-axb.on{
  border-color:var(--brand);background:var(--brand-lt);color:var(--brand-dk);font-weight:800;
}
.qk-axb:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.qk-axn{
  margin-top:12px;font-size:11.5px;line-height:1.7;color:var(--mute);font-weight:600;
  background:var(--bg-soft);border-radius:var(--r-sm,8px);padding:10px 12px;
}
.qk-axn b{color:var(--body);font-weight:800}

@media (max-width:720px){
  .qk-axr{display:block;margin-bottom:14px}
  .qk-axr legend{float:none;width:auto;margin-bottom:7px}
  .qk-axo{margin-top:0}
  .qk-axb{height:32px;padding:0 12px;font-size:12px}
}

/* ══════════════════════════════════════════════════════════
   글 편집기 · HTML 본문 (2026-08-24 · 38단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "크루딧 게시판html도 가능하고 에디터도 가능하도록 해줘"

   ★ 자바스크립트가 안 돌면 편집기 칸은 나타나지 않고 원래 textarea 만 남습니다.
     그 상태로도 글은 써집니다.
   ══════════════════════════════════════════════════════════ */

.ed{border:1px solid var(--line-2);border-radius:var(--r-md,12px);overflow:hidden;background:#fff}
/* ★ .ta 같은 클래스가 display 를 다시 켜 버려서, 숨긴 칸이 그대로 보였습니다.
     hidden 은 「지금 없는 것」이라는 뜻이므로 여기서 확실히 눌러 둡니다. */
.ed [hidden]{display:none!important}
.ed-modes{
  display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);
  background:var(--bg-soft);padding:0 4px;flex-wrap:wrap;
}
.ed-mode{
  border:0;background:none;font-family:inherit;cursor:pointer;
  padding:11px 14px;font-size:13px;font-weight:800;color:var(--mute);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;letter-spacing:-.02em;
}
.ed-mode:hover{color:var(--body)}
.ed-mode.on{color:var(--ink);border-bottom-color:var(--brand)}
.ed-mode:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ed-note{margin-left:auto;padding:0 12px;font-size:11.5px;font-weight:600;color:var(--mute)}

.ed-bar{
  display:flex;align-items:center;gap:3px;flex-wrap:wrap;
  padding:8px 9px;border-bottom:1px solid var(--line);background:#fff;
}
.ed-bar button{
  min-width:32px;height:30px;padding:0 9px;border:1px solid transparent;border-radius:6px;
  background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--body);
  cursor:pointer;line-height:1;
}
.ed-bar button:hover{background:var(--field);border-color:var(--line)}
.ed-bar button:active{background:var(--brand-lt);color:var(--brand-dk)}
.ed-bar button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ed-bar .ed-sep{width:1px;height:18px;background:var(--line-2);margin:0 5px}

.ed-rich{
  min-height:360px;padding:18px 20px;font-size:15px;line-height:1.85;color:var(--ink);
  outline:0;overflow-wrap:break-word;
}
.ed-rich:focus{box-shadow:inset 0 0 0 2px var(--brand-lt2)}
.ed-rich:empty::before{content:'여기에 쓰세요';color:var(--mute);font-weight:500}

.ed .ta{border:0;border-radius:0;min-height:360px}
.ed .ta:focus{box-shadow:inset 0 0 0 2px var(--brand-lt2)}
.ed .ta.ed-code{
  font-family:'SF Mono',Consolas,'D2Coding',monospace;font-size:13px;line-height:1.75;
  background:#FBFBFE;
}
.ed-safe{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 14px;border-top:1px solid var(--line);background:var(--bg-soft);
  font-size:11.5px;line-height:1.7;color:var(--mute);font-weight:600;
}
.ed-safe svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--brand)}
.ed-safe b{color:var(--body);font-weight:800}
.ed-safe code{
  font-family:'SF Mono',Consolas,monospace;font-size:11px;color:var(--brand-dk);
  background:var(--brand-lt);border-radius:4px;padding:1px 5px;
}

/* ── 올라간 글이 보이는 모양 ───────────────────
   ※ 글쓴이가 넣은 것이라 <우리 화면 뼈대를 흉내 내지 못하게> 여기 안에서만 먹입니다. */
.po-body.rich{font-size:15.5px;line-height:1.85;color:var(--ink);overflow-wrap:break-word}
.po-body.rich h2{font-size:21px;font-weight:800;letter-spacing:-.03em;margin:34px 0 12px;color:var(--ink)}
.po-body.rich h3{font-size:17.5px;font-weight:800;letter-spacing:-.025em;margin:28px 0 10px;color:var(--ink)}
.po-body.rich h4{font-size:15.5px;font-weight:800;margin:22px 0 8px;color:var(--ink)}
.po-body.rich p{margin:0 0 15px}
.po-body.rich ul,.po-body.rich ol{margin:0 0 15px 22px}
.po-body.rich li{margin:5px 0}
.po-body.rich blockquote{
  margin:18px 0;padding:12px 18px;border-left:3px solid var(--brand-lt2);
  background:var(--bg-soft);border-radius:0 8px 8px 0;color:var(--body);
}
.po-body.rich pre{
  margin:18px 0;padding:15px 17px;background:#F6F6FA;border:1px solid var(--line);
  border-radius:8px;overflow-x:auto;
  font-family:'SF Mono',Consolas,'D2Coding',monospace;font-size:13px;line-height:1.7;
}
.po-body.rich code{
  font-family:'SF Mono',Consolas,monospace;font-size:.9em;
  background:var(--field);border-radius:4px;padding:1px 5px;
}
.po-body.rich pre code{background:none;padding:0;font-size:inherit}
.po-body.rich a{color:var(--brand-dk);text-decoration:underline;text-underline-offset:2px}
.po-body.rich img{max-width:100%;height:auto;border-radius:8px;margin:8px 0;display:block}
.po-body.rich hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.po-body.rich table{
  width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;display:block;overflow-x:auto;
}
.po-body.rich th,.po-body.rich td{border:1px solid var(--line-2);padding:9px 11px;text-align:left}
.po-body.rich th{background:var(--bg-soft);font-weight:800;color:var(--ink)}
.po-body.rich iframe{
  width:100%;max-width:720px;aspect-ratio:16/9;height:auto;border:0;border-radius:10px;margin:18px 0;
}
.po-body.rich .po-center{text-align:center}
.po-body.rich .po-right{text-align:right}
.po-body.rich .po-left{text-align:left}

@media (max-width:620px){
  .ed-modes{padding:0}
  .ed-mode{padding:10px 11px;font-size:12.5px}
  .ed-note{display:none}
  .ed-rich,.ed .ta{min-height:280px;padding:14px 15px;font-size:14.5px}
  .ed-bar button{min-width:30px;height:28px;padding:0 7px;font-size:12px}
  .po-body.rich{font-size:15px}
  .po-body.rich h2{font-size:19px}
}

/* ══════════════════════════════════════════════════════════
   홈 — 글자·아이콘 한 단 올리기 (2026-08-24 · 39단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "박스는 큰데 글씨가 아이콘이 많이 작아보여요"

   ★ 처음에는 「칸이 좁아서」로 봤는데 대표님 말씀이 맞았습니다.
     칸 수를 줄여 상자를 넓혀 놓았는데도 답답해 보이는 이유는
     <상자에 비해 글자가 작아서>였습니다. 실제로 재 보니
       프로젝트 카드 245×215 인데 제목 14px · 업종 11px
       크루 카드   309×157 인데 이름 13.5px · 직군 11px · 수치 11.5px
     큰 상자 안에 깨알이 박힌 꼴입니다.

   ★ 사이트 전체 글자는 건드리지 않습니다.
     고정 높이가 잡힌 곳이 많아서, 전역으로 올리면 다른 화면이 깨집니다.
     <홈 카드 안쪽만> 겨눠서 한 단씩 올립니다.
   ══════════════════════════════════════════════════════════ */

/* 섹션 제목 — 화면 폭에 비해 작았습니다 */
#s6 .v4-stitle{font-size:21px;letter-spacing:-.03em}
#s6 .v4-ssub{font-size:13px}
#s6 .v4-smore{font-size:13.5px;font-weight:800}

/* 프로젝트 카드 */
#s6 .v4-n-cap{padding:14px 14px 15px}
#s6 .v4-n-cap b{font-size:15.5px;letter-spacing:-.028em;line-height:1.45}
#s6 .v4-n-cap span{font-size:12.5px}
#s6 .v4-n-thumb .v4-nlk{height:26px;padding:0 10px 0 8px;font-size:12.5px}
#s6 .v4-n-thumb .v4-nlk svg{width:14px;height:14px}
#s6 .v4-n-thumb .v4-tb{font-size:11.5px}

/* 크루 카드
   ※ av_html() 이 크기를 <style 속성으로 직접> 박아 넣습니다.
     인라인은 CSS 보다 세므로, 여기서 덮으려면 !important 가 필요합니다.
     (PHP 쪽 숫자도 44 로 함께 올려 두었습니다 — 둘이 어긋나면 안 됩니다) */
#s6 .v4-mk-av{width:44px!important;height:44px!important;border-radius:13px}
#s6 .v4-mk-id b{font-size:15px;letter-spacing:-.028em}
#s6 .v4-mk-id small{font-size:12.5px;line-height:1.5}
#s6 .v4-mk-bio{font-size:13.5px;line-height:1.65}
#s6 .v4-mk-foot{font-size:12.5px;gap:14px}
#s6 .v4-open{height:24px;padding:0 10px;font-size:12px}

/* 제작방식으로 골라보기 */
#s6 .v4-wayt{font-size:15.5px}
#s6 .v4-wayn{font-size:21px}
#s6 .v4-wayp{font-size:13.5px}
#s6 .v4-waygo{font-size:13px;font-weight:800}

@media (max-width:1180px){
  #s6 .v4-stitle{font-size:19px}
  #s6 .v4-n-cap b{font-size:14.5px}
  #s6 .v4-mk-id b{font-size:14px}
}
@media (max-width:520px){
  /* 손에 들고 보는 화면 — 여기가 제일 작았습니다 */
  #s6 .v4-stitle{font-size:17.5px}
  #s6 .v4-ssub{font-size:12px}
  #s6 .v4-n-cap b{font-size:13.5px}
  #s6 .v4-n-cap span{font-size:11.5px}
  #s6 .v4-mk-av{width:36px!important;height:36px!important;border-radius:11px}
  #s6 .v4-mk-id b{font-size:13.5px}
  #s6 .v4-mk-id small{font-size:11.5px}
  #s6 .v4-mk-bio{font-size:12.5px}
  #s6 .v4-mk-foot{font-size:11.5px}
}

/* ══════════════════════════════════════════════════════════
   노출 범위 고르기 (2026-08-24 · 40단계)
   ──────────────────────────────────────────────────────────
   [stated] hong: "포트폴리오를 이력서에서만 노출 / 목록리스트전체노출 /
                   목록+이력서노출 둘다 도 있습니다"

   ★ 셋을 <같은 크기·같은 색>으로 둡니다. 어느 쪽이 낫다는 뜻이 없습니다.
   ══════════════════════════════════════════════════════════ */

.qk-scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.qk-sc{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-sm,8px);background:#fff;
  padding:13px 14px;transition:border-color .14s,background .14s;
}
.qk-sc input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.qk-sc b{
  display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.025em;
}
.qk-sc span{
  display:block;margin-top:5px;font-size:11.5px;line-height:1.6;color:var(--mute);font-weight:600;
}
.qk-sc:hover{border-color:var(--brand-lt2)}
.qk-sc:has(input:checked),.qk-sc.on{border-color:var(--brand);background:var(--brand-lt)}
.qk-sc:has(input:checked) b,.qk-sc.on b{color:var(--brand-dk)}
.qk-sc:has(input:checked) span,.qk-sc.on span{color:var(--body)}
.qk-sc:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

.qk-scn{
  margin-top:11px;font-size:11.5px;line-height:1.75;color:var(--mute);font-weight:600;
  border:1px solid #F3E3C9;background:#FFFBF2;border-radius:var(--r-sm,8px);padding:11px 13px;
}
.qk-scn b{color:#8A5A12;font-weight:800}

/* 내 프로젝트 목록의 현재 노출 상태 */
.my-scope{
  font-size:11px;font-weight:800;color:var(--brand-dk);background:var(--brand-lt);
  border-radius:var(--r-pill,999px);padding:2px 8px;
}

@media (max-width:720px){
  .qk-scope{grid-template-columns:1fr;gap:7px}
  .qk-sc{padding:11px 12px}
}

/* ══════════════════════════════════════════════════════════════
   41단계 (2026-08-25)
   ① 제작방식 배지를 사진에서 <제목 옆 글줄>로
   ② 첫 화면·아카이브에 검색칸
   ③ 상세 화면 배지를 크고 또렷하게
   ──────────────────────────────────────────────────────────────
   [stated] hong: "사람제작 이 배지를 제목옆으로 옮겼으면좋겠어요 눈에 잘 안들어와요"
   [stated] hong: "검색바도 하나 있으면 좋겠어요 이 화면에"
   [stated] hong: "이런아이콘도 좀 크고 예쁘면 좋겠다"

   ★ 왜 사진 위에서 뺐는가 —
     사진마다 배경색이 제각각입니다. 흰 사진 위에서는 옅은 배지가 사라지고,
     어두운 사진 위에서는 글자가 안 읽힙니다. 늘 흰 종이인 <글줄>로 내리면
     어떤 사진이 와도 똑같이 보입니다.
   ★ 그래도 <배지가 제목보다 커지지는 않게> 둡니다.
     제작방식은 <종류>지 <등급>이 아닙니다. 제목보다 크면 「좋은 프로젝트」 표시가 됩니다.
   ══════════════════════════════════════════════════════════════ */

/* ── ① 홈 카드 — 제목 아래 한 줄 (배지 + 업종 · 만든이) ────── */
#s6 .v4-nl2{
  display:flex!important;align-items:center;gap:7px;margin-top:7px;min-width:0;
}
#s6 .v4-nl2 em{
  font-style:normal;min-width:0;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--mute);font-weight:600;
}

/* 카드 안 배지 — 글줄에 얹히므로 테두리를 한 겹 줍니다.
   배경색만으로는 흰 종이 위에서 <떠 있는 딱지>처럼 보입니다. */
/* ⚠ `#s6 .v4-n-cap span` 이 display:block · overflow:hidden 을 물려줍니다
     (카드 두 번째 줄을 한 줄로 자르려고 예전에 넣어 둔 규칙입니다).
     배지도 span 이라 그대로 맞으면 아이콘과 글자가 <위아래로> 쪼개집니다.
     그래서 같은 세기(id 1 + class 2)로 다시 잡아 줍니다. */
#s6 .v4-n-cap .badge.v4-cb,#s3 .v4-away .badge.v4-cb,.badge.v4-cb{
  display:inline-flex!important;align-items:center;white-space:nowrap;overflow:visible;
}
.badge.v4-cb{
  flex:none;height:23px;padding:0 9px 0 7px;gap:5px;
  border-radius:var(--r-pill,999px);font-size:11px;font-weight:800;letter-spacing:-.02em;
  border:1px solid transparent;
}
.badge.v4-cb.way-full{background:#F1ECFF;border-color:#DED2FF;color:#5B45C8}
.badge.v4-cb.way-part{background:#E9F3FF;border-color:#CFE2F9;color:#2A6BB8}
.badge.v4-cb.way-human{background:#EAF7EF;border-color:#CDE9D8;color:#2A7A4B}
.badge.v4-cb .wayic{flex:none}

/* ── ① 아카이브 카드 — 제목 밑 배지 줄 ────────────────────── */
#s3 .v4-away{margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

@media (max-width:1180px){
  #s6 .v4-nl2{gap:6px}
}
@media (max-width:520px){
  /* 손에 들고 보는 화면 — 업종·만든이까지 넣으면 두 줄이 됩니다.
     배지가 먼저입니다. 「누가 어떻게 만들었는가」가 이 서비스의 본체입니다. */
  #s6 .v4-nl2 em{display:none}
  .badge.v4-cb{height:21px;padding:0 8px 0 6px;font-size:10.5px}
  #s3 .v4-away{margin-top:5px}
}

/* ══ ② 첫 화면 검색칸 ══════════════════════════════════════
   ★ 머리띠의 돋보기와 <같은 곳>으로 보냅니다 (/search.php).
     두 개가 서로 다른 데로 가면 사람이 어느 쪽을 믿어야 할지 모릅니다. */
#s6 .hm-sbox{
  display:flex;align-items:center;gap:8px;margin-top:22px;max-width:620px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill,999px);
  padding:5px 6px 5px 18px;transition:.14s;
  box-shadow:0 2px 10px rgba(22,23,29,.05);
}
#s6 .hm-sbox:focus-within{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt),0 4px 16px rgba(22,23,29,.07);
}
#s6 .hm-sbox > svg{width:19px;height:19px;flex:none;color:var(--mute)}
#s6 .hm-sbox input{
  flex:1;min-width:0;height:44px;border:0;background:transparent;outline:0;
  font-size:14.5px;color:var(--ink);letter-spacing:-.02em;font-family:inherit;
}
#s6 .hm-sbox input::placeholder{color:#9EA2B3;letter-spacing:-.02em}
#s6 .hm-sbox button{
  flex:none;height:44px;padding:0 24px;border:0;border-radius:var(--r-pill,999px);
  background:var(--ink);color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em;
  cursor:pointer;font-family:inherit;transition:.14s;
}
#s6 .hm-sbox button:hover{background:var(--brand)}

#s6 .hm-skw{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;
  font-size:12.5px;font-weight:600;
}
#s6 .hm-skw span{color:var(--mute)}
#s6 .hm-skw a{
  display:inline-flex;align-items:center;height:27px;padding:0 12px;
  border-radius:var(--r-pill,999px);border:1px solid var(--line);background:#fff;
  color:var(--body);text-decoration:none;font-weight:700;transition:.13s;
}
#s6 .hm-skw a:hover{border-color:var(--brand);color:var(--brand-dk);background:var(--brand-lt)}

@media (max-width:640px){
  #s6 .hm-sbox{margin-top:18px;padding:4px 5px 4px 14px}
  #s6 .hm-sbox > svg{width:17px;height:17px}
  #s6 .hm-sbox input{height:40px;font-size:13.5px}
  #s6 .hm-sbox button{height:40px;padding:0 16px;font-size:13px}
  #s6 .hm-skw{font-size:12px;gap:6px}
}
@media (max-width:400px){
  /* 아주 좁은 화면 — 돋보기를 빼고 글자 칸을 살립니다 */
  #s6 .hm-sbox > svg{display:none}
  #s6 .hm-sbox{padding-left:16px}
}

/* ══ ② 아카이브 검색칸 ═════════════════════════════════════
   ★ 걸어 둔 조건을 숨은 칸으로 함께 보냅니다 (archive.php 쪽 참고).
     검색했더니 고른 업종이 풀리면 <빼앗긴> 느낌이 듭니다. */
#s3 .v4-qbox{
  display:flex;align-items:center;gap:7px;flex:none;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill,999px);
  padding:3px 4px 3px 13px;transition:.14s;
}
#s3 .v4-qbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
#s3 .v4-qbox > svg{width:16px;height:16px;flex:none;color:var(--mute)}
#s3 .v4-qbox input[type=search],#s3 .v4-qbox input:not([type=hidden]){
  width:230px;min-width:0;height:34px;border:0;background:transparent;outline:0;
  font-size:13px;color:var(--ink);letter-spacing:-.02em;font-family:inherit;
}
#s3 .v4-qbox input::placeholder{color:#9EA2B3}
#s3 .v4-qbox button{
  flex:none;height:32px;padding:0 15px;border:0;border-radius:var(--r-pill,999px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:.14s;
}
#s3 .v4-qbox button:hover{background:var(--brand)}
#s3 .v4-qclr{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;flex:none;
  border-radius:var(--r-pill,999px);border:1px solid var(--line);background:var(--bg-soft);
  font-size:12px;font-weight:700;color:var(--mute);text-decoration:none;transition:.13s;
  max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#s3 .v4-qclr:hover{border-color:#CFD1DA;color:var(--body)}
#s3 .v4-tools{flex-wrap:wrap;row-gap:9px}

@media (max-width:760px){
  #s3 .v4-qbox{width:100%;order:-1}
  #s3 .v4-qbox input:not([type=hidden]){width:auto;flex:1}
}

/* ══ ③ 상세 화면 배지 — 크고 또렷하게 ══════════════════════
   [stated] hong: "이런아이콘도 좀 크고 예쁘면 좋겠다"
   ★ 목록 카드의 배지는 그대로 둡니다. 상세 화면은 <이미 들어온 사람>이 보는 곳이라
     크게 해도 목록이 점수판처럼 보이지 않습니다.
   ★ 그래도 색은 세 갈래 모두 같은 세기입니다. 어느 하나가 위로 보이면 안 됩니다. */
.badge.lg{
  height:36px;padding:0 15px 0 10px;gap:9px;border-radius:var(--r-pill,999px);
  font-size:13.5px;font-weight:800;letter-spacing:-.025em;
  border:1px solid transparent;
}
.badge.lg .wayic{flex:none}
.badge.lg.way-full{background:#F1ECFF;border-color:#D9CBFF;color:#523CBF}
.badge.lg.way-part{background:#E8F2FF;border-color:#C8DEF9;color:#22609F}
.badge.lg.way-human{background:#E9F7EE;border-color:#C6E7D3;color:#236B41}

/* 수상 표시도 같은 키로 맞춥니다 — 나란히 선 두 배지의 높이가 다르면 흐트러져 보입니다 */
#s7 .rmeta .aw-b{
  height:36px;padding:0 15px 0 12px;gap:7px;font-size:12.5px;
  background:#FBF6E9;border-color:#E8DCBC;
}
#s7 .rmeta .aw-b svg{width:17px;height:17px}
#s7 .rmeta{gap:9px;row-gap:9px;align-items:center}
/* 옆의 작은 꼬리표(유형·업종)도 한 단 올립니다 —
   큰 배지 옆에 깨알이 붙어 있으면 그것대로 흐트러져 보입니다.
   다만 <배지보다는 작게> 둡니다. 이건 분류지 제작방식이 아닙니다. */
#s7 .rmeta .jb{
  height:30px;padding:0 12px;border-radius:var(--r-pill,999px);
  font-size:12px;font-weight:700;
}

/* 옆기둥 「제작 방식」 판 */
#s7 .ax-sumbadge{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ⚠ crewdit.css 의 `#s7 .ax-sumbadge .badge{height:28px;font-size:13px}` 가
     .lg 보다 셉니다(id 1 + class 2). 같은 세기로 다시 잡습니다. */
#s7 .ax-sumbadge .badge.lg{
  height:36px;padding:0 15px 0 10px;gap:9px;border-radius:var(--r-pill,999px);font-size:13.5px;
}
#s7 .ax-sumnote{font-size:11.5px;color:var(--mute);font-weight:600}

@media (max-width:640px){
  .badge.lg{height:32px;padding:0 13px 0 9px;gap:7px;font-size:12.5px}
  .badge.lg .wayic{width:22px;height:22px}
  #s7 .rmeta .aw-b{height:32px;font-size:11.5px}
}

/* ══════════════════════════════════════════════════════════════
   캡처 올리기 안내 (2026-08-25 · 41단계)
   ──────────────────────────────────────────────────────────────
   [stated] 이지유: "이게 너무 길거나 크면 아예노출이 안되고
                    줄이거나 용량을 줄이면 화질이 많이깨지는 문제가 있습니다"

   ★ 전에는 「세로로 아무리 길어도 됩니다」 한 줄이었습니다 — 사실이 아니었습니다.
     지켜야 할 것이 네 가지인데 한 줄에 뭉쳐 두면 아무도 안 읽습니다.
     줄을 나눠 <눈으로 세어지게> 둡니다.
   ★ 경고 색(빨강)을 쓰지 않습니다. 이건 잘못한 것이 아니라 <준비물>입니다.
   ══════════════════════════════════════════════════════════════ */
.pf-guide{
  margin:12px 0 14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-md,12px);background:var(--bg-soft);
}
.pf-guide > b{
  display:block;font-size:12.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:8px;
}
.pf-guide ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:6px}
.pf-guide li{
  font-size:12.5px;line-height:1.7;color:var(--body);font-weight:600;
}
.pf-guide li b{color:var(--brand-dk);font-weight:800}
.pf-guide li::marker{color:#B9BCC8}

@media (max-width:600px){
  .pf-guide{padding:12px 13px}
  .pf-guide li{font-size:12px}
}

/* ══════════════════════════════════════════════════════════════
   42단계 (2026-08-26)
   · 캡처 차례 바꾸기 — 위·아래 단추 + 끌어다 놓기
   · 빠른 등록의 「그림」 칸 — 빠진 것을 등록 전에 보여 줍니다
   ──────────────────────────────────────────────────────────────
   [stated] hong(이지유 전달): "이미지 순서를 자유롭게 변경할 수 있도록"
   [stated] hong(이지유 전달): "최초등록 단계에서 이미지 누락 여부를 바로 확인"
   ══════════════════════════════════════════════════════════════ */

/* ── 캡처 차례 ────────────────────────────────────────── */
.pf-sortable .pf-shot{position:relative;cursor:grab}
.pf-sortable .pf-shot:active{cursor:grabbing}
.pf-sortable .pf-shot.drag{opacity:.45;outline:2px dashed var(--brand);outline-offset:-2px}

/* 몇 번째인지 — 맞추는 보람이 있으려면 차례가 눈에 보여야 합니다 */
.pf-no{
  position:absolute;top:6px;left:6px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:rgba(22,23,29,.82);color:#fff;
  font-size:11.5px!important;font-weight:800;padding-top:0!important;
}
.pf-shot .pf-dim{font-size:10.5px;color:var(--mute);font-weight:700;padding:6px 8px 0}

.pf-mv{display:flex;gap:4px;padding:6px 8px 0}
.pf-mvb{
  flex:1;height:26px;border-radius:5px;border:1px solid var(--line-2);background:#fff;
  font:inherit;font-size:13px;line-height:1;color:var(--body);cursor:pointer;transition:.12s;
}
.pf-mvb:hover:not(:disabled){border-color:var(--brand);color:var(--brand-dk);background:var(--brand-lt)}
.pf-mvb:disabled{opacity:.3;cursor:default}

/* ── 빠른 등록의 그림 칸 ──────────────────────────────── */
#s20 .qk-imgs{
  margin:14px 0 4px;border:1px solid var(--line);border-radius:var(--r-md,12px);
  background:var(--bg-soft);overflow:hidden;
}
#s20 .qk-imgh{
  display:flex;align-items:baseline;gap:9px;padding:13px 16px 11px;
  border-bottom:1px solid var(--line);background:#fff;
}
#s20 .qk-imgh b{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
#s20 .qk-opt{font-size:12px;color:var(--mute);font-weight:600}

#s20 .qk-imgrow{display:flex;gap:12px;padding:14px 16px;align-items:flex-start}
#s20 .qk-imgrow + .qk-imgrow{border-top:1px solid var(--line)}

/* 있음 / 없음 — 이건 잘못이 아니라 <지금 상태>입니다. 빨강을 쓰지 않습니다. */
#s20 .qk-st{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:24px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:-.02em;margin-top:1px;
}
#s20 .qk-st.has{background:#E9F7EE;color:#236B41;border:1px solid #C6E7D3}
#s20 .qk-st.none{background:#F2F2F5;color:#6E7180;border:1px solid var(--line-2)}

#s20 .qk-imgb{flex:1;min-width:0}
#s20 .qk-imgb > b{
  display:block;font-size:13px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:4px;
}
#s20 .qk-imgb > b em{
  font-style:normal;font-size:11.5px;font-weight:700;color:var(--mute);margin-left:6px;
}
#s20 .qk-imgb p{font-size:12.5px;line-height:1.7;color:var(--body);font-weight:600;margin:0 0 9px}
#s20 .qk-imgb .qk-thumb{margin:0 0 9px}
#s20 .qk-imgb .qk-thumb img{
  display:block;max-width:220px;width:100%;border-radius:var(--r-sm,8px);border:1px solid var(--line);
}
#s20 .qk-date{max-width:220px}

@media (max-width:560px){
  #s20 .qk-imgrow{flex-direction:column;gap:8px}
  .pf-mv{gap:3px}
  .pf-mvb{height:30px}
}

/* ══════════════════════════════════════════════════════════════
   고른 그림 미리보기 (2026-08-26 · 43단계)
   ──────────────────────────────────────────────────────────────
   [stated] 이지유: "최초 이미지 등록 단계부터 여러 이미지를 추가할 수 있고,
                    등록 후 바로 드래그앤드롭으로 이미지 순서를 변경할 수 있도록"

   ★ <올리기 전에> 보이는 목록입니다. 올린 뒤 목록(.pf-shot)과 생김새를 맞춰
     「같은 것을 두 번 배우지」 않게 합니다.
   ══════════════════════════════════════════════════════════════ */
.fp-hint{
  font-size:12.5px;line-height:1.7;color:var(--mute);font-weight:600;margin:9px 0 0;
}
.fp-hint b{color:var(--brand-dk);font-weight:800}

.fp-box{display:none}
.fp-box.on{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:9px;
}
.fp-it{
  position:relative;border:1px solid var(--line);border-radius:var(--r-sm,8px);
  background:#fff;overflow:hidden;display:flex;flex-direction:column;cursor:grab;
}
.fp-it:active{cursor:grabbing}
.fp-it.drag{opacity:.45;outline:2px dashed var(--brand);outline-offset:-2px}
.fp-it img{display:block;width:100%;height:92px;object-fit:cover;object-position:top;background:var(--field)}

.fp-n{
  position:absolute;top:6px;left:6px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:rgba(22,23,29,.82);color:#fff;font-size:11.5px;font-weight:800;
}
.fp-nm{
  font-size:11px;color:var(--body);font-weight:700;padding:6px 8px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fp-x{
  margin:5px 8px 8px auto;padding:3px 9px;border-radius:5px;border:1px solid var(--line-2);
  background:#fff;font:inherit;font-size:11px;font-weight:700;color:var(--mute);cursor:pointer;transition:.12s;
}
.fp-x:hover{border-color:#CFD1DA;color:var(--rej,#C0392B)}

@media (max-width:900px){ .fp-box.on{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .fp-box.on{grid-template-columns:repeat(2,1fr)} }

/* ══════════════════════════════════════════════════════════════
   「이 기록에 대하여」 (2026-08-26 · 44단계)
   ──────────────────────────────────────────────────────────────
   [stated] hong: "수정일·검증일·프로젝트 원본 링크 표시"
                  "크루딧 데이터를 독립적인 외부 평가처럼 사용하지 않기"

   ★ 눈에 띄게 만들지 않습니다. 자랑하는 칸이 아니라 <출처를 밝히는> 칸입니다.
     조용히, 그러나 찾으면 반드시 거기 있어야 합니다.
   ══════════════════════════════════════════════════════════════ */
#s7 .pd-about .kv{font-size:12.5px}
#s7 .pd-about .pd-src{
  color:var(--brand-dk);font-weight:700;text-decoration:none;
  overflow-wrap:anywhere;
}
#s7 .pd-about .pd-src:hover{text-decoration:underline}
#s7 .pd-about .ax-selfnote{
  font-size:11.5px;line-height:1.8;color:var(--mute);font-weight:600;
  border-top:1px solid var(--line);padding-top:11px;
}
#s7 .pd-about .ax-selfnote b{color:var(--body);font-weight:800}