/* Independent Zao category candidates; original guide and other snow areas are unchanged. */
html.v2-zao-preview .zcp-root { color: var(--color-text-primary, #193c50); line-height: 1.65; }
.zcp-root *, .zcp-root *::before, .zcp-root *::after { box-sizing: border-box; }
.zcp-root :is(p, ul, dl, h2, h3, h4, h5) { margin: 0; }
.zcp-root [hidden] { display: none !important; }
.zcp-root :is(input, select, button) { font: inherit; }
.zcp-root :is(a, button, input, select, summary):focus-visible { outline: 3px solid #126b9a; outline-offset: 3px; }
.zcp-root :is(a, p, li, h2, h3, h4, h5, dt, dd, summary) { overflow-wrap: anywhere; }
.zcp-root :is(.zcp-guide, .zcp-notices, .zcp-listing, .zcp-final-notice) { margin-block-start: 1rem; }
.zcp-filter-panel { padding: 1rem; border: 1px solid #cfdee5; border-radius: 1rem; background: #f0f7fa; }
.zcp-filter-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; gap: .75rem; }
.zcp-field { display: grid; min-width: 0; gap: .35rem; color: #294e63; font-size: .85rem; font-weight: 650; }
.zcp-field :is(input, select) { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; border: 1px solid #a7becb; border-radius: .55rem; padding: .5rem .65rem; color: #163a50; background: #fff; }
.zcp-result-count { margin-top: .6rem !important; font-size: .85rem; color: #365c70; }
.zcp-link { display: inline-flex; min-height: 44px; max-width: 100%; align-items: center; justify-content: center; padding: .55rem .8rem; border: 1px solid #b5ccd8; border-radius: .55rem; background: #fff; color: #155879; font: inherit; font-size: .84rem; font-weight: 650; text-align: center; text-decoration: none; cursor: pointer; }
.zcp-link:hover { background: #e9f4fa; }
.zcp-link:disabled { color: #667e8b; background: #f5f8fa; cursor: default; }
.zcp-link-primary { border-color: #155879; background: #155879; color: #fff; }
.zcp-link-primary:hover { color: #fff; background: #0b425e; }
.zcp-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; align-items: start; }
.zcp-fold { min-width: 0; border: 1px solid #d3e1e7; border-radius: .75rem; background: #fff; }
.zcp-fold > summary { min-height: 44px; padding: .7rem .9rem; color: #224d64; font-size: .89rem; font-weight: 700; cursor: pointer; }
.zcp-fold > :not(summary) { margin: .25rem .9rem .9rem; font-size: .86rem; }
.zcp-fold-copy > * + *, .zcp-group-guide > * + * { margin-block-start: .75rem; }
.zcp-group-guide h3, .zcp-concept h3 { color: #224d64; font-size: .94rem; }
.zcp-price-grid { display: grid; gap: .35rem; }
.zcp-notices:empty { display: none; }
.zcp-notices .zcp-warning + .zcp-warning { margin-top: .5rem; }
.zcp-list-heading { font-size: 1.15rem; color: #163e56; }
.zcp-list-description { margin-block: .3rem .85rem !important; color: #537181; font-size: .85rem; }
.zcp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.zcp-sightseeing-group + .zcp-sightseeing-group { margin-top: 2rem; }
.zcp-sightseeing-group__title { padding: .8rem 1rem; border-radius: .65rem; background: #183e56; color: #fff; font-size: 1.35rem; font-weight: 800; line-height: 1.4; }
.zcp-sightseeing-group__description { margin: .65rem 0 1rem !important; color: #537181; font-size: .9rem; }
.zcp-card { min-width: 0; display: grid; gap: .65rem; padding: .85rem; border: 1px solid #d3e1e7; border-radius: .9rem; background: #fff; scroll-margin-top: 7rem; }
.zcp-card-head { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .7rem; align-items: start; }
.zcp-card-title { min-width: 0; }
.zcp-card-title h3 { margin-top: .2rem; color: #163e56; font-size: 1.04rem; line-height: 1.45; }
.zcp-meta { font-size: .73rem; line-height: 1.45; color: #577182; }
.zcp-summary, .zcp-location { font-size: .85rem; line-height: 1.6; }
.zcp-alternate-name { margin-top: .35rem !important; font-size: .75rem; color: #5b7482; }
.zcp-photo { min-width: 0; width: 100%; margin: 0; border-radius: .4rem; overflow: hidden; }
.zcp-photo .v2-snow-media__image { display: block; width: 100%; height: 72px; object-fit: contain; background: #eef4f7; }
.zcp-photo .v2-snow-media__caption { position: static; inset: auto; margin: 0; padding: .3rem .35rem; color: #3d5d70; background: #f0f6f9; font-size: .62rem; line-height: 1.35; }
.zcp-photo .v2-snow-media-placeholder { min-height: 72px; padding: .35rem; gap: .2rem; }
.zcp-photo .v2-snow-media-placeholder__mark { display: none; }
.zcp-photo .v2-snow-media-placeholder__label { font-size: .72rem; }
.zcp-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.zcp-title-actions { margin-top: .55rem; }
.zcp-title-actions .zcp-link { padding: .45rem .55rem; font-size: .79rem; }
.zcp-title-actions .zcp-link { flex: 0 1 auto; }
.v2-zao-preview[data-zao-preview-page="rental"] .zcp-card-title .v2-snow-rating { margin-top: .55rem; font-size: .8rem; }
.zcp-pills { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; list-style: none; }
.zcp-pills li { padding: .15rem .45rem; border-radius: .35rem; background: #eef5f1; color: #35644e; font-size: .74rem; }
.zcp-pills-neutral li { background: #eef4f7; color: #3a6073; }
.zcp-warning { padding: .55rem .65rem; border-left: 3px solid #d8ad64; border-radius: .35rem; background: #fff7e9; color: #705424; font-size: .8rem; }
.zcp-warning strong { display: block; margin-bottom: .15rem; }
.zcp-warning ul, .zcp-list { padding-left: 1.2rem; }
.zcp-warning li:only-child { list-style: none; margin-left: -1.2rem; }
.zcp-card-details { border: 0; border-top: 1px solid #e1eaf0; border-radius: 0; }
.zcp-card-details > summary { padding: .6rem .1rem; font-size: .83rem; }
.zcp-card-details > :not(summary) { margin: .15rem 0 .75rem; }
.zcp-fact { padding: .45rem 0; border-top: 1px solid #edf1f4; font-size: .81rem; }
.zcp-fact dt { font-weight: 700; color: #36586a; }
.zcp-fact dd { margin: .15rem 0 0; color: #425c6b; }
.zcp-quick-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.zcp-quick-facts .zcp-fact { padding: .35rem .4rem; border: 0; border-radius: .35rem; background: #eef4f7; font-size: .72rem; }
.zcp-concept-grid, .zcp-children { display: grid; gap: 1rem; }
.zcp-concept { padding-top: .6rem; border-top: 1px solid #dae6eb; }
.zcp-concept > p { margin-top: .35rem; }
.zcp-child { overflow: hidden; padding: .7rem; border: 1px solid #dbe6eb; border-radius: .5rem; }
.zcp-child-photo { position: relative; width: calc(100% + 1.4rem); aspect-ratio: 4 / 3; margin: -.7rem -.7rem .7rem; background: #eef4f7; }
.zcp-child-photo :is(.v2-snow-media__image, .v2-snow-media__video, .v2-snow-media-placeholder) { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.zcp-child-photo .v2-snow-media__caption { position: absolute; inset: auto 0 0; padding: .3rem .45rem; color: #173f5c; background: rgb(255 255 255 / 92%); font-size: .62rem; line-height: 1.35; }
.zcp-child h5 { font-size: .92rem; color: #244d64; }
.zcp-child > .zcp-link { margin-top: .55rem; }
.zcp-empty { padding: 1.2rem; border: 1px dashed #9ebbc9; border-radius: .7rem; color: #385b70; background: #f6fafc; }
.zcp-empty p { margin-block: .5rem 1rem; }
.zcp-final-notice { padding: 1rem; border-radius: .7rem; background: #f1f6f8; color: #496574; font-size: .84rem; }
.zcp-final-notice p { margin-bottom: .6rem; }
@media (max-width: 75rem) { .zcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) {
  .zcp-grid { grid-template-columns: minmax(0, 1fr); }
  .zcp-filter-row { grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
  .zcp-filter-row > .zcp-field:first-child { grid-column: 1 / -1; }
  .zcp-filter-row > button { align-self: end; padding-inline: .65rem; }
  .zcp-filter-panel { padding: .8rem; }
  .zcp-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .zcp-guide > :first-child, .zcp-guide > [open] { grid-column: 1 / -1; }
  .zcp-fold > summary { padding: .6rem .75rem; font-size: .84rem; }
  .zcp-card { padding: .8rem; }
  .zcp-card-head { grid-template-columns: 88px minmax(0, 1fr); gap: .65rem; }
  .zcp-card-title h3 { font-size: 1.02rem; }
  .zcp-title-actions .zcp-link { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .zcp-root * { scroll-behavior: auto; } }

/* Rental, food, onsen and sightseeing use the same large-photo card proportions
   as the approved MNO split pages. */
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-root {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-grid { align-items: stretch; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: .55rem;
  padding: 0;
  border-color: #d5e0e4;
  border-radius: .75rem;
  background: #fff;
  box-shadow: none;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-card-head { display: contents; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 0;
  background: #eef4f7;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-photo .v2-snow-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-photo .v2-snow-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 1rem;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-photo .v2-snow-media-placeholder__mark { display: grid; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-photo .v2-snow-media__caption {
  position: absolute;
  inset: auto 0 0;
  padding: .35rem .55rem;
  color: #173f5c;
  background: rgb(255 255 255 / 92%);
  font-size: .65rem;
  line-height: 1.4;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-card-title { padding: .45rem 1rem 0; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-card-title h3 {
  color: #183e56;
  font-size: 1rem;
  line-height: 1.45;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-meta { color: #577182; font-size: .7rem; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) :is(
  .zcp-summary,
  .zcp-location,
  .zcp-pills,
  .zcp-warning,
  .zcp-quick-facts,
  .zcp-card > .zcp-link,
  .zcp-card-details
) { margin-inline: 1rem; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) :is(.zcp-summary, .zcp-location) { color: #617887; font-size: .82rem; }
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-pills li {
  border-radius: .35rem;
  color: #416678;
  background: #eef4f4;
  font-size: .7rem;
}
html.v2-zao-preview:is(
  [data-zao-preview-page="rental"],
  [data-zao-preview-page="food"],
  [data-zao-preview-page="onsen"],
  [data-zao-preview-page="sightseeing"]
) .zcp-card-details {
  margin-top: auto;
  margin-bottom: .35rem;
}

@media (max-width: 47.5rem) {
  html.v2-zao-preview:is(
    [data-zao-preview-page="rental"],
    [data-zao-preview-page="food"],
    [data-zao-preview-page="onsen"],
    [data-zao-preview-page="sightseeing"]
  ) .zcp-card {
    display: flex;
  }
  html.v2-zao-preview:is(
    [data-zao-preview-page="rental"],
    [data-zao-preview-page="food"],
    [data-zao-preview-page="onsen"],
    [data-zao-preview-page="sightseeing"]
  ) .zcp-photo {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  html.v2-zao-preview:is(
    [data-zao-preview-page="rental"],
    [data-zao-preview-page="food"],
    [data-zao-preview-page="onsen"],
    [data-zao-preview-page="sightseeing"]
  ) .zcp-card-title { padding: .3rem .85rem 0; }
  html.v2-zao-preview:is(
    [data-zao-preview-page="rental"],
    [data-zao-preview-page="food"],
    [data-zao-preview-page="onsen"],
    [data-zao-preview-page="sightseeing"]
  ) :is(
    .zcp-summary,
    .zcp-location,
    .zcp-pills,
    .zcp-warning,
    .zcp-quick-facts,
    .zcp-card > .zcp-link,
    .zcp-card-details
  ) { margin-inline: .85rem; }
}

@media (max-width: 24rem) {
  html.v2-zao-preview:is(
    [data-zao-preview-page="rental"],
    [data-zao-preview-page="food"],
    [data-zao-preview-page="onsen"],
    [data-zao-preview-page="sightseeing"]
  ) .zcp-card-title { padding-inline: .8rem; }
  html.v2-zao-preview:is(
    [data-zao-preview-page="rental"],
    [data-zao-preview-page="food"],
    [data-zao-preview-page="onsen"],
    [data-zao-preview-page="sightseeing"]
  ) :is(
    .zcp-summary,
    .zcp-location,
    .zcp-pills,
    .zcp-warning,
    .zcp-quick-facts,
    .zcp-card > .zcp-link,
    .zcp-card-details
  ) { margin-inline: .8rem; }
}
