/* nBUN STUDIO - Pro CJK Typography Engine (V17) + Grid V7.5 */
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --font-hd: 'GEom', PingFang, Noto Sans TC, sans-serif;
  --font-bd: 'Hanken Grotesk', PingFang, Noto Sans TC, sans-serif;
  --font-mn: 'JetBrains Mono', PingFang, Noto Sans TC, monospace;
  --en-baseline: -0.01em;
  --lh-en: 1.25;
}

body { 
  font-family: var(--font-bd); 
  color: var(--color-text); 
  background: var(--color-bg);
  line-break: strict;
  font-feature-settings: normal;
  text-autospace: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: clip; 
}

.en { position: relative; top: var(--en-baseline); display: inline-block; }

.sys-body-en {
  font-family: var(--font-hd);
  font-size: clamp(0.875rem, calc(0.790rem + 0.426vw), 1.0625rem);
  line-height: var(--lh-en); margin-bottom: 1.25rem; max-width: 65ch;
}

/* Base Scale */
.sys-display { font-family: var(--font-hd); font-size: clamp(5.2rem, calc(3.927rem + 6.364vw), 8rem); font-weight: 500; line-height: 0.84; letter-spacing: -0.03em; margin: 0 0 1rem 0; }
.sys-h2 { font-family: var(--font-hd); font-size: clamp(1.6rem, calc(1.236rem + 1.818vw), 2.4rem); font-weight: 500; line-height: 1.2; letter-spacing: 0em; margin: 0 0 1rem 0; }
.sys-h3 { font-family: var(--font-hd); font-size: clamp(1rem, calc(0.909rem + 0.455vw), 1.2rem); font-weight: 500; line-height: 1.5; letter-spacing: 0em; margin: 0 0 1rem 0; }
.sys-body { font-family: var(--font-bd); font-size: clamp(0.875rem, calc(0.790rem + 0.426vw), 1.0625rem); font-weight: 400; line-height: 1.75; letter-spacing: 0em; margin: 0 0 1.25rem 0; }
.sys-body-sm { font-family: var(--font-bd); font-size: clamp(0.725rem, calc(0.697rem + 0.142vw), 0.7875rem); font-weight: 400; line-height: 1.7; letter-spacing: 0.03em; margin: 0 0 1.25rem 0; }
.sys-micro { font-family: var(--font-mn); font-size: clamp(0.55rem, calc(0.527rem + 0.114vw), 0.6rem); font-weight: 400; line-height: 1.55; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }

@media (min-width: 768px) {
  .sys-display { line-height: 0.95; }
  .sys-h3 { line-height: 1.8; }
  .sys-body { line-height: 1.8; margin-bottom: 1.2rem; }
  .sys-body-sm { letter-spacing: -0.01em; margin-bottom: 1.4rem; }
  .sys-micro { line-height: 1.4; letter-spacing: 0em; }
}

/* =========================================
   nBUN GRID SYSTEM (V7.5) - 終極懸停與背景引擎
   ========================================= */

.nbun-about-wrapper { 
    display: flex; 
    flex-direction: column; 
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box; 
    overflow-x: clip; 
}

/* 全域貫穿網格底圖 (保證線條 100% 到底部) */
.nbun-global-grid {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    pointer-events: none; z-index: 0;
}
.nbun-global-grid .ng-col { border-left: 1px solid var(--color-text); }
.nbun-global-grid .ng-col:first-child { border-left: none; }
@media (min-width: 768px) { .nbun-global-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nbun-global-grid { grid-template-columns: repeat(4, 1fr); } }

.nbun-row {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1; /* 蓋過全域網格 */
}

.nbun-row-full-vh { min-height: 100vh; }

.nbun-col {
    box-sizing: border-box;
    height: 100%; 
    position: relative;
}

/* 內層加入背景色支援與彈性排版 */
.nbun-col-inner {
    display: flex;
    flex-direction: column;
    padding: var(--pad-m, 2rem 1rem); 
    z-index: 10;
    /* 背景色若被設定，這層會直接變成有內距的完美色塊 */
}

.nbun-col.nbun-col-nopad .nbun-col-inner { padding: 0 !important; }

/* === 5 種網格風格 === */
.style-lines .nbun-row { border-bottom: 1px solid var(--color-text); }
.style-lines .nbun-col { border-left: 1px solid var(--color-text); }
.style-lines .nbun-col:first-child { border-left: none; }

.style-vertical .nbun-col { border-left: 1px solid var(--color-text); }
.style-vertical .nbun-col:first-child { border-left: none; }

/* 全域貫穿版本將實體列與欄框線隱藏，交由 nbun-global-grid 繪製 */
.style-vertical-pierce .nbun-row { border-bottom: none; }
.style-vertical-pierce .nbun-col { border-left: none; }

.style-horizontal-full .nbun-row { border-bottom: 1px solid var(--color-text); }

.style-horizontal-col .nbun-col::after {
    content: ''; position: absolute; bottom: 0;
    left: 1rem; right: 1rem; border-bottom: 1px solid var(--color-text);
}
@media (min-width: 768px) { .style-horizontal-col .nbun-col::after { left: 1.5rem; right: 1.5rem; } }
@media (min-width: 1024px) { .style-horizontal-col .nbun-col::after { left: 2rem; right: 2rem; } }
.style-horizontal-col .nbun-col.nbun-col-nopad::after { left: 0; right: 0; }

/* === 內容上下對齊引擎 === */
.nbun-content-flex-start { justify-content: flex-start; }
.nbun-content-center { justify-content: center; }
.nbun-content-flex-end { justify-content: flex-end; }

/* === 懸停模式引擎 (Sticky Behaviors) === */
.nbun-sticky-none .nbun-col-inner { height: 100%; }

/* 一碰到螢幕頂端就懸停 */
.nbun-sticky-top .nbun-col-inner { position: sticky; top: 0; height: auto; }

/* 在螢幕中央懸停 */
.nbun-sticky-center .nbun-col-inner { position: sticky; top: 25vh; height: auto; }

/* ✨ 關鍵新功能：隨滾輪正常捲動，看完「整個內容」後才在底部黏著 */
.nbun-sticky-bottom .nbun-col-inner { position: sticky; bottom: 0; height: auto; }


/* 水平對齊 */
.nbun-halign-left { text-align: left; align-items: flex-start; }
.nbun-halign-center { text-align: center; align-items: center; }
.nbun-halign-right { text-align: right; align-items: flex-end; }
.nbun-halign-center img, .nbun-halign-right img { margin-left: auto; }
.nbun-halign-center img { margin-right: auto; }

.nbun-content-block { width: 100%; margin-bottom: 1rem; }
.nbun-content-block:last-child { margin-bottom: 0; }

/* 允許手機版 3D 特效畫布正常上下滾動 */
.nbun-dancing-worms-wrapper, .nbun-ottots-wrapper, .nbun-sphere-tangle-wrapper, .nbun-sphere-spiral-wrapper, .nbun-trefoil-wrapper {
    touch-action: pan-y;
}

/* --- Mobile 佈局 (2欄) --- */
.nbun-row { grid-template-columns: repeat(2, 1fr); }
.nbun-m-1 { grid-column: span 1; }
.nbun-m-2 { grid-column: span 2; }

/* --- Tablet 佈局 (3欄) --- */
@media (min-width: 768px) {
    .nbun-col-inner { padding: var(--pad-t, 3rem 1.5rem); }
    .nbun-row { grid-template-columns: repeat(3, 1fr); }
    .nbun-t-1 { grid-column: span 1; }
    .nbun-t-2 { grid-column: span 2; }
    .nbun-t-3 { grid-column: span 3; }
}

/* --- Desktop 佈局 (4欄) --- */
@media (min-width: 1024px) {
    .nbun-col-inner { padding: var(--pad-d, 4rem 2rem); }
    .nbun-row { grid-template-columns: repeat(4, 1fr); }
    .nbun-d-1 { grid-column: span 1; }
    .nbun-d-2 { grid-column: span 2; }
    .nbun-d-3 { grid-column: span 3; }
    .nbun-d-4 { grid-column: span 4; }
}