.join-page, .join-page * { box-sizing: border-box; }
.join-page { padding: clamp(32px,5vw,68px) 24px 80px; font-family:var(--font-sans); color:var(--color-fg); background:linear-gradient(180deg,#f8fafc 0,#fff 420px); }
.join-page a { color:inherit; text-decoration:none; }
.join-page input, .join-page select, .join-page textarea, .join-page button { font:inherit; }
.join-wrap { width:100%; max-width:980px; margin:0 auto; }
.join-heading { text-align:center; margin-bottom:28px; }
.join-heading > span { color:var(--color-primary); font-size:10px; font-weight:800; letter-spacing:.14em; }
.join-heading h1 { margin:8px 0 7px; font-size:clamp(1.75rem,4vw,2.35rem); letter-spacing:-.045em; }
.join-heading p { margin:0; color:var(--color-fg-muted); font-size:var(--fs-sm); }
.join-heading em { color:var(--color-danger); font-style:normal; }
.join-steps { display:flex; max-width:620px; margin:0 auto 28px; padding:0; list-style:none; }
.join-steps li { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--gray-400); font-size:11px; }
.join-steps li:not(:last-child)::after { position:absolute; z-index:0; left:calc(50% + 22px); right:calc(-50% + 22px); top:16px; height:2px; background:var(--gray-200); content:''; }
.join-steps b { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; border:2px solid var(--gray-200); border-radius:50%; background:#fff; font-size:12px; }
.join-steps .is-active { color:var(--color-primary); font-weight:700; }
.join-steps .is-active b { border-color:var(--color-primary); background:var(--color-primary); color:#fff; box-shadow:0 0 0 5px var(--color-primary-soft); }
.join-steps .is-done { color:var(--color-success); }
.join-steps .is-done b { border-color:var(--color-success); background:var(--color-success-soft); color:var(--color-success); }
.join-steps .is-done::after { background:#86efac!important; }
.join-card { margin-bottom:18px; padding:30px; border:1px solid var(--color-border); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.join-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.join-card-head h2 { margin:0; font-size:var(--fs-md); letter-spacing:-.025em; }
.join-card-head p { margin:4px 0 0; color:var(--color-fg-muted); font-size:var(--fs-xs); }
.join-required,.join-optional { flex:0 0 auto; padding:3px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.join-required { background:var(--color-primary-soft); color:var(--color-primary); }
.join-optional { background:var(--color-surface-2); color:var(--color-fg-muted); }
.join-terms { height:230px; overflow:auto; padding:20px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--gray-600); font-size:12px; line-height:1.75; white-space:normal; }
.join-agree-check { display:flex; align-items:center; gap:9px; margin-top:14px; color:var(--gray-700); font-size:13px; cursor:pointer; }
.join-agree-check input,.join-mini-check input,.join-all-agree input { width:18px; height:18px; margin:0; accent-color:var(--color-primary); }
.join-privacy-head { margin-top:34px; }
.join-privacy-table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:12px; }
.join-privacy-table { width:100%; min-width:680px; border-collapse:collapse; font-size:12px; }
.join-privacy-table th,.join-privacy-table td { padding:13px 14px; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:top; }
.join-privacy-table th { background:var(--color-surface); color:var(--color-fg-muted); font-size:11px; }
.join-privacy-table tr:last-child td { border-bottom:0; }
.join-all-agree { margin:28px -30px -30px; padding:20px 30px; border-top:1px solid var(--color-border); background:var(--color-primary-soft); }
.join-all-agree label { display:flex; align-items:center; gap:11px; cursor:pointer; }
.join-all-agree span,.join-all-agree small { display:block; }
.join-all-agree b { font-size:14px; }.join-all-agree small { margin-top:2px; color:var(--color-fg-muted); font-size:11px; font-weight:400; }
.join-actions,.join-submit-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; }
.join-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border:1px solid var(--color-border-strong); border-radius:11px; background:#fff; color:var(--gray-700)!important; font-size:13px; font-weight:700; cursor:pointer; }
.join-btn:hover { background:var(--color-surface); }.join-btn.is-primary { border-color:var(--color-primary); background:var(--color-primary); color:#fff!important; box-shadow:0 7px 18px rgb(79 70 229/.2); }.join-btn.is-primary:hover { background:var(--color-primary-hover); }
.join-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; }
.join-field { min-width:0; }.join-field.is-wide,.join-mini-check.is-wide { grid-column:1/-1; }
.join-field > label { display:block; margin-bottom:7px; color:var(--gray-700); font-size:12px; font-weight:700; }.join-field em { color:var(--color-danger); font-style:normal; }
.join-field input,.join-field select,.join-field textarea { width:100%; min-height:46px; padding:9px 12px; outline:0; border:1px solid var(--color-border-strong); border-radius:10px; background:#fff; color:var(--color-fg); font-size:13px; }
.join-field textarea { resize:vertical; line-height:1.6; }.join-field input:focus,.join-field select:focus,.join-field textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 4px var(--color-primary-soft); }
.join-inline,.join-password { position:relative; display:flex; gap:8px; }.join-inline input { flex:1; min-width:0; }.join-inline button { flex:0 0 auto; min-width:84px; border:1px solid var(--color-border-strong); border-radius:10px; background:var(--color-surface); color:var(--gray-700); font-size:12px; font-weight:700; cursor:pointer; }
.join-password input { padding-right:54px; }.join-pw-toggle { position:absolute; right:7px; top:6px; height:34px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:var(--color-fg-muted); font-size:11px; cursor:pointer; }
.join-help { min-height:18px; margin:6px 0 0; color:var(--color-fg-muted); font-size:11px; }.join-help.is-ok { color:var(--color-success); }.join-help.is-error { color:var(--color-danger); }
.join-mini-check { display:flex; align-items:center; gap:8px; color:var(--color-fg-muted); font-size:12px; cursor:pointer; }
.join-date-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.join-file { display:flex!important; align-items:center; min-height:66px; padding:12px 14px; border:1px dashed var(--color-border-strong); border-radius:10px; background:var(--color-surface); cursor:pointer; }.join-file input { position:absolute; width:1px; height:1px; opacity:0; }.join-file span,.join-file b,.join-file small { display:block; }.join-file b { color:var(--color-primary); font-size:12px; }.join-file small { margin-top:2px; color:var(--color-fg-muted); font-size:11px; font-weight:400; }
.join-submit-bar { padding:13px; border:1px solid var(--color-border); border-radius:14px; background:#fff; box-shadow:var(--shadow-lg); }
.join-submit-bar .join-btn.is-primary:disabled { opacity:.65; cursor:wait; }
.join-wrap.is-complete { max-width:860px; }.join-complete-card { text-align:center; padding:46px; }.join-success-mark { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 20px; border-radius:50%; background:var(--color-success-soft); color:var(--color-success); font-size:30px; font-weight:800; box-shadow:0 0 0 10px rgb(220 252 231/.55); }.join-complete-card h2 { margin:0; font-size:var(--fs-xl); }.join-complete-card > p { margin:8px 0 24px; color:var(--color-fg-muted); font-size:13px; }
.join-complete-notice { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 22px; padding:12px 16px; border-radius:10px; background:var(--color-primary-soft); color:var(--color-primary-soft-fg); font-size:12px; }.join-complete-notice span { color:var(--color-fg-muted); }
.join-complete-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0; text-align:left; }.join-complete-benefits div { padding:17px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); }.join-complete-benefits b,.join-complete-benefits span { display:block; }.join-complete-benefits b { font-size:13px; }.join-complete-benefits span { margin-top:5px; color:var(--color-fg-muted); font-size:11px; line-height:1.55; }.join-actions.is-centered { justify-content:center; }
@media(max-width:700px){.join-page{padding:26px 14px 50px}.join-card{padding:22px 18px}.join-form-grid{grid-template-columns:1fr}.join-field.is-wide,.join-mini-check.is-wide{grid-column:auto}.join-all-agree{margin:24px -18px -22px;padding:18px}.join-actions,.join-submit-bar{align-items:stretch;flex-direction:column}.join-btn{width:100%}.join-complete-card{padding:34px 20px}.join-complete-benefits{grid-template-columns:1fr}.join-complete-notice{align-items:flex-start;flex-direction:column;gap:2px}.join-steps span{font-size:10px}}
@media(max-width:430px){.join-inline{align-items:stretch;flex-direction:column}.join-inline button{height:42px}.join-date-row{grid-template-columns:1fr}.join-steps li:not(:last-child)::after{left:calc(50% + 18px);right:calc(-50% + 18px)}}