/* KORA 球域 制度專欄 — 暖白＋深靛青，強調珊瑚橙，Be Vietnam Pro
   骨架特徵：滿版圖首屏＋超大標題左右分置、標題被散落圖片卡打斷 */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#faf8f4;color:#15201e;
  font-family:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* 中文大標題一律靠 <i> 分行。第二行「KORA ＋ 中文」控制在 4 字內，375px 才放得下。 */
h1,h2,h3,h4,.lg,.rk-p,.tag{font-family:"Be Vietnam Pro","Noto Sans TC",sans-serif}
h1{font-weight:400;letter-spacing:-.025em;line-height:1.08;margin:0}
h1 i{display:block;font-style:normal}
h2{font-weight:500;letter-spacing:-.015em;line-height:1.24;margin:0}
h3,h4{font-weight:700;margin:0}
p{margin:0 0 1.05em}
strong{color:#134e4a;font-weight:700}

/* ── 頂欄 ── */
.hd{display:flex;align-items:center;gap:32px;padding:15px 44px;
  border-bottom:1px solid #e7e2d9;position:sticky;top:0;background:rgba(250,248,244,.95);
  backdrop-filter:blur(12px);z-index:20}
.lg{font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:#134e4a}
.lg span{font-weight:500;font-size:16px;color:#5f6b68}
.lg-inv,.lg-inv span{color:#fff}
.hd-nav{display:flex;gap:24px;flex:1;flex-wrap:wrap}
.hd-nav a{font-size:14px;color:#4f5a57;text-decoration:none}
.hd-nav a:hover{color:#134e4a}
.cta{display:inline-block;background:#134e4a;color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;padding:11px 24px;border-radius:7px;white-space:nowrap}
.cta:hover{background:#0f3d3a}
.cta-lg{font-size:16px;padding:15px 34px}

/* ── 滿版圖首屏＋標題左右分置 ── */
.open{position:relative;min-height:min(84vh,660px);display:grid;
  grid-template-rows:1fr auto;padding:52px 44px 44px;overflow:hidden}
.open-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%;z-index:0}
.open::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,32,30,.52) 0%,rgba(9,32,30,.22) 45%,rgba(9,32,30,.66) 100%)}
.open-a,.open-b{position:relative;z-index:2;color:#fff}
.open-a{font-size:clamp(42px,7.4vw,104px);justify-self:start;align-self:start;
  text-shadow:0 2px 24px rgba(0,0,0,.28)}
.open-a i{color:#fb7185}
.open-mk{display:block;font-size:.26em;font-weight:500;letter-spacing:.14em;
  opacity:.88;margin-bottom:10px}
.open-b{justify-self:end;align-self:end;text-align:right;max-width:24ch;
  font-size:clamp(15px,1.5vw,19px);line-height:1.6;margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.34)}

/* ── 標題被散落圖片卡打斷 ── */
.split{max-width:1220px;margin:0 auto;padding:84px 44px 96px;position:relative}
.split-a,.split-b{font-size:clamp(30px,4.4vw,60px);font-weight:400;letter-spacing:-.025em}
.split-a{margin-bottom:-18px}
.split-b{text-align:right;margin-top:-18px;color:#134e4a}
.split-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  align-items:center;margin:0 0 4px}
.sc{margin:0}
.sc img{width:100%;object-fit:cover;border-radius:12px}
.sc-1 img{aspect-ratio:3/4;margin-top:26px}
.sc-2 img{aspect-ratio:4/3}
.sc-3 img{aspect-ratio:3/4;margin-top:-22px}
.split-txt{max-width:56ch;margin:34px auto 0;text-align:center;font-size:16.5px;color:#4b5754}

/* ── 滿版圖＋引述 ── */
.quote{position:relative;min-height:min(58vh,460px);display:flex;align-items:flex-end;
  padding:44px;overflow:hidden}
.quote-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.quote::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,32,30,.1) 0%,rgba(9,32,30,.72) 100%)}
.quote blockquote{position:relative;z-index:2;margin:0;max-width:52ch;color:#fff}
.quote blockquote p{font-family:"Be Vietnam Pro",sans-serif;font-weight:400;
  font-size:clamp(19px,2.2vw,29px);line-height:1.44;letter-spacing:-.015em;margin-bottom:12px}
.quote cite{font-style:normal;font-size:13px;color:#c9dbd7}

/* ── 漸層底：左超大標題／右排名卡 ── */
.rank{background:linear-gradient(168deg,#e9f1ef 0%,#f7f4ee 62%);padding:92px 44px}
.rank-in{max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.rank-txt h2{font-size:clamp(27px,3.2vw,42px);margin-bottom:16px}
.rank-txt h2 i{display:block;font-style:normal;color:#134e4a}
.rank-txt p{font-size:15.5px;color:#4b5754}
.arw{font-weight:700;font-size:14.5px;color:#134e4a;text-decoration:none;
  border-bottom:2px solid #c3d9d5;padding-bottom:3px}
.arw:hover{border-color:#134e4a}
.rk{display:flex;gap:18px;align-items:flex-start;background:#fff;
  border:1px solid #e2e7e5;border-radius:13px;padding:20px 22px;margin-bottom:12px}
.rk:last-child{margin-bottom:0}
.rk-p{font-size:22px;font-weight:700;color:#fb7185;line-height:1.2;min-width:22px}
.rk-b h3{font-size:16.5px;margin-bottom:5px}
.rk-b p{font-size:14.5px;color:#4b5754;margin:0}

/* ── 三欄卡 ── */
.deck{max-width:1160px;margin:0 auto;padding:92px 44px}
.sec-h{font-size:clamp(24px,2.5vw,32px);margin:0 0 30px}
.du-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.du{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.du img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:8px}
.du h3{font-size:17.5px}
.du p{font-size:14.5px;color:#4b5754;margin:0;flex:1}
.du-go{font-size:13.5px;font-weight:700;color:#134e4a}

/* ── 收尾 ── */
.end{background:#0f3330;color:#d8e6e3;padding:84px 44px}
.end-in{max-width:640px;margin:0 auto;text-align:center}
.end h2{font-size:clamp(24px,2.7vw,34px);margin-bottom:12px;color:#fff}
.end p{color:#a9c4bf;font-size:16px;margin-bottom:28px}
.end .cta{background:#fb7185;color:#0f3330}
.end .cta:hover{background:#fda4af}

/* ── 內頁 ── */
.doc{max-width:820px;margin:0 auto;padding:0 44px}
.doc-hd{padding:66px 0 32px}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  color:#134e4a;background:#e3efec;border-radius:999px;padding:5px 14px;margin-bottom:20px}
.doc-hd h1{font-size:clamp(32px,3.8vw,48px)}
.doc-hd h1 i{color:#134e4a}
.dek{margin:20px 0 0;font-size:17px;color:#4b5754;max-width:44ch}
.doc-fig{margin:38px 0 46px}
.doc-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.doc-body h2{font-size:clamp(20px,2.1vw,25px);margin:46px 0 14px;color:#134e4a}
.doc-body h2:first-child{margin-top:0}
.doc-body p{color:#333d3a}

/* ── 其他段落 ── */
.nxt{margin:76px 0 0;padding-top:38px;border-top:1px solid #e7e2d9}
.nxt h2{font-size:17px;font-weight:700;margin-bottom:16px}
.nx-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.nx{display:flex;justify-content:space-between;align-items:center;gap:10px;
  text-decoration:none;font-size:14.5px;padding:15px 19px;background:#fff;
  border:1px solid #e7e2d9;border-radius:10px}
.nx:hover{border-color:#134e4a}
.nx-go{color:#134e4a}
.end-doc{margin-top:78px}

/* ── footer ── */
.ft{background:#0a2523;color:#b4c9c5;padding:64px 44px 26px}
.ft-in{max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);gap:44px}
.ft-brand p{font-size:14px;color:#7c928e;margin-top:14px;max-width:34ch}
.ft-col h4{font-size:12px;font-weight:700;letter-spacing:.1em;color:#fff;margin:0 0 14px}
.ft-col a{display:block;font-size:14px;color:#9db4b0;text-decoration:none;padding:5px 0}
.ft-col a:hover{color:#fb7185}
.ft-line{max-width:1160px;margin:52px auto 0;padding-top:20px;border-top:1px solid #1d3f3c;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#6b827e}

@media(max-width:980px){
  .rank-in{grid-template-columns:1fr;gap:34px}
  .du-row{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
  .hd{padding:13px 24px;gap:18px}
  .open{padding:40px 24px 34px;min-height:min(76vh,540px)}
  .split,.deck,.doc,.rank,.end{padding-left:24px;padding-right:24px}
  .quote{padding:32px 24px}
  .split-a,.split-b{margin:0}
  .split-mid{margin:22px 0}
}
@media(max-width:640px){
  .hd-nav{display:none}
  .split-mid{grid-template-columns:1fr;gap:14px}
  .sc-1 img,.sc-3 img{aspect-ratio:16/10;margin:0}
  .split-b{text-align:left}
  .nx-row{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .open-b{justify-self:start;text-align:left}
}