/* ═══════════════════════════════════════════════════════════
   KLAS 資源庫（IG Funnel）— /resources
   ───────────────────────────────────────────────────────────
   設計方向：KLAS DS ＋ Apple-adjacent editorial
   Apple 味嚟自三樣：大量留白、標題字距收緊、一個 accent 到底。
   唔做漸變、唔做 AI 紫、唔做三張等寬卡。

   卡片參考 budarina.design/prompts（用戶指定）：圖片主導、大圓角、
   圖上疊白色藥丸。但佢啲卡冇標題（圖本身就係內容），KLAS 係中文
   教學，單靠圖睇唔出講乜，所以標題摺落圖下面。

   ⚠️ 全部樣式 scope 喺 .kr 底下，唔好污染其他頁。
   ═══════════════════════════════════════════════════════════ */

.kr {
  /* ── 顏色（跟 DS tokens）── */
  /* DS 主藍。⚠️ 唔好用 #0046CC 做一般文字藍：嗰隻係「落砂色專用」
     嘅深一階，放喺白底會顯得暗沉（用戶 2026-09-12 指正）。
     暖砂底嗰個訊息文字先用 --kr-blue-onwarm。 */
  --kr-blue:        #0057FF;
  --kr-blue-onwarm: #0046CC;
  --kr-blue-soft:   #EEF3FF;
  --kr-ink:       #17191E;
  --kr-t2:        #6B7178;
  --kr-t3:        #9197A0;
  --kr-page:      #F6F7F8;
  --kr-card:      #FFFFFF;
  --kr-line:      #E2E4E8;
  --kr-line-2:    #D4D7DD;
  --kr-warm:      #EDE5DA;
  --kr-warm-line: #D3C5B1;
  --kr-warm-t2:   #54595F;

  /* ── 圓角規則（用戶 2026-09-12：唔好樣樣都 pill）──
     掣（動作）  → pill 999，跟 DS「全站掣一律 pill」
     輸入框      → 8px 方角
     容器／nav   → 14px
     圖上小標籤  → pill（細，讀落係 tag 唔係掣）           */
  --kr-r-pill: 999px;
  --kr-r-card: 14px;
  --kr-r-input: 8px;
  --kr-r-sm:   8px;
  --kr-r-xs:   6px;

  --kr-sh-sm: 0 1px 3px rgba(16,19,24,.06), 0 1px 2px rgba(16,19,24,.04);
  --kr-sh-md: 0 4px 16px rgba(16,19,24,.08), 0 2px 6px rgba(16,19,24,.05);
  --kr-sh-lg: 0 12px 32px rgba(16,19,24,.12), 0 4px 10px rgba(16,19,24,.06);

  --kr-ease: cubic-bezier(.22,.61,.36,1);

  --kr-display: 'Montserrat','Noto Sans TC','PingFang HK',sans-serif;
  --kr-sans:    'Outfit','Noto Sans TC','PingFang HK',sans-serif;

  /* 用戶 2026-09-12 決定唔做深色模式，呢頁鎖死淺色。
     color-scheme 要寫，否則 input／scrollbar 會跟系統變深。 */
  color-scheme: light;
  background: var(--kr-page);
  color: var(--kr-ink);
  font-family: var(--kr-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}


/* 中文斷行保護輸出嘅 span，冇呢條規則個 filter 等於白做 */
.kr .nb { white-space: nowrap; }

.kr *,.kr *::before,.kr *::after { box-sizing: border-box; }
/* ⚠️ hidden 屬性淨係 UA 樣式（display:none），任何 class 寫咗 display 都會壓過佢。
   .kr-modal 係 display:flex、.kr-card 係 display:block，兩個都用緊 el.hidden 去收埋，
   冇呢條規則就變成「JS 話收咗，畫面照樣見到」—— 彈窗關唔走、篩選收唔走張卡。
   所以凡係用 hidden 嘅元素，一律要呢條包底。 */
.kr [hidden], .kr-modal[hidden] { display: none !important; }
/* ⚠️ reset 用 :where() 令佢**零權重**。
   舊寫法 .kr p{margin:0} 係 (0,1,1)，會壓過 .kr-hero-sub (0,1,0) 呢類
   單 class 規則，令間距靜靜哋失效。中過四次，全部 reset 一律 :where() 斷尾。
   ⚠️ 第四次就係 .kr a{color:inherit}：彈窗個 CTA 由 <button> 改咗做 <a> 之後，
      .kr-btn-ink 嘅白字被呢條壓過，變成黑字落黑底，對比 1:1 完全睇唔到。 */
.kr :where(h1,h2,h3,h4) { font-family: var(--kr-display); color: var(--kr-ink); margin: 0; }
.kr :where(p) { margin: 0; }
.kr :where(a) { color: inherit; text-decoration: none; }
.kr :where(img) { max-width: 100%; display: block; }

/* 用戶 2026-09-12：索引頁同單篇頁左右要對齊。
   基準取單篇原本嘅文章欄闊度（760px），兩頁所有區塊（nav 除外）
   一律用同一條 measure，噉樣兩頁掃落去邊界完全一致。
   ⚠️ 單篇頁本身之前都唔一致（文章欄 760，但登記區同 footer 1080），
      一併校正。 */
/* 斷行控制：.kr-brm 淨係手機出，.kr-brd 淨係桌面出。
   ⚠️ 用 display 切換，唔好用 hidden 屬性 —— <br> 喺唔同瀏覽器對 hidden 反應唔一致。 */
.kr-brm { display: none; }
.kr-brd { display: inline; }
@media (max-width: 899px) {
  .kr-brm { display: inline; }
  .kr-brd { display: none; }
}

.kr-in { max-width: 840px; margin: 0 auto; padding: 0 40px; width: 100%; }
/* ⚠️ 用 margin 唔用 padding：section 之間嘅距離要統一（用戶 2026-09-19）。
   padding 唔會 collapse，相鄰兩個 section 就會變成 72+72=144，
   同「section 對 hero」「section 對 footer」嗰 72 唔一致。
   margin 會 collapse，任何兩個相鄰區塊之間都啱啱好 72。
   ⚠️ 所以模板入面唔可以再寫 inline padding-top 去 patch 個別 section。 */
.kr-sec { padding: 0; margin: 72px 0; }

/* ═══ 浮動藥丸 nav（budarina 嗰種）═══════════════════════════ */
/* fixed 唔佔流程空間，所以 hero 可以由頁頂 0 開始，
   個藥丸 nav 就會踩喺影片上面，頭頂唔會有白條（用戶 2026-09-13）。 */
.kr-nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 12px 0; }
/* 冇 hero 嘅頁（單篇）要自己留返 nav 嘅高度，否則內容會被蓋住 */
.kr-no-hero { padding-top: 92px; }
/* nav 唔跟內文個 840 measure，佢有自己嘅 1160 */
.kr-nav-wrap .kr-in { max-width: 1160px; }
.kr-nav {
  /* nav 維持 1160 闊，唔跟內文收窄：兩頁本身已經對齊，
     而且窄咗會令個藥丸 nav 睇落太細。 */
  max-width: 1160px; margin: 0 auto;
  /* 字標用絕對定位置中，兩邊按內容闊度排。
     ⚠️ 唔可以用 grid 1fr auto 1fr：手機窄嘅時候 1fr 會迫窄左邊個組，
        「資源庫」三個中文字會直排（實測 50x59px）。 */
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px;
  border-radius: var(--kr-r-card);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--kr-line);
  box-shadow: var(--kr-sh-sm);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
@media (prefers-reduced-transparency: reduce) {
  .kr-nav { background: var(--kr-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* 15px＝aiklas.com header 嘅字標高度（forum.css .header-logo svg），要統一 */
.kr-nav-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center;
}
.kr-nav-logo svg { height: 15px; width: auto; fill: var(--kr-ink); display: block; }
.kr-nav-side { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.kr-nav-link {
  font-size: 15px; font-weight: 500; color: var(--kr-t2);
  white-space: nowrap;   /* 唔加嘅話中文字會被迫到直排 */
  padding: 8px 14px; border-radius: var(--kr-r-pill);
  transition: color .18s var(--kr-ease), background .18s var(--kr-ease);
}
.kr-nav-link:hover { color: var(--kr-ink); background: var(--kr-blue-soft); }
@media (max-width: 600px) {
  .kr-nav { padding: 8px 8px 8px 16px; }
  .kr-nav-link { font-size: 14px; padding: 7px 11px; }
}

/* ═══ Hero ═══════════════════════════════════════════════════ */
/* ═══ Hero：全闊影片底 ═══════════════════════════════════════
   影片鋪滿成條 hero，文字疊喺上面。Hero 鎖死深色，
   跟首頁 hero 一樣唔會因為頁面其他部分係淺色而變。
   文字仍然收喺 .kr-in 嘅 760px measure 入面，同其他 section 對齊。 */
/* Hero：影片全片幅出，唔裁（用戶 2026-09-19）。
   容器比例同片一樣 16:9，所以 object-fit:cover 實際上冇裁到嘢。 */
.kr-hero { position: relative; background: #0A0B0F; }
.kr-hero-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.kr-hero-vid {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; background: #0A0B0F;
}
/* 桌面：文字置中喺「nav 底 → 影片底」呢段高度（用戶 2026-09-13）。
   ⚠️ padding-top 要等於浮動 nav 實高（92px），唔加就會偏高，
      因為 nav 係 fixed，唔佔位。 */
@media (min-width: 900px) {
  .kr-hero-copy {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center;
    padding-top: 92px;
  }
  .kr-hero-copy .kr-in { width: 100%; }
  /* 大標題同細字距離再收一半（用戶 2026-09-19）：
     136 → 95（收 30%）→ 48。文字整組置中，收窄呢個 gap
     等同把大標題向下推。 */
  .kr-hero-sub { margin-top: clamp(20px, 3.3vw, 48px); }
}
@media (max-width: 899px) {
  /* 手機跟擋頁 Hero 嘅做法（用戶 2026-09-13）：
     影片鋪滿成個 hero，文字直接踩喺片上面，唔可以出黑色純色底。
     ⚠️ 用 min-height 鎖 9:15 直度，唔用 aspect-ratio —
        文字高過個框嗰陣仍然要撐得開，唔可以裁走內容。 */
  .kr-hero {
    min-height: calc(100vw * 15 / 9);
    display: flex; align-items: center; overflow: hidden;
  }
  .kr-hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  /* 直度框裁嘅係左右，唔係上下，人物個頭照樣見到 */
  .kr-hero-vid { object-position: center; }
  .kr-hero-copy {
    position: relative; z-index: 2; width: 100%;
    padding: 104px 0 64px;
  }
  /* ⚠️ 要寫 .kr-hero .kr-hero-scrim：base 規則排喺呢個 media query 後面，
     同權重嘅話後面嗰條會贏，改極都冇反應。 */
  .kr-hero .kr-hero-scrim { background: rgba(8,10,14,.46); }
}
/* 白字要夠對比先睇得清（DS：可讀性排第一）。
   ⚠️ 用全畫面均勻遮色片（用戶 2026-09-19 指定），唔用漸變、唔用局部加深。
      .46 係實測出嚟嘅下限 —— 再淡就跌穿 AA。
      量法：隱藏文字影背景，六個影片時間點取最差 2% 像素，掃 390／430／1280／1512。
      換片就要重新量一次，新片亮度唔同，呢個數字唔通用。 */
.kr-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(8,10,14,.46);
}
.kr-hero-copy .kr-in { position: relative; }
.kr-hero h1 { color: #fff; }
.kr-hero .kr-hero-sub { color: rgba(255,255,255,.88); }
.kr-hero h1 {
  /* 手機下限由 34 提到 44（用戶 2026-09-12 要再大啲）。
     375px 內文闊 335px，「就是這樣輕鬆」六個字 44px 排得落。 */
  font-size: clamp(44px, 5.2vw, 56px); font-weight: 800;
  /* CJK 唔食得太緊字距，-.03em 落中文會擠。DS section 標題係 -.02em。 */
  line-height: 1.16; letter-spacing: -.02em; max-width: 15em;
}
.kr-hero-sub {
  /* 2026-09-19 再收一半：95 → 48 */
  margin-top: 48px; font-size: 17px; line-height: 1.75;
  color: var(--kr-t2); max-width: 34em;
}

/* ═══ 精選：1 大 + 2 細（唔可以三張等寬）═══════════════════ */
/* 精選格跟數量排，唔可以留空欄（得一項嘅時候空一半睇落似爛版） */
.kr-feat { display: grid; gap: 24px; }
.kr-feat-1 { grid-template-columns: 1fr; }
.kr-feat-2 { grid-template-columns: 1fr 1fr; }
.kr-feat-3 { grid-template-columns: 1.35fr 1fr; }
.kr-feat-side { display: grid; gap: 24px; align-content: start; }
@media (max-width: 860px) { .kr-feat { grid-template-columns: 1fr !important; } }

/* ═══ 篩選列 ═══════════════════════════════════════════════ */
/* 篩選列上方嘅區塊標題，話俾讀者知下面係咩。
   ⚠️ 字級要同登記區個 h2 一模一樣（用戶 2026-09-19），
      改其中一個就要兩個一齊改。 */
.kr-bar-t {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em;
  color: var(--kr-ink); margin-bottom: 20px;
}
.kr-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-bottom: 28px;
}
/* 兩行 sorting 之間收一半（用戶 2026-09-12）。
   最後一行同卡片格之間嘅 28px 維持唔變。 */
.kr-bar-stacked { padding-bottom: 14px; }
/* 用戶 2026-09-12：pill 掣排幾行要統一長度，唔可以一長一短。
   min-width 令一般 2 至 4 個中文字嘅 chip 對齊，長標籤會自然撐大。 */
.kr-chip {
  font-size: 15px; font-weight: 500; color: var(--kr-t2);
  background: var(--kr-card); border: 1px solid var(--kr-line);
  border-radius: var(--kr-r-pill); padding: 9px 18px; cursor: pointer;
  min-width: 108px; text-align: center;
  transition: all .18s var(--kr-ease);
}
.kr-chip:hover { border-color: var(--kr-line-2); color: var(--kr-ink); }
.kr-chip.on { background: var(--kr-blue-soft); border-color: transparent; color: var(--kr-blue); font-weight: 600; }
.kr-searchwrap { position: relative; flex: 1 1 200px; min-width: 190px; margin-left: auto; display: block; }
.kr-searchico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: var(--kr-t3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.kr-search {
  width: 100%;
  font-family: var(--kr-sans); font-size: 16px; color: var(--kr-ink);
  background: var(--kr-card); border: 1px solid var(--kr-line);
  border-radius: var(--kr-r-input); padding: 11px 16px 11px 42px;
}
.kr-search::placeholder { color: var(--kr-t3); }
.kr-search:focus { outline: 2px solid var(--kr-blue); outline-offset: 1px; border-color: transparent; }

/* ═══ 卡片：16:9 圖全出血 ＋ 圖上藥丸 ＋ 標題喺下 ═══════════ */
.kr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .kr-grid { grid-template-columns: 1fr; } }

.kr-card {
  display: block; background: var(--kr-card);
  border: 1px solid var(--kr-line); border-radius: var(--kr-r-card);
  overflow: hidden; box-shadow: var(--kr-sh-sm);
  transition: transform .22s var(--kr-ease), box-shadow .22s var(--kr-ease);
}
.kr-card:hover { transform: translateY(-2px); box-shadow: var(--kr-sh-md); }
.kr-card:active { transform: translateY(0); }

.kr-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kr-page); }
/* ⚠️ 要排除 .kr-toolico，否則工具 logo 都會被撐到 100%（實測遮咗成張卡）。 */
.kr-cover img:not(.kr-toolico) { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--kr-ease); }
.kr-card:hover .kr-cover img:not(.kr-toolico) { transform: scale(1.03); }

/* 圖上藥丸：白底深字，抄 budarina */
/* 用戶 2026-09-12：要細啲、左右 padding 多啲。
   ⚠️ 字級停喺 14px，唔可以再細：DS 明文「10–13px 全站禁用」，
      理由係部分會員視力較差，可讀性排第一。
      所以改為減字重同上下 padding 令佢睇落纖細啲，橫向就加闊。 */
.kr-pill {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: #17191E;
  background: rgba(255,255,255,.94); border-radius: var(--kr-r-pill);
  padding: 4px 20px; box-shadow: var(--kr-sh-sm);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* 用戶 2026-09-12：圓方角、唔要 shadow、唔要白邊 */
/* 用戶 2026-09-19：icon 要同隔籬個 pill 齊上下大小。
   實測 pill 高 33px，所以 icon 都鎖 33px，bottom 同 pill 一樣 12px。
   ⚠️ 改 pill 嘅字級或 padding 就要重新量返呢個數。 */
.kr-toolico {
  position: absolute; bottom: 12px; left: 14px;
  width: 33px; height: 33px; object-fit: cover;
  border-radius: var(--kr-r-sm);
}

/* 用戶 2026-09-12：要多啲空間感，左右尤其。數值跟 DS 8px grid。 */
.kr-card-body { padding: 24px 32px 32px; }
.kr-card-t {
  font-family: var(--kr-display); font-size: 18px; font-weight: 700;
  line-height: 1.45; letter-spacing: -.01em; color: var(--kr-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 精選大卡：同一套卡，淨係標題大啲 */
.kr-feat-main .kr-card-t { font-size: 22px; }
.kr-feat-main .kr-card-body { padding: 32px 40px 40px; }

/* ═══ 空狀態 ═══════════════════════════════════════════════ */
.kr-empty { padding: 64px 20px; text-align: center; color: var(--kr-t2); }
.kr-empty p { font-size: 17px; }

/* ═══ 掣 ═══════════════════════════════════════════════════ */
.kr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--kr-sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 28px; border-radius: var(--kr-r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: all .18s var(--kr-ease);
}
.kr-btn:active { transform: translateY(1px); }
/* 全頁唯一實心藍：單篇頁嘅下載 PDF */
.kr-btn-blue { background: var(--kr-blue); color: #fff; }
.kr-btn-blue:hover { background: #0046CC; }
/* 表單提交：實心墨黑，唔犯「一頁一粒藍掣」規則 */
.kr-btn-ink { background: var(--kr-ink); color: var(--kr-page); }
.kr-btn-ink:hover { opacity: .88; }
/* 次要：外框 */
.kr-btn-ghost { background: transparent; color: var(--kr-ink); border-color: var(--kr-line-2); }
.kr-btn-ghost:hover { border-color: var(--kr-ink); }
.kr-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* ═══ 軟性登記區（暖砂底，全頁唯一一次暖色）═══════════════ */
.kr-signup {
  background: var(--kr-warm); border: 1px solid var(--kr-warm-line);
  border-radius: var(--kr-r-card); padding: 48px 48px;
}
.kr-signup h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.kr-signup p { margin-top: 48px; font-size: 16px; color: var(--kr-warm-t2); max-width: 38em; }
.kr-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.kr-form input[type=email] {
  flex: 1 1 260px; font-family: var(--kr-sans); font-size: 16px; color: var(--kr-ink);
  background: #fff; border: 1px solid var(--kr-warm-line);
  border-radius: var(--kr-r-input); padding: 13px 18px;
}
.kr-form input[type=email]::placeholder { color: var(--kr-t3); }
.kr-form input[type=email]:focus { outline: 2px solid var(--kr-blue); outline-offset: 1px; }
.kr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kr-form-msg { margin-top: 14px; font-size: 15px; color: var(--kr-blue-onwarm); font-weight: 600; }
@media (max-width: 600px) { .kr-signup { padding: 32px 22px; } }

/* ═══ Hero 向上箭嘴 ═══════════════════════════════════════
   純裝飾，唔可以撳（用戶 2026-09-19）。冇 shadow、冇底色（用戶 2026-09-19）。
   ⚠️ bottom 用 max()：桌面 Hero 係 16:9，喺 1512px 闊就有 850px 高，
      比一般視窗高，箭嘴貼 Hero 底就會跌出第一屏之外，要拉返入視窗底。
      公式 = 「貼 Hero 底」同「貼視窗底」兩者取近嗰個。
      用 dvh 唔用 vh：手機地址列收放會令 vh 失準。 */
.kr-cue {
  position: absolute; left: 50%; z-index: 3;
  bottom: max(26px, calc(100% - 100dvh + 26px));
  margin-left: -15px; pointer-events: none;
  display: block; color: #fff;
  animation: kr-bob 1.5s ease-in-out infinite;
}
.kr-cue svg {
  width: 30px; height: 30px; display: block;
  stroke: currentColor; fill: none;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes kr-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .kr-cue { animation: none; } }
@media (max-width: 899px) { .kr-cue { bottom: max(20px, calc(100% - 100dvh + 20px)); } }

/* ═══ 登記成功彈窗 ═══════════════════════════════════════════
   目的係講清楚下一步（用戶 2026-09-19），唔淨係講「成功」。
   ⚠️ 主掣用墨黑唔用實心藍：單篇頁已經有一粒實心藍嘅下載掣，
      DS 明文每頁只可以有一粒。 */
.kr-modal { position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.kr-modal-bg { position: absolute; inset: 0; background: rgba(12,14,20,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.kr-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--kr-card); border: 1px solid var(--kr-line);
  border-radius: var(--kr-r-card); padding: 40px 40px 32px;
  box-shadow: var(--kr-sh-lg);
  animation: kr-pop .22s var(--kr-ease) both;
}
@keyframes kr-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .kr-modal-card { animation: none; } }
.kr-modal-x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--kr-r-pill);
  color: var(--kr-t3); cursor: pointer;
}
.kr-modal-x:hover { background: var(--kr-page); color: var(--kr-ink); }
.kr-modal-x svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; }
.kr-modal-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--kr-blue-soft); color: var(--kr-blue); margin-bottom: 20px;
}
.kr-modal-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kr-modal-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kr-modal-lead { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--kr-t2); }
.kr-modal-steps {
  margin-top: 22px; padding-left: 1.25em;
  font-size: 15px; line-height: 1.7; color: var(--kr-t2);
}
.kr-modal-steps li + li { margin-top: 10px; }
.kr-modal-act { display: flex; margin-top: 28px; }
@media (max-width: 600px) {
  .kr-modal-card { padding: 32px 22px 24px; }
  .kr-modal-act .kr-btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══ Footer ═══════════════════════════════════════════════ */
.kr-foot {
  border-top: 1px solid var(--kr-line); padding: 32px 0 48px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--kr-t3);
}
.kr-foot a { color: var(--kr-t2); }
.kr-foot a:hover { color: var(--kr-ink); }

/* ═══════════════════════════════════════════════════════════
   單篇資源頁
   ═══════════════════════════════════════════════════════════ */
.kr-article { max-width: 100%; margin: 0 auto; }
.kr-bc { font-size: 14px; color: var(--kr-t3); padding: 28px 0 0; }
.kr-bc a:hover { color: var(--kr-ink); }
.kr-bc .sep { margin: 0 8px; }
/* 用戶 2026-09-12：下面本來有粒同名 badge，重複咗，拆走咗。
   類型改為淨係喺麵包屑度出，用主藍標示現行位置。 */
.kr-bc .cur { color: var(--kr-blue); font-weight: 600; }

.kr-head { padding: 28px 0 8px; }
.kr-head h1 {
  margin-top: 12px; font-size: clamp(28px, 4.4vw, 44px); font-weight: 800;
  line-height: 1.2; letter-spacing: -.025em;
}
.kr-head-sub { margin-top: 72px; font-size: 17px; line-height: 1.8; color: var(--kr-t2); }
.kr-meta { margin-top: 20px; font-size: 14px; color: var(--kr-t3); display: flex; gap: 18px; flex-wrap: wrap; }

.kr-hero-img { margin: 32px 0 8px; border-radius: var(--kr-r-card); overflow: hidden; aspect-ratio: 16 / 9; }
.kr-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.kr-dl { margin: 28px 0 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kr-dl-note { font-size: 14px; color: var(--kr-t3); }

/* 文章內文 */
.kr-content { font-size: 17px; line-height: 1.9; color: #3D424A; padding: 8px 0 0; }
/* ⚠️ 一定要寫 .kr .kr-content，唔係 .kr p{margin:0} 會壓過佢，段落會黐埋。 */
.kr .kr-content > * + * { margin-top: 22px; }
/* 用戶 2026-09-19：文章內嘅小標題用機構藍，令長文一眼分到段落 */
.kr .kr-content h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 60px; margin-bottom: 10px; line-height: 1.35;
  color: var(--kr-blue);
}
.kr .kr-content h3 {
  font-size: 20px; font-weight: 700; margin-top: 44px; margin-bottom: 8px; line-height: 1.4;
  color: var(--kr-blue);
}
/* 重點段落：淺藍底、藍字方塊。用嚟開篇或者總結，令長文有層次。
   ⚠️ 顏色唔可以自己配 —— #0057FF 落 #EEF3FF 實測 4.96:1，啱啱過 AA，
      底色再深少少就唔夠。 */
.kr .kr-content .kr-note {
  background: var(--kr-blue-soft);
  border-radius: var(--kr-r-card);
  padding: 28px 32px;
  margin-top: 28px;
  color: var(--kr-blue);
}
.kr .kr-content .kr-note p { color: var(--kr-blue); }
.kr .kr-content .kr-note > * + * { margin-top: 18px; }
.kr .kr-content .kr-note strong { color: var(--kr-blue); }
@media (max-width: 600px) { .kr .kr-content .kr-note { padding: 22px 20px; } }

.kr-content ul, .kr-content ol { padding-left: 1.4em; }
.kr-content li + li { margin-top: 8px; }
.kr-content strong { color: var(--kr-ink); font-weight: 700; }
.kr .kr-content a { color: var(--kr-blue); text-decoration: underline; text-underline-offset: 3px; }
.kr-content blockquote {
  border-left: 3px solid var(--kr-blue); padding: 4px 0 4px 20px; color: var(--kr-t2);
}
.kr-content img { border-radius: var(--kr-r-sm); }

/* 可複製 prompt 區塊：<pre> 由 JS 包成 .kr-prompt */
.kr-prompt { position: relative; margin-top: 24px; }
.kr-prompt pre {
  margin: 0; background: var(--kr-ink); color: #E8EAF0;
  /* 右邊留返一條位俾複製掣，長句先唔會爬到掣底下 */
  border-radius: var(--kr-r-sm); padding: 22px 116px 22px 22px;
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.kr-copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  /* 14px ＝ DS 字級下限，唔可以再細 */
  font-family: var(--kr-sans); font-size: 14px; font-weight: 600; line-height: 1;
  color: #17191E; background: rgba(255,255,255,.92);
  border: none; border-radius: var(--kr-r-pill); padding: 8px 13px; cursor: pointer;
  transition: all .18s var(--kr-ease);
}

/* 手機：複製掣要留喺黑色框入面（用戶 2026-09-19），同桌面一致。
   做法係上方預留一條黑色留白，掣擺喺嗰度，文字由留白下面先開始，
   噉就唔會撞到（寧願多留白，都唔要掣飛出框外）。 */
@media (max-width: 600px) {
  .kr-prompt pre { padding: 56px 18px 18px; }
  .kr-copy { top: 12px; right: 12px; }
}

.kr-copy svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kr-copy:hover { background: #fff; }
.kr-copy.done { background: var(--kr-blue); color: #fff; }

/* 中段暖砂 CTA */
.kr-midcta {
  margin-top: 40px; background: var(--kr-warm); border: 1px solid var(--kr-warm-line);
  border-radius: var(--kr-r-card); padding: 32px 40px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.kr-midcta p { font-size: 16px; color: var(--kr-warm-t2); }
.kr-midcta strong { color: var(--kr-ink); }

/* 相關資源 */
.kr-rel { margin-top: 72px; }
.kr-rel h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 28px; }
.kr-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .kr-rel-grid { grid-template-columns: 1fr; } }
.kr-rel .kr-card-t { font-size: 16px; }
.kr-rel .kr-card-body { padding: 20px 24px 24px; }

/* ═══ 手機 ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kr-in { padding: 0 20px; }
  .kr-sec { margin: 56px 0; }
  .kr-search { margin-left: 0; }
  .kr-content { font-size: 16px; }
  .kr-midcta { padding: 24px 22px; }
}

/* ═══ 動效收斂 ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .kr *, .kr *::before, .kr *::after {
    transition: none !important; animation: none !important;
  }
  .kr-card:hover { transform: none; }
  .kr-card:hover .kr-cover img { transform: none; }
}

/* 冇特色圖時嘅佔位（砂色底 ＋ 字標）。唔用圖檔，少一個要維護嘅 asset。 */
.kr-cover-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--kr-warm);
}
.kr-cover-ph svg { width: 96px; height: auto; fill: var(--kr-warm-line); }

/* IG 連結：闊螢幕出文字，窄螢幕出圖示。
   375px 三個文字連結會令個藥丸 nav 摺到三行（實測高 81px）。 */
.kr-nav-ig { display: inline-flex; align-items: center; gap: 7px; }
.kr-ig-ico { width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: none; }
/* 手機：三邊加埋（資源庫／登記通知／字標／IG）迫到 nav 摺行（實測 106px 高），
   所以收字級同間距，IG 轉圖示。唔拆走任何一項，用戶指定要齊。 */
@media (max-width: 560px) {
  .kr-nav-ig .kr-nav-txt { display: none; }
  .kr-nav-ig .kr-ig-ico  { display: block; }
  .kr-nav      { padding: 10px 12px; gap: 6px; }
  .kr-nav-side { gap: 0; }
  .kr-nav-link { padding: 7px 8px; font-size: 14px; }
}
/* ≤400px：左邊個組會掂到中間嘅字標（實測 360px 重疊 6px），要再收 */
@media (max-width: 400px) {
  .kr-nav      { padding: 10px 12px; gap: 4px; }
  .kr-nav-link { padding: 6px 5px; font-size: 13px; }
}

/* 保險：Astra 回到頂部掣。PHP filter 應該已經閂咗佢，
   但主題日後改咗 filter 名嘅話，呢條頂得住。 */
.kr-body #ast-scroll-top { display: none !important; }

/* ≤340px（iPhone SE 一代嗰類）：絕對置中嘅字標一定會壓到左邊個組。
   呢個闊度放棄「字標正中」，改回流內排列，寧願唔對稱都好過重疊。 */
@media (max-width: 340px) {
  .kr-nav       { gap: 2px; }
  .kr-nav-logo  { position: static; transform: none; }
  .kr-nav-link  { padding: 6px 4px; font-size: 12.5px; }
}

/* 登記區底下嗰句 IG。用戶指定用 KLAS 主藍。
   ⚠️ #0057FF 落砂色 #EDE5DA 係 4.42:1，差少少唔夠 WCAG AA 嘅 4.5:1。
      DS 本身為砂底預備咗 #0046CC（6.12:1），但用戶覺得暗沉。
      呢條係次要連結，照用主藍，加粗補返可讀性。 */
.kr-signup-ig { margin-top: 18px; font-size: 15px; }
.kr-signup-ig a { color: var(--kr-blue); font-weight: 700; text-underline-offset: 3px; }
.kr-signup-ig a:hover { text-decoration: underline; }

/* ═══ 工具下拉 ═══════════════════════════════════════════════
   工具數量會愈加愈多，一行 chips 排唔曬（用戶 2026-09-12）。
   觸發掣跟「掣＝pill」規則，選單面板跟輸入框嗰級 8px。 */
.kr-drop { position: relative; }
.kr-drop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--kr-sans); font-size: 15px; font-weight: 500; color: var(--kr-t2);
  background: var(--kr-card); border: 1px solid var(--kr-line);
  border-radius: var(--kr-r-pill); padding: 9px 14px 9px 18px; cursor: pointer;
  min-width: 148px; justify-content: space-between;
  transition: all .18s var(--kr-ease);
}
.kr-drop-btn:hover { border-color: var(--kr-line-2); color: var(--kr-ink); }
.kr-drop.open .kr-drop-btn { border-color: var(--kr-line-2); color: var(--kr-ink); }
/* 揀咗某個工具就同 chip 嘅 on 狀態一致 */
.kr-drop.filtered .kr-drop-btn {
  background: var(--kr-blue-soft); border-color: transparent;
  color: var(--kr-blue); font-weight: 600;
}
.kr-drop-chev {
  width: 16px; height: 16px; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--kr-ease);
}
.kr-drop.open .kr-drop-chev { transform: rotate(180deg); }

.kr-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 210px; max-height: 320px; overflow-y: auto;
  background: var(--kr-card); border: 1px solid var(--kr-line);
  border-radius: var(--kr-r-sm); box-shadow: var(--kr-sh-lg);
  padding: 6px;
}
.kr-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--kr-sans); font-size: 15px; font-weight: 500;
  color: var(--kr-t2); text-align: left;
  background: transparent; border: none; border-radius: var(--kr-r-xs);
  padding: 9px 12px; cursor: pointer;
  transition: background .14s var(--kr-ease), color .14s var(--kr-ease);
}
.kr-opt:hover { background: var(--kr-page); color: var(--kr-ink); }
.kr-opt.on   { background: var(--kr-blue-soft); color: var(--kr-blue); font-weight: 600; }
.kr-opt img  { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex: 0 0 auto; }