/* ==========================================================================
   熊讚寵物精緻旅館 — site stylesheet
   Tokens and components transcribed from design_handoff_xiongzan_site/README.md
   (棕熊棕 / brown-bear direction, "warm" mood — the approved defaults).

   The design files ship inline styles; they are consolidated here so a token
   change happens in one place. Values are 1:1 with the handoff spec.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --brand-900: #5C3D1A;  /* darkest ink, headings, admin header bg */
  --brand-800: #574018;  /* header bar, footer, buttons, step badges */
  --brand-700: #7A4E2D;  /* default link */
  --brand-600: #8B5E3C;  /* secondary buttons, eyebrow, labels */
  --brand-500: #C4884B;  /* link hover, accent rules, button hover */
  --brand-400: #E9B978;  /* active-nav underline, amber accent */
  --brand-300: #FFFFFF;  /* header sub-wordmark on dark */

  /* --- lines ------------------------------------------------------------ */
  --line: #DFCCB2;       /* card + table borders */
  --line-soft: #EBDFCC;  /* inner dividers */
  --band-line: #E0D2BE;  /* section band top/bottom */
  --dash: #CBB499;       /* placeholder dashed borders */

  /* --- surfaces --------------------------------------------------------- */
  --page: #F7F1E8;
  --card: #FCF8F1;
  --band: #EFE4D4;
  --band-2: #F2E9DC;     /* admin page bg */
  --chip: #EFE0CA;

  /* --- text ------------------------------------------------------------- */
  --text-body: #6B5240;
  --text-muted: #8B6B48;
  --text-ph: #B7A28A;    /* empty values */
  --text-hint: #9C8770;  /* hint text */
  --text-serif: #7A6653; /* serif placeholder lines */
  --eyebrow: #A07A54;

  /* --- on dark ---------------------------------------------------------- */
  --on-dark: #F7F1E8;
  --on-dark-2: #FBF4E8;
  --on-dark-nav: #F0E4D2;
  --on-dark-label: #C9AE8E;
  --on-dark-empty: #93887B;
  --on-dark-copy: #ECE3DA;
  --on-dark-body: #EADCC7;     /* footer base text */
  --on-dark-eyebrow: #D8AA74;  /* CONTENT ADMIN eyebrow on the admin bar */

  /* --- input surface ----------------------------------------------------- */
  --surface-input: #FFFFFF;    /* form fields + admin list rows */

  /* --- type ------------------------------------------------------------- */
  --serif: 'Noto Serif TC', serif;
  --sans: 'Noto Sans TC', Arial, sans-serif;
  --latin: 'Cormorant Garamond', serif;

  /* --- radius ----------------------------------------------------------- */
  --r-card: 14px;
  --r-panel: 16px;
  --r-ph: 18px;
  --r-input: 8px;
  --r-row: 10px;
  --r-pill: 999px;

  /* --- header height reservation (see common-header.js) ------------------
     Exact, not approximate: brand band 14 + logo 74 + 14 + 1px border = 103,
     nav row 15 + 24 + 15 + 3px border = 57  →  160px.
     (Mobile: logo 58 → brand 87 → 144px.)
     The handoff quotes the prototype's measured 162/142; those came from a
     page without a global body line-height. Ours are computed from the same
     spec'd paddings and are what the browser actually renders — verified. */
  --header-h: 160px;

  /* --- placeholder stripes ----------------------------------------------
     Built from two tokens rather than literal hexes so the striped "待定"
     blocks follow the palette when it's retuned (and so the dev theme editor
     can pick them). */
  --stripe-a: #EFE4D4;
  --stripe-b: #E7D8C3;
  --stripe-lg: repeating-linear-gradient(135deg, var(--stripe-a) 0 14px, var(--stripe-b) 14px 28px);
  --stripe-sm: repeating-linear-gradient(135deg, var(--stripe-a) 0 12px, var(--stripe-b) 12px 24px);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--brand-900);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  /* CLS reservation for the fixed header. common-header.js re-measures the
     real bar height on load/resize and overwrites this inline. Keep the two
     values in sync with the header's actual height if it ever changes. */
  padding-top: var(--header-h);
}

@media (max-width: 768px) {
  body { padding-top: 144px; }
}

a { color: var(--brand-700); text-decoration: none; transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
a:hover { color: var(--brand-500); }

img { max-width: 100%; }

h1, h2, h3, h4 { margin: 0; }

/* Page shell so the footer sits at the bottom on short pages. */
.xz-shell { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); }
.xz-shell > .xz-main { flex: 1; }

/* ==========================================================================
   Header — injected by common-header.js
   ========================================================================== */

.xz-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--brand-800);
  box-shadow: 0 2px 12px rgba(51, 34, 15, .18);
}

/* Flex (not text-align: center) on purpose: an inline-flex brand link would sit
   in a line box and inherit the body strut, adding ~9px of unpredictable
   leading under the 74px logo. Flex removes the strut, so the band is exactly
   14 + 74 + 14 + 1 = 103px and the reservation below can be exact. */
.xz-header__brand {
  display: flex;
  justify-content: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 241, 232, .22);
}

.xz-header__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.xz-header__logo {
  height: 74px;
  width: auto;
  object-fit: contain;
  display: block;
}

.xz-header__lockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.xz-header__name {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .16em;
  color: var(--on-dark);
  line-height: 1.3;
}

.xz-header__en {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--brand-300);
  line-height: 1.3;
}

.xz-nav { position: relative; display: flex; align-items: stretch; }

.xz-nav__arrow {
  background: rgba(0, 0, 0, .25);
  border: none;
  color: var(--on-dark);
  font-size: 16px;
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--sans);
  line-height: 1;
}
.xz-nav__arrow--left  { border-right: 1px solid rgba(247, 241, 232, .18); }
.xz-nav__arrow--right { border-left:  1px solid rgba(247, 241, 232, .18); }

.xz-nav__viewport { flex: 1; overflow: hidden; }

.xz-nav__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.xz-nav__menu::-webkit-scrollbar { display: none; }
.xz-nav__menu > li { flex-shrink: 0; }

.xz-nav__link {
  display: block;
  padding: 15px 22px;
  color: var(--on-dark-nav);
  font-size: 15px;
  line-height: 1.6;   /* explicit so the nav row height is deterministic: 15+15 padding + 24 text + 3 border = 57px */
  letter-spacing: .08em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.xz-nav__link:hover {
  background: rgba(247, 241, 232, .12);
  color: #FFFFFF;
}
.xz-nav__link.is-active {
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(247, 241, 232, .15);
  border-bottom-color: var(--brand-400);
}

@media (max-width: 768px) {
  .xz-header__logo { height: 58px; }
}

/* ==========================================================================
   Page title block
   ========================================================================== */

.xz-pagetitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 52px 20px 8px;
}

.xz-pagetitle__logo {
  height: 84px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.xz-pagetitle__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.xz-pagetitle__eyebrow {
  font-family: var(--latin);
  font-size: 22px;
  letter-spacing: .24em;
  color: var(--eyebrow);
  margin-bottom: 8px;
}

.xz-pagetitle__zh {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: .06em;
  color: var(--brand-800);
  line-height: 1;
}

.xz-pagetitle__rule {
  width: 3px;
  height: 44px;
  background: var(--brand-500);
  align-self: flex-end;
  margin-bottom: 6px;
}

/* ==========================================================================
   Sections, eyebrows, headings
   ========================================================================== */

.xz-section { max-width: 1200px; width: 100%; margin: 0 auto; padding: 40px 24px 88px; }
.xz-section--narrow { max-width: 1100px; padding: 40px 24px 72px; }
.xz-section--faq { max-width: 900px; }
.xz-section--price { max-width: 1300px; padding: 68px 24px 24px; }
.xz-section--offers { max-width: 1300px; padding: 44px 24px 88px; }

.xz-band {
  background: var(--band);
  border-top: 1px solid var(--band-line);
  border-bottom: 1px solid var(--band-line);
}
.xz-band__inner { max-width: 1400px; margin: 0 auto; padding: 68px 24px; }

.xz-sechead { text-align: center; margin-bottom: 40px; }
.xz-sechead--tight { margin-bottom: 32px; }

.xz-eyebrow {
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: .34em;
  color: var(--eyebrow);
}

.xz-h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 36px);
  margin: 12px 0 0;
  color: var(--brand-900);
  line-height: 1.4;
}
.xz-h2--sub { margin-bottom: 8px; }

.xz-subline { font-size: 15px; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   Placeholders (content pending from client)
   ========================================================================== */

.xz-ph {
  border: 2px dashed var(--dash);
  border-radius: var(--r-ph);
  background: var(--card);
  padding: 44px 36px;
  text-align: center;
}
.xz-ph--tall { padding: 56px 32px; }

.xz-chip {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--brand-600);
  font-size: 12px;
  letter-spacing: .2em;
  margin-bottom: 18px;
  line-height: 1.6;
}
.xz-chip--onstripe { background: var(--page); margin-bottom: 0; }

.xz-ph__lead {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.9;
  color: var(--text-serif);
  margin: 0 0 10px;
}

.xz-ph__hint {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-hint);
  margin: 0;
}
.xz-ph__hint--cta { margin-bottom: 22px; }

/* Striped image placeholders */
.xz-ph-img {
  border: 2px dashed var(--dash);
  border-radius: var(--r-panel);
  background: var(--stripe-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}
.xz-ph-img--price { max-width: 720px; margin: 0 auto; aspect-ratio: 4 / 3; }
.xz-ph-img--map { min-height: 450px; }
.xz-ph-img--offer {
  border-radius: var(--r-card);
  background: var(--stripe-sm);
  aspect-ratio: 3 / 4;
  padding: 0;
}
.xz-ph-img__note {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-serif);
  margin: 0;
  max-width: 380px;
}
.xz-ph-img--map .xz-ph-img__note { max-width: 320px; }
.xz-ph-img__tag {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--text-muted);
  background: var(--page);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.xz-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  background: var(--brand-800);
  color: var(--on-dark);
  font-size: 14px;
  letter-spacing: .08em;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.xz-btn:hover { background: var(--brand-500); color: var(--brand-900); }
.xz-btn--wide { padding: 14px 30px; }

/* Pending marker wearing the button's shape but none of its affordances — used
   where a CTA's URL has not arrived yet (videos.html 更多影片). Applied to a
   <span>, never an <a>: a link with href="" looks clickable and does nothing,
   which reads as broken rather than as "coming soon".
   --text-body, not --text-muted: on --chip, --text-muted is only 3.77:1 (AA
   fail) while --text-body is 5.57:1. */
.xz-btn--pending {
  background: var(--chip);
  color: var(--text-body);
  cursor: default;
  border: 1px dashed var(--dash);
}
.xz-btn--pending:hover { background: var(--chip); color: var(--text-body); }

.xz-btn-sm {
  padding: 6px 16px;
  background: var(--brand-600);
  color: var(--on-dark-2);
  font-size: 13px;
  border-radius: 4px;
  display: inline-block;
}
.xz-btn-sm:hover { background: var(--brand-800); color: var(--on-dark-2); }

/* ==========================================================================
   住宿介紹 — intro copy (home; client copy landed 2026-08-17)
   ========================================================================== */

.xz-intro { max-width: 880px; margin: 0 auto; }

/* Heading tokens follow the authored split (see CLAUDE.md Deviations #1):
   section h2 → --brand-900, inner card headings → --brand-800. */
.xz-intro__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 2.8vw, 27px);
  color: var(--brand-900);
  line-height: 1.7;
  margin: 0 0 16px;
  text-align: center;
}

.xz-intro__body { font-size: 15px; line-height: 2.05; color: var(--text-body); margin: 0 0 12px; }

.xz-intro__subhead {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 2.3vw, 22px);
  color: var(--brand-900);
  line-height: 1.7;
  margin: 40px 0 4px;
  text-align: center;
}

.xz-intro__block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 28px;
  margin-top: 18px;
}
.xz-intro__block .xz-intro__body { margin-bottom: 8px; }

.xz-intro__h { font-size: 17px; font-weight: 700; color: var(--brand-800); margin: 0 0 8px; line-height: 1.7; }

.xz-intro__list { margin: 0; padding-left: 1.3em; }
.xz-intro__list li { font-size: 15px; line-height: 2.05; color: var(--text-body); }
.xz-intro__list strong { color: var(--brand-600); font-weight: 700; }

.xz-intro__close { margin-top: 26px; }
.xz-intro__cta { font-size: 15px; line-height: 2.05; color: var(--brand-800); font-weight: 500; margin: 6px 0 0; }

/* ==========================================================================
   住宿流程 — process steps (home)
   ========================================================================== */

.xz-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) { .xz-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .xz-flow { grid-template-columns: 1fr; } }

.xz-step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 44px 24px 28px;
}

.xz-step__no {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--brand-800);
  color: var(--on-dark);
  font-family: var(--latin);
  font-size: 26px;
  line-height: 1.1;
  padding: 6px 12px;
  border-radius: 0 var(--r-card) 0 var(--r-card);
}

.xz-step__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--brand-800);
  line-height: 1.5;
}

.xz-step__body { font-size: 15px; line-height: 1.95; color: var(--text-body); margin: 0; }
.xz-step__body--spaced { margin-bottom: 14px; }

.xz-step__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.xz-step__note {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-body);
  margin: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

/* ==========================================================================
   Card grids — 相簿總覽 / 影音專區 / 住宿優惠
   ========================================================================== */

.xz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.xz-grid--offers { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.xz-grid:empty { display: none; }

.xz-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  color: inherit;
}
a.xz-card:hover { border-color: var(--brand-500); color: inherit; }

.xz-card__media {
  background: var(--stripe-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xz-card__media--4x3 { aspect-ratio: 4 / 3; }
.xz-card__media--16x9 { aspect-ratio: 16 / 9; }
.xz-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.xz-card__body { padding: 18px 20px; }
.xz-card__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--brand-800); line-height: 1.6; }
.xz-card__meta { font-size: 13px; color: var(--eyebrow); }
.xz-card__meta--cta { letter-spacing: .1em; }

/* Videos page tail block */
.xz-videos__tail { margin-top: 40px; text-align: center; }
.xz-videos__tail h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; color: var(--brand-800); font-weight: 700; }
.xz-videos__tail p { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; }

/* ==========================================================================
   聯絡我們
   ========================================================================== */

.xz-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }

.xz-info {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 36px;
}

.xz-info__head {
  font-family: var(--latin);
  font-size: 30px;
  letter-spacing: .14em;
  color: var(--brand-600);
  margin: 0 0 26px;
  font-weight: 400;
  line-height: 1.3;
}

.xz-info__list { list-style: none; padding: 0; margin: 0; }
.xz-info__row {
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.8;
  display: flex;
  gap: 12px;
}
.xz-info__row:last-child { border-bottom: none; }
.xz-info__label { color: var(--brand-600); min-width: 80px; }
.xz-info__value { color: var(--text-body); }
/* Rows still waiting on client info (Facebook / Instagram) read 「敬請期待」.
   --text-muted, not --text-ph: on the --card panel --text-ph is only 2.32:1 —
   fine for a decorative "—" that carries no information, an AA failure for real
   words. --text-muted is 4.62:1 and still reads dimmer than the filled rows'
   --text-body (6.83:1). Revert to --text-ph if a row ever goes back to "—". */
.xz-info__value--empty { color: var(--text-muted); }

/* Google Maps embed — replaced the 地圖待定 placeholder once the address
   arrived (2026-08-17). Same footprint as .xz-ph-img--map (450px min). */
.xz-map {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  min-height: 450px;
  display: flex;
}
.xz-map iframe { width: 100%; min-height: 450px; border: 0; display: block; flex: 1; }

/* ==========================================================================
   常見問題 — accordion (rendered by js/faq.js)
   ========================================================================== */

.xz-faq { margin-top: 28px; display: flex; flex-direction: column; }

.xz-faq__row {
  border-top: 1px solid var(--line);
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.xz-faq__row:last-child { border-bottom: 1px solid var(--line); }

/* Skeleton preview shown while there are no FAQ items yet. */
.xz-faq__row--skeleton .xz-faq__q { color: var(--text-ph); }
.xz-faq__row--skeleton .xz-faq__mark { color: var(--dash); }

.xz-faq__q { font-size: 17px; color: var(--brand-800); text-align: left; line-height: 1.7; }
.xz-faq__mark { font-size: 22px; color: var(--brand-500); line-height: 1; flex-shrink: 0; }

/* Real accordion items */
.xz-faq__item { border-top: 1px solid var(--line); }
.xz-faq__item:last-child { border-bottom: 1px solid var(--line); }
.xz-faq__trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.xz-faq__panel {
  display: none;
  padding: 0 4px 22px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-body);
}
.xz-faq__item.is-open .xz-faq__panel { display: block; }

/* ==========================================================================
   Footer + fixed side shortcuts — injected by common-footer.js
   ========================================================================== */

.xz-footer {
  background: var(--brand-800);
  color: var(--on-dark-body);
  padding: 52px 20px 0;
}

.xz-footer__cols {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
}

/* The badge PNG has a white background (not transparency) — it sits on a
   light rounded plate so it reads correctly on the brown footer. */
.xz-footer__logo {
  height: 84px;
  width: auto;
  object-fit: contain;
  background: var(--page);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 18px;
  display: block;
}

.xz-footer__brand { font-family: var(--serif); font-size: 18px; margin: 0; color: var(--on-dark-2); line-height: 1.6; }

.xz-footer__h { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--on-dark-2); letter-spacing: .1em; line-height: 1.6; }

.xz-footer__line { margin: 0 0 8px; font-size: 14px; line-height: 1.9; color: var(--on-dark-label); }
.xz-footer__line:last-child { margin-bottom: 0; }
/* Values hold real client info since 2026-08-17 — they must read clearly on
   the brown footer, so they use --on-dark-body (7.2:1), not the dim
   --on-dark-empty that styled the "—" placeholders. */
.xz-footer__val { color: var(--on-dark-body); }
/* Kept for any line that reverts to a "—" pending state. */
.xz-footer__line--empty { color: var(--on-dark-empty); }

.xz-footer__bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(247, 241, 232, .24);
  text-align: center;
}
.xz-footer__copy { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--on-dark-copy); }

.xz-side {
  position: fixed;
  right: 18px;
  bottom: 150px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The icon PNGs are already circular badges on a transparent canvas, so no
   brown plate sits behind them — a plate would fringe at the antialiased edge.
   border-radius keeps the drop shadow following the circle. */
.xz-side__btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  display: block;
  box-shadow: 0 4px 12px rgba(51, 34, 15, .28);
  transition: opacity .3s ease;
}
.xz-side__icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* icon-ig.png's circle covers only 92 of its 96px canvas, so it would render
   1.8px smaller than the other four. 96/92 = 1.043 puts it back on par. */
.xz-side__icon--inset { transform: scale(1.043); }
/* The handoff's #C4884B hover can't apply — the artwork covers the button.
   Opacity keeps the "colour transition only, no scale" interaction rule. */
.xz-side__btn:hover { opacity: .82; }

/* ==========================================================================
   後台 (admin.html)
   ========================================================================== */

body.xz-admin {
  background: var(--band-2);
  padding-top: 0;   /* the admin has its own static bar, not the fixed header */
  min-height: 100vh;
}

.xz-adminbar { background: var(--brand-900); color: var(--on-dark-nav); }
.xz-adminbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.xz-adminbar__logo { height: 42px; width: auto; object-fit: contain; }
.xz-adminbar__lockup { display: flex; flex-direction: column; gap: 2px; }
.xz-adminbar__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .12em;
  color: var(--on-dark-2);
  line-height: 1.5;
}
.xz-adminbar__en {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--on-dark-eyebrow);
  line-height: 1.5;
}
.xz-adminbar__nav { margin-left: auto; display: flex; gap: 16px; font-size: 13px; }
.xz-adminbar__nav a { color: var(--on-dark-label); }
.xz-adminbar__nav a:hover { color: var(--brand-400); }

.xz-adminmain {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.xz-notice {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-serif);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
}

.xz-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 28px;
}
.xz-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.xz-panel__head--tight { margin-bottom: 8px; }
.xz-panel__title { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0; color: var(--brand-900); line-height: 1.5; }
.xz-panel__count { font-size: 13px; color: var(--eyebrow); }
.xz-panel__hint { margin: 0 0 20px; font-size: 13px; line-height: 1.85; color: var(--text-hint); }

.xz-form-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; align-items: center; }
.xz-form-col { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 720px) { .xz-form-row { grid-template-columns: 1fr; } }

.xz-input,
.xz-textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface-input);
  font-size: 14px;
  color: var(--brand-900);
  font-family: var(--sans);
  min-width: 0;
  width: 100%;
}
.xz-textarea { line-height: 1.7; resize: vertical; }
.xz-input:focus,
.xz-textarea:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.xz-admin-btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--r-input);
  background: var(--brand-800);
  color: var(--on-dark);
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--sans);
  transition: background-color .3s ease, color .3s ease;
}
.xz-admin-btn:hover { background: var(--brand-500); color: var(--brand-900); }
.xz-admin-btn--start { align-self: flex-start; }

.xz-list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }

.xz-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-row);
  background: var(--surface-input);
}
.xz-row__no { font-family: var(--latin); font-size: 18px; color: var(--brand-500); min-width: 22px; }
.xz-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xz-row__title { font-size: 15px; font-weight: 500; color: var(--brand-800); }
.xz-row__sub { font-size: 12px; color: var(--eyebrow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xz-row__del {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: transparent;
  color: var(--brand-600);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--sans);
  transition: background-color .3s ease;
}
.xz-row__del:hover { background: var(--chip); }

.xz-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--text-ph);
  border: 1px dashed var(--line);
  border-radius: var(--r-row);
}

/* ==========================================================================
   Utility
   ========================================================================== */

.xz-hidden { display: none !important; }

/* Screen-reader-only text (used for the skip link and icon-button labels). */
.xz-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}