/* ============================================================
   八大核心 方法論頁 / 首頁區塊
   命名以 mdl- 開頭，只在 #mandala-page 與 .mdl-teaser 內生效。
   色彩：CI 靛藍沿用 --cnvs-themecolor；八管面向漸層另定義於此。
   ============================================================ */
:root {
  --mdl-g-ms: linear-gradient(135deg, #ff7a3d, #ff3d9a);
  --mdl-g-hc: linear-gradient(135deg, #ff3d9a, #ff5b6e);
  --mdl-g-pd: linear-gradient(135deg, #00c2b2, #9fe84a);
  --mdl-g-fn: linear-gradient(135deg, #ffb800, #ff7a3d);
  --mdl-g-rd: linear-gradient(135deg, #7b4dff, #3da8ff);
  --mdl-g-gv: linear-gradient(135deg, #0b0f2a, #7b4dff);
  --mdl-g-it: linear-gradient(135deg, #3da8ff, #00c2b2);
  --mdl-g-mg: linear-gradient(135deg, #ff5b6e, #7b4dff);
  --mdl-g-ink: linear-gradient(135deg, #0B0F2A, var(--cnvs-themecolor) 55%, #2A2A9C);
  --mdl-ink: #0B0F2A;
  --mdl-muted: #6B7187;
  --mdl-line: var(--cnvs-box-border);
  --mdl-r: 16px;
  --mdl-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 共用 ---------- */
#mandala-page .intro-title { margin-bottom: 24px; }
.mdl-lead { font-size: calc(var(--cnvs-font-size-body) + 2px); line-height: 1.8; letter-spacing: 1px; color: #333; max-width: 40em; margin: 0 auto 28px; }
.mdl-sub { font-size: var(--cnvs-font-size-body); line-height: 1.75; letter-spacing: 1px; color: var(--mdl-muted); max-width: 44em; margin-bottom: 32px; }
.mdl-cap { font-size: calc(var(--cnvs-font-size-body) - 4px); color: var(--mdl-muted); line-height: 1.7; margin: 20px auto 0; max-width: 46em; text-align: center; }
.mdl-chars { display: flex; justify-content: center; gap: clamp(10px, 2.2vw, 22px); margin: 8px 0 44px; }
.mdl-chars span { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 主曼陀羅 3×3 ---------- */
.mdl-master-wrap { max-width: 640px; margin: 0 auto; }
.mdl-master { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mdl-tile { aspect-ratio: 1; border-radius: var(--mdl-r); background: var(--g); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; box-shadow: 0 4px 20px rgba(25, 25, 112, .12); transition: transform .25s var(--mdl-ease), box-shadow .25s var(--mdl-ease); }
a.mdl-tile:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(11, 15, 42, .4); }
.mdl-tile-n { font-size: 11px; letter-spacing: .14em; opacity: .75; }
.mdl-tile-ch { font-size: clamp(30px, 5.4vw, 48px); font-weight: 700; line-height: 1; }
.mdl-tile-nm { font-size: 13px; opacity: .95; margin-top: 4px; }
.mdl-tile-en { font-size: 10px; letter-spacing: .16em; opacity: .75; text-transform: uppercase; }
.mdl-core { background: var(--mdl-g-ink); gap: 4px; }
.mdl-core-logo { width: 34%; height: auto; margin-bottom: 6px; }
.mdl-core-name { font-size: clamp(16px, 2.4vw, 22px); font-weight: 600; line-height: 1.1; letter-spacing: .02em; }
.mdl-core-tag { font-size: 11px; letter-spacing: .18em; opacity: .75; }

/* ---------- 三個軸 ---------- */
.mdl-axis { height: 100%; background: #fff; border: 1px solid var(--mdl-line); border-radius: var(--mdl-r); padding: 32px 30px 28px; box-shadow: 0 4px 20px rgba(217, 217, 246, .6); transition: transform .25s var(--mdl-ease); }
.mdl-axis:hover { transform: translateY(-4px); }
.mdl-axis-icon { width: 72px; height: 72px; color: var(--cnvs-themecolor); margin-bottom: 22px; }
.mdl-axis-icon svg { width: 100%; height: 100%; display: block; }
.mdl-axis h3 { font-size: 26px; font-weight: 600; margin-bottom: 10px; color: var(--mdl-ink); letter-spacing: 1px; }
.mdl-axis h3 small { display: block; font-size: 13px; font-weight: 400; color: var(--mdl-muted); letter-spacing: .1em; margin-top: 2px; }
.mdl-axis p { font-size: calc(var(--cnvs-font-size-body) - 2px); line-height: 1.75; color: #444; margin: 0; }

/* ---------- 六十四格 SVG ---------- */
.mdl-svg { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.mdl-svg text { font-family: var(--cnvs-body-font); font-weight: 500; pointer-events: none; }
.mdl-svg .sub text { font-size: 10.6px; fill: #2B3044; }
.mdl-svg .sub rect { fill: #fff; stroke: var(--mdl-line); stroke-width: 1; transition: fill .18s, stroke .18s; }
.mdl-svg .asp rect { stroke: none; }
.mdl-svg .asp text { font-size: 12.5px; font-weight: 700; fill: #fff; }
.mdl-svg .core text { fill: #fff; font-weight: 600; font-size: 10.5px; }
.mdl-svg .core .en { font-size: 7px; letter-spacing: .12em; opacity: .75; font-weight: 500; }
.mdl-svg .sub { cursor: pointer; }
.mdl-svg .sub:hover rect { stroke: var(--c); }
.mdl-svg .sub.on rect { fill: var(--g); stroke: none; }
.mdl-svg .sub.on text { fill: #fff; font-weight: 600; }
.mdl-svg .sub.dim { opacity: .45; }
@keyframes mdl-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
.mdl-svg.anim .cell { opacity: 0; }
.mdl-svg.anim.go .cell { transform-box: fill-box; transform-origin: center; animation: mdl-pop .6s var(--mdl-ease) forwards; animation-delay: calc(var(--d) * 1ms); }
@media (prefers-reduced-motion: reduce) { .mdl-svg.anim .cell { opacity: 1; animation: none; } }

/* ---------- 面板 ---------- */
.mdl-panel { position: sticky; top: calc(var(--cnvs-header-height) + 24px); background: #fff; border: 1px solid var(--mdl-line); border-radius: var(--mdl-r); overflow: hidden; box-shadow: 0 4px 20px rgba(217, 217, 246, .6); }
.mdl-panel .bar { height: 5px; background: var(--g); }
.mdl-panel .ph { padding: 22px 26px 18px; border-bottom: 1px solid var(--mdl-line); }
.mdl-panel .code { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; color: var(--mdl-muted); }
.mdl-panel .code i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--g); }
.mdl-panel h3 { font-size: 26px; font-weight: 700; margin: 8px 0 2px; color: var(--mdl-ink); }
.mdl-panel .asp { font-size: 13px; color: var(--mdl-muted); }
.mdl-panel .asp b { color: #2B3044; font-weight: 500; }
.mdl-panel .pb { padding: 20px 26px 24px; }
.mdl-panel .def { font-size: 16px; font-weight: 500; color: var(--mdl-ink); line-height: 1.7; margin-bottom: 10px; }
.mdl-panel .why { font-size: 14px; line-height: 1.7; padding: 12px 16px; border-left: 3px solid var(--cnvs-themecolor); background: #EEF0FA; border-radius: 0 10px 10px 0; margin: 12px 0 18px; color: #2B3044; }
.mdl-panel h4 { font-size: 12px; letter-spacing: .16em; color: var(--mdl-muted); font-weight: 500; margin: 16px 0 8px; }
.mdl-panel ul { list-style: none; padding: 0; margin: 0; }
.mdl-panel .pains li { font-size: 13.5px; padding: 9px 12px; border-radius: 10px; background: #FFF5F5; border: 1px solid #F5D9D8; color: #7A2E2B; margin-bottom: 6px; }
.mdl-panel .lv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mdl-panel .lv div { padding: 12px 14px; border-radius: 10px; background: var(--cnvs-section-bg); border: 1px solid var(--mdl-line); font-size: 13px; line-height: 1.65; }
.mdl-panel .lv div b { display: block; font-size: 11px; letter-spacing: .14em; color: var(--cnvs-themecolor); margin-bottom: 4px; }
.mdl-panel .nav { display: flex; justify-content: space-between; padding: 12px 26px; border-top: 1px solid var(--mdl-line); background: var(--cnvs-section-bg); font-size: 13px; }
.mdl-panel .nav button { background: none; border: 0; color: var(--cnvs-themecolor); font-weight: 500; cursor: pointer; padding: 0; }

/* ---------- 經營循環 ---------- */
.mdl-loop { height: 100%; background: #fff; border: 1px solid var(--mdl-line); border-radius: var(--mdl-r); padding: 26px 26px 24px; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(217, 217, 246, .6); }
.mdl-loop::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--g); }
.mdl-loop-n { display: inline-block; font-size: 26px; font-weight: 600; line-height: 1; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.mdl-loop h3 { font-size: 22px; font-weight: 600; margin-bottom: 6px; color: var(--mdl-ink); }
.mdl-loop p { font-size: calc(var(--cnvs-font-size-body) - 3px); line-height: 1.7; color: #444; margin: 0; }

/* ---------- 心法 ---------- */
.mdl-creed { height: 100%; background: #fff; border: 1px solid var(--mdl-line); border-radius: var(--mdl-r); padding: 30px 28px 26px; }
.mdl-creed-n { font-size: 13px; letter-spacing: .2em; color: #A0A6B8; display: block; margin-bottom: 14px; }
.mdl-creed h3 { font-size: 21px; font-weight: 600; line-height: 1.55; color: var(--cnvs-themecolor); margin-bottom: 8px; }
.mdl-creed p { font-size: calc(var(--cnvs-font-size-body) - 3px); color: #555; line-height: 1.7; margin: 0; }

/* ---------- CTA ---------- */
.mdl-cta { background: var(--mdl-g-ink); color: #fff; border-radius: 28px; padding: 56px 56px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.mdl-cta::after { content: ""; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(123, 77, 255, .45), transparent 70%); }
.mdl-cta-txt { position: relative; z-index: 1; }
.mdl-cta .section-title { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.mdl-cta h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; line-height: 1.4; margin-bottom: 14px; letter-spacing: 1px; }
.mdl-cta p { font-size: calc(var(--cnvs-font-size-body) - 2px); opacity: .85; line-height: 1.75; max-width: 32em; margin-bottom: 26px; }
.mdl-cta-art { position: relative; z-index: 1; display: flex; justify-content: center; }
.mdl-mini { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; width: min(100%, 260px); aspect-ratio: 1; }
.mdl-mini i { display: block; border-radius: 4px; background: rgba(255, 255, 255, .14); animation: mdl-glow 4s ease-in-out infinite; animation-delay: var(--d); }
.mdl-mini i:nth-child(7n+3) { background: rgba(255, 122, 61, .8); }
.mdl-mini i:nth-child(11n+5) { background: rgba(0, 194, 178, .8); }
.mdl-mini i:nth-child(13n+9) { background: rgba(255, 184, 0, .8); }
.mdl-mini i:nth-child(17n+2) { background: rgba(123, 77, 255, .9); }
@keyframes mdl-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- 首頁 teaser ---------- */
.mdl-teaser { display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: 48px; align-items: center; }
.mdl-teaser .mdl-master { gap: 9px; }
.mdl-teaser .mdl-tile-ch { font-size: clamp(26px, 3.6vw, 36px); }
.mdl-teaser .mdl-tile-en { display: none; }
.mdl-teaser-txt p { font-size: var(--cnvs-font-size-body); line-height: 1.75; letter-spacing: 1px; color: #444; margin: 0 0 24px; }
.mdl-teaser-facts { display: flex; gap: 28px; margin: 24px 0 28px; flex-wrap: wrap; }
.mdl-teaser-facts b { display: block; font-size: 32px; font-weight: 600; color: var(--cnvs-themecolor); line-height: 1.1; }
.mdl-teaser-facts span { font-size: 13px; color: var(--mdl-muted); }

/* ---------- RWD ---------- */
@media (max-width: 991.98px) {
  .mdl-cta { grid-template-columns: 1fr; padding: 40px 32px; }
  .mdl-cta-art { display: none; }
  .mdl-teaser { grid-template-columns: 1fr; gap: 32px; }
  .mdl-teaser .mdl-master-wrap { max-width: 420px; }
  .mdl-panel { position: static; margin-top: 8px; }
}
@media (max-width: 575.98px) {
  .mdl-master { gap: 8px; }
  .mdl-tile-en { display: none; }
  .mdl-tile-nm { font-size: 11.5px; }
  .mdl-axis { padding: 24px 22px 22px; }
  .mdl-axis h3 { font-size: 22px; }
  .mdl-panel .ph, .mdl-panel .pb { padding-left: 18px; padding-right: 18px; }
  .mdl-panel .lv { grid-template-columns: 1fr; }
  .mdl-panel h3 { font-size: 22px; }
  .mdl-cta { padding: 32px 22px; border-radius: 20px; }
  .mdl-svg .sub text { font-size: 9.6px; }
}