/* ═══════════════════════════════════════════
   JOIN PAGE — dedicated styles
   ═══════════════════════════════════════════ */

.join-hero{
  padding:clamp(84px,14vh,120px) var(--px) clamp(32px,5vh,52px);
  background:radial-gradient(ellipse at 50% 80%,rgba(201,162,62,.04) 0%,var(--bg) 60%);
  text-align:center;
}
.join-hero h1{
  font-size:clamp(26px,6.5vw,38px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:10px;color:var(--t100);
}
.join-hero p{font-size:13px;color:var(--t35);line-height:1.7;font-weight:400}

/* Tabs */
.join-tabs{
  display:flex;gap:0;max-width:480px;margin:0 auto;
  border-bottom:1px solid var(--b06);
  position:sticky;top:0;z-index:50;background:var(--bg);
}
.join-tab{
  flex:1;padding:15px;text-align:center;
  font-size:12px;font-weight:600;color:var(--t35);
  cursor:pointer;transition:color .25s;position:relative;
  letter-spacing:.02em;background:none;border:none;
}
.join-tab.active{color:var(--t100)}
.join-tab::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;
  height:2px;background:var(--gold);border-radius:1px;
  transform:scaleX(0);transition:transform .3s var(--ease);
}
.join-tab.active::after{transform:scaleX(1)}

/* Sections */
.join-section{padding:clamp(36px,6vw,52px) var(--px)}
.join-section--alt{background:var(--bg-2)}
.jw{max-width:480px;margin:0 auto}
.join-divider{height:1px;background:var(--b03)}

/* Tab panels */
.tab-panel{animation:tabIn .35s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Form sub-headings */
.form-sub{font-size:12px;font-weight:700;color:var(--t90);margin-bottom:14px;letter-spacing:-.01em}
.form-hr{height:1px;background:var(--b06);margin:20px 0}

/* 후원 금액 grid — 2 column for 5 items */
.amt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.amt-opt{
  padding:13px 10px;text-align:center;
  font-size:13px;font-weight:600;color:var(--t50);
  background:var(--bg-card);border:1.5px solid var(--b06);border-radius:8px;
  cursor:pointer;transition:all .25s var(--ease);
}
.amt-opt:last-child{grid-column:1 / -1}
.amt-opt.sel{background:var(--t100);color:var(--bg);border-color:var(--t100)}
.amt-opt input{display:none}

.amt-custom{margin-bottom:16px;display:none}
.amt-custom input{
  width:100%;padding:13px 16px;
  border:1.5px solid var(--b06);border-radius:8px;
  font-size:16px;background:var(--bg-card);color:var(--t100);text-align:right;
  transition:border-color .25s;
}
.amt-custom input:focus{outline:none;border-color:var(--t50)}

.day-opts{display:flex;gap:8px;margin-bottom:16px}
.day-opt{
  flex:1;padding:12px;text-align:center;
  font-size:13px;font-weight:600;color:var(--t50);
  background:var(--bg-card);border:1.5px solid var(--b06);border-radius:8px;
  cursor:pointer;transition:all .25s var(--ease);
}
.day-opt.sel{background:var(--t100);color:var(--bg);border-color:var(--t100)}
.day-opt input{display:none}

/* Done box */
.done-box{
  display:none;text-align:center;padding:48px 0;
  opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.done-box.show{display:block;opacity:1;transform:none}
.done-icon{font-size:24px;color:var(--gold);margin-bottom:12px}
.done-box h3{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--t100);letter-spacing:-.02em}
.done-box p{font-size:12px;color:var(--t50);font-weight:400}
.done-sub{margin-top:6px;font-size:10px;color:var(--t20)}