/* ==========================================================================
   Wepet v2 — 日系手帳風
   載入順序：bootstrap.min.css（5.3.x）→ 本檔
   所有自訂元件以 wp- 為前綴，避免和 Bootstrap 同名類別衝突。
   ========================================================================== */

:root {
  --wp-bg: #fffdf8;
  --wp-tx: #4d5458;
  --wp-mut: #8b9498;
  --wp-ink: #3f464a;
  --wp-line: #d9d2c0;

  --wp-blush: #f7dcdc;
  --wp-sage: #d3e6d4;
  --wp-sky: #d3e6f3;
  --wp-butter: #fcf0c6;
  --wp-lilac: #e6dff3;
  --wp-coral: #fbd8cd;

  --wp-blush-d: #c98686;
  --wp-sage-d: #5d7a5f;
  --wp-sky-d: #4f7d99;
  --wp-butter-d: #8d7a2d;
  --wp-lilac-d: #7a6aa8;
  --wp-coral-d: #b26a56;

  --wp-shadow: 0 10px 22px rgba(120, 110, 80, .14);
  --wp-font: 'LXGW WenKai TC', 'Noto Sans TC', sans-serif;
  --wp-font-ui: 'Noto Sans TC', sans-serif;
}

/* ---- Bootstrap 變數覆蓋 ---------------------------------------------- */
.v2 {
  --bs-body-bg: var(--wp-bg);
  --bs-body-color: var(--wp-tx);
  --bs-body-font-family: var(--wp-font);
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.85;
  --bs-link-color-rgb: 63, 70, 74;
  --bs-link-hover-color-rgb: 63, 70, 74;
  --bs-border-radius: 0;
  --bs-gutter-x: 1.75rem;
  background-image: radial-gradient(#e7e1d3 1px, transparent 1.2px);
  background-size: 22px 22px;
  overflow-x: hidden;
}
.v2 a { color: inherit; text-decoration: none; }
.v2 .container { max-width: 1160px; }
.v2 img { max-width: 100%; }
html { scroll-behavior: smooth; }

.wp-ui { font-family: var(--wp-font-ui); }
.wp-ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }

/* ---- 頂部和紙色帶 ---------------------------------------------------- */
.wp-bars { display: flex; height: 8px; }
.wp-bars i { flex: 1; }
.wp-bars i:nth-child(6n+1) { background: var(--wp-butter); }
.wp-bars i:nth-child(6n+2) { background: var(--wp-sage); }
.wp-bars i:nth-child(6n+3) { background: var(--wp-coral); }
.wp-bars i:nth-child(6n+4) { background: var(--wp-sky); }
.wp-bars i:nth-child(6n+5) { background: var(--wp-lilac); }
.wp-bars i:nth-child(6n)   { background: var(--wp-blush); }
@media (max-width: 767.98px) { .wp-bars i:nth-child(n+7) { display: none; } }

/* ---- 導覽列 ---------------------------------------------------------- */
.wp-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 253, 248, .94); backdrop-filter: blur(6px); border-bottom: 1px dashed var(--wp-line); }
.wp-header .navbar { padding: .5rem 0; }
.wp-header .navbar-brand img { height: 44px; display: block; }
.wp-header .navbar-toggler { border: 1.5px dashed var(--wp-ink); border-radius: 999px; padding: .35rem .8rem; font-family: var(--wp-font-ui); }
.wp-header .navbar-toggler { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border-radius: 50%; }
@media (max-width: 991.98px) { .wp-header .navbar-toggler { display: inline-flex; } }
.wp-burger { position: relative; display: block; width: 20px; height: 14px; }
.wp-burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--wp-ink); transition: transform .2s, opacity .2s, top .2s; }
.wp-burger i:nth-child(1) { top: 0; } .wp-burger i:nth-child(2) { top: 6px; } .wp-burger i:nth-child(3) { top: 12px; }
.navbar-toggler[aria-expanded="true"] .wp-burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .wp-burger i:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .wp-burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.wp-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(79, 125, 153, .25); }
.wp-nav { gap: 6px 8px; align-items: center; }
.wp-nav > li > a.wp-pill,
.wp-nav .dropdown-toggle.wp-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 16px 3px 12px; border-radius: 999px;
  font-size: 15px; letter-spacing: .08em; background: var(--c); color: var(--wp-ink); transition: .2s;
}
.wp-nav > li > a.wp-pill:hover,
.wp-nav .dropdown-toggle.wp-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(120, 110, 80, .15); }
.wp-nav .active > .wp-pill, .wp-nav .wp-pill.active { outline: 1.5px dashed var(--wp-ink); outline-offset: 2px; }
.wp-nav .dropdown-toggle::after { margin-left: .3rem; }
.wp-header .dropdown-menu { border: 1.5px dashed var(--wp-ink); border-radius: 12px; background: #fff; padding: .4rem; box-shadow: var(--wp-shadow); }
.wp-header .dropdown-item { border-radius: 8px; font-size: 15px; }
/* 手機版：會員中心的子項目直接攤開，不用再多點一層下拉 */
@media (max-width: 991.98px) {
  .wp-nav .nav-item.dropdown { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .wp-nav .dropdown-toggle::after { display: none; }
  .wp-nav .dropdown-toggle.wp-pill { pointer-events: none; }
  .wp-nav .dropdown-menu { display: flex !important; position: static !important; transform: none !important; inset: auto !important; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: .35rem 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .wp-nav .dropdown-menu li { list-style: none; }
  .wp-nav .dropdown-divider { display: none; }
  .wp-nav .dropdown-item { padding: .3rem .8rem; border: 1px dashed var(--wp-line); border-radius: 999px; font-size: 14px; background: #fff; }
  .wp-nav .dropdown-item.active { background: var(--wp-butter); color: var(--wp-ink); }
}
.wp-header .dropdown-item:hover, .wp-header .dropdown-item:focus { background: var(--wp-butter); color: var(--wp-ink); }
@media (max-width: 991.98px) { .wp-nav { padding: .6rem 0 .3rem; } }

/* ---- 按鈕 ------------------------------------------------------------ */
.wp-btn {
  display: inline-block; background: #fff; border: 1.5px dashed var(--wp-ink); color: var(--wp-ink); padding: 7px 24px;
  border-radius: 999px; font-size: 15px; letter-spacing: .1em; transition: .2s; cursor: pointer; line-height: 1.7;
}
.wp-btn:hover { background: var(--wp-ink); color: #fff; border-style: solid; }
.wp-btn.is-pink  { background: var(--wp-blush); border-color: var(--wp-blush-d); }
.wp-btn.is-pink:hover  { background: var(--wp-blush-d); color: #fff; }
.wp-btn.is-sage  { background: var(--wp-sage);  border-color: var(--wp-sage-d); }
.wp-btn.is-sage:hover  { background: var(--wp-sage-d); color: #fff; }
.wp-btn.is-sky   { background: var(--wp-sky);   border-color: var(--wp-sky-d); }
.wp-btn.is-sky:hover   { background: var(--wp-sky-d); color: #fff; }
.wp-btn.is-coralfill { background: var(--wp-coral); border-color: var(--wp-coral-d); }
.wp-btn.is-coralfill:hover { background: var(--wp-coral-d); color: #fff; }
.wp-btn.is-lilac { background: var(--wp-lilac); border-color: var(--wp-lilac-d); }
.wp-btn.is-lilac:hover { background: var(--wp-lilac-d); color: #fff; }
.wp-btn.is-coral { background: #fff; border-color: var(--wp-coral-d); color: var(--wp-coral-d); }
.wp-btn.is-coral:hover { background: var(--wp-coral-d); color: #fff; }

/* ---- 和紙膠帶 -------------------------------------------------------- */
.wp-tape {
  position: absolute; width: 104px; height: 30px; background: var(--c, var(--wp-butter)); opacity: .88; z-index: 3;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 9px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08); clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%, 4% 50%); pointer-events: none;
}
.wp-tape.is-top { top: -14px; left: 50%; margin-left: -52px; }

/* ---- 站內公告（$global_alert 輸出的 .alert 在此改成便利貼樣式） ---------- */
.wp-alertwrap .alert {
  margin: 18px 0 0; border: 0; border-radius: 10px; padding: 8px 18px; font-size: 14px; line-height: 1.8;
  font-family: var(--wp-font-ui); background: var(--wp-butter); color: var(--wp-ink); transform: rotate(-.2deg);
}
.wp-alertwrap .alert-dark    { background: #ece9e1; }
.wp-alertwrap .alert-info    { background: var(--wp-sky); }
.wp-alertwrap .alert-success { background: var(--wp-sage); }
.wp-alertwrap .alert-danger  { background: var(--wp-coral); }
.wp-alertwrap .alert-warning { background: var(--wp-butter); }
.wp-alertwrap .alert-purple  { background: var(--wp-lilac); }
.wp-alertwrap section, .wp-alertwrap .container { padding-top: 0; padding-bottom: 0; }

/* ---- 1. Banner ------------------------------------------------------- */
.wp-hero { padding-top: 30px; }
.wp-note { background: #fff; padding: 14px 14px 12px; box-shadow: 0 14px 30px rgba(120, 110, 80, .18); position: relative; transform: rotate(-.4deg); }
.wp-note .carousel-item img { display: block; width: 100%; aspect-ratio: 1920 / 450; object-fit: cover; }
.wp-note .carousel-indicators { margin-bottom: .4rem; }
.wp-note .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #fff; opacity: .65; margin: 0 4px; }
.wp-note .carousel-indicators .active { opacity: 1; }
.wp-note .wp-cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding: 10px 6px 0; font-size: 15px; }
.wp-note .wp-cap span { font-size: 12px; color: var(--wp-mut); }
.wp-note .wp-tape.t1 { left: -26px; top: -10px; transform: rotate(-34deg); }
.wp-note .wp-tape.t2 { --c: var(--wp-sky); right: -26px; top: -10px; transform: rotate(34deg); }
/* 手機：原圖是 1920×450 的寬幅，直接縮放只剩約 90px 高。改成較高的框、用 cover 裁切，
   並依每張圖的主體位置（貓臉／狗臉／貓狗交疊處）設定裁切中心。 */
@media (max-width: 767.98px) {
  .wp-note .carousel-item img { aspect-ratio: 2 / 1; }
  .wp-note .carousel-item img.wp-bn-cat { object-position: 43% 50%; }
  .wp-note .carousel-item img.wp-bn-dog { object-position: 40% 50%; }
  .wp-note .carousel-item img.wp-bn-3   { object-position: 45% 50%; }
}
@media (max-width: 575.98px) {
  .wp-note { padding: 8px 8px 8px; }
  .wp-note .carousel-item img { aspect-ratio: 16 / 10; }
  .wp-note .wp-tape { display: none; }
  .wp-note .wp-cap span { display: none; }
}

/* ---- 2. 三張便利貼 --------------------------------------------------- */
.wp-intro { margin-top: 38px; }
.wp-stk { display: block; height: 100%; padding: 30px 24px 26px; text-align: center; position: relative; box-shadow: var(--wp-shadow); transition: transform .25s; background: var(--c); }
.wp-intro > div:nth-child(1) .wp-stk { transform: rotate(-1.3deg); }
.wp-intro > div:nth-child(2) .wp-stk { transform: rotate(.8deg); }
.wp-intro > div:nth-child(3) .wp-stk { transform: rotate(-.6deg); }
.wp-stk:hover { transform: rotate(0) translateY(-5px) !important; }
.wp-stk::before { content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .18), inset -3px -3px 0 rgba(0, 0, 0, .08); }
.wp-stk b { display: block; font-weight: 400; font-size: 20px; color: var(--wp-ink); letter-spacing: .06em; margin-bottom: 4px; }
.wp-stk p { margin: 0; font-size: 15px; color: #6b7378; }
.wp-cta1 { text-align: center; margin-top: 34px; }
@media (max-width: 767.98px) { .wp-intro .wp-stk { transform: none !important; } }

/* ---- 3. 計數 --------------------------------------------------------- */
.wp-cnt { margin-top: 72px; }
.wp-cn { background: #fff; border: 1.5px dashed #cfc8b6; border-radius: 22px; padding: 22px 10px 18px; text-align: center; height: 100%; }
.wp-cn .wp-ic { width: 34px; height: 34px; display: block; margin: 0 auto 4px; }
.wp-cn b { display: block; font-weight: 400; font-size: 38px; line-height: 1.2; color: var(--wp-ink); }
.wp-cn span { font-size: 14px; color: var(--wp-mut); }
.wp-cnt > div:nth-child(1) .wp-ic { color: var(--wp-sky-d); }
.wp-cnt > div:nth-child(2) .wp-ic { color: var(--wp-sage-d); }
.wp-cnt > div:nth-child(3) .wp-ic { color: var(--wp-blush-d); }
.wp-cnt > div:nth-child(4) .wp-ic { color: var(--wp-butter-d); }

/* ---- 區塊標題 -------------------------------------------------------- */
.wp-sec { padding-top: 96px; }
.wp-sh { text-align: center; margin-bottom: 44px; }
.wp-sh h2 {
  font-weight: 400; font-size: 32px; letter-spacing: .2em; margin: 0; display: inline-block; color: var(--wp-ink);
  background: linear-gradient(transparent 60%, var(--c, var(--wp-sky)) 60% 92%, transparent 92%); padding: 0 10px;
}
.wp-sh p { margin: 8px 0 0; color: var(--wp-mut); }
@media (max-width: 767.98px) { .wp-sec { padding-top: 64px; } .wp-sh { margin-bottom: 30px; } .wp-sh h2 { font-size: 26px; letter-spacing: .12em; } .wp-cnt { margin-top: 48px; } }

/* ---- 4. 等待中的牠（拍立得輪播） --------------------------------------- */
.wp-railw { position: relative; }
.wp-rail { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 10px 36px; scrollbar-width: none; }
.wp-rail::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .wp-rail { cursor: grab; }
  .wp-rail.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .wp-rail.is-drag .wp-pl { pointer-events: none; }
}
.wp-pl { flex: 0 0 232px; scroll-snap-align: start; background: #fff; padding: 12px 12px 16px; box-shadow: var(--wp-shadow); position: relative; transition: transform .3s; cursor: pointer; border: 0; text-align: left; font: inherit; color: inherit; }
.wp-pl:nth-child(4n+1) { transform: rotate(-1.3deg); }
.wp-pl:nth-child(4n+2) { transform: rotate(1deg); }
.wp-pl:nth-child(4n+3) { transform: rotate(-.6deg); }
.wp-pl:nth-child(4n+4) { transform: rotate(1.5deg); }
.wp-pl:hover, .wp-pl:focus-visible { transform: rotate(0) translateY(-6px); outline: none; }
.wp-pl .wp-ph { aspect-ratio: 1; position: relative; overflow: hidden; background: #efe9dc; }
.wp-pl .wp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-pl .wp-ph::after { content: "放大查看"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(63, 70, 74, .38); color: #fff; font-family: var(--wp-font-ui); letter-spacing: .2em; font-size: 14px; opacity: 0; transition: .25s; }
.wp-pl:hover .wp-ph::after, .wp-pl:focus-visible .wp-ph::after { opacity: 1; }
.wp-pl:nth-child(4n+2) .wp-tape { --c: var(--wp-blush); }
.wp-pl:nth-child(4n+3) .wp-tape { --c: var(--wp-sky); }
.wp-pl:nth-child(4n+4) .wp-tape { --c: var(--wp-sage); }
.wp-pl .wp-bd { display: inline-block; margin: 12px 2px 0; padding: 0 12px; border-radius: 999px; font-size: 13px; background: var(--wp-sage); color: var(--wp-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-pl.c1 .wp-bd { background: var(--wp-blush); }
.wp-pl.c2 .wp-bd { background: var(--wp-sky); }
.wp-pl.c3 .wp-bd { background: var(--wp-butter); }
.wp-pl.c4 .wp-bd { background: var(--wp-lilac); }
.wp-pl small { display: block; margin: 4px 2px 0; font-size: 13px; color: var(--wp-mut); }
.wp-arr { position: absolute; top: 42%; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px dashed var(--wp-ink); cursor: pointer; font-size: 18px; z-index: 5; box-shadow: 0 4px 10px rgba(120, 110, 80, .2); color: var(--wp-ink); }
.wp-arr:hover:not(:disabled) { background: var(--wp-ink); color: #fff; }
.wp-arr:disabled { opacity: .35; cursor: default; }
.wp-arr.l { left: -18px; } .wp-arr.r { right: -18px; }
@media (max-width: 767.98px) { .wp-arr { display: none; } .wp-pl { flex-basis: 200px; } }
.wp-more { text-align: center; margin-top: 12px; }

/* ---- 5. 廣告 --------------------------------------------------------- */
#google_ad { margin-top: 48px; }

/* ---- 6. 三步驟 / 7. 三件事 ------------------------------------------- */
.wp-sp, .wp-tr { background: #fff; padding: 30px 22px 24px; position: relative; box-shadow: var(--wp-shadow); text-align: center; height: 100%; }
.wp-steps > div:nth-child(1) .wp-sp { transform: rotate(-1deg); }
.wp-steps > div:nth-child(3) .wp-sp { transform: rotate(1deg); }
.wp-sp i { font-style: normal; display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--c); align-items: center; justify-content: center; font-size: 20px; margin-bottom: 6px; color: var(--wp-ink); }
.wp-sp h3 { margin: 0 0 2px; font-weight: 400; font-size: 21px; letter-spacing: .1em; }
.wp-sp p { margin: 0; font-size: 14px; color: var(--wp-mut); }
@media (max-width: 767.98px) { .wp-steps .wp-sp, .wp-tri .wp-tr { transform: none !important; } }

.wp-band { margin-top: 100px; background: var(--wp-lilac); padding: 80px 0 76px; position: relative; }
.wp-band::before, .wp-band::after, .wp-end::before { content: ""; position: absolute; left: 0; right: 0; height: 20px; background: radial-gradient(circle 10px at 10px 10px, var(--wp-bg) 98%, transparent) 0 0 / 20px 20px repeat-x; }
.wp-band::before { top: -10px; }
.wp-band::after { bottom: -10px; transform: scaleY(-1); }
.wp-band .wp-sh h2 { --c: #fff; }
.wp-tr { text-align: left; padding: 30px 24px 26px; }
.wp-tri > div:nth-child(1) .wp-tr { transform: rotate(-1deg); }
.wp-tri > div:nth-child(2) .wp-tr { transform: rotate(.7deg); }
.wp-tri > div:nth-child(3) .wp-tr { transform: rotate(-.5deg); }
.wp-tr .wp-ic { width: 34px; height: 34px; color: var(--c); display: block; margin-bottom: 6px; }
.wp-tr h3 { margin: 0 0 4px; font-weight: 400; font-size: 22px; letter-spacing: .1em; }
.wp-tr p { margin: 0; font-size: 15px; color: #6b7378; }
.wp-band .wp-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 42px; }

/* ---- 8. 走失協尋 ----------------------------------------------------- */
.wp-lab { display: inline-block; padding: 0 16px; border-radius: 999px; font-size: 13px; letter-spacing: .14em; background: var(--c); transform: rotate(-2deg); font-family: var(--wp-font-ui); }
.wp-split h3, .wp-story h3 { font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.4; margin: 12px 0 10px; color: var(--wp-ink); }
.wp-split h3 u { text-decoration: none; background: linear-gradient(transparent 62%, var(--wp-coral) 62% 90%, transparent 90%); }
.wp-split p, .wp-story p { margin: 0 0 10px; color: #6b7378; }
.wp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-split .wp-acts { margin-top: 18px; }
.wp-pic { background: #fff; padding: 14px 14px 18px; box-shadow: 0 14px 28px rgba(120, 110, 80, .18); position: relative; transform: rotate(1.4deg); }
.wp-pic img { display: block; width: 100%; aspect-ratio: 1408 / 768; object-fit: cover; }
.wp-pic .wp-tape.l { left: -22px; top: -10px; transform: rotate(-34deg); --c: var(--wp-coral); }
.wp-pic .wp-tape.r { right: -22px; top: -10px; transform: rotate(34deg); --c: var(--wp-butter); }
.wp-pic .wp-cap { padding: 10px 4px 0; font-size: 15px; color: var(--wp-mut); text-align: center; }
@media (max-width: 767.98px) { .wp-pic { transform: none; } }

/* ---- 9. 為什麼有 Wepet ----------------------------------------------- */
.wp-logo-note { background: #fff; padding: 34px 24px 22px; text-align: center; box-shadow: 0 14px 28px rgba(120, 110, 80, .16); transform: rotate(-1.4deg); position: relative; max-width: 360px; margin: 0 auto; }
.wp-logo-note img { max-width: 230px; width: 100%; }
.wp-logo-note p { margin: 14px 0 0; color: var(--wp-mut); font-size: 15px; }
.wp-story p { font-size: 16px; margin-bottom: 12px; }

/* ---- 10. 底部 CTA ---------------------------------------------------- */
.wp-end { margin-top: 100px; padding: 72px 0 64px; text-align: center; background: var(--wp-butter); position: relative; }
.wp-end::before { top: -10px; }
.wp-end h2 { font-weight: 400; font-size: clamp(28px, 4vw, 42px); letter-spacing: .14em; margin: 0 0 8px; color: var(--wp-ink); }
.wp-end p { margin: 0 0 26px; color: #8d8660; }
.wp-end .wp-acts { gap: 14px; justify-content: center; }

/* ---- Footer ---------------------------------------------------------- */
.wp-footer { padding: 0 0 40px; text-align: center; font-size: 13px; color: var(--wp-mut); line-height: 2; }
.wp-footer .wp-bars { margin-bottom: 26px; }
.wp-footer a { border-bottom: 1px dashed var(--wp-mut); }

/* ---- 浮動：領養黑名單、回頂端 ------------------------------------------ */
.wp-black { position: fixed; right: 0; top: 46%; z-index: 1020; background: var(--wp-coral); padding: 10px 10px 10px 14px; border-radius: 12px 0 0 12px; font-size: 14px; line-height: 1.35; text-align: center; box-shadow: -3px 4px 10px rgba(120, 110, 80, .22); transform: rotate(-2deg); transform-origin: right center; transition: .2s; font-family: var(--wp-font-ui); }
.wp-black:hover { transform: rotate(0) translateX(-4px); }
.wp-top { position: fixed; right: 18px; bottom: 18px; z-index: 1020; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px dashed var(--wp-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(120, 110, 80, .2); }
.wp-top:hover { background: var(--wp-ink); color: #fff; }

/* ---- Modal（放大查看／聯絡我們／領養黑名單） ---------------------------- */
.v2 .modal-content { border: 0; border-radius: 0; background: #fff; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); font-family: var(--wp-font); }
.v2 .modal-header { border-bottom: 1px dashed var(--wp-line); }
.v2 .modal-footer { border-top: 1px dashed var(--wp-line); }
.v2 .modal-title { font-weight: 400; letter-spacing: .1em; }
.v2 .modal-backdrop.show { opacity: .5; }
.wp-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-content: start; margin: 0; font-size: 15px; }
.wp-dl dt { color: var(--wp-mut); font-size: 13px; padding-top: 2px; font-weight: 300; }
.wp-dl dd { margin: 0; word-break: break-all; }
.wp-pet-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #efe9dc; }

/* 舊版 ajax 片段（BS4 標記）在 BS5 下的相容 */
.v2 .modal-content .form-group { margin-bottom: 1rem; }
.v2 .modal-content .font-size-16 { font-size: 16px; }
.v2 .modal-content .font-weight-bold { font-weight: 500; }
.v2 .modal-content .btn-primary { --bs-btn-bg: var(--wp-sky); --bs-btn-border-color: var(--wp-sky-d); --bs-btn-color: var(--wp-ink); --bs-btn-hover-bg: var(--wp-sky-d); --bs-btn-hover-border-color: var(--wp-sky-d); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--wp-sky-d); --bs-btn-active-color: #fff; border-style: dashed; border-radius: 999px; }
.v2 .modal-content .btn-secondary { --bs-btn-bg: #fff; --bs-btn-border-color: var(--wp-ink); --bs-btn-color: var(--wp-ink); --bs-btn-hover-bg: var(--wp-ink); --bs-btn-hover-color: #fff; border-style: dashed; border-radius: 999px; }
.v2 .modal-content .form-control, .v2 .modal-content .form-select { border-radius: 10px; border: 1.5px solid #d9d2c0; }
.v2 .modal-content .form-control:focus, .v2 .modal-content .form-select:focus { border-color: var(--wp-sky-d); box-shadow: 0 0 0 .2rem rgba(79, 125, 153, .18); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wp-pl, .wp-stk, .wp-btn, .wp-black { transition: none; }
}

/* ==========================================================================
   公立領養（opendata）
   ========================================================================== */
.wp-page-hero { padding: 56px 0 34px; text-align: center; }
.wp-page-hero h1 { font-weight: 400; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.4; margin: 14px 0 8px; color: var(--wp-ink); letter-spacing: .06em; }
.wp-page-hero h1 u { text-decoration: none; background: linear-gradient(transparent 62%, var(--wp-sky) 62% 90%, transparent 90%); }
.wp-page-hero p { color: var(--wp-mut); margin: 0 0 22px; }

.wp-mut { color: var(--wp-mut); }
.wp-info { background: #fff; border: 1.5px dashed #cfc8b6; border-radius: 20px; padding: 18px 12px; margin: 0; }
.wp-info p { margin: 0 0 4px; font-size: 15px; color: #6b7378; }
.wp-info p.wp-mut { font-size: 13px; color: var(--wp-mut); }
.wp-mini { background: var(--wp-butter); border-radius: 14px; padding: 8px 4px; }
.wp-mini b { display: block; font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--wp-ink); }
.wp-mini span { font-size: 12px; color: #7d7556; }
.wp-info .col-4:nth-child(2) .wp-mini { background: var(--wp-sage); }
.wp-info .col-4:nth-child(3) .wp-mini { background: var(--wp-blush); }

/* 篩選列：捲動時黏在導覽列下方（--wp-header-h 由 v2.js 量測） */
.wp-filter-wrap { position: sticky; top: var(--wp-header-h, 64px); z-index: 1020; margin-top: 26px; padding: 10px 0; background: rgba(255, 253, 248, .96); backdrop-filter: blur(6px); border-bottom: 1px dashed var(--wp-line); }
.wp-filter select, .wp-pg-jump select {
  width: 100%; height: 40px; padding: 0 2.2rem 0 14px; border: 1.5px solid #d9d2c0; border-radius: 999px; background-color: #fff; color: var(--wp-ink);
  font: inherit; font-size: 15px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233f464a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.wp-filter select:focus, .wp-pg-jump select:focus { outline: none; border-color: var(--wp-sky-d); box-shadow: 0 0 0 .2rem rgba(79, 125, 153, .18); }
.wp-filter .wp-btn { height: 40px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }

/* 卡片 */
.wp-list { padding: 44px 0 0; }
.wp-card { background: #fff; padding: 10px 10px 14px; box-shadow: var(--wp-shadow); position: relative; height: 100%; display: flex; flex-direction: column; transition: transform .3s; }
.col-6:nth-child(4n+1) .wp-card { transform: rotate(-.9deg); }
.col-6:nth-child(4n+2) .wp-card { transform: rotate(.7deg); }
.col-6:nth-child(4n+3) .wp-card { transform: rotate(-.5deg); }
.col-6:nth-child(4n+4) .wp-card { transform: rotate(1deg); }
.wp-card:hover { transform: rotate(0) translateY(-5px) !important; }
.wp-card.c1 .wp-tape { --c: var(--wp-blush); }
.wp-card.c2 .wp-tape { --c: var(--wp-sky); }
.wp-card.c3 .wp-tape { --c: var(--wp-sage); }
.wp-card-ph { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: #efe9dc; overflow: hidden; cursor: zoom-in; }
.wp-card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-card-ph::after { content: "放大查看"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(63, 70, 74, .38); color: #fff; font-family: var(--wp-font-ui); letter-spacing: .2em; font-size: 14px; opacity: 0; transition: .25s; }
.wp-card-ph:hover::after, .wp-card-ph:focus-visible::after { opacity: 1; }
.wp-kind { position: absolute; left: 8px; top: 8px; background: var(--wp-sky); color: var(--wp-ink); border-radius: 999px; font-size: 12px; padding: 0 12px; font-family: var(--wp-font-ui); z-index: 1; }
.wp-card.c1 .wp-kind { background: var(--wp-blush); }
.wp-card.c2 .wp-kind { background: var(--wp-butter); }
.wp-card.c3 .wp-kind { background: var(--wp-sage); }
.wp-card-bd { padding: 12px 4px 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wp-card-bd h3 { margin: 0 0 4px; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--wp-ink); }
.wp-card-bd h3 small { font-size: 12px; color: var(--wp-mut); margin-left: 8px; }
.wp-line { margin: 0; font-size: 13px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-remark { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: #6b7378; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wp-tel { display: block; margin-top: auto; padding: 4px 8px; text-align: center; font-size: 13px; border: 1.5px dashed var(--wp-sky-d); border-radius: 999px; color: var(--wp-sky-d); background: #fff; transition: .2s; font-family: var(--wp-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-remark + .wp-tel, .wp-line + .wp-tel { margin-top: 10px; }
.wp-card-bd .wp-tel { margin-top: auto; }
a.wp-tel:hover { background: var(--wp-sky-d); color: #fff; }
.wp-tel.is-plain { border-color: #d9d2c0; color: var(--wp-mut); cursor: default; }
@media (max-width: 767.98px) { .wp-card { transform: none !important; } }

.wp-empty { text-align: center; padding: 60px 0 20px; color: var(--wp-mut); }
.wp-empty p { margin-bottom: 16px; }

/* 分頁（Laravel 預設輸出 Bootstrap 的 .pagination） */
.wp-pager { margin-top: 40px; display: flex; justify-content: center; }
.wp-pager .pagination { gap: 6px; flex-wrap: wrap; justify-content: center; margin: 0; }
.wp-pager .page-link { border: 1.5px dashed var(--wp-ink); border-radius: 999px !important; color: var(--wp-ink); background: #fff; min-width: 40px; text-align: center; padding: 6px 12px; font-family: var(--wp-font-ui); }
.wp-pager .page-item:not(.disabled):not(.active) .page-link:hover { background: var(--wp-butter); }
.wp-pager .page-item.active .page-link { background: var(--wp-ink); border-style: solid; color: #fff; }
.wp-pager .page-item.disabled .page-link { opacity: .4; border-color: #cfc8b6; background: #fff; }
.wp-pager .page-link:focus { box-shadow: 0 0 0 .2rem rgba(79, 125, 153, .25); }

/* 手機分頁：上一頁｜第 N / 總頁數 頁（下拉可跳頁）｜下一頁 */
.wp-pager { flex-direction: column; align-items: center; }
.wp-pager-mini { width: 100%; max-width: 360px; }
.wp-pg-row { display: flex; align-items: center; gap: 10px; }
.wp-pg-btn { flex: 0 0 48px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--wp-ink); border-radius: 999px; background: #fff; font-size: 22px; line-height: 1; color: var(--wp-ink); }
a.wp-pg-btn:hover, a.wp-pg-btn:active { background: var(--wp-ink); color: #fff; border-style: solid; }
.wp-pg-btn.is-off { opacity: .35; border-color: #cfc8b6; }
.wp-pg-count { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--wp-mut); font-family: var(--wp-font-ui); }
.wp-pg-jump { flex: 1; min-width: 0; margin: 0; display: flex; }
.wp-pg-jump label { flex: 1; margin: 0; }
.wp-pg-jump select { height: 44px; text-align: center; text-align-last: center; font-weight: 400; }
.wp-pg-jump noscript button, .wp-pg-jump button { border: 0; border-radius: 999px; background: var(--wp-ink); color: #fff; padding: 0 14px; margin-left: 6px; font: inherit; font-size: 13px; }

/* ==========================================================================
   寵物領養／走失協尋等列表頁共用（整張卡片是連結的版本）
   ========================================================================== */
.wp-card.is-link { color: inherit; }
.wp-card.is-link .wp-card-ph { cursor: pointer; }
.wp-card.is-link .wp-card-ph::after { content: "看看牠"; }
.wp-result { margin: 8px 4px 0; font-size: 13px; color: var(--wp-mut); font-family: var(--wp-font-ui); }
.wp-result b { font-weight: 500; color: var(--wp-ink); }

/* ==========================================================================
   詳情頁（領養資訊／走失協尋）
   ========================================================================== */
.wp-crumb { border-bottom: 1px dashed var(--wp-line); padding: 10px 0; font-size: 13px; color: var(--wp-mut); font-family: var(--wp-font-ui); }
.wp-crumb span { margin: 0 8px; }
.wp-crumb a:hover { color: var(--wp-ink); text-decoration: underline; }
.wp-crumb b { font-weight: 400; color: var(--wp-ink); }
.wp-detail { padding: 36px 0 0; }

/* 相簿 */
.wp-gal-main { position: relative; background: #fff; padding: 12px; box-shadow: 0 14px 28px rgba(120, 110, 80, .18); transform: rotate(-.5deg); }
.wp-gal-big { display: block; width: 100%; padding: 0; border: 0; background: #efe9dc; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.wp-gal-big img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wp-gal-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wp-gal-thumb { width: 72px; height: 72px; padding: 4px; background: #fff; border: 2px dashed transparent; box-shadow: var(--wp-shadow); cursor: pointer; transition: transform .2s; }
.wp-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-gal-thumb:hover { transform: translateY(-3px); }
.wp-gal-thumb.is-on { border-color: var(--wp-ink); }
.wp-photo-big { max-width: 100%; max-height: 78vh; }

.wp-remark-box { margin-top: 32px; background: #fff; border: 1.5px dashed #cfc8b6; border-radius: 18px; padding: 20px 24px; }
.wp-remark-box h2 { margin: 0 0 8px; font-weight: 400; font-size: 18px; letter-spacing: .1em; display: inline-block; background: linear-gradient(transparent 60%, var(--wp-butter) 60% 92%, transparent 92%); padding: 0 6px; }
.wp-remark-body { font-size: 15px; line-height: 1.9; color: #5f676b; word-break: break-word; }

/* 資訊 */
.wp-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 6px; }
.wp-name-row h1 { margin: 0; font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: .06em; color: var(--wp-ink); word-break: break-word; }
.wp-where { margin: 0 0 18px; font-size: 14px; color: var(--wp-mut); }
.wp-where-addr { margin-left: 1.4em; }
.wp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.wp-facts > div { background: var(--wp-butter); border-radius: 12px; padding: 6px 14px; }
.wp-facts > div:nth-child(6n+2) { background: var(--wp-sage); }
.wp-facts > div:nth-child(6n+3) { background: var(--wp-sky); }
.wp-facts > div:nth-child(6n+4) { background: var(--wp-blush); }
.wp-facts > div:nth-child(6n+5) { background: var(--wp-lilac); }
.wp-facts > div:nth-child(6n)   { background: var(--wp-coral); }
.wp-facts dt { font-size: 12px; font-weight: 300; color: #7d7556; }
.wp-facts dd { margin: 0; font-size: 16px; word-break: break-word; }
.wp-conds { list-style: none; margin: 0 0 6px; padding: 0; }
.wp-conds li { display: flex; align-items: center; padding: 3px 0; font-size: 15px; }
.wp-conds i { font-style: normal; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--wp-sage); color: var(--wp-sage-d); font-size: 12px; }
.wp-conds li.is-no { color: var(--wp-mut); }
.wp-conds li.is-no i { background: var(--wp-blush); color: var(--wp-blush-d); }
.wp-date { margin: 12px 0 16px; font-size: 13px; }
.wp-share { margin-top: 26px; }
.wp-share p { margin: 0 0 8px; font-size: 13px; }

/* service 產生的 Bootstrap 4 標記（聯絡資訊、審核提示）在 v2 的樣式；屬性由 v2.js 轉成 BS5 */
.wp-legacy .container { max-width: none; padding-left: 0; padding-right: 0; margin: 0; }
.wp-legacy .alert { border: 0; border-radius: 12px; padding: 10px 16px; font-size: 14px; font-family: var(--wp-font-ui); color: var(--wp-ink); margin-bottom: 1.5rem; }
.wp-legacy .alert-success { background: var(--wp-sage); }
.wp-legacy .alert-danger { background: var(--wp-coral); }
.wp-legacy .alert-warning { background: var(--wp-butter); }
.wp-legacy .alert-info { background: var(--wp-sky); }
.wp-legacy .alert a { text-decoration: underline; }
.wp-contact { margin-top: 20px; }
.wp-contact .card { border: 0; border-radius: 0; background: #fff; box-shadow: var(--wp-shadow); padding: 18px 20px !important; transform: rotate(.4deg); font-size: 15px; line-height: 1.9; }
.wp-contact .card.bg-danger { background: var(--wp-coral) !important; }
.wp-contact .text-white { color: var(--wp-ink) !important; }
.wp-contact .text-stone, .wp-contact .text-dark { color: var(--wp-ink) !important; }
.wp-contact .text-danger { color: var(--wp-coral-d) !important; }
.wp-contact .font-size-18 { font-size: 17px; }
.wp-contact .font-weight-bold { font-weight: 400; }
.wp-contact a[href^="tel:"] { border-bottom: 1.5px dashed var(--wp-ink); }
.wp-contact .alert { margin: 12px 0 0; padding: 4px 12px; font-size: 13px; }
.wp-legacy .btn { display: inline-block; background: #fff; border: 1.5px dashed var(--wp-ink); border-radius: 999px; color: var(--wp-ink) !important; padding: 3px 16px; font-size: 13px; line-height: 1.8; font-family: var(--wp-font-ui); }
.wp-legacy .btn-success { background: var(--wp-sage); border-color: var(--wp-sage-d); }
.wp-legacy .btn-danger { border-color: var(--wp-coral-d); color: var(--wp-coral-d) !important; }
.wp-legacy .btn:hover { background: var(--wp-ink); color: #fff !important; border-style: solid; }
@media (max-width: 991.98px) { .wp-contact .card, .wp-gal-main { transform: none; } }
/* 詳細頁：狀態提示與聯絡資訊卡（Blade 直接渲染，不再依賴 BS4 標記） */
.wp-alert { border-radius: 12px; padding: 10px 16px; font-size: 14px; font-family: var(--wp-font-ui); color: var(--wp-ink); margin-bottom: 1.5rem; }
.wp-alert.is-ok { background: var(--wp-sage); } .wp-alert.is-no { background: var(--wp-coral); } .wp-alert.is-wait { background: var(--wp-butter); }
.wp-alert a { text-decoration: underline; }
.wp-contact-card { background: #fff; box-shadow: var(--wp-shadow); padding: 18px 20px; transform: rotate(.4deg); font-size: 15px; line-height: 1.9; }
.wp-contact-card.is-ask { background: var(--wp-coral); }
.wp-contact-card p { margin: 0 0 .25rem; font-size: 17px; }
.wp-contact-card .wp-contact-fine { margin-top: .75rem; font-size: 13px; line-height: 1.7; }
.wp-contact-card a[href^="tel:"] { color: var(--wp-ink); border-bottom: 1.5px dashed var(--wp-ink); text-decoration: none; }
.wp-contact-card .wp-sms { margin-left: .6rem; color: var(--wp-coral-d); font-size: 13px; }
.wp-contact-note { margin-top: 12px; padding: 4px 12px; border-radius: 12px; background: var(--wp-sky); font-size: 13px; font-family: var(--wp-font-ui); }
@media (max-width: 991.98px) { .wp-contact-card { transform: none; } }


/* 寵物送別（機構資訊卡） */
.wp-org { background: #fff; padding: 22px 22px 20px; box-shadow: var(--wp-shadow); position: relative; height: 100%; transition: transform .3s; }
.wp-org:hover { transform: translateY(-4px); }
.wp-org h3 { margin: 0 0 6px; font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--wp-ink); letter-spacing: .04em; }
.wp-org .wp-svc { margin: 0 0 14px; font-size: 14px; color: #6b7378; }
.wp-org ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.wp-org li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.wp-org li .wp-ic { flex: none; transform: translateY(3px); color: var(--wp-sky-d); }
.wp-org li .wp-addr { color: var(--wp-mut); }
.wp-org a:not(.wp-btn) { border-bottom: 1.5px dashed var(--wp-ink); }
.wp-org a.is-plain { border-bottom: 0; }
.col-lg-4:nth-child(3n+1) .wp-org { transform: rotate(-.7deg); }
.col-lg-4:nth-child(3n+2) .wp-org { transform: rotate(.5deg); }
.col-lg-4:nth-child(3n+3) .wp-org { transform: rotate(-.3deg); }
.col-lg-4 .wp-org:hover { transform: rotate(0) translateY(-4px); }
@media (max-width: 991.98px) { .wp-org { transform: none !important; } }

/* ==========================================================================
   登入／註冊／忘記密碼
   ========================================================================== */
.wp-notice-bar { max-width: 760px; margin: 0 auto 14px; padding: 8px 18px; border-radius: 12px; font-size: 14px; font-family: var(--wp-font-ui); text-align: center; color: var(--wp-ink); }
.wp-notice-bar.is-success { background: var(--wp-sage); }
.wp-notice-bar.is-info { background: var(--wp-sky); }
.wp-notice-bar a { text-decoration: underline; margin-left: 8px; }
.wp-notice-bar strong { font-weight: 500; }
.wp-terms { text-align: center; font-size: 14px; color: var(--wp-mut); margin: 0 0 8px; }
.wp-terms a { border-bottom: 1.5px dashed var(--wp-ink); color: var(--wp-ink); }
.wp-auth-sec { padding: 26px 0 0; }

.wp-auth { position: relative; background: #fff; padding: 34px 28px 26px; box-shadow: 0 14px 28px rgba(120, 110, 80, .16); }
.wp-auth h2 { margin: 0 0 20px; font-weight: 400; font-size: 22px; letter-spacing: .14em; display: inline-block; background: linear-gradient(transparent 60%, var(--c, var(--wp-sky)) 60% 92%, transparent 92%); padding: 0 6px; }
.wp-fld { margin-bottom: 14px; }
.wp-fld .form-control { height: 46px; border: 1.5px solid #d9d2c0; border-radius: 14px; padding: 0 16px; background: #fffdf8; color: var(--wp-ink); font-size: 16px; }
.wp-fld .form-control::placeholder { color: #b4ad99; }
.wp-fld .form-control:focus { border-color: var(--wp-sky-d); box-shadow: 0 0 0 .2rem rgba(79, 125, 153, .18); background: #fff; }
.wp-fld .form-control:disabled { background: #f1ede2; color: var(--wp-mut); }
.wp-hint { margin: 4px 4px 0; font-size: 12.5px; line-height: 1.7; color: var(--wp-coral-d); font-family: var(--wp-font-ui); }
.wp-hint a { text-decoration: underline; }
.wp-inline { display: flex; gap: 10px; align-items: center; }
.wp-inline .form-control { flex: 1; min-width: 0; }
.wp-inline .psn_image { flex: none; height: 46px; border-radius: 12px; border: 1.5px dashed #cfc8b6; cursor: pointer; background: #fff; transition: opacity .2s; }
.wp-inline .wp-btn { flex: none; padding-left: 14px; padding-right: 14px; font-size: 14px; white-space: nowrap; }
.wp-inline .wp-btn:disabled { opacity: .55; cursor: default; }
.wp-check { padding-left: 1.8em; }
.wp-check .form-check-input { width: 1.2em; height: 1.2em; margin-left: -1.8em; margin-top: .25em; border: 1.5px solid var(--wp-ink); background-color: #fff; }
.wp-check .form-check-input:checked { background-color: var(--wp-sage-d); border-color: var(--wp-sage-d); }
.wp-check .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(93, 122, 95, .25); }
.wp-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 4px 0 0; font-size: 14px; }
.wp-links a { color: var(--wp-coral-d); border-bottom: 1.5px dashed currentColor; }
.wp-social { margin-top: 28px; padding-top: 20px; border-top: 1.5px dashed #d9d2c0; display: grid; gap: 10px; text-align: center; }
.wp-social p.wp-mut { margin: 0; font-size: 13px; }
.wp-social .wp-btn.disabled { opacity: .55; pointer-events: none; }
.wp-fbnote { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--wp-mut); text-align: left; font-family: var(--wp-font-ui); }
.wp-fbnote a { text-decoration: underline; color: var(--wp-sky-d); margin-left: 4px; }
@media (max-width: 575.98px) { .wp-auth { padding: 30px 18px 22px; } .wp-inline { flex-wrap: wrap; } .wp-inline .wp-btn { width: 100%; } }

/* ==========================================================================
   會員中心（資訊管理、會員資料、客服中心、手機驗證）
   ========================================================================== */
.wp-member { padding: 10px 0 0; }
.wp-mtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--wp-line); }
.wp-mtabs a { padding: 3px 18px; border-radius: 999px; background: #fff; border: 1.5px dashed #cfc8b6; font-size: 15px; letter-spacing: .08em; transition: .2s; }
.wp-mtabs a:hover { background: var(--c); }
.wp-mtabs a.is-on { background: var(--c); border: 1.5px solid var(--wp-ink); }
.wp-mbar { margin: 0 0 16px; }
.wp-lbl { display: block; margin: 0 0 4px 4px; font-size: 14px; color: #6b7378; }
.wp-phone-state { margin: 0 0 6px 4px; font-size: 13px; font-family: var(--wp-font-ui); }
.wp-btn.is-sm { padding: 1px 14px; font-size: 13px; }

/* 資料表：桌機是表格，手機（<768px）每一列變成一張卡片 */
.wp-tablewrap { background: #fff; border: 1.5px dashed #cfc8b6; border-radius: 18px; overflow-x: auto; }
.wp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wp-table th { background: var(--wp-butter); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-align: left; padding: 10px 14px; white-space: nowrap; color: #6e6840; font-family: var(--wp-font-ui); }
.wp-table th:nth-child(4n+2) { background: var(--wp-sage); }
.wp-table th:nth-child(4n+3) { background: var(--wp-sky); }
.wp-table th:nth-child(4n+4) { background: var(--wp-blush); }
.wp-table td { padding: 10px 14px; border-top: 1px dashed #e4dfd0; vertical-align: middle; word-break: break-word; }
.wp-table tbody tr:hover td { background: #fffdf6; }
.wp-ops { white-space: nowrap; }
.wp-ops .wp-legacy { display: inline; }
.wp-ops .wp-legacy .btn + .btn { margin-left: 4px; }
.wp-table tr.wp-deny td { background: #fdecea; color: var(--wp-coral-d); font-size: 14px; border-top: 0; }
.wp-table tr.wp-none td { text-align: center; color: var(--wp-mut); padding: 34px 14px; }
.wp-stat { display: inline-block; padding: 0 12px; border-radius: 999px; font-size: 13px; background: #eee; font-family: var(--wp-font-ui); white-space: nowrap; }
.wp-stat.is-ok { background: var(--wp-sage); color: var(--wp-sage-d); }
.wp-stat.is-wait { background: var(--wp-butter); color: var(--wp-butter-d); }
.wp-stat.is-off { background: #ece9e1; color: var(--wp-mut); }
.wp-stat.is-no { background: var(--wp-coral); color: var(--wp-coral-d); }
@media (max-width: 767.98px) {
  .wp-tablewrap { border: 0; background: none; overflow: visible; }
  .wp-table, .wp-table tbody { display: block; }
  .wp-table thead { display: none; }
  .wp-table tr { display: block; background: #fff; margin-bottom: 14px; padding: 8px 4px; box-shadow: var(--wp-shadow); }
  .wp-table td { display: flex; justify-content: space-between; gap: 14px; border-top: 0; padding: 4px 14px; text-align: right; }
  .wp-table td::before { content: attr(data-label); flex: none; font-size: 12px; color: var(--wp-mut); font-family: var(--wp-font-ui); padding-top: 3px; text-align: left; }
  .wp-table td[colspan] { display: block; text-align: left; }
  .wp-table td[colspan]::before { content: none; }
  .wp-table tr.wp-deny { margin: -10px 0 14px; padding: 0; box-shadow: none; }
  .wp-ops { white-space: normal; }
  .wp-table tr.wp-none { box-shadow: none; background: none; }
}

/* service／controller 組好的 BS4 標記：按鈕尺寸與顏色、舊圖示、客服摺疊卡片 */
.wp-legacy .btn-xs { padding: 1px 12px; font-size: 12.5px; }
.wp-legacy .btn-info { background: var(--wp-sky); border-color: var(--wp-sky-d); }
.wp-legacy .btn-warning { background: var(--wp-butter); border-color: var(--wp-butter-d); }
.wp-legacy .btn-link { border: 0; background: none; text-align: left; width: 100%; padding: 0; font-size: 15px; border-radius: 0; line-height: 1.7; }
.wp-legacy .btn-link:hover { background: none; color: var(--wp-ink) !important; text-decoration: underline; }
.wp-legacy .fa { font-style: normal; }
.wp-legacy .fa-check::before { content: "\2713"; }
.wp-legacy .fa-remove::before { content: "\2715"; }
.wp-legacy .text-success { color: var(--wp-sage-d) !important; }
.wp-legacy .text-danger { color: var(--wp-coral-d) !important; }
.wp-svc-list > .col-12 { width: 100%; }
.wp-svc-list .card { border: 0; border-radius: 0; background: #fff; box-shadow: var(--wp-shadow); }
.wp-svc-list .card-header { background: none; border-bottom: 1.5px dashed var(--wp-line); padding: 12px 18px; }
.wp-svc-list .card-header h5 { margin: 0; font-weight: 300; }
.wp-svc-list .card-body { padding: 16px 18px; font-size: 15px; line-height: 1.9; color: #5f676b; word-break: break-word; }

/* ==========================================================================
   條款頁（會員權益及隱私權政策）
   ========================================================================== */
.wp-legal { position: relative; max-width: 860px; margin: 0 auto; background: #fff; padding: 44px 44px 34px; box-shadow: 0 14px 28px rgba(120, 110, 80, .16); font-size: 16px; line-height: 2; color: #4d5458; }
.wp-legal p { margin: 0 0 12px; text-align: justify; word-break: break-word; }
.wp-legal a { border-bottom: 1.5px dashed var(--wp-ink); color: var(--wp-ink); }
.wp-legal .wp-legal-h { margin: 8px 0 18px; font-weight: 400; font-size: 24px; letter-spacing: .1em; display: inline-block; background: linear-gradient(transparent 60%, var(--wp-butter) 60% 92%, transparent 92%); padding: 0 6px; color: var(--wp-ink); }
.wp-legal .wp-legal-h ~ .wp-legal-h { margin-top: 44px; background: linear-gradient(transparent 60%, var(--wp-sky) 60% 92%, transparent 92%); }
.wp-legal .wp-clause { margin: 26px 0 8px; font-weight: 400; font-size: 18px; color: var(--wp-ink); padding-left: 12px; border-left: 4px solid var(--wp-sage); line-height: 1.6; }
@media (max-width: 575.98px) { .wp-legal { padding: 32px 20px 24px; font-size: 15px; } }

/* ==========================================================================
   錯誤頁
   ========================================================================== */
.wp-error { padding: 70px 0 30px; text-align: center; }
.wp-error-code { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: clamp(90px, 18vw, 170px); line-height: 1; color: var(--wp-ink); }
.wp-error-code span { display: inline-block; }
.wp-error-code .wp-ic { width: .85em; height: .85em; color: var(--wp-blush-d); stroke: none; fill: currentColor; transform: rotate(-12deg); }
.wp-error-text { margin: 18px 0 8px; font-size: clamp(20px, 3vw, 26px); color: var(--wp-ink); }
.wp-error .wp-acts { margin-top: 24px; }
.wp-error-link { border-bottom: 1.5px dashed var(--wp-ink); margin: 0 4px; }

/* ==========================================================================
   刊登／編輯表單
   ========================================================================== */
.wp-wizard { list-style: none; display: flex; justify-content: center; gap: 0; margin: 4px auto 30px; padding: 0; max-width: 640px; counter-reset: s; }
.wp-wizard li { flex: 1; text-align: center; position: relative; font-size: 14px; color: var(--wp-mut); font-family: var(--wp-font-ui); }
.wp-wizard li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 17px; border-top: 2px dashed #d3ccb8; z-index: 0; }
.wp-wizard li:first-child::before { display: none; }
.wp-wizard i { position: relative; z-index: 1; display: flex; width: 36px; height: 36px; margin: 0 auto 4px; border-radius: 50%; background: #fff; border: 1.5px dashed #bdb69f; align-items: center; justify-content: center; font-style: normal; font-size: 16px; color: var(--wp-mut); }
.wp-wizard li.is-on { color: var(--wp-ink); }
.wp-wizard li.is-on i { background: var(--wp-blush); border: 1.5px solid var(--wp-ink); color: var(--wp-ink); }
.wp-wizard li.is-on::before { border-top-style: solid; }

#post_form .wp-auth h2 { margin-bottom: 22px; }
.wp-fld .form-select { height: 46px; border: 1.5px solid #d9d2c0; border-radius: 14px; padding: 0 2.4rem 0 16px; background-color: #fffdf8; color: var(--wp-ink); font-size: 16px; }
.wp-fld .form-select:focus { border-color: var(--wp-sky-d); box-shadow: 0 0 0 .2rem rgba(79, 125, 153, .18); background-color: #fff; }
.wp-fld textarea.form-control { height: auto; padding: 12px 16px; line-height: 1.8; }
.wp-fld input[type="date"].form-control { padding-right: 10px; }
.wp-em { color: var(--wp-coral-d); }
.wp-warn { margin: 0 0 12px; font-size: 14px; line-height: 1.8; color: var(--wp-coral-d); font-family: var(--wp-font-ui); }
.wp-count { margin: 6px 4px 0; font-size: 13px; color: var(--wp-mut); font-family: var(--wp-font-ui); }
.wp-deny-box { margin-top: 12px; padding: 10px 16px; border-radius: 12px; background: var(--wp-coral); color: var(--wp-ink); font-size: 14px; }
.wp-notice-bar.is-warn { background: var(--wp-coral); max-width: none; text-align: left; margin: 0 0 18px; line-height: 1.9; }
.wp-submit { min-width: 220px; margin-top: 4px; }
.wp-submit:disabled { opacity: .55; cursor: default; }

/* 刊登條款卡片 */
.wp-terms-card { font-size: 14px; line-height: 1.9; color: #5f676b; }
.wp-terms-body p { margin: 0 0 10px; }
.wp-terms-card .wp-check { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--wp-line); font-size: 15px; color: var(--wp-ink); }
@media (min-width: 992px) { .wp-terms-card { position: sticky; top: calc(var(--wp-header-h, 64px) + 16px); } }

/* 照片上傳 */
.wp-up { background: #fffdf8; border: 1.5px dashed #cfc8b6; border-radius: 16px; padding: 16px; }
.wp-up-btn { cursor: pointer; margin: 0; }
.wp-up-progress { height: 8px; margin: 12px 0 0; border-radius: 999px; background: #eee9da; }
.wp-up-progress .progress-bar { background: var(--wp-sage-d); }
.wp-up-list { margin-top: 12px; }
.wp-up-list img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #efe9dc; box-shadow: var(--wp-shadow); padding: 4px; background-color: #fff; }
.wp-up-del { margin-top: 6px; }
@media (max-width: 575.98px) { .wp-wizard li { font-size: 12.5px; } .wp-submit { width: 100%; } }

/* 手機版修正：領養黑名單改成左下角小膠囊（原本固定在右側中間，會蓋住內容與按鈕）；桌機用來對齊欄位的空標籤在堆疊後隱藏 */
@media (max-width: 767.98px) {
  .wp-black { top: auto; bottom: 18px; right: auto; left: 12px; border-radius: 999px; padding: 4px 16px; transform: none; font-size: 13px; line-height: 1.6; box-shadow: 0 4px 10px rgba(120, 110, 80, .22); }
  .wp-black br { display: none; }
  .wp-black:hover { transform: none; }
  .wp-lbl-ghost { display: none; }
}

/* 手機版：篩選列不固定（固定時會吃掉三、四排的高度） */
@media (max-width: 767.98px) { .wp-filter-wrap { position: static; } }