/* 博庫風格 v1.0 | PDF p.1,2,6,8 | 960×540 基準畫布。
   套用至 class="boku-slide boku-cover" 等結構；圖片需另提供。
   字體、橙色據 PDF；幾何尺寸為近似重用設定。 */
:root {
  --boku-orange: #f29700;
  --boku-white: #fff;
  --boku-ink: #111;
  --boku-gray: #757575;
  --boku-font: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  --boku-radius: 14px;
}
.boku-slide, .boku-slide * { box-sizing: border-box; }
.boku-slide {
  position: relative; width: 960px; height: 540px; overflow: hidden;
  background: var(--boku-white); color: var(--boku-ink);
  font-family: var(--boku-font); font-size: 17px; line-height: 1.2;
}
.boku-slide h1, .boku-slide h2, .boku-slide p { margin: 0; }
.boku-slide img { object-fit: contain; }
.boku-cover::after, .boku-map::after {
  content: ""; position: absolute; inset: auto 0 0; height: 8px;
  background: var(--boku-orange);
}
/* 01: Logo + 公司名 + 口號 */
.boku-cover { text-align: center; }
.boku-cover .logo { position: absolute; left: 417px; top: 136px; width: 116px; height: 129px; }
.boku-cover .title { position: absolute; top: 295px; width: 100%; font-size: 40px; font-weight: 700; }
.boku-cover .tagline { position: absolute; top: 353px; width: 100%; font-size: 30px; font-weight: 700; color: var(--boku-orange); }
/* 02: 品牌側帶 + 履歷 + 去背人像 */
.boku-profile .brand-rail { position: absolute; inset: 0 auto 0 0; width: 71px; background: var(--boku-orange); }
.boku-profile .brand-rail .logo { position: absolute; bottom: 22px; left: 13px; width: 43px; height: 46px; }
.boku-profile .heading { position: absolute; top: 30px; left: 110px; color: var(--boku-orange); font-size: 30px; font-weight: 700; }
.boku-profile .books { position: absolute; left: 410px; top: 38px; width: 220px; height: 90px; display: flex; gap: 6px; }
.boku-profile .books img { min-width: 0; max-width: 32%; height: 100%; }
.boku-profile .biography { position: absolute; left: 106px; top: 104px; width: 480px; height: 342px; margin: 0; padding-left: 26px; font-size: 17px; }
.boku-profile .credentials { position: absolute; left: 105px; top: 452px; width: 480px; height: 52px; display: flex; justify-content: space-between; gap: 16px; }
.boku-profile .credentials img { min-width: 0; max-width: 38%; height: 100%; }
.boku-profile .portrait { position: absolute; left: 625px; top: 35px; width: 315px; height: 505px; object-position: bottom; }
/* 03: 頂部問句 + 插畫 + 九宮格 */
.boku-pain .logo { position: absolute; left: 82px; top: 10px; width: 75px; height: 102px; }
.boku-pain .heading { position: absolute; left: 200px; top: 55px; font-size: 50px; font-weight: 700; color: var(--boku-orange); }
.boku-pain .panel { position: absolute; left: 13px; top: 126px; width: 933px; height: 408px; border-radius: 20px; background: #ff8b26; /* 可加原紋理 background-image */ }
.boku-pain .illustration { position: absolute; left: 0; top: 162px; width: 280px; height: 378px; z-index: 1; }
.boku-pain .grid { position: absolute; left: 270px; top: 143px; width: 646px; height: 380px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; }
.boku-pain .card { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; border-radius: 20px; background: white; color: var(--boku-orange); font-size: 24px; font-weight: 700; }
/* 04: 願景與服務架構；連線使用獨立 SVG，勿用文字字元拼箭頭。 */
.boku-map .vision, .boku-map .principle, .boku-map .pillar, .boku-map .service { background: var(--boku-orange); color: white; text-align: center; border-radius: var(--boku-radius); display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 700; }
.boku-map .vision { position: absolute; left: 398px; top: 27px; width: 245px; height: 104px; font-size: 30px; padding: 10px; }
.boku-map .vision small { font-size: 16px; }
.boku-map .principle { position: absolute; left: 398px; top: 134px; width: 245px; height: 42px; font-size: 25px; border-radius: 8px; }
.boku-map .pillars { position: absolute; left: 224px; top: 202px; width: 598px; height: 42px; display: flex; justify-content: space-between; }
.boku-map .pillar { width: 160px; border-radius: 8px; font-size: 20px; }
.boku-map .connectors { position: absolute; inset: 0; width: 960px; height: 540px; pointer-events: none; }
.boku-map .connectors path { stroke: var(--boku-orange); stroke-width: 1.5; fill: none; }
.boku-map .divider { position: absolute; left: 173px; top: 275px; width: 673px; border-top: 2px dashed var(--boku-orange); }
.boku-map .bridge { position: absolute; left: 320px; top: 251px; width: 505px; color: var(--boku-orange); text-align: center; font-size: 18px; font-weight: 700; }
.boku-map .columns { position: absolute; left: 186px; top: 314px; width: 660px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.boku-map .problem { height: 27px; margin-bottom: 11px; background: var(--boku-gray); color: white; text-align: center; border-radius: 5px; font-size: 18px; font-weight: 700; }
.boku-map .service { height: 73px; margin-bottom: 4px; padding: 6px; font-size: 24px; }
.boku-map .service small { font-size: 14px; }
.boku-map .logo { position: absolute; left: 48px; top: 393px; width: 96px; height: 105px; }
@media print { .boku-slide { break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
