/* QGuide V5.6: mobile-first content rhythm inspired by the QTravel reference.
   Keeps QGuide's brand, information and public actions; only the reading order
   is simplified so each block has one clear purpose. */

.v3-explore-page { max-width:1160px; }

.v3-explore-hero {
  min-height:0;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr);
  gap:42px;
  padding:36px 40px;
  border-radius:24px;
  background:linear-gradient(124deg,#fffdf8 0%,#fbf5e8 100%);
}

.v3-explore-intro .v3-eyebrow { display:inline-block; margin-bottom:6px; }
.v3-explore-intro h1 { max-width:16ch; margin:0 0 12px; font-size:clamp(36px,3.2vw,48px); line-height:1.17; }
.v3-explore-intro p { max-width:38ch; margin:0; font-size:16px; line-height:1.72; }
.v3-explore-intro .v3-explore-search { max-width:620px; margin-top:24px; box-shadow:0 7px 16px rgba(38,56,57,.05); }
.v3-explore-intro .v3-explore-search .button { min-width:124px; }

.v3-explore-summary {
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:start;
  gap:12px;
  min-height:224px;
  overflow:hidden;
  padding:22px;
  border:1px solid rgba(23,78,91,.15);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(237,246,243,.88));
  box-shadow:0 10px 24px rgba(31,49,52,.07);
}
.v3-explore-summary::after { position:absolute; z-index:-1; right:-62px; bottom:-82px; width:220px; height:220px; border-radius:50%; background:rgba(120,163,153,.13); content:""; }
.v3-explore-summary header { position:relative; z-index:1; display:grid; gap:2px; padding-right:68px; }
.v3-explore-summary header span { color:var(--qg-ink); font-family:var(--ql-font-display); font-size:23px; font-weight:700; line-height:1.25; }
.v3-explore-summary header small { color:var(--qg-muted); font-size:13px; line-height:1.5; }
.v3-explore-summary-art { position:absolute; z-index:-1; top:18px; right:-32px; width:260px; opacity:.27; }
.v3-explore-summary-mascot { position:absolute; z-index:1; pointer-events:none; right:18px; top:18px; width:60px; filter:drop-shadow(0 8px 10px rgba(42,71,65,.12)); }
.v3-explore-summary > p { position:relative; z-index:1; order:1; margin:0; font-size:14px; line-height:1.6; }
.v3-explore-summary > button { position:relative; z-index:1; order:2; justify-self:start; }
.v3-explore-summary-metrics { position:static; order:3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:14px; border-top:1px solid rgba(23,78,91,.14); }
.v3-explore-summary-metrics span { display:grid; gap:2px; min-width:0; text-align:center; }
.v3-explore-summary-metrics span + span { border-left:1px solid rgba(23,78,91,.13); }
.v3-explore-summary-metrics strong { color:var(--qg-ink); font-family:var(--ql-font-display); font-size:27px; line-height:1; }
.v3-explore-summary-metrics small { color:var(--qg-muted); font-size:11px; line-height:1.4; white-space:nowrap; }

.v3-explore-quick { margin-top:20px; }
.v3-explore-quick h2 { margin:0 0 10px; color:var(--qg-ink); font-family:var(--ql-font-ui); font-size:14px; font-weight:750; letter-spacing:.045em; }
.v3-explore-quick .v3-quick-tags { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; }
.v3-explore-quick .v3-quick-tags button { display:grid; place-items:center; gap:7px; min-height:76px; padding:10px; border:1px solid rgba(95,91,68,.16); border-radius:15px; background:rgba(255,255,255,.82); color:var(--qg-text); box-shadow:0 5px 15px rgba(31,49,52,.045); transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.v3-explore-quick .v3-quick-tags button:hover { transform:translateY(-2px); border-color:rgba(23,78,91,.36); background:#fff; }
.v3-explore-quick .v3-quick-tags svg { width:21px; height:21px; color:#4b7777; }
.v3-explore-quick .v3-quick-tags span { font-size:13px; font-weight:700; line-height:1.35; }

.v3-active-trip-banner { margin-top:22px; padding:18px 22px; border-color:rgba(23,78,91,.17); border-radius:18px; background:linear-gradient(100deg,rgba(238,247,244,.88),rgba(255,253,248,.96)); box-shadow:none; }
.v3-active-trip-banner h2 { font-family:var(--ql-font-ui); font-size:20px; line-height:1.35; }
.v3-active-trip-banner .button { min-width:126px; }

.v3-explore-section { margin-top:38px; }
.v3-explore-section .v3-section-head { margin-bottom:12px; }
.v3-explore-section .v3-section-head h2 { font-size:25px; }
.v3-destination-grid { gap:14px; margin-top:0; }
.v3-destination-card { grid-template-columns:1fr; gap:0; padding:0; overflow:hidden; border-radius:18px; background:#fffdf8; box-shadow:0 7px 18px rgba(31,49,52,.055); }
.v3-destination-media { border-radius:0; }
.v3-destination-media img { min-height:0; aspect-ratio:16 / 9; }
.v3-destination-card > div { display:grid; align-content:start; gap:6px; padding:15px 16px 0; }
.v3-destination-card > div small { color:#8a6957; font-size:12px; font-weight:700; line-height:1.45; }
.v3-destination-card h3 { margin:0; color:var(--qg-ink); font-family:var(--ql-font-ui); font-size:19px; line-height:1.35; }
.v3-destination-card p { min-height:3.1em; margin:0; font-size:13px; line-height:1.56; }
.v3-destination-card .v3-meta-row { gap:6px 10px; font-size:12px; line-height:1.48; }
.v3-destination-card > .button { width:calc(100% - 32px); min-height:40px; margin:14px 16px 16px; }

/* Desktop header: use a quieter QTravel-like rhythm and the official horizontal mark. */
@media (min-width:901px) {
  body.ql-visual-lock .ql-desktop-header-inner {
    width:min(1280px,calc(100% - 48px));
    height:74px;
    grid-template-columns:minmax(174px,1fr) auto minmax(174px,1fr);
    gap:26px;
  }
  body.ql-visual-lock .ql-desktop-brand { min-width:0; }
  body.ql-visual-lock .ql-desktop-brand .ql-brand-image-horizontal {
    display:block;
    width:174px;
    height:40px;
    max-height:40px;
    object-fit:contain;
    object-position:left center;
  }
  body.ql-visual-lock .ql-desktop-nav { gap:clamp(18px,2.4vw,36px); }
  body.ql-visual-lock .ql-desktop-nav a {
    height:74px;
    color:#3f4b4d;
    font-family:var(--ql-font-ui);
    font-size:15px;
    font-weight:650;
    letter-spacing:.025em;
  }
  body.ql-visual-lock .ql-desktop-nav a.is-active { color:var(--ql-action); }
  body.ql-visual-lock .ql-desktop-nav a.is-active::after {
    height:2px;
    background:var(--ql-action);
  }
  body.ql-visual-lock .ql-line-auth {
    justify-self:end;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:8px 15px 8px 9px;
    border:1px solid rgba(23,78,91,.16);
    border-radius:999px;
    background:#fffefa;
    color:var(--ql-action);
    box-shadow:0 4px 14px rgba(31,49,52,.07);
    font-family:var(--ql-font-ui);
    font-size:14px;
    font-weight:750;
    line-height:1;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
  }
  body.ql-visual-lock .ql-line-auth:hover {
    transform:translateY(-1px);
    border-color:rgba(23,78,91,.34);
    background:#f7fbfa;
    box-shadow:0 8px 18px rgba(31,49,52,.11);
  }
  body.ql-visual-lock .ql-line-auth:focus-visible { outline:3px solid var(--ql-action-ring); outline-offset:3px; }
  body.ql-visual-lock .ql-line-auth-badge {
    display:grid;
    place-items:center;
    min-width:34px;
    min-height:24px;
    padding:0 6px;
    border-radius:7px;
    background:#06bf65;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:-.02em;
  }
  body.ql-visual-lock .ql-line-auth-avatar {
    display:block;
    width:26px;
    height:26px;
    max-width:26px;
    border-radius:50%;
    object-fit:cover;
  }
  body.ql-visual-lock .ql-line-auth.is-authenticated span:last-child {
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

.v3-line-auth-modal { display:grid; gap:14px; }
.v3-line-auth-modal p { margin:0; color:var(--qg-text); font-size:15px; line-height:1.7; }
.dialog-icon-line { color:#06bf65; background:rgba(6,191,101,.14); }
.v3-line-auth-benefits { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.v3-line-auth-benefits li { display:flex; align-items:center; gap:10px; color:var(--qg-text); font-size:14px; }
.v3-line-auth-benefits svg { flex:none; width:19px; height:19px; color:#06bf65; }
.v3-line-auth-notice { display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:11px; background:rgba(31,41,55,.05); color:var(--qg-muted); font-size:12.5px; line-height:1.6; }
.v3-line-auth-notice svg { flex:none; width:16px; height:16px; margin-top:1px; opacity:.75; }

/* The public explorer uses the same account entry as the destination pages.
   There is no demo traveller identity in a production-facing header. */
.v3-line-auth { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 15px 8px 9px; border:1px solid rgba(23,78,91,.16); border-radius:999px; background:#fffefa; color:var(--ql-action); box-shadow:0 4px 14px rgba(31,49,52,.07); font-family:var(--ql-font-ui); font-size:14px; font-weight:750; line-height:1; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease; }
.v3-line-auth:hover { transform:translateY(-1px); border-color:rgba(23,78,91,.34); background:#f7fbfa; box-shadow:0 8px 18px rgba(31,49,52,.11); }
.v3-line-auth:focus-visible { outline:3px solid var(--ql-action-ring); outline-offset:3px; }
.v3-line-auth-badge { display:grid; place-items:center; min-width:34px; min-height:24px; padding:0 6px; border-radius:7px; background:#06bf65; color:#fff; font-family:Arial,sans-serif; font-size:10px; font-weight:800; letter-spacing:-.02em; }
/* 已登入狀態：跟 visual-lock.js 的 .ql-line-auth-avatar 同一組尺寸，只是這裡
   沒有 body.ql-visual-lock 這層可以掛，explore／my-poster／plan 這些頁面
   直接套用，不用另外判斷視覺模式。 */
.v3-line-auth-avatar { display:block; width:26px; height:26px; max-width:26px; border-radius:50%; object-fit:cover; }
.v3-line-auth.is-authenticated span:last-child { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:900px) {
  /* One mobile navigation language across standard and locked destination views.
     Keyed off the #mobile-bottom-nav id (not just .mobile-bottom-nav) so this
     reliably outranks visual-polish-v54.css's older body.ql-visual-lock-scoped
     class rule on locked routes, while still applying unscoped on explore/
     discover/plan, which previously kept the older 5-column full-width bar
     (mismatched the now 4-item nav and left a dead gap on the right). */
  body.ql-visual-lock { padding-bottom:calc(50px + env(safe-area-inset-bottom))!important; }
  /* Flush, full-width tab bar (not an inset floating pill) -- same proportions
     as QTravel's own bottom nav, which edward pointed to as the reference:
     edge-to-edge, a hairline top border instead of a drop shadow, and a plain
     color change (no per-tab background blob) to mark the active tab. */
  #mobile-bottom-nav.mobile-bottom-nav {
    right:0!important;
    bottom:0!important;
    left:0!important;
    height:auto!important;
    min-height:52px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:4px 5px max(4px, env(safe-area-inset-bottom)) 5px!important;
    border:0!important;
    border-top:1px solid rgba(23,78,91,.32)!important;
    border-radius:0!important;
    background:var(--accent-soft,#f5eae1)!important;
    box-shadow:0 -6px 20px rgba(31,49,52,.14)!important;
  }
  #mobile-bottom-nav.mobile-bottom-nav[hidden] { display:none!important; }
  #mobile-bottom-nav.mobile-bottom-nav a {
    min-height:44px!important;
    gap:2px!important;
    border-radius:0!important;
    color:#667078!important;
    font-family:var(--ql-font-ui)!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
    line-height:1.2!important;
  }
  /* styles.css's ancient .mobile-bottom-nav span rule (font-size:18px, no
     !important) still wins on this specific span -- direct rules on an
     element always beat an ancestor's font-size, !important or not, so the
     .mobile-bottom-nav a{font-size:11px} above never reached the label.
     Icon stayed 23px while its caption rendered at 18px, nearly as large
     as body text -- that mismatch, not the icons themselves, is what read
     as "the buttons don't look good." */
  #mobile-bottom-nav.mobile-bottom-nav a span {
    font-size:11px!important;
    line-height:1.15!important;
  }
  #mobile-bottom-nav.mobile-bottom-nav a svg {
    width:23px!important;
    height:23px!important;
    padding:0!important;
    color:currentColor!important;
    stroke-width:1.85!important;
    transform:none!important;
  }
  #mobile-bottom-nav.mobile-bottom-nav a.is-active,
  #mobile-bottom-nav.mobile-bottom-nav a[aria-current="page"] {
    color:var(--ql-action)!important;
    background:none!important;
  }
  body.ql-visual-lock[data-route-page="my"] .v3-ai-fab { display:none!important; }
  body.ql-visual-lock .v3-ai-fab { bottom:86px!important; }

  .v3-line-auth { min-height:38px; padding:7px 10px 7px 7px; font-size:12px; }
  .v3-line-auth-badge { min-width:30px; min-height:23px; padding:0 5px; font-size:9px; }

  /* Footprints and co-creation now use the same editorial scale and calm card depth. */
  body.ql-visual-lock .ql-mobile-page.ql-footprints-mobile,
  body.ql-visual-lock .ql-mobile-page.ql-cocreate-mobile { padding-right:16px; padding-left:16px; }
  body.ql-visual-lock .ql-mobile-brand .ql-brand-image-horizontal { width:142px!important; max-height:38px!important; object-fit:contain; }
  /* Match the mobile header height to the already-compact standard (explore/discover/plan)
     header instead of the older, taller 102px default, so it no longer visibly grows/shrinks
     as a visitor moves between locked and standard routes. Both the outer header element
     (fixed height in visual-lock.css) and its inner row need to shrink together. */
  body.ql-visual-lock .site-header { height:72px!important; }
  body.ql-visual-lock .ql-mobile-header-inner { height:72px!important; padding:0 16px!important; border-bottom:1px solid rgba(23,78,91,.10); }
  body.ql-visual-lock .ql-editor-header { height:70px!important; grid-template-columns:minmax(0,1fr) auto auto!important; padding:0 16px!important; border-bottom:1px solid rgba(23,78,91,.10); }
  body.ql-visual-lock .ql-editor-header .ql-mobile-destination { display:none!important; }
  body.ql-visual-lock .ql-editor-actions { gap:5px!important; }
  body.ql-visual-lock .ql-editor-actions button { width:38px!important; height:62px!important; color:var(--ql-action)!important; font-size:10px!important; }
  body.ql-visual-lock .ql-footprint-hero,
  body.ql-visual-lock .ql-cocreate-intro { height:132px!important; margin:0 -2px 8px; padding:10px 2px!important; }
  body.ql-visual-lock .ql-footprint-hero h1,
  body.ql-visual-lock .ql-cocreate-intro h1 { color:var(--qg-ink)!important; font-size:31px!important; line-height:1.23!important; letter-spacing:.025em!important; }
  body.ql-visual-lock .ql-footprint-hero p,
  body.ql-visual-lock .ql-cocreate-intro p { color:var(--qg-muted)!important; font-size:14px!important; line-height:1.6!important; }
  body.ql-visual-lock .ql-footprint-hero > img:nth-of-type(1) { width:78px!important; height:78px!important; }
  body.ql-visual-lock .ql-cocreate-intro > img:first-child { width:74px!important; height:82px!important; }
  body.ql-visual-lock .ql-foot-stats { gap:9px!important; margin-bottom:14px!important; }
  body.ql-visual-lock .ql-foot-stats article {
    height:82px!important;
    flex-direction:column!important;
    gap:2px!important;
    padding:7px 3px!important;
    border-color:rgba(23,78,91,.13)!important;
    border-radius:16px!important;
    background:#fffefa!important;
    box-shadow:0 5px 15px rgba(31,49,52,.045)!important;
  }
  body.ql-visual-lock .ql-foot-stats article > svg,
  body.ql-visual-lock .ql-foot-stats article:nth-child(2) > svg { width:22px!important; height:22px!important; padding:0!important; border-radius:0!important; background:none!important; color:#4b7777!important; }
  body.ql-visual-lock .ql-foot-stats span { justify-items:center!important; color:var(--qg-muted)!important; font-size:11px!important; }
  body.ql-visual-lock .ql-foot-stats strong { color:var(--qg-ink)!important; font-family:var(--ql-font-display)!important; font-size:25px!important; }
  body.ql-visual-lock :is(.ql-foot-card,.ql-trip-source,.ql-cocreate-card,.ql-ai-draft,.ql-visibility,.ql-locked-share) {
    border-color:rgba(23,78,91,.14)!important;
    border-radius:17px!important;
    background:#fffefa!important;
    box-shadow:0 7px 18px rgba(31,49,52,.05)!important;
  }
  body.ql-visual-lock .ql-foot-card { padding:14px!important; }
  body.ql-visual-lock .ql-foot-card h2 { color:var(--qg-ink)!important; font-size:21px!important; }
  body.ql-visual-lock .ql-foot-card > header > span { background:rgba(42,106,112,.11)!important; color:var(--ql-action)!important; }
  body.ql-visual-lock .ql-foot-number,
  body.ql-visual-lock .ql-foot-number.is-blue { background:var(--ql-action)!important; }
  body.ql-visual-lock .ql-foot-cta {
    grid-template-columns:66px minmax(0,1fr)!important;
    min-height:0!important;
    padding:14px!important;
    border-radius:17px!important;
    background:linear-gradient(135deg,#2a6a70 0%,#174e5b 100%)!important;
  }
  body.ql-visual-lock .ql-foot-cta img { width:62px!important; height:76px!important; }
  body.ql-visual-lock .ql-foot-cta h3 { font-size:19px!important; }
  body.ql-visual-lock .ql-foot-cta p { font-size:12px!important; }
  body.ql-visual-lock .ql-foot-cta a { grid-column:1 / -1; height:42px!important; margin-top:4px; justify-content:center; color:var(--ql-action)!important; font-family:var(--ql-font-ui)!important; font-size:14px!important; font-weight:750!important; }
  body.ql-visual-lock .ql-past-trips article { border-color:rgba(23,78,91,.13)!important; background:#fffefa!important; }

  body.ql-visual-lock .ql-five-step { margin-bottom:14px!important; padding:7px 5px!important; border-color:rgba(23,78,91,.14)!important; border-radius:16px!important; background:#fffefa!important; }
  body.ql-visual-lock .ql-five-step li.is-current span { border-color:var(--ql-action)!important; background:var(--ql-action)!important; }
  body.ql-visual-lock .ql-five-step li.is-current strong { color:var(--ql-action)!important; }
  body.ql-visual-lock .ql-five-step li.is-complete span { border-color:#53652c!important; background:#53652c!important; }
  body.ql-visual-lock .ql-trip-source { padding:14px!important; }
  body.ql-visual-lock .ql-trip-source > svg,
  body.ql-visual-lock .ql-trip-source button { color:var(--ql-action)!important; }
  body.ql-visual-lock .ql-cocreate-card { padding:14px!important; }
  body.ql-visual-lock .ql-cocreate-card > header > span,
  body.ql-visual-lock .ql-recorder > span { background:var(--ql-action)!important; }
  body.ql-visual-lock .ql-entry-tabs button.is-active { color:var(--ql-action)!important; }
  body.ql-visual-lock .ql-entry-tabs button.is-active::after { background:var(--ql-action)!important; }
  body.ql-visual-lock .ql-ai-draft > div strong { color:var(--ql-action)!important; }
  body.ql-visual-lock .ql-cocreate-primary { height:54px!important; border-radius:15px!important; background:linear-gradient(180deg,var(--ql-action-top),var(--ql-action))!important; font-family:var(--ql-font-ui)!important; font-size:17px!important; font-weight:750!important; }
  body.ql-visual-lock .ql-visibility input { accent-color:var(--ql-action)!important; }

  .v3-explore-hero { display:grid; grid-template-columns:1fr; gap:18px; padding:25px 20px 20px; border-radius:21px; }
  .v3-explore-intro h1 { max-width:15ch; font-size:clamp(30px,8vw,36px); }
  .v3-explore-intro p { max-width:31ch; font-size:15px; }
  .v3-explore-intro .v3-explore-search { margin-top:18px; }
  .v3-explore-summary { min-height:174px; padding:18px; border-radius:17px; }
  .v3-explore-summary header span { font-size:20px; }
  .v3-explore-summary-art { top:6px; width:215px; }
  .v3-explore-summary-mascot { right:13px; top:12px; width:60px; }
  .v3-explore-summary-metrics { right:18px; bottom:15px; left:18px; padding-top:11px; }
  .v3-explore-summary-metrics strong { font-size:23px; }
  .v3-explore-summary-metrics small { font-size:10px; }
  .v3-explore-quick { margin-top:18px; }
  .v3-explore-quick .v3-quick-tags { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .v3-explore-quick .v3-quick-tags button { min-height:70px; border-radius:13px; }
  .v3-explore-quick .v3-quick-tags button:last-child { grid-column:2; }
  body[data-route-view="explore"] .v3-ai-fab { display:none!important; }
  .v3-active-trip-banner { margin-top:18px; padding:16px; }
  .v3-active-trip-banner .button { width:100%; }
  .v3-explore-section { margin-top:30px; }
  .v3-destination-card { grid-template-columns:118px minmax(0,1fr); padding:11px; gap:12px; border-radius:16px; }
  .v3-destination-media { border-radius:12px; }
  .v3-destination-media img { height:122px; aspect-ratio:auto; }
  .v3-destination-card > div { display:block; padding:0; }
  .v3-destination-card > div small { display:block; margin-bottom:4px; }
  .v3-destination-card h3 { margin:0 0 5px; font-size:17px; }
  .v3-destination-card p { min-height:0; margin-bottom:7px; font-size:12px; }
  .v3-destination-card > .button { grid-column:1 / -1; width:100%; min-height:38px; margin:0; }
}

/* 「我的攻略」接上真實 /api/guides/mine 之後新增的三個狀態，以及足跡心得的
   顯示。這頁在此之前只 render data.js 的示範陣列，所以沒有讀取中／空清單／
   示範提示這幾種狀態需要樣式。 */
.ql-my-loading,
.ql-my-demo-note {
  margin:0; padding:14px 18px;
  font-size:13.5px; line-height:1.6;
  color:var(--qg-text-muted, #667078);
}
.ql-my-demo-note {
  display:flex; align-items:flex-start; gap:8px;
  background:var(--accent-soft, #f5eae1);
  border-radius:10px;
}
.ql-my-demo-note strong { color:var(--qg-text, #1f3134); font-weight:600; }
.ql-my-demo-note svg { flex:0 0 auto; width:17px; height:17px; margin-top:2px; }

/* 真實攻略卡片沒有封面圖（後端不存圖），用一個書本圖示佔位，
   維持跟示範卡片一樣的三欄版型，不另外做第二套樣式。 */
.ql-my-guide-mark {
  display:grid; place-items:center;
  width:56px; height:56px; flex:0 0 auto;
  border-radius:10px;
  background:var(--accent-soft, #f5eae1);
  color:var(--ql-action, #174e5b);
}
.ql-my-guide-mark svg { width:24px; height:24px; }

.ql-foot-note {
  display:flex; align-items:flex-start; gap:7px;
  margin:8px 0 0; padding:9px 12px;
  border-left:3px solid var(--ql-action, #174e5b);
  border-radius:0 8px 8px 0;
  background:var(--accent-soft, #f5eae1);
  font-size:13px; line-height:1.6;
  color:var(--qg-text, #1f3134);
}
.ql-foot-note svg { flex:0 0 auto; width:15px; height:15px; margin-top:3px; opacity:.7; }
.ql-foot-note small {
  display:block; margin-top:3px;
  font-size:11px; opacity:.62;
}

/* 頁尾五個資訊頁（關於／條款／隱私／FAQ／聯絡）的內文排版。這些按鈕原本
   沒有 handler，是這次才第一次真的有內容要顯示。 */
.ql-info-doc { font-size:14.5px; line-height:1.85; color:var(--qg-text, #33474b); }
.ql-info-doc h3 {
  margin:20px 0 6px; font-size:15px; font-weight:700;
  color:var(--qg-text, #1f3134);
}
.ql-info-doc h3:first-child { margin-top:0; }
.ql-info-doc p { margin:0 0 10px; }
.ql-info-doc strong { color:var(--qg-text, #1f3134); font-weight:600; }
.ql-info-doc code {
  padding:1px 6px; border-radius:5px;
  background:var(--accent-soft, #f5eae1);
  font-size:.92em;
}
.ql-info-doc .ql-info-lead {
  padding:11px 14px; margin-bottom:16px;
  border-radius:9px;
  background:var(--accent-soft, #f5eae1);
  font-size:14px;
}
.ql-info-doc .ql-info-note {
  margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(23,78,91,.14);
  font-size:13px; color:var(--qg-text-muted, #667078);
}
.ql-info-doc .ql-info-list { margin:0 0 10px; padding-left:1.3em; }
.ql-info-doc .ql-info-list li { margin-bottom:4px; }

/* 活動卡片的示範標籤。eventCatalog（v4.js）整份是寫死的示範活動，卡片上
   卻連「剩餘 8 名」這種稀缺性文字都有，原本只有「沒有活動」的空狀態才會
   說它是示範——有內容時反而看不出來。 */
.v4-event-card { position:relative; }
.v4-event-demo-tag {
  position:absolute; z-index:2; top:10px; left:10px;
  padding:3px 9px; border-radius:6px;
  background:rgba(23,78,91,.9); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em;
}

/* 攻略工具箱：品質檢查／故事編輯／公開狀態／預覽／匯出／發布紀錄，
   全部塞在同一個 modal 裡，用區塊分隔而非分頁，避免另外做一套分頁元件。 */
.ql-toolbox-section { margin-top:18px; padding-top:18px; border-top:1px solid var(--divider, #e7ddce); }
.ql-toolbox-section:first-of-type { margin-top:14px; padding-top:0; border-top:0; }
.ql-toolbox-section h3 { margin:0 0 8px; font-size:14px; }
.ql-toolbox-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ql-toolbox-section-head h3 { margin:0; }
.ql-toolbox-section-head button { border:0; background:none; color:var(--ql-action, #174e5b); font-size:13px; display:inline-flex; align-items:center; gap:4px; padding:2px; }
.ql-toolbox-section-head button svg { width:14px; height:14px; }

.ql-toolbox-quality-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ql-toolbox-quality-item { display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.ql-toolbox-quality-item svg { flex:0 0 auto; width:16px; height:16px; margin-top:1px; }
.ql-toolbox-quality-item small { display:block; opacity:.65; font-size:12px; }
.ql-toolbox-quality-item.is-ready svg { color:#2f8a5b; }
.ql-toolbox-quality-item.is-needs_content svg { color:#b98a1f; }
.ql-toolbox-quality-item.is-blocked svg { color:#c0432f; }
.ql-toolbox-quality-summary { margin:8px 0 0; font-size:12px; opacity:.7; }

.ql-toolbox-story-view { margin:0; display:flex; flex-direction:column; gap:6px; }
.ql-toolbox-story-view dt { font-size:11px; opacity:.6; }
.ql-toolbox-story-view dd { margin:0 0 4px; font-size:13px; }
.ql-toolbox-story-locked { display:inline-flex; align-items:center; gap:4px; font-size:12px; opacity:.65; }
.ql-toolbox-story-locked svg { width:13px; height:13px; }
.ql-toolbox-story-form { display:flex; flex-direction:column; gap:10px; }
.ql-toolbox-story-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; opacity:.75; }
.ql-toolbox-story-form input, .ql-toolbox-story-form textarea {
  border:1px solid var(--divider, #e7ddce); border-radius:8px; padding:7px 9px;
  font:inherit; font-size:13px; color:var(--qg-text, #1f3134); resize:vertical;
}
.ql-toolbox-story-actions { display:flex; gap:8px; }

.ql-toolbox-visibility-status { display:flex; align-items:center; gap:6px; font-size:13px; margin:0 0 8px; }
.ql-toolbox-visibility-status svg { width:15px; height:15px; flex:0 0 auto; }
.ql-toolbox-visibility-status a { color:var(--ql-action, #174e5b); }

.ql-toolbox-preview-body {
  margin-top:8px; padding:10px 12px; border-radius:8px;
  background:var(--accent-soft, #f5eae1); font-size:13px;
}

.ql-toolbox-export-actions { display:flex; gap:8px; }

.ql-toolbox-history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ql-toolbox-history-list li { display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.ql-toolbox-history-list small { opacity:.6; }
.ql-toolbox-empty { font-size:13px; opacity:.65; margin:0; }

/* 2026-09-25：被審核擋下之後的路。未登入的「我的攻略」要有登入按鈕、
   還沒公開的攻略修改入口要有字、工具箱最上面講被擋下的原因。 */
.ql-my-demo-note { flex-wrap:wrap; }
.ql-my-demo-note > span { flex:1 1 180px; }
.ql-my-demo-note > button { margin-left:auto; flex:none; }
.ql-my-guide-edit { display:inline-flex; align-items:center; justify-content:center; gap:4px; }
/* 手機上一排三張、每張不到 100px：按鈕欄原本照文字寬度撐開，「公開發布」
   早就被卡片右緣切掉一截。讓按鈕縮進卡片寬度，放不下就換行。 */
.ql-my-panel article > div:last-child { grid-template-columns:minmax(0, 1fr); }
.ql-my-panel article > div:last-child > button { min-width:0; white-space:normal; }
.ql-my-guide-edit svg { width:14px; height:14px; }
.ql-toolbox-held {
  display:flex; align-items:flex-start; gap:8px;
  margin:0 0 12px; padding:10px 12px; border-radius:10px;
  background:var(--accent-soft, #f5eae1); color:var(--qg-text, #1f3134);
  font-size:13px; line-height:1.6;
}
.ql-toolbox-held svg { flex:none; width:16px; height:16px; margin-top:3px; color:#b3541e; }

/* 手機上「我的」各分頁的卡片一排三張、每張不到 100px，標題斷成好幾行、按鈕要
   換行才放得下（2026-09-25 實測）。這一區改成一排兩張；攻略頁的其他列表不變。 */
@media (max-width: 560px) {
  .ql-my-panel .ql-v52-more-guides > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}