/* =============================================================
 * 羲和 XIHE — 晨光 Dawn（官方色票：晨光奶油 #F7F1E7／墨綠 #2F453C／鼠尾草 #97A48B／日落金 #DFA050／陶土 #C08552／海霧藍 #A9C2CF）
 * 暖奶油白紙面 × 深抹茶綠 × 暖橘粉 × 陶土珊瑚 × 香檳金細線。
 * 本草圖鑑式的編輯排版：襯線標題、留白、編號、克制的色彩。
 * ============================================================= */
:root {
  --bg: #F7F1E7;             /* 暖奶油白・紙面 */
  --bg2: #EFE6D0;            /* 深一階奶油 */
  --panel: #FFFDF6;          /* 卡片紙面 */
  --panel2: #FBF5E8;
  --ink: #2E332A;            /* 墨綠黑 */
  --ink-soft: #4C5347;
  --muted: #7E8474;
  --line: rgba(133, 120, 88, .30);
  --amber: #DFA050;          /* 暖橘粉・按鈕與重點 */
  --amber-dim: rgba(223, 160, 80, .18);
  --cyan: #C08552;           /* 陶土珊瑚・次重點（變數名沿用引擎） */
  --cyan-dim: rgba(192, 133, 82, .10);
  --matcha: #2F453C;         /* 深抹茶綠 */
  --matcha-deep: #22362C;
  --sage: #97A48B;
  --champagne: #D8C5A5;
  --danger: #B3402A;
  --sea: #A9C2CF;
  --serif: "Noto Serif TC", "Songti TC", Georgia, serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 16px;
}
* { box-sizing: border-box; }
html { font-size: 17px; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.9; letter-spacing: .015em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* 紙紋底：極淡的香檳圓點 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(133,120,88,.055) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
::selection { background: var(--amber); color: var(--matcha); }
img { max-width: 100%; height: auto; }
a { color: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 22px; }

.mono { font-family: var(--mono); }
.kicker {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .42em; text-indent: .42em;
  color: var(--cyan); text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--cyan); display: inline-block; }

/* ---------- Header（深抹茶綠） ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(47, 69, 60, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 197, 165, .25);
}
.header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between; height: 68px;
}
.logo {
  text-decoration: none; color: #F7F1E7; display: flex; flex-direction: column;
  align-items: flex-start; gap: 0; line-height: 1.15;
}
.logo-main { font-family: var(--serif); font-weight: 700; font-size: 1.28rem; letter-spacing: .22em; }
.logo-sub { font-family: var(--mono); font-size: .56rem; letter-spacing: .34em; color: var(--champagne); margin-top: 3px; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  text-decoration: none; color: #E7DFCB; font-size: .92rem; letter-spacing: .1em;
  padding: 10px 13px; border-radius: 8px; transition: color .2s, background .2s;
}
.main-nav a:hover { color: var(--amber); background: rgba(242,161,132,.12); }
.main-nav a.active { color: var(--amber); }
.lang-switch {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
  border: 1px solid rgba(216,197,165,.45); border-radius: 999px; padding: 8px 16px;
  text-decoration: none; color: #CFC7AE; margin-left: 8px; transition: all .2s;
}
.lang-switch:hover { border-color: var(--amber); color: var(--amber); }
.nav-cta {
  background: var(--amber); color: var(--matcha) !important;
  font-weight: 700; border-radius: 10px !important; margin-left: 8px;
}
main { padding-top: 68px; }

/* 手機選單 */
.menu-toggle { display: none; background: none; border: 1px solid rgba(216,197,165,.4); border-radius: 8px; color: #F7F1E7; font-size: 1.3rem; padding: 8px 12px; cursor: pointer; }
@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(34, 54, 44, .98); flex-direction: column; align-items: stretch;
    padding: 12px 22px 20px; border-bottom: 1px solid rgba(216,197,165,.25);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 8px; border-bottom: 1px solid rgba(216,197,165,.15); }
  .lang-switch, .nav-cta { margin: 10px 0 0; text-align: center; }
}

/* ---------- Hero（主視覺照片＋抹茶漸層） ---------- */
.hero {
  position: relative; min-height: 94vh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--matcha-deep);
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(47,69,60,.30) 0%, rgba(47,69,60,.05) 38%, rgba(47,69,60,.55) 68%, rgba(47,69,60,.96) 100%),
              url('../hero.jpg') center 42%/cover no-repeat, var(--matcha-deep);
}
.hero-inner { position: relative; z-index: 2; padding-bottom: 96px; width: 100%; }
.hero .kicker { color: var(--amber); }
.hero .kicker::before { background: var(--amber); }
.hero h1 {
  font-family: var(--serif); font-weight: 700; color: #FBF6EA;
  font-size: clamp(2.1rem, 5.2vw, 3.55rem); line-height: 1.4; letter-spacing: .045em;
  margin: 26px 0 20px; max-width: 15em;
  text-shadow: 0 3px 30px rgba(20,30,22,.45);
}
.hero h1 .h1-accent { color: var(--amber); }
.hero-sub {
  color: rgba(247,241,231,.88); font-size: .98rem; letter-spacing: .18em; margin: 0 0 40px;
  line-height: 2;
}
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 16px 36px; font-size: 1rem; font-weight: 700;
  letter-spacing: .18em; text-indent: .18em; border-radius: 999px; text-decoration: none;
  border: none; cursor: pointer; font-family: var(--sans);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:active { transform: scale(.97); }
.btn-amber {
  background: var(--amber); color: var(--matcha);
  box-shadow: 0 12px 30px rgba(192, 133, 82, .28);
}
.btn-amber:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--matcha);
  border: 1px solid rgba(47,69,60,.5);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.hero .btn-ghost {
  background: rgba(47,69,60,.35); color: #F7F1E7;
  border: 1px solid rgba(247,241,231,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
/* 品牌數據條（深抹茶） */
.data-strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(216,197,165,.25);
  background: rgba(43, 61, 48, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.data-strip-inner {
  display: flex; gap: 0; overflow-x: auto;
  max-width: 1280px; margin: 0 auto;
}
.data-cell {
  flex: 1 0 auto; padding: 18px 28px; border-right: 1px solid rgba(216,197,165,.18);
  font-family: var(--mono); white-space: nowrap;
}
.data-cell:last-child { border-right: none; }
.data-cell .dl { font-size: .66rem; letter-spacing: .3em; color: #A9B39B; display: block; margin-bottom: 6px; }
.data-cell .dv { font-size: 1.05rem; color: #F7F1E7; font-weight: 600; letter-spacing: .06em; }

/* ---------- A NOTE FROM ARY ---------- */
.note-band { padding: 84px 0 8px; }
.note-band .kicker { justify-content: flex-start; }
.note-band h2 {
  font-family: var(--serif); font-size: 1.85rem; letter-spacing: .08em; line-height: 1.6;
  margin: 20px 0 18px; color: var(--matcha);
}
.note-band p { color: var(--ink-soft); font-size: 1.02rem; line-height: 2.1; margin: 0; }

/* ---------- 區塊標題 ---------- */
.section { padding: 84px 0 20px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 36px; gap: 20px; flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--serif); font-size: 1.9rem; letter-spacing: .12em; margin: 14px 0 0; color: var(--matcha);
}
.section-link {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .24em;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.section-link:hover { color: var(--cyan); }

/* ---------- 文章卡（紙卡） ---------- */
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 960px) { .bp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bp-grid { grid-template-columns: 1fr; } }

.bp-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative;
  box-shadow: 0 2px 12px rgba(96, 84, 52, .05);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.bp-card:hover {
  transform: translateY(-5px); border-color: rgba(192,133,82,.45);
  box-shadow: 0 20px 44px rgba(96, 84, 52, .13);
}
.bp-cover { aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--bg2); }
.bp-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; display: block; }
.bp-card:hover .bp-cover img { transform: scale(1.05); }
.bp-cover .no-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--sage);
  background: linear-gradient(135deg, #EFE6D0, #E7DCC0);
}
.bp-type {
  position: absolute; top: 12px; left: 12px;
  font-size: .7rem; letter-spacing: .26em;
  background: rgba(52, 72, 58, .9); color: #F7F1E7;
  border-radius: 6px; padding: 6px 12px;
}
.bp-body { padding: 22px 22px 0; flex: 1; }
.bp-route {
  font-size: .85rem; letter-spacing: .12em; color: var(--cyan);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.bp-body h3 {
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; letter-spacing: .04em;
  margin: 0 0 10px; font-weight: 700; color: var(--ink);
}
.bp-excerpt { color: var(--muted); font-size: .92rem; line-height: 1.8; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 卡片頁腳：日期＋評分 */
.bp-stub {
  margin-top: 18px; border-top: 1px dashed rgba(133,120,88,.4);
  padding: 15px 22px; display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.bp-date { font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .12em; }
.bp-score { font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--cyan); letter-spacing: .08em; }
.bp-score small { color: var(--muted); font-weight: 400; }

/* 精選大卡 */
.bp-featured { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 26px; }
.bp-featured .bp-cover { aspect-ratio: auto; min-height: 380px; }
.bp-featured .bp-body { padding: 40px 44px 0; display: flex; flex-direction: column; justify-content: center; }
.bp-featured .bp-body h3 { font-size: 2rem; }
.bp-featured .bp-excerpt { -webkit-line-clamp: 3; font-size: 1rem; }
@media (max-width: 860px) {
  .bp-featured { grid-template-columns: 1fr; }
  .bp-featured .bp-cover { min-height: 240px; aspect-ratio: 16/9; }
  .bp-featured .bp-body { padding: 26px 24px 0; }
  .bp-featured .bp-body h3 { font-size: 1.5rem; }
}

/* ---------- 頻道導覽 ---------- */
.channel-nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 0;
}
.channel-card {
  text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 22px; background: var(--panel);
  transition: all .25s; position: relative; overflow: hidden;
}
.channel-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--amber), transparent); opacity: 0; transition: opacity .25s;
}
.channel-card:hover { border-color: rgba(192,133,82,.45); transform: translateY(-3px); }
.channel-card:hover::after { opacity: 1; }
.channel-card .ch-ico {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--cyan);
  margin-bottom: 12px; display: block; letter-spacing: .05em;
}
.channel-card h3 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: .14em; font-family: var(--serif); color: var(--matcha); }
.channel-card p { margin: 0 0 10px; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.channel-card .ch-count { font-family: var(--mono); font-size: .72rem; color: var(--sage); letter-spacing: .2em; }
@media (max-width: 1100px) { .channel-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .channel-nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .channel-nav { grid-template-columns: 1fr; } }

/* ---------- 訂閱橫幅（鼠尾草綠區塊） ---------- */
.sub-band {
  margin: 90px 0 0; padding: 80px 0; position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 20% 50%, rgba(247,241,231,.20), transparent 70%),
    var(--sage);
  text-align: center; color: var(--matcha);
}
.sub-band .kicker { color: var(--matcha); }
.sub-band .kicker::before { background: var(--matcha); }
.sub-band h2 { font-family: var(--serif); font-size: 2rem; letter-spacing: .1em; margin: 18px 0 12px; color: var(--matcha); }
.sub-band p { color: rgba(47,69,60,.8); max-width: 560px; margin: 0 auto 34px; }
.sub-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.sub-form input {
  flex: 1; padding: 16px 20px; font-size: 1rem; border-radius: 999px;
  border: 1px solid rgba(47,69,60,.25); background: #FFFDF6; color: var(--ink);
  font-family: var(--sans);
}
.sub-form input::placeholder { color: #9AA08C; }
.sub-form input:focus { outline: none; border-color: var(--matcha); box-shadow: 0 0 0 3px rgba(47,69,60,.15); }
.sub-form .btn { white-space: nowrap; }
@media (max-width: 560px) { .sub-form { flex-direction: column; } }
.form-msg { margin-top: 16px; font-size: .95rem; }
.form-msg.ok { color: #4E7A3A; } .form-msg.err { color: #B3402A; }
.sub-band .form-msg.ok { color: #2F5D33; }

/* ---------- Footer（深抹茶） ---------- */
.site-footer {
  padding: 60px 0 40px; color: #B9C0AB; font-size: .88rem; background: var(--matcha-deep);
}
.site-footer .logo { color: #F7F1E7; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { text-decoration: none; color: #B9C0AB; font-size: .9rem; letter-spacing: .08em; }
.footer-nav a:hover { color: var(--amber); }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(216,197,165,.2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; color: #8E9A84;
}

/* ---------- 文章頁 ---------- */
.post-cover {
  position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg2);
}
.post-cover .cover-img { position: absolute; inset: 0; }
.post-cover .cover-img img { width: 100%; height: 100%; object-fit: cover; }
.post-cover .cover-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,241,231,.05) 0%, rgba(247,241,231,.35) 55%, var(--bg) 100%);
}
.post-head { position: relative; z-index: 2; padding-bottom: 50px; width: 100%; }
.post-head h1 {
  font-family: var(--serif); font-size: clamp(1.8rem, 4.5vw, 3rem); color: var(--ink);
  line-height: 1.4; letter-spacing: .04em; margin: 20px 0 16px; max-width: 20em;
}
.post-meta-line {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; color: var(--muted);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.post-meta-line .cat { color: var(--cyan); }

/* 資料面板 */
.data-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  margin: 44px 0; overflow: hidden;
}
.data-panel-head {
  padding: 16px 28px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .34em; color: var(--cyan);
  display: flex; align-items: center; gap: 12px;
  background: rgba(201, 111, 82, .05);
}
.data-panel-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.data-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.data-grid .cell { padding: 20px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-grid .cell .dl { font-family: var(--mono); font-size: .68rem; letter-spacing: .28em; color: var(--muted); display: block; margin-bottom: 8px; }
.data-grid .cell .dv { font-size: 1.08rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.data-grid .cell .dv.route { font-family: var(--mono); color: var(--cyan); }
@media (max-width: 860px) { .data-grid { grid-template-columns: repeat(2, 1fr); } }

/* 評分區 */
.sharp-panel {
  display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center;
  border: 1px solid var(--champagne); border-radius: var(--radius);
  padding: 40px; margin: 44px 0;
  background: radial-gradient(400px 200px at 15% 50%, rgba(223,160,80,.12), transparent 70%), var(--panel);
}
.sharp-panel .gauge-wrap { text-align: center; }
.sharp-panel .gauge-label { font-family: var(--mono); font-size: .75rem; letter-spacing: .3em; color: var(--cyan); margin-top: 10px; }
.sharp-bars { display: grid; gap: 16px; }
.sharp-bar .sb-head { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 8px; }
.sharp-bar .sb-head .v { font-family: var(--mono); color: var(--cyan); font-weight: 700; }
.sharp-bar .track { height: 8px; background: rgba(133,120,88,.16); border-radius: 6px; overflow: hidden; }
.sharp-bar .track i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--amber), var(--cyan)); }
@media (max-width: 700px) { .sharp-panel { grid-template-columns: 1fr; padding: 30px 24px; } .sharp-panel .gauge-wrap { margin: 0 auto; } }

/* 內文排版 */
.post-body { font-size: 1.08rem; line-height: 2.1; color: var(--ink-soft); }
.post-body p { margin: 0 0 1.6em; text-align: justify; text-justify: inter-ideograph; }
.post-body h2, .post-body h3 {
  font-family: var(--serif); color: var(--matcha); letter-spacing: .08em;
  margin: 2.2em 0 1em; line-height: 1.5;
}
.post-body h2 { font-size: 1.6rem; }
.post-body h2::before { content: ""; display: inline-block; width: 28px; height: 3px; background: linear-gradient(90deg, var(--amber), transparent); margin-right: 14px; vertical-align: middle; border-radius: 2px; }
.post-body h3 { font-size: 1.3rem; }
.post-body img { border-radius: 12px; }
.post-body blockquote {
  margin: 0 0 1.6em; padding: 6px 0 6px 22px;
  border-left: 2px solid var(--amber); color: var(--ink); font-family: var(--serif); font-size: 1.15rem;
}
.post-body ul, .post-body ol { margin: 0 0 1.6em; padding-left: 1.6em; }
.post-body a { color: var(--cyan); }
.post-body figure { margin: 2em 0; }
.post-body figcaption { text-align: left; color: var(--muted); font-size: .83rem; line-height: 1.8; margin-top: 10px; padding-left: 12px; letter-spacing: .04em; border-left: 2px solid var(--amber, #DFA050); }
.post-body figcaption .cap-label { color: var(--ink); font-weight: 700; letter-spacing: .06em; }

/* 圖集 */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 40px 0; }
.gallery a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--bg2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.gallery a:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
/* 燈箱 */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(28, 36, 30, .94);
  display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.lightbox .lb-cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #C9CFBC; font-size: .9rem; }

/* 分享 */
.share-row { display: flex; gap: 10px; align-items: center; margin: 50px 0 10px; flex-wrap: wrap; }
.share-row .lbl { font-family: var(--mono); font-size: .78rem; letter-spacing: .3em; color: var(--muted); margin-right: 8px; }
.share-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 12px 20px; font-size: .92rem; cursor: pointer;
  text-decoration: none; font-family: var(--sans); letter-spacing: .06em; transition: all .2s;
}
.share-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* 文章內訂閱 CTA（深抹茶） */
.post-sub-cta {
  margin: 60px 0; padding: 46px 40px; text-align: center;
  border-radius: 18px; background: var(--matcha); color: #F7F1E7;
}
.post-sub-cta h3 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .1em; margin: 0 0 10px; color: #FBF6EA; }
.post-sub-cta p { color: #C9CFBC; margin: 0 0 24px; }

/* 相關文章 */
.related { margin: 70px 0 30px; }
.related h2 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .14em; margin: 0 0 26px; color: var(--matcha); }

/* ---------- 頻道頁 ---------- */
.channel-hero { padding: 90px 0 30px; }
.channel-hero h1 { font-family: var(--serif); font-size: 2.6rem; letter-spacing: .1em; margin: 18px 0 12px; color: var(--matcha); }
.channel-hero p { color: var(--muted); max-width: 640px; }

/* ---------- 頻道服務清單（Atelier 接案項目） ---------- */
.channel-services { list-style: none; margin: 28px 0 4px; padding: 0; max-width: 640px; }
.channel-services li { display: flex; gap: 12px; align-items: baseline; padding: 13px 2px; border-top: 1px solid rgba(47,69,60,.18); font-size: 1rem; letter-spacing: .04em; line-height: 1.7; color: var(--matcha); }
.channel-services li:last-child { border-bottom: 1px solid rgba(47,69,60,.18); }
.channel-services li::before { content: "・"; color: #B08968; font-weight: 700; }

/* ---------- 關於 ---------- */
.about-hero { padding: 90px 0 40px; text-align: center; }
.about-hero .avatar {
  width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 26px;
  border: 2px solid rgba(223,160,80,.6); object-fit: cover; display: block;
  box-shadow: 0 14px 34px rgba(96, 84, 52, .18);
  background: linear-gradient(135deg, #EFE6D0, #E7DCC0);
}
.about-hero h1 { font-family: var(--serif); font-size: 2.4rem; letter-spacing: .12em; margin: 0 0 10px; color: var(--matcha); }
.about-stats { display: flex; justify-content: center; gap: 50px; margin: 44px 0; flex-wrap: wrap; }
.stat { text-align: center; }
.stat .n { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--cyan); }
.stat .l { font-size: .85rem; color: var(--muted); letter-spacing: .2em; margin-top: 6px; }
.about-body { font-size: 1.06rem; line-height: 2.1; color: var(--ink-soft); }
.about-body p { margin: 0 0 1.6em; }

/* ---------- 訂閱頁 ---------- */
.sub-page { padding: 100px 0 80px; text-align: center; }
.sub-page h1 { font-family: var(--serif); font-size: 2.4rem; letter-spacing: .1em; margin: 18px 0 14px; color: var(--matcha); }
.sub-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 50px 0; text-align: left; }
.perk { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; background: var(--panel); }
.perk .pi { font-size: 1.8rem; margin-bottom: 12px; display: block; }
.perk h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: .1em; font-family: var(--serif); color: var(--matcha); }
.perk p { margin: 0; color: var(--muted); font-size: .9rem; }
.perk.paid { border-color: rgba(192,133,82,.4); position: relative; }
.perk.paid .soon {
  position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .2em; color: var(--cyan); border: 1px solid rgba(192,133,82,.45);
  border-radius: 6px; padding: 4px 10px;
}
@media (max-width: 700px) { .sub-perks { grid-template-columns: 1fr; } }

/* ---------- 分頁 ---------- */
.pager { display: flex; gap: 10px; justify-content: center; margin: 50px 0 20px; }
.pager a, .pager span {
  min-width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  font-family: var(--mono); color: var(--ink-soft); padding: 0 14px; background: var(--panel);
}
.pager a:hover { border-color: var(--matcha); color: var(--matcha); }
.pager .on { background: var(--matcha); border-color: var(--matcha); color: #F7F1E7; font-weight: 700; }

/* ---------- 通用 ---------- */
.page-head { padding: 90px 0 34px; }
.page-head h1 { font-family: var(--serif); font-size: 2.4rem; letter-spacing: .1em; margin: 18px 0 10px; color: var(--matcha); }
.empty { text-align: center; color: var(--muted); padding: 80px 0; font-size: 1.05rem; letter-spacing: .1em; }
.back-link { font-family: var(--mono); font-size: .82rem; letter-spacing: .2em; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--cyan); }

/* ---------- 手機精修 ---------- */
@media (max-width: 700px) {
  .channel-card { padding: 22px 18px; }
  .channel-nav .channel-card:last-child { grid-column: span 2; }
  .section { padding: 60px 0 12px; }
  .section-head { margin-bottom: 26px; }
  .note-band { padding: 60px 0 4px; }
  .note-band h2 { font-size: 1.5rem; }
  .hero { min-height: 88vh; flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .kicker { font-size: .72rem; letter-spacing: .22em; text-indent: .22em; flex-wrap: nowrap; }
  .kicker::before { width: 22px; flex: 0 0 22px; }
  .hero-sub { letter-spacing: .12em; font-size: .88rem; line-height: 2; }
  .hero-bg {
    background: linear-gradient(180deg, rgba(47,69,60,.28) 0%, rgba(47,69,60,.02) 34%, rgba(47,69,60,.55) 66%, rgba(47,69,60,.96) 100%),
                url('../hero-mobile.jpg') center 22%/cover no-repeat, var(--matcha-deep);
  }
  .hero-inner { padding-bottom: 64px; }
  .page-head { padding: 70px 0 26px; }
  .page-head h1 { font-size: 1.9rem; }
  .data-strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; }
  .data-cell { padding: 13px 16px; border-top: 1px solid rgba(216,197,165,.18); }
  .data-cell:nth-child(-n+2) { border-top: none; }
  .data-cell:nth-child(2n) { border-right: none; }
  .data-cell .dl { letter-spacing: .18em; }
  .data-cell .dv { font-size: .95rem; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 1.78rem; letter-spacing: .04em; line-height: 1.5; }
  .hero-cta-row .btn { flex: 1 1 100%; text-align: center; padding: 16px 20px; }
  .section-head h2 { font-size: 1.55rem; }
  .bp-body h3 { font-size: 1.15rem; }
  .bp-body { padding: 18px 18px 0; }
  .sub-band { padding: 56px 0; margin-top: 60px; }
  .sub-band h2 { font-size: 1.55rem; }
  .sharp-panel { padding: 26px 20px; }
  .post-body { font-size: 1rem; }
  .footer-inner { flex-direction: column; gap: 20px; }
  .site-footer { padding: 44px 0 32px; }
}
@media (max-width: 460px) {
  .channel-nav .channel-card:last-child { grid-column: auto; }
}

/* ---------- 頻道 accent 色（官方色票・六帖） ---------- */
.channel-card[data-ch="wellness"]   { --chc: #97A48B; }
.channel-card[data-ch="journey"]    { --chc: #A9C2CF; }
.channel-card[data-ch="reflection"] { --chc: #C08552; }
.channel-card[data-ch="oracle"]     { --chc: #2F453C; }
.channel-card[data-ch="selfcare"]   { --chc: #DFA050; }
.channel-card[data-ch="atelier"]    { --chc: #B08968; }
.channel-card .ch-ico { color: var(--chc, var(--cyan)); }
.channel-card::after { background: linear-gradient(180deg, var(--chc, var(--amber)), transparent); }
.bp-type-wellness   { background: rgba(151,164,139,.94); color: #22362C; border: none; }
.bp-type-journey    { background: rgba(169,194,207,.94); color: #22362C; border: none; }
.bp-type-reflection { background: rgba(192,133,82,.94);  color: #FFF8EC; border: none; }
.bp-type-oracle     { background: rgba(47,69,60,.94);   color: #F7F1E7; border: none; }
.bp-type-selfcare   { background: rgba(223,160,80,.94); color: #22362C; border: none; }
.bp-type-atelier    { background: rgba(176,137,104,.94); color: #FFF8EC; border: none; }

/* =============================================================
 * Pathway 渲染模式（2026-10-20 參考 Etsy 治療師模板定案）
 * 全站大圓角畫框／Hero 左字右圖＋照片羽化／膠囊眉題徽章／
 * 膠囊按鈕＋圓形箭頭／卡片大圓角無陰影／大留白。
 * ============================================================= */
body { background: #E9E4D0; }
.page-frame {
  max-width: 1360px; margin: 18px auto; background: var(--bg);
  border: 1px solid rgba(47,69,60,.14); border-radius: 28px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(47,69,60,.10);
}
/* 頁首：奶油 bar 貼合畫框頂部 */
.site-header {
  background: var(--bg); border-bottom: 1px solid rgba(47,69,60,.12);
  width: min(1360px, calc(100% - 36px)); left: 50%; right: auto; top: 18px;
  transform: translateX(-50%); border-radius: 26px 26px 0 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.header-inner { max-width: none; }
.site-header .logo { color: var(--matcha); }
.site-header .logo-sub { color: var(--cyan); }
.site-header .main-nav a { color: var(--ink-soft); }
.site-header .main-nav a:hover { color: var(--cyan); background: rgba(192,133,82,.10); }
.site-header .main-nav a.active { color: var(--cyan); }
.site-header .lang-switch { border-color: rgba(47,69,60,.30); color: var(--muted); }
.site-header .lang-switch:hover { border-color: var(--cyan); color: var(--cyan); }
.site-header .menu-toggle { color: var(--matcha); border-color: rgba(47,69,60,.3); }
@media (max-width: 860px) {
  .site-header .main-nav { background: var(--bg); border-bottom: 1px solid rgba(47,69,60,.12); }
  .site-header .main-nav a { border-bottom: 1px solid rgba(47,69,60,.08); }
}
/* 眉題：描邊膠囊徽章 */
.kicker {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid rgba(47,69,60,.30); border-radius: 999px;
  padding: 7px 16px; font-size: .7rem; letter-spacing: .3em; text-indent: .1em;
  color: var(--matcha); background: rgba(255,253,246,.55);
}
.kicker::before { display: none; }
.sub-band .kicker { border-color: rgba(47,69,60,.4); background: rgba(255,253,246,.25); }
/* Hero：鼠尾草漸層底、左字右圖、照片左緣羽化 */
.hero { min-height: 0; display: block; background: var(--bg); }
.hero-bg {
  background: linear-gradient(100deg, #EDF0E2 0%, #E2E8D2 46%, #D8E0C6 78%, #CFDABD 100%);
}
.hero-inner { padding: 72px 0 64px; }
.hero .kicker { color: var(--matcha); border-color: rgba(47,69,60,.35); background: rgba(255,253,246,.5); }
.hero h1 { color: var(--matcha); text-shadow: none; max-width: 11.5em; }
.hero h1 .h1-accent { color: var(--amber); }
.hero-sub { color: rgba(47,69,60,.78); }
.hero-figure {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 1;
  pointer-events: none;
}
.hero-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.hero .btn-ghost { background: transparent; color: var(--matcha); border: 1px solid rgba(47,69,60,.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .btn-ghost:hover { border-color: var(--matcha); color: var(--matcha); }
/* 按鈕：全圓膠囊＋右端圓形箭頭徽章 */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 13px 13px 30px; }
.btn::after {
  content: "→"; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: #FFFDF6; color: var(--matcha);
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
}
.btn-ghost::after { background: var(--matcha); color: #F7F1E7; }
.sub-form .btn { padding: 10px 10px 10px 26px; }
/* 卡片：大圓角、無陰影、極細邊 */
.bp-card, .channel-card, .sharp-panel, .data-panel, .perk { border-radius: 22px; box-shadow: none; }
.bp-card { border-color: rgba(47,69,60,.10); }
.bp-card:hover { box-shadow: 0 18px 40px rgba(47,69,60,.10); }
/* 區塊大留白＋宣言置中 */
.section { padding-top: 104px; }
.note-band { text-align: center; padding-top: 96px; }
.note-band p { max-width: 660px; margin: 0 auto; }
.note-band h2 { margin-left: auto; margin-right: auto; }
/* 訂閱：鼠尾草內嵌大圓角區塊 */
.sub-band { margin: 100px 22px 44px; border-radius: 28px; }
/* 手機 */
@media (max-width: 700px) {
  .page-frame { margin: 10px; border-radius: 20px; }
  .site-header { width: calc(100% - 20px); top: 10px; border-radius: 18px 18px 0 0; }
  .hero-inner { padding: 48px 0 34px; }
  .hero-figure { position: relative; width: 100%; height: 380px; margin-top: 4px; }
  .hero-figure img {
    object-position: center 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  }
  .sub-band { margin: 64px 12px 28px; }
  .section { padding-top: 68px; }
  .note-band { padding-top: 64px; }
}

/* =============================================================
 * 配置模式定案（2026-10-20 使用者設計圖）：全幅無框、
 * 頁首浮於漸層上、底圖右置寬羽化、標語左置、墨綠身份帶。
 * ============================================================= */
body { background: var(--bg); }
.page-frame { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
.site-header {
  position: absolute; background: transparent; border-bottom: 0;
  width: auto; left: 0; right: 0; top: 0; transform: none; border-radius: 0;
}
.header-inner { max-width: 1320px; }
.hero-bg { background: linear-gradient(96deg, #F3F1E5 0%, #ECEFE0 42%, #E0E6CF 74%, #D2DEC0 100%); }
.hero-inner { padding: 92px 0 84px; }
.hero .kicker { gap: 10px; background: rgba(255,253,246,.45); }
.hero .kicker::before {
  display: inline-block; content: ''; width: 7px; height: 7px;
  border-radius: 50%; background: var(--amber); flex: 0 0 7px;
}
.hero h1 {
  font-family: 'Playfair Display', 'Noto Serif TC', serif; font-weight: 600;
  font-size: clamp(2.7rem, 5.4vw, 4.4rem); line-height: 1.14; letter-spacing: 0;
  max-width: 12em;
}
.hero h1 .h1-accent { color: var(--matcha); }
.hero-sub { font-family: 'Noto Serif TC', serif; font-size: 1.28rem; color: rgba(47,69,60,.88); letter-spacing: .04em; }
.hero-line { margin-top: 14px; font-family: 'Noto Serif TC', serif; font-size: 1.06rem; color: rgba(47,69,60,.74); letter-spacing: .05em; line-height: 1.9; }
.hero-sub2 { margin-top: 12px; font-size: 1rem; color: rgba(47,69,60,.60); letter-spacing: .06em; }
.hero .btn-amber { background: var(--matcha); color: #F7F1E7; box-shadow: 0 16px 34px rgba(47,69,60,.28); }
.hero .btn-amber:hover { background: #243830; color: #F7F1E7; }
.hero-figure { width: 52%; }
.hero-figure img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48%);
}
/* 身份帶（取代數據條） */
.id-strip {
  position: relative; z-index: 2; background: var(--matcha);
  display: flex; align-items: center; gap: 38px; flex-wrap: wrap;
  padding: 26px max(24px, calc((100% - 1160px) / 2));
}
.id-label {
  font-size: .84rem; letter-spacing: .22em; line-height: 1.8; color: rgba(247,241,231,.85);
  border-right: 1px solid rgba(247,241,231,.25); padding-right: 38px; white-space: nowrap;
}
.id-label span { display: block; }
.id-words {
  font-family: 'Playfair Display', 'Noto Serif TC', serif; font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 2rem); color: #F7F1E7; letter-spacing: .02em;
}
.id-words i { font-style: normal; color: var(--amber); margin: 0 .3em; }
.sub-band { margin: 100px auto 44px; max-width: 1312px; width: calc(100% - 44px); }
@media (max-width: 700px) {
  .site-header { width: auto; top: 0; border-radius: 0; }
  .hero-inner { padding: 84px 0 40px; }
  .hero-figure { width: 100%; }
  .id-strip { gap: 16px; padding: 22px 20px; }
  .id-label { border-right: 0; padding-right: 0; }
  .id-words { font-size: 1.25rem; }
  .sub-band { margin: 64px auto 28px; width: calc(100% - 24px); }
}

/* Hero 漸層自頁面頂端開始（頁首浮於其上，與設計圖一致） */
.hero { margin-top: -68px; }
.hero-inner { padding-top: 160px; }
@media (max-width: 700px) { .hero-inner { padding-top: 140px; } }

/* 標語字體與底圖取景（2026-10-20 依使用者參考圖）：Didone 高對比襯線＋人物位置上提 */
.hero h1 { font-family: 'Bodoni Moda', 'Playfair Display', 'Noto Serif TC', serif; font-weight: 500; }
.id-words { font-family: 'Bodoni Moda', 'Playfair Display', 'Noto Serif TC', serif; }
@media (min-width: 701px) {
  .hero-figure img { object-position: center 58%; }
}

/* 字體規格定稿（2026-10-20）：英文展示=Noto Serif Display／中文標題=Noto Serif TC／內文 UI=Noto Sans TC */
.hero h1 { font-family: 'Noto Serif Display', 'Noto Serif TC', serif; font-weight: 500; }
.id-words { font-family: 'Noto Serif Display', 'Noto Serif TC', serif; font-weight: 500; }
.kicker { font-family: 'Noto Serif Display', 'Noto Serif TC', serif; font-weight: 500; }
.logo-sub { font-family: 'Noto Serif Display', serif; }
body { line-height: 1.8; }
.note-band h2, .section-head h2, .channels-band h2 { line-height: 1.3; }

/* 字標定版（2026-10-20 參考圖）：羲和＋XIHE 單行並排、同基線同色 */
.logo { display: inline-flex; align-items: baseline; gap: 15px; }
.logo-sub {
  font-family: 'Noto Serif Display', serif; font-weight: 500;
  font-size: 1.02rem; letter-spacing: .38em; color: inherit; margin-top: 0;
}
.site-header .logo, .site-footer .logo { flex-direction: row; align-items: baseline; gap: 15px; }
.site-header .logo-sub {
  font-family: 'Noto Serif Display', serif; font-weight: 500;
  font-size: 1.02rem; letter-spacing: .38em; color: var(--matcha); margin-top: 0;
}
.site-footer .logo-sub {
  font-family: 'Noto Serif Display', serif; font-weight: 500;
  font-size: 1.02rem; letter-spacing: .38em; color: inherit; margin-top: 0;
}

/* =============================================================
 * Hero 手機版修正（2026-10-21 使用者截圖回報）：
 * 1) .hero-inner 的 padding 簡寫蓋掉了 .wrap 的左右 22px 內距，
 *    手機上標題／內文／按鈕貼齊螢幕邊緣 → 補回左右內距（桌機一併受惠，對齊 .wrap 網格）。
 * 2) 手機照片橫幅（380px）取景停在 center 40%，人物臉被推到橫幅下緣、
 *    第一屏只剩建築與天空 → 改以人物為中心取景（60%），橫幅加高至 400px。
 * ============================================================= */
.hero-inner { padding-left: 22px; padding-right: 22px; }
@media (max-width: 700px) {
  .hero-figure { height: 400px; }
  .hero-figure img { object-position: center 60%; }
}

/* =============================================================
 * Note 區塊靠左修正（2026-10-21 使用者回報）：宣言區整段置中影響長文閱讀 →
 * 改為靠左對齊；桌機內文欄寬維持 660px 置中欄位，文字本身靠左。
 * ============================================================= */
.note-band { text-align: left; }
.note-band h2 { margin-left: 0; margin-right: 0; }
.note-band p { text-align: left; }

/* 身份帶排版整理（2026-10-21 使用者要求）：詞彙分兩組，間隔點只出現在詞與詞之間；手機版兩行置中，不再有行尾孤點 */
.id-row { display: inline; }
.id-w + .id-w::before, .id-row + .id-row::before { content: "·"; color: var(--amber); margin: 0 .38em; }
@media (max-width: 700px) {
  .id-strip { justify-content: center; }
  .id-words { text-align: center; line-height: 1.75; }
  .id-row { display: block; }
  .id-row + .id-row::before { content: none; }
}

/* ---------- 到訪計數器・晨光（編輯式） ---------- */
.visit-counter {
  margin-top: 46px; display: inline-flex; flex-direction: column; gap: 14px;
  max-width: 100%; padding: 22px 34px 20px 2px; position: relative;
  border-top: 1px solid rgba(47, 69, 60, .35);
  border-bottom: 1px solid rgba(47, 69, 60, .16);
}
.visit-counter::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px;
  background: var(--amber);
}
.vc-label {
  font-family: 'Noto Serif Display', 'Noto Serif TC', serif; font-size: .72rem; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: 14px;
}
.vc-digits { display: flex; gap: .12em; max-width: 100%; }
.vc-digit {
  font-family: 'Noto Serif Display', 'Noto Serif TC', serif; font-size: 2.55rem; font-weight: 300; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--matcha); text-align: center;
}
.vc-digit.dim { color: rgba(47, 69, 60, .26); }
@media (max-width: 700px) {
  .visit-counter { margin-top: 36px; padding: 18px 10px 16px 2px; gap: 11px; }
  .vc-label { letter-spacing: .3em; }
  .vc-digit { font-size: 1.9rem; }
}
/* 回到頁首 */
.to-top{position:fixed;right:30px;bottom:30px;z-index:900;width:46px;height:46px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,background .2s ease,color .2s ease,border-color .2s ease;background:var(--panel);color:var(--matcha);border:1px solid rgba(47,69,60,.38);box-shadow:0 10px 24px rgba(46,51,42,.14)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top svg{transition:transform .25s ease}
.to-top svg .win{fill:var(--panel)}
.to-top:hover svg{transform:translateY(-3px)}
.to-top svg .flame{fill:#DFA050;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.5);opacity:.75;transition:transform .18s ease,opacity .18s ease}
.to-top:hover svg .flame{opacity:1;animation:dwFlame .22s ease-in-out infinite alternate}
@keyframes dwFlame{from{transform:scaleY(1.05) scaleX(1)}to{transform:scaleY(1.45) scaleX(.92)}}
.to-top:hover{color:var(--amber);border-color:var(--amber)}
@media (max-width:700px){.to-top{width:44px;height:44px;right:26px;bottom:30px}}

/* 品牌 Logo 圖（2026-10-22 使用者提供 ARYTRIPS.TOP 完整字標圖，取代文字字標） */
.logo-img { display: block; width: auto; border-radius: 12px; }
.site-header .logo, .site-footer .logo { align-items: center; }
.site-header .logo-img { height: 78px; }
.site-footer .logo-img { height: 118px; }
.header-inner { height: auto; min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 860px) {
  .site-header .logo-img { height: 60px; }
  .site-footer .logo-img { height: 96px; }
}


/* 頁尾排版重整（2026-10-22 使用者截圖回報）：導覽改雙欄欄位、手機網格＋訂閱獨立一列、節奏統一 */
.footer-nav {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(2, minmax(104px, auto));
  gap: 12px 38px; justify-content: end;
}
.footer-nav a { padding: 2px 0; }
@media (max-width: 860px) {
  .site-footer { padding: 36px 0 30px; }
  .footer-inner { gap: 24px; }
  .footer-nav {
    grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr 1fr;
    gap: 14px 22px; justify-content: stretch; width: 100%;
  }
  .footer-nav a:last-child { grid-column: 1 / -1; margin-top: 6px; }
  .footer-bottom { margin-top: 30px; padding-top: 20px; gap: 10px; }
}



/* 訂閱區節奏收斂（2026-10-22 使用者截圖回報）：縮小上下留白、表單高度收斂 */
.sub-band { margin-top: 64px; padding: 60px 0; }
.sub-band h2 { margin: 14px 0 10px; }
.sub-band p { margin-bottom: 26px; }
.sub-form { gap: 12px; }
.sub-form input { padding: 14px 18px; }
.sub-form .btn { padding: 14px 30px; }
@media (max-width: 860px) {
  .sub-band { margin-top: 48px; padding: 44px 0; }
  .sub-band p { margin-bottom: 22px; }
}



/* 訂閱說明文字改左對齊（2026-10-22 使用者回報：置中兩行不好看），與表單同欄寬對齊左緣 */
.sub-band p { text-align: left; max-width: 520px; line-height: 1.8; }


/* 圖說改左對齊（2026-10-23 使用者指示：置中第二行難看，比照望舒） */

/* 三語化：日語字體與語言切換（2026-10-23） */
html[lang="ja"] { --serif: "Noto Serif JP", "Noto Serif TC", Georgia, serif; --sans: "Noto Sans JP", "Noto Sans TC", -apple-system, sans-serif; }
.lang-switch.active { border-color: var(--amber); color: var(--amber); }

/* ---------- 羲和商店（第一期） ---------- */
.shop-wrap { padding-bottom: 30px; }
.shop-hero { text-align: center; padding: 34px 0 8px; }
.shop-hero.slim { padding-top: 10px; }
.shop-hero .kicker { justify-content: center; }
.shop-title { font-family: var(--serif); font-size: 2rem; letter-spacing: .14em; color: var(--ink); margin: 10px 0 12px; font-weight: 700; }
.shop-lede { color: var(--ink-soft); line-height: 2; max-width: 34em; margin: 0 auto; }
.shop-section { margin-top: 44px; }
.shop-sec-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 24px; }
.shop-sec-head h2 { font-family: var(--serif); font-size: 1.3rem; letter-spacing: .2em; color: var(--ink); margin: 0; }
.shop-sec-no { color: var(--amber); font-family: var(--serif); letter-spacing: .2em; font-size: .95rem; }
.shop-sec-note { margin-left: auto; color: var(--muted); font-size: .85rem; letter-spacing: .15em; }
.shop-empty { text-align: center; color: var(--muted); padding: 40px 0; letter-spacing: .1em; }
.shop-empty-box { text-align: center; padding: 46px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.shop-empty-box.tall { padding: 70px 20px; }
.shop-crumb { color: var(--muted); font-size: .9rem; letter-spacing: .12em; margin: 6px 0 20px; }
.shop-crumb a { color: var(--cyan); text-decoration: none; }
.shop-crumb span { margin: 0 8px; }

/* 原作陳列 */
.shop-originals { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.shop-art-card { display: block; text-decoration: none; color: inherit; }
.shop-art-card.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: center; }
.shop-art-frame { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); aspect-ratio: 4 / 3; }
.shop-art-card.is-lead .shop-art-frame { aspect-ratio: 16 / 10; }
.shop-art-frame img { width: 100%; height: 100%; object-fit: contain; background: var(--panel2); display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.shop-art-card:hover .shop-art-frame img { transform: scale(1.035); }
.shop-art-meta { display: block; padding-top: 14px; }
.shop-art-card.is-lead .shop-art-meta { padding-top: 0; }
.shop-art-name { display: block; font-family: var(--serif); font-size: 1.25rem; letter-spacing: .12em; color: var(--ink); }
.shop-art-card.is-lead .shop-art-name { font-size: 1.7rem; }
.shop-art-spec { display: block; color: var(--muted); font-size: .9rem; margin-top: 6px; letter-spacing: .08em; }
.shop-art-price { display: block; color: var(--cyan); margin-top: 8px; letter-spacing: .08em; }
.shop-sold-seal {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: #A63D2E; color: #F6F1E7; font-family: var(--serif);
  font-size: .82rem; letter-spacing: .3em; text-indent: .3em;
  padding: 7px 10px 7px 12px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(246,241,231,.5), inset 0 0 0 3px #A63D2E;
  transform: rotate(4deg);
}
.shop-sold-seal.lg { font-size: .95rem; padding: 9px 12px 9px 15px; }

/* 選物格 */
.shop-goods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shop-good-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 14px 18px; }
.shop-good-frame { position: relative; display: block; overflow: hidden; border-radius: calc(var(--radius) - 6px); aspect-ratio: 1 / 1; background: var(--panel2); }
.shop-good-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.shop-good-card:hover .shop-good-frame img { transform: scale(1.04); }
.shop-out-tag { position: absolute; left: 10px; bottom: 10px; background: rgba(34,40,32,.78); color: #F3EDDD; font-size: .78rem; letter-spacing: .2em; padding: 5px 9px; border-radius: 3px; }
.shop-good-name { display: block; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .1em; color: var(--ink); margin-top: 14px; }
.shop-good-sub { display: block; color: var(--muted); font-size: .88rem; margin-top: 4px; }
.shop-good-price { display: block; color: var(--cyan); margin-top: 8px; }
.shop-good-price s, .pd-price s { color: var(--muted); font-weight: 400; margin-right: 6px; }

/* 商品／作品頁 */
.pd-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.pd-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: zoom-in; }
.pd-frame img { width: 100%; display: block; transition: transform .45s ease; }
.pd-frame.zoomed { cursor: zoom-out; }
.pd-frame.zoomed img { transform: scale(2); }
.pd-zoom-hint { color: var(--muted); font-size: .85rem; letter-spacing: .12em; margin-top: 10px; text-align: center; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb { width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); cursor: pointer; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.pd-name { font-family: var(--serif); font-size: 1.8rem; letter-spacing: .12em; color: var(--ink); margin: 0 0 8px; }
.pd-sub { color: var(--ink-soft); line-height: 1.9; margin: 0 0 18px; }
.pd-ledger { margin: 0 0 20px; border-top: 1px solid var(--line); }
.pd-ledger > div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pd-ledger dt { width: 5.5em; flex-shrink: 0; color: var(--muted); letter-spacing: .25em; font-size: .9rem; }
.pd-ledger dd { margin: 0; color: var(--ink); }
.pd-price { font-size: 1.15rem; color: var(--ink); margin: 0 0 20px; }
.pd-price strong { font-size: 1.45rem; color: var(--cyan); letter-spacing: .04em; }
.pd-price-note { color: var(--muted); font-size: .85rem; }
.pd-framing { border: none; padding: 0; margin: 0 0 18px; }
.pd-framing legend { font-size: .92rem; letter-spacing: .25em; color: var(--muted); margin-bottom: 10px; padding: 0; }
.pd-frame-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer; background: var(--panel); }
.pd-frame-opt:has(input:checked) { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.pd-frame-name { flex: 1; color: var(--ink); }
.pd-frame-delta { color: var(--cyan); font-size: .92rem; }
.pd-qty { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pd-qty label { letter-spacing: .25em; color: var(--muted); font-size: .92rem; }
.pd-qty input { width: 76px; }
.pd-stock { color: var(--muted); font-size: .88rem; }
.pd-add { width: 100%; letter-spacing: .3em; text-indent: .3em; }
.pd-sold-note { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px 20px; }
.pd-sold-note p { margin: 0; color: var(--ink); letter-spacing: .06em; }
.pd-sold-sub { color: var(--muted); font-size: .9rem; margin-top: 6px !important; }
.pd-story { margin-top: 48px; }
.pd-story-body { line-height: 2.1; color: var(--ink-soft); max-width: 42em; }

/* 收藏帖 */
.cartx-list { border-top: 1px solid var(--line); }
.cartx-row { display: grid; grid-template-columns: 84px 1fr auto auto auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cartx-thumb { width: 84px; height: 84px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: block; background: var(--panel); }
.cartx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartx-name { display: block; font-family: var(--serif); color: var(--ink); text-decoration: none; letter-spacing: .08em; font-size: 1.05rem; }
.cartx-opt { display: block; color: var(--muted); font-size: .87rem; margin-top: 3px; }
.cartx-unit { display: block; color: var(--muted); font-size: .9rem; margin-top: 5px; }
.cartx-qty-form { display: flex; gap: 8px; align-items: center; }
.cartx-qty-form input { width: 62px; }
.cartx-mini { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 12px; cursor: pointer; letter-spacing: .1em; }
.cartx-one { color: var(--muted); letter-spacing: .1em; }
.cartx-line { font-family: var(--serif); color: var(--ink); font-size: 1.05rem; min-width: 6.5em; text-align: right; }
.cartx-remove button { border: none; background: none; color: var(--muted); cursor: pointer; letter-spacing: .15em; font-size: .88rem; }
.cartx-remove button:hover { color: var(--danger); }
.cartx-summary { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 22px 24px; }
.cartx-sum-rows > div { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-soft); }
.cartx-sum-rows strong { color: var(--ink); font-family: var(--serif); font-size: 1.15rem; }
.cartx-ship-note { color: var(--muted); font-size: .9rem; }
.cartx-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 14px; flex-wrap: wrap; }
.cartx-go { letter-spacing: .25em; text-indent: .25em; }

/* 結帳 */
.co-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; }
.co-h { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .22em; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 9px; margin: 26px 0 18px; }
.co-grid .co-h:first-child { margin-top: 0; }
.co-addr { display: grid; grid-template-columns: 130px 1fr; gap: 14px; }
.co-opts { display: grid; gap: 10px; }
.co-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; background: var(--panel); cursor: pointer; }
.co-opt span { flex: 1; color: var(--ink); }
.co-opt em { font-style: normal; color: var(--cyan); font-size: .92rem; }
.co-opt.is-off { opacity: .55; cursor: not-allowed; }
.co-opt:has(input:checked) { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.co-atm { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); padding: 16px 20px; }
.co-atm h3 { margin: 0 0 8px; font-family: var(--serif); letter-spacing: .2em; font-size: 1rem; color: var(--ink); }
.co-atm p { margin: 0; line-height: 1.95; color: var(--ink-soft); }
.co-side { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 6px 22px 22px; position: sticky; top: 18px; }
.co-sum-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; }
.co-sum-rows .co-total { border-bottom: none; font-size: 1.05rem; color: var(--ink); }
.co-sum-rows .co-total strong { color: var(--cyan); font-family: var(--serif); font-size: 1.2rem; }
.co-submit { width: 100%; margin-top: 18px; letter-spacing: .3em; text-indent: .3em; }
.co-note { color: var(--muted); font-size: .88rem; line-height: 1.9; margin-top: 12px; }

/* 完成頁 */
.done-box { text-align: center; max-width: 640px; margin: 0 auto; }
.done-seal { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--matcha); color: #F6F1E7; border-radius: 6px; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; box-shadow: inset 0 0 0 2px rgba(246,241,231,.35), inset 0 0 0 3.5px var(--matcha); margin-top: 14px; }
.done-no { color: var(--ink-soft); letter-spacing: .1em; }
.done-msg { color: var(--ink-soft); line-height: 2; }
.done-sum { text-align: left; margin-top: 26px; }
.done-atm { text-align: left; margin-top: 22px; }

@media (max-width: 900px) {
  .shop-goods { grid-template-columns: repeat(2, 1fr); }
  .shop-art-card.is-lead { grid-template-columns: 1fr; }
  .pd-grid, .co-grid { grid-template-columns: 1fr; }
  .co-side { position: static; }
}
@media (max-width: 560px) {
  .shop-originals, .shop-goods { grid-template-columns: 1fr; }
  .shop-title { font-size: 1.6rem; }
  .pd-name { font-size: 1.45rem; }
  .cartx-row { grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; }
  .cartx-thumb { width: 64px; height: 64px; }
  .cartx-qty { grid-column: 2; }
  .cartx-line { grid-column: 3; grid-row: 1; }
  .cartx-remove { grid-column: 3; }
  .co-addr { grid-template-columns: 1fr; }
}

/* ===== 客製題字委託 ===== */
.cm-steps { list-style: none; margin: 0; padding: 0; counter-reset: cm; }
.cm-steps li { padding: 11px 0 11px 34px; position: relative; border-bottom: 1px solid var(--line); }
.cm-steps li:last-child { border-bottom: none; }
.cm-steps li::before { counter-increment: cm; content: counter(cm); position: absolute; left: 0; top: 11px; width: 23px; height: 23px; border: 1px solid var(--amber); border-radius: 50%; color: var(--cyan); font-size: .8rem; display: flex; align-items: center; justify-content: center; font-family: var(--serif); }
.cm-steps b { display: block; color: var(--ink); letter-spacing: .08em; margin-bottom: 2px; }
.cm-steps span { color: var(--ink-soft); font-size: .9rem; line-height: 1.75; }
.cm-band { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 30px 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cm-band p { flex: 1; min-width: 260px; margin: 0; line-height: 2; color: var(--ink-soft); }
.cm-status-band { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 22px 26px; margin-bottom: 8px; }
.cm-code { font-size: .85rem; letter-spacing: .18em; color: var(--muted); }
.cm-status { font-family: var(--serif); font-size: 1.45rem; color: var(--ink); margin-top: 6px; letter-spacing: .06em; }
.cm-quote { text-align: right; color: var(--ink-soft); line-height: 1.9; font-size: .95rem; }
.cm-quote strong { color: var(--cyan); font-family: var(--serif); font-size: 1.25rem; }
.cm-ledger { margin-top: 18px; }
.cm-action { margin-top: 34px; }
.cm-form { max-width: 520px; margin-top: 16px; }
.cm-photo { max-width: 640px; }
.cm-photo img { width: 100%; display: block; border-radius: var(--radius); }
@media (max-width: 560px) {
  .cm-quote { text-align: left; }
  .cm-band { padding: 24px 20px; }
}


/* 商品說明（HTML 模式）*/
.pd-story-body.post-body p { text-align: left; }
.pd-story-body.post-body img { max-width: 100%; height: auto; border-radius: 6px; }
.pd-story-body.post-body figure { margin: 0 0 1.6em; }
.pd-story-body.post-body figcaption { font-size: .85rem; color: var(--muted); margin-top: .5em; text-align: left; }

/* ---------- 訂閱人數：編輯式統計線（短金線＋襯線大數字＋寬距小字） ---------- */
.sub-band .sub-count, .sub-page .sub-count {
  text-align: center; margin: 28px auto 0; max-width: 520px;
  font-size: .9rem; letter-spacing: .3em; text-indent: .3em; color: var(--muted);
}
.sub-band .sub-count::before, .sub-page .sub-count::before {
  content: ''; display: block; width: 56px; height: 1px;
  margin: 0 auto 16px; background: var(--amber); opacity: .75;
}
.sub-band .sub-count strong, .sub-page .sub-count strong {
  font-family: var(--serif); color: var(--amber);
  font-size: 1.85em; font-weight: 700; letter-spacing: .05em;
  margin: 0 .12em; vertical-align: -.12em;
}

/* ---------- 分享按鈕・質感升級 ---------- */
.share-row {
  border-top: 1px solid var(--line);
  padding-top: 30px; margin-top: 56px;
}
.share-btn {
  position: relative;
  padding: 13px 26px; border-radius: 999px;
  font-weight: 600; letter-spacing: .14em;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 55%), var(--panel);
  box-shadow: 0 2px 10px rgba(46,51,42,.07), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}
.share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--cyan); color: var(--cyan);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), var(--cyan-dim);
  box-shadow: 0 10px 22px rgba(46,51,42,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
.share-btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(46,51,42,.1); }

/* ---------- 分享列排版：等寬均分，手機 2×2 ---------- */
.share-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.share-row .lbl { display: flex; align-items: center; }
.share-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap;
}
@media (max-width: 719px) {
  .share-row .lbl { flex: 1 1 100%; margin: 0 0 2px; }
  .share-btn { flex: 1 1 calc(50% - 6px); }
}

/* 原生分享鈕：手機版整行優先 */
@media (max-width: 719px) {
  #nativeShareBtn { flex: 1 1 100%; }
}

/* 分享列六鈕：手機版複製連結整行收尾 */
@media (max-width: 719px) {
  #copyLinkBtn { flex: 1 1 100%; }
}
/* ===== 上一篇 / 下一篇 導覽（編輯式細線卡） ===== */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px 0 8px; }
.pn-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 22px 24px 19px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--panel2), var(--panel)); text-decoration: none; overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.pn-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: 0; transition: opacity .35s ease; }
.pn-card:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 16px 36px rgba(0, 0, 0, .16); }
.pn-card:hover::before { opacity: 1; }
.pn-label { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 10px; }
.pn-next .pn-label { justify-content: flex-end; }
.pn-arrow { font-family: var(--sans); font-size: .95rem; letter-spacing: 0; transition: transform .35s ease; }
.pn-prev:hover .pn-arrow { transform: translateX(-4px); }
.pn-next:hover .pn-arrow { transform: translateX(4px); }
.pn-title { font-family: var(--serif); font-weight: 700; font-size: 1.13rem; line-height: 1.55; color: var(--ink); }
.pn-next { text-align: right; align-items: flex-end; }
.pn-date { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--muted); }
.pn-spacer { display: block; }
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .pn-next { text-align: left; align-items: flex-start; }
  .pn-next .pn-label { justify-content: flex-start; }
  .pn-spacer { display: none; }
}

/* 回頂火箭飛行（2026-10-29）：按下後火箭脫離按鈕，沿弧線在畫面上飛向頂端 */
.to-top-fly{position:fixed;z-index:1200;width:38px;height:38px;margin:-19px 0 0 -19px;pointer-events:none;color:var(--matcha);filter:drop-shadow(0 8px 16px rgba(31,26,20,.35));will-change:transform,opacity}
.to-top-fly svg{width:100%;height:100%;display:block}
.to-top-fly svg .win{fill:var(--panel)}
.to-top-fly svg .flame{fill:#DFA050;transform-box:fill-box;transform-origin:50% 0;opacity:1;animation:dwFlame .18s ease-in-out infinite alternate}
.to-top-fly .fly-trail{position:absolute;left:50%;top:92%;width:4px;height:44px;transform:translateX(-50%);transform-origin:50% 0;border-radius:3px;background:linear-gradient(180deg,rgba(223,160,80,.9),rgba(223,160,80,0));opacity:0}