/* 報名端｜規格：docs/10 §3、§4、docs/08 §1
   ------------------------------------------------------------------
   R-UI-005：這裡**沒有** @media (prefers-color-scheme)。深淺兩套色一律
             由 css/tokens.css 的 [data-theme] 提供。
   R-UI-006：最小驗證寬度 320px。表單欄位一律單欄，不做兩欄並排——
             320px 上兩欄的輸入框會窄到看不見自己打了什麼。

   命名一律 reg- 前綴。 */

.reg{
  max-width:var(--page-max);margin:0 auto;
  padding:var(--sp-4) var(--sp-3) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-4);
}

/* ── 頁首 ───────────────────────────────────────────────── */
.reg__head{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.reg__back{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:var(--tap);min-height:var(--tap);color:var(--text-primary);
}
.reg__headText{display:flex;flex-direction:column;min-width:0}
.reg__headText strong{
  font-size:var(--fs-lg);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.reg__headSub{font-size:var(--fs-xs);color:var(--text-secondary)}

.reg__hero{text-align:center;padding:var(--sp-4) 0 0}
.reg__title{font-size:var(--fs-xl);color:var(--text-primary)}
.reg__sub{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--text-secondary)}

/* ── 卡片與提示 ─────────────────────────────────────────── */
.reg__card, .reg__box{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);
}
.reg__box--warn{
  background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text);
}
.reg__box--warn .reg__note{color:var(--warn-text);opacity:.9}

.reg__cardHead{
  font-size:var(--fs-md);color:var(--text-primary);
  display:flex;align-items:center;gap:var(--sp-2);
}
.reg__note{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6}
.reg__fine{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.6}
.reg__open{
  font-size:var(--fs-md);color:var(--success);
  display:flex;align-items:center;gap:var(--sp-2);
}

.reg__statusRow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.reg__btnRow{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.reg__btnRow > .btn{flex:1 1 auto;min-width:0}

.reg__badge{
  flex:none;font-size:var(--fs-xs);padding:2px var(--sp-2);border-radius:999px;
  background:var(--bg-input);color:var(--text-secondary);
}
.reg__badge--approved{background:var(--ok-bg);color:var(--success)}
.reg__badge--submitted{background:var(--info-bg);color:var(--info)}
.reg__badge--rejected{background:var(--danger-bg);color:var(--danger)}

/* ── 流程說明 ───────────────────────────────────────────── */
.reg__flow{display:flex;flex-direction:column;gap:var(--sp-2)}
.reg__flow + .reg__flow{
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border);
}
.reg__flowHead{margin:0;font-size:var(--fs-sm);color:var(--accent)}
.reg__steps{display:flex;flex-direction:column;gap:var(--sp-3)}
.reg__step{display:flex;gap:var(--sp-3);align-items:flex-start}
.reg__stepNo{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-bg);color:var(--accent);font-size:var(--fs-sm);
}
.reg__stepText{display:flex;flex-direction:column;gap:2px;min-width:0}
.reg__stepText strong{font-size:var(--fs-sm);color:var(--text-primary)}
.reg__stepText span{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.6}

.reg__divs{display:flex;flex-direction:column;gap:var(--sp-2)}
.reg__div{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);background:var(--bg-elevated);border-radius:var(--r-sm);
}
.reg__div strong{font-size:var(--fs-sm);color:var(--text-primary)}
.reg__divMeta{font-size:var(--fs-xs);color:var(--text-muted)}
/* 規章上的正式名稱。灰一階，讓 U 制的主標籤仍然是視覺重心 */
.reg__divOfficial{font-size:var(--fs-xs);color:var(--text-secondary)}

/* ── 表單 ───────────────────────────────────────────────── */
.reg__field{display:flex;flex-direction:column;gap:var(--sp-1)}
.reg__label{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--text-primary);
}
.reg__req{
  font-size:var(--fs-xs);color:var(--danger);
  background:var(--danger-bg);padding:0 6px;border-radius:999px;
}
.reg__hint{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.6}

/* 輸入框最小高度用 --tap：手指點得到，而且 iOS 上字級 ≥16px 才不會自動放大頁面 */
.reg__input, .reg__textarea, .reg__codeInput{
  width:100%;min-height:var(--tap);
  padding:var(--sp-2) var(--sp-3);
  font-size:16px;font-family:inherit;
  color:var(--text-primary);background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--r-sm);
}
.reg__textarea{min-height:calc(var(--tap) * 2);resize:vertical;line-height:1.6}
.reg__input:focus, .reg__textarea:focus, .reg__codeInput:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}

/* 民國年生日：三格數字。窄機也要一列排得下，所以每格用 flex 而不是固定寬 */
.reg__form{display:flex;flex-direction:column;gap:var(--sp-3)}
.reg__rocRow{display:flex;gap:var(--sp-2);align-items:center}
.reg__rocPart{display:flex;align-items:center;gap:4px;flex:1 1 0;min-width:0}
.reg__rocInput{
  flex:1 1 auto;min-width:0;text-align:center;
  font-family:var(--font-num);letter-spacing:.04em;
}
.reg__rocUnit{flex:none;font-size:var(--fs-sm);color:var(--text-secondary)}
.reg__hint--err{color:var(--danger)}

.reg__codeRow{display:flex;gap:var(--sp-2);align-items:stretch}
.reg__codeInput{
  flex:1 1 auto;min-width:0;
  font-family:var(--font-num);letter-spacing:.16em;text-transform:uppercase;
}
.reg__codeRow .btn{flex:none}

/* ── 邀請碼 ─────────────────────────────────────────────── */
.reg__code{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  background:var(--bg-elevated);border-radius:var(--r-sm);padding:var(--sp-3);
}
.reg__codeLabel{font-size:var(--fs-xs);color:var(--text-muted);flex:none}
.reg__codeValue{
  font-family:var(--font-num);font-size:var(--fs-lg);letter-spacing:.2em;
  color:var(--text-primary);user-select:all;
}

/* ── 名單 ───────────────────────────────────────────────── */
.reg__list{display:flex;flex-direction:column;gap:var(--sp-2)}
.reg__member{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3);background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-sm);
}
.reg__memberInfo{display:flex;flex-direction:column;gap:2px;flex:1 1 140px;min-width:0}
.reg__memberName{
  font-size:var(--fs-sm);color:var(--text-primary);
  overflow-wrap:anywhere;line-height:1.5;
}
.reg__memberMeta{font-size:var(--fs-xs);color:var(--text-muted)}
.reg__member .reg__btnRow{flex:0 0 auto}

@media (max-width:359px){
  .reg{padding-left:var(--sp-2);padding-right:var(--sp-2)}
  .reg__codeValue{font-size:var(--fs-md);letter-spacing:.12em}
  /* 窄機把成員的動作鈕換到下一行，才不會把姓名擠成兩個字 */
  .reg__member .reg__btnRow{flex:1 1 100%}
}

/* ── 眼鏡切結書／取消報名（2026-09-05）── */
.reg__checkRow{display:flex;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-3) 0;font-size:var(--fs-sm);line-height:1.5}
.reg__checkRow input{margin-top:.2em;width:1.2em;height:1.2em;flex:none}
.reg__waiver{font-size:var(--fs-sm);line-height:1.7}
.reg__waiver h2{font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-2)}
.reg__waiver h3{font-size:var(--fs-md);margin:var(--sp-3) 0 var(--sp-1)}
.reg__waiver ol{padding-left:1.4em}
.reg__signRow{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3)}
.reg__signRow span{flex:1 1 12rem;border-bottom:1px solid var(--border-strong);padding:var(--sp-3) 0 var(--sp-1)}
@media print{.appbar,.reg__back,.btn,.reg__noPrint{display:none!important}.reg__card{box-shadow:none;border:0}}

/* ── 報名圖文教學（彈窗，2026-09-06）────────────────────────
   以手機窄版為主：截圖 390×560 用 aspect-ratio 撐住，SVG 標記疊在同一個框裡，
   縮到 320px 也對得準。深淺色一律走 tokens（R-UI-005）。 */
.tut{align-items:flex-end;padding:0}
@media (min-width:600px){.tut{align-items:center;padding:var(--sp-4)}}
.tut__panel{
  display:flex;flex-direction:column;gap:var(--sp-2);
  max-width:440px;width:100%;padding:var(--sp-3) var(--sp-3) var(--sp-3);
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
@media (min-width:600px){.tut__panel{border-radius:var(--r-lg)}}
.tut__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.tut__title{margin:0;font-size:var(--fs-lg);color:var(--text-primary)}
.tut__close{flex:none;color:var(--text-secondary)}

.tut__tabs{display:flex;gap:var(--sp-2)}
.tut__tab{
  flex:1 1 0;min-width:0;min-height:var(--tap);padding:var(--sp-1) var(--sp-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:var(--control-radius);border:1px solid var(--control-border);background:var(--control-bg);
  color:var(--text-secondary);cursor:pointer;
}
.tut__tab strong{font-size:var(--fs-sm);color:inherit}
.tut__tab span{font-size:var(--fs-xs);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tut__tab.is-on{background:var(--control-selected-bg);border-color:var(--control-selected-border);color:var(--control-selected-text)}
.tut__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 進度圖（SVG 的顏色由 class 給，才會跟著主題換） */
.tut__strip{display:block;width:100%;height:auto;overflow:visible}
.tut__rail{stroke:var(--border-strong);stroke-width:3;stroke-linecap:round}
.tut__rail--done{stroke:var(--accent)}
.tut__halo{fill:var(--accent-bg)}
.tut__node{stroke-width:2}
.tut__node--done{fill:var(--accent);stroke:var(--accent)}
.tut__node--active{fill:var(--accent);stroke:var(--accent)}
.tut__node--todo{fill:var(--bg-card);stroke:var(--border-strong)}
.tut__num{font-size:13px;font-weight:700;font-family:var(--font-num)}
.tut__num--active{fill:var(--text-on-accent)}
.tut__num--todo{fill:var(--text-muted)}
.tut__tick{fill:none;stroke:var(--text-on-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tut__label{font-size:11px;fill:var(--text-muted)}
.tut__label--active{fill:var(--accent);font-weight:700}
.tut__label--done{fill:var(--text-secondary)}

/* 截圖區：可捲動的中段 */
.tut__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.tut__who{
  align-self:flex-start;font-size:var(--fs-xs);font-weight:700;
  padding:2px var(--sp-2);border-radius:var(--r-full);
  background:var(--info-bg);color:var(--info);
}
.tut__shot{
  position:relative;flex:none;aspect-ratio:390/560;
  width:min(100%,calc(46vh * .696));width:min(100%,calc(46dvh * .696));min-width:200px;
  margin:0 auto;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--bg-elevated);
}
.tut__img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.tut__overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tut__markHalo{fill:var(--accent);opacity:.14}
.tut__markBox{fill:none;stroke:var(--accent);stroke-width:3.5}
.tut__badge{fill:var(--accent);stroke:var(--bg-card);stroke-width:2.5}
.tut__badgeNum{font-size:15px;font-weight:800;fill:var(--text-on-accent);font-family:var(--font-num)}
@media (prefers-reduced-motion:no-preference){
  .tut__markHalo{animation:tutPulse 1.6s ease-in-out infinite}
  @keyframes tutPulse{0%,100%{opacity:.10}50%{opacity:.26}}
}
.tut__stepTitle{margin:var(--sp-1) 0 0;font-size:var(--fs-md);color:var(--text-primary);line-height:1.4}
.tut__stepDesc{margin:0;font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.65}

.tut__foot{display:flex;align-items:center;gap:var(--sp-2);padding-top:var(--sp-1)}
.tut__foot .btn{min-height:var(--tap)}
.tut__prev{flex:0 0 auto}
.tut__next{flex:1 1 auto}
.tut__count{flex:none;font-size:var(--fs-sm);color:var(--text-muted);min-width:3.2em;text-align:center}

/* 報名首頁的入口 */
.reg__guide{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--accent-bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.reg__guideText{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.reg__guideText strong{font-size:var(--fs-sm);color:var(--text-primary)}
.reg__guideText span{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.5}
.reg__guideBtn{flex:none;background:var(--bg-card)}
@media (max-width:359px){
  .reg__guide{flex-direction:column;align-items:stretch}
  .tut__tab span{display:none}
}

/* ── 系統退件、邀請連結（2026-09-06 驗收）── */
.reg__rejected{display:flex;flex-direction:column;gap:var(--sp-2)}
.reg__rejectedRow{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3);border-radius:var(--r-sm);
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);
}
.reg__rejectedRow .reg__memberInfo{flex:1 1 160px}
.reg__rejectedRow .reg__memberMeta{color:inherit;opacity:.9}
.reg__link{
  display:block;width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-xs);font-family:var(--font-num);color:var(--text-secondary);
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);
  overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;
}