/* =============================================================
   style.css — 正式前台樣式（CR-004）
   來源：ui_demo/flow-mobile.html <style>，整理為可維護正式版。
   變更：拔 Google Fonts CDN（改系統 serif fallback）、移除模擬器 simbar/drawer、
        新增 .r2-type / .gbuy / .r-back / .devPanel。
   ============================================================= */

:root{
  --ink:#3b3630; --ink2:#857c6f; --line:#d8cdb8; --gold:#b89b6a;
  /* 自帶字體之前先用系統襯線 fallback（iOS Safari 內建 Songti TC） */
  --serif:"Noto Serif TC","Songti TC","Source Han Serif TC","Songti SC",serif;
  --header-logo-h:28px;
  --header-pad-top:clamp(6px,1.5svh,12px);
  --header-pad-btm:clamp(6px,1svh,12px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--serif);color:var(--ink);background:#1c1a17;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

/* 整頁畫面（取代模擬器 .screen + .simbar 結構） */
.screen{flex:1 1 auto;position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#f4eee3}

/* 共用 HEAD */
.head{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;
  padding:calc(env(safe-area-inset-top) + var(--header-pad-top)) 32px var(--header-pad-btm);
  background:#fdfcfb}
.head img{width:min(68px,22vw);height:var(--header-logo-h);object-fit:contain;opacity:.6;display:block}

/* Landing */
.landing{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;
  background-size:cover;background-position:center}
.landing::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(250,246,237,.1) 30%,rgba(248,243,233,.55) 78%,rgba(245,239,228,.82))}
.landing .center{position:relative;z-index:2;text-align:center;padding:calc(env(safe-area-inset-top) + 22vh) 30px 0}
.landing .bottom{position:relative;z-index:2;text-align:center;margin-top:auto;padding:24px 32px calc(env(safe-area-inset-bottom) + 28px)}
.landing .lateNote{font-size:14px;letter-spacing:.16em;color:#6a6258;line-height:1.95;margin:0 auto 18px;text-align:center}
.landing .done-sm{font-size:15px;letter-spacing:.14em;color:#6a6258;line-height:2.1;text-shadow:0 1px 10px rgba(250,245,235,.6)}
.landing .done-div{width:40px;height:1px;background:#b6a892;margin:24px auto}
.landing .done-lg{font-size:clamp(20px,6vw,25px);letter-spacing:.12em;color:#46403a;line-height:1.85;font-weight:500;text-shadow:0 1px 12px rgba(250,245,235,.7)}
.landing .l-label{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:15px;letter-spacing:.18em;color:#a89a8e;line-height:1.6;margin-bottom:26px}
.landing .l-label::after{content:"";width:64px;height:1px;background:#a89a8e;opacity:.8}
.landing .l-head{font-size:clamp(16px,4.6vw,20px);font-weight:300;color:#46403a;line-height:1.7;letter-spacing:.08em}
.landing .l-sec{font-size:clamp(20px,6.2vw,25px);color:#5f5350;line-height:1.55;letter-spacing:.1em;margin-top:30px}
.landing .ctaStage{position:relative;min-height:120px;display:flex;align-items:center;justify-content:center;margin-top:8px}
.landing .ctaStage .stxt{position:absolute;left:0;right:0;text-align:center;
  font-size:14px;letter-spacing:.14em;color:#6a6258;opacity:0;pointer-events:none}
.landing .ctaStage .s1{animation:seq1 7s ease forwards}
.landing .ctaStage .s2{animation:seq2 7s ease forwards}
.landing .ctaStage .s3{position:absolute;left:50%;transform:translateX(-50%);opacity:0;animation:seq3 7s ease forwards;
  background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes seq1{0%{opacity:0}6%{opacity:1}28%{opacity:1}34%{opacity:0}100%{opacity:0}}
@keyframes seq2{0%,34%{opacity:0}40%{opacity:1}62%{opacity:1}68%{opacity:0}100%{opacity:0}}
@keyframes seq3{0%,68%{opacity:0;pointer-events:none}74%{opacity:1}100%{opacity:1;pointer-events:auto}}

.btn{width:100%;max-width:520px;border:0;border-radius:999px;padding:16px;cursor:pointer;font-family:var(--serif);
  font-size:16px;letter-spacing:.24em;color:#3b3630;background:rgba(255,253,248,.9);
  box-shadow:0 8px 22px rgba(120,100,70,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* 再次感應提示 + NFC 動畫 */
.reTap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 0}
.reTap.dark{color:#9a8a6a}
.reTap .lbl{font-size:13.5px;letter-spacing:.2em;line-height:1.7;text-align:center}
.nfcA{width:124px;height:auto;display:block}
.nfcPhone{transform-box:fill-box;transform-origin:center;animation:nfcMove 2.6s cubic-bezier(.4,0,.35,1) infinite}
.nfcCard{opacity:.92}
.nfcRing{transform-box:fill-box;transform-origin:center;opacity:0;animation:nfcRip 2.6s ease-out infinite}
.nfcRing2{animation-delay:.16s}.nfcRing3{animation-delay:.32s}
@keyframes nfcMove{0%{transform:translateX(0)}30%{transform:translateX(22px)}60%{transform:translateX(22px)}100%{transform:translateX(0)}}
@keyframes nfcRip{0%,26%{opacity:0;transform:scale(.35)}42%{opacity:.85;transform:scale(.95)}62%{opacity:0;transform:scale(1.95)}100%{opacity:0}}

/* Loading */
.loading{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(120% 80% at 50% 35%,#fbf7ee,#efe7d8)}
.loading .ring{width:54px;height:54px;border-radius:50%;border:2px solid rgba(184,155,106,.25);
  border-top-color:var(--gold);animation:spin 1s linear infinite}
.loading .lbl{font-size:14px;letter-spacing:.22em;color:#8a8073}
@keyframes spin{to{transform:rotate(360deg)}}

/* Result：語料上、曼陀羅圖下 */
.r2{min-height:100%;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 0%,#fbf7ee,#f4eee3 60%,#efe7d8)}
.r2-body{flex:1 0 auto;position:relative;display:flex;flex-direction:column;
  justify-content:safe center;padding-top:calc(env(safe-area-inset-top) + 56px)}
.r2-body::-webkit-scrollbar{width:0}
.r2-lines{padding:12px clamp(26px,7vw,44px) 6px;max-width:560px;margin:0 auto;width:100%}
.r2-step{padding:18px 0 6px;text-align:center}
.r2-arc{font-size:15px;font-weight:600;letter-spacing:.16em;color:var(--ink);margin-bottom:8px}
.r2-couplet{font-size:16px;line-height:2;color:#4a443c}
.r2-type{text-align:center;margin-top:2px}
.r2-type .tzh{font-size:14px;letter-spacing:.22em;color:#5a5246}
.r2-type .ten{display:block;font-size:10px;letter-spacing:.3em;color:#9a8f7c;margin-top:4px;text-transform:uppercase}
.r2-mwrap{display:flex;justify-content:center;position:relative;padding:40px 0 8px}
.r2-mwrap::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46vw;max-width:204px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(184,155,106,.16),transparent 68%)}
.r2-mandala{width:38vw;max-width:168px;aspect-ratio:1;border-radius:50%;object-fit:cover;position:relative;
  outline:0;background:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 24px 6px rgba(255,251,244,.75),0 22px 44px -12px rgba(60,48,34,.30)}
.r2-foot{position:relative;z-index:4;padding:36px clamp(22px,6vw,40px) calc(env(safe-area-inset-bottom) + 18px);display:flex;justify-content:center;
  background:linear-gradient(to top,#f4eee3 60%,transparent)}
.r2-btn{width:100%;max-width:520px;border:0;border-radius:999px;padding:15px;cursor:pointer;font-family:var(--serif);
  font-size:16px;letter-spacing:.22em;color:#3b3630;background:#cdbfa6;box-shadow:0 6px 16px rgba(120,100,70,.18)}

/* 落點頁 / idle / error（共用 guide 版型） */
.guide{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:18px;
  background:radial-gradient(120% 80% at 50% 30%,#fbf7ee,#ece3d4);padding:60px 40px;text-align:center}
.guide .gt{font-size:19px;letter-spacing:.1em;color:#46403a}
.guide .gs{font-size:14px;line-height:2;color:#7c7367}
.guide .mk{width:42px;height:42px;border-radius:50%;border:1px solid #c9bca3;color:#a8997e;
  display:flex;align-items:center;justify-content:center;font-size:20px}
.gbuy{display:inline-block;margin-top:6px;font-size:13px;letter-spacing:.16em;color:#6a6258;text-decoration:none;
  border-bottom:1px solid rgba(106,98,88,.4);padding:6px 4px}

/* Review */
.review{min-height:100%;
  padding:calc(env(safe-area-inset-top) + 60px) clamp(24px,7vw,40px) calc(env(safe-area-inset-bottom) + 26px);
  background:radial-gradient(120% 70% at 50% 0%,#fbf7ee,#efe7d8)}
.review .rh{text-align:center;font-size:17px;letter-spacing:.14em;color:#46403a;margin-bottom:6px}
.review .rsub{text-align:center;font-size:12.5px;color:#8a8073;letter-spacing:.1em;margin-bottom:18px}
.rgroup{padding:22px 4px;border-top:1px solid rgba(216,205,184,.6);text-align:center}
.rgroup:first-of-type{border-top:0}
.rgnum{font-size:12.5px;letter-spacing:.22em;color:var(--gold);margin-bottom:12px}
.rgImg{width:108px;height:108px;border-radius:14px;object-fit:cover;margin:0 auto 11px;display:block;
  box-shadow:0 8px 22px rgba(70,58,42,.16);outline:1px solid rgba(59,54,48,.1);background:rgba(180,170,150,.18)}
.rgType{margin-bottom:14px}
.rgType .tzh{font-size:13.5px;letter-spacing:.22em;color:#5a5246}
.rgType .ten{display:block;font-size:10px;letter-spacing:.3em;color:#9a8f7c;margin-top:3px;text-transform:uppercase}
.rglines{max-width:300px;margin:0 auto;text-align:center}
.rline{font-size:14.5px;line-height:2;color:#4a443c}
.rempty{font-size:14px;color:#8a8073;text-align:center;padding:34px 0;line-height:2.2}
.rslogan{text-align:center;font-size:14px;line-height:2;letter-spacing:.14em;color:#7c7367;margin:24px 0 4px}
.r-back{text-align:center;padding:22px 0 8px}

/* dev 面板（僅 localhost；正式站不載入） */
.devPanel{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:200;font-family:var(--serif)}
.devToggle{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.08);
  background:rgba(40,32,20,.82);color:#f3ecda;font-size:12px;letter-spacing:.08em;cursor:pointer;
  box-shadow:0 6px 16px rgba(40,32,20,.3)}
.devBody{position:absolute;right:0;bottom:54px;width:248px;background:#fffdf8;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 34px rgba(40,32,20,.26);padding:14px}
.devHd{font-size:12px;letter-spacing:.06em;color:var(--ink2);margin-bottom:10px}
.devLbl{font-size:11.5px;color:var(--ink2);margin:12px 0 6px}
.devCards{display:flex;flex-direction:column;gap:6px}
.devPanel button{font-family:var(--serif)}
.devCard,.devReTap,.devClear{width:100%;font-size:12.5px;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);cursor:pointer;text-align:left}
.devReTap{background:var(--ink);color:#f7f2e8;border-color:var(--ink);text-align:center;letter-spacing:.1em}
.devClear{margin-top:12px;text-align:center;color:#a4574e;border-color:#e0c4bf}