/* =====================================================================
   Hoptimist Taiwan — pages/popup.css
   Owner: popup page agent. Used by popup.html (pp-*) and
   popup-detail.html (pd-*). Builds on assets/css/style.css tokens.
   ===================================================================== */

/* ---------- Shared ---------- */
.pp-head .page-head__lead, .pp-ig__text, .pp-partner p, .pd-intro, .section-head__lead { text-wrap: pretty; }

/* ---------- Shared: live countdown ---------- */
.pp-cd { display: flex; flex-direction: column; gap: 10px; padding: var(--s-4); border-radius: 12px; background: var(--c-stage-2); }
.pp-cd__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--c-ink); }
.pp-cd__label .icon { width: 16px; height: 16px; }
.pp-cd--end .pp-cd__label { color: var(--c-red); }
.pp-cd__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.pp-cd__unit { display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 8px 4px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line-soft); }
.pp-cd__num { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--c-ink); letter-spacing: .02em; }
.pp-cd__lab { font-size: 12px; color: var(--c-muted); }
.pp-cd__when { font-size: 12px; color: var(--c-muted); letter-spacing: .04em; }
.pp-cd__done { grid-column: 1 / -1; font-size: 15px; font-weight: 500; color: var(--c-ink); padding: 8px 0; }
.pp-cd--dark { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pp-cd--dark .pp-cd__label { color: #fff; }
.pp-cd--dark.pp-cd--end .pp-cd__label { color: #FF8A93; }
.pp-cd--dark .pp-cd__unit { background: rgba(255, 255, 255, .1); box-shadow: none; }
.pp-cd--dark .pp-cd__num, .pp-cd--dark .pp-cd__done { color: #fff; }
.pp-cd--dark .pp-cd__lab, .pp-cd--dark .pp-cd__when { color: rgba(255, 255, 255, .7); }
@media (min-width: 768px) { .pp-cd__num { font-size: 30px; } }

/* ---------- Shared: "next stop" placeholder card ---------- */
.pp-next { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.pp-next__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: var(--c-stage); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-line); }
.pp-next__media::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(0, 0, 0, .18); border-radius: 10px; pointer-events: none; }
.pp-next__media img { width: 52%; height: auto; mix-blend-mode: multiply; transform-origin: 50% 100%; }
.pp-next:hover .pp-next__media img { animation: hop-bob .9s var(--ease-bob) 1; }
.pp-next__body { display: flex; flex-direction: column; gap: 4px; }
.pp-next__en { font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.1; letter-spacing: .04em; color: var(--c-ink); }
.pp-next__title { font-size: 16px; font-weight: 500; color: var(--c-ink); }
.pp-next__text { font-size: 14px; color: var(--c-text); line-height: 1.7; }
.pp-next__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2); }
.pp-next__actions .btn { padding: 0 16px; }

/* ---------- Shared: event grid; mobile = JP-style horizontal cards ---------- */
.pp-grid { row-gap: var(--s-7); }
@media (max-width: 767.98px) {
  .pp-grid { gap: 0; }
  .pp-grid > .event-card, .pp-grid > .pp-next { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line-soft); }
  .pp-grid > :first-child { padding-top: 0; }
  .pp-grid > :last-child { border-bottom: 0; }
  .pp-grid .event-card__link { display: grid; grid-template-columns: 37% minmax(0, 1fr); gap: 14px; align-items: start; }
  .pp-grid .event-card__media { border-radius: 12px; }
  .pp-grid .event-card__status { top: 8px; left: 8px; height: 22px; padding: 0 8px; font-size: 11px; gap: 5px; }
  .pp-grid .event-card__city { top: auto; bottom: 8px; left: 8px; right: auto; min-height: 22px; padding: 0 8px; font-size: 11px; }
  .pp-grid .event-card__body { gap: 2px; }
  .pp-grid .event-card__title { font-size: 12px; line-height: 1.5; }
  .pp-grid .event-card__venue { font-size: 15px; line-height: 1.45; }
  .pp-grid .event-card__floor { display: block; margin-left: 0; font-size: 12px; color: var(--c-muted); }
  .pp-grid .event-card__meta { font-size: 12px; gap: 5px; letter-spacing: 0; }
  .pp-grid .event-card__meta .icon { width: 14px; height: 14px; margin-top: 4px; }
  .pp-grid .event-card__foot { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; margin-top: 6px; }
  .pp-grid .event-card__countdown { font-size: 13px; }
  .pp-grid .pp-next { display: grid; grid-template-columns: 37% minmax(0, 1fr); gap: 14px; align-items: center; }
  .pp-grid .pp-next__media { border-radius: 12px; }
  .pp-grid .pp-next__media::after { inset: 6px; border-radius: 8px; }
  .pp-grid .pp-next__en { font-size: 20px; }
  .pp-grid .pp-next__text { font-size: 13px; }
}

/* =====================================================================
   popup.html
   ===================================================================== */

/* ---------- Page head ---------- */
.pp-head { padding-bottom: var(--s-6); }
.pp-head__grid { display: grid; gap: var(--s-6); }
.pp-head__tagline { margin-top: var(--s-3); font-family: var(--font-zh); font-size: 18px; font-weight: 500; color: var(--c-ink); letter-spacing: .08em; }
.pp-head .page-head__lead { margin-top: var(--s-3); }
.pp-head__lead2 { color: var(--c-ink); }
.pp-head__cta { margin-top: var(--s-5); }
@media (max-width: 479.98px) { .pp-head__cta .btn { width: 100%; } }
@media (min-width: 1024px) {
  .pp-head__grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: end; gap: var(--s-8); }
  .pp-head { padding-bottom: var(--s-7); }
}

.pp-stats { padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage); align-self: end; }
.pp-stats__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--s-3); }
.pp-stats__title { font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1; letter-spacing: .04em; color: var(--c-ink); }
.pp-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.pp-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-2) var(--s-3); border-radius: 12px; background: #fff; text-align: center; }
.pp-stat__num { font-family: var(--font-display); font-weight: 300; font-size: 48px; line-height: 1; color: var(--c-ink); }
.pp-stat__label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--c-text); letter-spacing: .04em; white-space: nowrap; }
.pp-stat__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-line); flex-shrink: 0; }
.pp-stat--now .pp-stat__label::before { background: var(--c-red); }
.pp-stat--soon .pp-stat__label::before { background: var(--c-yellow); }
.pp-stat--past .pp-stat__label::before { background: var(--c-ink); }
.pp-stats__foot { display: flex; align-items: center; gap: 6px; margin-top: var(--s-3); font-size: 13px; color: var(--c-text); }
.pp-stats__foot .icon { width: 16px; height: 16px; color: var(--c-muted); }
@media (min-width: 768px) { .pp-stat__num { font-size: 56px; } }

/* ---------- NOW OPEN feature ---------- */
.pp-now-wrap { padding-bottom: var(--s-4); }
.pp-now { display: grid; overflow: hidden; border-radius: var(--radius-card); background: var(--c-ink); color: #fff; }
.pp-now__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #333; }
.pp-now__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.pp-now__media:hover img { transform: scale(1.03); }
.pp-now__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); min-width: 0; }
.pp-now__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pp-now__countdown { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #FFB08A; }
.pp-now__kicker { font-size: 13px; color: rgba(255, 255, 255, .72); letter-spacing: .06em; }
.pp-now__title { color: #fff; font-family: var(--font-zh); font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; margin-top: -6px; }
.pp-now__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pp-now__en { display: block; font-family: var(--font-display); font-weight: 300; font-size: 22px; letter-spacing: .04em; color: rgba(255, 255, 255, .78); }
.pp-now__facts { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.pp-now__facts li { display: flex; gap: 10px; align-items: flex-start; }
.pp-now__facts .icon { width: 18px; height: 18px; margin-top: 2px; color: rgba(255, 255, 255, .6); }
.pp-now__last { color: #FFB08A; font-weight: 500; }
.pp-now__addr { color: rgba(255, 255, 255, .65); font-size: 13px; }
.pp-now__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.pp-now__actions .btn .icon { width: 18px; height: 18px; }
@media (max-width: 479.98px) { .pp-now__actions .btn { flex: 1 1 100%; } }
.pp-now__others { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .16); }
.pp-now__others ul { list-style: none; margin: 0; padding: 0; }
.pp-now__others-title { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .6); margin-bottom: 4px; }
.pp-now__others a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; font-size: 14px; }
.pp-now__others a:hover .pp-now__o-name { text-decoration: underline; text-underline-offset: 3px; }
.pp-now__others .icon { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: rgba(255, 255, 255, .7); }
.pp-now__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); flex-shrink: 0; animation: pulse-dot 1.6s ease-in-out infinite; }
.pp-now__o-name { font-weight: 500; }
.pp-now__o-meta { color: rgba(255, 255, 255, .65); font-size: 13px; }
.pp-now--next .pp-now__countdown { color: var(--c-yellow); }
@media (min-width: 768px) {
  .pp-now { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-now__media { aspect-ratio: auto; min-height: 100%; }
  .pp-now__body { padding: var(--s-7) var(--s-6); justify-content: center; }
  .pp-now__title { font-size: 32px; }
  .pp-now__en { font-size: 28px; }
}
@media (min-width: 1024px) {
  .pp-now { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .pp-now__body { padding: var(--s-8) var(--s-7); }
}

/* ---------- Tabs + city filter ---------- */
.pp-list { padding-top: var(--s-7); }
.pp-tabs .tabs__tab { font-size: 15px; display: inline-flex; align-items: center; }
.pp-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--c-stage); color: var(--c-text); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.pp-tab-count:empty { display: none; }
.pp-tabs .tabs__tab[aria-selected="true"] .pp-tab-count { background: var(--c-ink); color: #fff; }
@media (max-width: 559.98px) { .pp-tabs .tabs__tab { flex: 1 1 0; justify-content: center; padding: 0 6px; font-size: 14px; letter-spacing: .02em; } .pp-tab-count { margin-left: 6px; } }
@media (min-width: 768px) { .pp-tabs .tabs__tab { font-size: 16px; padding: 0 22px; } }
.pp-filter { margin-top: var(--s-4); }
.pp-filter__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--c-muted); }
.pp-filter__chips .chip { padding: 0 16px; }
@media (min-width: 1024px) {
  .pp-filter { display: flex; align-items: center; gap: var(--s-4); }
  .pp-filter__label { margin-bottom: 0; flex-shrink: 0; }
}
.pp-tabs .tabs__panel { padding-top: var(--s-5); }
.pp-tabs .tabs__panel:focus-visible { outline-offset: 6px; }
.pp-empty .pp-next { max-width: 720px; margin-inline: auto; }
@media (min-width: 768px) {
  .pp-empty .pp-next { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: var(--s-6); padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); }
}
.pp-list__note { margin-top: var(--s-7); max-width: 820px; }

/* ---------- Footprints ---------- */
.pp-foot__grid { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .pp-foot__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; } }
.pp-map, .pp-route { padding: var(--s-5); border-radius: var(--radius-card); background: #fff; }
@media (min-width: 768px) { .pp-map, .pp-route { padding: var(--s-6); } }
.pp-map__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--s-4); }
.pp-map__title, .pp-route__title { font-size: 16px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; }
.pp-map__hint { font-size: 12px; font-weight: 400; color: var(--c-muted); margin-left: 2px; }
.pp-map__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 400px; margin-inline: auto; }
.pp-tile { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 10px; background: var(--c-stage-2); color: #A3A3A3; font-family: var(--font-zh); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .04em; }
button.pp-tile { cursor: pointer; transform-origin: 50% 100%; transition: box-shadow var(--dur) var(--ease); }
button.pp-tile:hover, button.pp-tile:focus-visible { animation: hop-bob-y .9s var(--ease-bob) 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.pp-tile__count { font-size: 11px; font-weight: 700; opacity: .85; }
.pp-tile--past { background: var(--c-ink); color: #fff; }
.pp-tile--soon { background: var(--c-yellow); color: var(--c-ink); }
.pp-tile--now { background: var(--c-red); color: #fff; }
.pp-tile--now::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid var(--c-red); opacity: .5; animation: pp-ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes pp-ring { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1.12); opacity: 0; } }
@media (min-width: 768px) { .pp-tile { font-size: 14px; border-radius: 12px; } .pp-map__tiles { gap: 8px; } }
.pp-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: var(--s-4); font-size: 12px; color: var(--c-text); }
.pp-map__legend li { display: inline-flex; align-items: center; gap: 6px; }
.pp-key { width: 12px; height: 12px; border-radius: 3px; background: var(--c-stage-2); box-shadow: inset 0 0 0 1px var(--c-line); }
.pp-key--now { background: var(--c-red); box-shadow: none; }
.pp-key--soon { background: var(--c-yellow); box-shadow: none; }
.pp-key--past { background: var(--c-ink); box-shadow: none; }

.pp-route__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--c-line-soft); }
.pp-route__stats li { display: flex; flex-direction: column; gap: 2px; }
.pp-route__num { font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1; color: var(--c-ink); }
.pp-route__lab { font-size: 12px; color: var(--c-muted); letter-spacing: .04em; }
.pp-route__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: var(--s-3); }
.pp-route__title span[lang="en"] { font-family: var(--font-display); font-weight: 300; font-size: 24px; letter-spacing: .04em; }
.pp-route__sub { font-size: 12px; font-weight: 400; color: var(--c-muted); }
.pp-route__list { position: relative; }
.pp-stop { position: relative; }
.pp-stop + .pp-stop { border-top: 1px solid var(--c-line-soft); }
.pp-stop::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--c-line-soft); }
.pp-stop:first-child::before { top: 50%; }
.pp-stop:last-child::before { bottom: 50%; }
.pp-stop:only-child::before { display: none; }
.pp-stop__link { position: relative; display: grid; grid-template-columns: 16px 52px minmax(0, 1fr); grid-template-areas: "dot thumb main" "dot thumb status"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0; min-height: 72px; color: inherit; }
.pp-stop__dot { grid-area: dot; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--c-line); color: #fff; }
.pp-stop__dot .icon { width: 10px; height: 10px; stroke-width: 3; }
.pp-stop--past .pp-stop__dot { background: var(--c-ink); box-shadow: none; }
.pp-stop--now .pp-stop__dot { background: var(--c-red); box-shadow: 0 0 0 4px rgba(222, 6, 24, .15); }
.pp-stop--soon .pp-stop__dot { background: var(--c-yellow); box-shadow: none; }
.pp-stop__thumb { grid-area: thumb; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--c-stage); }
.pp-stop__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-stop--past .pp-stop__thumb img { filter: grayscale(1); opacity: .8; }
.pp-stop__main { grid-area: main; display: flex; flex-direction: column; min-width: 0; align-self: end; }
.pp-stop__date { font-size: 12px; color: var(--c-muted); letter-spacing: .02em; line-height: 1.5; }
.pp-stop__venue { font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.45; }
.pp-stop__city { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--c-muted); }
.pp-stop__status { grid-area: status; align-self: start; }
.pp-stop__link:hover .pp-stop__venue { color: var(--c-cta-strong); }
@media (min-width: 560px) {
  .pp-stop__link { grid-template-columns: 16px 56px minmax(0, 1fr) auto; grid-template-areas: "dot thumb main status"; row-gap: 0; }
  .pp-stop__thumb { width: 56px; height: 56px; }
  .pp-stop__main { align-self: center; }
  .pp-stop__status { align-self: center; }
}

/* ---------- Host a pop-up ---------- */
.pp-partner__media { aspect-ratio: 16 / 10; }
@media (min-width: 768px) { .pp-partner__media { aspect-ratio: 4 / 3; } }
.pp-partner__title { display: flex; flex-direction: column; gap: 6px; letter-spacing: 0; }
.pp-partner__en { font-family: var(--font-display); font-weight: 200; font-size: 44px; line-height: 1.05; letter-spacing: .02em; color: var(--c-ink); }
.pp-partner__zh { font-family: var(--font-zh); font-size: 18px; font-weight: 500; color: var(--c-ink); letter-spacing: .06em; }
@media (min-width: 768px) { .pp-partner__en { font-size: 64px; } .pp-partner__zh { font-size: 20px; } }
.pp-partner__list { margin: var(--s-2) 0 var(--s-2); gap: var(--s-3); }
.pp-partner__item-title { display: block; font-weight: 500; color: var(--c-ink); font-size: 15px; }
.pp-partner__item-text { display: block; font-size: 14px; color: var(--c-text); line-height: 1.7; }

/* ---------- Instagram band ---------- */
.pp-ig__inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .pp-ig__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-8); } }
.pp-ig__body { display: flex; flex-direction: column; gap: var(--s-3); }
.pp-ig__title { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--c-ink); }
@media (min-width: 768px) { .pp-ig__title { font-size: 32px; } }
.pp-ig__text { font-size: 15px; line-height: 1.9; color: var(--c-ink); }
.pp-ig__body .btn-row { margin-top: var(--s-2); }
@media (max-width: 479.98px) { .pp-ig__body .btn { flex: 1 1 100%; } }
.pp-ig__small { font-size: 12px; color: rgba(26, 26, 25, .75); }
.pp-ig__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-ig__tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .4); }
.pp-ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.pp-ig__tile:hover img { transform: scale(1.05); }
.pp-ig__icon { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--c-ink); opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pp-ig__tile:hover .pp-ig__icon, .pp-ig__tile:focus-visible .pp-ig__icon { opacity: 1; transform: none; }
.pp-ig__sample { position: absolute; top: 8px; left: 8px; z-index: 1; pointer-events: none; }

/* =====================================================================
   popup-detail.html
   ===================================================================== */
.pd-top { padding-top: var(--s-5); }
.pd .section-head { margin-bottom: var(--s-5); }
.pd .section-head__en { font-size: 40px; }
@media (min-width: 768px) { .pd .section-head__en { font-size: 52px; } .pd .section-head { margin-bottom: var(--s-6); } }
.pd-sample { margin-top: var(--s-4); }
.pd-sample strong { color: var(--c-ink); }
.pd-hero { display: grid; gap: var(--s-5); margin-top: var(--s-4); padding-bottom: var(--s-6); }
.pd-hero--loading { grid-template-columns: 1fr; }
@media (min-width: 768px) { .pd-hero--loading { grid-template-columns: 1fr 1fr; } }
.pd-hero__media { margin: 0; min-width: 0; }
.pd-hero__cap { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--c-muted); }
.pd-hero__body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
@media (min-width: 1024px) {
  .pd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; padding-bottom: var(--s-7); }
  .pd-hero__media { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pd-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; }
}
.pd-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pd-status__cd { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--c-cta-strong); }
.pd-status__cd.is-last { color: var(--c-red); }
.pd-status__cd.is-ended { color: var(--c-muted); font-weight: 400; }
.pd-title { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-zh); font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; color: var(--c-ink); }
.pd-title__en { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.05; letter-spacing: .04em; color: var(--c-muted); }
@media (min-width: 768px) { .pd-title { font-size: 36px; } .pd-title__en { font-size: 38px; } }
@media (min-width: 1366px) { .pd-title { font-size: 40px; } }
.pd-title-zh { font-size: 16px; font-weight: 500; color: var(--c-ink); letter-spacing: .06em; margin-top: -4px; }
.pd-intro { font-size: 15px; line-height: 1.9; color: var(--c-text); }
.pd-facts { display: flex; flex-direction: column; border-top: 1px solid var(--c-line-soft); }
.pd-facts > li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--c-line-soft); }
.pd-facts > li > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--c-ink); }
.pd-facts > li > div { display: flex; flex-direction: column; min-width: 0; }
.pd-facts__label { font-size: 12px; color: var(--c-muted); letter-spacing: .1em; }
.pd-facts__val { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.pd-facts__sub { font-size: 13px; color: var(--c-text); }
.pd-hours { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--c-ink); }
.pd-hours__row { display: flex; flex-wrap: wrap; gap: 0 10px; }
.pd-hours__days { color: var(--c-text); }
.pd-hours__last { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 8px; line-height: 1.7; background: #FFF1E6; color: var(--c-cta-strong); font-size: 13px; font-weight: 500; }
.pd-note { display: block; margin-top: 6px; font-size: 12px; color: var(--c-muted); }
.pd-ended { align-items: flex-start; }
.pd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.pd-actions > .btn, .pd-actions .pd-menu__btn { width: 100%; padding: 0 12px; }
.pd-actions--3 > :last-child { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .pd-actions { display: flex; flex-wrap: wrap; }
  .pd-actions > .btn, .pd-actions .pd-menu__btn { width: auto; padding: 0 18px; }
}
.pd-menu { position: relative; min-width: 0; }
.pd-menu__btn .icon--chevron-down { width: 16px; height: 16px; margin-left: -2px; transition: transform var(--dur) var(--ease); }
.pd-menu.is-open .pd-menu__btn { --btn-bg: var(--c-ink); --btn-fg: #fff; }
.pd-menu.is-open .icon--chevron-down { transform: rotate(180deg); }
.pd-menu__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: max-content; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-pop), 0 0 0 1px var(--c-line-soft); }
.pd-menu__panel.is-right { left: auto; right: 0; }
.pd-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--c-ink); text-align: left; white-space: nowrap; }
.pd-menu__item:hover, .pd-menu__item:focus-visible { background: var(--c-stage-2); }
.pd-menu__item .icon { width: 18px; height: 18px; flex-shrink: 0; }
.pd-menu__item .icon--external { width: 14px; height: 14px; margin-left: auto; color: var(--c-muted); }
.pd-menu__item--line .icon { color: var(--c-line-green); width: 20px; height: 20px; }

.pd-info { padding-top: var(--s-6); border-top: 1px solid var(--c-line-soft); }
.pd-info__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .pd-info__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-7); align-items: start; } .pd-mapcol { padding-top: 104px; } }
.pd-spec dd { line-height: 1.75; min-width: 0; }
@media (max-width: 767.98px) { .pd-spec { padding-inline: var(--s-4); } .pd-spec .spec-table__row { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3); } }
ul.pd-list { list-style: disc; padding-left: 1.2em; margin: 0; }
.pd-list li + li { margin-top: 4px; }
.pd-inline-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; font-weight: 500; color: var(--c-cta-strong); text-decoration: underline; text-underline-offset: 3px; }
.pd-inline-link .icon { width: 14px; height: 14px; }
.pd-h3 { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); font-size: 18px; font-weight: 500; color: var(--c-ink); }
.pd-h3 .icon { width: 20px; height: 20px; }
.pd-map { aspect-ratio: 4 / 3; }
.pd-map__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: var(--s-5); text-align: center; color: var(--c-ink);
  background-color: #E9ECE8;
  background-image: linear-gradient(rgba(255, 255, 255, .7) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, .7) 2px, transparent 2px), linear-gradient(35deg, transparent 47%, rgba(255, 255, 255, .9) 47%, rgba(255, 255, 255, .9) 53%, transparent 53%);
  background-size: 48px 48px, 48px 48px, 100% 100%; }
.pd-map__pin { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-red); color: #fff; box-shadow: 0 6px 18px rgba(222, 6, 24, .35); transform-origin: 50% 100%; }
.pd-map__pin .icon { width: 30px; height: 30px; }
.pd-map__cover:hover .pd-map__pin, .pd-map__cover:focus-visible .pd-map__pin { animation: hop-bob .9s var(--ease-bob) 1; }
.pd-map__venue { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.pd-map__addr { font-size: 13px; color: var(--c-text); }
.pd-map__btn { margin-top: var(--s-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); pointer-events: none; }
.pd-map__cover:hover .pd-map__btn { --btn-bg: var(--c-ink); --btn-fg: #fff; --btn-bd: var(--c-ink); }
@media (min-width: 768px) { .pd-map { aspect-ratio: 16 / 10; } }

.pd-hl { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .pd-hl { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); } }
.pd-hl__item { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); }
.pd-hl__no { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: .9; color: var(--c-cta); flex-shrink: 0; }
.pd-hl__text { font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--c-ink); padding-top: 4px; }

.pd-gifts { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .pd-gifts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); } }
.pd-gift { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--radius-card); border: 1px solid var(--c-line); background: #fff; }
.pd-gift__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #FFF1E6; color: var(--c-cta-strong); flex-shrink: 0; }
.pd-gift__icon .icon { width: 26px; height: 26px; }
.pd-gift__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-gift__cond { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); letter-spacing: .06em; }
.pd-gift__amt { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--c-ink); letter-spacing: .02em; }
.pd-gift__item { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.pd-gift__note { font-size: 12px; color: var(--c-muted); }
.pd-gifts__foot { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--s-4); font-size: 13px; line-height: 1.7; color: var(--c-text); }
.pd-gifts__foot .icon { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--c-cta-strong); }
.pd-gifts__foot strong { color: var(--c-ink); }

.pd-series__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .pd-series__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; } }
.pd-series__chips .chip { gap: 8px; }
.pd-chip-en { font-family: var(--font-display); font-weight: 300; font-size: 17px; letter-spacing: .04em; color: var(--c-muted); }
.pd-series__chips .chip:hover .pd-chip-en { color: var(--c-ink); }
.pd-channels { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage); }
.pd-channels__title { font-size: 15px; font-weight: 500; color: var(--c-ink); margin-bottom: 4px; }
.pd-channel { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: 12px var(--s-4); border-radius: 12px; background: #fff; color: var(--c-ink); transition: box-shadow var(--dur) var(--ease); }
.pd-channel:hover { box-shadow: 0 0 0 1px var(--c-ink); }
.pd-channel > .icon:first-child { width: 24px; height: 24px; flex-shrink: 0; }
.pd-channel > .icon:last-child { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.pd-channel:hover > .icon:last-child { transform: translateX(4px); }
.pd-channel__main { display: flex; flex-direction: column; min-width: 0; }
.pd-channel__main strong { font-weight: 500; font-size: 15px; }
.pd-channel__main span { font-size: 13px; color: var(--c-text); }

.pd-notes { padding: var(--s-5); }
@media (min-width: 768px) { .pd-notes { padding: var(--s-6) var(--s-7); } }
.pd-list--notes { font-size: 14px; line-height: 1.8; color: var(--c-text); }
.pd-list--notes li::marker { color: var(--c-muted); }

.pd-others { border-top: 1px solid var(--c-line-soft); }
.pd-backwrap { padding-bottom: var(--s-8); }
.pd-back .icon { transition: transform var(--dur) var(--ease); }
.pd-back:hover .icon { transform: translateX(-4px); }

.pd-404 { padding-bottom: var(--s-5); }
.pd-404 .empty-state__title { font-size: 22px; }
.pd-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); }

/* Motion safety (global rule already shortens animations; also stop infinite ones) */
@media (prefers-reduced-motion: reduce) {
  .pp-tile--now::after, .pp-now__dot { animation: none !important; }
  button.pp-tile:hover, button.pp-tile:focus-visible, .pp-next:hover .pp-next__media img, .pd-map__cover:hover .pd-map__pin { animation: none !important; }
}

/* =====================================================================
   Cute "Hop around Taiwan" map (assets/js/pages/popup-map.js)
   Sticker island + Bumble-head pins + dashed hop arcs + mini hopper
   ===================================================================== */
.pp-map__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pp-map__en { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: .03em; color: var(--c-ink); }
.pp-map__art { max-width: 460px; margin-inline: auto; }
.pp-map__tip { margin-top: var(--s-3); text-align: center; font-size: 12px; color: var(--c-muted); letter-spacing: .04em; }
.htm-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-zh); }
/* calm, line-drawing map: warm paper sea, white island with an ink outline */
.htm-sea { fill: #F3F1EC; }
.htm-island--small { stroke-width: .9; }
.htm-island-shadow { fill: #E4E0D8; }
.htm-island { fill: #fff; stroke: var(--c-ink); stroke-width: 1.1; stroke-linejoin: round; }
.htm-city { font-size: 7px; fill: #A39E95; letter-spacing: .06em; }

/* pins: Bumble / Bimble drawn after the official illustration */
.htm-pin { cursor: pointer; outline: none; }
.htm-pin__hit { fill: transparent; stroke: none; }
.htm-pin__shadow { fill: rgba(26, 26, 25, .14); }
.htm-fig__fill { fill: #fff; stroke: var(--c-ink); stroke-width: .9; stroke-linejoin: round; }
.htm-fig__head { stroke-width: 1.05; }
.htm-fig__coil { fill: none; stroke: var(--c-ink); stroke-width: .75; }
.htm-fig__legs { fill: none; stroke: var(--c-ink); stroke-width: 1; stroke-linecap: round; }
.htm-fig__feet { fill: none; stroke: var(--c-ink); stroke-width: 1.4; stroke-linecap: round; }
.htm-fig__eye { fill: var(--c-ink); }
.htm-fig__smile { fill: none; stroke: var(--c-ink); stroke-width: .95; stroke-linecap: round; }
.htm-pin--now .htm-fig__fill { fill: var(--c-red); }
.htm-pin--soon .htm-fig__fill { fill: var(--c-yellow); }
.htm-pin--past .htm-fig__fill { fill: #fff; }
.htm-pin__count circle { fill: var(--c-ink); }
.htm-pin__count text { font-family: "Open Sans", sans-serif; font-size: 6px; font-weight: 700; fill: #fff; }
.htm-pin__label rect { fill: #fff; stroke: var(--c-ink); stroke-width: .8; }
.htm-pin__label text { font-size: 7.6px; font-weight: 500; fill: var(--c-ink); letter-spacing: .06em; }
.htm-pin--now .htm-pin__label rect { fill: var(--c-ink); }
.htm-pin--now .htm-pin__label text { fill: #fff; }
.htm-pin--past .htm-pin__label rect { stroke: #B7B1A6; }
.htm-pin--past .htm-pin__label text { fill: var(--c-text); }
.htm-pin__body { transform-box: fill-box; transform-origin: 50% 100%; }
.htm-pin--now .htm-pin__body { animation: htm-bob 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite; animation-delay: calc(var(--i, 0) * .25s); }
.htm-pin:hover .htm-pin__body, .htm-pin:focus-visible .htm-pin__body { animation: htm-bob .9s cubic-bezier(.34, 1.56, .64, 1) 1; }
.htm-pin:focus-visible .htm-fig__head { stroke-width: 2.2; }
.htm-pin:hover .htm-pin__label rect, .htm-pin:focus-visible .htm-pin__label rect { fill: var(--c-ink); stroke: var(--c-ink); }
.htm-pin:hover .htm-pin__label text, .htm-pin:focus-visible .htm-pin__label text { fill: #fff; }
@keyframes htm-bob {
  0%, 46%, 100% { transform: translateY(0) scaleY(1); }
  8% { transform: translateY(-5px) scaleY(1.03); }
  16% { transform: translateY(0) scaleY(.94); }
  24% { transform: translateY(-2.5px) scaleY(1.01); }
  32% { transform: translateY(0) scaleY(.98); }
  40% { transform: translateY(-.8px); }
}

/* legend */
.pp-map__legend li { gap: 4px; }
.htm-legend-ico { width: 16px; height: 24px; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .htm-pin__body, .htm-pin--now .htm-pin__body { animation: none !important; }
}

/* No pop-up yet (browse-only launch): 「首站即將公布」 instead of 0 / 0 / 0 counters */
.pp-stats__soon { display: grid; gap: 6px; }
.pp-stats__soon strong { font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); }
.pp-stats__soon span { font-size: 14px; line-height: 1.8; color: var(--c-text); }