/**
 * 修行之書（/shugyo.html）
 * 場景：房間背景（道場／茶室，桌機寬版＋手機直版，圖與座標在 css/shugyo-rooms.css，由 scripts/gen_rooms_css.py 產生）
 *       + 六個裝飾格圖層（掛軸／花／三層架／床前／吊り物／坐墊）+ 角色圖層；所有座標用舞台百分比，Flutter 可照抄。
 * 掛軸是飾り之一（.sg-slot-scroll 配件圖 + 本紙上的稱號文字）。
 * 素材：images/shugyo/*.png、images/shugyo/decor/*.png（Gemini 生成，門生頭貼風格）
 */

:root {
    --sg-paper: #f3e7cf;
    --sg-paper-dark: #e6d5b3;
    --sg-ink: #4a3423;
    --sg-ink-light: #7a5c44;
    --sg-red: #b3261e;
    --sg-gold: #c9962f;
    --sg-line: #8b6a4a;
}

.shugyo-page {
    max-width: 1180px;
    margin: 1.2rem auto 2.5rem;
    padding: 0 1rem;
}

.shugyo-head {
    text-align: center;
    margin-bottom: .8rem;
}

.shugyo-head h1 {
    font-family: 'Yuji Syuku', serif;
    font-size: 2rem;
    letter-spacing: .15em;
    color: var(--sg-ink);
    margin: 0;
}
.shugyo-head p {
    margin: .3rem 0 0;
    color: var(--text-secondary);
    font-size: .95rem;
}

/* ===== 書本外框：左舞台、右面板 ===== */
.shugyo-book {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: 0;
    background: var(--sg-paper);
    border: 3px solid var(--sg-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(60, 40, 20, .25), inset 0 0 0 6px #fbf3e3;
    overflow: hidden;
}

/* ===== 舞台 ===== */
.shugyo-stage {
    position: relative;
    /* 背景與比例由 css/shugyo-rooms.css 依房間指定 */
    background: center / 100% 100% no-repeat #6b5238;
    overflow: hidden;
    user-select: none;
}
.shugyo-stage::after {
    /* 暖色壓暗，讓角色與 UI 跳出來 */
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 65%, rgba(0,0,0,0) 45%, rgba(40, 20, 5, .28) 100%);
    pointer-events: none;
}
.sg-layer { position: absolute; }
.sg-layer img { display: block; width: 100%; height: auto; }

/* 角色：座標由 css/shugyo-rooms.css 依房間坐墊格給（底邊置中）；坐墊是獨立的 .sg-slot-mat 圖層；點了開角色紙 */
.sg-char {
    margin: 0;
    padding: 0; border: none; background: transparent; cursor: pointer;
    min-height: 0; height: auto;
    transform: translate(-50%, -100%);
    z-index: 5;
    animation: sg-breathe 4.2s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.sg-body { position: relative; width: 100%; }
.sg-body img { position: relative; z-index: 1; width: 100%; transition: filter .2s; }
.sg-char:hover, .sg-char:focus { background: transparent; box-shadow: none; outline: none; }   /* 蓋掉全站 button:hover 的底色 */
.sg-char:hover .sg-body img { filter: drop-shadow(0 0 8px rgba(251, 191, 36, .75)); }
/* 更衣提示：跟 HUD 同款小藥丸，掛在角色右下 */
.sg-char-hint {
    position: absolute; right: -14%; top: 42%; z-index: 2;   /* 肩膀旁，避開底部 HUD */
    padding: .15em .6em;
    background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px);
    border: 1.5px solid rgba(250, 204, 21, .5); border-radius: 999px;
    font-family: 'Yuji Syuku', serif; font-size: clamp(.6rem, .9vw, .78rem); letter-spacing: .08em;
    color: #fde68a; white-space: nowrap;
    opacity: .85; transition: opacity .2s, transform .2s;
}
.sg-char:hover .sg-char-hint { opacity: 1; transform: translateY(-2px); }
.sg-body::after {
    content: ''; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 14%;
    background: radial-gradient(ellipse at 50% 50%, rgba(30, 15, 5, .48), rgba(30, 15, 5, 0) 68%);
}
/* 換角色／服裝時的淡入 */
.sg-body img.sg-swap { animation: sg-fadein .35s ease; }
@keyframes sg-fadein { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@keyframes sg-breathe {
    0%, 100% { transform: translate(-50%, -100%) scaleY(1); }
    50%      { transform: translate(-50%, -100%) scaleY(1.012); }
}

/* 右上角錢包 HUD：樣式跟社務所 .coin-display 同款（黑底半透明、金邊、金字），尺寸跟舞台走 */
.sg-wallet {
    right: 2%; top: 3.5%;
    z-index: 5;
    display: flex; gap: .35rem;
}
.sg-wallet-item {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem .2rem .35rem;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(250, 204, 21, .5);
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.sg-wallet-saisen { border-color: rgba(205, 127, 50, .4); }
.sg-wallet-item img { width: clamp(16px, 1.6vw, 20px); height: clamp(16px, 1.6vw, 20px); filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.sg-wallet-item b {
    font-family: 'Yuji Syuku', serif; font-weight: bold;
    font-size: clamp(.75rem, 1vw, .9rem);
    color: #fbbf24; min-width: 2ch; text-align: right;
}

/* 角色紙：蓋住舞台的和紙，從下方滑入 */
.sg-sheet {
    position: absolute; inset: 0; z-index: 8;
    background: rgba(20, 10, 5, .45);
    display: flex; align-items: center; justify-content: center;
}
.sg-sheet[hidden] { display: none; }
.sg-sheet-paper {
    position: relative;
    width: 88%; max-height: 90%;
    display: flex; flex-direction: column;
    background: url('/images/shugyo/paper.jpg') center / cover no-repeat, var(--sg-paper);
    border: 3px solid var(--sg-line); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 0 0 4px #fbf3e3;
    padding: .7rem 1rem .9rem;
    animation: sg-sheet-in .28s ease;
}
@keyframes sg-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sg-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.sg-sheet-tabs { display: flex; gap: .3rem; }
.sg-stab {
    min-height: 0; margin: 0; padding: .25rem .8rem;
    border: 1.5px solid rgba(139, 106, 74, .5); border-radius: 999px; background: rgba(255, 250, 238, .5);
    font-family: 'Yuji Syuku', serif; font-size: .85rem; letter-spacing: .12em; color: var(--sg-ink-light); cursor: pointer;
}
.sg-stab:hover { color: var(--sg-red); background: rgba(255, 250, 238, .8); }
.sg-stab.active { background: var(--sg-red); border-color: var(--sg-red); color: #fff; }
.sg-spane { display: none; }
.sg-spane.active { display: block; }
/* 飾り：依格分組，小卡 */
.sg-decor-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-bottom: .6rem; }
.sg-dc {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .3rem .15rem .25rem; border: 2px solid rgba(139, 106, 74, .35); border-radius: 6px;
    background: rgba(255, 250, 238, .45); cursor: pointer; text-align: center; transition: transform .12s, border-color .12s;
}
.sg-dc:hover { transform: translateY(-2px); border-color: var(--sg-gold); }
.sg-dc.on { border-color: var(--sg-red); box-shadow: 0 0 0 2px rgba(178, 34, 34, .18); }
.sg-dc.locked { cursor: default; opacity: .55; }
.sg-dc.locked img { filter: grayscale(1) brightness(.6); }
.sg-dc img { width: 100%; height: 52px; object-fit: contain; display: block; }
.sg-dc .sg-dc-name { font-size: .66rem; color: var(--sg-ink); line-height: 1.15; }
.sg-dc .sg-dc-state { font-size: .58rem; color: var(--sg-ink-light); line-height: 1.1; min-height: 1.1em; }
.sg-dc.on .sg-dc-state { color: var(--sg-red); }
.sg-dc-empty { border-style: dashed; }
.sg-dc-blank { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; font-family: 'Yuji Syuku', serif; font-size: 1.3rem; color: rgba(122, 92, 68, .45); }
.sg-decor-progress { font-family: 'Yuji Syuku', serif; font-size: .78rem; color: var(--sg-ink-light); letter-spacing: .06em; }
/* 部屋 */
.sg-room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.sg-rc { position: relative; border: 2px solid rgba(139, 106, 74, .35); border-radius: 8px; overflow: hidden; background: rgba(255, 250, 238, .45); cursor: pointer; }
.sg-rc:hover { border-color: var(--sg-gold); }
.sg-rc.on { border-color: var(--sg-red); box-shadow: 0 0 0 2px rgba(178, 34, 34, .18); }
.sg-rc img { display: block; width: 100%; aspect-ratio: 832 / 520; object-fit: cover; }
.sg-rc .sg-rc-body { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .6rem; }
.sg-rc .sg-rc-name { font-family: 'Yuji Syuku', serif; font-size: .95rem; letter-spacing: .1em; color: var(--sg-ink); }
.sg-rc .sg-rc-state { font-size: .7rem; color: var(--sg-ink-light); }
.sg-rc.on .sg-rc-state { color: var(--sg-red); }
.sg-sheet-head h3 { margin: 0; font-family: 'Yuji Syuku', serif; font-size: 1.1rem; letter-spacing: .16em; color: var(--sg-ink); }
.sg-sheet-close {
    width: 30px; height: 30px; min-height: 0; padding: 0;
    border-radius: 50%; border: 1.5px solid var(--sg-line); background: rgba(255, 250, 238, .6);
    color: var(--sg-ink); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.sg-sheet-close:hover { background: var(--sg-red); color: #fff; border-color: var(--sg-red); }
.sg-char-panel { overflow: auto; min-height: 0; padding-right: .2rem; }
.sg-char-panel .sg-char-grid { grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .5rem; }
.sg-char-panel .sg-cc { padding: .4rem .3rem .35rem; gap: .15rem; }
.sg-char-panel .sg-cc img { max-width: 80px; height: 78px; }
.sg-char-panel .sg-sec-h { margin: 0 0 .3rem; }
.sg-char-panel .sg-preview-bar { margin-bottom: .5rem; padding: .35rem .6rem; }
.sg-char-panel .sg-cc .sg-cc-name { font-size: .8rem; }
.sg-char-panel .sg-cc .sg-cc-state { font-size: .7rem; }

/* ===== 固定格（掛軸、坐墊）與自由擺放的飾り ===== */
.sg-slot { position: absolute; pointer-events: none; }
.sg-slot-mat { z-index: 2; }
/* 文机＋書：只在手機版出現（桌機右頁本來就攤開著，不需要入口）；點了把右頁展開成整頁 */
.sg-desk { display: none; z-index: 5; pointer-events: auto; padding: 0; border: 0; background: transparent; cursor: pointer; transform-origin: 50% 100%; transition: transform .2s; }
.sg-desk img { filter: drop-shadow(0 4px 6px rgba(30, 15, 5, .35)); transition: filter .2s; }
.sg-desk:hover, .sg-desk:focus, .sg-desk:focus-visible { background: transparent; box-shadow: none; outline: none; }
.sg-desk-dot { position: absolute; left: 60%; top: 2%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #e0362f; border: 2px solid #fff7e6; box-shadow: 0 0 6px rgba(224, 54, 47, .8); animation: sg-dot-pulse 1.6s ease-in-out infinite; }
.sg-desk-dot[hidden] { display: none; }
@keyframes sg-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* 桌機：點書翻頁的小動畫 */
.sg-page-body.sg-flip { animation: sg-page-flip .45s ease-out; }
@keyframes sg-page-flip { 0% { opacity: .2; transform: perspective(900px) rotateY(-28deg); } 100% { opacity: 1; transform: none; } }
.sg-panel-close { display: none; }
/* 飾り圖層：每件 .sg-piece 以錨點（底邊中心；吊掛是頂邊中心）定位，高度依種類 */
.sg-pieces, .sg-zones { inset: 0; pointer-events: none; }
.sg-piece { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; touch-action: none; user-select: none; -webkit-user-drag: none; }
.sg-piece[data-anchor="top"] { transform: translate(-50%, 0); }
.sg-piece-in { display: block; height: 100%; }
.sg-piece img { height: 100%; width: auto; display: block; pointer-events: none; -webkit-user-drag: none; transition: filter .15s; }
/* 稀有品的小動態（放在內層，不跟拖動／選取的 filter 打架）：吊掛輕搖、千羽鶴飄、行燈燭光、太刀反光、金貓發亮 */
.sg-piece[data-type="hang"] .sg-piece-in { transform-origin: 50% 0; animation: sg-sway 4.5s ease-in-out infinite; }
.sg-piece[data-id="hang_senbazuru"] .sg-piece-in { animation: sg-sway 6s ease-in-out infinite, sg-drift 5s ease-in-out infinite; }
.sg-piece[data-id="floor_andon"] .sg-piece-in { animation: sg-candle 2.8s ease-in-out infinite; }
.sg-piece-in { position: relative; }
.sg-piece-fx { position: absolute; left: 0; top: 0; height: 100%; width: auto; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
/* 刀身冷藍光：一道光帶從刀柄端掃到刀尖（用會移動的遮罩），刀架不動 */
.sg-piece[data-id="floor_katana"] .sg-piece-fx {
    opacity: 1; filter: blur(.4px) saturate(1.4);
    -webkit-mask-image: linear-gradient(100deg, transparent 0 38%, rgba(0, 0, 0, .35) 44%, #000 50%, rgba(0, 0, 0, .35) 56%, transparent 62% 100%);
    mask-image: linear-gradient(100deg, transparent 0 38%, rgba(0, 0, 0, .35) 44%, #000 50%, rgba(0, 0, 0, .35) 56%, transparent 62% 100%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 120% 0; mask-position: 120% 0;
    animation: sg-blade-sweep 5s linear infinite;
}
@keyframes sg-blade-sweep {
    0%, 78% { -webkit-mask-position: 120% 0; mask-position: 120% 0; }      /* 光帶停在左外側（看不到） */
    98%, 100% { -webkit-mask-position: -20% 0; mask-position: -20% 0; }    /* 1 秒左右從左掃到右（mask-size 300%，位置百分比反向） */
}
.sg-piece[data-id="shelf_maneki"] .sg-piece-in { animation: sg-shine 3.5s ease-in-out infinite; }
.sg-piece[data-id="shelf_kitsune"] .sg-piece-in { animation: sg-shine-soft 5s ease-in-out infinite; }
@keyframes sg-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes sg-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2%; } }
@keyframes sg-candle { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 190, 90, .55)); } 40% { filter: drop-shadow(0 0 12px rgba(255, 200, 110, .9)); } 60% { filter: drop-shadow(0 0 7px rgba(255, 190, 90, .6)); } }
@keyframes sg-shine { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 215, 90, .6)) drop-shadow(0 0 2px rgba(255, 235, 150, .6)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 210, 80, 1)) drop-shadow(0 0 4px rgba(255, 240, 170, .9)); } }
@keyframes sg-shine-soft { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 120, 90, .25)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 140, 100, .6)); } }
@media (prefers-reduced-motion: reduce) { .sg-piece-in { animation: none !important; } }
/* 抽屜卡片的稀有度星標 */
/* 升階獎勵吐司（右下，跟 HUD 同款） */
.sg-buy-row { display: flex; gap: .25rem; justify-content: center; margin-top: .15rem; }
.sg-buy-row .sg-buy-btn { padding: .15em .5em; font-size: .7rem; display: inline-flex; align-items: center; gap: .2em; }
.sg-cc .sg-buy-btn img, .sg-cc .sg-price img, .sg-rc .sg-price img,
.sg-char-panel .sg-cc .sg-buy-btn img, .sg-char-panel .sg-cc .sg-price img { width: 1.1em; height: 1.1em; max-width: none; object-fit: contain; vertical-align: -.15em; margin: 0; }   /* 蓋掉卡片大圖的尺寸規則 */
.sg-price { display: inline-flex; align-items: center; gap: .15em .45em; }
.sg-price b { font-weight: 600; color: #7a5c44; margin-right: .35em; }
.sg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
.sg-toast { padding: .5rem .9rem; background: rgba(0, 0, 0, .75); border: 1.5px solid rgba(250, 204, 21, .6); border-radius: 999px; color: #fde68a; font-family: 'Yuji Syuku', serif; font-size: .9rem; letter-spacing: .06em; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); animation: sg-toast-in .4s ease both; }
@keyframes sg-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sg-dc-star { position: absolute; top: 2px; right: 4px; font-size: .62rem; line-height: 1; color: #b8860b; text-shadow: 0 0 3px rgba(255, 220, 120, .8); }
.sg-dc.r-legendary { border-color: rgba(184, 134, 11, .7); background: linear-gradient(180deg, rgba(255, 244, 214, .7), rgba(255, 250, 238, .45)); }
.sg-dc.r-legendary .sg-dc-star { color: #d4a017; }
.sg-piece[data-type="hang"] { z-index: 2; }
.sg-piece[data-type="shelf"] { z-index: 3; }
.sg-piece[data-type="flower"], .sg-piece[data-type="floor"] { z-index: 4; }
.sg-piece:hover img { filter: drop-shadow(0 0 5px rgba(251, 191, 36, .6)); }
.shugyo-stage.editing .sg-piece { cursor: grab; }
.shugyo-stage.editing .sg-piece.dragging { cursor: grabbing; z-index: 6; }
.shugyo-stage.editing .sg-piece.dragging img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transform: scale(1.06); }
.shugyo-stage.editing .sg-piece.selected img { filter: drop-shadow(0 0 6px rgba(251, 191, 36, .9)) drop-shadow(0 0 2px #fde68a); }
/* 吸附區：編輯中才顯示，拖的時候只亮該種飾り能放的區；線＝棚板／橫樑，面＝地板 */
.sg-zone { position: absolute; opacity: 0; transition: opacity .15s; border: 1.5px dashed rgba(253, 230, 138, .75); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.sg-zone.line { height: 0; border-width: 0 0 2px; border-radius: 0; }
.sg-zone.line.top { border-width: 2px 0 0; }
.shugyo-stage.editing .sg-zone.ok { opacity: .55; }
.shugyo-stage.editing .sg-zone.ok.active { opacity: 1; border-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .7); }
/* 左上角擺設按鈕、編輯工具列（跟 HUD 同款黑底金邊） */
.sg-arrange-btn, .sg-edit-bar {
    left: 2.5%; top: 3%; z-index: 7;
    margin: 0; padding: .2em .7em; min-height: 0; height: auto;
    background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px);
    border: 1.5px solid rgba(250, 204, 21, .5); border-radius: 999px;
    font-family: 'Yuji Syuku', serif; font-size: clamp(.62rem, .95vw, .82rem); letter-spacing: .08em; color: #fde68a;
    display: flex; align-items: center; gap: .5rem; white-space: nowrap; cursor: pointer;
}
.sg-arrange-btn[hidden], .sg-edit-bar[hidden] { display: none; }
.sg-arrange-btn:hover, .sg-arrange-btn:focus { background: rgba(0, 0, 0, .8); box-shadow: none; outline: none; color: #fff3c4; }
.sg-edit-bar { cursor: default; right: auto; max-width: 70%; }
.sg-edit-hint { opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.sg-edit-btn { margin: 0; padding: .1em .6em; min-height: 0; height: auto; border: 1px solid rgba(250, 204, 21, .6); border-radius: 999px; background: transparent; color: #fde68a; font: inherit; cursor: pointer; }
.sg-edit-btn.on { background: #b8860b; color: #1a1208; border-color: #fbbf24; }
.sg-edit-btn:hover, .sg-edit-btn:focus { background: rgba(251, 191, 36, .25); box-shadow: none; outline: none; }
.sg-edit-btn.on:hover { background: #fbbf24; }
.sg-edit-btn[disabled] { opacity: .4; cursor: default; }
.shugyo-stage.editing .sg-char-hint, .shugyo-stage.editing .sg-wallet { opacity: .35; }
/* 坐墊：寬度由房間 CSS 給、底邊貼格底，角色座位高度由 JS 依圖高算。
   草蓆是低視角、有厚度的正面圖，壓到一半厚度剛好；兩款座布団是俯視圖，壓扁成橢圓才像放在地上 */
.sg-slot-mat img { position: static; width: 100%; height: auto; max-height: none; display: block; transform-origin: 50% 100%; }
.sg-slot-mat img[data-mat="mat_straw"] { transform: scaleY(.5); }
.sg-slot-mat img[data-mat="mat_zabuton"], .sg-slot-mat img[data-mat="mat_luxury"] { transform: scale(1.3, .42); }   /* 俯視圖放寬一點才不會整個被角色蓋住 */
/* 掛軸：配件圖（寬度由房間 CSS 給，高度跟圖），本紙區域放稱號文字 */
.sg-slot-scroll {
    z-index: 3; pointer-events: auto;
    margin: 0; padding: 0; border: none; background: transparent; cursor: pointer;
    min-height: 0; height: auto;
    transition: filter .2s;
}
.sg-slot-scroll:hover, .sg-slot-scroll:focus { background: transparent; box-shadow: none; outline: none; filter: drop-shadow(0 0 6px rgba(251, 191, 36, .6)); }
#sg-scroll-img { position: static; display: block; width: 100%; height: auto; transform: none; max-width: none; max-height: none; filter: drop-shadow(2px 4px 4px rgba(30, 15, 5, .35)); }
.sg-scroll-text {
    /* 本紙在掛軸圖裡的位置（三張掛軸同版型：left 20.1% top 30.3% width 59.6% height 53.4%，內縮一點） */
    position: absolute; left: 22%; top: 32%; width: 56%; height: 50%;
    display: block;
    font-family: 'Yuji Boku', 'Yuji Syuku', serif;
    color: color-mix(in srgb, var(--title-color, #221811) 70%, #221811);
    mix-blend-mode: multiply;
    text-shadow: 0 0 .6px rgba(34, 24, 17, .55);
    white-space: nowrap; overflow: hidden;
}
.sg-scroll-text svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-scroll-text text { fill: currentColor; font-family: inherit; }
.sg-scroll-text.glow {
    color: color-mix(in srgb, var(--title-color, #b8860b) 80%, #221811);
    mix-blend-mode: normal;
    text-shadow: 0 0 4px var(--title-color, #d4a017), 0 0 9px color-mix(in srgb, var(--title-color, #d4a017) 55%, transparent);
}

/* 底部 HUD：等級徽章 + 經驗條，跟錢包同款（黑底半透明、金邊、金字） */
.sg-exp {
    left: 2.5%; right: 2.5%; bottom: 2.5%;
    z-index: 4;
    display: flex; align-items: center; gap: .5rem;
}
.sg-level-badge {
    flex: none;
    width: clamp(36px, 3.6vw, 46px); height: clamp(36px, 3.6vw, 46px);
    border-radius: 50%;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(250, 204, 21, .6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 4px rgba(250, 204, 21, .25);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.sg-level-badge b { font-family: 'Yuji Syuku', serif; font-weight: normal; font-size: clamp(.95rem, 1.5vw, 1.2rem); color: #fbbf24; margin-top: -.05em; }
.sg-level-badge small { font-family: 'Yuji Syuku', serif; font-size: clamp(.42rem, .6vw, .52rem); letter-spacing: .1em; color: rgba(251, 191, 36, .85); margin-top: .1em; }
.sg-exp-bar {
    flex: 1;
    height: clamp(10px, 1.2vw, 13px);
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(250, 204, 21, .5);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.sg-exp-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, #b8860b, #fbbf24 70%, #fde68a);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(251, 191, 36, .55);
    transition: width .8s ease;
}
.sg-exp-text {
    flex: none;
    padding: .2em .7em;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(250, 204, 21, .35);
    border-radius: 999px;
    font-family: 'Yuji Syuku', serif;
    font-size: clamp(.62rem, .95vw, .82rem);
    letter-spacing: .04em;
    color: #fde68a;
    white-space: nowrap;
}

/* ===== 右頁：修行帳 ===== */
.shugyo-panel-wrap { position: relative; min-height: 0; }
.shugyo-panel {
    position: absolute; inset: 0;   /* 列高由舞台決定，面板在裡面自己捲 */
    overflow: hidden;
    box-sizing: border-box;
    background: url('/images/shugyo/paper.jpg') center / cover no-repeat, var(--sg-paper);
    min-height: 0;
}
/* 書口陰影：兩頁之間的裝訂凹陷 */
.shugyo-panel::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 34px; z-index: 1;
    background: linear-gradient(90deg, rgba(60, 40, 20, .32), rgba(60, 40, 20, .08) 55%, rgba(60, 40, 20, 0));
    pointer-events: none;
}
/* 和綴：沿書脊縫線 + 四個線孔 */
.sg-stitch {
    position: absolute; left: 13px; top: 7%; bottom: 7%; width: 8px; z-index: 2;
    background:
        radial-gradient(circle at 50% 50%, #3b2716 0 2.2px, rgba(0,0,0,0) 3px) 0 0 / 8px 25% repeat-y,
        linear-gradient(#8b6a4a, #8b6a4a) 50% 0 / 1.5px 100% no-repeat;
    pointer-events: none;
}
.sg-page-body {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: .9rem 2.6rem .8rem 2.1rem;   /* 右邊留給付箋 */
    box-sizing: border-box;
    min-height: 0;
}
/* 付箋分頁：貼在右頁外緣 */
.sg-fusen {
    /* 全站 nav 規則會給 padding/max-width/left，這裡全部蓋回來 */
    position: absolute; left: auto; right: 0; top: 9%; width: auto; max-width: none; z-index: 3;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: .5rem;
}
.sg-fusen .sg-tab {
    writing-mode: vertical-rl; text-orientation: upright;
    font-family: 'Yuji Syuku', serif;
    font-size: .95rem; letter-spacing: .14em; line-height: 1;
    padding: .75em .3em .75em .36em;
    min-height: 0; height: auto;
    border: 1px solid rgba(60, 40, 20, .35); border-right: none;
    border-radius: 8px 0 0 8px;
    color: #fff;
    background: var(--fusen, #8b6a4a);
    box-shadow: -2px 2px 4px rgba(60, 40, 20, .25);
    opacity: .72;
    transform: translateX(4px);
    cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.sg-fusen .sg-tab[data-tab="journal"] { --fusen: #8b6a4a; }
.sg-fusen .sg-tab[data-tab="titles"] { --fusen: #4f6f8f; }
.sg-fusen .sg-tab[data-tab="achievements"] { --fusen: #5f8a52; }
.sg-fusen .sg-tab:hover { opacity: .92; transform: translateX(1px); }
.sg-fusen .sg-tab.active { opacity: 1; transform: translateX(-3px); box-shadow: -3px 3px 6px rgba(60, 40, 20, .35); }

.sg-panel-title {
    font-family: 'Yuji Syuku', serif;
    font-size: 1.2rem;
    letter-spacing: .16em;
    color: var(--sg-ink);
    margin: 0 0 .45rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid rgba(74, 52, 35, .45);
    display: flex; align-items: baseline; gap: .6rem;
}
.sg-panel-title .sg-joined { font-size: .68rem; letter-spacing: .04em; color: var(--sg-ink-light); flex: 1; }

/* ===== 日誌頁 ===== */
.sg-jh {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    font-family: 'Yuji Syuku', serif; font-size: .95rem; letter-spacing: .12em; color: var(--sg-ink);
    margin: .1rem 0 .35rem;
}
.sg-jh small { font-family: inherit; font-size: .68rem; letter-spacing: .04em; color: var(--sg-ink-light); }
/* 今日修行：三格任務 */
.sg-today-row {
    display: flex; align-items: center; gap: .55rem;
    padding: .38rem .1rem; text-decoration: none; color: var(--sg-ink);
    border-bottom: 1px dotted rgba(74, 52, 35, .4);
}
.sg-today-row:hover .sg-today-label { color: var(--sg-red); }
.sg-today-mark {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid rgba(139, 106, 74, .6);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Yuji Boku', 'Yuji Syuku', serif; font-size: 1rem; line-height: 1; color: transparent;
}
.sg-today-row.done .sg-today-mark { border-color: var(--sg-red); color: var(--sg-red); background: rgba(179, 38, 30, .08); }
.sg-today-label { flex: 1; font-size: .84rem; text-align: left; }
.sg-today-row.done .sg-today-label { color: var(--sg-ink-light); text-decoration: line-through; text-decoration-color: rgba(74, 52, 35, .35); }
.sg-today-go { font-size: .8rem; color: var(--sg-ink-light); }
/* 簽到列的連續天數：七個貓掌印（第七個金章），未達的淡掉 */
.sg-paws { display: inline-flex; gap: 2px; align-items: center; }
.sg-paws img { width: 15px; height: 15px; }
.sg-paws img.off { opacity: .22; filter: grayscale(1); }
.sg-today-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 0 .2rem; font-size: .74rem; color: var(--sg-ink-light); }
.sg-claim-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .9rem; min-height: 0; margin: 0;
    background: var(--sg-red); color: #fff; border: 2px solid #f3e6c8; border-radius: 999px;
    font-family: 'Yuji Syuku', serif; font-size: .82rem; letter-spacing: .08em; cursor: pointer;
    box-shadow: 0 3px 8px rgba(139, 0, 0, .3);
}
.sg-claim-btn img { width: 18px; height: 18px; }
.sg-claim-btn:hover { background: #8f1d17; }
.sg-claim-btn:disabled { opacity: .6; cursor: default; }
.sg-claimed { color: #2e7d32; }
/* 修行足跡 */
.sg-footprint { margin-top: .7rem; }
.sg-fp-row { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--sg-ink); padding: .1rem 0 .3rem; }
.sg-fp-row b { font-family: 'Yuji Syuku', serif; font-weight: normal; font-size: 1.05rem; color: var(--sg-ink); margin: 0 .1em; }
.sg-fp-title { font-family: 'Yuji Syuku', serif; font-size: .95rem; letter-spacing: .06em; }
.sg-fp-title.glow { text-shadow: 0 0 6px currentColor; }
/* 近三次修行 */
.sg-recent { margin-top: .6rem; }
.sg-rc-row {
    display: grid; grid-template-columns: auto 1fr auto; column-gap: .6rem; align-items: baseline;
    padding: .32rem .1rem; text-decoration: none; color: var(--sg-ink);
    border-bottom: 1px dotted rgba(74, 52, 35, .4);
}
.sg-rc-row:hover .sg-rc-type { color: var(--sg-red); }
.sg-rc-date { font-size: .72rem; color: var(--sg-ink-light); white-space: nowrap; }
.sg-rc-type { font-size: .82rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-rc-score { font-family: 'Yuji Syuku', serif; font-size: .95rem; color: var(--sg-red); white-space: nowrap; }
.sg-rc-score small { font-size: .68rem; color: var(--sg-ink-light); margin-left: .15em; }
.sg-rc-empty { font-size: .78rem; color: var(--sg-ink-light); padding: .4rem 0; }

/* 頁尾：完整戰績、帳號設定 */
.sg-page-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: .45rem; margin-top: .3rem;
    border-top: 1px dotted rgba(74, 52, 35, .4);
    font-size: .74rem;
}
.sg-page-foot a { color: var(--sg-ink-light); text-decoration: none; border-bottom: 1px dotted var(--sg-ink-light); }
.sg-page-foot a:hover { color: var(--sg-red); border-color: var(--sg-red); }
.sg-page-foot #sg-records-link { color: var(--sg-ink); font-family: 'Yuji Syuku', serif; letter-spacing: .06em; }

/* 分頁內容 */
.sg-tabpane { display: none; flex: 1; min-height: 0; overflow: auto; padding-right: .2rem; }
.sg-tabpane.active { display: block; }
.sg-pane-journal.active { display: flex; flex-direction: column; }
.sg-pane-journal .sg-page-foot { margin-top: auto; }
.sg-tabpane::-webkit-scrollbar { width: 6px; }
.sg-tabpane::-webkit-scrollbar-thumb { background: var(--sg-paper-dark); border-radius: 3px; }

/* 稱號列 */
.sg-title-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem;
    border: 1px solid rgba(139, 106, 74, .35);
    border-radius: 4px;
    background: rgba(255, 250, 238, .45);
    margin-bottom: .45rem;
}
.sg-title-row.locked { opacity: .55; }
.sg-title-row.passed { opacity: .75; }
.sg-pane-titles .sg-jh { margin-top: .5rem; }
.sg-title-row img { width: 34px; height: 34px; flex: none; }
.sg-title-row .sg-title-text { flex: 1; min-width: 0; }
.sg-title-row .sg-title-name { font-family: 'Yuji Syuku', serif; font-size: 1rem; letter-spacing: .06em; }
.sg-title-row .sg-title-desc { font-size: .72rem; color: var(--sg-ink-light); }
.sg-title-row .glow { text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
.sg-btn {
    flex: none;
    font-size: .75rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--sg-red);
    background: #fff;
    color: var(--sg-red);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.sg-btn:hover { background: var(--sg-red); color: #fff; }
.sg-btn.on { background: var(--sg-red); color: #fff; cursor: default; }
.sg-btn:disabled { opacity: .5; cursor: not-allowed; }
.sg-btn.confirming { background: #7a1a12; color: #fff; }

/* 成就卡 */
.sg-cat { margin: .2rem 0 .7rem; }
.sg-cat-h {
    display: flex; align-items: center; gap: .4rem;
    font-family: 'Yuji Syuku', serif; letter-spacing: .1em;
    color: var(--sg-ink); font-size: .95rem; margin-bottom: .35rem;
}
.sg-cat-h img { width: 22px; height: 22px; }
.sg-ach {
    display: grid; grid-template-columns: 40px 1fr auto; column-gap: .55rem; align-items: center;
    padding: .45rem .55rem; margin-bottom: .4rem;
    border: 1px solid rgba(139, 106, 74, .35); border-radius: 4px; background: rgba(255, 250, 238, .45);
}
.sg-ach img { width: 40px; height: 40px; }
.sg-ach.locked img { filter: grayscale(1) opacity(.55); }
.sg-ach .sg-ach-name { font-weight: 700; font-size: .92rem; color: var(--sg-ink); }
.sg-ach .sg-ach-desc { font-size: .72rem; color: var(--sg-ink-light); }
.sg-ach .sg-ach-bar { height: 5px; background: var(--sg-paper-dark); border-radius: 3px; overflow: hidden; margin-top: .3rem; }
.sg-ach .sg-ach-bar i { display: block; height: 100%; background: var(--sg-gold); }
.sg-ach.done .sg-ach-bar i { background: #2e7d32; }
.sg-ach .sg-ach-right { text-align: right; font-size: .7rem; color: var(--sg-ink-light); white-space: nowrap; }
.sg-ach .sg-ach-right b { display: block; font-size: .85rem; color: var(--sg-ink); }
.sg-ach.done .sg-ach-right b { color: #2e7d32; }

/* ===== 角色分頁：角色底 × 服裝 ===== */
.sg-sec-h {
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'Yuji Syuku', serif; font-size: .9rem; color: var(--sg-ink);
    margin: .2rem 0 .45rem;
}
.sg-sec-h small { font-family: inherit; font-size: .7rem; color: var(--sg-ink-light); font-weight: normal; }
.sg-char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .9rem; }
.sg-cc {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .5rem .3rem .45rem;
    border: 2px solid rgba(139, 106, 74, .35);
    border-radius: 6px;
    background: rgba(255, 250, 238, .45);
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    text-align: center;
}
.sg-cc:hover { transform: translateY(-2px); border-color: var(--sg-gold); }
.sg-cc.preview { border-color: var(--sg-red); box-shadow: 0 0 0 2px rgba(178, 34, 34, .18); }
.sg-cc.current::after {
    content: '✓'; position: absolute; top: -7px; right: -7px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #2e7d32; color: #fff; font-size: .7rem; line-height: 18px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.sg-cc.locked { cursor: default; }
.sg-cc.locked img { filter: grayscale(.9) brightness(.85); opacity: .7; }
.sg-cc img { width: 100%; max-width: 88px; height: 84px; object-fit: contain; object-position: center bottom; display: block; }
.sg-cc .sg-cc-name { font-size: .72rem; color: var(--sg-ink); line-height: 1.2; }
.sg-cc .sg-cc-state { font-size: .66rem; color: var(--sg-ink-light); line-height: 1.2; min-height: 1.2em; }
.sg-cc .sg-cc-state.own { color: #2e7d32; }
.sg-cc .sg-cc-state a { color: var(--sg-red); text-decoration: underline; }
.sg-buy-btn {
    margin-top: .1rem;
    font-size: .7rem; padding: 2px 10px; border-radius: 8px;
    border: 1px solid var(--sg-red); background: #fff; color: var(--sg-red);
    cursor: pointer; transition: background .15s, color .15s;
}
.sg-buy-btn:hover, .sg-buy-btn.confirming { background: var(--sg-red); color: #fff; }
/* 預覽列：改了角色底或服裝後出現 */
.sg-preview-bar {
    display: none; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .7rem; margin-bottom: .8rem;
    background: rgba(178, 34, 34, .08);
    border: 1px dashed var(--sg-red); border-radius: 8px;
    font-size: .78rem; color: var(--sg-ink);
}
.sg-preview-bar.show { display: flex; }
.sg-preview-bar > span:last-child { display: flex; gap: .35rem; white-space: nowrap; }
.sg-preview-bar .sg-btn { flex: 0 0 auto; }
.sg-preview-bar .sg-btn.ghost { background: transparent; color: var(--sg-ink-light); border: 1px solid var(--sg-paper-dark); }
.sg-char-msg { font-size: .74rem; color: var(--sg-red); min-height: 1.1em; margin: 0 0 .4rem; }


/* 朱印帳 modal 的外框（社務所的 .office-modal，這裡只抄需要的兩條） */
.office-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: safe center; justify-content: center; overflow-y: auto; padding: 80px 20px 20px; }
.office-modal .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); }
.stamp-book-close { margin: 0; }

/* 訪客 */
.sg-guest {
    text-align: center; padding: 2.5rem 1rem;
}
.sg-guest h2 { font-family: 'Yuji Syuku', serif; color: var(--sg-ink); }
.sg-guest .btn-login {
    display: inline-block; margin-top: .8rem; padding: .6rem 1.6rem;
    background: var(--sg-red); color: #fff; border-radius: 999px; text-decoration: none;
}

/* 載入中 */
.sg-loading { text-align: center; padding: 3rem 1rem; color: var(--sg-ink-light); }

/* ===== 手機直式：舞台在上、右頁在下 ===== */
@media (max-width: 860px) {
    .shugyo-book { grid-template-columns: 1fr; }
    .sg-exp { left: 3%; right: 3%; bottom: 2.5%; gap: .35rem; }
    .sg-level-badge { width: 36px; height: 36px; }
    .sg-level-badge b { font-size: .95rem; }
    .sg-exp-text { font-size: .62rem; padding: .15em .5em; }
    .sg-wallet { right: 2%; top: 2.5%; gap: .35rem; }
    .sg-wallet-item { padding: .15rem .45rem .15rem .3rem; border-radius: 14px; }
    .sg-wallet-item img { width: 16px; height: 16px; }
    .sg-wallet-item b { font-size: .75rem; }
    .shugyo-panel { position: static; overflow: visible; border-top: 3px solid var(--sg-line); }
    .shugyo-panel::before { display: none; }
    /* 手機：右頁預設收起來，點文机上的書才整頁展開（像翻開一本書） */
    .shugyo-panel-wrap { display: none; }
    .shugyo-book.book-open .shugyo-panel-wrap { display: block; position: fixed; inset: 0; z-index: 1001;   /* 蓋過 fixed 的站頭（z 1000） */ overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: rgba(20, 10, 5, .6); padding: max(12px, env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; }
    .shugyo-book.book-open .shugyo-panel { position: relative; min-height: 60vh; border: 3px solid var(--sg-line); border-radius: 12px;
        background: url('/images/shugyo/paper.jpg') center / cover no-repeat, var(--sg-paper); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 0 0 4px #fbf3e3; animation: sg-book-open .3s ease-out; }
    .shugyo-book.book-open .sg-panel-close { display: flex; position: absolute; right: 8px; top: 8px; z-index: 5; width: 30px; height: 30px; align-items: center; justify-content: center;
        padding: 0; border: 1.5px solid var(--sg-line); border-radius: 50%; background: var(--sg-paper); color: var(--sg-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
    .shugyo-book.book-open .sg-fusen { margin-right: 44px; }
    @keyframes sg-book-open { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .sg-desk { display: block; }
    .sg-stitch { top: 0; bottom: auto; left: 6%; right: 6%; width: auto; height: 8px;
        background:
            radial-gradient(circle at 50% 50%, #3b2716 0 2.2px, rgba(0,0,0,0) 3px) 0 0 / 25% 8px repeat-x,
            linear-gradient(#8b6a4a, #8b6a4a) 0 50% / 100% 1.5px no-repeat; }
    .sg-page-body { position: static; padding: .9rem 1rem 1rem; }
    /* 付箋改成貼在頁面上緣的橫向標籤 */
    .sg-fusen { position: static; flex-direction: row; gap: .35rem; margin: .4rem 1rem 0; }
    .sg-fusen .sg-tab { writing-mode: horizontal-tb; text-orientation: mixed; flex: 1; padding: .5em .4em; font-size: .9rem; letter-spacing: .2em;
        border-radius: 8px 8px 0 0; border: 1px solid rgba(60, 40, 20, .35); border-bottom: none; transform: none; opacity: .72; }
    .sg-fusen .sg-tab.active { transform: none; opacity: 1; }
    .sg-sheet-paper { width: 95%; max-height: 96%; padding: .5rem .5rem .6rem; }
    .sg-char-panel .sg-char-grid { gap: .3rem; }
    .sg-char-panel .sg-cc { padding: .3rem .1rem .3rem; }
    .sg-char-panel .sg-cc img { max-width: 64px; height: 62px; }
    .sg-char-panel .sg-cc .sg-cc-name { font-size: .66rem; letter-spacing: 0; }
    .sg-char-panel .sg-cc .sg-cc-state { font-size: .6rem; }
    .sg-char-panel .sg-buy-btn { font-size: .62rem; padding: 1px 7px; }
    .sg-decor-grid { grid-template-columns: repeat(4, 1fr); gap: .25rem; }
    .sg-dc img, .sg-dc-blank { height: 42px; }
    .sg-arrange-btn, .sg-edit-bar { font-size: .62rem; padding: .15em .5em; gap: .3rem; }
    .sg-edit-bar { max-width: 62%; }
    .sg-edit-hint { display: none; }
    .sg-stab { padding: .2rem .55rem; font-size: .75rem; letter-spacing: .06em; }
    .sg-char-hint { font-size: .62rem; right: -4%; }
    .sg-tabpane { max-height: none; overflow: visible; }
}

/* 英文版：直書改成橫轉（一個字母一個字母疊會太長） */
html[lang="en"] .sg-fusen .sg-tab { text-orientation: mixed; letter-spacing: .06em; }
/* 英文：整串橫轉直書 */
html[lang="en"] .sg-scroll-text text { letter-spacing: .04em; }
html[lang="en"] .sg-fusen .sg-tab { font-size: .8rem; padding: .7em .3em; }
@media (max-width: 860px) {
    html[lang="en"] .sg-fusen .sg-tab { font-size: .85rem; letter-spacing: .08em; }
}

/* 深色主題：紙色維持，僅頁面外圍跟隨 */
[data-theme="dark"] .shugyo-head h1 { color: var(--text-primary); }