/* 地球首頁（index.html）、日本頁頂端地圖帶（japan.html）、台灣頁（taiwan.html）的樣式。
   設計來源：proposals/home-globe/v7（配色「港灣藍」淺色＋深色）。顏色全部放在 .hb（harbour）底下，不影響 site.css 的其他頁面：
     - index.html、taiwan.html：<body class="hb hb-page">，整頁用港灣藍。
     - japan.html：只有頂端地圖帶 .band 與國家列 .c-bar 加 .hb，下方沿用原本首頁的樣式。
   深淺色跟全站一樣：系統設定，或 <html data-theme="dark|light">。
   間距與字級用 --gs*／--gt*（8 點格線、1.25 字級比例），不和 site.css 的 --s*（另一套間距）衝突。 */
.hb{
  --paper:#f4f7fb;--paper-2:#eceff3;--sheet:#fbfdfe;--line:#dde0e4;--line-2:#ced1d5;--ink:#131b29;--ink-2:#444d5e;--ink-3:#60697b;--bg-1:#f7fafe;--bg-2:#eef1f5;--sea-1:#344e73;--sea-2:#00163b;--land:#dadee3;--land-2:#b4b8bc;--hi:#e7cea1;--hi-2:#c6ae82;--coast:rgba(250,252,254,0.5);--hi-line:#fef0d6;--hi-glow:rgba(231,206,161,0.35);--arc:#f4dbae;--city:#fef0d6;--city-ring:rgba(6,11,20,0.9);--rim:rgba(241,245,252,0.55);--atmo:rgba(139,160,190,0.22);--shade:rgba(3,6,13,0.42);--spec:rgba(255,255,255,.10);--drop:rgba(16,22,31,0.16);--grat:rgba(252,252,252,0.07);--ring:rgba(19,27,41,0.09);--spot:rgba(250,252,254,0.9);--btn-bg:#223251;--btn-fg:#fbfdfe;--acc:#283c62;
  --tabe:#a8613a;--kin:#8a7036;--des:#4f5f86;--shop:#8c4d63;--kinu:#3f6455;
  --e1:0 1px 2px rgba(15,20,30,.05),0 1px 1px rgba(15,20,30,.03);
  --e2:0 2px 4px rgba(15,20,30,.04),0 12px 32px -12px rgba(15,20,30,.14);
  --f-display:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --gt1:13px;--gt2:16px;--gt3:20px;--gt4:25px;--gt5:31px;--gt6:39px;--gt7:49px;
  --gs1:4px;--gs2:8px;--gs3:16px;--gs4:24px;--gs5:32px;--gs6:48px;--gs7:64px;--gs8:96px;
  --col-gap:24px;--r2:8px;--r3:16px;--ease:cubic-bezier(.2,.7,.2,1);
  color:var(--ink);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hb{
  --paper:#131720;--paper-2:#1c2129;--sheet:#191e27;--line:#2b303a;--line-2:#3b404a;--ink:#e3e8f0;--ink-2:#b2b8bf;--ink-3:#9399a0;--bg-1:#171c24;--bg-2:#0e131b;--sea-1:#273854;--sea-2:#03122e;--land:#82878c;--land-2:#595e63;--hi:#e5c68e;--hi-2:#b79a64;--coast:rgba(251,252,254,0.5);--hi-line:#fce9c8;--hi-glow:rgba(229,198,142,0.35);--arc:#f2d39b;--city:#fce9c8;--city-ring:rgba(7,11,20,0.9);--rim:rgba(241,245,252,0.55);--atmo:rgba(111,129,159,0.3);--shade:rgba(3,6,13,0.42);--spec:rgba(255,255,255,.10);--drop:rgba(17,22,31,0.0);--grat:rgba(252,252,252,0.07);--ring:rgba(227,232,240,0.09);--spot:rgba(43,46,51,0.35);--btn-bg:#e3e8f0;--btn-fg:#090d15;--acc:#e5c68e;
  --tabe:#d99a73;--kin:#cdb27a;--des:#9daad0;--shop:#cf98ab;--kinu:#8fb7a5;--e1:0 1px 0 rgba(255,255,255,.03);--e2:0 16px 40px -16px rgba(0,0,0,.6)}}
:root[data-theme="dark"] .hb{
  --paper:#131720;--paper-2:#1c2129;--sheet:#191e27;--line:#2b303a;--line-2:#3b404a;--ink:#e3e8f0;--ink-2:#b2b8bf;--ink-3:#9399a0;--bg-1:#171c24;--bg-2:#0e131b;--sea-1:#273854;--sea-2:#03122e;--land:#82878c;--land-2:#595e63;--hi:#e5c68e;--hi-2:#b79a64;--coast:rgba(251,252,254,0.5);--hi-line:#fce9c8;--hi-glow:rgba(229,198,142,0.35);--arc:#f2d39b;--city:#fce9c8;--city-ring:rgba(7,11,20,0.9);--rim:rgba(241,245,252,0.55);--atmo:rgba(111,129,159,0.3);--shade:rgba(3,6,13,0.42);--spec:rgba(255,255,255,.10);--drop:rgba(17,22,31,0.0);--grat:rgba(252,252,252,0.07);--ring:rgba(227,232,240,0.09);--spot:rgba(43,46,51,0.35);--btn-bg:#e3e8f0;--btn-fg:#090d15;--acc:#e5c68e;
  --tabe:#d99a73;--kin:#cdb27a;--des:#9daad0;--shop:#cf98ab;--kinu:#8fb7a5;--e1:0 1px 0 rgba(255,255,255,.03);--e2:0 16px 40px -16px rgba(0,0,0,.6)}

/* 整頁港灣藍（地球首頁、台灣頁）：內容寬 1280，頂列跟著對齊 */
.hb-page{--container:1280px;--gutter:48px;background:var(--paper);color:var(--ink);font:400 var(--gt2)/1.75 var(--f-body);letter-spacing:.02em}
@media (max-width:1023px){.hb-page{--gutter:32px}}
@media (max-width:760px){.hb-page{--gutter:16px}}
.hb-page :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
/* 頂列由 site-nav.js（defer）填入；先佔好高度，地球不會往下跳 */
.mast[data-sitenav]:empty{display:block;height:calc(var(--head-h,56px) + 1px)}
.hb .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hb .lab{font:500 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.hb *{transition:none!important;animation:none!important}}

/* ── 國家列：國家頁地圖帶下方（‹ 全部國家＋國名）；地球放大最後在同一位置淡入同樣的列 ── */
/* 站長要求（2026-11-07）：不顯示國家列，頂列已有返回與「日本 ▾」；保留 h1 給螢幕閱讀器與搜尋引擎 */
.c-bar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-bar-old{background:var(--paper);border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--f-body);letter-spacing:.02em}
.c-bar .wrap{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:var(--gs3);row-gap:var(--gs1);padding-block:var(--gs4) var(--gs3)}
.c-back{display:flex;align-items:center;min-height:44px;flex:0 0 100%;padding:0;color:var(--ink-3);text-decoration:none;font-size:14px;line-height:1;white-space:nowrap}
a.c-back:hover{color:var(--ink)}
.c-name{margin:0;font:500 var(--gt6)/1.2 var(--f-display);letter-spacing:.06em;color:var(--ink)}
.c-sub{font-size:14px;line-height:1.5;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){.c-name{font-size:var(--gt5)}.c-bar .wrap{padding-block:var(--gs2) var(--gs3)}}

/* ── 國家頁頂端地圖帶（＝地球放大的最後一格）。高度由 globe-kit.js 在 <head> 先算好（--band-h），避免版面跳動 ── */
.band{position:relative;height:var(--band-h,480px);background:var(--sea-2);overflow:hidden}
.band canvas{position:absolute;inset:0;width:100%;height:100%}

/* 轉場遮罩：與目的頁同底色 */
.veil{position:fixed;inset:0;z-index:1300;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .22s ease}
.veil.on{opacity:1}
html.entering .veil{opacity:1;transition:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ── 地球首頁。構圖（12 欄格線、內容寬 1280）：
   桌機：文字佔第 1–5 欄、垂直置中；地球在第 6–12 欄，直徑＝min(首屏高 × .84, 視窗寬 × .5, 940px)，整顆可見；
   手機：標題 → 地球 → 城市目錄 → 說明。 ── */
.g-stage{position:relative;overflow:hidden;min-height:calc(100svh - var(--head-h,56px));isolation:isolate;background:linear-gradient(180deg,var(--bg-1),var(--bg-2))}
.g-cv{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.g-cv.fly{position:fixed;z-index:55}
.g-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;min-height:calc(100svh - var(--head-h,56px));padding-block:var(--gs6);pointer-events:none}
.g-text{grid-column:1/6;grid-row:1;position:relative;z-index:3;pointer-events:auto;transition:opacity .3s ease,transform .45s var(--ease)}
.g-k{margin:0 0 var(--gs3)}
.g-h1{margin:0 0 var(--gs4);font:500 var(--gt7)/1.25 var(--f-display);letter-spacing:.06em}
.g-h1 span{display:block;white-space:nowrap}
.g-lede{margin:0 0 var(--gs6);max-width:26em;color:var(--ink-2)}
.g-hint{margin:var(--gs4) 0 0;font-size:var(--gt1);color:var(--ink-3)}
/* 城市目錄：三列等高、只用細線分隔；台北降一階（灰字＋籌備中） */
.g-go h2{margin:0 0 var(--gs2)}
.g-go ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.g-city{display:grid;grid-template-columns:auto 1fr auto 40px;align-items:center;column-gap:var(--gs3);min-height:72px;padding:0 var(--gs1);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background-color .2s}
.g-city .nm{font:600 var(--gt4)/1 var(--f-display);letter-spacing:.06em;white-space:nowrap}
.g-city .en{font-size:var(--gt1);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.g-city .ct{font-size:var(--gt1);color:var(--ink-3);white-space:nowrap;text-align:right}
.g-city .ct b{font:500 var(--gt2)/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.g-city .arr{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);transition:background-color .2s,border-color .2s,transform .25s var(--ease)}
.g-city .arr::after{content:"";position:absolute;left:15px;top:16px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.g-city:hover,.g-city.hov{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}
.g-city:hover .arr,.g-city.hov .arr{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);transform:translateX(4px)}
.g-city.soon .nm{color:var(--ink-2)}
.hb .pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);font-size:12px;letter-spacing:.06em}
/* 地球方塊：決定球心與半徑（globe.js 讀取） */
.g-globe{--D:min(calc((100svh - var(--head-h,56px)) * .84),50vw,940px);grid-column:6/13;grid-row:1;justify-self:start;margin-left:max(0px,(100% - var(--D)) / 2 + 2%);width:var(--D);height:var(--D);position:relative;z-index:2;touch-action:none;cursor:grab;outline:none;border-radius:50%;pointer-events:auto}
.g-globe.hand{cursor:pointer}
.g-globe:active{cursor:grabbing}
.g-globe:focus-visible{outline:2px solid var(--acc);outline-offset:8px}
@media (pointer:coarse){.g-globe{touch-action:pan-y}}
/* 國名標記：小膠囊（半透明材質），點了一樣放大進入 */
.g-mks{position:absolute;inset:0;z-index:4;pointer-events:none}
.g-mk{position:absolute;left:0;top:0;width:32px;height:32px;color:var(--ink);text-decoration:none;white-space:nowrap;will-change:transform;pointer-events:auto}
.g-mk .pin{position:absolute;inset:0;border-radius:50%}
.g-mk .t{position:absolute;top:50%;left:30px;transform:translateY(-50%);display:flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--sheet) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--e1),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);font:600 14px/1 var(--f-display);letter-spacing:.08em}
.g-mk::after{content:"";position:absolute;inset:-6px}
.g-mk[data-side="l"] .t{left:auto;right:30px}
.g-mk:hover .t,.g-mk.hov .t{box-shadow:var(--e2),0 0 0 1px var(--hi)}
.g-mk[hidden]{display:none}
/* 放大轉場：國家頁地圖帶下方的「頁面」從底部淡入（位置＝國家頁同一處） */
.fly-sheet{position:fixed;left:0;right:0;bottom:0;top:var(--fly-top,60%);z-index:58;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .3s ease}
.fly-sheet.on{opacity:1}
/* 日本頁的國家列沿用全站容器（1120），落地時對齊 */
.fly-sheet[data-c="jp"]{--container:1120px;--gutter:40px}
@media (max-width:1023px){.fly-sheet[data-c="jp"]{--gutter:32px}}
@media (max-width:760px){.fly-sheet[data-c="jp"]{--gutter:16px}}
.flying .g-text{opacity:0;transform:translateX(-16px)}
.flying .g-mks{opacity:0;transition:opacity .2s}
.flying .g-globe{visibility:hidden}
.fb-note{display:none;position:absolute;inset:40% 10% auto;text-align:center;font-size:14px;color:var(--ink-2)}
.is-fallback .g-cv{display:none}
.is-fallback .fb-note{display:block}
.is-fallback .g-globe{cursor:default;background:radial-gradient(circle at 30% 28%,var(--sea-1),var(--sea-2))}
@media (max-width:1180px){.g-h1{font-size:var(--gt6)}.g-text{grid-column:1/7}.g-globe{grid-column:7/13}}
@media (max-width:900px){
  .g-stage,.g-grid{min-height:0}
  .g-grid{display:flex;flex-direction:column;align-items:stretch;padding-block:var(--gs4) var(--gs6)}
  .g-text{display:contents}
  .g-k{order:1;margin-bottom:var(--gs2)}.g-h1{order:2}.g-globe{order:3}.g-go{order:4;position:relative;z-index:3;pointer-events:auto}.g-lede{order:5}.g-hint{order:6}
  .g-h1{font-size:var(--gt5);margin-bottom:0;line-height:1.3}
  .g-globe{--D:min(94vw,600px);width:var(--D);height:var(--D);margin:var(--gs3) 0 var(--gs4);align-self:center;margin-left:0}
  .g-lede{margin:var(--gs4) 0 0;pointer-events:auto;position:relative;z-index:3}
  .g-hint{pointer-events:auto;position:relative;z-index:3}
  .g-city{min-height:64px;column-gap:12px}
  .g-city .nm{font-size:var(--gt3)}
}
@media (max-width:420px){.g-city .en{display:none}.g-city{grid-template-columns:auto 1fr 40px}.g-city .ct{grid-column:2;justify-self:end}}

/* ── 台灣頁內容（籌備中） ── */
.c-main{padding-block:var(--gs6) var(--gs7)}
.c-main .sec-h{margin-bottom:var(--gs4);display:block}
.c-main .sec-h .lab{margin:0 0 var(--gs2)}
.c-main .sec-h h2{margin:0;font:500 var(--gt5)/1.3 var(--f-display);letter-spacing:.06em}
.c-main .cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.c-main .city{display:flex;flex-direction:column;gap:var(--gs3);padding:var(--gs5);border-radius:var(--r3);background:var(--sheet);box-shadow:var(--e1),0 0 0 1px var(--line)}
.c-main .city .lab{margin:0}
.c-main .city h3{margin:calc(-1 * var(--gs2)) 0 0;font:600 var(--gt5)/1.3 var(--f-display);letter-spacing:.06em}
.c-main .city .d{margin:0;max-width:32em;color:var(--ink-2)}
.c-main .plays{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:var(--gs3) 0 0;list-style:none;border-top:1px solid var(--line)}
.c-main .plays li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:var(--gt1);color:var(--ink-2)}
.c-main .plays .g{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--tc);color:var(--tc);font:600 12px/1 var(--f-display)}
.c-main .plays .g.tabe{--tc:var(--tabe)}.c-main .plays .g.kin{--tc:var(--kin)}.c-main .plays .g.des{--tc:var(--des)}.c-main .plays .g.shop{--tc:var(--shop)}.c-main .plays .g.kinu{--tc:var(--kinu)}
.c-main .plays b{font-size:var(--gt1);font-weight:400;color:var(--ink-3)}
.c-main .btn{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;min-height:48px;padding:0 var(--gs4);border-radius:999px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);text-decoration:none;font:500 15px/1 var(--f-body);letter-spacing:.04em}
.c-main .btn:hover{background:var(--paper-2)}
.c-main .city.plain{background:transparent;box-shadow:0 0 0 1px var(--line)}
.c-main .steps{margin:0;padding-left:1.25em;color:var(--ink-2)}
.c-main .steps li{margin-bottom:var(--gs1)}
.c-main .topics-sec{margin-top:var(--gs7)}
.c-main .topics{display:flex;flex-wrap:wrap;gap:var(--gs2);margin:0;padding:0;list-style:none}
.c-main .topics li{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--gs3);border-radius:999px;background:var(--paper-2);font-size:14px;color:var(--ink-2)}
.hb-foot{padding-block:0 var(--gs6);font-size:12px;color:var(--ink-3)}
.hb-foot p{margin:0;padding-top:var(--gs3)}
.hb-home{background:var(--bg-2)}
.hb-foot a{color:inherit}
@media (max-width:900px){.c-main .cities{grid-template-columns:1fr}}
@media (max-width:760px){.c-main .city{padding:var(--gs4)}.c-main{padding-block:var(--gs5) var(--gs6)}.c-main .sec-h h2{font-size:var(--gt4)}.c-main .plays{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--gs3)}}

/* ── 日本頁（原首頁內容）：從地球點城市進來時，被選的地區卡片加一圈外框 ── */
.door.is-pick{box-shadow:0 0 0 2px var(--glow)}