@charset "utf-8";
/*
 * marketing.net4p.com 樣式
 *
 * @version 1.2.03
 * @date    2026-08-21（台北）
 *
 * 變更記錄
 *   1.2.03  2026-08-21  表頭在任何寬度都維持「左 logo、右 諮詢與邀約＋電話」，
 *                       拿掉 420px 以下讓電話換行的規則；
 *                       主標改成保證單行（見 .hero .thesis）。
 *   1.2.02  2026-08-21  表頭只留 logo，站名文字的樣式一併移除。
 *   1.2.01  2026-08-21  表頭改成 logo + 站名兩欄；
 *                       ★ 站名加 white-space: nowrap ★（見下）。
 *   1.2.00  2026-08-21  新增。取代舊的 style.css（table 版面用的色塊 class）。
 *
 * 設計依據
 *   配色沿用網站原本的識別色，不是重新發明：
 *     #061f3e 深藍  舊 .TableDark，about.php 說「藍色系表示網際網路的資訊技術能力」
 *     #2175bf 藍    舊 .TableLight
 *     #6f7200 橄欖  舊站用來標「創意、效率、服務、紀律、執行」的顏色
 *     #0095b5 青    舊站用來標「還沒發生的課程」
 *   字體用系統中文字型堆疊，不載外部字型 ——
 *   主機沒有 opcache 而且在共享環境，能少一次連線就少一次。
 *
 *   標誌性元素：「ing」。
 *   這個站的核心論點是 Marketing = Market + ing（行銷是市場的現在進行式），
 *   所以站名、標題的 ing 一律用橄欖色斜體，整站重複同一個手法。
 */

:root {
  --navy:      #061f3e;
  --navy-soft: #143257;
  --blue:      #2175bf;
  --olive:     #6f7200;
  --olive-lt:  #8a8d13;
  --cyan:      #0095b5;
  --bg:        #eef1f5;
  --card:      #ffffff;
  --line:      #d5dde6;
  --text:      #23303f;
  --muted:     #5d6b7a;

  --wrap: 1120px;
  --radius: 4px;

  --f-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
            "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --f-num:  "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

a { color: var(--blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--olive-lt);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------- 標誌 ing */
.ing {
  color: var(--olive-lt);
  font-style: italic;
  font-weight: 600;
}

/* ---------------------------------------------------------- 頁首 */
.masthead {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--olive);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px;
}
/* 表頭只有 logo（1.2.02 起）。
   ⚠ 1.2.01 曾經在這裡放「Marketing 4P」文字，因為 body 的
     overflow-wrap: break-word 被繼承，站名會從字中間斷成三行。
     文字拿掉之後那個問題自然消失，但 overflow-wrap 還在 body 上，
     以後如果要在表頭放回任何文字，記得加 white-space: nowrap。 */
.brand {
  display: flex; align-items: center;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand > img {
  /* 手機略小、桌機 48px，但不論多窄都不縮到看不清楚 */
  width: clamp(38px, 11vw, 48px);
  height: clamp(38px, 11vw, 48px);
  display: block; border-radius: 3px;
}
.masthead .tel {
  font-size: clamp(.72rem, 2.6vw, .82rem);
  color: #a9bdd4; text-align: right;
  margin: 0; flex: 0 1 auto; min-width: 0;
  line-height: 1.4;
}
.masthead .tel a {
  color: #fff; white-space: nowrap;
  font-size: 1.08em; font-weight: 700;
}

/* ⚠ 1.2.02 曾經有一條「420px 以下讓電話掉到第二行」的規則，
   1.2.03 拿掉了 —— 帥哥松要的是任何寬度都維持左右一列。
   算過最窄的情況（320px）：
     logo 38px ＋ gap 16px ＋ 電話區塊約 70px = 124px，
   離 280px 的可用寬度還很遠，不會擠在一起。 */

/* ---------------------------------------------------------- 主選單 */
.nav { background: var(--navy-soft); }
.nav ul {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block; white-space: nowrap;
  padding: 13px 18px;
  color: #d6e2f0; font-size: .96rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; text-decoration: none; border-bottom-color: var(--olive-lt); }
.nav a[aria-current="page"] {
  color: #fff; font-weight: 700; border-bottom-color: var(--olive-lt);
  background: rgba(255,255,255,.06);
}

/* ---------------------------------------------------------- 版面 */
main { padding: 28px 0 48px; }

.page-title {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 700; color: var(--navy); line-height: 1.3;
}
.page-lead { margin: 0 0 24px; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card + .card { margin-top: 20px; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* min-width:0 是必要的，否則長字串會把格子撐開（規範沿用自 mycs 第二十一章） */
.grid > * { min-width: 0; }

.side-layout {
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .side-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ---------------------------------------------------------- 首頁 */
.hero {
  background: var(--navy);
  color: #fff;
  padding: clamp(36px, 7vw, 72px) 0;
}
.hero .thesis {
  margin: 0;
  font-weight: 700; line-height: 1.25;

  /* ★ 這一行不可以換行 ★（帥哥松 2026-08-21）
     「Marketing = Market + ing」是這個站的論點本身，
     斷成兩行就看不出它是一個等式。

     所以字級直接綁在視窗寬度上（vw），而不是用固定的 rem 下限 ——
     只要字級跟可用寬度等比例，這一行就永遠塞得下。
     1.2.02 的寫法 clamp(1.9rem, …) 有一個 1.9rem 的硬下限，
     視窗再窄字也不會再小，於是在 375px 上就換行了。

     6.2vw 是量出來的，不是估的：
     用 fontTools 讀 Noto Sans CJK TC Bold 的 hmtx 表，逐字加總
     「Marketing = Market + ing」連同 .eq 的四個 .18em 邊距，
     實際寬度是 12.864 em。各寬度下的餘裕（.wrap 左右各 20px）：

       視窗    可用    字級    行寬    餘裕
       320px   280    19.8    255     +25
       375px   335    23.2    299     +36
       414px   374    25.7    330     +44
       768px   728    47.6    613    +116
      1280px  1240    54.4    700    +540

     最窄的 320px 還有 8.9% 餘裕。 */
  font-size: clamp(1.05rem, 6.2vw, 3.4rem);
  white-space: nowrap;
  letter-spacing: 0;
}
.hero .thesis .eq {
  color: #6f86a3; font-weight: 400;
  /* 邊距也要跟著字級縮，用 em 不要用 px */
  margin: 0 .18em;
}
/* 安全網：萬一某個裝置的字型比預估寬，寧可切掉一點點，
   也不要讓整頁多出一條橫向捲軸。正常情況不會用到。 */
.hero { overflow: hidden; }
.hero p {
  margin: 18px 0 0; max-width: 46ch;
  color: #c2d2e4; font-size: 1.02rem;
}
.hero .cta {
  display: inline-block; margin-top: 26px;
  background: var(--olive); color: #fff;
  padding: 12px 26px; border-radius: var(--radius);
  font-weight: 700;
}
.hero .cta:hover { background: var(--olive-lt); text-decoration: none; }

.tally {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  overflow: hidden; margin: 0;
}
.tally div { background: var(--card); padding: 18px 20px; }
.tally dt { font-size: .82rem; color: var(--muted); letter-spacing: .06em; }
.tally dd {
  margin: 2px 0 0;
  font-family: var(--f-num);
  font-size: 1.9rem; font-weight: 700; color: var(--navy);
}

/* ---------------------------------------------------------- 清單 */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list a.row {
  display: block; padding: 14px 2px; color: var(--text);
}
.list a.row:hover { background: #f6f9fc; text-decoration: none; }
.list .t { font-weight: 700; color: var(--navy); }
.list a.row:hover .t { color: var(--blue); }
.list .m { font-size: .84rem; color: var(--muted); margin-top: 3px; }

.tag {
  display: inline-block; font-size: .74rem; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px;
  background: #e6edf5; color: var(--navy-soft); vertical-align: 2px;
}
.tag.live { background: var(--cyan); color: #fff; }
.tag.past { background: #e8e9d8; color: var(--olive); }

/* ---------------------------------------------------------- 卡片項目 */
.item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #dde4ec; }
.item .body { padding: 14px 16px 18px; flex: 1; }
.item h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--navy); line-height: 1.45; }
.item .m { font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------- 著作列 */
/* 規範第二十一章：頁內 <style> 會蓋掉共用樣式的手機版規則，
   所以斷點一律寫在這一支，不要寫在頁面裡。 */
.book-row { display: grid; gap: 24px; align-items: start; }
@media (min-width: 640px) {
  .book-row { grid-template-columns: 160px minmax(0, 1fr); }
}
.book-row img { border: 1px solid var(--line); }

/* 兩欄清單。手機一定要是單欄，否則 CJK 會被壓成極窄的字條 */
.cols-2 { columns: 1; }
@media (min-width: 700px) { .cols-2 { columns: 2; column-gap: 36px; } }
.cols-2 li { break-inside: avoid; border-bottom: 0; padding: 4px 0; }

/* ---------------------------------------------------------- 內文 */
.prose { font-size: 1.03rem; }
.prose img { margin: 18px 0; border-radius: var(--radius); }
.prose a { text-decoration: underline; }
.prose h2 { color: var(--navy); font-size: 1.25rem; margin: 2em 0 .6em; }

.article-head { border-bottom: 2px solid var(--olive); padding-bottom: 14px; margin-bottom: 22px; }
.article-meta { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.article-meta span + span::before { content: "・"; color: var(--line); }

.figure-right { float: none; margin: 0 0 18px; }
@media (min-width: 700px) {
  .figure-right { float: right; width: 300px; margin: 4px 0 18px 24px; }
}

/* ---------------------------------------------------------- 側欄 */
.side h2 {
  font-size: .88rem; letter-spacing: .1em; color: var(--olive);
  margin: 0 0 10px; text-transform: uppercase;
}
.side .card { padding: 18px; }
.side ul { list-style: none; margin: 0; padding: 0; font-size: .94rem; }
.side li + li { margin-top: 8px; }

/* ---------------------------------------------------------- 表單 */
.search-form { display: flex; gap: 8px; }
.search-form input[type=search] {
  flex: 1; min-width: 0;
  padding: 10px 12px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--navy); color: #fff;
  padding: 10px 20px; border-radius: var(--radius);
  font: inherit; font-weight: 700;
}
.btn:hover { background: var(--navy-soft); text-decoration: none; }
.btn.olive { background: var(--olive); }
.btn.olive:hover { background: var(--olive-lt); }

mark { background: #fdf3c3; color: inherit; padding: 0 2px; }

/* ---------------------------------------------------------- 分頁 */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 28px; font-size: .94rem; color: var(--muted);
}
.pager a {
  border: 1px solid var(--line); background: #fff;
  padding: 8px 16px; border-radius: var(--radius);
}
.pager a:hover { border-color: var(--blue); text-decoration: none; }

/* ---------------------------------------------------------- 頁尾 */
.foot {
  background: var(--navy); color: #a9bdd4;
  padding: 34px 0; font-size: .88rem; margin-top: 40px;
}
.foot a { color: #d6e2f0; }
.foot .cols {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.foot h2 { font-size: .8rem; letter-spacing: .12em; color: var(--olive-lt); margin: 0 0 8px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot .copy {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 26px; padding-top: 16px; font-size: .82rem;
}

/* ---------------------------------------------------------- 影片 */
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--radius); overflow: hidden;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------- 動效 */
@media (prefers-reduced-motion: no-preference) {
  .nav a, .item, .list a.row { transition: all .16s ease; }
  .item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(6,31,62,.1); }
}

/* ---------------------------------------------------------- 列印 */
@media print {
  .masthead, .nav, .foot, .pager, .side, .hero .cta { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .card { border: 0; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}