.join-upimd-page{padding:clamp(18px,3vw,34px);min-height:calc(100vh - 150px);color:#f8edf6}
.join-campus{width:min(1120px,100%);margin:0 auto;display:grid;gap:18px}
.join-campus-hero{position:relative;overflow:hidden;min-height:250px;border:1px solid rgba(238,143,195,.34);border-radius:28px;background:linear-gradient(90deg,rgba(12,8,23,.97) 0%,rgba(16,10,28,.9) 46%,rgba(16,10,28,.28) 100%),url('../images/clubs/sakura-clan-hall-v10.519.png') center 42%/cover no-repeat;box-shadow:0 24px 70px rgba(4,2,12,.46)}
.join-campus-hero::after{content:"";position:absolute;inset:auto -12% -55% 30%;height:220px;background:radial-gradient(ellipse,rgba(235,99,179,.24),transparent 68%);pointer-events:none}
.join-campus-copy{position:relative;z-index:1;width:min(610px,100%);padding:clamp(26px,5vw,56px)}
.join-campus-eyebrow{display:block;margin-bottom:10px;color:#f0a8d1;font-size:12px;font-weight:900;letter-spacing:.2em}
.join-campus-copy h1{margin:0;font:800 clamp(32px,5vw,58px)/.98 "Arial",sans-serif;letter-spacing:-.045em}
.join-campus-copy h1 span{display:block;color:#f0a8d1}
.join-campus-copy p{max-width:570px;margin:18px 0 0;color:#e1d1df;font-size:clamp(15px,1.7vw,18px);line-height:1.6}
.join-campus-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px}
.join-state-panel,.join-boundary-panel{border:1px solid rgba(220,160,199,.2);border-radius:24px;background:linear-gradient(145deg,rgba(30,20,41,.96),rgba(14,12,24,.98));box-shadow:0 18px 50px rgba(4,2,12,.26)}
.join-state-panel{padding:clamp(22px,4vw,38px)}
.join-boundary-panel{padding:26px}
.join-state-kicker{display:block;color:#d696c0;font-size:11px;font-weight:900;letter-spacing:.18em}
.join-state-panel h2{margin:7px 0 10px;font-size:clamp(25px,3vw,36px);line-height:1.1}
.join-state-panel>p{margin:0;color:#cbbdcd;line-height:1.65}
.join-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.join-actions .button{min-height:44px;padding:11px 18px}
.join-primary{background:linear-gradient(135deg,#ef8fc2,#b681ed)!important;border-color:transparent!important;color:#180d1c!important;font-weight:900!important}
.join-actions button:disabled{opacity:.48;cursor:not-allowed}
.join-cooldown{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:14px;border:1px solid rgba(239,143,194,.25);border-radius:14px;background:rgba(239,143,194,.07);color:#dbcbd9;font-size:13px;line-height:1.5}
.join-cooldown input{width:18px;height:18px;margin-top:1px;accent-color:#e88fbd}
.join-boundary-panel h3{margin:0 0 15px;font-size:19px}
.join-boundary-list{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.join-boundary-list li{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;color:#cdbfce;font-size:14px;line-height:1.5}
.join-boundary-list b{display:block;color:#f5e8f2}
.join-boundary-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(230,143,191,.3);border-radius:10px;background:rgba(230,143,191,.08);color:#ef9dca}
.join-optin-note{margin:20px 0 0;padding-top:17px;border-top:1px solid rgba(255,255,255,.08);color:#a99dac;font-size:12px;line-height:1.55}
.join-progress{display:grid;gap:9px;margin-top:22px}
.join-progress-item{display:grid;grid-template-columns:30px 1fr auto;gap:11px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)}
.join-progress-item strong{font-size:14px}
.join-progress-item small{color:#9f93a4;font-size:11px}
.join-progress-item .join-check{display:grid;place-items:center;width:27px;height:27px;border:1px solid #55445c;border-radius:50%;color:#89798f;font-size:12px;font-weight:900}
.join-progress-item.is-done{border-color:rgba(116,218,183,.22);background:rgba(69,174,139,.055)}
.join-progress-item.is-done .join-check{border-color:#66cfae;background:#66cfae;color:#10221c}
.join-progress-item.is-current{border-color:rgba(236,139,193,.42);box-shadow:inset 3px 0 #e88fbd}
.join-progress-item.is-current small{color:#efacd0}
.join-clan-banner{display:flex;align-items:center;gap:14px;margin-top:18px;padding:15px;border:1px solid rgba(232,143,189,.25);border-radius:16px;background:linear-gradient(90deg,rgba(232,143,189,.1),rgba(133,102,218,.06))}
.join-clan-banner img{width:48px;height:48px;object-fit:contain}
.join-clan-banner strong,.join-clan-banner small{display:block}
.join-state-panel.is-letter-open{position:relative;overflow:hidden;border-color:rgba(244,180,82,.42);background:radial-gradient(circle at 90% 0,rgba(245,174,75,.13),transparent 38%),linear-gradient(145deg,rgba(42,26,45,.98),rgba(14,12,24,.98));box-shadow:0 20px 70px rgba(224,117,178,.18)}
.join-state-panel.is-letter-open::after{content:"✦";position:absolute;right:28px;top:22px;color:rgba(245,190,95,.28);font-size:72px;line-height:1;filter:drop-shadow(0 0 16px rgba(246,178,72,.34));pointer-events:none}
.join-acceptance-letter{display:grid;gap:8px;margin-top:20px;padding:22px;border:1px solid rgba(244,190,99,.34);border-radius:18px;background:linear-gradient(135deg,rgba(244,190,99,.09),rgba(226,113,180,.08));box-shadow:inset 0 0 35px rgba(250,193,89,.035)}
.join-acceptance-letter strong{font-size:clamp(30px,5vw,48px);line-height:1;color:#f7d390;text-shadow:0 0 22px rgba(246,180,74,.24)}
.join-acceptance-letter small,.join-letter-seal{color:#d8b26f;font-size:10px;font-weight:900;letter-spacing:.18em}
.join-letter-route{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.join-letter-route span{padding:8px 10px;border:1px solid rgba(239,143,194,.2);border-radius:999px;background:rgba(18,12,25,.38);color:#ddcfdd;font-size:11px;font-weight:800}
.join-clan-banner small{margin-top:3px;color:#c4b5c5}
.join-loading{display:flex;align-items:center;gap:12px;color:#cfbfce}
.join-loading::before{content:"";width:18px;height:18px;border:2px solid rgba(238,143,195,.25);border-top-color:#ee8fc3;border-radius:50%;animation:join-spin .8s linear infinite}
@keyframes join-spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.join-campus-grid{grid-template-columns:1fr}.join-campus-hero{min-height:230px;background-position:62% 42%}.join-campus-hero::before{content:"";position:absolute;inset:0;background:rgba(9,7,18,.15)}}
@media(max-width:560px){.join-upimd-page{padding:12px}.join-campus{gap:12px}.join-campus-hero,.join-state-panel,.join-boundary-panel{border-radius:19px}.join-campus-hero{min-height:260px;background-position:68% center}.join-campus-copy{padding:24px 20px}.join-campus-copy h1{font-size:36px}.join-state-panel,.join-boundary-panel{padding:20px}.join-actions{display:grid}.join-actions .button{width:100%}.join-progress-item{grid-template-columns:28px 1fr}.join-progress-item>small:last-child{grid-column:2}}