/* 가입 페이지(크루 · 팀플) — src/joinpage-view.js. maru 플랫폼 머리 아래 초대장 한 장.
   팀 색은 종이 장면과 같은 곳에만: 첫 글자 타일(--pp-a · --pp-on)과 위쪽의 맑은 번짐(--pp-b1 · --pp-b2 — public/paper-hero.js, body에 실린다).
   버튼 · 글자는 잉크. 움직임은 v5 토큰(data-enter의 m-rise · --ease-out)만, 튀는 곡선 없음 */

body.x-jp { background: var(--paper); }
body.x-jp #main { position: relative; isolation: isolate; overflow-x: clip; }
/* 방문자 — 잉크 단추는 카드의 '참여하기' 하나(머리의 '시작하기'는 새 팀 만들기라 겨루지 않게 접는다 — /signup의 같은 규칙). 로그인은 머리 · 카드 아래 · 햄버거 시트에 */
body.x-jp .hd-x .hd-start { display: none; }

.jp { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(96px, 15vh, 148px) var(--gutter) var(--s-11); }
/* 번짐 — 위쪽 두 겹. 모노크롬 팀은 투명(순수 종이 — src/joinpage-view.js가 회색 번짐을 얹지 않는다) */
.jp::before {
  content: ''; position: absolute; inset: 0 0 auto; height: min(640px, 92vh); z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 64% at 28% 8%, var(--pp-b1, transparent), rgba(255, 255, 255, 0) 72%),
    radial-gradient(46% 58% at 76% 0%, var(--pp-b2, transparent), rgba(255, 255, 255, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0));
}

/* 초대장 — 흰 카드, 타일이 윗변에 걸친다 */
.jp-card {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; padding: 0 var(--s-7) var(--s-7);
  border-radius: 28px; background: var(--paper); text-align: center; word-break: keep-all;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(23, 21, 15, .04), 0 28px 64px -32px rgba(23, 21, 15, .22);
}
.jp-tile {
  display: grid; place-items: center; flex: none; width: 96px; height: 96px; margin-top: -48px; border-radius: 30px; overflow: hidden;
  background: var(--pp-a, var(--ink)); color: var(--pp-on, #fff); font: 600 46px/1 var(--font); letter-spacing: -.03em;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--line), 0 18px 36px -16px rgba(23, 21, 15, .34);
  rotate: -4deg; /* 카드에 붙인 스티커처럼 살짝 */
}
.jp-tile.has-img { background: var(--paper); }
.jp-tile.has-img img { width: 74%; height: 74%; object-fit: contain; }
.jp-tile[data-fill] img { width: 100%; height: 100%; object-fit: cover; }

.jp-kind {
  margin: var(--s-5) 0 0; padding: 5px 10px; border-radius: var(--r-pill); background: var(--wash-2);
  font: 600 var(--t-caption)/1.2 var(--font); letter-spacing: .01em; color: var(--ink-2);
}
body.x-jp .jp-card .jp-name { margin: var(--s-3) 0 0; font: 600 var(--t-title-2)/1.16 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.jp .cx-tag { max-width: 30em; margin: var(--s-2) 0 0; font: 400 var(--t-body)/1.55 var(--font); color: var(--ink-2); text-wrap: pretty; }
.jp .cx-tag[hidden] { display: none; }

/* 얼굴 — 실제 멤버(겹친 원) · 더 있으면 +n · 내 자리(점선 원) */
.jp-faces { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.jp-row { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; }
.jp-face { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; }
.jp-face:first-child { margin-left: 0; }
.jp-face > .avatar { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper); }
.jp-face > .jp-anon { display: grid; place-items: center; color: var(--ink-3); } /* 멤버끼리만 팀 — 이니셜 대신 사람 모양 */
.jp-face > .jp-anon svg { width: 20px; height: 20px; }
.jp-more-n { background: var(--canvas-2); box-shadow: 0 0 0 3px var(--paper); font: 600 var(--t-footnote)/1 var(--font); color: var(--ink-2); }
.jp-you { margin-left: var(--s-2); }
.jp-face:first-child.jp-you { margin-left: 0; }
.jp-you-in { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-3); outline: 1.5px dashed var(--line-3); outline-offset: 3px; }
.jp-you-in > svg { width: 18px; height: 18px; }
.jp-you-in > .avatar { width: 40px; height: 40px; border-radius: 50%; }
/* 내 얼굴 — 아직 들어오기 전이라 점선 안에. 오른쪽 아래 작은 잉크 표(+ · 신청 대기면 시계) */
.jp-you-b { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--paper); }
.jp-you-b > svg { width: 11px; height: 11px; stroke-width: 2.6; }
.jp-social { margin: 0; font: 500 var(--t-ui)/1.4 var(--font); color: var(--ink-2); }

/* 행동 — 카드 아랫단. 주 버튼은 잉크 알약 하나 */
.jp-act { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); text-align: left; }
body.x-jp .jp-act .jp-go { width: 100%; height: 52px; margin: 0; border-radius: var(--r-pill); font: 600 16px/1 var(--font); letter-spacing: -.01em; }
.jp-form .jp-go { margin-top: var(--s-2); }
.jp-alt { margin: var(--s-3) 0 0; text-align: center; font: 400 var(--t-footnote)/1.5 var(--font); color: var(--ink-3); }
.jp-alt a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
@media (hover: hover) and (pointer: fine) { .jp-alt a:hover { text-decoration-color: var(--ink); } }

.jp-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s-3); }
.jp-l { font: 600 var(--t-footnote)/1.3 var(--font); color: var(--ink-2); }
/* 글자 칸 — 채움 면(G3.1 ⓑ: --wash-2 · r --r-md · 네 변 테두리 없음). 포커스는 캐럿이 알린다(--ring-input 0 · 테두리 반응 없음 — G3.2) */
body.x-jp .jp-field .input { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--wash-2); box-shadow: none; font-size: 16px; }
body.x-jp .jp-field textarea.input { min-height: 92px; resize: vertical; line-height: 1.5; }
.jp-hint { margin: calc(-1 * var(--s-1)) 0 var(--s-3); font: 400 var(--t-caption)/1.5 var(--font); color: var(--ink-3); }
.jp-more-in .jp-hint:last-child { margin-bottom: 0; }

/* 접은 칸(프로필 · 가입 코드) — 옅은 판 한 장 */
.jp-more { margin: 0 0 var(--s-3); border-radius: var(--r-md); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.jp-more > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding: 0 14px; list-style: none; cursor: pointer; font: 500 var(--t-ui)/1.2 var(--font); color: var(--ink-2); border-radius: var(--r-md); }
.jp-more > summary::-webkit-details-marker { display: none; }
.jp-more > summary > svg { width: 16px; height: 16px; margin-left: auto; color: var(--ink-3); transition: rotate var(--dur-2) var(--ease-out); }
.jp-more[open] > summary > svg { rotate: 180deg; }
.jp-opt { font: 500 var(--t-caption)/1 var(--font); color: var(--ink-3); }
.jp-more-in { padding: var(--s-1) 14px 14px; }
.jp-more > summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

/* 신청 대기 */
.jp-wait { align-items: center; text-align: center; }
.jp-wait-t { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font: 600 var(--t-card)/1.3 var(--font); color: var(--ink); }
.jp-wait-t > svg { width: 18px; height: 18px; }
.jp-wait .jp-alt { margin-top: 6px; }
.jp-wait form { margin-top: var(--s-4); }

/* 문의 — 카드 밖 한 줄(app.css .intro-foot · .intro-contact를 덮는다) */
.jp .jp-foot { display: flex; justify-content: center; margin: var(--s-5) 0 0; padding: 0; border: 0; }
.jp .jp-foot:empty { display: none; }
.jp .jp-foot .intro-contact { display: inline; margin: 0; font: 400 var(--t-footnote)/1.5 var(--font); color: var(--ink-3); }
.jp .jp-foot .intro-contact a { color: var(--ink-2); font-size: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); }

@media (max-width: 699px) {
  .jp { padding: 88px var(--s-4) var(--s-10); }
  .jp-card { padding: 0 var(--s-5) var(--s-6); border-radius: 24px; }
  .jp-tile { width: 84px; height: 84px; margin-top: -42px; border-radius: 26px; font-size: 40px; }
  body.x-jp .jp-card .jp-name { font-size: 28px; }
  .jp-act { margin-top: var(--s-5); padding-top: var(--s-5); }
}
/* 작은 손맛(마우스만) — 타일에 손을 얹으면 스티커가 바로 서고, 참여 버튼에 손을 얹으면 내 자리 점선이 잉크 실선이 된다 */
@media (hover: hover) and (pointer: fine) {
  .jp-card .jp-tile { transition: rotate var(--dur-3) var(--ease-out); }
  .jp-card .jp-tile:hover { rotate: 0deg; }
  .jp-you-in { transition: outline-color var(--dur-2) var(--ease-out); }
  .jp-card:has(.jp-go:hover) .jp-you-in { outline-style: solid; outline-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .jp-more > summary > svg, .jp-card .jp-tile, .jp-you-in { transition: none; } }

/* 관리 › 설정 '가입 페이지' 묶음(joinLookSec) — 로고 · 팀 색만. 행 문법은 v5 .gl-row */
.jp-look .jp-tile { width: 40px; height: 40px; margin: 0; border-radius: 12px; font-size: 18px; rotate: none; box-shadow: inset 0 0 0 1px rgba(23, 21, 15, .06); }
.jp-look .jp-tile.has-img { box-shadow: inset 0 0 0 1px var(--line); }
.jp-look-logo .gl-tx { flex: 1; min-width: 0; }
.jp-look .jp-look-file { flex: none; max-width: 260px; } /* 모양은 관리 화면의 파일 칸 그대로(v4-app.css) */
.jp-look-acc { flex-wrap: wrap; row-gap: var(--s-2); }
.jp-sws { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; }
.jp-sw { position: relative; display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; }
.jp-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jp-sw span { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(23, 21, 15, .16); transition: box-shadow var(--dur-1) var(--ease-out); }
.jp-sw span.is-mono { background: conic-gradient(from 225deg, #17150f 0 50%, #fafafa 50% 100%); }
.jp-sw input:checked + span { box-shadow: inset 0 0 0 .5px rgba(23, 21, 15, .16), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.jp-sw input:focus-visible + span { outline: var(--focus); outline-offset: 5px; }
.jp-look-go { justify-content: space-between; }
.jp-look-view { display: inline-flex; align-items: center; gap: var(--s-1); font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); }
.jp-look-view > svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .jp-look-view:hover { color: var(--ink); } }
@media (max-width: 699px) {
  .jp-look-logo { flex-wrap: wrap; row-gap: var(--s-2); padding-block: var(--s-3); }
  .jp-look .jp-look-file { flex-basis: 100%; max-width: none; }
  .jp-sws { justify-content: flex-start; margin-left: calc(-1 * var(--s-1)); width: 100%; }
}

/* 모집 공고 · 지원서 · 내 페이지에 올린 글(크루 · 팀플)의 팀 한 줄 — 팀 사이트 바 대신 본문 맨 위(src/joinpage-view.js joinTeamLine), 누르면 가입 페이지 */
.jp-line { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); margin: 0 0 var(--s-4); font: 600 var(--t-footnote)/1.3 var(--font); color: var(--ink-2); text-decoration: none; }
.jp-line-t { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; overflow: hidden; background: var(--wash-2); color: var(--ink); font: 700 12px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line); }
.jp-line-t img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.jp-line-w + .rc-draftbar { margin-top: 0; }
.art-top > .jp-line { margin: 0; } /* 내 페이지에 올린 글 — 뒤로 알약 자리 */
@media (hover: hover) and (pointer: fine) {
  .jp-line { transition: color var(--dur-1) var(--ease-out); }
  .jp-line:hover { color: var(--ink); }
}

/* 모집 중 · 예정 공고(src/recruit.js joinRecruitBanner — 예전 가입 화면과 같은 안내) — 얼굴 줄과 행동 사이, 카드 폭 그대로 */
.jp-rc { width: 100%; margin-top: var(--s-6); text-align: left; }
.jp-rc .rc-join { margin: 0; padding: 0; border: 0; background: none; } /* 카드 안 상자 하나 — 바깥 테두리는 카드가 대신한다 */