/* 黑馬盃官網｜選手報名（長在盾牌背面上）
   座標一律是 1920×1080「場館座標」，跟 media/spin/back_4k.webp 一格一格對齊；js/reg.js 用鏡頭（縮放＋平移）移動整個場館。
   盾牌鋼面內緣（量過）：(962,150)(1230,345)(1220,605)(962,760)(698,598)(690,352)，字只准排在裡面。 */
#reg{--paint:#e3262c;position:fixed;inset:0;z-index:8;opacity:0;pointer-events:none;color:#efece6}
#reg.live{pointer-events:auto}
#reg button,#reg input,#reg select{font:inherit;color:inherit}
.r-view{position:absolute;inset:0;perspective:1400px;overflow:hidden}
.r-cam{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;will-change:transform}
#reg.moving .r-cam{transition:transform .55s var(--ease)}
/* 場館不用 preserve-3d：3D 疊層會讓瀏覽器把斜掉的那半顆按鈕判定在背景後面，點了沒反應（10-06 實測：$8,000 方案只剩一角點得到） */
.r-rig{position:absolute;inset:0}
.r-bg{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none;max-width:none}
.r-floorfade{position:absolute;left:0;right:0;top:900px;height:181px;background:linear-gradient(transparent,var(--bg));pointer-events:none;transition:opacity .4s}
#reg[data-step="1"] .r-floorfade{opacity:0}
.r-floorext{position:absolute;left:-2400px;right:-2400px;top:1080px;height:1600px;background:var(--bg);pointer-events:none}
.r-sidefade{position:absolute;top:-400px;bottom:-1600px;width:2400px;background:var(--bg);pointer-events:none}
/* 燈光暗下來：只留盾牌原亮度；--dim 由捲動控制（走到盾牌前燈才慢慢暗） */
.r-dim{position:absolute;inset:0;background:rgba(4,4,5,.72);pointer-events:none;opacity:var(--dim,1);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Crect width='1920' height='1080' fill='white'/%3E%3Cpolygon filter='url(%23b)' fill='black' points='960,104 1270,334 1262,632 960,818 662,622 650,342'/%3E%3C/svg%3E") 0 0/100% 100%;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Crect width='1920' height='1080' fill='white'/%3E%3Cpolygon filter='url(%23b)' fill='black' points='960,104 1270,334 1262,632 960,818 662,622 650,342'/%3E%3C/svg%3E") 0 0/100% 100%}
.r-dim2{position:absolute;inset:0;background:rgba(4,4,5,.62);pointer-events:none;opacity:0;transition:opacity .4s}
#reg[data-step="2"] .r-dim2{opacity:1}

/* 壓印字 */
#reg .etch{color:#ebe8e1;text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.85),0 6px 20px rgba(0,0,0,.5)}
#reg .deep{color:#a5a29b;text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12)}
#reg .paint{color:var(--paint);text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.9)}
/* 壓印鈕：刻在鋼上的凹槽；按下去凹更深；選中＝紅漆填進刻痕 */
#reg .press{position:relative;cursor:pointer;border:0;border-radius:0;padding:.5em 1.1em;font-family:var(--serif);font-weight:900;letter-spacing:.14em;color:#ebe8e1;
 text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.85);background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.12));
 box-shadow:inset 0 2px 3px rgba(0,0,0,.72),inset 0 -1px 0 rgba(255,255,255,.14),0 1px 0 rgba(255,255,255,.06);transition:box-shadow .12s,color .15s}
#reg .press:hover{color:#fff}
/* 按下去只把凹槽陰影加深，按鈕本身不移動（會移動的話，點在上緣放開時就落在按鈕外，等於沒按到） */
#reg .press:active{box-shadow:inset 0 5px 10px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.08)}
#reg .press.hot{color:var(--paint);text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.9)}
#reg .press.quiet{background:none;box-shadow:none;color:#a5a29b;font-family:var(--sans);font-weight:500;letter-spacing:.1em}
#reg .press.quiet:hover{color:#ebe8e1}
#reg :focus-visible{outline:1px solid #f1eee8;outline-offset:4px}
#reg .r-f input:focus-visible,#reg .r-f select:focus-visible{outline:0}

/* 站切換 */
#reg [data-st]{opacity:0;pointer-events:none;transition:opacity .25s}
#reg[data-step="1"] [data-st~="1"],#reg[data-step="2"] [data-st~="2"],#reg[data-step="3"] [data-st~="3"]{opacity:1;pointer-events:auto}
#reg[data-step="1"] [data-st~="1"]{opacity:var(--ui,1)}
#reg:not(.live) [data-st]{pointer-events:none!important}

/* ── 站一：鋼面上只有 標題／兩個方案／下一步 ── */
.r-s1{position:absolute;left:700px;top:282px;width:520px;text-align:center}
.r-s1 h2{width:fit-content;margin:0 auto;font-family:var(--serif);font-weight:900;font-size:60px;letter-spacing:.1em;line-height:1}
.r-plans{display:flex;justify-content:center;gap:14px;margin-top:40px}
.r-plan{width:236px;padding:22px 6px 20px;cursor:pointer;border:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.1));
 box-shadow:inset 0 2px 4px rgba(0,0,0,.68),inset 0 -1px 0 rgba(255,255,255,.12);transition:box-shadow .15s}
.r-plan:active{box-shadow:inset 0 5px 10px rgba(0,0,0,.92),inset 0 -1px 0 rgba(255,255,255,.12)}
.r-plan b{display:block;font-family:var(--serif);font-weight:900;font-size:21px;letter-spacing:.06em}
.r-plan .p{display:block;font-family:var(--serif);font-weight:900;font-size:52px;line-height:1.05;margin-top:8px}
.r-plan.on{box-shadow:inset 0 4px 9px rgba(0,0,0,.88),inset 0 -1px 0 rgba(255,255,255,.12)}
#reg .r-plan.on b,#reg .r-plan.on .p{color:var(--paint);text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.9)}
.r-s1 .go{margin-top:30px;font-size:24px}

/* 盾牌兩側的舞台直式螢幕（官方攝影）：黑色邊框、微微朝盾牌轉、站在舞台上有倒影 */
.r-scr{position:absolute;top:286px;width:300px;height:534px;padding:0;border:0;cursor:zoom-in;background:#000;overflow:hidden;
 box-shadow:0 0 0 6px #0b0b0d,0 0 0 7px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.7);
 -webkit-box-reflect:below 14px linear-gradient(transparent 70%,rgba(255,255,255,.14));transition:filter .3s,transform .3s var(--ease)}
/* 轉軸在靠盾牌那一側，整面往前轉出來（不會有一半轉進背景圖後面） */
.r-scrL{left:318px;transform-origin:100% 50%;transform:translateZ(2px) rotateY(16deg)}
.r-scrR{left:1302px;transform-origin:0 50%;transform:translateZ(2px) rotateY(-16deg)}
/* 報名還沒結束前，後面那一站（創作者專區）先藏起來 */
html.reg-hold .stage3d{opacity:0}
.r-scr video,.r-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.r-scr img{opacity:0;transition:opacity .8s}.r-scr img.on{opacity:1}
.r-scr:hover{filter:brightness(1.1)}
/* 螢幕上的屆別標籤＋第幾支＋左右箭頭：一眼看出「還有很多、可以翻」 */
.r-ed{position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:999px;background:#E0141C;color:#fff;font:700 15px/1 var(--sans);letter-spacing:.06em}
.r-ed.old{background:rgba(6,6,7,.78);color:#f4f2ee;box-shadow:inset 0 0 0 1px rgba(244,242,238,.35)}
.r-nav{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:26px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#f4f2ee}
.r-nav i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(244,242,238,.16);font:400 26px/1 var(--sans);font-style:normal;transition:background .2s}
.r-nav b{font:700 15px/1 var(--sans);letter-spacing:.08em}
.r-scr:hover .r-nav i{background:#E0141C}
.r-scap small{display:block;margin-top:6px;font:400 14px/1 var(--sans);letter-spacing:.12em;color:#b9b6af}
/* 燈箱：左上屆別＋第幾張，左右大箭頭 */
.r-lbhead{position:absolute;top:14px;left:18px;z-index:2;display:flex;gap:12px;align-items:center}
.r-lbed{padding:6px 13px;border-radius:999px;background:#E0141C;color:#fff;font:700 15px/1 var(--sans);letter-spacing:.06em}
.r-lbed.old{background:transparent;box-shadow:inset 0 0 0 1px rgba(244,242,238,.45)}
.r-lbcnt{color:#b9b6af;font:400 14px/1 var(--sans);letter-spacing:.1em}
.r-lb .r-lbp span,.r-lb .r-lbn span{display:grid;place-items:center;width:52px;height:52px;margin:auto;border-radius:50%;background:rgba(244,242,238,.12);font-size:34px;line-height:1;transition:background .2s}
.r-lb .r-lbp:hover span,.r-lb .r-lbn:hover span{background:#E0141C;color:#fff}
#reg:not(.planB) .r-scr{filter:brightness(.28) saturate(.3)}
.r-scap{position:absolute;top:850px;width:300px;text-align:center;font-family:var(--serif);font-weight:900;font-size:21px;letter-spacing:.16em;transition:opacity .3s}
.r-scapL{left:318px}.r-scapR{left:1302px}
#reg:not(.planB)[data-step="1"] .r-scap{opacity:.35!important}   /* 10-10 修：只在站一變淡，站二三照樣隱藏 */

/* ── 站二：只有 標題／鋼牌／確認 ── */
.r-s2t{position:absolute;left:0;right:0;top:540px;text-align:center}
.r-s2t h2{margin:0;font-family:var(--serif);font-weight:900;font-size:56px;letter-spacing:.1em}
.r-s2t h2 .paint{margin-left:.4em}
.r-arc{position:absolute;left:0;top:700px;width:1920px;height:380px}
.r-none{position:absolute;left:0;right:0;top:110px;margin:0;text-align:center;font-size:28px;line-height:1.5;color:#b9b6af}
#reg.mob .r-none{position:static;font-size:20px;padding:40px 0}
.r-slab{position:absolute;bottom:20px;width:176px;height:236px;margin-left:-88px;cursor:pointer;border:0;border-radius:0;padding:20px 10px;text-align:center;color:#ebe8e1;transform-origin:50% 100%;
 background:linear-gradient(100deg,rgba(255,255,255,.07),transparent 40%,rgba(255,255,255,.05) 70%,transparent),repeating-linear-gradient(90deg,#3c3f44 0 1px,#303338 1px 3px,#373a3f 3px 4px),#323539;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 2px 0 rgba(255,255,255,.14),0 24px 40px rgba(0,0,0,.7);
 -webkit-box-reflect:below 3px linear-gradient(transparent 62%,rgba(255,255,255,.16));transition:transform .3s var(--ease),filter .2s}
.r-slab .in{font-family:var(--serif);font-weight:900;font-size:76px;line-height:1.15}
.r-slab .nm{font-weight:700;font-size:19px;margin-top:4px}
.r-slab .ct{position:absolute;left:0;right:0;bottom:16px;font-family:var(--serif);font-weight:900;font-size:26px}
.r-slab .ct small{font-family:var(--sans);font-weight:500;font-size:13px;color:#a5a29b;margin-left:3px}
.r-slab.first .ct{color:var(--paint)}
.r-slab:hover{filter:brightness(1.15)}
.r-arc.picked .r-slab:not(.on){filter:brightness(.4)}
.r-ok2{position:absolute;left:0;right:0;top:1100px;display:flex;justify-content:center;align-items:center;gap:20px;transition:opacity .2s}
#reg .r-ok2:not(.show){opacity:0!important;pointer-events:none!important}
.r-ok2 a{color:#fff;text-decoration:none;font-size:20px;border-bottom:1px solid var(--paint);padding-bottom:3px}
.r-ok2 .press{font-size:21px}
.r-nav2{position:absolute;left:0;right:0;top:1200px;display:flex;justify-content:center;gap:40px}
.r-nav2 .press{font-size:18px}

/* ── 站三：鋼面上只有 金額／六格／付款／確認 ── */
.r-s3{position:absolute;left:744px;top:240px;width:432px;text-align:center}   /* 10-07 收窄：下兩排原本碰到盾牌內斜邊 */
.r-tot{font-family:var(--serif);font-weight:900;font-size:46px;line-height:1}
.r-tot>span{display:block;width:fit-content;margin:0 auto}
.r-tot small{display:block;width:fit-content;margin:8px auto 0;font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.14em}
.r-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:34px;text-align:left}
.r-f{display:block}
.r-f input,.r-f select{width:100%;border:0;border-radius:0;outline:0;padding:11px 12px;font-size:16px;color:#f1eee8;background:rgba(0,0,0,.4);appearance:none;
 box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.12);caret-color:var(--paint)}
.r-f input::placeholder{color:#8f8b84}
.r-f input:focus,.r-f select:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 -2px 0 var(--paint)}
.r-f select{color:#8f8b84}.r-f select.set{color:#f1eee8}.r-f select option{background:#111;color:#eee}
.r-pay{display:flex;gap:12px;margin-top:14px}
.r-pay .press{flex:1;font-size:16px;letter-spacing:.08em;padding:.75em .3em}
.r-s3 .go{margin-top:16px;font-size:24px}
.r-back3{position:absolute;left:0;right:0;top:830px;text-align:center}

/* 進度：盾牌尖端下方三道刻痕 */
.r-ticks{position:absolute;left:930px;top:788px;display:flex;gap:8px;transition:top .3s}
.r-ticks i{width:16px;height:4px;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1)}
.r-ticks i.on{background:#c8141b}
#reg[data-step="2"] .r-ticks{top:1270px}

/* 看大圖：0.15 秒淡入，左右翻 */
.r-lb{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;background:rgba(0,0,0,.94)}
.r-lb[hidden]{display:none}
.r-lbm{display:grid;place-items:center;height:100vh}
.r-lbm>*{max-width:100%;max-height:88vh}
.r-lb button{background:none;border:0;color:#cfcbc3;font-size:28px;cursor:pointer;height:100%}
.r-lb .r-lbx{position:absolute;top:14px;right:18px;height:auto;font-size:15px;letter-spacing:.14em}

/* 手機：鏡頭縮小，字在場館座標放大回來；兩側螢幕改站在盾牌下方左右 */
#reg.mob .r-s1 h2{font-size:68px}
#reg.mob .r-plan{width:240px}#reg.mob .r-plan b{font-size:24px}#reg.mob .r-plan .p{font-size:54px}
#reg.mob .r-s1 .go{font-size:28px}
#reg.mob .r-scr{top:850px;width:150px;height:267px;transform:none;-webkit-box-reflect:unset;box-shadow:0 0 0 4px #0b0b0d,0 0 0 5px rgba(255,255,255,.1),0 20px 40px rgba(0,0,0,.7)}
#reg.mob .r-scrL{left:780px}#reg.mob .r-scrR{left:990px}
#reg.mob .r-scap{top:1128px;width:150px;font-size:19px;letter-spacing:.08em}
#reg.mob .r-scapL{left:780px}#reg.mob .r-scapR{left:990px}
#reg.mob .r-ed{left:6px;top:6px;padding:3px 7px;font-size:11px}#reg.mob .r-nav{padding:14px 4px 4px}#reg.mob .r-nav i{width:22px;height:22px;font-size:17px}#reg.mob .r-nav b{font-size:11px}#reg.mob .r-scap small{font-size:12px}
#reg.mob .r-s2t{left:690px;right:auto;width:540px}#reg.mob .r-s2t h2{font-size:52px}
#reg.mob .r-arc{left:690px;width:540px;top:680px;height:360px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 20px 40px;scrollbar-width:none}
#reg.mob .r-slab{position:relative;left:auto!important;margin:0;flex:none;scroll-snap-align:center;bottom:auto;transform:none!important;width:190px;height:250px}
#reg.mob .r-slab.on{transform:translateY(-10px)!important}#reg.mob .r-slab .nm{font-size:22px}
#reg.mob .r-ok2{left:690px;right:auto;width:540px;top:1060px;flex-wrap:wrap;gap:16px 20px}#reg.mob .r-ok2 a{width:100%;text-align:center;font-size:24px;border:0}
#reg.mob .r-ok2 .press{font-size:26px}
#reg.mob .r-nav2{left:690px;right:auto;width:540px;top:1210px}#reg.mob .r-nav2 .press{font-size:24px}
#reg.mob[data-step="2"] .r-ticks{top:1300px}
#reg.mob .r-s3{top:236px}#reg.mob .r-g2{gap:11px;margin-top:50px}#reg.mob .r-f input,#reg.mob .r-f select{font-size:19px;padding:11px 12px}
#reg.mob .r-tot{font-size:48px}#reg.mob .r-tot small{font-size:16px}
#reg.mob .r-pay{margin-top:12px}#reg.mob .r-pay .press{font-size:19px;padding:.6em .3em}#reg.mob .r-s3 .go{font-size:26px;margin-top:12px}
#reg.mob .r-back3 .press{font-size:24px}
@media (prefers-reduced-motion:reduce){#reg.moving .r-cam,.r-rig,#reg [data-st]{transition:none}}

/* 長青組：量級那格切兩半，右半填生日；防機器人隱藏欄位；錯誤訊息 */
#reg.masters .r-fcls{display:flex;gap:6px}#reg.masters .r-fcls select{width:52%}#reg.masters .r-fcls input{width:48%;padding-left:6px;padding-right:4px;font-size:14px}
.r-fcls input[hidden]{display:none}
.r-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.r-err{min-height:1.2em;margin:10px 0 0;font-size:15px;font-weight:700}
.r-f input[type=date]{color-scheme:dark}

/* 10-07 去 AI 感：螢幕上的屆別改字幕式、箭頭不用圓框 */
.r-ed,.r-ed.old{left:0;top:0;right:0;padding:12px 14px 30px;border-radius:0;background:linear-gradient(rgba(0,0,0,.72),transparent);box-shadow:none;color:#f4f2ee;font:900 16px/1 var(--serif);letter-spacing:.14em}
.r-ed.old{color:#b9b6af}
.r-nav i{width:auto;height:auto;border-radius:0;background:none;font-size:24px;color:#b9b6af}
.r-scr:hover .r-nav i{background:none;color:#fff}
.r-lbed,.r-lbed.old{padding:0;border-radius:0;background:none;box-shadow:none;color:#f4f2ee;font:900 18px/1 var(--serif);letter-spacing:.14em}
.r-lbed.old{color:#b9b6af}
.r-lb .r-lbp span,.r-lb .r-lbn span{width:auto;height:auto;border-radius:0;background:none;font-size:44px;color:#b9b6af}
.r-lb .r-lbp:hover span,.r-lb .r-lbn:hover span{background:none;color:#fff}
#reg.mob .r-ed{padding:7px 8px 18px;font-size:11px}#reg.mob .r-nav i{width:auto;height:auto}

/* Chrome 自動填入會把欄位變淺藍白底，蓋回盾牌上的深色 */
.r-f input:-webkit-autofill,.r-f input:-webkit-autofill:hover,.r-f input:-webkit-autofill:focus{-webkit-text-fill-color:#f1eee8;-webkit-box-shadow:inset 0 0 0 100px #0c0d0f;caret-color:#f1eee8;transition:background-color 9999s}
.r-wide{grid-column:1/-1}
/* 選中的欄位：底下一條亮線，不用紅框 */
.r-f input:focus-visible,.r-f select:focus-visible{outline:0}
.r-f input:focus,.r-f select:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 -2px 0 #f1eee8}

/* 10-07 晚：站一提示折 500、站二大標＋小標、站三金額下移改白字 */
.r-hint{margin:20px auto 0;max-width:420px;text-align:center;font-size:17px;font-weight:700;letter-spacing:.12em;line-height:1.75;color:#d8d4cc}
.r-hint b{font-family:var(--serif);font-weight:900;font-size:21px;margin-left:.2em;letter-spacing:.02em}
.r-s2t h2{font-size:60px}
.r-s2sub{margin:18px 0 0;font-size:24px;font-weight:700;letter-spacing:.1em;color:#d8d4cc;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.r-s2sub b{font-family:var(--serif);font-weight:900;font-size:40px;margin-left:.2em;vertical-align:-.08em}
.r-s2t{top:600px}
.r-arc{top:700px}
.r-tot{margin-top:24px}
.r-g2{margin-top:24px}
#reg.mob .r-hint{font-size:19px}#reg.mob .r-hint b{font-size:23px}
#reg.mob .r-s2t h2{font-size:50px}
#reg.mob .r-s2sub{font-size:22px;letter-spacing:.04em}#reg.mob .r-s2sub b{font-size:34px}
#reg.mob .r-arc{top:740px}
#reg.mob .r-slab:first-child{margin-left:auto}#reg.mob .r-slab:last-child{margin-right:auto}
#reg.mob .r-tot{margin-top:22px}#reg.mob .r-g2{margin-top:36px}

/* 10-08 創作者照片：嵌在鋼牌上半部，鋼框留 8px 邊 */
.r-slab.has-ph{padding:8px 8px 0;height:280px}
.r-slab .ph{height:180px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.r-slab .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:contrast(1.05) saturate(.9)}
.r-slab.has-ph .nm{margin-top:10px}
.r-slab.has-ph .ct{bottom:12px;font-size:22px}
#reg.mob .r-slab.has-ph{height:290px}#reg.mob .r-slab .ph{height:186px}

/* ── 10-08 站二改版：卡片三款（#reg[data-card]）、IG 在卡片正下方、重選｜確定、選中不蓋標題 ── */
.r-arc{top:680px}
#reg .r-slab{transform-origin:50% 100%}
.r-ok2{top:1062px;flex-direction:column;gap:26px;transform:translateX(var(--dx,0px))}
.r-okb{display:flex;gap:20px}
.r-ok2 .r-cig{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 14px;border:1px solid rgba(255,255,255,.32);color:#f4f2ee;font-size:19px;font-weight:600;letter-spacing:.02em;text-decoration:none;background:rgba(0,0,0,.35);transition:border-color .15s,background-color .15s}
.r-ok2 .r-cig:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.r-ok2 .r-cig svg{width:22px;height:22px;flex:none}
.r-ok2 .r-cig[hidden]{display:none}
.r-nav2{top:1215px}
#reg.mob .r-ok2{flex-direction:column;flex-wrap:nowrap;transform:none}#reg.mob .r-ok2 .r-cig{width:auto;font-size:22px;border:1px solid rgba(255,255,255,.32)}
#reg.mob .r-slab.on{transform:scale(1.03)!important}

#reg[data-card] .r-slab{padding:0;background:none;box-shadow:none;overflow:hidden}
#reg[data-card] .r-slab .ph{height:auto;box-shadow:none}
#reg[data-card] .r-slab .in{padding-top:40px}
/* A 黑鋼：深色拉絲鋼底、照片滿寬、名字宋體；選中＝紅色底線 */
#reg[data-card=a] .r-slab{height:286px;background:linear-gradient(180deg,#1b1c1f,#0b0c0d);border:1px solid rgba(255,255,255,.13);box-shadow:0 26px 44px rgba(0,0,0,.75)}
#reg[data-card=a] .r-slab .ph{height:206px}
#reg[data-card=a] .r-slab .nm{font-family:var(--serif);font-weight:900;font-size:24px;margin-top:16px;letter-spacing:.04em}
#reg[data-card=a] .r-slab.on{border-color:rgba(255,255,255,.4);box-shadow:inset 0 -3px 0 var(--paint),0 26px 44px rgba(0,0,0,.75)}
/* B 全幅照片：照片鋪滿整張、底部暗漸層壓名字；選中＝白色細外框 */
#reg[data-card=b] .r-slab{width:200px;height:270px;margin-left:-100px;border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 44px rgba(0,0,0,.75);background:#0b0b0c;overflow:visible}
#reg[data-card=b] .r-slab .ph{position:absolute;inset:0}
#reg[data-card=b] .r-slab .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.88))}
#reg[data-card=b] .r-slab .nm{position:absolute;left:0;right:0;bottom:16px;margin:0;font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.8)}
#reg[data-card=b] .r-slab .ct{top:10px;right:12px;left:auto;bottom:auto;font-size:18px}
#reg[data-card=b] .r-slab.on{outline:2px solid #fff;outline-offset:5px}
/* C 切角徽章：跟盾牌同一套切角、紅色細邊；選中＝紅邊變亮 */
#reg[data-card=c] .r-slab{height:286px;padding:2px;background:linear-gradient(160deg,rgba(224,20,28,.75),rgba(90,10,14,.6) 45%,rgba(224,20,28,.55));clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);box-shadow:none}
#reg[data-card=c] .r-slab::before{content:"";position:absolute;inset:2px;background:linear-gradient(180deg,#161617,#0a0a0b);clip-path:inherit;z-index:0}
#reg[data-card=c] .r-slab>*{position:relative;z-index:1}
#reg[data-card=c] .r-slab .ph{height:204px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
#reg[data-card=c] .r-slab .nm{font-family:var(--serif);font-weight:900;font-size:24px;margin-top:16px;letter-spacing:.04em}
#reg[data-card=c] .r-slab .ct{position:absolute}
#reg[data-card=c] .r-slab.on{background:linear-gradient(160deg,#ff3a40,#e0141c 50%,#ff3a40)}
#reg.mob[data-card] .r-slab{height:290px}#reg.mob[data-card=b] .r-slab{width:210px}
.r-s2t{top:570px}.r-arc{top:722px}.r-ok2{top:1104px}.r-nav2{top:1258px}
#reg.mob .r-ok2{top:1100px}#reg.mob .r-nav2{top:1262px}
.r-ok2{gap:18px}.r-nav2{top:1226px}#reg[data-step="2"] .r-ticks{top:1286px}
#reg[data-card] .r-slab{-webkit-box-reflect:unset}
#reg.mob[data-step="2"] .r-ticks{top:1332px}
.r-ok2 .r-cig svg{width:24px;height:24px}
.r-ok2{transform:none}.r-ok2 .r-cig{transform:translateX(var(--dx,0px))}
#reg.mob[data-card] .r-slab{margin:0}
#reg.mob[data-card] .r-arc{padding-left:165px;padding-right:165px}
/* 10-08 站三：金額和小標拉開；表單收窄、付款列再往內縮，下兩排不碰盾牌內斜邊 */
.r-tot small{margin-top:18px}#reg.mob .r-tot small{margin-top:16px}
.r-s3{left:762px;width:396px}
.r-pay{width:84%;margin-left:auto;margin-right:auto}
.r-pay .press{white-space:nowrap;letter-spacing:.02em;font-size:15px}#reg.mob .r-pay .press{font-size:16px;letter-spacing:0}
.r-pay .press{flex:1 1 0;min-width:0}
#reg .r-pay .press{letter-spacing:.04em;padding:.75em .3em;font-size:16px}#reg.mob .r-pay .press{letter-spacing:0;font-size:16px}
/* 10-08 IG 連結：電腦版放進弧形、跟卡片同角度同寬，貼在白框下方；手機版同卡寬、間距縮短 */
.r-arc .r-cigA{position:absolute;top:376px;width:200px;margin-left:-100px;box-sizing:border-box;justify-content:center;transform-origin:50% -16px;z-index:20;
 display:flex;align-items:center;gap:10px;padding:10px 8px;border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.45);color:#f4f2ee;font-size:18px;font-weight:600;text-decoration:none;transition:border-color .15s,background-color .15s}
.r-arc .r-cigA:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.r-arc .r-cigA svg{width:22px;height:22px;flex:none}
.r-arc .r-cigA[hidden]{display:none}
#reg:not(.mob) .r-ok2 .r-cig{display:none}
#reg:not(.mob) .r-ok2{top:1168px}
#reg.mob .r-arc .r-cigA{display:none}
#reg.mob .r-ok2{top:1080px;gap:16px}#reg.mob .r-ok2 .r-cig{width:210px;box-sizing:border-box;justify-content:center;padding:10px 8px}
#reg.mob .r-ok2 .r-cig{font-size:18px;gap:8px;padding:10px 6px}#reg.mob .r-ok2 .r-cig svg{width:20px;height:20px}
/* 10-08 手機：盾牌下兩塊螢幕放大、說明字放大到手機看得清楚（原本實際只有 6–10px） */
#reg.mob .r-scr{top:832px;width:180px;height:320px}
#reg.mob .r-scrL{left:770px}#reg.mob .r-scrR{left:970px}
#reg.mob .r-scap{top:1164px;width:180px;font-size:24px;letter-spacing:.06em}
#reg.mob .r-scapL{left:770px}#reg.mob .r-scapR{left:970px}
#reg.mob .r-scap small{display:none}
#reg.mob .r-ed{font-size:17px;padding:9px 10px 22px}
#reg.mob .r-nav b{font-size:17px}#reg.mob .r-nav i{font-size:24px}
#reg.mob .r-hint{font-size:23px}#reg.mob .r-hint b{font-size:27px}
/* 10-10 折扣碼：卡片下方一條碼帶（人名在照片底、碼帶在卡片最下面），站三多一格折扣碼 */
#reg[data-card=b] .r-slab{height:326px}
#reg[data-card=b] .r-slab .ph{inset:0 0 66px 0}
#reg[data-card=b] .r-slab .nm{bottom:80px}
.r-slab .cd{position:absolute;left:0;right:0;bottom:0;height:66px;display:flex;align-items:center;justify-content:center;gap:2px;background:#f1eee8;color:#0b0b0c;white-space:nowrap;overflow:hidden}
.r-slab .cd small{font-size:14px;font-weight:700;letter-spacing:.04em}
.r-slab .cd b{font-family:var(--serif);font-weight:900;font-size:28px;letter-spacing:.06em}
.r-slab .cd.long b{font-size:19px;letter-spacing:.02em}
.r-slab.on .cd{background:#fff}
#reg.mob[data-card] .r-slab{height:340px}#reg.mob[data-card=b] .r-slab{width:220px}
#reg.mob .r-slab .cd{height:72px}#reg.mob[data-card=b] .r-slab .ph{inset:0 0 72px 0;height:auto}#reg.mob[data-card=b] .r-slab .nm{bottom:84px}
#reg.mob .r-slab .cd small{font-size:16px}#reg.mob .r-slab .cd b{font-size:30px}#reg.mob .r-slab .cd.long b{font-size:21px}
#reg.mob .r-arc{height:420px}
.r-fcode{display:flex;align-items:center;gap:12px}
.r-fcode input{flex:0 0 52%;text-transform:uppercase;letter-spacing:.08em}
.r-fcode input::placeholder{text-transform:none;letter-spacing:0}
.r-fcode small{font-size:13px;font-weight:500;color:#a5a29b;line-height:1.4}
.r-fcode small.ok{color:#f1eee8}.r-fcode small.bad{color:var(--paint)}
#reg.mob .r-fcode small{font-size:15px}
#reg.mob .r-ok2{top:1150px}#reg.mob .r-nav2{top:1310px}#reg.mob[data-step="2"] .r-ticks{top:1380px}
/* 10-10 鐵律：站三所有框（欄位、付款、確認報名）一律收在盾牌內框裡，不准超出。多一格折扣碼 → 全部壓扁補回高度 */
.r-tot{font-size:40px}.r-tot small{margin-top:10px}
.r-g2{gap:8px;margin-top:16px}
#reg .r-f input,#reg .r-f select{padding:8px 11px;font-size:15px}
.r-pay{margin-top:10px}#reg .r-pay .press{padding:.6em .3em}
.r-s3 .go{margin-top:10px;font-size:22px}
.r-fcode small{font-size:12.5px;line-height:1.45}
/* 金額動畫：原價劃掉 → 折後金額往下掉進來 */
.r-tot .tv{display:inline-block;position:relative}
.r-tot .tv.cut::after{content:"";position:absolute;left:-5%;right:-5%;top:50%;height:4px;margin-top:-2px;background:var(--paint);transform:scaleX(0);transform-origin:0 50%;animation:rcut 1.4s cubic-bezier(.4,0,.2,1) forwards}
.r-tot .tv.drop{animation:rdrop .34s cubic-bezier(.2,.8,.2,1)}
@keyframes rcut{to{transform:scaleX(1)}}
@keyframes rdrop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
/* 手機：站三用跟電腦版同一套高度（盾牌是同一張圖，電腦版收得進去＝手機也收得進去）；字維持 ≥16px，iPhone 點欄位才不會自動放大 */
#reg.mob .r-s3{top:240px}#reg.mob .r-tot{font-size:40px;margin-top:24px}#reg.mob .r-tot small{font-size:15px;margin-top:10px}
#reg.mob .r-g2{gap:8px;margin-top:16px}
#reg.mob .r-f input,#reg.mob .r-f select{font-size:16px;padding:7px 10px;line-height:1.25}
#reg.mob .r-pay{margin-top:10px}#reg.mob .r-pay .press{font-size:16px;padding:.55em .3em}
#reg.mob .r-s3 .go{font-size:22px;margin-top:10px}
#reg.mob .r-fcode small{font-size:13px}
/* 10-11 創作者卡：大頭貼＋名字＋IG＋折扣碼（「折扣碼」小字一行、碼大字一行，碼越長字越小，永遠不貼邊） */
#reg[data-card=b] .r-slab{height:350px;display:flex;flex-direction:column;overflow:hidden;--cw:168px}
#reg[data-card=b] .r-slab .ph{position:relative;inset:auto;height:178px;flex:none}
#reg[data-card=b] .r-slab .ph::after{display:none}
#reg .r-slab .ph.none{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#1d1d20,#0b0b0c 70%)}
#reg .r-slab .ph.none img.crest{width:44%;height:auto;object-fit:contain;opacity:.32;filter:grayscale(1)}
#reg[data-card=b] .r-slab .nm{position:static;margin:12px 14px 0;font-size:21px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reg .r-slab .ig{margin:3px 14px 0;font-size:13px;line-height:1.3;color:#a5a29b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
#reg .r-slab .cd{position:static;flex:none;margin-top:auto;height:auto;display:block;padding:9px 16px 11px;text-align:center;white-space:nowrap}
#reg .r-slab .cd small{display:block;font-size:11px;font-weight:700;letter-spacing:.24em;color:#6b6760;line-height:1.3}
#reg .r-slab .cd b{display:block;margin-top:2px;font-size:min(28px,calc(var(--cw) / (var(--n) * .74)));letter-spacing:.04em;line-height:1.2}
#reg[data-card=b] .r-slab .ct{top:8px;right:10px;padding:2px 8px;background:rgba(0,0,0,.6);font-size:16px}
#reg.mob[data-card] .r-slab{height:356px}#reg.mob[data-card=b] .r-slab{--cw:188px}
#reg.mob[data-card=b] .r-slab .ph{inset:auto;height:180px}
#reg.mob[data-card=b] .r-slab .nm{font-size:23px}#reg.mob .r-slab .ig{font-size:15px}
#reg.mob .r-slab .cd small{font-size:13px}#reg.mob .r-slab .cd b{font-size:min(30px,calc(var(--cw) / (var(--n) * .74)))}
#reg.mob .r-arc{height:430px}
/* 10-11 手機站一：鏡頭推近盾牌後，字在場館座標裡縮小（螢幕上看起來一樣大），全部收進鋼面內框 */
#reg.mob .r-s1{top:262px}
#reg.mob .r-s1 h2{font-size:54px}
#reg.mob .r-plans{margin-top:24px;gap:12px}
#reg.mob .r-plan{width:212px;padding:15px 6px 13px}#reg.mob .r-plan b{font-size:19px}#reg.mob .r-plan .p{font-size:42px;margin-top:4px}
#reg.mob .r-s1 .go{font-size:23px;margin-top:18px}
#reg.mob .r-hint{margin-top:8px;font-size:17px;line-height:1.55;letter-spacing:.08em}#reg.mob .r-hint b{font-size:20px}
#reg .r-slab .cd b{font-size:min(28px,calc(var(--cw) / (var(--n) * .98)))}
#reg.mob .r-slab .cd b{font-size:min(30px,calc(var(--cw) / (var(--n) * .98)))}
/* 10-11 電腦版：卡片變高會壓到副標，照片區縮矮 */
#reg:not(.mob)[data-card=b] .r-slab{height:300px}#reg:not(.mob)[data-card=b] .r-slab .ph{height:138px}
/* 10-15 Aaron 手機實測：站一字太貼頁首、盾牌下半空、影片離太遠 → 內容往下置中在盾牌裡、試舉／舞台照往上靠（鏡頭取景在 reg.js SHOTS.mob 一起改）
   站二：鏡頭往上取景讓整塊往下、按鈕往卡片靠；.mob.mob 是為了蓋過前面好幾輪的覆寫 */
#reg.mob.mob .r-s1{top:385px}
#reg.mob.mob .r-scr{top:790px}
#reg.mob.mob .r-scap{top:1122px}
#reg.mob.mob .r-ok2{top:var(--s2ok,1142px)}   /* 10-22：不再寫死，reg.js layS2() 量卡片底部往下排（以前 1070 會蓋到折扣碼） */
#reg.mob.mob .r-nav2{top:var(--s2nav,1282px)}
#reg.mob.mob[data-step="2"] .r-ticks{top:var(--s2tk,1356px)}
/* 10-15「往下滑查看更多」提示（js/snap.js 控制顯示）：首頁、報名站一、創作者專區底部置中 */
.more-hint{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:12;transform:translate(-50%,8px);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 14px;border:0;background:none;color:#efece6;font:500 14px/1 var(--sans);letter-spacing:.18em;cursor:pointer;opacity:0;pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.9);transition:opacity .25s,transform .25s}
.more-hint.on{opacity:.85;pointer-events:auto;transform:translate(-50%,0)}
.more-hint:hover{opacity:1}
.more-hint svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 6px rgba(0,0,0,.9));animation:moreBob 1.6s ease-in-out infinite}
@keyframes moreBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion: reduce){.more-hint svg{animation:none}}
@media (max-width:760px){.more-hint{font-size:13px;bottom:max(10px,env(safe-area-inset-bottom))}}
/* 首頁開場字往上讓位給提示（站一手機取景也放寬，見 reg.js SHOTS.mob[1]） */
html:not(.flat) .open{bottom:calc(clamp(24px,5vh,56px) + 46px)}
@media (max-width:760px){html:not(.flat) .open{bottom:calc(max(36px,7vh) + 40px)}.more-hint{padding:4px 12px;gap:0}.more-hint svg{width:18px;height:18px}}
/* 10-15 Aaron：手機看大圖偏下＝iPhone 的 100vh 把底部工具列也算進去 → 改用實際看得到的高度（dvh），扣掉上方標題列再置中 */
.r-lb{height:100vh;height:100dvh}
.r-lbm{height:100vh;height:100dvh}
.r-lbm>*{max-height:88vh;max-height:calc(100dvh - 150px)}
/* 10-16 預告版（11/1 開放報名前的正式站）：盾牌站一只寫開放日期，完整版沒有這兩個元素 */
.r-s1 .r-soon{margin:44px auto 0;font-family:var(--serif);font-weight:900;font-size:46px;line-height:1.3;letter-spacing:.08em;width:fit-content}
.r-s1 .r-soon2{margin:26px auto 0;max-width:440px;font-size:17px;font-weight:700;letter-spacing:.1em;line-height:1.75;color:#d8d4cc}
.r-s1 .r-soon2 a{color:inherit;text-decoration:underline;text-underline-offset:4px;pointer-events:auto}
#reg.mob .r-s1 .r-soon{margin-top:30px;font-size:44px}
#reg.mob .r-s1 .r-soon2{margin-top:18px;font-size:19px;line-height:1.6}

/* 10-18 教練陪同（取代地址）：Email 半格＋右邊「教練陪同 否／是」；選是多一排教練姓名／電話 → 全部再壓扁，盾牌鐵律見上方 10-10 */
.r-coach{display:flex;align-items:stretch;gap:4px;background:rgba(0,0,0,.4);box-shadow:inset 0 2px 4px rgba(0,0,0,.85);padding:3px}
.r-coach span{flex:1;display:flex;align-items:center;padding-left:8px;font-size:14px;color:#8f8b84;white-space:nowrap}
#reg .r-coach button{flex:0 0 42px;border:0;border-radius:0;font:inherit;font-size:15px;color:#8f8b84;background:transparent;cursor:pointer}
#reg .r-coach button[aria-checked=true]{background:#f1eee8;color:#0c0d0f;-webkit-text-fill-color:#0c0d0f;font-weight:700}
.r-coach button:focus-visible{outline:1px solid #f1eee8;outline-offset:-1px}
.r-cf[hidden]{display:none}
#reg.mob .r-coach span{font-size:15px}
.r-tot .tv.pop{animation:rpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes rpop{0%{transform:scale(.7);opacity:.3}60%{transform:scale(1.14);opacity:1}100%{transform:scale(1)}}

/* 10-22 夜間檢查修正 */
/* 手機站二：沒填 IG 的創作者，IG 鈕的位置照樣留著（版面高度固定，reg.js 才量得準；重選｜確定也不會跳上去蓋卡片） */
#reg.mob .r-ok2 .r-cig[hidden]{display:inline-flex;visibility:hidden}
/* 站三生日欄（長青組）被切成「)80/05/05」：量級縮到剛好放得下「長青男子」，其餘寬度都給日期；
   觸控手機不畫小月曆圖示（點欄位本來就會跳日期選單），手機字維持 16px（iPhone 點了才不會自動放大） */
#reg.masters .r-fcls{gap:4px}
#reg.masters .r-fcls select{flex:none;width:4.9em;padding-left:7px;padding-right:4px}
#reg.masters .r-fcls input{flex:1 1 0;width:auto;min-width:0;padding-left:6px;padding-right:3px}
#reg.masters .r-fcls input::-webkit-calendar-picker-indicator{margin-left:2px;padding:0}
@media (pointer:coarse){#reg.masters .r-fcls input::-webkit-calendar-picker-indicator{display:none}}
/* 卡片名字太長（「吳煒穎 CarterWu 卡特」）以前一行切成「…」→ 最多兩行，再長才切；卡片高度不變、折扣碼帶永遠貼底 */
#reg[data-card=b] .r-slab .nm{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;overflow-wrap:anywhere;flex:none}
/* 10-27 Aaron：創作者 30–50 位 → 分頁（電腦 5 位／手機 3 位）＋類別篩選；照片框改 3:4＝創作者上傳時的裁切框，整張完整顯示
   版面由上到下：標題 → 類別 → 卡片 → （電腦）IG → 頁碼 → 重選｜確定 → 上一步｜跳過 → 刻痕；手機的頁碼以下由 reg.js layS2() 量卡片底部往下排 */
.r-cat[hidden],.r-pg[hidden]{display:none!important}
.r-cat{position:absolute;left:0;right:0;top:748px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
#reg .r-cat button{font:600 17px/1 var(--sans);letter-spacing:.06em;color:#c9c6bf;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);padding:10px 18px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
#reg .r-cat button:hover{border-color:rgba(255,255,255,.5);color:#fff}
#reg .r-cat button[aria-pressed=true]{background:#f1eee8;border-color:#f1eee8;color:#0b0b0c}
#reg .r-arc{top:806px;height:400px}
#reg[data-card] .r-slab,#reg:not(.mob)[data-card=b] .r-slab{width:184px;margin-left:-92px;height:auto;--cw:160px}
#reg[data-card] .r-slab .ph,#reg:not(.mob)[data-card=b] .r-slab .ph,#reg.mob[data-card=b] .r-slab .ph{height:auto;aspect-ratio:3/4;width:100%}
#reg .r-slab .ph img{object-fit:cover;object-position:50% 50%}
#reg[data-card=b] .r-slab .nm{margin-top:10px}
#reg .r-slab .cd{margin-top:10px}
.r-arc .r-cigA{top:396px;width:184px;margin-left:-92px}
.r-pg{position:absolute;left:0;right:0;top:1262px;display:flex;justify-content:center;align-items:center;gap:6px}
#reg .r-pg button{min-width:44px;height:44px;padding:0 6px;font:700 18px/1 var(--serif);color:#a5a29b;background:none;border:1px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
#reg .r-pg button:hover:not(:disabled){color:#fff}
#reg .r-pg .pgn[aria-current=page]{color:#fff;border-color:rgba(255,255,255,.5);box-shadow:inset 0 -3px 0 var(--paint)}
#reg .r-pg .pgb{font:400 30px/1 var(--sans);color:#ebe8e1}
#reg .r-pg .pgb:disabled{opacity:.25;cursor:default}
.r-pg .pgdot{color:#6b6760;font-size:18px;padding:0 2px}
#reg:not(.mob) .r-ok2{top:1326px}
#reg:not(.mob) .r-nav2{top:1392px}
#reg:not(.mob)[data-step="2"] .r-ticks{top:1450px}
/* 手機：一排 3 張、不再左右捲（左右滑＝換頁） */
#reg.mob .r-cat{left:690px;right:auto;width:540px;top:724px;gap:8px}
#reg.mob .r-cat button{font-size:19px;padding:10px 14px}
#reg.mob .r-arc{top:var(--s2arc,790px);height:auto;overflow:visible;display:flex;justify-content:center;gap:10px;padding:0;scroll-snap-type:none;touch-action:pan-y}
#reg.mob .r-slab:first-child,#reg.mob .r-slab:last-child{margin:0}
#reg.mob[data-card] .r-arc{padding:0}
#reg.mob[data-card] .r-slab,#reg.mob[data-card=b] .r-slab{width:162px;height:auto;--cw:146px}
#reg.mob[data-card=b] .r-slab .nm{font-size:20px;margin:8px 8px 0}
#reg.mob .r-slab .ig{font-size:14px;margin:2px 8px 0}
#reg.mob .r-slab .cd{padding:7px 6px 9px}
#reg.mob .r-slab .cd small{font-size:12px;letter-spacing:.16em}
#reg.mob .r-pg{left:690px;right:auto;width:540px;top:var(--s2pg,1180px);gap:4px}
#reg.mob .r-pg button{min-width:52px;height:52px;font-size:22px}
#reg.mob .r-pg .pgb{font-size:36px}
/* 10-31 Aaron：報名頁不放折扣碼；點卡片＝創作者小視窗（到 IG 找折扣碼＋小小的加油、留言）；版面拉開不擠 */
#reg .r-slab .go{flex:none;margin-top:auto;padding:9px 10px 11px;border-top:1px solid rgba(255,255,255,.08);font:600 13px/1.2 var(--sans);letter-spacing:.06em;color:#a5a29b;white-space:nowrap}
#reg .r-slab .go i{font-style:normal;margin-left:4px;color:#e3262c}
#reg .r-slab .nm{margin-top:12px}
#reg .r-slab:hover .go{color:#fff}
#reg.mob .r-slab .go{font-size:15px;padding:9px 4px 11px;letter-spacing:.02em}
#reg.mob .r-s2sub{line-height:1.5}
#reg.mob.mob .r-cat{top:var(--s2cat,724px)}
/* 創作者小視窗：在盾牌外面，字是正常大小 */
.r-cw{position:fixed;inset:0;z-index:65;display:grid;justify-items:center;align-items:center;padding:16px;background:rgba(0,0,0,.74);overflow-y:auto}
.r-cw[hidden]{display:none}
.r-cwb{position:relative;width:min(400px,100%);box-sizing:border-box;padding:24px 22px 20px;background:linear-gradient(180deg,#17181a,#0b0b0c);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.8);color:#ebe8e1;font-family:var(--sans)}
.r-cwx{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:#a5a29b;font:300 30px/1 var(--sans);cursor:pointer}
.r-cwx:hover{color:#fff}
.r-cwh{display:flex;gap:16px;align-items:center;padding-right:30px}
.r-cwp{flex:none;width:84px;aspect-ratio:3/4;overflow:hidden;background:radial-gradient(circle at 50% 45%,#1d1d20,#0b0b0c 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.r-cwp img{display:block;width:100%;height:100%;object-fit:cover}
.r-cwp img.crest{width:56%;height:auto;margin:30% auto 0;object-fit:contain;opacity:.35;filter:grayscale(1)}
.r-cwh h3{margin:0;font:900 24px/1.25 var(--serif);letter-spacing:.04em;overflow-wrap:anywhere}
.r-cwig{margin:4px 0 0;font-size:14px;color:#a5a29b;overflow-wrap:anywhere}
.r-cwgo{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 0;padding:14px 16px;background:#f1eee8;color:#0b0b0c;text-decoration:none;font:900 18px/1 var(--serif);letter-spacing:.1em}
.r-cwgo:hover{background:#fff}
.r-cwgo[hidden]{display:none}
.r-cwgo svg{width:22px;height:22px;flex:none}
.r-cwgo i{font-style:normal;font-family:var(--sans);font-weight:400}
.r-cwnote{margin:12px 0 0;font-size:14px;line-height:1.6;color:#a5a29b;text-align:center}
.r-cwnote b{color:#e3262c;font-family:var(--serif);font-weight:900}
.r-cwsoc{display:flex;justify-content:flex-start;margin:20px 0 10px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.r-cwc{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px 6px 10px;border:1px solid rgba(255,255,255,.2);background:none;color:#c9c6bf;font:500 15px/1 var(--sans);letter-spacing:.06em;cursor:pointer}
.r-cwc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.r-cwc small{font-size:13px;color:#6b6760}
.r-cwc:hover{border-color:rgba(255,255,255,.45);color:#fff}
.r-cwc[aria-pressed=true]{color:#e3262c;border-color:rgba(227,38,44,.5);cursor:default}
.r-cwc[aria-pressed=true] svg{fill:#e3262c;stroke:#e3262c}
.r-cwm textarea,.r-cwm input{display:block;width:100%;box-sizing:border-box;padding:11px 12px;font:16px/1.5 var(--sans);color:#f4f2ee;background:#070708;border:1px solid rgba(255,255,255,.18);border-radius:0;resize:none;outline:none}
.r-cwm textarea:focus,.r-cwm input:focus{border-color:rgba(255,255,255,.5)}
.r-cwm ::placeholder{color:#6b6760}
.r-cwmf{display:flex;gap:8px;margin-top:8px}
.r-cwmf input{flex:1;min-width:0}
.r-cwm[hidden]{display:none}
.r-mb{flex:none;cursor:pointer;border:0;padding:0 1.2em;font:900 16px/1 var(--serif);letter-spacing:.14em;color:#ebe8e1;background:#1d1e21;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.r-mb:hover{color:#fff}
.r-mb:disabled{opacity:.5;cursor:default}
.r-cwok{margin:0;font-size:14px;color:#a5a29b}
.r-cwe{margin:8px 0 0;min-height:0;font-size:14px;line-height:1.4;color:#ff5a5f}
.r-cwe:empty{display:none}
/* 電腦版站二：IG／按鈕列收進小視窗後，把空出來的高度平均分給每一段（標題｜說明｜類別｜卡片｜頁碼｜上一步下一步） */
#reg:not(.mob) .r-s2sub{margin-top:28px}
#reg:not(.mob) .r-cat{top:798px}
#reg:not(.mob) .r-arc{top:862px}
#reg:not(.mob) .r-pg{top:1352px}
#reg:not(.mob) .r-nav2{top:1440px}
#reg:not(.mob)[data-step="2"] .r-ticks{top:1500px}

/* 10-31 電子發票列：跟教練陪同同款切換；按鈕字比較長所以不固定寬 */
#reg .r-inv button{flex:0 0 auto;padding:0 12px}
.r-if[hidden]{display:none}
/* 教練＋統編都打開＝多兩排 → 整塊往上提、行距收一點，確認報名才不會超出盾牌內框（10-10 鐵律） */
#reg.coach.inv .r-s3{top:206px}#reg.coach.inv .r-g2{gap:6px}#reg.coach.inv .r-pay{margin-top:8px}#reg.coach.inv .r-s3 .go{margin-top:6px}
#reg.mob.coach.inv .r-s3{top:206px}#reg.mob.coach.inv .r-g2{gap:6px}

/* 10-31 報名流程優化：創作者視窗裡直接貼折扣碼／站三原地看創作者 */
.r-cwcode{margin:16px 0 0}
.r-cwcode label{display:block}
.r-cwcode label span{display:block;margin:0 0 6px;font-size:14px;color:#c9c6bf}
.r-cwcode input{display:block;width:100%;box-sizing:border-box;padding:11px 12px;font:600 17px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#f4f2ee;background:#070708;border:1px solid rgba(255,255,255,.18);border-radius:0;outline:none}
.r-cwcode input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:#6b6760}
.r-cwcode input:focus{border-color:rgba(255,255,255,.5)}
.r-cwcs{margin:6px 0 0;font-size:14px;line-height:1.4;color:#a5a29b}
.r-cwcs:empty{display:none}
.r-cwcs.ok{color:#f1eee8}.r-cwcs.bad{color:#ff5a5f}
.r-cwnext{display:block;width:100%;margin:10px 0 0;padding:13px 16px;border:0;background:#e3262c;color:#fff;font:900 17px/1 var(--serif);letter-spacing:.08em;cursor:pointer}
.r-cwnext[hidden]{display:none}
.r-cwnext:hover{background:#f0333a}
#reg .r-see{display:inline;padding:0;border:0;background:none;font:inherit;color:#f1eee8;text-decoration:underline;text-underline-offset:3px;cursor:pointer;-webkit-text-fill-color:#f1eee8}
.r-cp{position:fixed;inset:0;z-index:62;display:grid;justify-items:center;align-items:center;padding:16px;background:rgba(0,0,0,.74)}
.r-cp[hidden]{display:none}
.r-cpb{position:relative;display:flex;flex-direction:column;width:min(440px,100%);max-height:min(640px,calc(100dvh - 32px));box-sizing:border-box;padding:22px 18px 14px;background:linear-gradient(180deg,#17181a,#0b0b0c);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.8);color:#ebe8e1;font-family:var(--sans)}
.r-cpx{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:#a5a29b;font:300 30px/1 var(--sans);cursor:pointer}
.r-cpb h3{margin:0;padding-right:36px;font:900 22px/1.3 var(--serif);letter-spacing:.04em}
.r-cps{margin:6px 0 12px;font-size:14px;line-height:1.55;color:#a5a29b}
.r-cpl{overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px}
.r-cpi{display:flex;align-items:center;gap:12px;width:100%;padding:8px 4px;border:0;border-top:1px solid rgba(255,255,255,.08);background:none;color:inherit;text-align:left;cursor:pointer}
.r-cpi:hover{background:rgba(255,255,255,.04)}
.r-cpi .ph{flex:none;width:42px;aspect-ratio:3/4;overflow:hidden;background:#0b0b0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.r-cpi .ph img{display:block;width:100%;height:100%;object-fit:cover}
.r-cpi .ph.none img{width:60%;height:auto;margin:40% auto 0;opacity:.35;filter:grayscale(1)}
.r-cpi .tx{flex:1;min-width:0}
.r-cpi b{display:block;font:900 17px/1.3 var(--serif);overflow-wrap:anywhere}
.r-cpi small{display:block;margin-top:2px;font-size:13px;color:#a5a29b}
.r-cpi i{font-style:normal;color:#6b6760;font-size:20px}
/* 10-31 Aaron：看到 $4,500／$8,500 就要知道「選喜愛的創作者現折 500」→ 方案卡價錢底下直接寫折後價 */
.r-off{display:block;width:fit-content;margin:10px auto 0;padding:5px 10px;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.2;color:#f4f2ee;box-shadow:inset 0 0 0 1px var(--paint)}
.r-off em{font-style:normal;font-family:var(--serif);font-weight:900;font-size:17px;color:var(--paint)}
#reg .r-plan.on .r-off{text-shadow:none}
#reg.mob .r-off{margin-top:7px;font-size:14px;padding:4px 8px;white-space:nowrap}#reg.mob .r-off em{font-size:16px}
/* 方案卡多一行折後價 → 手機整塊往上提、卡片和按鈕間距收一點，說明字才留在盾牌內 */
#reg.mob.mob .r-s1{top:366px}
#reg.mob .r-plan{padding:12px 6px 10px}
#reg.mob .r-s1 .go{margin-top:12px}
#reg.mob .r-hint{margin-top:6px}
/* 10-31 Aaron：兩側螢幕＝官方攝影預覽。上方標題「官方攝影預覽」，螢幕左上「動態／平面」＋備註小字；底下張數字、站一說明字拿掉 */
.r-pvt{position:absolute;top:226px;width:300px;text-align:center;font-family:var(--serif);font-weight:900;font-size:24px;letter-spacing:.16em;transition:opacity .3s}
.r-pvtL{left:318px}.r-pvtR{left:1302px}
#reg:not(.planB)[data-step="1"] .r-pvt{opacity:.35!important}
.r-ed b{display:block;font:900 18px/1 var(--serif);letter-spacing:.14em;color:#f4f2ee}
.r-ed small{display:block;margin-top:6px;font:500 13px/1.3 var(--sans);letter-spacing:.04em;color:#d8d4cc}
#reg.mob .r-pvtR{display:none}
#reg.mob .r-pvtL{left:770px;width:380px;top:736px;font-size:30px;letter-spacing:.14em}
#reg.mob .r-ed b{font-size:19px}
#reg.mob .r-ed small{margin-top:5px;font-size:15px;letter-spacing:0}
#reg.mob .r-ed{padding-left:6px;padding-right:6px}#reg.mob .r-ed small{font-size:14px;white-space:nowrap;letter-spacing:-.02em}
/* 10-31 Aaron：只留「動態預覽／平面預覽」，往視窗上緣靠 */
.r-ed,.r-ed.old{padding-top:8px}#reg.mob .r-ed{padding-top:5px}