/* 急急如律令符咒產生器（#1367）。字型：LXGW WenKai TC（OFL，繁體全字，符上可變的字）、Zhi Mang Xing（OFL，毛筆，只有簡體子集，所以只用在固定的「急急如律令」，繁簡同形）。
   方向（Joey 10/17 13:47）：惡搞文創、正面表述、不用宗教元素（不畫香、不寫敕令／法師）。
   兩套都是 Google Fonts 上 OFL 授權（google/fonts 的 ofl/ 目錄有 OFL.txt，10/17 實查），可商用。 */
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@400;700&family=Zhi+Mang+Xing&display=swap');

:root { --accent: #b3261e; --accent-soft: #fbeae8; --fu-paper: #f3d35a; --fu-paper-2: #e9c23f; --fu-ink: #1d1a17; --fu-red: #b3261e; }

.fu-top { padding-bottom: 6px; }
.fu-kicker { margin: 0 0 4px; font-family: 'Zhi Mang Xing', 'LXGW WenKai TC', serif; font-size: 30px; color: var(--fu-red); letter-spacing: .08em; }
.fu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; padding-bottom: 40px; }
@media (max-width: 860px) { .fu-grid { grid-template-columns: 1fr; gap: 22px; } }

.fu-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .fu-form .row2 { grid-template-columns: 1fr; } }
.fu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fu-chips input { position: absolute; opacity: 0; pointer-events: none; }
.fu-chips label { padding: 7px 13px; border: 1.5px solid #d9cfc0; border-radius: 999px; background: #fff; cursor: pointer; font-size: 15px; line-height: 1.3; }
.fu-chips input:checked + label { background: var(--fu-red); border-color: var(--fu-red); color: #fff; }
.fu-chips input:focus-visible + label { outline: 3px solid #f0b4ad; outline-offset: 2px; }
#wish-own { margin-top: 10px; }
.fu-go { width: 100%; margin-top: 8px; font-size: 19px; padding: 14px; background: var(--fu-red); border-color: var(--fu-red); }

/* 舞台 */
.fu-stage { min-height: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fu-empty { width: 100%; border: 2px dashed #e0d3bf; border-radius: 14px; padding: 48px 20px; text-align: center; color: #6b6259; background: #fffaf0; }
.fu-empty b { display: block; color: var(--fu-ink); font-size: 18px; margin-bottom: 6px; }

/* 繪製中：一筆紅色筆畫來回刷 */
.fu-drawing { text-align: center; padding: 48px 0; color: #6b6259; }
.fu-drawing .stroke { width: 140px; height: 12px; margin: 0 auto 18px; border-radius: 6px; background: linear-gradient(90deg, #b3261e, #e8a317); transform-origin: left center; animation: fu-sweep .9s ease-in-out infinite alternate; }
@keyframes fu-sweep { from { transform: scaleX(.12) } to { transform: scaleX(1) } }
.fu-drawing p { margin: 0; font-family: 'LXGW WenKai TC', serif; font-size: 18px; }

/* 符紙 */
.fu-paper { position: relative; width: min(340px, 86vw); aspect-ratio: 9 / 20; background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.25), transparent 60%),
    repeating-linear-gradient(90deg, rgba(160,110,20,.05) 0 2px, transparent 2px 7px),
    linear-gradient(var(--fu-paper), var(--fu-paper-2));
  box-shadow: 0 18px 40px -18px rgba(80,50,10,.55), inset 0 0 0 6px rgba(179,38,30,.85), inset 0 0 0 9px var(--fu-paper), inset 0 0 0 10px rgba(179,38,30,.55);
  border-radius: 4px; color: var(--fu-ink); overflow: hidden; animation: fu-unroll .7s cubic-bezier(.2,.8,.2,1); }
@keyframes fu-unroll { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0 0) } }
.fu-paper .head { position: absolute; top: 5.5%; left: 6%; right: 6%; text-align: center; font-family: 'LXGW WenKai TC', serif; font-weight: 700; color: var(--fu-red); font-size: clamp(34px, 11vw, 50px); line-height: 1.1; letter-spacing: .04em; white-space: nowrap; }   /* 符頭是 AI／使用者寫的字，用繁體全字的楷體 */
.fu-paper .spell { position: absolute; top: 17%; height: 52%; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font-family: 'LXGW WenKai TC', serif; font-weight: 700;
  font-size: clamp(22px, 6.8vw, 30px); line-height: 1.5; letter-spacing: .06em; white-space: pre; text-align: center; }   /* 符文在中段垂直置中（直書的 text-align:center＝上下置中） */
.fu-paper .side { position: absolute; top: 18%; writing-mode: vertical-rl; font-family: 'LXGW WenKai TC', serif; font-size: clamp(13px, 3.6vw, 15px); letter-spacing: .12em; color: #3b3027; }
.fu-paper .side.r { right: 7%; } .fu-paper .side.l { left: 7%; }
.fu-paper .foot { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font-family: 'Zhi Mang Xing', 'LXGW WenKai TC', serif; color: var(--fu-ink); font-size: clamp(30px, 9vw, 40px); line-height: 1; letter-spacing: -.08em; }
.fu-seal { position: absolute; right: 9%; bottom: 9%; width: 68px; height: 68px; border: 3px solid var(--fu-red); border-radius: 6px; color: var(--fu-red); display: grid; place-items: center;
  font-family: 'LXGW WenKai TC', serif; font-weight: 700; font-size: 17px; line-height: 1.05; text-align: center; transform: rotate(-8deg); background: rgba(255,240,220,.15);
  animation: fu-stamp .45s .75s cubic-bezier(.3,1.6,.5,1) both; mix-blend-mode: multiply; }
@keyframes fu-stamp { from { transform: rotate(-8deg) scale(2.4); opacity: 0 } to { transform: rotate(-8deg) scale(1); opacity: .92 } }

/* 使用說明 */
.fu-note { width: min(420px, 100%); background: #fffdf6; border: 1.5px solid #ead9b6; border-radius: 12px; padding: 14px 16px; font-family: 'LXGW WenKai TC', serif; }
.fu-note h3 { margin: 0 0 8px; font-size: 17px; color: var(--fu-red); }
.fu-note dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 16px; line-height: 1.5; }
.fu-note dt { color: #6b6259; white-space: nowrap; } .fu-note dd { margin: 0; color: var(--fu-ink); }
.fu-note .power b { color: var(--fu-red); font-size: 22px; }
.fu-src { font-size: 13px; color: #8a7f74; margin: 8px 0 0; }

.fu-actions { width: min(420px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fu-actions .btn { width: 100%; }
.fu-actions .wide { grid-column: 1 / -1; }
.fu-err { color: var(--fu-red); }

@media print { .fu-actions, .fu-note .fu-src { display: none } .fu-paper { box-shadow: none; animation: none } .fu-seal { animation: none; opacity: .92 } }
@media (prefers-reduced-motion: reduce) { .fu-paper, .fu-seal, .fu-drawing .stroke { animation: none } .fu-seal { opacity: .92 } }

/* 毛筆畫符（brush.js）：canvas 直式符。字型只放英文與標點的子集（中文字由毛筆沿筆順畫，不用字型）——
   莫大毛筆 Bakudai，SIL OFL 1.1（fonts/OFL.txt），子集 hb-subset 只取 U+20–7E、A0–FF、2010–2027、3000–303F、FF01–FF5E */
@font-face { font-family: Bakudai; src: url(fonts/bakudai-latin.ttf) format('truetype'); font-display: swap; }
.fu-canvas-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fu-canvas { width: min(100%, 340px); height: auto; aspect-ratio: 500 / 1700; display: block; border-radius: 4px; filter: drop-shadow(0 14px 18px rgba(60, 30, 0, .35)); background: transparent; }   /* 燒穿的紙邊要透出頁面底色 */
@media (min-width: 861px) { .fu-canvas { width: auto; height: max(420px, min(calc(100vh - 280px), 1100px)); } }   /* 電腦版也讓「送給朋友」留在第一個畫面（10/18） */
.fu-anim-ctl { display: flex; gap: 10px; }
.fu-anim-ctl .btn { padding: 8px 18px; font-size: 15px; }

/* 符庫投稿（Joey 10/17 20:55）：1280 放左欄表單下面、手機放在符的下面；收合樣子跟 FAQ 一樣（圓形箭頭） */
.fu-grid { grid-template-areas: "form stage" "sub stage"; grid-template-rows: auto 1fr; }
.fu-in { grid-area: form; } .fu-stage { grid-area: stage; } .fu-submit { grid-area: sub; }
@media (max-width: 860px) { .fu-grid { grid-template-areas: "form" "stage" "sub"; grid-template-rows: auto; } }
.fu-submit { background: #fffdf6; border: 1.5px solid #ead9b6; border-radius: 12px; padding: 4px 18px; }
.fu-submit summary { cursor: pointer; min-height: 50px; display: flex; align-items: center; font-weight: 700; color: var(--fu-red); padding: 8px 36px 8px 0; position: relative; list-style: none; }
.fu-submit summary::-webkit-details-marker { display: none; }
.fu-submit summary::after { content: ""; position: absolute; right: 0; width: 24px; height: 24px; border-radius: 50%; background: #f6e3df url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .2s; }
.fu-submit[open] summary::after { transform: rotate(180deg); }
.fu-submit[open] { padding-bottom: 14px; }
#fu-sub-form .btn { margin-top: 10px; }
#fu-sub-msg.ok { color: #1d6b3a; font-weight: 700; } #fu-sub-msg.bad { color: var(--fu-red); }
/* 生日三個選單（10/17 Joey 實機：年份預設 1995） */
.fu-date { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.fu-date select { width: 100%; min-width: 0; }
/* 送給朋友／存到手機（10/17 Joey 實機：拿掉「下載分享卡」，主按鈕叫出分享面板） */
.fu-save-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fu-save-pick[hidden] { display: none; }
.fu-act-msg { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--ink-soft); text-align: center; }
#fu-stage { scroll-margin-top: 76px; }   /* 自動捲到畫符區時不要被上方固定標題蓋住 */

/* 手機：整張符縮進一個畫面，按鈕接在下面看得到；點符開大圖（Vega UX 紅隊 10/18）。
   280px＝畫符區捲到頂時符上緣約在 152px（WebKit 390×664 實量）＋跳過／再畫一次那排＋送給朋友那排；最矮 340px，太矮的手機寧可捲一點也不要縮成看不清 */
.fu-zoom { all: unset; display: block; cursor: zoom-in; border-radius: 4px; }
.fu-zoom:focus-visible { outline: 3px solid #f0b4ad; outline-offset: 4px; }
.fu-zoom-hint { align-self: center; font-size: 14px; color: #6b6259; }
@media (max-width: 860px) { .fu-canvas { width: auto; height: max(340px, calc(100svh - 280px)); max-width: 100%; } }
.fu-big { padding: 0; border: 0; border-radius: 10px; max-width: min(96vw, 560px); max-height: 92svh; overflow: auto; background: #fbf6ea; }
.fu-big::backdrop { background: rgba(20, 12, 8, .72); }
.fu-big form { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 8px; background: rgba(251, 246, 234, .92); }
.fu-big img { display: block; width: 100%; height: auto; }

/* 空狀態範例符（旅程盤點 ③，10/18）：手機放在表單下面，不要太高；標「範例」 */
.fu-example { position: relative; margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 20px; border: 2px dashed #e0d3bf; border-radius: 14px; background: #fffaf0; text-align: center; color: #6b6259; }
.fu-example img { height: min(60vh, 520px); width: auto; filter: drop-shadow(0 10px 14px rgba(60, 30, 0, .3)); }
@media (max-width: 860px) { .fu-example img { height: 300px; } }
.fu-example-tag { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; background: var(--fu-red); color: #fff; font-size: 14px; font-weight: 700; }
.fu-example figcaption b { display: block; color: var(--fu-ink); font-size: 18px; margin-bottom: 4px; }
/* P2（Atlas 10/18，dev3 排版清單）：手機版範例框改左右排——左邊整張符縮到框的高度（不裁、不淡出），右邊放說明。
   蓋過 kit.css 959px 以下的「範例只露上半截」（那條對名片、詛咒照舊）；按「看完整範例」（kit.js 加 .kit-ex-full）才換回直排大圖。
   框的頂端位置不動，首屏 hardcheck 量的是頂端（fu 離底線只剩 10px）。 */
@media (max-width: 959px) {
  main .fu-example:not(.kit-ex-full) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; max-height: none; -webkit-mask-image: none; mask-image: none; padding: 46px 16px 16px; text-align: left; }
  main .fu-example:not(.kit-ex-full) img { height: 200px; flex: none; }
  main .fu-example:not(.kit-ex-full) figcaption { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; }
  main .fu-example.kit-ex-full img { height: min(70svh, 520px); }
  main .fu-example + .kit-ex-open { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 10px auto 0; padding: 0 20px; border: 1.5px solid var(--fu-red); border-radius: 999px; background: #fff; color: var(--fu-red); font-size: 15px; text-decoration: none; }
}

/* 這是什麼／不是什麼（UX 紅隊 10/18 P03）：例句下面一段小字，一眼看完 */
.fu-what { margin: 10px 0 0; max-width: 46em; font-size: 15px; line-height: 1.7; color: #4a4038; }
.fu-what b { color: var(--fu-ink); }

/* 萬用輸入（Atlas 10/18）：講一句就畫；表單收進「核對我聽到的」（跟 severance 同一個做法） */
#fu-un { margin-bottom: 14px; }
#fu-un:empty { min-height: 276px; }
@media (min-width: 960px) { #fu-un:empty { min-height: 264px; } }
.fu-check { background: #fff; border-radius: 14px; box-shadow: 0 1px 0 #e0d3bf, 0 6px 18px -12px rgba(60,30,0,.35); }
.fu-check > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font-weight: 700; color: var(--fu-red); }
.fu-check > summary::-webkit-details-marker { display: none; }
.fu-check > summary::after { content: "＋"; font-weight: 900; }
.fu-check[open] > summary::after { content: "－"; }
.fu-check .fu-form { padding: 4px 16px 16px; }

/* 首屏小標「急急如律令」維持這站的毛筆個性（Atlas 10/18 P3：統一首屏後變成普通小標籤，可惜）：
   藍底上直接放紅字對比不夠（約 1.6:1），做成一條米色紙條上的紅色毛筆字（約 5.9:1）；手機也顯示（kit 的小標手機是收起的） */
.fu-top .kit-eyebrow { padding: 2px 14px 0; border-radius: 4px; background: #FFF3D6; color: var(--fu-red); font: 400 26px/1.25 'Zhi Mang Xing', 'LXGW WenKai TC', serif; letter-spacing: .1em; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45); }
.fu-top .kit-eyebrow::before { display: none; }
@media (max-width: 959px) {
  .fu-top .kit-eyebrow { display: inline-flex; font-size: 22px; margin-top: 12px; grid-column: 1; grid-row: 1; }
  .fu-top .kit-h1 { grid-row: 2; align-self: start; margin-top: 6px; }
}