*{-webkit-tap-highlight-color:transparent}
html{scrollbar-gutter:stable}
body{font-family:"Nunito","Noto Sans TC",system-ui,sans-serif; font-synthesis-weight:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-synthesis-weight:none; text-wrap:balance}
.font-display{letter-spacing:0.02em; line-height:1.15}
.font-hand{letter-spacing:0.04em; line-height:1}
.scrollbar-none::-webkit-scrollbar{display:none}
.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}
/* 統一卡片系統：hero 28px/3px/clay、section 22px/2.5px/claySm、item 20px/2.5px/claySm */
.clay-card{transition:transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease; cursor:pointer}
.clay-card:hover{transform:translateY(-1px)}
.clay-card:active{transform:translateY(3px) scale(0.99); box-shadow:0 2px 0 #2B2D42, 0 4px 12px rgba(43,45,66,0.08)}
.clay-btn{transition:transform 160ms cubic-bezier(.34,1.56,.64,1), box-shadow 160ms ease, filter 160ms ease; cursor:pointer}
.clay-btn:hover{filter:brightness(1.03)}
.clay-btn:active{transform:translateY(2px) scale(0.98); box-shadow:0 2px 0 #2B2D42 !important}
.day-pill{transition:all 180ms cubic-bezier(.34,1.56,.64,1); cursor:pointer}
.day-pill:hover{transform:translateY(-1px)}
.day-pill:active{transform:scale(0.96)}
.wavy{--mask: radial-gradient(12px at 50% 100%, transparent 98%, black 100%) 0 0 / 24px 12px repeat-x; -webkit-mask: var(--mask); mask: var(--mask)}
.confetti{background-image: radial-gradient(#2B2D42 1.2px, transparent 1.2px); background-size: 18px 18px; opacity:0.06}
:focus-visible{outline:2px solid #FF6B6B; outline-offset:2px}
/* ===== Landing 全螢幕貼紙牆剝落（A方案，手機優先） ===== */
#landing{position:fixed;inset:0;z-index:80;overflow:hidden;background:#FFF9F0}
#landing[aria-hidden="true"]{pointer-events:none}
.landing-paper{position:absolute;inset:0;background:
  radial-gradient(#2B2D42 1px,transparent 1px) 0 0/18px 18px,
  linear-gradient(180deg,#FFF9F0 0%,#FFF6E8 100%);opacity:1}
.landing-stickers{position:absolute;inset:0;display:block}
.sticker{position:absolute;background:#fff;border:2.5px solid #2B2D42;box-shadow:0 5px 0 #2B2D42,0 14px 28px rgba(43,45,66,.14);will-change:transform,opacity;display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:800;transform:rotate(var(--r,0deg));animation:sticker-float 2.4s ease-in-out infinite;min-width:110px;justify-content:center;text-align:center;overflow:visible}
.sticker--tag{border-radius:16px;padding-top:24px}
.sticker--tag::before{content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:26px;height:26px;background:#FFF9F0;border:2.5px solid #2B2D42;border-radius:999px;box-shadow:0 1px 0 #2B2D42;z-index:2}
.sticker--tag::after{content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:10px;height:10px;background:#2B2D42;border-radius:999px;margin-top:8px;z-index:3}
.tag-string{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:40px;height:20px;border:2.5px solid #2B2D42;border-bottom:none;border-radius:20px 20px 0 0;opacity:.95;pointer-events:none}
.sticker--hero{left:50%;top:45%;transform:translate(-50%,-50%) rotate(-1.2deg);border-radius:22px;padding:26px 20px 18px;flex-direction:column;align-items:flex-start;gap:6px;width:min(88vw,380px);box-shadow:0 10px 0 #2B2D42,0 28px 48px rgba(43,45,66,.18);animation:none;min-width:0}
.sticker--hero.sticker--tag::before{top:-14px;width:28px;height:28px}
.sticker--hero.sticker--tag::after{top:-14px;width:11px;height:11px;margin-top:8.5px}
.sticker--hero .tag-string{top:-28px;width:48px;height:22px;border-width:3px}
.sticker--vertical{flex-direction:column;justify-content:flex-start;gap:8px;padding:28px 12px 12px;min-width:108px;max-width:122px;min-height:138px;text-align:center;line-height:1.15}
.sticker--vertical .sticker-icon{width:40px;height:40px;display:grid;place-items:center;background:#fff;border:2px solid #2B2D42;border-radius:12px}
.sticker--circle{flex-direction:column;gap:6px;justify-content:center;width:88px;height:88px;min-width:88px;min-height:88px;padding:10px;border-radius:999px;text-align:center;line-height:1.1}
.sticker--circle .sticker-icon{width:36px;height:36px;display:grid;place-items:center}
.sticker--s{border-radius:16px;font-size:13px;min-width:128px;min-height:48px}
.sticker--m{border-radius:18px;font-size:14px;min-width:148px;min-height:56px;padding:14px 18px}
.sticker--l{border-radius:20px;font-size:15px;min-width:168px;min-height:62px;padding:14px 20px}
.sticker--pill{border-radius:999px;font-size:12px;padding:10px 16px;min-width:120px;min-height:44px}
@keyframes sticker-float{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(var(--r)) translateY(-4px)}}
.landing-open-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:#2B2D42;color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:800;letter-spacing:.02em;box-shadow:0 4px 0 #2B2D42;animation:hint-bob 1.3s ease-in-out infinite;cursor:pointer}
@keyframes hint-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
#landing.is-opening .sticker{animation:peel-off 620ms cubic-bezier(.32,1,.18,1) forwards}
#landing.is-opening .sticker:nth-child(1){animation-delay:340ms}
#landing.is-opening .sticker:nth-child(2){animation-delay:40ms}
#landing.is-opening .sticker:nth-child(3){animation-delay:90ms}
#landing.is-opening .sticker:nth-child(4){animation-delay:110ms}
#landing.is-opening .sticker:nth-child(5){animation-delay:60ms}
#landing.is-opening .sticker:nth-child(6){animation-delay:140ms}
#landing.is-opening .sticker:nth-child(7){animation-delay:80ms}
#landing.is-opening .sticker:nth-child(8){animation-delay:170ms}
#landing.is-opening .sticker:nth-child(9){animation-delay:20ms}
#landing.is-opening .sticker:nth-child(10){animation-delay:120ms}
#landing.is-opening .sticker:nth-child(11){animation-delay:160ms}
#landing.is-opening .landing-paper{animation:paper-fade 560ms ease forwards}
#landing.is-opening .landing-open-hint{animation:hint-out 180ms ease forwards}
@keyframes peel-off{0%{transform:rotate(var(--r)) translate(0,0) scale(1);opacity:1}30%{transform:rotate(calc(var(--r) + 10deg)) translate(var(--tx1,0),var(--ty1,0)) scale(1.06);opacity:1}100%{transform:rotate(calc(var(--r) + 22deg)) translate(var(--tx2,0),var(--ty2,0)) scale(0.92);opacity:0}}
@keyframes paper-fade{to{opacity:0}}
@keyframes hint-out{to{opacity:0;transform:translateX(-50%) translateY(8px)}}
.landing-skip{position:absolute;top:14px;right:14px;z-index:2;background:rgba(43,45,66,.08);border:1.5px solid rgba(43,45,66,.12);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;backdrop-filter:blur(8px)}
/* 桌面：放大 hero 與貼紙，收攏空白 */
@media(min-width:768px){
  .sticker--hero{width:460px;padding:34px 28px 26px}
  .sticker--hero .font-display{font-size:38px}
  .sticker--vertical{min-width:128px;max-width:144px;min-height:162px;padding:34px 14px 14px}
  .sticker--vertical .sticker-icon{width:46px;height:46px}
  .sticker--circle{width:104px;height:104px;min-width:104px;min-height:104px}
  .sticker--circle .sticker-icon{width:42px;height:42px}
  /* 收攏左右空白：桌機貼紙往中間靠，填滿 hero 兩側 */
  .landing-stickers .sticker:nth-child(2){left:16%!important;top:6%!important}
  .landing-stickers .sticker:nth-child(3){right:16%!important;top:6%!important}
  .landing-stickers .sticker:nth-child(4){left:12%!important;top:30%!important}
  .landing-stickers .sticker:nth-child(5){right:12%!important;top:28%!important}
  .landing-stickers .sticker:nth-child(6){left:12%!important;top:58%!important}
  .landing-stickers .sticker:nth-child(7){right:12%!important;top:56%!important}
  .landing-stickers .sticker:nth-child(8){left:18%!important;top:78%!important}
  .landing-stickers .sticker:nth-child(9){right:18%!important;top:76%!important}
}
.landing-stickers .sticker:nth-child(1){--r:-1.2deg}
.landing-stickers .sticker:nth-child(2){--r:-11deg}
.landing-stickers .sticker:nth-child(3){--r:13deg}
.landing-stickers .sticker:nth-child(4){--r:-9deg}
.landing-stickers .sticker:nth-child(5){--r:8deg}
.landing-stickers .sticker:nth-child(6){--r:-13deg}
.landing-stickers .sticker:nth-child(7){--r:10deg}
.landing-stickers .sticker:nth-child(8){--r:-7deg}
.landing-stickers .sticker:nth-child(9){--r:11deg}
.landing-stickers .sticker:nth-child(10){--r:-6deg}
.landing-stickers .sticker:nth-child(11){--r:-10deg}
/* 進場 stagger */
.reveal{opacity:0;transform:translateY(14px) scale(.98);will-change:transform,opacity}
.reveal.in{animation:reveal-in 520ms cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes reveal-in{to{opacity:1;transform:translateY(0) scale(1)}}
/* 切頁滑動 */
.view-enter{animation:view-in 360ms cubic-bezier(.22,1,.36,1) forwards}
.view-leave{animation:view-out 260ms ease forwards}
@keyframes view-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes view-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
/* 拖曳與按壓強化 */
.is-dragging{opacity:.92;transform:rotate(1.2deg) scale(1.02) !important;box-shadow:0 10px 0 #2B2D42,0 20px 32px rgba(43,45,66,.18) !important;z-index:10}
.day-pill.is-active-press{transform:scale(.96)}
/* 單日拖曳插入線 */
.drop-target{border-color:#FF6B6B !important; box-shadow:0 4px 0 #FF6B6B, 0 8px 20px rgba(255,107,107,.18) !important; position:relative}
.drop-target-before::before,
.drop-target-after::after{
  content:""; position:absolute; left:8px; right:8px; height:3px;
  background:#FF6B6B; border-radius:999px; z-index:2;
}
.drop-target-before::before{ top:-8px; }
.drop-target-after::after{ bottom:-8px; }
.drag-over{ background:#2B2D42 !important; color:#fff !important; border-color:#2B2D42 !important; }
.drag-over-list{ outline:2.5px dashed #FF6B6B; outline-offset:4px; border-radius:22px; background:rgba(255,107,107,.06); min-height:48px; }
.drag-handle{ touch-action:none; }
.drag-handle:active{ cursor:grabbing; transform:scale(0.96); }
.clay-card:has(.drag-handle:hover){ border-color:#2B2D42; }
@media(prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
@media(hover:none){ .clay-card:hover{transform:none} .day-pill:hover{transform:none} }
@media(max-width:380px){ .landing-book-wrap{width:88vw} }