*,*::before,*::after{box-sizing:border-box}
html,body,div,span,h1,h2,h3,h4,p,a,img,ul,li,figure,figcaption,article,section,header,footer,nav,video,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:none}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{cursor:pointer;color:inherit}

:root{
  --red:#a41f24;
  --red-soft:rgba(255,9,9,.1);
  --black:#000;
  --black2:#3b3b3b;
  --gray:#c0c0c0;
  --gray2:#919191;
  --paper:#f8f7f5;
  --serif:'Noto Serif TC',serif;
  --en:'Libre Baskerville','Noto Serif TC',serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:10px; /* 設計稿統一圓角 */
}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* 背景固定在視窗，不隨內容捲動 */
.pageBg{position:fixed;inset:0;z-index:-1;background:var(--paper) url(../../images/cst/bg_fixed.webp) center top/cover no-repeat;pointer-events:none}
body{font-family:var(--serif);color:var(--black);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.outerWrap{position:relative;overflow:clip}
.wrap{width:100%;max-width:1500px;margin:0 auto;padding-left:15px;padding-right:15px}
@media(max-width:1180px){.wrap{padding-left:30px;padding-right:30px}}
@media(max-width:768px){.wrap{padding-left:20px;padding-right:20px}}


/* 共用標題 */
.titleBox{text-align:center}
.titleBox .icon{width:34px;margin:0 auto 22px}
.titleBox .title{font-size:24px;line-height:1.5;letter-spacing:.12em}
.titleBox .enTitle{margin-top:8px;font-family:var(--en);font-size:14px;letter-spacing:.04em}
.titleBox .text{margin-top:28px;font-size:15px;line-height:1.9;color:var(--black2);letter-spacing:.06em}
@media(max-width:768px){
  .titleBox .title{font-size:20px}
  /* 標題分段不拆開，只在段落之間換行，避免單字落單（Safari 不會在全形逗號後斷行，故不用 keep-all） */
  .titleBox .title span{display:inline-block}
  .titleBox .enTitle{font-size:12px}
  .titleBox .text{font-size:14px;text-align:left}
  .titleBox .text br{display:none}
}

/* 說明卡（設計標註） */
/* 依設計稿 Frame 49/50 數值，--n 為設計稿 1px 的實際長度 */
.noteCard{--n:1px;position:absolute;z-index:5;width:calc(281 * var(--n));padding:calc(19.5 * var(--n)) calc(30 * var(--n)) calc(22 * var(--n));background:#fff;border:1px solid #ad2931;border-radius:5px;color:#000}
.noteCard .noteTitle{font-size:calc(20 * var(--n));line-height:calc(31 * var(--n));font-weight:500;letter-spacing:.05em}
.noteCard .noteLine{height:1px;background:rgba(0,0,0,.3);margin:calc(11.5 * var(--n)) 0 calc(7.5 * var(--n));transform-origin:left}
.noteCard .noteText{font-size:calc(16 * var(--n));line-height:calc(28 * var(--n));font-weight:500;letter-spacing:.05em}
.noteLead{position:absolute;z-index:4;overflow:visible;pointer-events:none}
.noteLead polyline{fill:none;stroke:#ad2931;stroke-width:1}
.noteLead circle{fill:var(--red)}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:318px;max-width:100%;height:48px;padding:0 32px;background:var(--red);color:#fff;font-size:14px;letter-spacing:.2em;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:#000;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn span{position:relative;z-index:1}
.btn:hover::after{transform:translateY(0)}
.btn.line{background:none;color:var(--black);border:1px solid var(--gray)}
.btn.line::after{background:var(--black)}
.btn.line:hover{color:#fff}


/* 拖曳游標 */
.dragCursor{position:fixed;left:0;top:0;z-index:60;width:71px;height:71px;margin:-35.5px 0 0 -35.5px;pointer-events:none}
.dragCursor .inner{width:100%;height:100%;border:1px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:7px;opacity:0;transform:scale(.3);transition:opacity .35s var(--ease),transform .45s var(--ease),background .35s,color .35s;background:rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.dragCursor .arrowL,.dragCursor .arrowR{width:6px;height:6px;border-left:1px solid currentColor;border-bottom:1px solid currentColor}
.dragCursor .arrowL{transform:rotate(45deg)}
.dragCursor .arrowR{transform:rotate(-135deg)}
.dragCursor .dot{width:2px;height:2px;border-radius:50%;background:currentColor}
.dragCursor.is-show .inner{opacity:1;transform:scale(1)}
.dragCursor.is-down .inner{transform:scale(.78);background:#000;color:#fff}
@media(hover:none){.dragCursor{display:none}}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}