/* 主題變數（已將舊深色主題、淺色主題與透明度修正合併為單一定義） */
  :root{
    --bg:#F2F2F2;
    --bg-2:#EEF1FC;
    --bg-3:#FBEAE8;
    --panel:rgba(255,255,255,0.86);
    --panel-strong:rgba(255,255,255,0.96);
    --border:rgba(120,131,191,0.26);
    --border-soft:rgba(120,131,191,0.15);
    --accent:#7883BF;
    --accent-deep:#9BA0BF;
    --gold:#C98986;
    --sage:#8E98CC;
    --text:#34364F;
    --text-dim:#5E6078;
    --text-faint:#85889F;
    --radius:18px;
    --radius-sm:10px;
    --shadow:0 18px 46px rgba(120,131,191,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  .display{font-family:'Noto Serif SC', serif;}

  .title-zh{font-family:'Noto Serif SC',serif; font-weight:800; letter-spacing:.08em;}
  .title-en{font-family:'Cinzel','Noto Serif SC',serif; font-weight:700; letter-spacing:.13em;}
  .title-dot{color:var(--gold); margin:0 8px; opacity:.9;}
  .eyebrow,
  .brand-sub,
  .formula-label,
  .estimate-label,
  thead th{
    font-family:'Cinzel','Noto Serif SC',serif;
  }

  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(120,131,191,0.28); border-radius:8px;}
  ::-webkit-scrollbar-track{background:transparent;}

  .app{display:flex; min-height:100vh;}

  /* ---------- sidebar ---------- */
  .sidebar{
    position:sticky; top:0; height:100vh;
    width:248px; flex-shrink:0;
    background:linear-gradient(180deg, rgba(20,17,25,0.92), rgba(20,17,25,0.85));
    border-right:1px solid var(--border-soft);
    backdrop-filter:blur(14px);
    display:flex; flex-direction:column;
    transition:width .38s cubic-bezier(.65,0,.35,1);
    z-index:50;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    padding:26px 20px 20px 22px;
    border-bottom:1px solid var(--border-soft);
    white-space:nowrap; overflow:hidden;
  }
  .brand-mark{
    width:40px; height:40px; flex-shrink:0;
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #fff6 0%, transparent 40%), linear-gradient(140deg, var(--accent), var(--accent-deep));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(240,174,192,0.35);
  }
  .brand-mark svg{width:22px; height:22px;}

  .brand-mark.logo-mark{
    width:56px;
    height:56px;
    padding:0;
    overflow:visible;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
  }
  .brand-logo-img{
    width:56px;
    height:56px;
    object-fit:contain;
    display:block;
    border-radius:0;
    background:transparent;
  }
  .brand-text{transition:opacity .25s ease; opacity:1;}
  .brand-title{font-family:'Noto Serif SC',serif; font-size:17px; letter-spacing:.5px;}
  .brand-title-image{font-size:0; line-height:1;}
  .brand-title-img{
    width:122px;
    max-width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 5px 12px rgba(240,174,192,0.16));
  }
  .brand-sub{font-size:11px; color:var(--text-faint); letter-spacing:1px; margin-top:2px;}

  nav.navlist{flex:1; padding:18px 12px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;}
  .navbtn{
    position:relative;
    display:flex; align-items:center; gap:14px;
    width:100%; padding:12px 14px;
    border:none; background:transparent; cursor:url('images/cursors/sora-link-select.cur'), pointer;
    border-radius:12px;
    color:var(--text-dim);
    font-family:'Noto Serif SC',serif; font-size:14.5px; font-weight:500;
    white-space:nowrap; overflow:hidden;
    transition:background .2s ease, color .2s ease;
    text-align:left;
  }
  .navbtn .ic{width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .navbtn .ic svg{width:19px; height:19px; stroke:currentColor;}
  .navbtn .lbl{transition:opacity .2s ease;}
  .navbtn:hover{background:var(--panel-strong); color:var(--text);}
  .navbtn.active{background:linear-gradient(95deg, rgba(240,174,192,0.16), rgba(240,174,192,0.04)); color:var(--text);}
  .navbtn.active::before{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
    border-radius:3px;
    background:linear-gradient(180deg, var(--accent), var(--gold));
  }
  .navbtn .paw{
    position:absolute; right:10px; top:50%; transform:translateY(-50%) scale(.6);
    opacity:0; transition:opacity .2s ease, transform .2s ease;
  }
  .navbtn.active .paw{opacity:1; transform:translateY(-50%) scale(1);}

  /* ---------- main ---------- */
  .main{
    flex:1; min-width:0; padding:46px 56px 80px; position:relative; min-height:100vh;
    background:
      radial-gradient(ellipse 900px 600px at 85% -10%, rgba(240,174,192,0.08), transparent 60%),
      radial-gradient(ellipse 700px 500px at -10% 100%, rgba(143,185,166,0.06), transparent 60%),
      linear-gradient(160deg, rgba(21,19,26,0.08), rgba(27,24,34,0.08) 55%, rgba(33,29,41,0.08));
  }
  .page{display:none; animation:fadeUp .5s ease both; min-height:calc(100vh - 126px);}
  .page.active{display:block;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:3px; color:var(--gold);
    text-transform:uppercase; font-weight:600; margin-bottom:14px;
  }
  .eyebrow::before{content:""; width:18px; height:1px; background:var(--gold);}
  h1.page-title{font-family:'Noto Serif SC',serif; font-size:38px; margin-bottom:10px; letter-spacing:1px;}
  p.page-desc{color:var(--text-dim); font-size:15px; max-width:620px; line-height:1.9; margin-bottom:36px;}

  .card{
    position:relative;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow);
    clip-path:polygon(22px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 22px);
  }
  .card::before{
    content:""; position:absolute; left:0; top:0; width:22px; height:22px;
    background:linear-gradient(135deg, rgba(240,174,192,0.5), transparent 70%);
    clip-path:polygon(0 0, 100% 0, 0 100%);
  }

  /* ---------- HOME ---------- */
  .hero{
    display:grid; grid-template-columns:1fr clamp(320px, 26vw, 400px); gap:36px; align-items:stretch;
  }
  .hero-card{padding:46px 44px;}
  .hero-title{font-family:'Noto Serif SC',serif; font-size:46px; line-height:1.3; margin-bottom:6px;}
  .hero-title span{color:var(--accent);}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600;
    cursor:url('images/cursors/sora-link-select.cur'), pointer; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .btn-primary{background:linear-gradient(95deg, var(--accent), var(--accent-deep)); color:#241a1f; box-shadow:0 10px 26px rgba(240,174,192,0.28);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(240,174,192,0.38);}
  .btn-ghost{background:var(--panel); color:var(--text); border-color:var(--border);}
  .btn-ghost:hover{background:var(--panel-strong); transform:translateY(-2px);}

  /* ---------- ABOUT ---------- */
  .about-grid{display:grid; grid-template-columns:.9fr 1.4fr; gap:28px;}
  .about-content-stack{display:grid; gap:18px; align-content:start;}
  .intro-collapse,
  .social-card{padding:0; overflow:hidden;}
  .intro-summary,
  .social-card .social-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:23px 28px;
    border:none;
    border-bottom:1px solid var(--border-soft);
    border-radius:0;
    background:linear-gradient(90deg, rgba(240,174,192,0.075), rgba(255,255,255,0.02));
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:background .2s ease;
  }
  .intro-summary::-webkit-details-marker,
  .social-card .social-summary::-webkit-details-marker{display:none;}
  .intro-summary:hover,
  .social-card .social-summary:hover{background:linear-gradient(90deg, rgba(240,174,192,0.12), rgba(255,255,255,0.04));}
  .intro-summary-title,
  .social-card .social-summary-title{
    display:flex;
    align-items:center;
    color:var(--accent);
    font-size:19px;
    line-height:1.45;
  }
  .intro-summary-title::before,
  .social-card .social-summary-title::before{
    content:"▸";
    display:inline-block;
    margin-right:10px;
    color:var(--gold);
    transition:transform .22s ease;
    font-family:'Noto Serif SC',serif;
    font-size:15px;
  }
  .intro-collapse[open] .intro-summary-title::before,
  .social-card[open] .social-summary-title::before{transform:rotate(90deg);}
  .intro-summary-state,
  .social-card .social-summary-state{
    flex-shrink:0;
    color:var(--text-faint);
    font-size:12px;
    letter-spacing:.4px;
  }
  .intro-summary-state .open-text{display:none;}
  .intro-collapse[open] .intro-summary-state .closed-text{display:none;}
  .intro-collapse[open] .intro-summary-state .open-text{display:inline;}
  .intro-body{padding:16px 28px 18px;}
  .intro-list{display:grid; gap:0;}
  .intro-item{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:12px;
    padding:6px 0;
    border-top:1px dashed rgba(255,255,255,0.06);
  }
  .intro-item:first-child{border-top:none; padding-top:0;}
  .intro-item:last-child{padding-bottom:0;}
  .intro-item dt{
    color:var(--accent);
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    white-space:nowrap;
    line-height:1.5;
  }
  .intro-item dt::before{
    content:"▹";
    color:var(--gold);
    margin-right:6px;
    font-size:10px;
  }
  .intro-item dd{
    color:var(--text-dim);
    font-size:14px;
    line-height:1.5;
  }
  .social-card .social-grid{padding:18px 22px 24px; margin-top:0;}

  .social-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .social-link{
    display:flex; align-items:center; gap:10px; padding:11px 14px;
    border-radius:var(--radius-sm); border:1px solid var(--border-soft); background:var(--panel);
    color:var(--text-dim); font-size:13px; text-decoration:none; transition:all .2s ease;
  }
  .social-link[hidden]{display:none!important;}
  .social-link:hover{border-color:var(--accent); color:var(--text); background:var(--panel-strong);}
  .social-link .ic{width:16px; height:16px; flex-shrink:0;}
  .social-link .ic svg{width:16px; height:16px;}
  .social-link .txt{display:flex; flex-direction:column; gap:2px; line-height:1.45;}
  .social-link .sub{font-size:11px; color:var(--text-faint);}
  .social-section-note{
    grid-column:1 / -1;
    margin-top:4px;
    padding:6px 2px 2px;
    color:var(--text-faint);
    font-size:12px;
    letter-spacing:.4px;
  }
  .social-link.inactive{
    border-style:dashed;
    opacity:.78;
  }
  /* 追蹤數 0 的平台：收成一行小字（effects.js 產生） */
  .social-others{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 12px;
    margin:2px 0 0;
    padding:4px 2px 0;
    font-size:12px;
    line-height:1.7;
    color:var(--text-dim);
  }
  .social-others-label{ color:var(--text-faint); letter-spacing:.4px; }
  .social-others a{ color:var(--text-dim); text-decoration:none; border-bottom:1px dotted currentColor; }
  .social-others a:hover{ color:var(--accent); }
  .social-collapse{
    margin-top:0;
  }
  .social-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border-soft);
    background:rgba(255,255,255,0.035);
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .social-summary::-webkit-details-marker{display:none;}
  .social-summary:hover{background:var(--panel-strong); border-color:rgba(240,174,192,0.28);}
  .social-summary-title{
    font-family:'Noto Serif SC',serif;
    font-size:18px;
    color:var(--accent);
  }
  .social-summary-title::before{content:"▸"; display:inline-block; margin-right:8px; transition:transform .22s ease; color:var(--gold);}
  .social-collapse[open] .social-summary-title::before{transform:rotate(90deg);}
  .social-summary-state{
    font-size:12px;
    color:var(--text-faint);
    white-space:nowrap;
  }
  .social-summary-state .open-text{display:none;}
  .social-collapse[open] .social-summary-state .closed-text{display:none;}
  .social-collapse[open] .social-summary-state .open-text{display:inline;}
  .social-collapse .social-grid{margin-top:12px;}
  .bio-card.intro-collapse{padding:0;}
  .social-card.social-collapse{margin-top:0; padding:0;}
  .social-card .social-summary{border-radius:0; border-left:none; border-right:none; border-top:none;}
  .social-card .social-summary-title::before{content:"▸"; margin-right:10px;}
  .social-card[open] .social-summary-title::before{transform:rotate(90deg);}
  .social-card .social-grid{padding:18px 22px 24px; margin-top:0;}
  .relation-btn{
    font-family:'Noto Serif SC',serif;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    color:var(--text-dim);
    transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .relation-btn:hover{
    transform:translateY(-2px);
    color:#241a1f;
    border-color:transparent;
    background:linear-gradient(95deg, var(--accent), var(--accent-deep));
    box-shadow:0 8px 22px rgba(240,174,192,0.20);
  }


/* 只給螢幕報讀器看的文字（例如輸入框的標籤）：畫面上看不見，但報讀器讀得到 */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
  /* ---------- WORKS ---------- */
  .tag-panel{padding:26px 28px; margin-bottom:28px;}
  .tag-panel-title{font-family:'Noto Serif SC',serif; font-size:18px; margin-bottom:8px; color:var(--accent);}
  .multi-select-grid{display:flex; flex-wrap:wrap; gap:10px;}
  .multi-chip{
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 16px; border-radius:999px;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text-dim); font-family:'Noto Serif SC',serif; font-size:13px; font-weight:600;
    cursor:url('images/cursors/sora-link-select.cur'), pointer; user-select:none; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .multi-chip:hover{background:var(--panel-strong); color:var(--text); transform:translateY(-1px);}
  .multi-chip:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .multi-chip.selected{
    color:#241a1f; border-color:transparent;
    background:linear-gradient(95deg, var(--accent), var(--accent-deep));
    box-shadow:0 8px 22px rgba(240,174,192,0.20);
  }

  /* gallery */
  .gallery-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px;
  }
  .gallery-count{font-size:13px; color:var(--text-faint);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:18px;
  }
  .gallery-item{
    position:relative;
    border-radius:var(--radius-sm);
    overflow:hidden;
    border:1px solid var(--border-soft);
    background:var(--panel);
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .gallery-item:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(0,0,0,0.5);
    border-color:rgba(240,174,192,0.35);
  }
  .gallery-item.hidden{display:none;}
  .gallery-img-wrap{
    width:100%; aspect-ratio:3/4; overflow:hidden;
    background:var(--bg-3);
    position:relative;
  }
  .gallery-img-wrap img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .4s ease;
    display:block;
  }
  .gallery-item:hover .gallery-img-wrap img{transform:scale(1.04);}
  .gallery-item-tags{
    display:flex; flex-wrap:wrap; gap:5px;
    padding:10px 12px;
  }
  .item-tag{
    font-size:11px; padding:3px 9px; border-radius:999px;
    background:var(--panel-strong); border:1px solid var(--border-soft);
    color:var(--text-faint);
  }
  .gallery-empty{
    grid-column:1/-1; padding:48px; text-align:center;
    color:var(--text-faint); font-size:14px;
  }

  /* lightbox */
  .lightbox{
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(10,8,15,0.88); backdrop-filter:blur(18px);
    align-items:center; justify-content:center;
  }
  .lightbox.open{display:flex;}
  .lightbox-eyebrow{
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.30em;
    color:#F5B8CC;
  }
  .lightbox-tags{display:flex; gap:8px; flex-wrap:wrap;}
  .lightbox-close{
    position:fixed; top:24px; right:30px;
    width:40px; height:40px; border-radius:50%;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text); font-size:20px; cursor:url('images/cursors/sora-link-select.cur'), pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease;
  }
  .lightbox-close:hover{background:var(--panel-strong);}
  .lightbox-nav{
    position:fixed; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text); font-size:20px; cursor:url('images/cursors/sora-link-select.cur'), pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease;
  }
  .lightbox-nav:hover{background:var(--panel-strong);}
  .lightbox-prev{left:16px;}
  .lightbox-next{right:16px;}
  .variant-switcher{display:flex; gap:8px; flex-wrap:wrap;}
  .variant-switcher:empty{display:none;}
  .variant-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 14px; border-radius:999px;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text-dim); font-family:'Noto Serif SC',serif; font-size:12.5px; font-weight:600;
    cursor:url('images/cursors/sora-link-select.cur'), pointer; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .variant-btn:hover{background:var(--panel-strong); color:var(--text); transform:translateY(-1px);}
  .variant-btn.active{
    color:#241a1f; border-color:transparent;
    background:linear-gradient(95deg, var(--accent), var(--accent-deep));
    box-shadow:0 8px 22px rgba(240,174,192,0.20);
  }

  /* ---------- COMMISSION ---------- */
  .commission-summary{
    display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-bottom:26px; align-items:stretch;
  }
  .commission-hero{padding:32px 34px; overflow:hidden;}
  .commission-hero::after{
    content:""; position:absolute; right:-50px; bottom:-60px; width:190px; height:190px; border-radius:50%;
    background:radial-gradient(circle, rgba(240,174,192,0.16), transparent 68%);
    pointer-events:none;
  }
  .commission-hero h3{font-family:'Noto Serif SC',serif; font-size:22px; color:var(--accent); margin-bottom:12px;}
  .commission-hero p{color:var(--text-dim); font-size:14px; line-height:1.9; max-width:650px;}
  .formula-card{padding:28px 30px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .formula-label{font-size:12px; color:var(--text-faint); letter-spacing:2px; text-transform:uppercase; font-weight:700;}
  .formula-text{font-family:'Noto Serif SC',serif; color:var(--gold); font-size:20px; line-height:1.6;}
  .formula-note{font-size:12.5px; color:var(--text-faint); line-height:1.7;}

  .section-heading{
    display:flex; align-items:center; gap:10px;
    font-family:'Noto Serif SC',serif; font-size:25px; color:var(--accent);
    margin:0 0 16px;
  }
  .section-heading::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:linear-gradient(140deg, var(--accent), var(--gold));
    box-shadow:0 0 0 5px rgba(240,174,192,0.08);
  }
  .price-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-bottom:30px;}
.price-card{
  padding:25px 24px;
  min-height:188px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
}
  .price-card{border-color:rgba(240,174,192,0.32); background:linear-gradient(180deg, rgba(240,174,192,0.085), rgba(255,255,255,0.04));}
  .price-name{font-size:14px; color:var(--text-dim); margin-bottom:10px; letter-spacing:.5px;}
.price-amt{
  font-family:'Noto Serif SC',serif;
  font-size:28px;
  color:var(--gold);
  margin-bottom:0px;
}
  .price-amt span{font-size:13px; color:var(--text-faint); font-family:'Noto Serif SC'; margin-left:4px;}
  .price-list{list-style:none; color:var(--text-dim); font-size:13px; line-height:2;}
  .price-list li{display:flex; gap:7px; align-items:flex-start;}
  .price-list li > strong{flex-shrink:0;}
  .price-list li::before{content:"·"; color:var(--accent); font-weight:900; flex-shrink:0;}

.table-scroll{width:100%; overflow-x:auto;}

  .pricing-help{position:relative; display:inline-flex; align-items:center; justify-content:center;}
  .pricing-help-btn{
    width:18px; height:18px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; line-height:1;
    color:var(--bg-2); background:linear-gradient(135deg, var(--accent), var(--gold));
    box-shadow:0 4px 10px rgba(240,174,192,0.22);
    cursor:help; user-select:none;
  }
  /* 問號說明改用固定浮層，避免被表格、卡片邊框或捲動容器截斷（原本的 .pricing-help-box 內嵌提示框已停用，內容改由 JS 複製到 .floating-help-box 顯示） */
  .pricing-help .pricing-help-box{display:none;}
  .floating-help-box{
    position:fixed;
    min-width:240px;
    max-width:min(280px, calc(100vw - 24px));
    padding:12px 14px;
    border-radius:12px;
    background:rgba(24,21,30,0.97);
    border:1px solid rgba(240,174,192,0.24);
    box-shadow:0 18px 36px rgba(0,0,0,0.45);
    color:var(--text-dim);
    font-size:12.5px;
    line-height:1.75;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:1000;
    transition:opacity .16s ease, visibility .16s ease;
    backdrop-filter:blur(12px);
  }
  .floating-help-box.show{opacity:1; visibility:visible;}
  .floating-help-box strong{display:block; color:var(--accent); font-size:12.5px; margin-bottom:4px;}

  .license-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; margin-bottom:30px;}
  @media (max-width:1150px){
    .license-grid{grid-template-columns:repeat(2,1fr);}
  }
  .mini-card{padding:22px 24px;}
  .mini-card-title{font-size:13px; color:var(--text-dim); margin-bottom:8px; letter-spacing:.5px;}
  .mini-card-value{font-family:'Noto Serif SC',serif; font-size:22px; color:var(--gold); margin-bottom:8px;}
  .mini-card-desc{font-size:12.5px; color:var(--text-faint); line-height:1.8;}
  .psd-badge{
    display:inline-block;
    margin-left:6px;
    padding:2px 10px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.06em;
    vertical-align:2px;
    color:#fff;
    background:linear-gradient(95deg, #C98986, #F2A7C3);
    box-shadow:0 3px 8px rgba(201,137,134,0.35);
    white-space:nowrap;
  }

  .flow-wrap{padding:30px 32px; margin-bottom:30px;}
  .flow-wrap h3{font-family:'Noto Serif SC',serif; font-size:18px; margin-bottom:22px; color:var(--accent);}
  .flow-row{display:flex; gap:0; flex-wrap:wrap;}
  .flow-step{
    flex:1; min-width:112px; position:relative; padding:0 8px; text-align:center;
  }
  .flow-step .dot{
    width:34px; height:34px; border-radius:50%; margin:0 auto 10px;
    background:linear-gradient(140deg, var(--accent), var(--accent-deep));
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#241a1f;
  }
  .flow-step p{font-size:12.5px; color:var(--text-dim); line-height:1.6;}
  .flow-step:not(:last-child)::after{
    content:""; position:absolute; top:17px; left:calc(50% + 30px); right:calc(-50% + 30px); height:1px;
    background:linear-gradient(90deg, transparent, var(--border) 16%, var(--border) 84%, transparent);
  }

  .rules-card{padding:28px 30px; margin-bottom:28px;}
  .rules-card h3{font-family:'Noto Serif SC',serif; font-size:18px; margin-bottom:16px; color:var(--accent);}
  .rules-card ul{list-style:none; color:var(--text-dim); font-size:13.5px; line-height:2.1;}
  .rules-card li{display:flex; gap:10px;}
  .rules-card li::before{content:"🐾"; font-size:11px; flex-shrink:0; margin-top:3px;}

  .payment-highlight{
    padding:0;
    border-radius:0;
    border:none;
    background:transparent;
  }
  .payment-highlight .payment-text{display:block;}
  .term-highlight{
    display:inline-block;
    padding:1px 8px;
    margin:0 2px;
    border-radius:999px;
    border:1px solid rgba(240,174,192,0.42);
    background:rgba(240,174,192,0.14);
    color:var(--gold);
    font-weight:900;
    white-space:nowrap;
  }
  .payment-highlight .term-highlight{
    display:inline;
    padding:0;
    margin:0 2px;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--gold);
    font-weight:900;
  }
  .commercial-rules-card{border-color:rgba(240,174,192,0.22);}
  .commercial-rule-intro{
    margin-bottom:16px;
    padding:13px 16px;
    border-radius:var(--radius-sm);
    background:rgba(240,174,192,0.075);
    border:1px solid rgba(240,174,192,0.22);
    color:var(--text-dim);
    font-size:13.5px;
    line-height:1.85;
  }
  .commercial-rule-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
    margin-bottom:14px;
  }
  .commercial-rule-box{
    padding:16px 17px;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border-soft);
  }
  .commercial-rule-title{
    color:var(--gold);
    font-weight:900;
    font-size:13.5px;
    margin-bottom:7px;
    letter-spacing:.4px;
  }
  .commercial-rule-box p{
    color:var(--text-dim);
    font-size:13px;
    line-height:1.9;
  }
  .commercial-rule-note{
    margin-top:2px;
  }

  /* ---------- SCHEDULE ---------- */
  .status-banner{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:24px 30px; margin-bottom:28px; flex-wrap:wrap;
  }
  .status-left{display:flex; align-items:center; gap:14px;}
  .status-dot{width:11px; height:11px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 4px rgba(143,185,166,0.18);}
  .status-title{font-family:'Noto Serif SC',serif; font-size:17px;}
  .status-sub{font-size:12.5px; color:var(--text-faint); margin-top:3px;}

  .table-card{padding:0; overflow:hidden;}
  .schedule-table{min-width:920px;}
  .schedule-table td:nth-child(4){font-weight:700; color:var(--text);}
  .schedule-loading td, .schedule-empty td, .schedule-error td{
    text-align:center;
    color:var(--text-faint);
    padding:32px 22px;
  }
  .status-dot.loading{background:var(--gold); box-shadow:0 0 0 4px rgba(230,194,114,0.18);}
  .status-dot.error{background:var(--accent-deep); box-shadow:0 0 0 4px rgba(214,132,156,0.18);}
  table{width:100%; border-collapse:collapse;}
  thead th{
    text-align:left; padding:16px 22px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--text-faint); border-bottom:1px solid var(--border-soft); font-weight:600;
  }
  tbody td{padding:17px 22px; font-size:13.5px; color:var(--text-dim); border-bottom:1px solid var(--border-soft);}
  tbody tr:last-child td{border-bottom:none;}
  .pill{font-size:11.5px; padding:5px 12px; border-radius:999px; font-weight:600;}
  .pill-prog{background:rgba(230,194,114,0.16); color:var(--gold);}
  .pill-wait{background:rgba(179,172,184,0.14); color:var(--text-dim);}
  .pill-done{background:rgba(143,185,166,0.16); color:var(--sage);}

  .note-box{
    margin-top:26px; padding:18px 22px; border-radius:var(--radius-sm);
    background:rgba(230,194,114,0.08); border:1px solid rgba(230,194,114,0.25);
    color:var(--text-dim); font-size:13px; line-height:1.8;
  }

  /* ---------- CONTACT ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr; gap:26px; max-width:900px;}
  .contact-main{padding:36px;}
  .mail-btn{
    display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px;
    background:linear-gradient(95deg, var(--accent), var(--accent-deep)); color:#241a1f; font-weight:700;
    text-decoration:none; font-size:14.5px; margin-top:18px; box-shadow:0 10px 26px rgba(240,174,192,0.28);
    border:none; font-family:'Noto Serif SC',serif; cursor:url('images/cursors/sora-link-select.cur'), pointer; user-select:none;
  }
  .mail-btn.copied{transform:translateY(-1px);}
  .copy-toast{
    position:fixed;
    left:50%;
    bottom:34px;
    transform:translate(-50%, 14px);
    z-index:1200;
    padding:12px 20px;
    border-radius:999px;
    background:rgba(255,255,255,0.96);
    border:1px solid rgba(120,131,191,0.30);
    color:#34364F;
    font-size:14px;
    font-weight:900;
    letter-spacing:.06em;
    box-shadow:0 16px 36px rgba(120,131,191,0.22);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .copy-toast.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
  }


  /* ---------- CONTACT QUESTION FORM ---------- */
  #contact .question-card{
    padding:36px;
  }
  .question-form{
    display:grid;
    gap:16px;
    margin-top:20px;
  }
  .question-form-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }
  .question-form textarea.form-control{
    min-height:128px;
  }
  .question-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }
  .question-note{
    color:var(--text-faint);
    font-size:12px;
    font-weight:700;
    line-height:1.7;
  }
  #questionSubmitStatus{
    text-align:left;
  }
  @media (max-width:760px){
    .question-form-row{
      grid-template-columns:1fr;
    }
    .question-actions .btn{
      width:100%;
      justify-content:center;
    }
  }

  /* ---------- 全站統一 FOOTER ---------- */
  .site-foot{
    margin-top:60px;
    padding:22px 10px 6px;
    text-align:center;
    border-top:1px dashed rgba(120,131,191,0.30);
  }
  .site-foot-line{
    font-family:'Noto Serif SC',serif;
    color:#717BBC;
    font-weight:900;
    font-size:15px;
    letter-spacing:.14em;
    text-shadow:0 1px 0 rgba(255,255,255,0.9);
    margin-bottom:6px;
  }
  .site-foot-sub{
    color:var(--text-faint);
    font-size:12px;
    letter-spacing:.05em;
    line-height:1.8;
  }
  .donate-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    padding:8px 20px;
    border-radius:999px;
    border:1px solid rgba(201,137,134,0.45);
    background:rgba(255,255,255,0.55);
    color:#B06E6B;
    font-size:12.5px;
    font-weight:900;
    letter-spacing:.08em;
    text-decoration:none;
    transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
  }
  .donate-btn:hover{
    background:linear-gradient(95deg, #C98986, #F2A7C3);
    color:#fff;
    border-color:transparent;
    transform:translateY(-1px);
  }

  /* ---------- COMMISSION FORM MODAL ---------- */
  .modal-backdrop{
    display:none; position:fixed; inset:0; z-index:260;
    background:rgba(10,8,15,0.86); backdrop-filter:blur(18px);
    align-items:center; justify-content:center;
    padding:28px;
  }
  .modal-backdrop.open{display:flex;}
  .modal-panel{
    width:min(980px, 96vw); max-height:92vh; overflow:auto;
    position:relative;
    background:linear-gradient(180deg, rgba(33,29,41,0.98), rgba(24,21,30,0.98));
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 30px 90px rgba(0,0,0,0.72);
    clip-path:polygon(22px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 22px);
  }
  .modal-panel::before{
    content:""; position:absolute; left:0; top:0; width:22px; height:22px;
    background:linear-gradient(135deg, rgba(240,174,192,0.65), transparent 70%);
    clip-path:polygon(0 0, 100% 0, 0 100%);
    pointer-events:none;
  }
  .modal-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
    padding:26px 30px 18px;
    border-bottom:1px solid var(--border-soft);
  }
  .modal-title{font-family:'Noto Serif SC',serif; font-size:22px; color:var(--accent); margin-bottom:6px;}
  .modal-sub{font-size:13px; color:var(--text-faint); line-height:1.8;}
  .modal-close{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text); cursor:url('images/cursors/sora-link-select.cur'), pointer; font-size:18px;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .2s ease;
  }
  .modal-close:hover{background:var(--panel-strong); transform:translateY(-1px);}
  .modal-body{padding:24px 30px 30px;}
  .form-group{display:flex; flex-direction:column; gap:8px;}
  .form-group.full{grid-column:1 / -1;}
  .form-label{font-size:13px; color:var(--text-dim); font-weight:700; letter-spacing:.4px;}
  .required-mark{color:var(--accent); margin-left:4px;}
  .form-hint{font-size:12px; color:var(--text-faint); line-height:1.7;}
  .form-control{
    width:100%; border:1px solid var(--border); border-radius:13px;
    background:rgba(255,255,255,0.055); color:var(--text);
    padding:12px 14px; font-family:'Noto Serif SC',serif; font-size:14px;
    outline:none; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .form-control:focus{border-color:rgba(240,174,192,0.6); box-shadow:0 0 0 4px rgba(240,174,192,0.08); background:rgba(255,255,255,0.075);}
  .form-control::placeholder{color:rgba(179,172,184,0.55);}
  .form-control:disabled{opacity:.42; cursor:not-allowed;}
  select.form-control option{background:#211d29; color:var(--text);}
  textarea.form-control{min-height:92px; resize:vertical; line-height:1.7;}
  .choice-row{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;}
  .orientation-choice-row{grid-template-columns:repeat(auto-fit, minmax(0, 1fr));}
  .choice-card{
    position:relative; min-height:54px;
    display:flex; align-items:center; gap:9px;
    padding:11px 12px; border-radius:13px;
    border:1px solid var(--border); background:var(--panel);
    color:var(--text-dim); cursor:url('images/cursors/sora-link-select.cur'), pointer; transition:all .2s ease;
  }
  .choice-card:hover{background:var(--panel-strong); color:var(--text); transform:translateY(-1px);}
  .choice-card input{accent-color:var(--accent); flex-shrink:0;}
  .choice-main{font-size:13px; font-weight:700; display:block;}
  .choice-sub{font-size:11px; color:var(--text-faint); display:block; margin-top:2px; line-height:1.5;}
  .estimate-box{
    display:grid; grid-template-columns:1.1fr .9fr; gap:16px;
    align-items:stretch; margin-top:22px;
  }
  .estimate-total, .estimate-detail{
    border:1px solid var(--border); border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.045); padding:18px 20px;
  }
  .estimate-label{font-size:12px; color:var(--text-faint); letter-spacing:1.8px; text-transform:uppercase; font-weight:700; margin-bottom:6px;}
  .estimate-amount{font-family:'Noto Serif SC',serif; font-size:28px; color:var(--gold);}
  .deposit-line{font-size:12.5px; color:var(--text-dim); line-height:1.8; margin-top:8px;}
  .estimate-list{list-style:none; color:var(--text-dim); font-size:12.5px; line-height:1.9;}
  .estimate-list li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed rgba(255,255,255,0.08); padding:2px 0;}
  .estimate-list li:last-child{border-bottom:none;}
  .modal-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; margin-top:22px;}
  .form-submit-status{
    width:100%;
    min-height:22px;
    margin-top:8px;
    color:var(--text-faint);
    font-size:13px;
    font-weight:700;
    line-height:1.8;
    text-align:right;
  }
  .form-submit-status.success{color:var(--sage);}
  .form-submit-status.error{color:#C97088;}
  .form-submit-status.loading{color:var(--gold);}
  .relation-panel{width:min(980px, 96vw);}
  .relation-content{
    display:grid;
    grid-template-columns:minmax(240px, .85fr) minmax(0, 1.35fr);
    gap:22px;
    align-items:start;
  }
  .relation-image-wrap{
    position:sticky;
    top:0;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--border-soft);
    background:rgba(255,255,255,0.035);
    box-shadow:0 16px 42px rgba(0,0,0,0.28);
  }
  .relation-image-wrap img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    display:block;
    background:rgba(255,255,255,0.025);
  }
  .relation-text{
    white-space:normal;
    color:var(--text-dim);
    font-size:14px;
    line-height:1.85;
    display:grid;
    gap:16px;
  }
  .relation-person-card{
    position:relative;
    padding:17px 18px 16px;
    border-radius:16px;
    border:1px solid var(--border-soft);
    background:rgba(255,255,255,0.038);
    box-shadow:0 10px 26px rgba(0,0,0,0.17);
  }
  .relation-person-card::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:linear-gradient(180deg, var(--accent), var(--gold));
    opacity:.78;
  }
  .relation-person-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:13px;
    color:var(--gold);
    font-size:13px;
    font-weight:900;
    letter-spacing:1.8px;
    text-transform:uppercase;
  }
  .relation-person-title .spark{
    color:var(--accent);
    font-size:12px;
    line-height:1;
    filter:drop-shadow(0 0 8px rgba(240,174,192,0.35));
  }
  /* 標題帶名字（✦ DAD－阿全 ✦）：整行放大，名字是中文本名、不轉大寫，再大一號 */
  .relation-person-title.has-name{
    align-items:baseline;
    flex-wrap:wrap;
    row-gap:2px;
    margin-bottom:18px;
    font-size:21px;               /* 英文是小型大寫字母，視覺上比字級小，所以給大一點 */
    letter-spacing:1.6px;
    line-height:1.3;
  }
  .relation-person-title.has-name .spark{ font-size:15px; align-self:center; }
  /* 名字可以折行（手機上文字區很窄），結尾 ✦ 用不斷行空格黏在最後一個字後面 */
  .relation-person-title .relation-person-name-group{
    display:inline;
    min-width:0;
    max-width:100%;
  }
  .relation-person-title .relation-person-name-group .relation-person-sep{ margin-right:6px; }
  .relation-person-title .relation-person-sep{
    color:#e58aa8;                /* 跟 ✦ 同色 */
    font-weight:700;
    letter-spacing:0;
  }
  /* 貼紙風（跟首頁委託橫幅同一套）：名字是白邊貼紙字，關係（MOM、DAD…）是歪一點的白色膠囊標籤 */
  .relation-person-title .relation-person-name,
  .relation-person-title:not(.has-name) .relation-person-role{
    font-size:27px;
    letter-spacing:.12em;
    text-transform:none;
    color:#2f2846;
    text-shadow:2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
      1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff,
      0 4px 0 rgba(140,104,82,0.24), 0 6px 12px rgba(90,64,52,0.14);
  }
  .relation-person-title:not(.has-name){ align-items:baseline; margin-bottom:16px; }
  .relation-person-title:not(.has-name) .spark{ font-size:15px; align-self:center; }
  .relation-person-title.has-name .relation-person-role{
    align-self:center;
    padding:3px 11px 2px;
    border-radius:999px;
    background:#fff;
    border:1.5px solid #e4d2c4;
    color:#8d6650;
    font-size:13px;
    font-weight:700;
    letter-spacing:.18em;
    line-height:1.4;
    box-shadow:0 3px 0 rgba(140,104,82,0.22);
    transform:rotate(-4deg);
  }
  @media(max-width:600px){
    .relation-person-title.has-name{ font-size:18px; }
    .relation-person-title .relation-person-name,
    .relation-person-title:not(.has-name) .relation-person-role{ font-size:22px; }
    .relation-person-title.has-name .relation-person-role{ font-size:12px; }
  }
  .relation-detail-list{
    display:grid;
    gap:0;
  }
  .relation-detail-item{
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    gap:10px;
    padding:7px 0;
    border-top:1px dashed rgba(255,255,255,0.075);
  }
  .relation-detail-item:first-child{border-top:none;}
  .relation-detail-key{
    color:var(--accent);
    font-size:12.5px;
    font-weight:900;
    letter-spacing:.5px;
    white-space:nowrap;
  }
  .relation-detail-key::before{
    content:"▹";
    color:var(--gold);
    margin-right:5px;
    font-size:10px;
  }
  .relation-detail-value{
    color:var(--text-dim);
    font-size:13.5px;
    line-height:1.85;
    min-width:0;
  }
  .relation-note-line{
    margin-top:8px;
    color:var(--text-faint);
    font-size:13px;
    line-height:1.8;
  }
  .relation-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    max-width:100%;
    padding:2px 9px;
    border-radius:999px;
    color:var(--gold);
    text-decoration:none;
    border:1px solid rgba(230,194,114,0.28);
    background:rgba(230,194,114,0.075);
    font-size:12.5px;
    font-weight:800;
    word-break:break-all;
    transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .relation-link:hover{
    color:var(--accent);
    border-color:rgba(240,174,192,0.48);
    background:rgba(240,174,192,0.105);
    transform:translateY(-1px);
  }
  .relation-panel.relation-lover{
    width:min(760px, 96vw);
  }
  .relation-panel.relation-lover .relation-content{
    grid-template-columns:1fr;
    gap:18px;
  }
  .relation-panel.relation-lover .relation-image-wrap{
    position:relative;
    top:auto;
    width:100%;
    max-width:620px;
    margin:0 auto;
  }
  .relation-panel.relation-lover .relation-image-wrap img{
    aspect-ratio:auto;
    max-height:58vh;
    object-fit:contain;
  }
  .relation-panel.relation-lover .relation-text{
    width:100%;
    max-width:620px;
    margin:0 auto;
  }
  .copy-note-list{list-style:none; display:grid; gap:10px; color:var(--text-dim); font-size:13.5px; line-height:1.85;}
  .copy-note-list li{display:flex; gap:10px;}
  .copy-note-list li::before{content:"🐾"; font-size:12px; flex-shrink:0; margin-top:2px;}
  #commissionReminderList .reminder-text,
  #copyNoticeReminderList .reminder-text{display:block; min-width:0; flex:1; overflow-wrap:anywhere;}
  #commissionModal .commission-agreement{
    display:flex; align-items:flex-start; gap:12px; width:fit-content; max-width:100%;
    margin:18px 0 0 auto; padding:14px 18px; border:2px solid #9580b5;
    border-radius:6px; background:#f1ecfa; color:#51416e; font-weight:700;
    line-height:1.7; cursor:pointer;
  }
  #commissionModal .commission-agreement:focus-within{outline:3px solid #c4b2e0; outline-offset:3px;}
  #commissionRulesAccepted{width:22px; height:22px; margin:2px 0 0; flex-shrink:0; accent-color:#795a9e; cursor:pointer;}
  @media(max-width:600px){#commissionModal .commission-agreement{width:100%; padding:12px;}}
  .notice-amount{
    margin:18px 0; padding:14px 16px; border-radius:var(--radius-sm);
    background:rgba(230,194,114,0.08); border:1px solid rgba(230,194,114,0.24);
    color:var(--text-dim); font-size:13px; line-height:1.8;
  }

  .form-deadline-note{
    margin-bottom:18px;
    padding:16px 20px;
    border-radius:var(--radius-sm);
    background:linear-gradient(115deg, rgba(46,42,68,0.96), rgba(58,50,84,0.94) 55%, rgba(70,54,86,0.92));
    border:1px solid rgba(255,255,255,0.30);
    border-left:4px solid #F2A7C3;
    box-shadow:0 10px 24px rgba(52,54,79,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
    color:rgba(240,241,250,0.88);
    font-size:13px;
    line-height:1.85;
  }
  .form-deadline-note strong{color:var(--gold);}
  .form-deadline-note-title{
    font-family:'Noto Serif SC',serif;
    font-size:16.5px;
    font-weight:900;
    color:#F5B8CC;
    letter-spacing:.06em;
    margin-bottom:6px;
  }
  .form-deadline-note-title::before{content:'📌 ';}
  .surprise-pack-note{
    margin:0;
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;}
    .commission-summary{grid-template-columns:1fr;}
    .price-grid{grid-template-columns:repeat(2,1fr);}
    .license-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(auto-fill, minmax(200px,1fr));}
  }
  @media (max-width:760px){
    .app{flex-direction:column;}
    .sidebar{
      position:fixed; bottom:0; left:0; right:0; top:auto; width:100%; height:auto;
      flex-direction:row; border-right:none; border-top:1px solid var(--border-soft);
    }
    .brand{display:none;}
    nav.navlist{flex-direction:row; overflow-x:auto; padding:10px 12px; gap:4px;}
    .navbtn{flex-direction:column; gap:4px; padding:8px 10px; font-size:10.5px; min-width:64px;}
    .navbtn .lbl{opacity:1 !important; width:auto !important;}
    .navbtn.active::before{display:none;}
    .navbtn .paw{display:none;}
    .main{padding:34px 20px 110px;}
    .hero-card{padding:32px 26px;}
    .hero-title{font-size:32px;}
    .price-grid{grid-template-columns:1fr;}
    .commission-hero, .formula-card{padding:26px 24px;}
    .gallery-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
    .lightbox-nav{display:none;}

    .modal-backdrop{padding:14px; align-items:flex-end;}
    .modal-panel{width:100%; max-height:90vh; border-radius:18px 18px 0 0;}
    .modal-head{padding:22px 20px 16px;}
    .modal-body{padding:20px;}
    .choice-row{grid-template-columns:1fr;}
    .orientation-choice-row{grid-template-columns:1fr;}
    .estimate-box{grid-template-columns:1fr;}
    .relation-content{grid-template-columns:1fr;}
    .relation-image-wrap{position:relative;}
    .relation-image-wrap img{aspect-ratio:4/3;}
    .relation-panel.relation-lover .relation-image-wrap img{aspect-ratio:auto; max-height:52vh;}
    .relation-person-card{padding:16px 16px 15px;}
    .relation-detail-item{grid-template-columns:1fr; gap:3px; padding:8px 0;}
    .intro-item{grid-template-columns:1fr; gap:2px; padding:7px 0;}
    .intro-summary, .social-card .social-summary{padding:20px;}
    .intro-body{padding:20px;}
    .intro-summary-title, .social-card .social-summary-title{font-size:18px;}
    .modal-actions{justify-content:stretch;}
    .modal-actions .btn{justify-content:center; width:100%;}
    .form-submit-status{text-align:center;}
  }


  /* ---------- LIGHT THEME OVERRIDE ---------- */
  body{
  font-family:'Noto Serif SC', serif;
  background:
    radial-gradient(ellipse 900px 600px at 85% -10%, rgba(240,174,192,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 100%, rgba(143,185,166,0.08), transparent 60%),
    linear-gradient(160deg, rgba(21,19,26,0.15), rgba(27,24,34,0.15) 55%, rgba(33,29,41,0.10)),
    url('./images/web-bg-1.jpg') center center / cover no-repeat fixed;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
  ::selection{background:rgba(120,131,191,0.26); color:var(--text);}

  .sidebar{
    background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(242,242,242,0.78));
    border-right:1px solid var(--border-soft);
    box-shadow:8px 0 30px rgba(120,131,191,0.10);
  }
  .main{
    background:
      radial-gradient(ellipse 900px 600px at 86% -12%, rgba(120,131,191,0.18), transparent 62%),
      radial-gradient(ellipse 700px 500px at -10% 100%, rgba(242,200,196,0.36), transparent 62%),
      linear-gradient(160deg, rgba(255,255,255,0.38), rgba(213,218,242,0.22) 55%, rgba(242,200,196,0.20));
  }

  .card,
  .gallery-item,
  .choice-card,
  .estimate-total,
  .estimate-detail,
  .form-control,
  .social-link,
  .btn-ghost{
    background:var(--panel);
    border-color:var(--border-soft);
    box-shadow:var(--shadow);
  }
  .card::before,
  .modal-panel::before{
    background:linear-gradient(135deg, rgba(120,131,191,0.42), transparent 72%);
  }

  .brand{border-bottom-color:var(--border-soft);}
  .brand-sub,
  .intro-summary-state,
  .social-summary-state,
  .gallery-count,
  .status-sub,
  .form-hint,
  .choice-sub,
  .formula-label,
  .estimate-label,
  thead th{color:var(--text-faint);}

  .brand-mark,
  .btn-primary,
  .mail-btn,
  .multi-chip.selected,
  .variant-btn.active,
  .flow-step .dot{
    background:linear-gradient(95deg, var(--accent), var(--accent-deep));
    color:#fff;
    box-shadow:0 10px 24px rgba(120,131,191,0.25);
  }
  .brand-mark.logo-mark{
    background:transparent;
    color:inherit;
    box-shadow:none;
  }
  .btn-primary:hover,
  .mail-btn:hover{
    box-shadow:0 14px 30px rgba(120,131,191,0.32);
  }
  .btn-ghost{color:var(--text-dim);}
  .btn-ghost:hover,
  .choice-card:hover,
  .multi-chip:hover,
  .variant-btn:hover,
  .social-link:hover{
    background:var(--panel-strong);
    color:var(--text);
    border-color:rgba(120,131,191,0.34);
  }
  .relation-btn:hover{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(95deg, var(--accent), var(--accent-deep));
    box-shadow:0 8px 22px rgba(120,131,191,0.22);
  }

  .navbtn{color:var(--text-dim);}
  .navbtn:hover{background:rgba(120,131,191,0.10); color:var(--text);}
  .navbtn.active{
    background:linear-gradient(95deg, rgba(120,131,191,0.18), rgba(242,200,196,0.20));
    color:var(--accent);
  }
  .navbtn.active::before{
    background:linear-gradient(180deg, var(--accent), var(--gold));
  }

  .brand-title-img{
    filter:drop-shadow(0 12px 22px rgba(120,131,191,0.18));
  }

  .intro-summary,
  .social-card .social-summary{
    background:linear-gradient(90deg, rgba(213,218,242,0.58), rgba(255,255,255,0.42));
    border-bottom-color:var(--border-soft);
  }
  .intro-summary:hover,
  .social-card .social-summary:hover{
    background:linear-gradient(90deg, rgba(213,218,242,0.76), rgba(242,200,196,0.26));
  }
  .intro-item,
  .relation-detail-item,
  .estimate-list li{border-top-color:rgba(120,131,191,0.14); border-bottom-color:rgba(120,131,191,0.14);}

  .multi-chip,
  .item-tag,
  .variant-btn,
  .pill-wait{
    background:rgba(255,255,255,0.62);
    border-color:var(--border-soft);
    color:var(--text-dim);
  }
  .gallery-img-wrap{background:#E7EAF9;}
  .gallery-item:hover{
    box-shadow:0 16px 36px rgba(120,131,191,0.18);
    border-color:rgba(120,131,191,0.36);
  }

  .price-card,
  .commercial-rules-card{
    border-color:rgba(120,131,191,0.28);
    background:linear-gradient(180deg, rgba(213,218,242,0.42), rgba(255,255,255,0.70));
  }
  tbody td{border-bottom-color:var(--border-soft);}
  .schedule-table td:nth-child(4){color:var(--text);}
  .pricing-help-btn{
    color:#fff;
    background:linear-gradient(135deg, var(--accent), var(--gold));
    box-shadow:0 4px 10px rgba(120,131,191,0.22);
  }
  .floating-help-box{
    background:rgba(255,255,255,0.98);
    border-color:rgba(120,131,191,0.26);
    box-shadow:0 18px 36px rgba(120,131,191,0.20);
    color:var(--text-dim);
  }

  .commercial-rule-intro,
  .form-deadline-note,
  .notice-amount,
  .note-box{
    background:rgba(242,200,196,0.26);
    border-color:rgba(201,137,134,0.28);
    color:var(--text-dim);
  }
  .commercial-rule-box,
  .relation-person-card{
    background:rgba(255,255,255,0.58);
    border-color:var(--border-soft);
    box-shadow:0 10px 26px rgba(120,131,191,0.12);
  }
  .relation-image-wrap,
  .relation-image-wrap img{
    background:rgba(255,255,255,0.62);
    border-color:var(--border-soft);
  }
  .relation-link{
    color:var(--accent);
    border-color:rgba(120,131,191,0.26);
    background:rgba(213,218,242,0.38);
  }
  .relation-link:hover{color:var(--gold); border-color:rgba(201,137,134,0.38); background:rgba(242,200,196,0.30);}

  .status-banner,
  .table-card{background:rgba(255,255,255,0.68);}
  .status-dot{background:var(--sage); box-shadow:0 0 0 4px rgba(142,152,204,0.18);}
  .status-dot.loading{background:var(--gold); box-shadow:0 0 0 4px rgba(201,137,134,0.18);}
  .status-dot.error{background:#C97088; box-shadow:0 0 0 4px rgba(201,112,136,0.16);}
  .pill-prog{background:rgba(120,131,191,0.15); color:var(--accent);}
  .pill-done{background:rgba(142,152,204,0.14); color:#6D78B5;}

  .modal-backdrop{
    background:rgba(247,248,255,0.64);
    backdrop-filter:blur(18px);
  }
  .modal-panel{
    background:linear-gradient(180deg, rgba(255,255,255,0.97), rgba(242,242,242,0.96));
    border-color:var(--border);
    box-shadow:0 28px 80px rgba(120,131,191,0.24);
  }
  .modal-head{border-bottom-color:var(--border-soft);}
  .modal-close{
    background:rgba(255,255,255,0.72);
    color:var(--text);
    border-color:var(--border-soft);
  }
  .modal-close:hover{background:#fff;}
  .form-control{
    background:rgba(255,255,255,0.78);
    color:var(--text);
  }
  .form-control:focus{
    border-color:rgba(120,131,191,0.52);
    box-shadow:0 0 0 4px rgba(120,131,191,0.10);
    background:#fff;
  }
  .form-control::placeholder{color:rgba(94,96,120,0.55);}
  select.form-control option{background:#F7F8FF; color:var(--text);}
  .copy-note-list li::before,
  .rules-card li::before{filter:saturate(0.9);}

  .lightbox{
    background:rgba(58,61,91,0.52);
    backdrop-filter:blur(18px);
  }
  .lightbox-close,
  .lightbox-nav{
    background:rgba(255,255,255,0.82);
    color:var(--text);
    border-color:rgba(255,255,255,0.38);
  }

  /* ---------- COMMISSION UNIFIED LAVENDER CARDS ---------- */
  #commission .commission-hero,
  #commission .formula-card,
  #commission .mini-card,
  #commission .flow-wrap,
  #commission .rules-card,
  #commissionModal .modal-panel,
  #commissionModal .form-deadline-note,
  #commissionModal .estimate-total,
  #commissionModal .estimate-detail,
  #commissionModal .choice-card{
    border-color:rgba(120,131,191,0.28);
    background:linear-gradient(180deg, rgba(213,218,242,0.42), rgba(255,255,255,0.70));
    box-shadow:0 18px 46px rgba(120,131,191,0.16);
  }

  #commission .commission-hero::after{
    display:none;
  }

  #commissionModal .modal-head{
    background:linear-gradient(90deg, rgba(213,218,242,0.48), rgba(255,255,255,0.34));
  }

  #commissionModal .modal-body{
    background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(213,218,242,0.10));
  }

  #commissionModal .form-control{
    background:rgba(255,255,255,0.80);
    border-color:rgba(120,131,191,0.22);
  }


  /* ---------- SCHEDULE CARD ALIGNMENT ---------- */
  #schedule .status-banner{
    position:relative;
    padding:32px 34px;
    margin-bottom:22px;
    overflow:hidden;
    align-items:center;
    border-color:rgba(120,131,191,0.28);
    background:linear-gradient(180deg, rgba(213,218,242,0.42), rgba(255,255,255,0.70));
    box-shadow:0 18px 46px rgba(120,131,191,0.16);
  }
  #schedule .status-banner::after{
    content:"";
    position:absolute;
    right:-50px;
    bottom:-60px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(120,131,191,0.13), transparent 68%);
    pointer-events:none;
  }
  #schedule .status-left,
  #schedule .status-banner .btn{
    position:relative;
    z-index:1;
  }
  #schedule .status-left{
    align-items:flex-start;
  }
  #schedule .status-dot{
    margin-top:9px;
    flex-shrink:0;
  }
  #schedule .status-title{
    font-family:'Noto Serif SC',serif;
    font-size:22px;
    line-height:1.45;
    color:var(--accent);
    margin-bottom:4px;
  }
  #schedule .status-sub{
    color:var(--text-dim);
    font-size:13px;
    line-height:1.8;
  }
  #schedule .schedule-table-heading{
    margin-top:4px;
  }

  #schedule .schedule-table thead th{
    background:rgba(213,218,242,0.42);
  }


  /* ---------- MATCH PRICE CALCULATION CARD STYLE ---------- */
  #works .tag-panel,
  #contact .contact-main,
  #home .hero-card{
    position:relative;
    overflow:hidden;
    border-color:rgba(120,131,191,0.28);
    background:linear-gradient(180deg, rgba(213,218,242,0.42), rgba(255,255,255,0.70));
    box-shadow:0 18px 46px rgba(120,131,191,0.16);
  }

  #works .tag-panel,
  #contact .contact-main{
    padding:32px 34px;
  }

  #home .hero-card{
    padding:32px 34px;
  }

  #works .tag-panel-title,
  #contact .contact-main h3{
    font-family:'Noto Serif SC',serif;
    font-size:22px !important;
    line-height:1.45;
    color:var(--accent) !important;
    margin-bottom:12px !important;
  }

  #contact .contact-main p{
    color:var(--text-dim) !important;
    font-size:14px;
    line-height:1.9;
    max-width:650px;
  }

  #home .hero-card .hero-title{
    position:relative;
    z-index:1;
  }

  @media (max-width:760px){
    #schedule .status-banner{
      padding:26px 24px;
    }
    #schedule .status-title{
      font-size:20px;
    }
  }

  @media (max-width:760px){
    .sidebar{
      background:rgba(255,255,255,0.90);
      box-shadow:0 -10px 30px rgba(120,131,191,0.13);
    }
  }


  /* ---------- USER REQUEST FIXES: clarity / left shift / image borders / opacity ---------- */
  /* 1. 紅框：頁面標題與說明字體加深、加白色柔光，避免被背景吃掉 */
  .eyebrow{
    color:#B86F78;
    font-weight:800;
    letter-spacing:3.4px;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.92),
      0 8px 22px rgba(93,101,160,0.18);
  }
  .eyebrow::before{
    height:2px;
    background:currentColor;
    box-shadow:0 1px 0 rgba(255,255,255,0.75);
  }
  h1.page-title{
    color:#2F334F;
    font-weight:900;
    letter-spacing:.08em;
    line-height:1.28;
    background:linear-gradient(120deg, #4E5680 0%, #717BBC 48%, #B86F78 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  p.page-desc{
    color:#4D526F;
    font-weight:700;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.90),
      0 8px 20px rgba(86,93,150,0.12);
  }

  /* 2. 藍框：關於頁右側模塊整體左移，縮短與左側介紹卡的距離 */
  @media (min-width:981px){
    #about .about-grid{
      grid-template-columns:minmax(320px, 430px) minmax(0, 1fr);
      gap:24px;
    }
  }
  @media (min-width:1400px){
    #about .about-grid{
      grid-template-columns:minmax(340px, 460px) minmax(0, 1fr);
    }
  }

  /* 3. 橘框：作品圖卡增加更清楚但仍細緻的邊框 */
  #works .gallery-item{
    border:1px solid rgba(120,131,191,0.46);
    background:rgba(255,255,255,0.88) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.74) inset,
      0 12px 28px rgba(120,131,191,0.16);
  }
  #works .gallery-item:hover{
    border-color:rgba(120,131,191,0.64) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.80) inset,
      0 16px 36px rgba(120,131,191,0.22) !important;
  }
  #works .gallery-img-wrap{
    border-bottom:1px solid rgba(120,131,191,0.26);
  }
  #works .gallery-item-tags{
    background:rgba(255,255,255,0.76);
  }
  #works .item-tag{
    background:rgba(255,255,255,0.78);
    border-color:rgba(120,131,191,0.22);
    color:#626783;
    font-weight:700;
  }

  /* 4. 綠框：各模塊提高不透明度，保留背景但讓內容區更乾淨 */
  .card,
  .status-banner,
  .table-card{
    backdrop-filter:blur(8px);
  }
  #home .hero-card,
  #about .intro-collapse,
  #about .social-card,
  #works .tag-panel,
  #commission .commission-hero,
  #commission .formula-card,
  #commission .mini-card,
  #commission .flow-wrap,
  #commission .rules-card,
  #schedule .status-banner,
  #schedule .table-card,
  #contact .contact-main{
    background:linear-gradient(180deg, rgba(242,244,255,0.86), rgba(255,255,255,0.91)) !important;
    border-color:rgba(120,131,191,0.34);
    box-shadow:0 18px 46px rgba(120,131,191,0.18);
  }
  #commission .commercial-rule-box,
  #commission .commercial-rule-intro,
  #commissionModal .choice-card,
  #commissionModal .estimate-total,
  #commissionModal .estimate-detail,
  #copyNoticeModal .notice-amount,
  .relation-person-card{
    background:rgba(255,255,255,0.84) !important;
    border-color:rgba(120,131,191,0.30) !important;
  }
  #schedule .schedule-table thead th{
    background:rgba(224,228,248,0.78) !important;
  }
  tbody td,
  .price-list,
  .mini-card-desc,
  .rules-card ul,
  .commission-hero p,
  .formula-note,
  .contact-main p,
  .intro-item dd,
  .social-link,
  .commercial-rule-box p{
    color:#4F5471;
    font-weight:600;
  }
  .section-heading,
  .tag-panel-title,
  #contact .contact-main h3,
  #commission .commission-hero h3,
  #commission .flow-wrap h3,
  #commission .rules-card h3,
  .intro-summary-title,
  .social-card .social-summary-title{
    color:#717BBC;
    font-weight:900;
    text-shadow:0 1px 0 rgba(255,255,255,0.90);
  }
  .price-amt,
  .mini-card-value,
  .formula-text{
    color:#C98282;
    font-weight:900;
    text-shadow:0 1px 0 rgba(255,255,255,0.82);
  }
  .intro-summary,
  .social-card .social-summary{
    background:linear-gradient(90deg, rgba(225,229,249,0.86), rgba(255,255,255,0.72)) !important;
  }
  .intro-summary:hover,
  .social-card .social-summary:hover{
    background:linear-gradient(90deg, rgba(225,229,249,0.96), rgba(252,226,224,0.72)) !important;
  }

  @media (max-width:980px){
    #about .about-grid{
      grid-template-columns:1fr;
    }
    #about .about-content-stack{
      margin-left:0;
      width:100%;
    }
  }

  /* ---------- ABOUT RELATION BUTTON MODULE ---------- */
  .relation-collapse.relation-card{
    padding:0;
    overflow:hidden;
  }
  .relation-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:23px 28px;
    border-bottom:1px solid var(--border-soft);
    background:linear-gradient(90deg, rgba(225,229,249,0.86), rgba(255,255,255,0.72));
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:background .2s ease;
  }
  .relation-summary::-webkit-details-marker{display:none;}
  .relation-summary:hover{
    background:linear-gradient(90deg, rgba(225,229,249,0.96), rgba(252,226,224,0.72));
  }
  .relation-summary-title{
    display:flex;
    align-items:center;
    color:#717BBC;
    font-size:19px;
    line-height:1.45;
    font-weight:900;
    text-shadow:0 1px 0 rgba(255,255,255,0.90);
  }
  .relation-summary-title::before{
    content:"▸";
    display:inline-block;
    margin-right:10px;
    color:var(--gold);
    transition:transform .22s ease;
    font-family:'Noto Serif SC',serif;
    font-size:15px;
  }
  .relation-collapse[open] .relation-summary-title::before{transform:rotate(90deg);}
  .relation-summary-state{
    flex-shrink:0;
    color:var(--text-faint);
    font-size:12px;
    letter-spacing:.4px;
  }
  .relation-summary-state .open-text{display:none;}
  .relation-collapse[open] .relation-summary-state .closed-text{display:none;}
  .relation-collapse[open] .relation-summary-state .open-text{display:inline;}
  .relation-card-body{
    padding:20px 22px 24px;
  }
  .relation-card-desc{
    margin:0 0 14px;
    color:#4F5471;
    font-size:13px;
    font-weight:600;
    line-height:1.85;
  }
  .relation-card-icon{
    position:relative;
    z-index:1;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(120,131,191,0.18);
    box-shadow:0 8px 18px rgba(120,131,191,0.12);
    font-size:17px;
  }

  @media (max-width:760px){
    .relation-summary{padding:20px;}
    .relation-summary-title{font-size:18px;}
    .relation-card-body{padding:18px 20px 22px;}
  }

  /* ---------- SCHEDULE NOTE READABILITY FIX ---------- */
  #schedule .note-box{
    margin-top:24px;
    padding:18px 24px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(242,244,255,0.90));
    border:1px solid rgba(120,131,191,0.36);
    box-shadow:
      0 16px 38px rgba(120,131,191,0.18),
      0 0 0 1px rgba(255,255,255,0.72) inset;
    color:#3D435F;
    font-size:13.5px;
    line-height:1.9;
    font-weight:800;
    text-shadow:0 1px 0 rgba(255,255,255,0.95);
    backdrop-filter:blur(8px);
  }


  /* ---------- COMMISSION FORM ESTIMATE POSITION SWAP ---------- */
  @media (min-width:761px){
    #commissionModal .estimate-box{
      grid-template-columns:.9fr 1.1fr;
    }
    #commissionModal .estimate-detail{
      order:1;
    }
    #commissionModal .estimate-total{
      order:2;
    }
  }


  /* ---------- RELATION MODAL: top group image + per-character PNG cards ---------- */
  .relation-panel{
    width:min(1020px, 96vw) !important;
  }

  .relation-content{
    display:flex;
    flex-direction:column;
    grid-template-columns:none !important;
    gap:22px !important;
    align-items:stretch;
  }

  .relation-image-wrap{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(120,131,191,0.24);
    background:rgba(255,255,255,0.72) !important;
    box-shadow:0 16px 42px rgba(120,131,191,0.16);
  }

  .relation-image-wrap img{
    width:100% !important;
    max-height:360px !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    display:block !important;
    background:rgba(255,255,255,0.38) !important;
  }

  .relation-text{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .relation-panel.relation-lover{
    width:min(760px, 96vw) !important;
  }

  .relation-panel.relation-lover .relation-content{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }

  .relation-panel.relation-lover .relation-image-wrap{
    max-width:620px !important;
  }

  .relation-panel.relation-lover .relation-image-wrap img{
    max-height:58vh !important;
    object-fit:contain !important;
  }

  .relation-panel.relation-lover .relation-text{
    width:100% !important;
    max-width:620px !important;
    margin:0 auto !important;
  }

  @media (max-width:760px){
    .relation-image-wrap{
      max-width:100% !important;
    }

    .relation-image-wrap img{
      max-height:none !important;
      aspect-ratio:4 / 3 !important;
    }

    .relation-panel.relation-lover .relation-image-wrap img{
      aspect-ratio:auto !important;
      max-height:52vh !important;
    }
  }

  /* ---------- ABOUT TITLE DOT TRUE SAME SIZE FIX v2 ---------- */
  #about .intro-summary-title .title-dot,
  #about .social-card .social-summary-title .title-dot,
  #about .relation-summary-title .title-dot{
    position:relative;
    display:inline-block !important;
    width:6px;
    height:6px;
    flex:0 0 6px;
    margin:0 12px;
    padding:0;
    color:transparent !important;
    font-size:0 !important;
    line-height:0;
    vertical-align:middle;
    transform:translateY(-1px);
    opacity:1;
  }
  #about .intro-summary-title .title-dot::before,
  #about .social-card .social-summary-title .title-dot::before,
  #about .relation-summary-title .title-dot::before{
    content:"";
    position:absolute;
    inset:0;
    width:6px;
    height:6px;
    border-radius:999px;
    background:#C98986;
    box-shadow:0 0 0 2px rgba(255,255,255,0.55), 0 2px 7px rgba(201,137,134,0.24);
  }

/* ---------- SITE BGM（改置於側欄底部） ---------- */
.site-bgm{
  display:none;
}

.sidebar-bgm{
  padding:14px 12px;
  border-top:1px solid var(--border-soft);
}

.bgm-toggle{
  width:100%;
  min-height:42px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid rgba(120,131,191,0.26);
  background:rgba(255,255,255,0.70);
  color:#717BBC;
  font-family:'Noto Serif SC',serif;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:url('images/cursors/sora-link-select.cur'), pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}

.bgm-toggle:hover{
  background:#fff;
  box-shadow:0 8px 18px rgba(120,131,191,0.16);
}

.bgm-toggle.playing{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(95deg, #7883BF, #9BA0BF);
}

.bgm-icon{
  font-size:15px;
  line-height:1;
}

@media (min-width:761px){
  .sidebar.auto-collapse > .sidebar-bgm{
    position:relative;
    z-index:1;
    width:86px;
    transition:width .34s cubic-bezier(.65,0,.35,1), padding .34s cubic-bezier(.65,0,.35,1);
  }
  .sidebar.auto-collapse:hover > .sidebar-bgm,
  .sidebar.auto-collapse:focus-within > .sidebar-bgm{
    width:248px;
  }
  .sidebar.auto-collapse:not(:hover):not(:focus-within) .bgm-toggle{
    justify-content:center;
    padding:9px 0;
  }
  .sidebar.auto-collapse:not(:hover):not(:focus-within) .bgm-toggle .lbl{
    display:none;
  }
}

@media (max-width:760px){
  .sidebar-bgm{
    border-top:none;
    padding:10px 10px 10px 0;
    display:flex;
    align-items:center;
  }
  .bgm-toggle{
    width:auto;
    min-width:52px;
    min-height:40px;
    padding:8px 12px;
  }
  .bgm-toggle .lbl{
    display:none;
  }
}
  /* ---------- COMMISSION FORM PREVIEW PANEL：方案二 24張範例圖 ---------- */
  #commissionModal .modal-panel{
    width:min(1180px, 96vw);
  }

  @media (min-width:981px){
    #commissionPreviewPanel{
      grid-column:3;
      grid-row:1 / span 12;
      position:sticky;
      top:12px;
    }
  }

  #commissionPreviewPanel{
    gap:14px;
    padding:18px;
    border-radius:20px;
    border:1px solid rgba(120,131,191,0.30);
    background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(242,244,255,0.86));
    box-shadow:0 18px 42px rgba(120,131,191,0.16);
    overflow:hidden;
  }

  .commission-preview-kicker{
    font-family:'Cinzel','Noto Serif SC',serif;
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    color:var(--text-faint);
    text-transform:uppercase;
  }

  .commission-preview-title{
    font-family:'Noto Serif SC',serif;
    color:var(--accent);
    font-size:18px;
    font-weight:900;
    line-height:1.4;
    text-shadow:0 1px 0 rgba(255,255,255,0.9);
  }

  .commission-preview-frame{
    position:relative;
    width:100%;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(120,131,191,0.24);
    background:rgba(255,255,255,0.70);
    box-shadow:0 12px 26px rgba(120,131,191,0.12);
  }

  .commission-preview-frame img{
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    display:block;
    background:rgba(255,255,255,0.64);
  }

  .commission-preview-caption{
    color:#4F5471;
    font-size:12px;
    font-weight:700;
    line-height:1.75;
  }

  .commission-preview-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }

  .commission-preview-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(120,131,191,0.22);
    background:rgba(255,255,255,0.72);
    color:#5E6078;
    font-size:11px;
    font-weight:900;
    line-height:1.4;
  }

  .commission-preview-subtitle{
    margin-top:2px;
    padding-top:12px;
    border-top:1px dashed rgba(120,131,191,0.22);
    color:var(--gold);
    font-size:13px;
    font-weight:900;
  }

  .commission-preview-mini-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }

  .commission-preview-mini{
    min-width:0;
    border-radius:16px;
    border:1px solid rgba(120,131,191,0.22);
    background:rgba(255,255,255,0.70);
    overflow:hidden;
    box-shadow:0 10px 22px rgba(120,131,191,0.10);
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
  }

  .commission-preview-mini[hidden]{
    display:none !important;
  }

  .commission-preview-mini img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    display:block;
    background:rgba(255,255,255,0.62);
    position:relative;
    z-index:1;
  }

  .commission-preview-mini span{
    display:block;
    padding:7px 8px 8px;
    color:#4F5471;
    font-size:11px;
    font-weight:900;
    line-height:1.45;
    text-align:center;
    position:relative;
    z-index:2;
    background:rgba(255,255,255,0.96);
    border-top:1px solid rgba(120,131,191,0.14);
  }

  @media (max-width:980px){
    #commissionModal .modal-panel{
      width:min(980px, 96vw);
    }
    #commissionPreviewPanel{
      order:3;
      grid-column:1 / -1;
      position:relative;
      top:auto;
      margin:0 0 4px;
    }
    .commission-preview-frame img{
      aspect-ratio:16 / 10;
      object-fit:cover;
    }
    .commission-preview-mini-grid{
      grid-template-columns:repeat(4, minmax(0,1fr));
    }
  }

  @media (max-width:760px){
    #commissionPreviewPanel{
      padding:16px;
      border-radius:18px;
    }
    .commission-preview-frame img{
      aspect-ratio:4 / 5;
    }
    .commission-preview-mini-grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
  }

  /* ---------- COMMISSION PREVIEW：0704 圖片與尺寸比例適配 ---------- */
  .commission-preview-frame{
    aspect-ratio:var(--preview-ratio, 1 / 1);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.52), rgba(242,244,255,0.42));
    isolation:isolate;
  }

  .commission-preview-frame::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
      radial-gradient(circle at 50% 34%, rgba(255,255,255,0.46), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(120,131,191,0.10));
    pointer-events:none;
  }

  .commission-preview-bg-layer,
  .commission-preview-img{
    position:absolute;
    display:block;
    max-width:none;
    background:transparent !important;
    pointer-events:none;
  }

  .commission-preview-bg-layer{
    inset:0;
    z-index:-1;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:var(--preview-bg-opacity, .88);
    filter:saturate(.98) contrast(.98);
  }

  .commission-preview-img{
    z-index:1;
    left:50%;
    top:var(--preview-char-top, auto);
    bottom:var(--preview-char-bottom, -2%);
    width:var(--preview-char-width, 88%);
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center top;
    transform:
      translateX(-50%)
      translateY(var(--preview-char-y, 0))
      scale(var(--preview-char-scale, 1));
    transform-origin:var(--preview-char-origin, center top);
    filter:drop-shadow(0 18px 28px rgba(80,84,130,0.18));
  }

/* 只有「全身」類型的立繪改用完整顯示，不影響頭像／半身／驚喜包／漫畫 */
  .commission-preview-frame[data-preview-type="full"] .commission-preview-img{
    width:var(--preview-char-width, 88%) !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }

  .commission-preview-frame[data-preview-type="avatar"] .commission-preview-img,
  .commission-preview-frame[data-preview-type="surprise"] .commission-preview-img{
    object-position:center top;
  }

  .commission-preview-frame[data-preview-type="avatar"] .commission-preview-img{
    transform-origin:center top;
  }

  .commission-preview-mini img{
    object-fit:contain !important;
    padding:6px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.78), rgba(242,244,255,0.70)) !important;
  }

  #previewBgCard img{
    object-fit:cover !important;
    padding:0;
  }

  #previewOrientationCard img{
    object-position:center bottom;
  }

  /* 頭像的下方示意圖同步裁成頭像構圖，避免 Q版／正比顯示完整全身。 */
  #previewColorCard[data-preview-type="avatar"] img,
  #previewClothingCard[data-preview-type="avatar"] img{
    padding:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
    transform-origin:center top !important;
  }

  #previewColorCard[data-preview-type="avatar"][data-preview-proportion="chibi"] img,
  #previewClothingCard[data-preview-type="avatar"][data-preview-proportion="chibi"] img{
    transform:translateY(30%) scale(2.55);
  }

  #previewColorCard[data-preview-type="avatar"][data-preview-proportion="normal"] img,
  #previewClothingCard[data-preview-type="avatar"][data-preview-proportion="normal"] img{
    transform:translateY(42%) scale(2.95);
  }

  @media (max-width:980px){
    .commission-preview-frame{
      aspect-ratio:var(--preview-ratio, 4 / 5) !important;
    }
  }



  .commission-preview-bg-layer{
    inset:auto !important;
    left:50% !important;
    top:50% !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:
      translate(
        calc(-50% + var(--preview-bg-x, 0px)),
        calc(-50% + var(--preview-bg-y, 0px))
      )
      scale(var(--preview-bg-scale, 1)) !important;
    transform-origin:center center !important;
    opacity:var(--preview-bg-opacity, .88) !important;
  }

  .commission-preview-img{
    left:50% !important;
    transform:
      translateX(calc(-50% + var(--preview-char-x, 0px)))
      translateY(calc(var(--preview-char-y, 0%) + var(--preview-char-y-adjust, 0px)))
      scale(var(--preview-char-scale-final, var(--preview-char-scale, 1))) !important;
  }

  #previewColorCard img,
  #previewBgCard img,
  #previewClothingCard img,
  #previewOrientationCard img{
    --mini-base-x:0px;
    --mini-base-y:0px;
    --mini-base-scale:1;
    transform:
      translate(
        calc(var(--mini-base-x, 0px) + var(--mini-cal-x, 0px)),
        calc(var(--mini-base-y, 0px) + var(--mini-cal-y, 0px))
      )
      scale(var(--mini-cal-scale-final, var(--mini-base-scale, 1))) !important;
    transform-origin:var(--mini-cal-origin, center center) !important;
  }

  #previewColorCard[data-preview-type="avatar"][data-preview-proportion="chibi"] img,
  #previewClothingCard[data-preview-type="avatar"][data-preview-proportion="chibi"] img{
    --mini-base-y:30%;
    --mini-base-scale:2.55;
  }

  #previewColorCard[data-preview-type="avatar"][data-preview-proportion="normal"] img,
  #previewClothingCard[data-preview-type="avatar"][data-preview-proportion="normal"] img{
    --mini-base-y:42%;
    --mini-base-scale:2.95;
  }

  /* ---------- COMMISSION PREVIEW：漫畫格式圖片與分鏡分頁 ---------- */
  .commission-preview-frame[data-preview-kind="comic"]{
    background:linear-gradient(180deg, rgba(255,255,255,0.90), rgba(242,244,255,0.82)) !important;
  }

  .commission-preview-frame[data-preview-kind="comic"]::before{
    display:none !important;
  }

  .commission-preview-frame[data-preview-kind="comic"] .commission-preview-bg-layer{
    display:none !important;
  }

  .commission-preview-frame[data-preview-kind="comic"] .commission-preview-img{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
    filter:none !important;
    z-index:1 !important;
  }

  .commission-preview-pager{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .commission-preview-pager[hidden]{
    display:none !important;
  }

  .commission-preview-page-btn{
    border:1px solid rgba(120,131,191,0.24);
    border-radius:999px;
    background:rgba(255,255,255,0.78);
    color:#5E6078;
    font-family:'Noto Serif SC',serif;
    font-size:12px;
    font-weight:900;
    padding:7px 12px;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  .commission-preview-page-btn:hover{
    transform:translateY(-1px);
    background:rgba(242,244,255,0.96);
    border-color:rgba(120,131,191,0.42);
    color:#717BBC;
  }

  .commission-preview-page-btn.active{
    background:linear-gradient(95deg, #7883BF, #9BA0BF);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 18px rgba(120,131,191,0.20);
  }



  /* ---------- COMMISSION PREVIEW CLEAN MODE ---------- */
  #commissionPreviewPanel .commission-preview-tags,
  #commissionPreviewPanel .commission-preview-subtitle,
  #commissionPreviewPanel .commission-preview-mini-grid{
    display:none !important;
  }

  #commissionPreviewPanel .commission-preview-caption{
    color:#4F5471;
    font-size:12px;
    font-weight:900;
    line-height:1.75;
    margin-top:0;
  }

  /* ---------- COMMISSION：特殊背景預覽 ---------- */
  .commission-preview-frame[data-preview-type="noCharacter"]::before{
    display:none !important;
  }
  .commission-preview-frame[data-preview-type="noCharacter"] .commission-preview-bg-layer{
    z-index:1 !important;
    opacity:1 !important;
  }
  .commission-preview-frame[data-preview-type="noCharacter"] .commission-preview-img{
    display:none !important;
  }



  /* ---------- SIDEBAR AUTO HOVER COLLAPSE ---------- */
  @media (min-width:761px){
    .sidebar.auto-collapse{
      width:86px !important;
      flex:0 0 86px;
      overflow:visible;
      position:sticky;
      top:0;
      background:transparent !important;
      border-right:none;
      box-shadow:none !important;
      isolation:isolate;
    }

    .sidebar.auto-collapse::after{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:86px;
      height:100%;
      z-index:0;
      pointer-events:none;
      background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(242,242,242,0.78));
      border-right:1px solid var(--border-soft);
      box-shadow:8px 0 30px rgba(120,131,191,0.10);
      backdrop-filter:blur(14px);
      transition:width .34s cubic-bezier(.65,0,.35,1), box-shadow .34s ease;
    }

    .sidebar.auto-collapse:hover::after,
    .sidebar.auto-collapse:focus-within::after{
      width:248px;
      box-shadow:14px 0 38px rgba(120,131,191,0.16);
    }

    .sidebar.auto-collapse > .brand,
    .sidebar.auto-collapse > nav.navlist{
      position:relative;
      z-index:1;
      width:86px;
      transition:width .34s cubic-bezier(.65,0,.35,1), padding .34s cubic-bezier(.65,0,.35,1);
    }

    .sidebar.auto-collapse:hover > .brand,
    .sidebar.auto-collapse:hover > nav.navlist,
    .sidebar.auto-collapse:focus-within > .brand,
    .sidebar.auto-collapse:focus-within > nav.navlist{
      width:248px;
    }

    .sidebar.auto-collapse > nav.navlist{
      overflow-x:hidden;
    }

    .sidebar.auto-collapse:not(:hover):not(:focus-within) .brand{
      justify-content:center;
      gap:0;
      padding-left:15px;
      padding-right:15px;
    }

    .sidebar.auto-collapse:not(:hover):not(:focus-within) .brand-text{
      opacity:0;
      width:0;
      pointer-events:none;
      overflow:hidden;
    }

    .sidebar.auto-collapse:not(:hover):not(:focus-within) .navbtn{
      justify-content:center;
      padding:12px 0;
    }

    .sidebar.auto-collapse:not(:hover):not(:focus-within) .navbtn .lbl{
      opacity:0;
      width:0;
      overflow:hidden;
    }

    .sidebar.auto-collapse:not(:hover):not(:focus-within) .navbtn .paw{
      display:none;
    }

    .sidebar.auto-collapse:hover .brand,
    .sidebar.auto-collapse:focus-within .brand{
      justify-content:flex-start;
      gap:12px;
      padding:26px 20px 20px 22px;
    }

    .sidebar.auto-collapse:hover .brand-text,
    .sidebar.auto-collapse:focus-within .brand-text{
      opacity:1;
      width:auto;
      pointer-events:auto;
      overflow:visible;
    }

    .sidebar.auto-collapse:hover .navbtn,
    .sidebar.auto-collapse:focus-within .navbtn{
      justify-content:flex-start;
      padding:12px 14px;
    }

    .sidebar.auto-collapse:hover .navbtn .lbl,
    .sidebar.auto-collapse:focus-within .navbtn .lbl{
      opacity:1;
      width:auto;
      overflow:visible;
    }

    .sidebar.auto-collapse:hover .navbtn.active .paw,
    .sidebar.auto-collapse:focus-within .navbtn.active .paw{
      display:inline-block;
      opacity:1;
    }
  }

  @media (max-width:760px){
    .sidebar.auto-collapse{
      width:100% !important;
      flex:0 0 auto !important;
      overflow:visible !important;
    }
  }


  /* ---------- HOME COMMISSION STATUS BADGE（新增：委託狀態徽章） ---------- */
  .commission-status-badge{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin:0 0 20px;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid rgba(120,131,191,0.30);
    background:rgba(255,255,255,0.84);
    color:#4F5471;
    font-family:'Noto Serif SC',serif;
    font-size:13px;
    font-weight:900;
    letter-spacing:.05em;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    box-shadow:0 10px 24px rgba(120,131,191,0.14);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .commission-status-badge:hover{
    transform:translateY(-2px);
    background:#fff;
    box-shadow:0 14px 30px rgba(120,131,191,0.22);
  }
  .status-badge-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#B9BDD6;
    box-shadow:0 0 0 4px rgba(185,189,214,0.22);
    flex-shrink:0;
  }
  .commission-status-badge.status-loading .status-badge-dot{
    background:#C9A25F;
    box-shadow:0 0 0 4px rgba(201,162,95,0.18);
    animation:statusPulse 1.4s ease-in-out infinite;
  }
  .commission-status-badge.status-open{color:#3E7A5C; border-color:rgba(111,174,138,0.48);}
  .commission-status-badge.status-open .status-badge-dot{
    background:#6FAE8A;
    box-shadow:0 0 0 4px rgba(111,174,138,0.20);
  }
  .commission-status-badge.status-busy{color:#9A6B1F; border-color:rgba(217,162,76,0.48);}
  .commission-status-badge.status-busy .status-badge-dot{
    background:#D9A24C;
    box-shadow:0 0 0 4px rgba(217,162,76,0.20);
  }
  .commission-status-badge.status-closed{color:#A44A63; border-color:rgba(201,112,136,0.45);}
  .commission-status-badge.status-closed .status-badge-dot{
    background:#C97088;
    box-shadow:0 0 0 4px rgba(201,112,136,0.18);
  }
  .status-badge-arrow{color:#85889F; font-size:15px; line-height:1;}
  @keyframes statusPulse{0%,100%{opacity:1;} 50%{opacity:.45;}}


  /* ---------- COMMISSION FAQ（新增：常見問題） ---------- */
  .faq-list{display:grid; gap:10px;}
  .faq-item{
    border:1px solid rgba(120,131,191,0.26);
    border-radius:14px;
    background:rgba(255,255,255,0.72);
    overflow:hidden;
  }
  .faq-item summary{
    list-style:none;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    color:#4F5471;
    font-size:14px;
    font-weight:900;
    line-height:1.6;
    transition:background .2s ease, color .2s ease;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::before{
    content:"▸";
    color:var(--gold);
    font-size:13px;
    flex-shrink:0;
    transition:transform .22s ease;
  }
  .faq-item[open] summary::before{transform:rotate(90deg);}
  .faq-item summary:hover{background:rgba(213,218,242,0.42); color:#717BBC;}
  .faq-item[open] summary{
    border-bottom:1px dashed rgba(120,131,191,0.22);
    background:rgba(213,218,242,0.32);
  }
  .faq-answer{
    padding:13px 16px 15px 34px;
    color:#4F5471;
    font-size:13.5px;
    line-height:1.95;
    font-weight:600;
  }


  /* ---------- 頁首標題橫幅（深色半透明、左右滿版頂到底 + 英文浮水印） ---------- */
  .page-head{
    position:relative;
    display:block;
    margin:0 -56px 30px;
    padding:24px 56px 10px;
    border-radius:0;
    overflow:hidden;
    background:
      radial-gradient(circle at 88% 0%, rgba(240,163,190,0.26), transparent 46%),
      radial-gradient(circle at 6% 100%, rgba(120,131,191,0.30), transparent 52%),
      linear-gradient(115deg, rgba(44,42,66,0.84), rgba(58,54,88,0.74) 55%, rgba(74,56,84,0.72));
    border-top:1px solid rgba(255,255,255,0.14);
    border-bottom:1px solid rgba(255,255,255,0.16);
    box-shadow:0 18px 44px rgba(52,54,79,0.28);
    backdrop-filter:blur(12px);
  }
  .page-head::before{
    content:"";
    position:absolute;
    left:0;
    top:16px;
    bottom:16px;
    width:5px;
    border-radius:0 5px 5px 0;
    background:linear-gradient(180deg, var(--accent), #F2A7C3);
    box-shadow:2px 0 10px rgba(120,131,191,0.35);
  }
  .page-head::after{
    content:attr(data-en);
    position:absolute;
    right:28px;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    z-index:0;
    font-family:'Cinzel','Noto Serif SC',serif;
    font-size:62px;
    font-weight:800;
    letter-spacing:.06em;
    line-height:1;
    background:linear-gradient(120deg, rgba(255,255,255,0.14), rgba(240,163,190,0.22));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    pointer-events:none;
    user-select:none;
  }
  .page-head > *{position:relative; z-index:1;}
  .page-head .page-desc{margin-bottom:16px;}
  /* 深色橫幅上的文字配色 */
  .page-head .eyebrow{color:#F5B8CC; text-shadow:none;}
  .page-head .eyebrow::before{background:currentColor; box-shadow:none;}
  .page-head .page-title{
    background:linear-gradient(120deg, #FFFFFF 0%, #D5DAF2 45%, #F2A7C3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .page-head .page-desc{color:rgba(235,236,248,0.92); text-shadow:none; font-weight:600;}


  /* ---------- 作品頁：分批載入工具列 + 載入更多 + 佔位底色 ---------- */
  .gallery-tools{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .gallery-batch-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-dim);
    font-size:13px;
    font-weight:700;
  }
  .gallery-batch-select{
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(120,131,191,0.30);
    background:rgba(255,255,255,0.88);
    color:var(--text);
    font-family:'Noto Serif SC',serif;
    font-size:13px;
    font-weight:700;
    outline:none;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
  }
  .gallery-load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:22px;
  }
  #galleryLoadMore{padding:12px 30px;}
  .gallery-img-wrap::before{
    content:"🐾";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    opacity:.28;
  }
  .gallery-img-wrap img{
    position:relative;
    opacity:0;
    transition:opacity .4s ease;
  }
  .gallery-img-wrap img.loaded{opacity:1;}


  /* ---------- 委託頁：錨點快捷鍵 + 頁面徽章 ---------- */
  .commission-anchor-row{
    display:inline-flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-left:4px;
    padding-left:18px;
    border-left:1px solid rgba(120,131,191,0.30);
  }
  @media (max-width:980px){
    .commission-anchor-row{margin-left:0; padding-left:0; border-left:none;}
  }
  #anchorBasePrice, #anchorFlow, #anchorRules, #anchorFaq{scroll-margin-top:18px;}
  .commission-page-badge{margin:0;}


  /* ---------- 回到頁面頂端按鈕 ---------- */
  .back-to-top{
    position:fixed;
    right:30px;
    bottom:132px;
    z-index:2185;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(120,131,191,0.30);
    background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(242,244,255,0.90));
    color:#717BBC;
    font-size:19px;
    font-weight:900;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    box-shadow:0 14px 28px rgba(120,131,191,0.20);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  }
  .back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .back-to-top:hover{background:#fff; transform:translateY(-2px);}

  @media (max-width:760px){
    .page-head{margin:0 -20px 20px; padding:18px 20px 4px; border-radius:0;}
    .page-head::after{font-size:34px; right:14px;}
    .site-foot{margin-top:44px;}
    .back-to-top{right:14px; bottom:172px; width:42px; height:42px;}
  }

  /* ---------- 視覺微互動（進場動畫、hover 效果、按鈕光澤） ---------- */
  /* 區塊標題右側的漸層裝飾線 */
  .section-heading::after{
    content:"";
    flex:1;
    height:2px;
    margin-left:6px;
    border-radius:2px;
    background:linear-gradient(90deg, rgba(120,131,191,0.30), rgba(201,137,134,0.16), transparent 85%);
  }

  /* 主要按鈕滑過時的光澤掃過效果 */
  .btn-primary,
  .mail-btn{position:relative; overflow:hidden;}
  .btn-primary::after,
  .mail-btn::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-70%;
    width:45%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-18deg);
    transition:left .55s ease;
    pointer-events:none;
  }
  .btn-primary:hover::after,
  .mail-btn:hover::after{left:130%;}

  /* 價目卡、統計卡滑過時輕微上浮 */
  #commission .mini-card,
  #commission .commercial-rule-box{
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #commission .mini-card:hover{
    transform:translateY(-4px);
    border-color:rgba(120,131,191,0.55) !important;
    box-shadow:0 22px 50px rgba(120,131,191,0.26) !important;
  }
  #commission .commercial-rule-box:hover{
    transform:translateY(-3px);
    border-color:rgba(120,131,191,0.45) !important;
  }

  /* 委託流程圓點滑過時放大 */
  .flow-step .dot{transition:transform .2s ease, box-shadow .2s ease;}
  .flow-step:hover .dot{
    transform:scale(1.14);
    box-shadow:0 8px 18px rgba(120,131,191,0.35);
  }

  /* 卡片捲動進場動畫（JS 以 IntersectionObserver 啟用；使用者關閉動畫偏好時不套用） */
  @media (prefers-reduced-motion: no-preference){
    .reveal-init{
      opacity:0;
      transform:translateY(22px);
      transition:
        opacity .65s cubic-bezier(.22,.8,.36,1),
        transform .65s cubic-bezier(.22,.8,.36,1),
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
    }
    .reveal-init.reveal-in{
      opacity:1;
      transform:none;
    }
  }


  /* ---------- ABOUT 頁精緻化：名片徽章、便利貼近況、主題色摺疊卡、社群追蹤數 ---------- */
  .profile-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:14px;
  }
  .profile-badge{
    padding:5px 13px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.05em;
    color:#5A6090;
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(120,131,191,0.30);
    box-shadow:0 6px 14px rgba(120,131,191,0.12);
  }
  .profile-badge:nth-child(even){
    color:#B06078;
    border-color:rgba(240,163,190,0.45);
    background:rgba(255,244,248,0.85);
  }


  /* 三張摺疊卡主題色：介紹＝紫、社群＝粉、關係＝金 */
  #about .intro-collapse{border-left:4px solid rgba(120,131,191,0.55);}
  #about .social-card{border-left:4px solid rgba(240,163,190,0.60);}
  #about .relation-card{border-left:4px solid rgba(230,194,114,0.60);}
  #about .intro-collapse .intro-summary{
    background:linear-gradient(90deg, rgba(213,218,242,0.85), rgba(255,255,255,0.70)) !important;
  }
  #about .social-card .social-summary{
    background:linear-gradient(90deg, rgba(252,224,234,0.85), rgba(255,255,255,0.70)) !important;
  }
  #about .relation-card .relation-summary{
    background:linear-gradient(90deg, rgba(247,236,208,0.85), rgba(255,255,255,0.70));
  }
  #about .intro-collapse .intro-summary:hover{
    background:linear-gradient(90deg, rgba(213,218,242,0.98), rgba(255,255,255,0.85)) !important;
  }
  #about .social-card .social-summary:hover{
    background:linear-gradient(90deg, rgba(252,224,234,0.98), rgba(255,255,255,0.85)) !important;
  }
  #about .relation-card .relation-summary:hover{
    background:linear-gradient(90deg, rgba(247,236,208,0.98), rgba(255,255,255,0.85)) !important;
  }

  /* 社群連結 hover 從右滑出追蹤數（資料來自試算表「社群數據」分頁） */
  #about .social-link{position:relative; overflow:hidden;}
  .social-follow{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:14px;
    border-radius:inherit;
    font-size:12px;
    font-weight:900;
    letter-spacing:.05em;
    color:#fff;
    background:linear-gradient(270deg, rgba(50,44,76,0.96) 0%, rgba(70,60,106,0.88) 42%, rgba(70,60,106,0) 78%);
    opacity:0;
    transform:translateX(26px);
    pointer-events:none;
    white-space:nowrap;
    transition:transform .3s cubic-bezier(.22,.8,.36,1), opacity .3s ease;
  }
  #about .social-link:hover .social-follow{
    transform:translateX(0);
    opacity:1;
  }


  /* ---------- ABOUT 角色名片（深色個人卡風格） ---------- */
  .profile-hero-name{
    font-family:'Noto Serif SC',serif;
    font-size:30px;
    font-weight:900;
    letter-spacing:.14em;
    background:linear-gradient(120deg, #FFFFFF 0%, #D5DAF2 45%, #F2A7C3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:6px;
  }
  .profile-hero-sub{
    font-family:'Cinzel','Noto Serif SC',serif;
    color:#9FE0E8;
    font-size:12px;
    font-weight:800;
    letter-spacing:.32em;
    margin-bottom:16px;
  }
  .profile-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:16px;
  }
  .profile-stat{
    padding:12px 10px 10px;
    border-radius:14px;
    background:rgba(255,255,255,0.22);
    border:1px solid rgba(255,255,255,0.34);
    box-shadow:0 8px 20px rgba(30,28,48,0.18);
    backdrop-filter:blur(2px);
  }
  .profile-stat-label{
    color:#F5B8CC;
    font-size:11px;
    font-weight:900;
    letter-spacing:.22em;
    margin-bottom:5px;
  }
  .profile-stat-value{
    color:#FFFFFF;
    font-family:'Noto Serif SC',serif;
    font-size:24px;
    font-weight:900;
    letter-spacing:.06em;
    text-shadow:0 2px 8px rgba(30,28,48,0.35);
  }
  .profile-quote{
    position:relative;
    text-align:left;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,0.93);
    color:#4F5471;
    font-size:13px;
    font-weight:700;
    line-height:1.8;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
  }
  .profile-quote::before{
    content:"";
    position:absolute;
    top:-7px;
    left:26px;
    width:14px;
    height:14px;
    background:rgba(255,255,255,0.93);
    transform:rotate(45deg);
  }


  /* ---------- 深色框架（深＝框架：側欄／刊頭／頁尾；淺＝內容：卡片／作品） ---------- */
  /* 側欄：桌機（auto-collapse 用 ::after 畫底） */
  @media (min-width:761px){
    .sidebar.auto-collapse::after{
      background:linear-gradient(180deg, rgba(44,42,66,0.94), rgba(58,54,88,0.90));
      border-right:1px solid rgba(255,255,255,0.12);
      box-shadow:8px 0 30px rgba(30,28,48,0.30) !important;
    }
    .sidebar.auto-collapse:hover::after,
    .sidebar.auto-collapse:focus-within::after{
      box-shadow:14px 0 38px rgba(30,28,48,0.40) !important;
    }
  }
  /* 側欄：手機底部導覽列 */
  @media (max-width:760px){
    .sidebar{
      background:linear-gradient(0deg, rgba(44,42,66,0.96), rgba(58,54,88,0.92)) !important;
      border-top:1px solid rgba(255,255,255,0.14) !important;
      box-shadow:0 -10px 30px rgba(30,28,48,0.35) !important;
    }
  }
  .brand{border-bottom-color:rgba(255,255,255,0.12);}
  .brand-sub{color:rgba(228,230,245,0.62) !important;}
  /* LOGO 維持原始配色，改墊淺色底板襯托（貼紙風） */
  .brand-mark.logo-mark{
    background:rgba(255,255,255,0.94);
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 0 3px rgba(240,163,190,0.45), 0 6px 16px rgba(30,28,48,0.35);
  }
  .brand-logo-img{padding:3px;}
  .brand-title-img{
    filter:
      drop-shadow(1px 0 0 rgba(255,255,255,0.96))
      drop-shadow(-1px 0 0 rgba(255,255,255,0.96))
      drop-shadow(0 1px 0 rgba(255,255,255,0.96))
      drop-shadow(0 -1px 0 rgba(255,255,255,0.96))
      drop-shadow(0 0 3px rgba(255,255,255,0.55));
  }
  .navbtn{color:rgba(228,230,245,0.72) !important;}
  .navbtn:hover{background:rgba(255,255,255,0.08) !important; color:#fff !important;}
  .navbtn.active{
    background:linear-gradient(95deg, rgba(240,163,190,0.24), rgba(120,131,191,0.20)) !important;
    color:#F5B8CC !important;
  }
  .navbtn.active::before{background:linear-gradient(180deg, #F2A7C3, #7883BF) !important;}

  /* 側欄底部 BGM 鈕 */
  .sidebar-bgm{border-top-color:rgba(255,255,255,0.14);}
  .bgm-toggle{
    background:rgba(255,255,255,0.10) !important;
    border-color:rgba(255,255,255,0.22) !important;
    color:#E4E6F5 !important;
  }
  .bgm-toggle:hover{background:rgba(255,255,255,0.18) !important; box-shadow:none !important;}
  .bgm-toggle.playing{
    background:linear-gradient(95deg, #F2A7C3, #7883BF) !important;
    border-color:transparent !important;
    color:#fff !important;
  }

  /* 頁尾深色細帶（與刊頭呼應） */
  .site-foot{
    border-top:none;
    margin:60px -56px 0;
    padding:22px 56px 16px;
    background:
      radial-gradient(circle at 88% 0%, rgba(240,163,190,0.20), transparent 46%),
      linear-gradient(115deg, rgba(44,42,66,0.86), rgba(58,54,88,0.78) 55%, rgba(74,56,84,0.76));
  }
  .site-foot-line{color:#F5B8CC; text-shadow:none;}
  .site-foot-sub{color:rgba(228,230,245,0.68);}
  @media (max-width:760px){
    .site-foot{margin:44px -20px 0; padding:20px 20px 14px;}
  }

  /* 浮動元件深色統一：回頂端鈕 */
  .back-to-top{
    background:linear-gradient(180deg, rgba(44,42,66,0.94), rgba(58,54,88,0.92)) !important;
    border-color:rgba(255,255,255,0.22) !important;
    color:#F5B8CC !important;
    box-shadow:0 14px 28px rgba(30,28,48,0.35);
  }
  .back-to-top:hover{
    background:linear-gradient(180deg, rgba(58,54,88,0.98), rgba(74,56,84,0.94)) !important;
  }

  /* 首頁主視覺：指定橫幅插畫 + 右上半透明 Logo */
  #home .hero-card{
    position:relative;
    min-height:clamp(300px, 38vw, 620px);
    padding:0;
    overflow:hidden;
    background:
      linear-gradient(90deg, rgba(24,36,65,0.03), rgba(24,36,65,0.10)),
      url('./images/03-fullbody-normal-detailed-color-detailed-bg-horizontal-02.png') 35% top / cover no-repeat !important;
    border-color:rgba(255,255,255,0.22);
    box-shadow:0 22px 50px rgba(52,54,79,0.28);
  }


  /* ---------- 關係介紹：單人滿版圖卡 + hover 從右滑出立繪 ---------- */
  .relation-person-card{
    position:relative;
    overflow:hidden;
    min-height:150px;
    padding:18px clamp(150px, 32%, 400px) 16px 20px !important;
    border-radius:18px !important;
    /* 淡色貼紙風（跟首頁委託橫幅同一套）：淡底＋圖案從右邊透出來 */
    border:1px solid #e3d9ea !important;
    background:#f6f1f8 !important;
    box-shadow:0 10px 24px rgba(102,90,156,0.14) !important;
  }
  .relation-person-card::before{display:none !important;}
  .relation-person-card:not(.has-figure){padding-right:20px !important;}
  .relation-card-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:url('./images/00-special-bg-square.png') center/cover no-repeat;
  }
  /* 各分類專屬底圖：把對應檔名的圖放進 images 資料夾即自動生效；
     圖檔尚未存在時，會自動顯示下層的預設場景圖，不會破圖。 */
  .relation-theme-family .relation-card-bg,
  .relation-theme-friends .relation-card-bg,
  .relation-theme-cats .relation-card-bg,
  .relation-theme-lover .relation-card-bg{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .relation-theme-family .relation-card-bg{
    background-image:url('./images/09-relation-bg-family.png'), url('./images/00-special-bg-square.png');
  }
  .relation-theme-friends .relation-card-bg{
    background-image:url('./images/09-relation-bg-friends.png'), url('./images/00-special-bg-square.png');
  }
  .relation-theme-cats .relation-card-bg{
    background-image:url('./images/09-relation-bg-cats.png'), url('./images/00-special-bg-square.png');
  }
  .relation-theme-lover .relation-card-bg{
    background-image:url('./images/09-relation-bg-lover.png'), url('./images/00-special-bg-square.png');
  }
  .relation-card-bg::after{
    content:"";
    position:absolute;
    inset:0;
    /* 左邊文字區墊一層淡光讓字讀得清楚，越往右越透，底圖圖案在右半邊露出來 */
    background:linear-gradient(90deg, rgba(251,248,252,0.92) 0%, rgba(251,248,252,0.82) 42%, rgba(251,248,252,0.42) 72%, rgba(251,248,252,0.10) 100%);
  }
  .relation-person-inner{position:relative; z-index:1;}
  .relation-person-card .relation-person-title{color:#2f2846 !important;}
  .relation-person-card .relation-person-title .spark{color:#e58aa8 !important; filter:none;}
  .relation-person-card .relation-detail-key{color:#b35d7a !important;}
  .relation-person-card .relation-detail-value{
    color:#4a3f74 !important;
    text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,0.9);
  }
  .relation-person-card .relation-note-line{color:#5d5470 !important; text-shadow:0 0 2px #fff, 0 0 6px rgba(255,255,255,0.9);}
  .relation-person-card .relation-detail-item{border-top-color:rgba(102,90,156,0.16) !important;}
  .relation-person-card .relation-link{
    color:#8d6650 !important;
    border:1.5px solid #e4d2c4 !important;
    background:#fff !important;
    box-shadow:0 2px 0 rgba(140,104,82,0.18);
  }
  .relation-person-card .relation-link:hover{color:#b35d7a !important; border-color:#efc3d2 !important;}
  .relation-hover-figure{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    z-index:2;
    height:100%;
    width:auto;
    max-width:52%;
    object-fit:contain;
    object-position:right bottom;
    opacity:0;
    transform:translateX(64px);
    transition:transform .4s cubic-bezier(.22,.8,.36,1), opacity .3s ease;
    pointer-events:none;
    filter:drop-shadow(-4px 6px 12px rgba(90,64,52,0.22));
  }
  .relation-person-card:hover .relation-hover-figure{
    opacity:1;
    transform:translateX(0);
  }
  @media (hover:none){
    .relation-hover-figure{opacity:1; transform:none;}
  }
  @media (max-width:760px){
    .relation-person-card{padding:16px clamp(110px, 38%, 190px) 14px 16px !important;}
  }


  /* ---------- 關係介紹：直向堆疊的頁內展開橫條 ---------- */
  .relation-inline-list{
    display:grid;
    gap:12px;
  }
  .relation-inline{
    border:1px solid rgba(120,131,191,0.28);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(242,244,255,0.72));
    overflow:hidden;
    box-shadow:0 10px 24px rgba(120,131,191,0.10);
  }
  .relation-inline-summary{
    list-style:none;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 18px;
    transition:background .2s ease;
  }
  .relation-inline-summary::-webkit-details-marker{display:none;}
  .relation-inline-summary:hover{background:rgba(213,218,242,0.55);}
  .relation-inline[open] .relation-inline-summary{
    background:rgba(213,218,242,0.45);
    border-bottom:1px solid rgba(120,131,191,0.20);
  }
  .relation-inline-title{
    color:#4F5471;
    font-size:15px;
    font-weight:900;
    letter-spacing:.10em;
  }
  .relation-inline-sub{
    font-family:'Cinzel','Noto Serif SC',serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    color:var(--text-faint);
  }
  .relation-inline-body{
    padding:14px 16px 16px;
    display:grid;
    gap:14px;
  }
  /* 有人物專屬底圖的卡片：加高讓底圖露出更多構圖（寬螢幕時尤其明顯） */
  .relation-person-card.has-custom-bg{
    min-height:340px;
    display:flex;
    align-items:center;
  }
  .relation-person-card.has-custom-bg .relation-person-inner{
    flex:1;
    min-width:0;
  }
  @media (max-width:760px){
    .relation-person-card.has-custom-bg{min-height:260px;}
  }


  /* ---------- 新功能樣式：排程查詢、問答牆、燈箱委託鈕 ---------- */
  .schedule-search-row{margin:0 0 14px;}
  .schedule-search-input{
    max-width:400px;
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(120,131,191,0.32);
  }

  .qa-wall-title{
    font-family:'Noto Serif SC',serif;
    font-size:18px;
    color:var(--accent);
    margin-bottom:14px;
  }
  .qa-wall-list{display:grid; gap:10px;}
  .qa-wall-asker{
    margin-top:8px;
    color:var(--text-faint);
    font-size:12px;
    text-align:right;
  }

  /* 燈箱委託按鈕：縮成小膠囊放在右下（複製連結右側），hover 變漸層實心 */
  .lightbox-commission-mini{
    border:1.5px solid rgba(120,131,191,0.45);
    background:rgba(120,131,191,0.10);
    color:#717BBC;
  }
  .lightbox-commission-mini:hover{
    background:linear-gradient(95deg, #7883BF, #F2A7C3);
    color:#fff;
    border-color:transparent;
  }

  #refImages{padding:10px 14px; cursor:url('images/cursors/sora-link-select.cur'), pointer;}
  #refImages::file-selector-button{
    border:none;
    border-radius:999px;
    padding:6px 14px;
    margin-right:10px;
    background:linear-gradient(95deg, #7883BF, #9BA0BF);
    color:#fff;
    font-family:'Noto Serif SC',serif;
    font-size:12.5px;
    font-weight:900;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
  }


  /* ---------- 關於頁三張摺疊卡質感調整：白玻璃 + 左緣主題色暈光 ---------- */
  #about .intro-collapse .intro-summary{
    background:
      radial-gradient(circle at 0% 50%, rgba(120,131,191,0.20), transparent 40%),
      linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)) !important;
  }
  #about .social-card .social-summary{
    background:
      radial-gradient(circle at 0% 50%, rgba(240,163,190,0.22), transparent 40%),
      linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)) !important;
  }
  #about .relation-card .relation-summary{
    background:
      radial-gradient(circle at 0% 50%, rgba(230,194,114,0.24), transparent 40%),
      linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  }
  #about .intro-collapse .intro-summary:hover{
    background:
      radial-gradient(circle at 0% 50%, rgba(120,131,191,0.30), transparent 46%),
      linear-gradient(90deg, rgba(255,255,255,0.97), rgba(255,255,255,0.82)) !important;
  }
  #about .social-card .social-summary:hover{
    background:
      radial-gradient(circle at 0% 50%, rgba(240,163,190,0.32), transparent 46%),
      linear-gradient(90deg, rgba(255,255,255,0.97), rgba(255,255,255,0.82)) !important;
  }
  #about .relation-card .relation-summary:hover{
    background:
      radial-gradient(circle at 0% 50%, rgba(230,194,114,0.34), transparent 46%),
      linear-gradient(90deg, rgba(255,255,255,0.97), rgba(255,255,255,0.82)) !important;
  }


  /* ---------- 蜜罐欄位（機器人陷阱，人類看不到） ---------- */
  .hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }

  /* ---------- 燈箱張數與複製連結 ---------- */
  .lightbox-share{
    border:1px solid rgba(120,131,191,0.30);
    background:#fff;
    color:#5E6078;
    border-radius:999px;
    padding:7px 11px;
    font-family:'Noto Serif SC',serif;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
  }
  .lightbox-share:hover{background:#F2F4FF; border-color:rgba(120,131,191,0.5); transform:translateY(-1px);}

  /* ---------- 排程進度條 ---------- */
  .sched-status{display:grid; gap:6px; justify-items:start;}
  .sched-progress{
    width:112px;
    height:5px;
    border-radius:99px;
    background:rgba(120,131,191,0.18);
    overflow:hidden;
  }
  .sched-progress i{
    display:block;
    height:100%;
    border-radius:99px;
    background:linear-gradient(90deg, #7883BF, #E8A0B8);
    transition:width .4s ease;
  }
  .sched-progress.stopped i{background:rgba(160,148,160,0.6);}
  .pill-stop{background:rgba(201,112,136,0.16); color:#B4556F;}


  /* ---------- 首頁下方公告與縮小版小屋統計 ---------- */
  .home-lower-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.65fr) minmax(260px, .65fr);
    gap:20px;
    align-items:stretch;
    margin-top:20px;
  }
  .home-lower-grid .announce-history{margin:0; min-width:0;}
  #home .home-announcement-card,
  #home .hero-stats-card{
    min-height:360px;
    height:100%;
    border-color:rgba(255,255,255,0.16);
    background:
      radial-gradient(circle at 88% 6%, rgba(240,163,190,0.20), transparent 44%),
      radial-gradient(circle at 8% 96%, rgba(120,131,191,0.28), transparent 52%),
      linear-gradient(150deg, rgba(46,42,68,0.92), rgba(58,50,84,0.88) 60%, rgba(70,54,86,0.88)) !important;
    box-shadow:0 22px 50px rgba(52,54,79,0.34);
  }
  #home .hero-stats-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:11px;
    padding:20px 22px;
    position:relative;
    overflow:hidden;
  }
  .hero-stats-title{
    font-size:12px;
    font-weight:900;
    letter-spacing:.24em;
    color:#F5B8CC;
  }
  .hero-stats-chart{
    width:100%;
    max-width:300px;
    height:auto;
    display:block;
    margin:0 auto;
    padding:7px 9px 2px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.08);
  }
  .hero-stats-list{display:flex; flex-direction:column; gap:7px;}
  .hero-stats-item{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    font-size:12.5px;
    padding-bottom:6px;
    border-bottom:1px dashed rgba(255,255,255,0.14);
  }
  .hero-stats-item:last-child{border-bottom:none; padding-bottom:0;}
  .hero-stats-label{color:rgba(240,241,250,0.72); letter-spacing:.08em; white-space:nowrap;}
  .hero-stats-value{
    color:#FFFFFF;
    font-weight:900;
    font-size:16px;
    font-family:'Noto Serif SC',serif;
    letter-spacing:.02em;
  }

  @media (max-width:760px){
    #home .hero-card{
      min-height:clamp(230px, 68vw, 330px);
      background-position:31% center;
    }
    .home-lower-grid{grid-template-columns:1fr;}
    #home .home-announcement-card,
    #home .hero-stats-card{min-height:360px;}
  }


  /* ---------- 表單鎖定・作品保護・委託流程美化 ---------- */
  .btn:disabled{opacity:.55; cursor:not-allowed; filter:grayscale(.3);}
  img{-webkit-user-drag:none;}
  #commission .flow-step .dot{
    width:36px;
    height:36px;
    background:linear-gradient(135deg, #7883BF, #F2A7C3);
    color:#fff;
    font-weight:900;
    border:2px solid rgba(255,255,255,0.75);
    box-shadow:0 10px 22px rgba(120,131,191,0.30);
    transition:transform .2s ease;
  }
  #commission .flow-step:hover .dot{transform:scale(1.12);}
  #commission .flow-step:not(:last-child)::after{
    top:18px;
    left:calc(50% + 32px);
    height:2px;
    background:linear-gradient(90deg, rgba(120,131,191,0.45), rgba(242,167,195,0.45));
  }


  /* ---------- 標籤數量・縮圖載入微光 ---------- */
  .multi-chip .chip-count{
    margin-left:5px;
    font-size:10.5px;
    font-weight:700;
    opacity:.62;
  }
  .gallery-img-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,0.60) 50%, transparent 68%);
    background-size:220% 100%;
    animation:thumbShimmer 1.3s linear infinite;
    pointer-events:none;
  }
  .gallery-img-wrap.img-done::before,
  .gallery-img-wrap.img-done::after{display:none;}
  @keyframes thumbShimmer{
    from{background-position:130% 0;}
    to{background-position:-130% 0;}
  }
  @media (prefers-reduced-motion: reduce){
    .gallery-img-wrap::after{animation:none; background:none;}
  }

  /* 手機：表格上方提示可左右滑動 */
  @media (max-width:760px){
    .table-card::before{
      content:"↔ 表格可左右滑動查看完整欄位";
      display:block;
      padding:12px 18px 0;
      font-size:11.5px;
      color:var(--text-faint);
      letter-spacing:.05em;
    }
  }


  /* ---------- 頁面切換淡入轉場 ---------- */
  @media (prefers-reduced-motion: no-preference){
    .page.active{animation:pageIn .3s ease both;}
    @keyframes pageIn{
      from{opacity:0; transform:translateY(10px);}
      to{opacity:1; transform:translateY(0);}
    }
  }


  /* ---------- 日常日誌 ---------- */
  .diary-cats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:22px;
  }
  .diary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
    gap:18px;
  }
  .diary-cell{
    display:flex;
    flex-direction:column;
    padding:0;
    text-align:left;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    overflow:hidden;
    border:none;
    font-family:'Noto Serif SC',serif;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .diary-cell:hover{transform:translateY(-4px);}
  .diary-cell-imgwrap{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#E7EAF9;
  }
  .diary-cell-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    transition:transform .35s ease;
  }
  .diary-cell:hover .diary-cell-img{transform:scale(1.04);}
  /* 只改變圖片的取景，圖片框保持原尺寸，浮水印可繼續覆蓋整個縮圖。 */
  .diary-cell .diary-portrait-img,
  .diary-cell:hover .diary-portrait-img,
  .diary-rec-imgwrap .diary-portrait-img{
    object-fit:fill;
    transform-origin:0 0;
    transform:translate(var(--diary-crop-x), var(--diary-crop-y)) scale(var(--diary-crop-sx), var(--diary-crop-sy));
    transition:none;
  }
  .diary-cell-body{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 14px 14px;
  }
  .diary-cell-date{
    font-size:11.5px;
    font-weight:900;
    letter-spacing:.08em;
    color:var(--accent);
  }
  .diary-cell-title{
    font-size:13.5px;
    font-weight:700;
    color:var(--text);
    line-height:1.6;
  }

  /* 日誌閱讀視窗：一整張日記卡（置頂標題列 → 漫畫 → 內文 → 翻篇列） */
  .diary-lb-card{
    width:auto;
    min-width:min(720px, 94vw);
    max-width:min(1120px, 96vw);
    max-height:92vh;
    overflow-y:auto;
    background:
      radial-gradient(circle at 12% 96%, rgba(120,131,191,0.20), transparent 50%),
      linear-gradient(160deg, rgba(46,42,68,0.98), rgba(58,50,84,0.97) 60%, rgba(70,54,86,0.97));
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.28);
    box-shadow:0 30px 80px rgba(20,18,34,0.55);
  }
  .diary-lb-body{
    display:flex;
    align-items:stretch;
  }
  .diary-lb-body .diary-lb-img{
    flex:0 1 auto;
    min-width:0;
    width:auto;
    max-width:100%;
    max-height:82vh;
    align-self:center;
    object-fit:contain;
    border-radius:12px;
    margin:16px 10px 16px 16px;
  }
  .diary-lb-toprow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .diary-lb-titlebox::after{
    content:"";
    display:block;
    width:100%;
    height:2.5px;
    border-radius:99px;
    margin-top:10px;
    background:linear-gradient(90deg, #7883BF, #F2A7C3 60%, rgba(242,167,195,0));
  }
  .diary-side-label{
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.22em;
    color:#F5B8CC;
    margin-bottom:8px;
  }
  .diary-lb-stats{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    padding-top:4px;
  }
  .diary-lb-stats[hidden]{display:none !important;}
  .diary-stat{
    font-size:12.5px;
    font-weight:900;
    color:#5E6078;
    letter-spacing:.05em;
  }
  .diary-like-btn{
    border:1.5px solid rgba(242,167,195,0.65);
    background:#fff;
    color:#D2849E;
    border-radius:999px;
    padding:6px 14px;
    font-family:'Noto Serif SC',serif;
    font-size:12px;
    font-weight:900;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .diary-like-btn:hover{transform:translateY(-1px);}
  .diary-like-btn.liked{
    background:linear-gradient(95deg, #F2A7C3, #E58FB1);
    color:#fff;
    border-color:transparent;
  }
  .diary-lb-section{
    padding:16px 20px 6px;
    border-top:1px dashed rgba(255,255,255,0.18);
  }
  .diary-lb-section[hidden]{display:none !important;}
  .diary-lb-cast{
    display:flex;
    flex-wrap:wrap;
    gap:12px 26px;
  }
  .diary-cast-item{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .diary-cast-item img{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    object-position:top;
    border:2px solid rgba(120,131,191,0.40);
    background:#F2F4FF;
    flex-shrink:0;
  }
  .diary-cast-name{font-size:12.5px; font-weight:900; color:#FFFFFF;}
  .diary-cast-intro{font-size:11.5px; color:rgba(240,241,250,0.62); line-height:1.65;}
  .diary-lb-related{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .diary-lb-related{gap:14px;}
  .diary-rec-item{
    width:96px;
    padding:0;
    border:none;
    background:none;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    text-align:left;
    font-family:'Noto Serif SC',serif;
    transition:transform .2s ease;
  }
  .diary-rec-item:hover{transform:translateY(-3px);}
  .diary-rec-imgwrap{
    position:relative;
    display:block;
    width:96px;
    height:96px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(120,131,191,0.35);
  }
  .diary-rec-imgwrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    display:block;
  }
  .diary-rec-badge{
    position:absolute;
    top:6px;
    left:6px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,255,255,0.90);
    color:#8B93C8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
  }
  .diary-rec-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-top:6px;
    font-size:11.5px;
    font-weight:700;
    color:rgba(240,241,250,0.80);
    line-height:1.5;
  }
  .diary-lb-comment{align-self:flex-start;}
  .diary-lb-date{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    color:#B4B8CF;
    margin-top:4px;
  }
  .diary-lb-title{
    font-family:'Noto Serif SC',serif;
    font-size:22px;
    font-weight:900;
    color:var(--text);
    line-height:1.5;
  }
  .diary-lb-img{
    display:block;
    width:100%;
    height:auto;
  }
  .diary-lb-text{
    flex:1 1 324px;
    min-width:280px;
    max-width:360px;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px;
  }
  @media (max-width:860px){
    .diary-lb-body{flex-direction:column;}
    .diary-lb-text{position:static; flex:none; width:100%; max-height:none; overflow:visible; border-left:none; padding:16px 20px 4px;}
  }
  .diary-lb-note{
    font-size:13.5px;
    line-height:2;
    color:var(--text-dim);
    white-space:pre-line;
    margin:0;
  }
  .diary-lb-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:12px 16px 16px;
  }
  .diary-lb-navbtn{
    max-width:36%;
    overflow:hidden;
    text-overflow:ellipsis;
  }


  /* ---------- 首頁公告預覽與完整公告頁 ---------- */
  .announce-history{
    padding:0;
    overflow:hidden;
  }
  .home-announcement-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px 22px;
  }
  .announce-history-head,
  .announcement-page-head{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .announce-history-title{
    font-family:'Noto Serif SC',serif;
    font-size:15.5px;
    font-weight:900;
    color:var(--accent);
  }
  .announce-history-count{
    font-size:11.5px;
    font-weight:900;
    color:#5E6078;
    background:rgba(120,131,191,0.14);
    border-radius:999px;
    padding:3px 10px;
  }
  #home .announce-history-title{color:#F5B8CC;}
  #home .announce-history-count{
    color:rgba(255,255,255,.78);
    background:rgba(255,255,255,.12);
  }
  .announce-history-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  #home .announce-history-list{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:10px;
    min-height:0;
    max-height:none;
    overflow:hidden;
  }
  .announce-history-item{
    padding:12px 2px;
    border-top:1px dashed rgba(120,131,191,0.24);
  }
  .announce-history-item:first-child{border-top:none;}
  .announce-history-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
  }
  .announce-history-new{
    font-size:10.5px;
    font-weight:900;
    color:#fff;
    background:linear-gradient(95deg, #F2A7C3, #7883BF);
    border-radius:999px;
    padding:2px 9px;
    letter-spacing:.08em;
  }
  .announce-history-date{
    font-size:11.5px;
    font-weight:900;
    letter-spacing:.06em;
    color:#C29A5B;
  }
  .announce-history-text{
    font-size:13.5px;
    line-height:1.9;
    color:var(--text-dim);
    white-space:pre-line;
  }
  #home .announcement-preview-item{
    display:flex;
    flex:1 1 0;
    min-height:0;
    flex-direction:column;
    justify-content:center;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
  }
  #home .announcement-preview-item:first-child{
    border:1px solid rgba(255,255,255,.12);
  }
  #home .announcement-preview-item .announce-history-text{
    display:-webkit-box;
    overflow:hidden;
    color:rgba(246,246,252,.88);
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .announcement-more{
    align-self:flex-end;
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:8px 16px;
    background:rgba(255,255,255,.12);
    transition:background .2s ease, transform .2s ease;
  }
  .announcement-more:hover{
    color:#fff;
    background:rgba(255,255,255,.2);
    transform:translateY(-1px);
  }
  .announcement-page-card{padding:24px;}
  .announcement-page-list{
    list-style:none;
    margin:14px 0 0;
    padding:0;
  }
  .announcement-page-list .announce-history-item{padding:18px 4px;}
  .announcement-state{
    display:grid;
    flex:1;
    min-height:80px;
    place-items:center;
    color:var(--text-faint);
    text-align:center;
  }
  #home .announcement-state{color:rgba(240,241,250,.68);}

  @media (max-width:760px){
    .announcement-page-card{padding:18px;}
  }


  /* ---------- 作品標籤細分（子標籤列） ---------- */
  .tag-sub-row[hidden]{display:none !important;}
  .tag-sub-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
    padding:10px 14px;
    border-radius:4px 12px 12px 4px;
    border-left:3px solid #F2A7C3;
    background:linear-gradient(90deg, rgba(242,167,195,0.14), rgba(242,167,195,0.04) 60%, transparent);
  }
  .tag-sub-label{
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    color:#D2849E;
    margin-right:2px;
  }
  .tag-sub-chip{
    padding:7px 14px;
    font-size:12px;
  }


  /* ---------- 日誌年月分組 ---------- */
  .diary-months{
    display:flex;
    flex-direction:column;
    gap:34px;
  }
  .diary-month-head{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Noto Serif SC',serif;
    font-size:17px;
    font-weight:900;
    color:var(--accent);
    margin:0 0 14px;
  }
  .diary-month-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg, rgba(120,131,191,0.34), transparent);
  }
  .diary-month-cnt{
    font-family:'Noto Serif SC',serif;
    font-size:11.5px;
    font-weight:900;
    letter-spacing:.08em;
    color:#8B93C8;
    white-space:nowrap;
  }


  /* ---------- 日誌留言板與卡片統計 ---------- */
  .diary-cell-meta{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
  }
  .diary-cell-stats{
    font-size:11px;
    font-weight:900;
    letter-spacing:.05em;
    color:#8B93C8;
    white-space:nowrap;
  }
  .diary-lb-comments{
    padding-top:12px;
    border-top:1px dashed rgba(255,255,255,0.20);
  }
  .diary-lb-comments[hidden]{display:none !important;}
  .diary-cm-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:10px 0 14px;
    max-height:300px;
    overflow-y:auto;
  }
  .diary-cm-item{
    padding:10px 14px;
    border-radius:12px;
    background:rgba(120,131,191,0.07);
  }
  .diary-cm-head{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:3px;
  }
  .diary-cm-name-label{font-size:12px; font-weight:900; color:var(--accent);}
  .diary-cm-time{font-size:10.5px; color:#A9AECF;}
  .diary-cm-body{font-size:13px; line-height:1.85; color:var(--text-dim); white-space:pre-line;}
  .diary-cm-empty{font-size:12.5px; color:var(--text-faint); padding:4px 2px;}
  .diary-cm-form{display:flex; flex-direction:column; gap:10px;}
  .diary-cm-text{min-height:72px;}
  .diary-cm-row{display:flex; gap:8px;}
  .diary-cm-name{flex:1; min-width:0;}
  .diary-cm-submit{padding:9px 16px; font-size:12.5px; flex-shrink:0;}


  /* ---------- 作品燈箱（日誌同款卡片） ---------- */
  .works-lb-imgcol{
    flex:0 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 10px 16px 16px;
  }
  .works-lb-imgcol img{
    max-width:100%;
    max-height:78vh;
    object-fit:contain;
    border-radius:10px;
    display:block;
  }
  .works-commission{
    align-self:flex-start;
    margin-top:2px;
  }
  @media (max-width:860px){
    .works-lb-imgcol{padding:12px 12px 0;}
    .works-lb-imgcol img{max-height:56vh;}
  }


  /* ---------- 燈箱右欄深色化（呼應網站深色框架） ---------- */
  .diary-lb-text{
    background:
      radial-gradient(circle at 88% 4%, rgba(240,163,190,0.16), transparent 44%),
      linear-gradient(165deg, rgba(46,42,68,0.97), rgba(58,50,84,0.96) 60%, rgba(70,54,86,0.96));
    border-left:none;
  }
  .diary-lb-text .diary-lb-title{color:#FFFFFF;}
  .diary-lb-text .diary-lb-date{color:rgba(240,241,250,0.55);}
  .diary-lb-text .diary-lb-note{color:rgba(240,241,250,0.86);}
  .diary-lb-text .diary-side-label{color:#F5B8CC;}
  .diary-lb-text .diary-stat{color:rgba(240,241,250,0.88);}
  .diary-lb-text .diary-cm-item{background:rgba(255,255,255,0.10);}
  .diary-lb-text .diary-cm-name-label{color:#F5B8CC;}
  .diary-lb-text .diary-cm-time{color:rgba(240,241,250,0.50);}
  .diary-lb-text .diary-cm-body{color:rgba(240,241,250,0.88);}
  .diary-lb-text .diary-cm-empty{color:rgba(240,241,250,0.60);}
  .diary-lb-text .item-tag{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.26);
    color:#F0F1FA;
  }
  .diary-lb-foot-mid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
  }


  /* ---------- 關於頁摺疊標題卡：深色精緻版 ---------- */
  #about .intro-collapse,
  #about .social-card.social-collapse,
  #about .relation-card{
    border:1px solid rgba(255,255,255,0.34) !important;
    border-left:3px solid rgba(201,137,134,0.90) !important;
    box-shadow:0 14px 34px rgba(52,54,79,0.30) !important;
    overflow:hidden;
  }

  #about .intro-collapse .intro-summary{
    background:linear-gradient(115deg, rgba(46,42,68,0.95), rgba(58,50,84,0.92) 55%, rgba(66,54,84,0.90)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }
  #about .social-card .social-summary{
    background:linear-gradient(115deg, rgba(46,42,68,0.95), rgba(58,50,84,0.92) 55%, rgba(66,54,84,0.90)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }
  #about .relation-card .relation-summary{
    background:linear-gradient(115deg, rgba(46,42,68,0.95), rgba(58,50,84,0.92) 55%, rgba(66,54,84,0.90)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }
  #about .intro-collapse .intro-summary:hover{
    background:linear-gradient(115deg, rgba(54,49,80,0.97), rgba(68,59,96,0.94) 55%, rgba(76,62,94,0.92)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }
  #about .social-card .social-summary:hover{
    background:linear-gradient(115deg, rgba(54,49,80,0.97), rgba(68,59,96,0.94) 55%, rgba(76,62,94,0.92)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }
  #about .relation-card .relation-summary:hover{
    background:linear-gradient(115deg, rgba(54,49,80,0.97), rgba(68,59,96,0.94) 55%, rgba(76,62,94,0.92)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }

  #about .intro-summary .title-zh,
  #about .social-summary .title-zh,
  #about .relation-summary .title-zh{color:#FFFFFF !important;}
  #about .intro-summary .title-en,
  #about .social-summary .title-en,
  #about .relation-summary .title-en{color:#C7CDF2 !important;}
  #about .intro-summary .title-dot,
  #about .social-summary .title-dot,
  #about .relation-summary .title-dot{color:#F5B8CC !important;}
  #about .intro-summary-title::before,
  #about .social-card .social-summary-title::before,
  #about .relation-summary-title::before{color:#F5B8CC !important;}
  #about .intro-summary-state,
  #about .social-summary-state,
  #about .relation-summary-state{color:rgba(240,241,250,0.62) !important;}


  /* ---------- 日誌標題「日常」徽章 ---------- */
  .diary-title-badge{
    display:inline-block;
    vertical-align:middle;
    margin-right:9px;
    padding:3px 11px;
    border-radius:9px;
    background:linear-gradient(95deg, #7883BF, #F2A7C3);
    color:#fff;
    font-family:'Noto Serif SC',serif;
    font-size:12.5px;
    font-weight:900;
    letter-spacing:.14em;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(120,131,191,0.35);
  }


  /* ---------- 燈箱底部按鈕：深色玻璃質感 ---------- */
  .diary-lb-foot{
    padding:14px 18px 18px;
    border-top:1px dashed rgba(255,255,255,0.16);
  }
  .diary-lb-foot .lightbox-share{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.26);
    color:#EDEFFA;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .diary-lb-foot .lightbox-share:hover{
    background:rgba(255,255,255,0.17);
    border-color:rgba(255,255,255,0.48);
    color:#FFFFFF;
    transform:translateY(-1px);
  }
  .diary-lb-foot .lightbox-commission-mini{
    background:linear-gradient(95deg, rgba(120,131,191,0.38), rgba(242,167,195,0.38));
    border:1px solid rgba(242,167,195,0.55);
    color:#FFFFFF;
  }
  .diary-lb-foot .lightbox-commission-mini:hover{
    background:linear-gradient(95deg, #7883BF, #F2A7C3);
    border-color:transparent;
  }


  /* ---------- 日誌日期列（日期左、人氣右） ---------- */
  .diary-lb-daterow{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-top:4px;
  }
  .diary-lb-daterow .diary-lb-date{margin-top:0;}
  .diary-lb-daterow .diary-stat{
    font-size:11.5px;
    color:rgba(240,241,250,0.72);
    letter-spacing:.06em;
  }

  /* ---------- 聯絡方式頁：信箱｜問答兩欄（小白已搬到轉蛋屋） ---------- */
  #contact .contact-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr);
    max-width:none;
    align-items:start;
  }
  #contact .qa-wall{grid-column:1 / -1;}
  @media (max-width:980px){
    #contact .contact-grid{grid-template-columns:1fr;}
  }

  /* 聯絡頁信箱卡下方的主要社群（2026-10-22） */
  .contact-socials{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--border, #d6dae5); }
  .contact-socials-title{ margin-bottom:10px; color:var(--text-dim, #586377); font-size:13px; letter-spacing:.04em; }
  .contact-socials-links{ display:flex; flex-wrap:wrap; gap:8px; }
  .contact-socials-links a{
    display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
    border:1px solid #d6dae5; border-radius:999px; background:#f6f4fb;
    color:#4d427c; font-size:13px; font-weight:600; text-decoration:none;
    transition:background .2s, border-color .2s;
  }
  .contact-socials-links a:hover{ background:#ece7f8; border-color:#b8adf0; }
  /* 信箱卡和問答卡等高 */
  #contact .contact-grid{ align-items:stretch; }
  /* ---------- 斗內感謝牆 ---------- */
  .donor-wall{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed rgba(120,131,191,0.28);
  }
  .donor-wall[hidden]{display:none !important;}
  .donor-wall-title{
    font-size:11px;
    font-weight:900;
    letter-spacing:.20em;
    color:#C98986;
    text-align:center;
    margin-bottom:10px;
  }
  .donor-wall-list{
    display:block;
  }
  .donor-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
  }
  .donor-row-top{
    justify-content:center;
    align-items:flex-end;
    gap:16px;
  }
  .donor-podium{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    padding:14px 18px;
    border-radius:16px;
    border:1px solid transparent;
    text-align:center;
    min-width:116px;
    max-width:190px;
  }
  .donor-avatar{
    position:relative;
    width:54px;
    height:54px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.75);
    box-shadow:0 6px 16px rgba(52,54,79,0.18);
  }
  .donor-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    object-position:top;
  }
  /* 前三名頭貼頭飾：👑 王冠、🎀 蝴蝶結、🌸 小花，歪戴在頭貼左上 */
  .donor-crown{
    position:absolute;
    top:-13px;
    left:-9px;
    transform:rotate(-28deg);
    font-size:23px;
    line-height:1;
    filter:drop-shadow(0 2px 4px rgba(52,54,79,0.35));
  }
  .donor-crown-2{
    font-size:19px;
    top:-10px;
    left:-7px;
    transform:rotate(-22deg);
  }
  .donor-crown-3{
    font-size:19px;
    top:-10px;
    left:-7px;
    transform:rotate(-18deg);
  }
  .donor-medal{font-size:26px; line-height:1;}
  .donor-pname{
    font-size:13.5px;
    font-weight:900;
  }
  .donor-pmsg{
    font-size:11.5px;
    line-height:1.65;
    color:#8B93C8;
  }
  .rank-1{
    padding:18px 22px 16px;
    border-color:rgba(214,178,94,0.60);
    background:linear-gradient(165deg, rgba(246,226,170,0.62), rgba(255,255,255,0.78)), url('images/99-donor-card-bg-03.png') center / 170px repeat;
    box-shadow:0 10px 26px rgba(190,150,60,0.18);
  }
  .rank-1 .donor-avatar{width:72px; height:72px;}
  .rank-1 .donor-medal{font-size:36px;}
  .rank-1 .donor-pname{font-size:15.5px; color:#9A7A2E;}
  .rank-2{
    border-color:rgba(148,160,190,0.55);
    background:linear-gradient(165deg, rgba(214,221,238,0.68), rgba(255,255,255,0.74)), url('images/99-donor-card-bg-03.png') center / 170px repeat;
  }
  .rank-2 .donor-pname{color:#5E6E96;}
  .rank-3{
    border-color:rgba(205,150,102,0.50);
    background:linear-gradient(165deg, rgba(240,208,178,0.58), rgba(255,255,255,0.74)), url('images/99-donor-card-bg-03.png') center / 170px repeat;
  }
  .rank-3 .donor-pname{color:#9A6B3F;}
  .donor-row-rest{
    justify-content:center;
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed rgba(120,131,191,0.24);
  }
  .donor-row-rest .donor-item{
    padding:8px 16px;
    background:rgba(120,131,191,0.12);
    border-color:rgba(120,131,191,0.30);
  }
  .donor-row-rest .donor-name{font-size:13px; color:#5E6AA8;}
  .donor-row-rest .donor-msg{font-size:12px; color:#8B93C8;}
  .donor-item{
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    max-width:100%;
    padding:6px 13px;
    border-radius:999px;
    background:rgba(120,131,191,0.10);
    border:1px solid rgba(120,131,191,0.22);
  }
  .donor-name{
    font-size:12px;
    font-weight:900;
    color:#4E5680;
    white-space:nowrap;
  }
  .donor-count{
    margin-left:4px;
    font-size:10.5px;
    color:#C98986;
  }
  .donor-msg{
    font-size:11.5px;
    color:var(--text-faint);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:220px;
  }


  /* ---------- 支持小天獨立頁 ---------- */
  .support-hero{
    max-width:760px;
    margin:0 0 26px;
    padding:30px 34px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    border-left:3px solid rgba(201,137,134,0.90) !important;
  }
  .support-hero{gap:14px;}
  .support-hero-head{display:flex; flex-direction:column; gap:5px; align-items:center;}
  .support-hero-eyebrow{
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.26em;
    color:#C98986;
  }
  .support-hero-title{
    font-family:'Noto Serif SC',serif;
    font-size:19.5px;
    font-weight:900;
    color:#4E5680;
    margin:0;
  }
  .support-hero-text{
    font-size:14.5px;
    line-height:2;
    color:var(--text-dim);
    margin:0;
    text-align:left;
    width:100%;
  }
  .support-hero-more{font-size:13px; color:var(--text-faint);}
  /* 標題左、「快樂申請書」按鈕右；放不下時按鈕換到下一行 */
  .support-hero-top{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px 20px;
    width:100%;
  }
  .support-hero-top .donate-btn-big{flex-shrink:0; padding:12px 24px;}
  .donate-br{display:none;}
  .support-hero-note{
    font-size:11px;
    letter-spacing:.04em;
    color:var(--text-faint);
    margin-top:-6px;
  }
  .donate-btn-big{
    margin-top:0;
    padding:13px 34px;
    font-size:14.5px;
  }
  .donor-wall-card{
    max-width:900px;
    margin:0;
    padding:26px 30px;
  }
  .donor-wall-card .donor-wall{
    margin-top:0;
    padding-top:0;
    border-top:none;
  }
  .donor-wall-banner{
    display:block;
    width:100%;
    border-radius:12px;
    margin-bottom:18px;
    box-shadow:0 8px 20px rgba(52,54,79,0.16);
  }
  .donate-thanks-banner{
    display:block;
    width:100%;
    border-radius:12px;
    margin-bottom:16px;
  }
  .donor-wall-empty{
    text-align:center;
    font-size:13px;
    color:var(--text-faint);
    padding:8px 0;
  }
  .donor-wall-empty[hidden]{display:none !important;}
  #support .donor-wall-title{font-size:12.5px; margin-bottom:16px;}
  #support .donor-avatar{width:64px; height:64px;}
  #support .rank-1 .donor-avatar{width:86px; height:86px;}
  #support .rank-1 .donor-medal{font-size:42px;}
  #support .donor-medal{font-size:30px;}
  #support .donor-crown{font-size:27px; top:-15px; left:-10px;}
  #support .donor-crown-2, #support .donor-crown-3{font-size:22px; top:-12px; left:-8px;}
  #support .donor-pname{font-size:14.5px;}
  #support .rank-1 .donor-pname{font-size:16.5px;}
  #support .donor-pmsg{font-size:12.5px;}
  #support .donor-podium{min-width:140px; max-width:220px;}
  .support-guide{
    max-width:760px;
    margin:0 0 26px;
    padding:24px 28px;
  }
  .support-guide-title{
    font-family:'Noto Serif SC',serif;
    font-size:15.5px;
    font-weight:900;
    color:#4E5680;
    margin-bottom:16px;
  }
  .support-guide-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px 24px;
  }
  .guide-q{
    font-size:13.5px;
    font-weight:900;
    color:#5E6AA8;
    margin-bottom:5px;
  }
  .guide-a{
    font-size:12.5px;
    line-height:1.9;
    color:var(--text-dim);
  }
  /* 內文裡的連結（例如「委託」）：不加外框，只用粗體變色 */
  .guide-a a{
    margin:0 1px;
    color:#C98986;
    font-weight:900;
    text-decoration:none;
    transition:color .18s ease;
  }
  .guide-a a:hover{
    color:#b0605c;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .guide-note{
    margin-top:16px;
    padding-top:12px;
    border-top:1px dashed rgba(120,131,191,0.24);
    font-size:12px;
    letter-spacing:.14em;
    text-align:center;
    color:#C98986;
    font-weight:700;
  }
  .donor-wall-count{
    text-align:center;
    font-size:12px;
    color:#8B93C8;
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed rgba(120,131,191,0.24);
  }
  .donor-wall-count:empty{display:none;}
  /* ---------- 空席（虛位以待） ---------- */
  .donor-podium.seat-empty{
    border:1.5px dashed rgba(120,131,191,0.40) !important;
    background:rgba(255,255,255,0.42) !important;
    box-shadow:none !important;
    aspect-ratio:8 / 5;
    justify-content:center;
  }
  .donor-podium.seat-empty::before,
  .donor-podium.seat-empty::after{content:none;}
  .seat-empty .donor-rtitle{
    color:#8B93C8 !important;
    background:rgba(255,255,255,0.65) !important;
    border:1px dashed rgba(120,131,191,0.45) !important;
  }
  .seat-empty .donor-avatar{
    background:rgba(120,131,191,0.08);
    border:2px dashed rgba(120,131,191,0.35);
    box-shadow:none;
  }
  .seat-q{
    font-family:'Noto Serif SC',serif;
    font-size:22px;
    font-weight:900;
    color:rgba(120,131,191,0.55);
  }
  .seat-empty .donor-pname{color:#8B93C8 !important;}
  .seat-empty .donor-pcount{color:#A7AECF !important;}
  .seat-open .donor-step{
    filter:saturate(0.45);
    opacity:.72;
  }
  .seat-empty-chip{
    border:1.5px dashed rgba(120,131,191,0.40) !important;
    background:rgba(255,255,255,0.45) !important;
  }
  .seat-empty-chip .donor-name{color:#8B93C8 !important;}
  /* ---------- 前三名頭貼光環 ---------- */
  @keyframes haloSpin{to{transform:rotate(360deg);}}
  .donor-podium:not(.seat-empty) .donor-avatar{background:#fff; z-index:0;}
  .donor-podium:not(.seat-empty) .donor-avatar::before{
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
    z-index:-1;
    animation:haloSpin 7s linear infinite;
  }
  .rank-1 .donor-avatar::before{
    background:conic-gradient(from 0deg, rgba(233,196,106,0), #E9C46A 22%, rgba(255,244,214,0.45) 50%, #E9C46A 78%, rgba(233,196,106,0));
    animation-duration:5s;
  }
  .rank-2 .donor-avatar::before{
    background:conic-gradient(from 0deg, rgba(150,163,193,0), #96A3C1 25%, rgba(230,236,248,0.4) 50%, #96A3C1 75%, rgba(150,163,193,0));
  }
  .rank-3 .donor-avatar::before{
    background:conic-gradient(from 0deg, rgba(188,132,85,0), #BC8455 25%, rgba(244,222,200,0.4) 50%, #BC8455 75%, rgba(188,132,85,0));
    animation-duration:9s;
  }
  .donor-item{position:relative;}
  /* ---------- 頒獎卡 hover 翻面（桌機限定） ---------- */
  .donor-podium{perspective:640px;}
  .donor-flip{
    position:relative;
    display:grid;
    width:100%;
    flex:1;
    transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.35,.15,.25,1);
  }
  .donor-face{
    grid-area:1 / 1;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .donor-front{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    width:100%;
  }
  .donor-back{
    transform:rotateY(180deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
  }
  .has-flip .donor-face.donor-back{
    padding:0 !important;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    text-align:left;
    overflow:hidden;
  }
  .donor-back-stripe{
    display:block;
    flex-shrink:0;
    width:100%;
    height:16px;
    margin-top:10px;
    background:linear-gradient(180deg, #453F60, #5A5178 55%, #453F60);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .donor-back-body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    padding:8px 14px 10px;
    min-width:0;
  }
  .donor-back-sig{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:2px 8px;
    border-radius:3px;
    border:1px solid rgba(90,95,130,0.16);
    background:repeating-linear-gradient(180deg, #FFFFFF 0px, #FFFFFF 4px, #F0EADD 4px, #F0EADD 5px);
  }
  .donor-back-sig-name{
    font-family:'Noto Serif SC',serif;
    font-style:italic;
    font-weight:900;
    font-size:13.5px;
    color:#3E4468;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .donor-back-sig-medal{font-size:14px; flex-shrink:0;}
  .donor-back-sig-label{
    flex-shrink:0;
    font-size:7px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(90,95,130,0.62);
    margin-top:3px;
  }
  .donor-back-row{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin-top:7px;
    font-family:'Courier New',monospace;
  }
  .donor-back-no{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.07em;
    color:#4E5680;
    min-width:0;
  }
  .donor-back-sincetag{
    font-size:9px;
    font-weight:700;
    letter-spacing:.06em;
    color:#8B93C8;
    white-space:nowrap;
  }
  .donor-back-fine{
    flex:1 1 0;
    min-height:0;
    margin-top:auto;
    padding-top:5px;
    font-size:8px;
    line-height:1.6;
    color:#8B93C8;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .donor-honors{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
  }
  .donor-monthly{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
    padding:7px 16px;
    max-width:100%;
    border-radius:999px;
    background:rgba(120,131,191,0.08);
    border:1px dashed rgba(120,131,191,0.32);
  }
  .donor-annual{
    background:rgba(233,196,106,0.10);
    border-color:rgba(201,158,66,0.42);
  }
  .donor-annual .donor-monthly-tag{
    border-color:rgba(201,158,66,0.55);
    color:#9A7A2E;
  }
  .donor-annual .donor-monthly-name{color:#8F6B1E;}
  .donor-monthly-tag{
    font-size:10px;
    font-weight:900;
    letter-spacing:.10em;
    padding:2px 9px;
    border-radius:999px;
    border:1px solid rgba(120,131,191,0.45);
    color:#5E6AA8;
    white-space:nowrap;
  }
  .donor-monthly-name{
    font-family:'Noto Serif SC',serif;
    font-size:13.5px;
    font-weight:900;
    color:#4E5680;
  }
  .donor-monthly-note{font-size:10.5px; color:var(--text-faint);}
  .donor-podium.is-flipped .donor-flip{transform:rotateY(180deg);}
  /* ---------- 卡面搬進正反兩面：底圖跟著 3D 旋轉 ---------- */
  .donor-podium.has-flip{
    padding:0 !important;
    border:none !important;
    background:none !important;
    box-shadow:none !important;
  }
  .has-flip .donor-face{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    border-radius:16px;
    border:1px solid transparent;
    padding:14px 18px;
    aspect-ratio:8 / 5;
    overflow:hidden;
  }
  .has-flip .donor-front{position:relative; justify-content:center;}
  .has-flip .donor-pmsg{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .rank-1.has-flip .donor-face{
    padding:18px 22px 16px;
    border-color:rgba(214,178,94,0.60);
    box-shadow:0 12px 30px rgba(190,150,60,0.24), 0 0 0 1px rgba(214,178,94,0.30), 0 0 24px rgba(233,196,106,0.28);
  }
  .rank-1.has-flip .donor-front{
    background:linear-gradient(165deg, rgba(246,226,170,0.62), rgba(255,255,255,0.78)), url('images/99-donor-card-bg-03.png') center / 170px repeat;
  }
  .rank-1.has-flip .donor-back{
    background:linear-gradient(165deg, rgba(246,226,170,0.62), rgba(255,255,255,0.78)), linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('images/99-donor-card-bg-02.png') center / 300px repeat;
  }
  .rank-2.has-flip .donor-face{
    border-color:rgba(148,160,190,0.55);
    box-shadow:0 8px 20px rgba(110,125,160,0.16);
  }
  .rank-2.has-flip .donor-front{
    background:linear-gradient(165deg, rgba(214,221,238,0.68), rgba(255,255,255,0.74)), url('images/99-donor-card-bg-03.png') center / 170px repeat;
  }
  .rank-2.has-flip .donor-back{
    background:linear-gradient(165deg, rgba(214,221,238,0.68), rgba(255,255,255,0.74)), linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('images/99-donor-card-bg-01.png') center / 360px repeat;
  }
  .rank-3.has-flip .donor-face{
    border-color:rgba(205,150,102,0.50);
    box-shadow:0 8px 20px rgba(160,110,66,0.16);
  }
  .rank-3.has-flip .donor-front{
    background:linear-gradient(165deg, rgba(240,208,178,0.58), rgba(255,255,255,0.74)), url('images/99-donor-card-bg-03.png') center / 170px repeat;
  }
  .rank-3.has-flip .donor-back{
    background:linear-gradient(165deg, rgba(240,208,178,0.58), rgba(255,255,255,0.74)), linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('images/99-donor-card-bg-02.png') center / 300px repeat;
  }
  /* ---------- 贊助完成謝幕 ---------- */
  @keyframes thanksFade{from{opacity:0;}to{opacity:1;}}
  @keyframes thanksPop{from{transform:scale(.72); opacity:0;}to{transform:scale(1); opacity:1;}}
  @keyframes petalFall{
    0%{transform:translateY(-6vh) rotate(0deg); opacity:0;}
    10%{opacity:1;}
    100%{transform:translateY(110vh) rotate(340deg); opacity:.65;}
  }
  .donate-thanks-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(40,36,60,0.55);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    animation:thanksFade .3s ease;
  }
  .thanks-petal{
    position:absolute;
    top:-32px;
    color:#F2A7C3;
    animation-name:petalFall;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    pointer-events:none;
  }
  .donate-thanks-card{
    position:relative;
    background:#FFFDFA;
    border:1px solid rgba(214,178,94,0.55);
    border-radius:20px;
    padding:38px 44px 32px;
    max-width:430px;
    width:calc(100% - 48px);
    text-align:center;
    box-shadow:0 24px 60px rgba(30,26,50,0.45);
    animation:thanksPop .45s cubic-bezier(.2,1.4,.4,1);
  }
  .donate-thanks-stamp{
    position:absolute;
    top:13px;
    right:15px;
    width:56px;
    height:56px;
    border:3px solid rgba(214,90,90,0.72);
    border-radius:50%;
    color:rgba(214,90,90,0.78);
    font-family:'Noto Serif SC',serif;
    font-weight:900;
    font-size:16px;
    letter-spacing:.1em;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:rotate(14deg);
  }
  .donate-thanks-title{
    font-family:'Noto Serif SC',serif;
    font-size:19px;
    font-weight:900;
    color:#9A7A2E;
    letter-spacing:.06em;
    margin-bottom:12px;
  }
  .donate-thanks-text{
    font-size:13.5px;
    line-height:2;
    color:#5A5F82;
    margin-bottom:20px;
  }
  .donate-thanks-sub{font-size:11px; color:#A7AECF;}
  .donate-thanks-btn{
    padding:11px 30px;
    border-radius:999px;
    border:none;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    background:linear-gradient(95deg, #7883BF, #F2A7C3);
    color:#fff;
    font-weight:900;
    font-size:13.5px;
    letter-spacing:.08em;
  }
  .donate-thanks-btn:hover{filter:brightness(1.06);}
  /* ---------- 罐罐基金進度條 ---------- */
  .cat-fund{max-width:430px; margin:0 auto 18px;}
  .cat-fund[hidden]{display:none !important;}
  .cat-fund-head{
    display:flex;
    justify-content:space-between;
    font-size:11.5px;
    font-weight:900;
    color:#8B93C8;
    margin-bottom:6px;
  }
  .cat-fund-head span:last-child{color:#C98986;}
  .cat-fund-bar{
    height:14px;
    border-radius:999px;
    background:rgba(120,131,191,0.14);
    border:1px solid rgba(120,131,191,0.22);
  }
  .cat-fund-fill{
    position:relative;
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(95deg, #7883BF, #F2A7C3);
    transition:width 1.2s cubic-bezier(.3,.8,.3,1);
  }
  .cat-fund-cat{
    position:absolute;
    right:-5px;
    top:-8px;
    font-size:13px;
  }
  .cat-fund-msg{
    margin-top:7px;
    font-size:11px;
    text-align:center;
    color:#8B93C8;
  }
  /* ---------- 支持頁版面：感謝牆占整行，下面燃料站｜小指南並排 ---------- */
  .support-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
    gap:24px;
    align-items:stretch;
    max-width:none;
    margin-right:6px;
  }
  .support-layout .donor-wall-card{grid-column:1 / -1;}
  .support-layout .support-hero,
  .support-layout .support-guide,
  .support-layout .donor-wall-card{margin:0; max-width:none;}
  @media (max-width:1150px){
    .support-layout{grid-template-columns:1fr; max-width:860px;}
  }
  /* 手機：卡片跟頁首一樣寬，左右對齊 */
  @media (max-width:760px){
    .support-layout{margin-right:0;}
  }
  /* ---------- 頒獎台高級化 ---------- */
  .donor-podium{position:relative;}
  .donor-row-top{flex-wrap:wrap;}
  .donor-podium-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1 1 208px;
    min-width:196px;
    max-width:236px;
  }
  .donor-podium-wrap.pr-1{flex-grow:1.18; flex-basis:226px; min-width:210px; max-width:260px;}
  #support .donor-podium-wrap .donor-podium{
    width:100%;
    min-width:0;
    max-width:none;
  }
  @media (max-width:640px){
    .donor-row-top{flex-wrap:wrap;}
    .donor-podium-wrap{flex:1 1 100%; max-width:300px;}
    .donor-podium-wrap.pr-1{max-width:300px;}
  }
  .donor-rtitle{
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    padding:2.5px 11px;
    border-radius:999px;
    white-space:nowrap;
  }
  .rank-1 .donor-rtitle{
    color:#8F6B1E;
    background:linear-gradient(95deg, rgba(240,214,138,0.90), rgba(250,238,196,0.95));
    border:1px solid rgba(201,158,66,0.50);
  }
  .rank-2 .donor-rtitle{
    color:#4F5F87;
    background:rgba(219,226,241,0.92);
    border:1px solid rgba(148,160,190,0.55);
  }
  .rank-3 .donor-rtitle{
    color:#8A5A2E;
    background:rgba(242,213,186,0.90);
    border:1px solid rgba(205,150,102,0.50);
  }
  .donor-pname{font-family:'Noto Serif SC',serif;}
  .donor-prow{
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    min-width:0;
  }
  .donor-prow .donor-avatar{flex-shrink:0;}
  .donor-pinfo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    min-width:0;
    flex:1;
    text-align:left;
  }
  .donor-pinfo .donor-pmsg{text-align:left;}
  .donor-pcount{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.05em;
    color:#8B93C8;
    line-height:1.5;
  }
  .rank-1 .donor-pcount{color:#A8863C;}
  .rank-3 .donor-pcount{color:#A97B4F;}
  .donor-podium.rank-1{
    box-shadow:0 12px 30px rgba(190,150,60,0.24), 0 0 0 1px rgba(214,178,94,0.30), 0 0 24px rgba(233,196,106,0.28);
  }
  @keyframes donorTwinkle{
    0%,100%{opacity:.2; transform:scale(.7) rotate(0deg);}
    50%{opacity:1; transform:scale(1.12) rotate(20deg);}
  }
  .rank-1 .donor-front::before,
  .rank-1 .donor-front::after{
    content:'✦';
    position:absolute;
    color:#D9B45C;
    text-shadow:0 0 8px rgba(233,196,106,0.85);
    animation:donorTwinkle 2.6s ease-in-out infinite;
    pointer-events:none;
  }
  .rank-1 .donor-front::before{top:9px; left:11px; font-size:14px;}
  .rank-1 .donor-front::after{top:22px; right:13px; font-size:11px; animation-delay:1.3s;}
  .donor-step{
    position:relative;
    width:82%;
    margin-top:5px;
    margin-bottom:9px;
    border-radius:7px 7px 4px 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-family:'Noto Serif SC',serif;
    font-weight:900;
    letter-spacing:.12em;
    color:rgba(255,255,255,0.97);
    text-shadow:0 -1px 0 rgba(0,0,0,0.22), 0 1px 1px rgba(255,255,255,0.30);
  }
  .donor-step::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.42) 46%, rgba(255,255,255,0.10) 52%, transparent 64%);
    background-size:230% 100%;
    background-repeat:no-repeat;
    animation:stepShine 4.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes stepShine{
    0%{background-position:190% 0;}
    46%{background-position:-90% 0;}
    100%{background-position:-90% 0;}
  }
  .donor-step::after{
    content:'';
    position:absolute;
    top:calc(100% + 2px);
    left:50%;
    transform:translateX(-50%);
    width:114%;
    height:9px;
    border-radius:3px 3px 7px 7px;
  }
  .step-orn{font-size:.58em; opacity:.75; transform:translateY(-1px);}
  .step-dot{opacity:.65; font-weight:400;}
  .step-top{
    font-size:.74em;
    letter-spacing:.10em;
    opacity:.92;
  }
  .pr-1 .donor-step{
    height:48px;
    font-size:17.5px;
    background:linear-gradient(180deg, #F0D68E 0%, #D9B25E 45%, #C09442 100%);
    border:1px solid rgba(150,110,36,0.55);
    box-shadow:0 8px 18px rgba(190,150,60,0.32), inset 0 2px 2px rgba(255,255,255,0.55), inset 0 -3px 4px rgba(120,86,24,0.28);
  }
  .pr-1 .donor-step::after{
    background:linear-gradient(180deg, #C9A24E, #A6813A);
    box-shadow:0 6px 12px rgba(160,120,40,0.30), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .pr-2 .donor-step{
    height:33px;
    font-size:13.5px;
    background:linear-gradient(180deg, #D7DEEC 0%, #AEB9D1 50%, #93A0BE 100%);
    border:1px solid rgba(100,115,150,0.50);
    box-shadow:0 6px 14px rgba(110,125,160,0.28), inset 0 2px 2px rgba(255,255,255,0.55), inset 0 -3px 4px rgba(70,84,116,0.24);
  }
  .pr-2 .donor-step::after{
    background:linear-gradient(180deg, #96A3C1, #7B89A8);
    box-shadow:0 5px 10px rgba(100,115,150,0.26), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .pr-3 .donor-step{
    height:25px;
    font-size:12px;
    background:linear-gradient(180deg, #E7BE99 0%, #CB9463 50%, #B47C4B 100%);
    border:1px solid rgba(140,90,48,0.50);
    box-shadow:0 6px 14px rgba(160,110,66,0.28), inset 0 2px 2px rgba(255,255,255,0.50), inset 0 -3px 4px rgba(96,58,26,0.24);
  }
  .pr-3 .donor-step::after{
    background:linear-gradient(180deg, #BC8455, #9C6B40);
    box-shadow:0 5px 10px rgba(140,90,48,0.26), inset 0 1px 0 rgba(255,255,255,0.30);
  }
  @media (max-width:1560px){
    #support .donor-avatar{width:52px; height:52px;}
    #support .rank-1 .donor-avatar{width:66px; height:66px;}
    #support .donor-podium{padding:12px 13px;}
    #support .donor-podium.rank-1{padding:14px 15px 13px;}
    #support .has-flip .donor-face{padding:12px 13px;}
    #support .rank-1.has-flip .donor-face{padding:14px 15px 13px;}
    .donor-prow{gap:10px;}
    #support .donor-pname{font-size:13.5px;}
    #support .rank-1 .donor-pname{font-size:15px;}
    #support .donor-medal{font-size:24px;}
    #support .rank-1 .donor-medal{font-size:30px;}
    #support .donor-crown{font-size:22px; top:-12px; left:-8px;}
    #support .donor-crown-2, #support .donor-crown-3{font-size:18px; top:-10px; left:-7px;}
    #support .donor-pmsg{font-size:11.5px;}
  }

  /* ---------- 頒獎台：角色直接站在獎台上，天使卡縮成名牌旁的小卡（2026-10-25） ----------
     .donor-stage 是 8:5 的站位，角色（.donor-stand）站在底部；
     .donor-card-slot 是名牌左邊的小卡位，裡面放整張卡片再用 scale 縮小，滑過去（手機點一下）才放大。
     開合由 home-data.js 的 bindPodiumStage 加 .is-open；桌機直接看 :hover。 */
  .donor-stage{
    position:relative;
    width:100%;
    aspect-ratio:8 / 5;
  }
  .donor-stand{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    pointer-events:none;
  }
  /* 腳下的影子 */
  .donor-stand::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-4px;
    width:42%;
    height:10px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(60,50,40,0.26), rgba(60,50,40,0));
  }
  .donor-stand-figure{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:flex-end;
    justify-content:center;
    height:94%;
    transform-origin:50% 100%;
    animation:donorStandBob 3.6s ease-in-out infinite;
  }
  .pr-2 .donor-stand-figure{height:86%; animation-delay:-1.2s;}
  .pr-3 .donor-stand-figure{height:82%; animation-delay:-2.4s;}
  @keyframes donorStandBob{
    0%,100%{transform:translateY(0) scaleY(1);}
    50%{transform:translateY(-3px) scaleY(1.015);}
  }
  .donor-stand-figure img{
    display:block;
    height:100%;
    width:auto;
    max-width:none;
    border-radius:0;
    box-shadow:none;
    filter:drop-shadow(0 4px 6px rgba(52,54,79,0.18));
  }
  .pr-1 .donor-stand-figure img{filter:drop-shadow(0 4px 6px rgba(52,54,79,0.16)) drop-shadow(0 0 14px rgba(233,196,106,0.55));}
  /* 頭貼已裁掉透明邊：皇冠斜戴在頭頂左上 */
  #support .donor-stand-figure .donor-crown{top:6%; left:20%; transform:translate(-50%, -50%) rotate(-18deg);}
  .donor-stand-medal{align-items:center; height:auto; padding-bottom:10px; font-size:52px; line-height:1;}
  .pr-1 .donor-stand-medal{font-size:64px;}
  .donor-stand-figure.donor-stand-empty{
    align-items:center;
    width:62px;
    height:62px;
    margin-bottom:12px;
    border-radius:50%;
    border:2px dashed rgba(120,131,191,0.40);
    background:rgba(255,255,255,0.55);
  }
  .seat-open .donor-stand::after{opacity:.45;}
  .donor-stage + .donor-step{margin-top:2px;}

  /* 名牌列：小卡＋名字 */
  .donor-nameplate{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    max-width:100%;
    margin-top:6px;
  }
  .donor-plaque{
    min-width:0;
    padding:2px 12px;
    border-radius:999px;
    font-family:'Noto Serif SC',serif;
    font-size:13px;
    font-weight:900;
    color:#4E5680;
    background:rgba(255,255,255,0.7);
    border:1px solid rgba(120,131,191,0.22);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pr-1 .donor-plaque{color:#8F6B1E; border-color:rgba(201,158,66,0.45); background:rgba(250,238,196,0.6);}
  .pr-2 .donor-plaque{color:#4F5F87; border-color:rgba(148,160,190,0.5);}
  .pr-3 .donor-plaque{color:#8A5A2E; border-color:rgba(205,150,102,0.45);}
  .seat-open .donor-plaque{color:#8B93C8; border-style:dashed; background:rgba(255,255,255,0.45);}

  /* 小卡位：48×30；卡片本身是 --card-w 寬，縮成 --mini 倍放在裡面 */
  .donor-card-slot{
    --card-w:240px;
    --mini:.2;
    position:relative;
    flex:0 0 auto;
    width:48px;
    height:30px;
    border-radius:5px;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    outline:none;
    transition:transform .2s ease;
  }
  .pr-1 .donor-card-slot{--card-w:260px; --mini:.1846;}
  .donor-card-slot:focus-visible{box-shadow:0 0 0 2px rgba(120,131,191,0.6);}
  #support .donor-card-slot .donor-podium{
    position:absolute;
    left:50%;
    bottom:0;
    z-index:1;
    width:var(--card-w);
    min-width:0;
    max-width:none;
    transform:translateX(-50%) scale(var(--mini));
    transform-origin:50% 100%;
    transition:transform .34s cubic-bezier(.34,1.3,.5,1), filter .2s ease;
  }
  .donor-card-slot .donor-podium.seat-empty{aspect-ratio:8 / 5; padding:12px 14px;}
  /* 卡面原本是半透明漸層，放大後會蓋在角色上，墊一層不透明的底 */
  #support .donor-card-slot .donor-face{background-color:#FFFDF8;}
  #support .donor-card-slot .donor-podium.seat-empty{background:#FAFAFF !important;}
  /* 縮小時卡片內的動畫與翻面提示先停掉，看起來就是一張小卡 */
  .donor-card-slot:not(.is-open) .donor-podium.has-flip::after{opacity:0;}
  /* 放大：往上長，蓋在角色前面 */
  .donor-card-slot.is-open,
  .donor-card-slot:focus-visible{z-index:20;}
  #support .donor-card-slot.is-open .donor-podium,
  #support .donor-card-slot:focus-visible .donor-podium{
    transform:translateX(-50%) translateY(-38px) scale(1);
    filter:drop-shadow(0 14px 24px rgba(52,54,79,0.22));
  }
  @media (hover:hover) and (pointer:fine){
    .donor-card-slot:hover{z-index:20;}
    .donor-card-slot:not(:hover):not(.is-open):not(:focus-visible){transform:none;}
    .donor-nameplate:hover .donor-card-slot:not(:hover):not(.is-open){transform:translateY(-2px);}
    #support .donor-card-slot:hover .donor-podium{
      transform:translateX(-50%) translateY(-38px) scale(1);
      filter:drop-shadow(0 14px 24px rgba(52,54,79,0.22));
    }
  }
  /* 翻面提示：卡片右下角的小圓鈕（不跟著翻） */
  .donor-podium.has-flip::after{
    content:'↻';
    position:absolute;
    right:7px;
    bottom:7px;
    z-index:3;
    width:18px;
    height:18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    line-height:1;
    color:rgba(90,95,130,0.75);
    background:rgba(255,255,255,0.75);
    box-shadow:0 1px 3px rgba(52,54,79,0.18);
    pointer-events:none;
    transition:opacity .2s ease;
  }
  @media (max-width:640px){
    .donor-card-slot{--card-w:230px; --mini:.2087;}
    .pr-1 .donor-card-slot{--card-w:240px; --mini:.2;}
  }

  /* ---------- 罐罐基金：放在橫幅左上角的毛玻璃小牌子（2026-10-25） ---------- */
  .sora-crew-banner > .cat-fund{
    position:absolute;
    top:50%;
    left:1.6%;
    z-index:2;
    width:min(220px, 19%);
    min-width:140px;
    margin:0;
    padding:7px 11px 8px;
    transform:translateY(-50%);
    border-radius:12px;
    background:rgba(255,251,246,0.86);
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:0 6px 16px rgba(90,60,45,0.18);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }
  .sora-crew-banner > .cat-fund .cat-fund-head{
    align-items:baseline;
    margin-bottom:5px;
    font-size:11px;
    letter-spacing:.06em;
    color:#8A6656;
  }
  .sora-crew-banner > .cat-fund #catFundPct{
    font-family:'Noto Serif SC',serif;
    font-size:16px;
    line-height:1;
    color:#C06F67;
  }
  .sora-crew-banner > .cat-fund .cat-fund-bar{
    height:9px;
    background:rgba(196,169,156,0.28);
    border-color:rgba(160,120,100,0.22);
  }
  .sora-crew-banner > .cat-fund .cat-fund-fill{
    min-width:9px;
    background:linear-gradient(95deg, #E9B48A, #E58C8C);
  }
  .sora-crew-banner > .cat-fund .cat-fund-cat{top:-6px; right:-6px; font-size:11px;}
  .sora-crew-banner > .cat-fund .cat-fund-msg{
    margin-top:4px;
    font-size:10.5px;
    text-align:left;
    color:#8A6656;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* 橫幅不夠高時只留標題和進度條，提示語藏起來 */
  @media (max-width:1500px){
    .sora-crew-banner > .cat-fund .cat-fund-msg{display:none;}
  }
  /* 橫幅太矮放不下：改排在橫幅正下方 */
  @media (max-width:760px){
    .sora-crew-banner{margin-bottom:90px !important;}
    .sora-crew-banner > .cat-fund .cat-fund-msg{display:block;}
    .sora-crew-banner > .cat-fund{
      top:calc(100% + 12px);
      left:50%;
      transform:translateX(-50%);
      width:min(320px, 100%);
    }
  }
  @media (prefers-reduced-motion:reduce){
    .donor-stand-figure{animation:none;}
    #support .donor-card-slot .donor-podium{transition:none;}
  }

  /* ===== 2026-10-25 手機支持頁（只在 760px 以下） =====
     前三名並排成頒獎台（亞軍｜冠軍｜季軍，台階高度不同）；上方小天與貓咪的橫幅加高、角色放大，罐罐基金擠進橫幅裡；感謝字樣縮小不換行 */
  @media (max-width:760px){
    #support .donor-row-top{flex-wrap:nowrap; align-items:flex-end; justify-content:center; gap:6px;}
    #support .donor-podium-wrap,
    #support .donor-podium-wrap.pr-1{flex:1 1 0; min-width:0; max-width:none;}
    #support .donor-podium-wrap.pr-1{flex-grow:1.2;}
    #support .donor-stage{aspect-ratio:1 / 1;}
    #support .donor-step{width:100%; gap:4px; letter-spacing:.04em; margin-bottom:12px;}
    #support .donor-step .step-orn,
    #support .donor-step .step-dot{display:none;}
    #support .donor-step{flex-direction:column; justify-content:center; line-height:1.15;}
    #support .pr-1 .donor-step{height:64px; font-size:15px;}
    #support .pr-2 .donor-step{height:48px; font-size:13px;}
    #support .pr-3 .donor-step{height:36px; font-size:12px;}
    #support .donor-step .step-top{font-size:9px; letter-spacing:.08em;}
    #support .donor-step::after{width:108%;}
    #support .donor-nameplate{flex-direction:column; gap:5px; margin-top:4px;}
    #support .donor-plaque{max-width:100%; padding:2px 8px; font-size:12px;}
    #support .donor-stand-figure.donor-stand-empty{width:44px; height:44px; margin-bottom:8px;}

    #support .donor-wall-title{font-size:min(10.5px, calc((100vw - 106px) / 29.5)); letter-spacing:0; white-space:nowrap;}
    #support .support-layout > *{min-width:0;}

    /* 左右兩邊裁掉放大後超出的部分，下緣放開讓爪子掛到框外（跟首頁委託卡一樣） */
    #support .sora-crew-banner{aspect-ratio:auto; height:158px; margin-bottom:40px !important; background-size:cover; overflow:visible; border-radius:12px;}
    /* 角色放大成 140% 寬：角色用 clip-path 裁回橫幅寬度（iPhone 也支援），爪子只裁左右、往下掛出框外；外層卡片擋住橫向捲動 */
    #support .donor-wall-card{overflow:hidden;}
    #support .sora-crew-banner .sora-crew-frame{clip-path:inset(0 12.29% 0 16.29% round 12px);}
    #support .sora-crew-banner .sora-crew-hands{--paw:9%; clip-path:inset(0 12.29% -60% 16.29%);}

    /* 天使卡收進名字裡：小卡不顯示，點名字（整個名牌都是按鈕）才跳出卡片；再點一下翻面。左右兩欄的卡片貼著該側，避免超出畫面 */
    #support .donor-nameplate{position:relative;}
    #support .donor-card-slot{position:absolute; inset:0; width:auto; height:auto; z-index:3; border-radius:999px;}
    #support .donor-card-slot:not(.is-open) .donor-podium{opacity:0; pointer-events:none;}
    #support .pr-2 .donor-card-slot .donor-podium{left:0; transform:scale(var(--mini)); transform-origin:0 100%;}
    #support .pr-3 .donor-card-slot .donor-podium{left:auto; right:0; transform:scale(var(--mini)); transform-origin:100% 100%;}
    #support .pr-2 .donor-card-slot.is-open .donor-podium,
    #support .pr-3 .donor-card-slot.is-open .donor-podium{transform:translateY(-38px) scale(1);}
    #support .donor-plaque{cursor:pointer;}

    /* 創作燃料補給站：「快樂申請書」按鈕縮小，放在標題右邊 */
    #support .support-hero-top{flex-wrap:nowrap; align-items:center; gap:12px;}
    #support .support-hero-head{flex:0 1 auto; min-width:0;}
    #support .support-hero-title{white-space:nowrap;}
    #support .support-hero-top .donate-btn-big{flex:0 0 auto; margin-left:auto; padding:6px 11px; font-size:11px; line-height:1.4; text-align:center; white-space:nowrap; letter-spacing:.02em;}
    #support .donate-br{display:inline;}
    #support .sora-crew-banner > .sora-crew{left:calc(50% - 140% * .52); right:auto; width:140%;}
    #support .sora-crew-banner > .cat-fund{top:12px; left:50%; transform:translateX(-50%); width:calc(100% - 28px);}
  }
  @media (max-width:360px){
    /* 小手機一行放不下：允許換成兩行、平均分配 */
    #support .donor-wall-title{font-size:10.5px; white-space:normal; text-wrap:balance;}
    .archive-site #support .support-hero-title{font-size:17px !important;}
    #support .support-hero-top{gap:8px;}
    #support .support-hero-top .donate-btn-big{padding:5px 9px; font-size:10.5px; letter-spacing:0;}
  }
  /* ---------- 委託頁分頁 ---------- */
  @keyframes ctabFade{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
  .commission-tab{animation:ctabFade .28s ease;}
  .commission-tab[hidden]{display:none !important;}
  .special-items-note{
    margin:-6px 0 30px;
    padding:10px 18px;
    border-radius:12px;
    background:rgba(255,255,255,0.7);
    border:1px solid rgba(255,255,255,0.55);
    backdrop-filter:blur(6px);
    font-size:12.5px;
    color:var(--text-dim);
  }
  .price-list strong{color:#5E6AA8; font-weight:900;}
  .price-rows{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:34px;
  }
  .price-row{
    display:flex;
    gap:22px;
    padding:20px 24px;
    align-items:stretch;
  }
  .price-row-info{flex:1 1 38%; min-width:0;}
  .price-row-gallery{
    /* 左欄（背景類型）的寬度；沒有座標軸的卡片用同樣的內距墊出來，
       每張卡的圖片才會對齊在同一條直線上。 */
    --axis-w:clamp(44px, 4vw, 62px);
    flex:1 1 62%;
    min-width:0;
    padding-left:var(--axis-w);
    display:grid;
    /* 固定四欄單列橫排。只有一張圖（例如「尚無參考圖」佔位圖）時也只佔 1/4，
       不會像 auto-fit 那樣撐滿整行。 */
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    align-content:center;
  }
  .price-row-gallery[hidden]{display:none !important;}
  .price-gallery-status{
    grid-column:1 / -1;
    margin:6px 0;
    color:var(--text-dim);
    font-size:12px;
    line-height:1.7;
  }
  .price-thumb-error{font-size:12px; color:var(--text-dim);}
  .price-thumb img[hidden], .price-thumb-error[hidden]{display:none !important;}
  .price-thumb:disabled{cursor:default;}
  .price-thumb{
    display:block;
    width:100%;
    padding:0;
    box-sizing:border-box;
    aspect-ratio:1;
    border-radius:10px;
    overflow:hidden;
    background:transparent;
    border:none;
    box-shadow:none;
    transition:transform .18s ease, box-shadow .18s ease;
    cursor:zoom-in;
  }
  .price-thumb:hover{ transform:translateY(-2px); }
  .price-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .price-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(40,36,60,0.74);
    backdrop-filter:blur(5px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
    cursor:zoom-out;
    animation:thanksFade .22s ease;
  }
  .price-lightbox img{
    max-width:min(92vw, 1100px);
    max-height:88vh;
    border-radius:14px;
    box-shadow:0 24px 60px rgba(20,16,40,0.55);
  }
  .price-lightbox-close{
    position:absolute;
    top:18px;
    right:22px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
    background:rgba(255,255,255,0.18);
    color:#fff;
    font-size:15px;
  }
  .price-lightbox-close:hover{background:rgba(255,255,255,0.3);}
  @media (max-width:760px){
    .price-row{flex-direction:column; gap:14px;}
  }


  /* ---------- 委託頁：粗體棕字與題材對照卡 ---------- */
  .term-plain{font-weight:900; color:var(--gold);}
  .diff-input-row{display:flex; gap:10px;}
  .diff-input{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:11.5px;
    font-weight:700;
    color:var(--text-dim);
  }
  .topic-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    margin-bottom:34px;
  }
  .topic-box{padding:20px 24px;}
  .topic-title{
    font-size:14.5px;
    font-weight:900;
    margin-bottom:10px;
  }
  .topic-ok{
    border-color:rgba(120,131,191,0.32) !important;
    background:linear-gradient(180deg, rgba(213,218,242,0.62), rgba(255,255,255,0.94)) !important;
  }
  .topic-ok .topic-title{color:#5E6AA8;}
  .topic-no{
    border-color:rgba(201,137,134,0.36) !important;
    background:linear-gradient(180deg, rgba(242,213,210,0.56), rgba(255,255,255,0.94)) !important;
  }
  .topic-no .topic-title{color:#B0655F;}
  @media (max-width:760px){
    .topic-grid{grid-template-columns:1fr;}
  }


  /* ---------- 自訂鼠標（sora 套組；要換 elio 把下面的 sora 全改成 elio 即可） ---------- */
  body{cursor:url('images/cursors/sora-default.cur'), auto;}
  a, button, select, summary, label[for],
  .navbtn, .multi-chip, .price-thumb, .donate-btn, .btn,
  [role="button"], .faq-item summary{
    cursor:url('images/cursors/sora-link-select.cur'), pointer;
  }
  input[type="text"], input[type="number"], input[type="email"], textarea{
    cursor:url('images/cursors/sora-text.cur'), text;
  }
  button:disabled, .btn:disabled, [aria-disabled="true"]{
    cursor:url('images/cursors/sora-notallowed.cur'), not-allowed;
  }
  .pricing-help-btn{cursor:url('images/cursors/sora-help.cur'), help;}
  body.is-busy, body.is-busy *{cursor:url('images/cursors/sora-wait.cur'), wait !important;}


  /* ---------- 委託頁：版本日期、聯絡提醒 ---------- */
  .rules-version{
    margin-top:12px;
    padding-top:10px;
    border-top:1px dashed rgba(120,131,191,0.24);
    font-size:11px;
    color:var(--text-faint);
    text-align:right;
  }
  .form-hint-warn{color:#B0655F !important; font-weight:700;}
  .wip-row{margin-bottom:34px;}
  .flow-time{
    display:block;
    margin-top:5px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
    color:var(--gold);
  }
  .flow-note{
    margin-top:16px;
    padding-top:13px;
    border-top:1px dashed rgba(120,131,191,0.24);
    font-size:12.5px;
    line-height:1.9;
    color:var(--text-dim);
    text-align:center;
  }


  /* ---------- 下拉選單美化（支援 base-select 的瀏覽器全面換裝，其餘用原生） ---------- */
  select.form-control option{background:#FFFFFF; color:#4E5680;}
  @supports (appearance: base-select) {
    select.form-control{
      appearance:base-select;
    }
    select.form-control::picker(select){
      appearance:base-select;
      background:#FFFFFF;
      border:1px solid rgba(120,131,191,0.35);
      border-radius:12px;
      box-shadow:0 16px 38px rgba(52,54,79,0.26);
      padding:6px;
      margin-top:6px;
    }
    select.form-control option{
      padding:9px 12px;
      border-radius:8px;
      font-size:13px;
      font-weight:700;
      color:#4E5680;
      transition:background .15s ease;
    }
    select.form-control option:hover,
    select.form-control option:focus{
      background:rgba(120,131,191,0.14);
    }
    select.form-control option:checked{
      background:linear-gradient(95deg, rgba(120,131,191,0.20), rgba(242,167,195,0.22));
      font-weight:900;
    }
    select.form-control option::checkmark{
      color:#C98986;
    }
  }


  /* ---------- 表單重要提醒：深紫標題列＋白底內文（同關於頁摺疊卡語言） ---------- */
  #paymentPlan option:disabled,
  #paymentPlan option:disabled:hover,
  #paymentPlan option:disabled:focus{
    color:#92929c;
    background:#f0f0f3;
    font-weight:400;
    cursor:url('images/cursors/sora-notallowed.cur'), not-allowed;
  }

  #commissionModal .form-deadline-note{
    padding:0 20px 14px !important;
    overflow:hidden;
    background:rgba(255,255,255,0.92) !important;
    border:1px solid rgba(120,131,191,0.32) !important;
    box-shadow:0 10px 26px rgba(52,54,79,0.16) !important;
    color:var(--text-dim) !important;
  }
  #commissionModal .form-deadline-note-title{
    display:block;
    margin:0 -20px 12px !important;
    padding:9px 20px !important;
    background:linear-gradient(115deg, rgba(94,88,132,0.92), rgba(110,98,142,0.90) 55%, rgba(122,104,146,0.88)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
    color:#FFFFFF !important;
    font-size:14.5px !important;
    letter-spacing:.08em;
  }
  #commissionModal .form-deadline-note strong{
    color:#B0655F !important;
  }

  /* 驚喜包提醒：只有選到驚喜包時才強調（data-surprise 由 commission.js 切換） */
  #commissionReminderList #reminderSurprise .reminder-text{
    transition:color .18s ease;
  }
  #commissionReminderList[data-surprise="1"] #reminderSurprise .reminder-text{
    font-weight:700;
    color:#B0655F;
  }

  /* 複製委託內容的提醒：與表單提醒採同一組強調樣式 */
  #copyNoticeModal .copy-note-list strong{
    font-weight:700;
    color:#B0655F;
  }
  #copyNoticeReminderList #copyNoticeSurprise .reminder-text{
    transition:color .18s ease;
  }
  #copyNoticeReminderList[data-surprise="1"] #copyNoticeSurprise .reminder-text{
    font-weight:700;
    color:#B0655F;
  }

  /* 複製提醒裡既有的 term-highlight 併入同一套強調；僅限此 modal，
     委託規則區塊與商用／買斷倍率的 term-highlight 維持原樣 */
  #copyNoticeModal .term-highlight{
    font-weight:700;
    color:#B0655F;
  }


  /* ---------- 語言切換鈕 ---------- */
  .lang-chip{text-decoration:none; display:inline-flex; align-items:center;}


  /* ---------- 圖檔提供參考 ---------- */
  .ref-guide-trigger{
    display:inline-flex; align-items:center; gap:6px;
    align-self:flex-start; margin-top:8px;
    padding:7px 14px; border-radius:999px;
    border:1px solid rgba(149,128,181,0.45);
    background:rgba(241,236,250,0.72);
    color:#5c4a7d; font-size:12.5px; font-weight:700;
    letter-spacing:.02em; cursor:pointer;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .ref-guide-trigger:hover{
    background:#e9e1f7; border-color:#9580b5; transform:translateY(-1px);
  }
  .ref-guide-trigger:focus-visible{ outline:3px solid #c4b2e0; outline-offset:2px; }
  .ref-guide-trigger-icon{ font-size:11px; }

  #refGuideModal .ref-guide-list{
    list-style:none; margin:0; padding:0; display:grid; gap:22px;
  }
  .ref-guide-item{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,232px);
    gap:18px; align-items:start;
    padding:16px 18px; border-radius:10px;
    border:1px solid #e5deec; background:#faf8fc;
  }
  .ref-guide-item:has(.ref-guide-compare){ grid-template-columns:minmax(0,1fr); }
  .ref-guide-heading{
    display:flex; align-items:center; gap:9px;
    margin:0 0 8px; font-size:15px; color:#51416e;
  }
  .ref-guide-num{
    display:inline-grid; place-items:center;
    width:23px; height:23px; flex-shrink:0; border-radius:50%;
    background:#9580b5; color:#fff; font-size:12.5px; font-weight:800;
  }
  .ref-guide-text p{ margin:0 0 6px; font-size:13.5px; line-height:1.85; color:var(--text-dim); }
  .ref-guide-text p:last-child{ margin-bottom:0; }
  .ref-guide-text strong{ font-weight:700; color:#B0655F; }
  .ref-guide-aside{ font-size:12.5px !important; opacity:.78; }

  .ref-guide-compare{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px; margin-top:4px;
  }
  .ref-guide-figure{ margin:0; display:grid; gap:7px; }
  .ref-guide-shot{
    display:block; width:100%; padding:0; cursor:zoom-in;
    border:1px solid #e5deec; border-radius:8px;
    background:#fff; overflow:hidden; line-height:0;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .ref-guide-shot:hover{ border-color:#9580b5; box-shadow:0 4px 14px rgba(81,65,110,0.13); }
  .ref-guide-shot:focus-visible{ outline:3px solid #c4b2e0; outline-offset:2px; }
  .ref-guide-shot img{ display:block; width:100%; height:auto; }
  .ref-guide-figure figcaption{
    font-size:12px; line-height:1.6; color:var(--text-dim); text-align:center;
  }
  .ref-guide-tag{
    display:block; margin-bottom:2px; font-weight:800; letter-spacing:.02em;
  }
  .ref-guide-tag.is-avoid{ color:#B0655F; }
  .ref-guide-tag.is-prefer{ color:#5f8a6a; }
  .ref-guide-figure.is-avoid .ref-guide-shot{ border-color:rgba(176,101,95,0.38); }
  .ref-guide-figure.is-prefer .ref-guide-shot{ border-color:rgba(95,138,106,0.42); }

  @media(max-width:640px){
    .ref-guide-item,
    .ref-guide-item:has(.ref-guide-compare){ grid-template-columns:minmax(0,1fr); padding:14px; }
    .ref-guide-figure{ max-width:260px; margin-inline:auto; }
    .ref-guide-compare{ gap:10px; }
    .ref-guide-compare .ref-guide-figure{ max-width:none; }
  }

  /* 無附圖的項目（例如服裝說明）改單欄，避免右側留白像漏圖 */
  .ref-guide-item:not(:has(.ref-guide-figure)){ grid-template-columns:minmax(0,1fr); }
  .ref-guide-options{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px; margin-top:10px;
  }
  .ref-guide-option{
    display:grid; gap:3px; align-content:start;
    padding:12px 14px; border-radius:8px;
    border:1px solid #e5deec; background:#fff;
  }
  .ref-guide-option-title{ font-size:13.5px; font-weight:800; color:#51416e; }
  .ref-guide-option-price{
    justify-self:start; margin:1px 0 4px; padding:1px 9px;
    border-radius:999px; background:rgba(241,236,250,0.9);
    color:#5c4a7d; font-size:11.5px; font-weight:800; letter-spacing:.02em;
  }
  .ref-guide-option-desc{ font-size:12.5px; line-height:1.8; color:var(--text-dim); }
  @media(max-width:640px){ .ref-guide-options{ grid-template-columns:minmax(0,1fr); } }

  /* ---------- 送出成功的蓋章 ---------- */
  /* 蓋章圖是黑白線稿、背景透明，用 mask 染成印泥紅而不是直接貼 logo。
     mask 圖在委託彈窗開啟（display 從 none 變 flex）時才會下載。 */
  .commission-receipt{ position:relative; }
  .receipt-stamp-layer{
    position:absolute; inset:0;
    overflow:hidden; border-radius:inherit; pointer-events:none;
  }
  .receipt-stamp{
    position:absolute; right:20px; bottom:10px;
    width:118px; height:118px;
    background-color:#B0655F;
    -webkit-mask:url('images/99-logo.png') center/contain no-repeat;
    mask:url('images/99-logo.png') center/contain no-repeat;
    opacity:0;
    /* 還沒蓋章時維持原尺寸：放大 2.1 倍只出現在落章動畫的第一格（見 receiptStampDrop）。
       預設就放大的話，透明的章仍會在手機上把表單撐寬、可以左右滑。 */
    transform:rotate(-26deg) scale(1);
  }
  .commission-receipt.is-stamped .receipt-stamp{
    animation:receiptStampDrop .6s linear forwards;
  }
  /* 逐段指定曲線：先緩緩壓下（大尺寸停留得夠久才看得見），砸到紙面後擠壓回彈。
     整體用 linear，由各關鍵影格自己的 timing-function 接管。
     落下後停在半透明，底下的「預估合計」金額仍然讀得到。 */
  @keyframes receiptStampDrop{
    0%   { opacity:0;   transform:rotate(-26deg) scale(2.1);  animation-timing-function:cubic-bezier(.45,.05,.75,.4); }
    40%  { opacity:.82; transform:rotate(-14deg) scale(1.06); animation-timing-function:cubic-bezier(.3,0,.7,1); }
    57%  { opacity:.8;  transform:rotate(-13deg) scale(.92);  animation-timing-function:cubic-bezier(.3,0,.7,1); }
    76%  { opacity:.72; transform:rotate(-13deg) scale(1.05); animation-timing-function:ease-out; }
    100% { opacity:.66; transform:rotate(-13deg) scale(1); }
  }
  /* 落章瞬間讓整張單據輕微一沉，營造按壓的力道 */
  .commission-receipt.is-stamped{ animation:receiptStampPress .34s ease-out .24s; }
  @keyframes receiptStampPress{
    0%,100%{ transform:none; }
    35%    { transform:translateY(2px); }
    65%    { transform:translateY(-1px); }
  }
  @media(max-width:640px){
    .receipt-stamp{ width:96px; height:96px; right:12px; bottom:8px; }
  }
  @media(prefers-reduced-motion:reduce){
    .commission-receipt.is-stamped{ animation:none; }
    .commission-receipt.is-stamped .receipt-stamp{
      animation:none; opacity:.66; transform:rotate(-13deg) scale(1);
    }
  }

  /* ===== 範例圖的 Q版／正比 分頁 ===== */
  .price-row-head{
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    /* 下面那 12px 原本是 .price-name 自己的 10px 下邊距 ＋ 這裡的 2px，
       移上來才能用 baseline 對齊中英文標題。 */
    margin:0 0 12px;
  }
  .price-row-head > .price-name{ margin-bottom:0; }
  .price-name-en{
    font-family:'Outfit','Noto Serif SC',serif;
    font-size:13px; font-weight:600; letter-spacing:.1em;
    color:rgba(104,88,146,.62);
    white-space:nowrap;
  }
  /* 分頁按鈕現在排在說明文字下面；驚喜包有兩排（畫風比例＋繪製範圍） */
  .price-row-info > .price-row-styles{ margin-top:16px; vertical-align:middle; }
  .price-row-info > .price-row-styles + .price-row-styles{ margin-left:10px; }
  /* 一顆膠囊切成幾格，每一格都是一整塊填色，交界是一條斜邊 ——
     不是在兩格中間畫一條線。做法是每一格往左疊 13px，再用 clip-path
     把自己的左上角斜切掉，露出前一格的填色，交界自然就是斜的。 */
  .price-row-styles{
    display:inline-flex; gap:0;
    padding:0;
    border:1.5px solid #9580b5;
    border-radius:999px;
    background:#E9DFF8;
    overflow:hidden;
    /* 外層一層落地陰影，整顆看起來是浮在紙上的實體開關 */
    box-shadow:0 4px 9px -3px rgba(74,55,116,.38),
               0 1px 2px rgba(74,55,116,.2);
  }
  .price-row-styles[hidden]{display:none !important;}
  .price-style-tab{
    position:relative;
    /* 每一格等寬，斜邊的中點才會落在膠囊正中央：
       每格寬 W、往左疊 13px，膠囊寬 2W-13，中心在 W-6.5；
       斜邊從上緣的 W 走到下緣的 W-13，中點剛好也是 W-6.5。 */
    flex:1 1 0;
    min-width:0;
    margin-left:-13px;
    padding:6px 17px;
    border:0;
    border-radius:0;
    background:#E9DFF8;
    color:#56447a;
    font-size:12.5px; font-weight:700; letter-spacing:.04em;
    line-height:1.6;
    white-space:nowrap;
    text-align:center;
    text-shadow:0 1px 0 rgba(255,255,255,.6);
    cursor:pointer;
    clip-path:polygon(13px 0, 100% 0, 100% 100%, 0 100%);
    transition:background-color .18s ease, color .18s ease;
  }
  /* 第一格貼著膠囊的左圓角，不切角也不往左疊 */
  .price-style-tab.is-first{
    margin-left:0;
    clip-path:none;
  }
  /* 兩排膠囊要排在同一行，所以外層不換行 */
  .price-row-info > .price-row-styles{ vertical-align:top; }
  .price-style-tab:hover{ background:#DCCCF3; }
  .price-style-tab.is-active{
    background:linear-gradient(180deg,#7E68B0,#6D5A9C);
    color:#fff;
    /* 內陰影＝按下去；下緣一條亮邊讓它還是有厚度 */
    box-shadow:inset 0 3px 6px rgba(40,26,74,.45),
               inset 0 -1px 0 rgba(255,255,255,.22);
    text-shadow:0 1px 1px rgba(38,24,70,.4);
  }
  .price-style-tab.is-active:hover{ background:linear-gradient(180deg,#8871b7,#7663a6); }
  /* clip-path 會把 outline 一起切掉，焦點框改畫在外層膠囊上 */
  /* 滑鼠點下去不要出現紫色外框；只有鍵盤 Tab 進來才給焦點框。
     clip-path 會把按鈕自己的 outline 切掉，所以畫在外層膠囊上。 */
  .price-style-tab:focus-visible{ outline:none; }
  .price-row-styles:has(.price-style-tab:focus-visible){
    outline:3px solid #c4b2e0; outline-offset:3px;
  }

  /* ===== 估價單的蓋章欄位 ===== */
  /* 原本蓋章是絕對定位在整張估價單的右下角；改成一個固定的方框，
     蓋章落在框內正中央，沒蓋章時框本身就是「蓋章處」的視覺提示。 */
  .receipt-stamp-field{
    position:relative;
    width:148px; height:148px;
    margin:16px 0 4px auto;
    border:1.5px dashed rgba(176,101,95,.38);
    border-radius:10px;
    display:grid; place-items:center;
  }
  .receipt-stamp-caption{
    font-size:11px; letter-spacing:.3em;
    color:rgba(176,101,95,.62);
    pointer-events:none; user-select:none;
  }
  .receipt-stamp-field .receipt-stamp-layer{
    position:absolute; inset:0;
    overflow:visible; border-radius:inherit;
  }
  .receipt-stamp-field .receipt-stamp{
    right:auto; bottom:auto;
    left:50%; top:50%;
    margin:-59px 0 0 -59px;
  }
  @media(max-width:600px){
    .receipt-stamp-field{ width:126px; height:126px; }
    .receipt-stamp-field .receipt-stamp{ width:100px; height:100px; margin:-50px 0 0 -50px; }
  }

  /* ===== 估價單底部的確認欄＋蓋章處 ===== */
  .receipt-sign-row{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:22px; margin-top:14px; flex-wrap:wrap;
  }
  .receipt-sign-note{
    flex:1 1 220px; min-width:0;
    padding-top:6px;
    border-top:1px solid rgba(176,101,95,.22);
  }
  .receipt-sign-note p{
    margin:0 0 3px;
    font-size:11.5px; line-height:1.85; color:var(--text-dim);
  }
  .receipt-sign-title{
    font-weight:700; letter-spacing:.18em;
    color:rgba(176,101,95,.9) !important;
  }
  .receipt-sign-brand{
    margin-top:8px !important;
    font-weight:700; letter-spacing:.08em; color:#51416e !important;
  }
  .receipt-stamp-field{ margin:0 !important; flex:0 0 auto; }
  @media(max-width:600px){
    .receipt-sign-row{ gap:14px; }
    .receipt-sign-note{ flex:1 1 100%; }
    .receipt-stamp-field{ margin:0 0 0 auto !important; }
  }

  /* ===== 範例圖對照表（上＝上色方式、左＝背景類型）=====
     完全沒有框線：沒有底色（卡片的漸層與網點透上來）、沒有外框、沒有格線、
     沒有陰影，只剩座標軸的文字與縮圖本身。 */
  .price-row-gallery.has-axis{
    /* 左欄用固定寬度而不是 auto：auto 會被內容撐開，
       萬一有格子排錯位，整欄就會被圖片的原始寬度撐爆。 */
    grid-template-columns:var(--axis-w) repeat(4, minmax(0, 1fr));
    gap:0;
    padding-left:0;
    align-content:start;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  /* 漫畫只有一排、沒有列標，用內距墊出左欄，圖片才和其他卡對齊 */
  .price-row-gallery.has-axis.no-row-label{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    padding-left:var(--axis-w);
  }

  .price-axis-col,
  .price-axis-row,
  .price-axis-corner{
    background:transparent;
    font-size:11.5px; font-weight:700; letter-spacing:.1em;
    color:rgba(94,80,130,.78);
  }
  .price-axis-col,
  .price-axis-row{ display:flex; align-items:center; }
  .price-axis-col{
    justify-content:center;
    padding:8px 4px;
  }
  .price-axis-row{
    justify-content:center;
    padding:0 8px;
    /* BG_LABELS 給的是「素材
背景」，靠 pre-line 斷成兩行 */
    white-space:pre-line;
    text-align:center;
    line-height:1.4;
  }
  .price-axis-corner{ display:block; }

  /* 表格裡的縮圖：留內距不要貼著格線，hover 改成極淡的墨紫底，不再整格浮起來 */
  .price-row-gallery.has-axis .price-thumb{
    padding:6px;
    border-radius:0;
    background:transparent;
    transition:background-color .18s ease;
  }
  .price-row-gallery.has-axis .price-thumb:hover{
    transform:none;
    background:rgba(116,99,148,.09);
  }
  /* 沒有圖的格子放全站共用的佔位圖（見 commission-media.js），淡一點不要搶戲 */
  .price-row-gallery.has-axis .price-thumb img[data-reference-placeholder]{
    opacity:.62;
  }
  @media(max-width:700px){
    .price-row-gallery.has-axis{ border-radius:8px; }
    .price-axis-col, .price-axis-row{ font-size:10px; letter-spacing:.04em; }
    .price-axis-col{ padding:6px 2px; }
    .price-axis-row{ padding:0 4px; }
    .price-row-gallery.has-axis .price-thumb{ padding:4px; }
  }

  /* ===== 同意委託提醒的打勾 ===== */
  /* 原生 checkbox 畫不出筆跡，所以關掉它的外觀、自己畫框，
     勾勾用 SVG 疊在上面，靠 stroke-dashoffset 從起筆畫到收筆。
     取消勾選時同一條 transition 會倒著跑，等於把筆跡擦掉。 */
  #commissionModal .commission-agreement .agree-box{
    position:relative; flex:0 0 auto;
    width:22px; height:22px; margin-top:1px;
  }
  #commissionModal .commission-agreement #commissionRulesAccepted{
    appearance:none; -webkit-appearance:none;
    display:block; width:22px; height:22px; margin:0;
    border:1.6px solid rgba(176,101,95,.5);
    border-radius:4px;
    background:#FFFCF7;
    cursor:pointer;
    transition:border-color .2s ease, background-color .2s ease;
  }
  #commissionModal .commission-agreement #commissionRulesAccepted:hover{
    border-color:rgba(176,101,95,.85);
  }
  #commissionModal .commission-agreement #commissionRulesAccepted:checked{
    border-color:#B0655F;
    background:rgba(176,101,95,.08);
  }
  /* 勾勾比方框大一點、往左上溢出，才像手寫而不是對齊格線印上去的 */
  #commissionModal .commission-agreement .agree-check{
    position:absolute; left:-2px; top:-3px;
    width:26px; height:26px;
    pointer-events:none;
    fill:none; stroke:#B0655F; stroke-width:2.8;
    stroke-linecap:round; stroke-linejoin:round;
    /* 路徑實長約 19.9，dasharray 取 20 讓筆畫剛好在動畫結束時收尾 */
    stroke-dasharray:20; stroke-dashoffset:20;
    transition:stroke-dashoffset .45s cubic-bezier(.62,.05,.28,1);
  }
  #commissionModal .commission-agreement #commissionRulesAccepted:checked + .agree-check{
    stroke-dashoffset:0;
  }
  @media(prefers-reduced-motion:reduce){
    #commissionModal .commission-agreement .agree-check{ transition:none; }
  }

  /* ===== 委託各品項的開放與名額（commission-availability.js；設定在試算表「網站設定」） ===== */
  /* 標題旁的狀態：剩幾名、部分暫停（例如「正比 暫停接單」） */
  /* 狀態吊牌那一列：佔滿一整行，排在標題下面 */
  .price-availability-row{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:2px; }
  .price-availability-row .price-availability{ align-self:auto; }
  /* 小吊牌：左邊尖角＋綁繩小孔 */
  .price-availability{
    position:relative;
    align-self:center;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 11px 2px 15px;
    clip-path:polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
    border-radius:0 5px 5px 0;
    background:linear-gradient(180deg, #7a68b8, #5d4f93);
    color:#fff;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.05em;
    line-height:1.7;
    white-space:nowrap;
    text-shadow:0 1px 0 rgba(30,20,60,.25);
    filter:drop-shadow(0 1px 2px rgba(50,35,95,.35));
  }
  .price-availability::before{
    content:'';
    flex:none;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#fff;
    box-shadow:inset 0 1px 1px rgba(30,20,60,.45);
  }
  .price-availability[data-state="closed"]{
    background:linear-gradient(180deg, #c8615a, #a3443f);
  }

  /* 整張暫停：右上角掛一塊木牌（跟轉蛋屋的 OPEN 木牌同一套木頭） */
  .price-row{ position:relative; }
  .price-row.is-unavailable::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    background:rgba(118,114,128,.16);
    pointer-events:none;
  }
  .price-row.is-unavailable .price-row-info > :not(.price-closed-sign){ opacity:.6; filter:grayscale(.75); }
  .price-row.is-unavailable .price-row-gallery{ filter:grayscale(.9); opacity:.62; }
  .price-closed-sign{
    /* 掛在文字欄右緣再往外推半個間距＝文字與圖片正中間（--price-gap 由 commission-availability.js 量好寫入） */
    position:absolute;
    top:26px;
    right:calc(var(--price-gap, 30px) / -2);
    translate:50% 0;
    z-index:4;
    /* 價目卡的子元素會被撐成整卡高度，木牌要照內容高度。
       新版 iPhone Safari 會對絕對定位元素套用對齊：只設 top 時預設往下拉到卡片底（手機上變成一條長木板），
       所以明確靠上、高度照內容。 */
    /* 不用 height:max-content：iPhone Safari 會把絕對定位元素的 max-content 高度算成整張卡的高度（2026-10-26 實機確認） */
    height:auto;
    bottom:auto;
    align-self:start;
    display:grid;
    justify-items:center;
    gap:2px;
    padding:9px 18px 10px;
    border-radius:6px;
    background:
      repeating-linear-gradient(100deg, transparent 0 5px, rgba(110,60,20,.12) 5px 6px, transparent 6px 13px, rgba(255,240,210,.12) 13px 14px, transparent 14px 22px),
      linear-gradient(170deg, #e0b27a, #cc9660 50%, #bd8752);
    box-shadow:inset 0 0 0 1px rgba(80,45,15,.35), inset 0 -4px 8px rgba(80,45,15,.18), 0 6px 10px rgba(0,0,0,.22);
    color:#3b2210;
    text-align:center;
    pointer-events:none;
    transform-origin:50% -22px;
    animation:price-sign-sway 6s ease-in-out infinite;
  }
  /* 掛繩：從木牌兩側往上匯合成「人」字形（漸層的等高線跟方向垂直：to top left 畫出「/」，to top right 畫出「\」） */
  .price-closed-sign::before{
    content:'';
    position:absolute;
    left:20%;
    right:20%;
    bottom:100%;
    height:22px;
    background:
      linear-gradient(to top left, transparent calc(50% - 1.3px), #8a6a45 calc(50% - 1.3px), #d8c39c calc(50% - .3px), #8a6a45 calc(50% + 1.3px), transparent calc(50% + 1.3px)) left bottom / 50% 100% no-repeat,
      linear-gradient(to top right, transparent calc(50% - 1.3px), #8a6a45 calc(50% - 1.3px), #d8c39c calc(50% - .3px), #8a6a45 calc(50% + 1.3px), transparent calc(50% + 1.3px)) right bottom / 50% 100% no-repeat;
  }
  /* 釘在卡片上的黃銅釘 */
  .price-closed-sign::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:calc(100% + 17px);
    width:10px;
    height:10px;
    margin-left:-5px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 32%, #fff4cf 0 12%, #d8b66a 38%, #9a7434 72%, #6e5124 100%);
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(80,55,20,.35);
  }
  .price-closed-sign b{
    font-family:'Noto Serif SC', serif;
    font-size:17px;
    font-weight:900;
    letter-spacing:.14em;
    text-indent:.14em;
    line-height:1.2;
    color:#8c2b1f;
    text-shadow:0 1px 0 rgba(255,232,195,.55), 0 -1px 0 rgba(60,30,10,.35);
    white-space:nowrap;
  }
  .price-closed-sign small{ font-size:11px; font-weight:700; color:#5a3a1c; letter-spacing:.08em; }
  .price-closed-sign small:empty{ display:none; }
  /* 量得到文字和圖片的位置時，改用量好的中點 */
  .price-closed-sign[style*="--sign-x"]{ left:var(--sign-x); top:var(--sign-y, 26px); right:auto; translate:-50% 0; }
  @keyframes price-sign-sway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(1.6deg); } }
  @media (max-width:760px){
    /* 手機上下排：掛在卡片右上角 */
    .price-closed-sign{ top:24px; right:0; translate:none; padding:7px 12px 8px; }
    .price-closed-sign b{ font-size:14px; }
    /* 木牌掛在右上角，標題右邊讓出位置，英文名才不會被蓋住 */
    .price-row.is-unavailable .price-row-head{ padding-right:100px; }
  }
  @media (prefers-reduced-motion:reduce){ .price-closed-sign{ animation:none; } }

  /* 四步驟精靈的類型卡 */
  /* 只讓圖和文字變灰，「暫停接單」木牌保持原色 */
  .archive-site #commissionModal .cw-type-card.is-unavailable,
  .cw-type-card.is-unavailable{
    cursor:not-allowed;
    box-shadow:none;
  }
  .cw-type-card.is-unavailable > :not(.cw-type-availability){ filter:grayscale(.9); opacity:.5; }
  .archive-site #commissionModal .cw-type-card.is-unavailable::before{ background:rgba(60,56,72,.35); }
  .archive-site #commissionModal .cw-type-card.is-unavailable:hover{ border-color:#ded9e8; box-shadow:none; }
  /* 放左上角：右上角是精靈原本的「已選」標籤 */
  .cw-type-availability{
    position:absolute;
    top:7px;
    left:7px;
    z-index:3;
    padding:3px 8px;
    border-radius:4px;
    background:rgba(255,255,255,.92);
    color:#665a9c;
    font-size:11.5px;
    font-weight:700;
    line-height:1.6;
  }
  /* 暫停：卡片正中間掛一塊小木牌（跟價目卡的木牌同一套），亮一點、不跟著變灰 */
  .cw-type-availability[data-state="closed"]{
    top:50%;
    left:50%;
    translate:-50% -50%;
    padding:6px 14px 7px;
    border-radius:6px;
    background:
      repeating-linear-gradient(100deg, transparent 0 5px, rgba(110,60,20,.1) 5px 6px, transparent 6px 13px, rgba(255,240,210,.16) 13px 14px, transparent 14px 22px),
      linear-gradient(170deg, #f0c993, #dca66c 50%, #cc9660);
    box-shadow:inset 0 0 0 1px rgba(80,45,15,.3), 0 4px 10px rgba(0,0,0,.28);
    color:#9a2a1e;
    font-size:13.5px;
    font-weight:900;
    letter-spacing:.12em;
    text-indent:.12em;
    text-shadow:0 1px 0 rgba(255,236,205,.7);
    white-space:nowrap;
  }

  /* 漫畫卡：文字比較長，右側範例圖改成在整張卡裡垂直置中 */
  .archive-site .price-row[data-imgkey="comic"] .price-row-gallery,
  .price-row[data-imgkey="comic"] .price-row-gallery{ align-content:center; }

  /* 委託頁段落小目錄（commission-events.js 產生）：捲動時固定在上方 */
  .commission-jump{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    gap:6px;
    margin:-8px 0 22px;
    padding:10px 2px;
    overflow-x:auto;
    scrollbar-width:none;
    background:linear-gradient(180deg, rgba(242,243,247,.97) 70%, rgba(242,243,247,0));
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
  .commission-jump::-webkit-scrollbar{ display:none; }
  .commission-jump a{
    flex:none;
    padding:6px 13px;
    border:1px solid #d9d5e8;
    border-radius:999px;
    background:#fff;
    color:#586377;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.03em;
    white-space:nowrap;
    text-decoration:none;
    transition:background .2s, color .2s, border-color .2s;
  }
  .commission-jump a:hover{ border-color:#b8adf0; color:#4d427c; }
  .commission-jump a.is-current{ background:#4d427c; border-color:#4d427c; color:#fff; }
  #commission .commission-tab .section-heading{ scroll-margin-top:72px; }
  @media (max-width:760px){
    /* 手機的導覽列在上方，小目錄接在它下面 */
    .commission-jump{ top:calc(56px + env(safe-area-inset-top)); margin:-10px -20px 18px; padding:8px 20px; }
    #commission .commission-tab .section-heading{ scroll-margin-top:calc(124px + env(safe-area-inset-top)); }
  }
  @media (max-width:360px){
    /* 小手機的頁面左右留白是 16px，小目錄的負邊距要跟著改，否則頁面可以左右滑 */
    .commission-jump{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  }

  /* 委託流程：手機上步驟會換行排成兩欄，排尾那一步的連接線會指向空白、還把頁面撐寬 2px，手機版不畫連接線 */
  @media (max-width:760px){
    #commission .flow-row .flow-step:not(:last-child)::after{ display:none; }
    #commission .flow-row{ row-gap:18px; }
    /* 一排三步：1 2 3／4 5 6／7 置中 */
    #commission .flow-row{ justify-content:center; }
    #commission .flow-row .flow-step{ flex:0 0 33.333%; min-width:0; padding:0 4px; }
    #commission .flow-row .flow-step p{ font-size:12px; }
  }
  @media (max-width:360px){
    #commission .flow-wrap{ padding-left:12px !important; padding-right:12px !important; }
    #commission .flow-row .flow-step{ padding:0 2px; }
    #commission .flow-row .flow-step p{ font-size:11px; letter-spacing:0; }
    .archive-site #commission .flow-row .flow-time{ font-size:11px !important; letter-spacing:0; }
  }