@charset "UTF-8";
/* join.css — 가입 문의·신청(/join.html) · 신청서 서명(/j/{token}) · 서명본 한 장(/j/{token}/doc · 운영자 보기)
   로그인 화면과 같은 결(흰 바탕 · 파랑→보라 그라데이션 단추). login.css 는 두 화면이 같이 쓰므로 건드리지 않고 따로 둔다. */
:root{
  --j-blue:#0d8ae6; --j-vio:#7c3aed; --j-mag:#b429f9; --j-ink:#0f1222; --j-txt:#1c2230; --j-sub:#5f6b85;
  --j-line:#e2e7f2; --j-field:#f3f5fa; --j-field-bd:#d9dfeb; --j-red:#c62839; --j-ok:#0f9d58; --j-acc:#2f5fe0;
}
*{box-sizing:border-box}
html,body{margin:0}
body.ja-body{font-family:var(--font-sans, 'Pretendard','Malgun Gothic',sans-serif); color:var(--j-txt); min-height:100vh;
  background:radial-gradient(640px 420px at 12% 0%, rgba(0,169,255,.08), transparent 62%),
             radial-gradient(560px 400px at 92% 100%, rgba(180,41,249,.07), transparent 62%),
             linear-gradient(165deg,#fdfdff 0%,#f4f6fc 100%)}
.ja-top{display:flex; align-items:center; gap:14px; max-width:860px; margin:0 auto; padding:22px 16px 6px}
.ja-top img{width:132px; height:auto; display:block}
.ja-top .t{font-size:15px; font-weight:800; color:#33405c}
.ja-top .sp{flex:1}
.ja-top a{font-size:13px; color:var(--j-acc); font-weight:700; text-decoration:none}
.ja-wrap{max-width:860px; margin:0 auto; padding:10px 16px 60px}

/* 탭 두 장 */
.ja-tabs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 16px}
.ja-tab{border:1.5px solid var(--j-line); background:#fff; border-radius:14px; padding:16px 18px; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit; transition:.15s; box-shadow:0 6px 18px rgba(40,60,110,.05)}
.ja-tab b{display:block; font-size:16px; font-weight:900; color:var(--j-ink)}
.ja-tab small{display:block; margin-top:4px; font-size:12.5px; color:var(--j-sub)}
.ja-tab.on{border-color:#7c8cf8; box-shadow:0 0 0 3px rgba(75,108,245,.18), 0 10px 26px rgba(40,60,110,.10)}
.ja-tab:hover{border-color:#aab6f5}

/* 단계 */
.ja-steps{display:flex; gap:6px; margin:0 0 14px; padding:0; list-style:none; flex-wrap:wrap}
.ja-steps li{flex:1; min-width:120px; background:#fff; border:1px solid var(--j-line); border-radius:10px; padding:8px 10px; font-size:12px; color:var(--j-sub)}
.ja-steps li b{display:block; font-size:12.5px; color:var(--j-ink)}
.ja-steps li.on{border-color:#7c8cf8; background:#f4f6ff}
.ja-steps li.done{border-color:#bfe6cf; background:#f2fbf6}

/* 카드·섹션 */
.ja-card{background:rgba(255,255,255,.96); border:1px solid var(--j-line); border-radius:16px; padding:22px 24px; box-shadow:0 18px 50px rgba(40,60,110,.10)}
.ja-sec{margin:0 0 20px}
.ja-sec > h3{font-size:14px; font-weight:900; color:#33405c; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--j-line)}
.ja-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
.ja-grid .full{grid-column:1 / -1}
.ja-f{display:flex; flex-direction:column; gap:4px; min-width:0}
.ja-f > label{font-size:12px; font-weight:700; color:#4a5672}
.ja-f > label .req{color:var(--j-red); margin-left:2px}
.ja-in{height:42px; border:1px solid var(--j-field-bd); background:var(--j-field); border-radius:8px; padding:0 12px; font-size:14px; color:var(--j-txt); font-family:inherit; width:100%}
textarea.ja-in{height:auto; min-height:84px; padding:10px 12px; resize:vertical; line-height:1.5}
.ja-in:focus{outline:none; background:#fff; border-color:#4b6cf5; box-shadow:0 0 0 3px rgba(75,108,245,.25)}
.ja-in.err{border-color:var(--j-red); box-shadow:0 0 0 3px rgba(198,40,57,.15)}
.ja-in[readonly]{background:#eef1f7}
.ja-row{display:flex; gap:8px; align-items:center}
.ja-row .ja-in{flex:1}
.ja-note{font-size:11.5px; color:#8590a6}
.ja-note.ok{color:var(--j-ok)} .ja-note.bad{color:var(--j-red)}
.ja-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* 두 갈래 선택 = 누름 단추 */
.ja-seg{display:inline-flex; align-self:flex-start; border:1px solid var(--j-field-bd); border-radius:8px; overflow:hidden; height:42px}
.ja-seg button{border:none; background:#fff; padding:0 16px; font-size:13.5px; font-weight:700; color:#5b6680; cursor:pointer; font-family:inherit}
.ja-seg button + button{border-left:1px solid var(--j-field-bd)}
.ja-seg button.on{background:#eef1ff; color:#2f4fd8}

.ja-btn{height:42px; border:1px solid var(--j-field-bd); background:#fff; border-radius:8px; padding:0 14px; font-size:13.5px; font-weight:700; color:#33405c; cursor:pointer; font-family:inherit; white-space:nowrap}
.ja-btn:hover{border-color:#9fb0f0}
.ja-go{width:100%; height:52px; border:none; border-radius:10px; margin-top:6px;
  background:linear-gradient(95deg,var(--j-blue),var(--j-vio) 55%,var(--j-mag)); background-size:170% 100%;
  color:#fff; font-size:15.5px; font-weight:800; letter-spacing:.4px; cursor:pointer; box-shadow:0 10px 26px rgba(124,58,237,.25); font-family:inherit}
.ja-go:hover{background-position:90% 0}
.ja-go:disabled{opacity:.6; cursor:default}

/* 패키지 칩 */
.ja-pkgs{display:flex; flex-wrap:wrap; gap:8px}
.ja-pkg{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--j-field-bd); background:#fff; border-radius:999px; padding:7px 13px; font-size:13px; font-weight:700; cursor:pointer; user-select:none; color:#33405c}
.ja-pkg small{font-weight:600; color:#7b86a0; font-size:11.5px}
.ja-pkg.on{border-color:#4b6cf5; background:#eef1ff; color:#2240c4}
.ja-pkg.base{cursor:default; border-style:dashed}

/* 파일 */
.ja-files{display:flex; flex-direction:column; gap:6px}
.ja-file{display:flex; align-items:center; gap:8px; font-size:13px; background:#f6f8fc; border:1px solid var(--j-line); border-radius:8px; padding:6px 10px}
.ja-file .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ja-file .k{font-size:11px; font-weight:800; color:#2f4fd8; background:#eef1ff; border-radius:999px; padding:1px 8px}
.ja-file button{border:none; background:none; color:#a03040; cursor:pointer; font-size:13px}

/* 동의 */
.ja-agree{border:1px solid var(--j-line); border-radius:10px; overflow:hidden; background:#fff}
.ja-agree .row{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:13.5px}
.ja-agree .row + .row{border-top:1px solid var(--j-line)}
.ja-agree .row.all{background:#f6f8ff; font-weight:800}
.ja-agree input{width:18px; height:18px; accent-color:#4b6cf5; margin:0; flex:none}
.ja-agree label{flex:1; cursor:pointer}
.ja-agree .req{color:var(--j-red); font-size:11.5px; font-weight:700; margin-left:4px}
.ja-agree details{padding:0 12px 10px 40px; font-size:12px; color:#5b6680}
.ja-agree summary{cursor:pointer; color:var(--j-acc); font-weight:700; font-size:12px}

.ja-msg{min-height:22px; font-size:12.5px; font-weight:700; color:var(--j-red); margin:8px 2px 0}
.ja-msg.ok{color:var(--j-ok)}

/* 완료·상태 */
.ja-done{text-align:center; padding:26px 10px}
.ja-done .big{font-size:40px; line-height:1}
.ja-done h2{font-size:19px; margin:12px 0 6px; color:var(--j-ink)}
.ja-done p{font-size:13.5px; color:var(--j-sub); margin:4px 0}
.ja-done .act{display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.ja-done .act a{display:inline-flex; align-items:center; height:42px; padding:0 18px; border-radius:8px; font-weight:800; font-size:13.5px; text-decoration:none; border:1px solid var(--j-field-bd); color:#33405c; background:#fff}
.ja-done .act a.p{background:linear-gradient(95deg,var(--j-blue),var(--j-vio)); color:#fff; border:none}
.ja-band{border-radius:10px; padding:10px 14px; font-size:13px; font-weight:700; margin-bottom:12px}
.ja-band.info{background:#eef4ff; color:#2240a0} .ja-band.warn{background:#fff6e0; color:#8a5a00} .ja-band.bad{background:#fdecee; color:#a32034} .ja-band.ok{background:#eaf8f0; color:#0b7a43}

/* 서명 */
.ja-docbox{border:1px solid var(--j-line); border-radius:12px; background:#fff; max-height:56vh; overflow:auto; padding:6px 18px; margin-bottom:14px}
.ja-pad{position:relative; border:1.5px dashed #b9c3da; border-radius:10px; background:#fbfcff; height:180px; touch-action:none}
.ja-pad canvas{width:100%; height:100%; display:block; cursor:crosshair}
.ja-pad .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#a6b0c6; font-size:14px; pointer-events:none}

/* ══ 신청서 문서(서명 페이지 · 서명본 · 운영자 보기) ══ */
.ja-doc{font-size:13px; line-height:1.65; color:#1d2433; max-width:780px; margin:0 auto}
.ja-doc h1{font-size:21px; text-align:center; margin:14px 0 4px; letter-spacing:2px}
.ja-doc .ja-to{text-align:right; font-weight:700; margin:0 0 10px}
.ja-doc h2{font-size:14.5px; margin:18px 0 6px; padding-left:8px; border-left:4px solid #4b6cf5}
.ja-doc h3{font-size:13px; margin:12px 0 2px}
.ja-doc p{margin:2px 0}
.ja-t{width:100%; border-collapse:collapse; font-size:12.5px; margin:4px 0}
.ja-t th, .ja-t td{border:1px solid #cfd6e4; padding:6px 8px; vertical-align:top; text-align:left}
.ja-t th{background:#f2f5fb; width:16%; white-space:nowrap; font-weight:700; color:#33405c}
.ja-ul, .ja-ol{margin:4px 0; padding-left:20px}
.ja-ul li, .ja-ol li{margin:3px 0}
.ja-terms{border:1px solid #e1e6f0; border-radius:8px; padding:4px 12px 10px; background:#fbfcfe}
.ja-sign-line{margin-top:16px !important; font-weight:700}
.ja-attach{color:#5b6680; font-size:12px}
.ja-sig{margin-top:18px}
.ja-sign-img{max-height:90px; max-width:300px; display:block}
body.ja-print{background:#fff; padding:20px 16px}
@media print{ body.ja-print{padding:0} .ja-doc{max-width:none} }

@media (max-width:720px){
  .ja-top img{width:108px}
  .ja-tabs{grid-template-columns:1fr}
  .ja-grid{grid-template-columns:1fr}
  .ja-card{padding:18px 16px}
  .ja-t th{width:28%}
  .ja-docbox{padding:4px 10px}
}