/* nBUN STUDIO - Pro CJK Typography Engine + Grid (V8.9 透明背景版) */
: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;
}

.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; }
.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; }
}

.sys-body-editor p { margin: 0 0 1.25rem 0; line-height: 1.75; }
.sys-body-editor ul, .sys-body-editor ol { margin: 0 0 1.25rem 1.5rem; line-height: 1.75; }
.sys-body-editor li { margin-bottom: 0.5rem; }
.sys-body-editor a { text-decoration: underline; text-underline-offset: 3px; color: inherit; transition: opacity 0.3s; }
.sys-body-editor a:hover { opacity: 0.6; }
.sys-body-editor hr { border: none; border-top: 1px solid var(--nbun-line-color, var(--color-text)); margin: 2.5rem 0; width: 100%; }
.sys-body-editor strong, .sys-body-editor b { font-weight: 600; }

/* 解除結界與防護罩 */
body, #wrapper, #inner-wrap, #main, #primary, #content, .site-content, article, .entry-content, .wp-block-post-content { overflow: visible !important; }
.nbun-anti-push-shield { margin: 0 !important; padding: 0 !important; width: 100%; }
.wp-site-blocks > .nbun-anti-push-shield:first-child,
.entry-content > .nbun-anti-push-shield:first-child { margin-top: -2rem !important; }

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

/* 🌟 巨型列覆蓋特效 (取消強制白底與陰影，恢復透明) */
.nbun-row { 
    display: grid; grid-template-columns: repeat(var(--grid-cols-m, 2), 1fr); 
    width: 100%; margin: 0; padding: 0; position: relative; 
    z-index: 2;
    background-color: transparent; /* 🌟 恢復透明 */
}

/* 當後台勾選「整列懸停」時，這列會降階並黏在頂部，等著被一般列蓋過去 */
.nbun-row-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1; 
}

/* 網格全域背景線必須在最上面 */
.nbun-global-grid { 
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; 
    display: grid; grid-template-columns: repeat(var(--grid-cols-m, 2), 1fr); 
    pointer-events: none; 
    z-index: 50 !important; 
}
.nbun-global-grid .ng-col { border-left: 1px solid var(--nbun-line-color, var(--color-text)); }
.nbun-global-grid .ng-col:first-child { border-left: none; }

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

.nbun-col { box-sizing: border-box; height: 100%; position: relative; display: flex; flex-direction: column; }
.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; }

.style-lines .nbun-row { border-bottom: 1px solid var(--nbun-line-color, var(--color-text)); }
.style-lines .nbun-col { border-left: 1px solid var(--nbun-line-color, var(--color-text)); }
.style-lines .nbun-col:first-child { border-left: none; }
.style-vertical .nbun-col { border-left: 1px solid var(--nbun-line-color, var(--color-text)); }
.style-vertical .nbun-col:first-child { border-left: none; }
.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(--nbun-line-color, var(--color-text)); }
.style-horizontal-col .nbun-col::after {
    content: ''; position: absolute; bottom: 0;
    left: 1rem; right: 1rem; border-bottom: 1px solid var(--nbun-line-color, 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; }

/* 內部欄位懸停系統 */
.nbun-col-inner.nbun-sticky-none { height: 100%; }
.nbun-col-inner.nbun-sticky-top,
.nbun-col-inner.nbun-sticky-center,
.nbun-col-inner.nbun-sticky-bottom { height: max-content; position: -webkit-sticky; position: sticky; z-index: 20; }
.nbun-col-inner.nbun-sticky-bottom { margin-top: auto; }
.nbun-col-inner.nbun-sticky-top { top: 0; }
.nbun-col-inner.nbun-sticky-center { top: 25vh; }
.nbun-col-inner.nbun-sticky-bottom { bottom: 0; }

.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; }
.nbun-dancing-worms-wrapper, .nbun-ottots-wrapper, .nbun-sphere-tangle-wrapper, .nbun-sphere-spiral-wrapper, .nbun-trefoil-wrapper { touch-action: pan-y; }

.nbun-m-1 { grid-column: span 1; }
.nbun-m-2 { grid-column: span 2; }
.nbun-m-3 { grid-column: span 3; }
.nbun-m-4 { grid-column: span 4; }
.nbun-m-5 { grid-column: span 5; }
.nbun-m-6 { grid-column: span 6; }
.nbun-m-7 { grid-column: span 7; }
.nbun-m-8 { grid-column: span 8; }
.nbun-m-9 { grid-column: span 9; }
.nbun-m-10 { grid-column: span 10; }
.nbun-m-11 { grid-column: span 11; }
.nbun-m-12 { grid-column: span 12; }

@media (min-width: 768px) {
    .nbun-col-inner { padding: var(--pad-t, 3rem 1.5rem); }
    .nbun-row { grid-template-columns: repeat(var(--grid-cols-t, 3), 1fr); }
    .nbun-global-grid { grid-template-columns: repeat(var(--grid-cols-t, 3), 1fr); }
    .nbun-t-1 { grid-column: span 1; }
    .nbun-t-2 { grid-column: span 2; }
    .nbun-t-3 { grid-column: span 3; }
    .nbun-t-4 { grid-column: span 4; }
    .nbun-t-5 { grid-column: span 5; }
    .nbun-t-6 { grid-column: span 6; }
    .nbun-t-7 { grid-column: span 7; }
    .nbun-t-8 { grid-column: span 8; }
    .nbun-t-9 { grid-column: span 9; }
    .nbun-t-10 { grid-column: span 10; }
    .nbun-t-11 { grid-column: span 11; }
    .nbun-t-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
    .nbun-col-inner { padding: var(--pad-d, 4rem 2rem); }
    .nbun-row { grid-template-columns: repeat(var(--grid-cols-d, 4), 1fr); }
    .nbun-global-grid { grid-template-columns: repeat(var(--grid-cols-d, 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; }
    .nbun-d-5 { grid-column: span 5; }
    .nbun-d-6 { grid-column: span 6; }
    .nbun-d-7 { grid-column: span 7; }
    .nbun-d-8 { grid-column: span 8; }
    .nbun-d-9 { grid-column: span 9; }
    .nbun-d-10 { grid-column: span 10; }
    .nbun-d-11 { grid-column: span 11; }
    .nbun-d-12 { grid-column: span 12; }
}