/* ═══════════════════════════════════════════
   WIKIVOYAGE MAGIC — style.css
   仿真 Wikivoyage 手機版（MinervaNeue skin）
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --wv-white: #fff;
  --wv-bg: #f8f9fa;
  --wv-bg-header: #f8f9fa;      /* ★ 真實網頁是灰色 */
  --wv-border: #a2a9b1;
  --wv-border-light: #eaecf0;
  --wv-blue: #3366cc;
  --wv-blue-light: #6699ff;
  --wv-teal: #14866d;
  --wv-text: #202122;
  --wv-text-gray: #54595d;
  --wv-text-light: #72777d;
  --wv-header-h: 68px;
  --wv-red: #cc2200;
  --font-content: -apple-system, BlinkMacSystemFont, 'Georgia', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  color: var(--wv-text);
  background: var(--wv-white);
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}

a { color: var(--wv-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a.new { color: var(--wv-red); }
img { max-width: 100%; height: auto; }

/* ══════════════════════════════════════
   HEADER — 灰色底（真實 Wikivoyage 樣式）
══════════════════════════════════════ */
.wv-header {
  position: static;
  z-index: 100;
  background: #eaecf0;             /* ★ 更深的灰色 */
  border-bottom: 1px solid #c8ccd1;
  height: var(--wv-header-h);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}

/* 首頁時 header 固定在頂部 */
.wv-header.is-home {
  position: sticky;
  top: 0;
}

.wv-header-menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.wv-header-menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--wv-text-gray);   /* ★ 深色漢堡線 */
  border-radius: 1px;
}

.wv-header-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-right: 0px;
}

/* ★ Logo 官方 SVG */
.wv-header-logo-img {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.75;
}

.wv-header-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--wv-text-gray);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.wv-header-search-btn svg {
  width: 28px;
  height: 28px;
}

/* ── Globe icon 顏色（深色）── */
.wv-header-globe { color: var(--wv-text-gray); }

/* ══════════════════════════════════════
   SEARCH OVERLAY — 真實 Wikivoyage 樣式
   白底 + 頂部搜索欄 + 結果帶縮圖
══════════════════════════════════════ */
.wv-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--wv-white);
  z-index: 200;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.wv-search-overlay.show { display: flex; }

/* ★ 搜索欄：白底、藍色邊框 */
.wv-search-overlay-bar {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: #eaecf0;
  border-bottom: 1px solid #c8ccd1;
  gap: 4px;
}

.wv-search-overlay-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ★ input 框：長方形外框 */
.wv-search-overlay-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--wv-white);
  border: 1.5px solid #a2a9b1;
  border-radius: 3px;
  padding: 0 10px;
  gap: 8px;
  height: 44px;
}

.wv-search-overlay-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 22px;
  color: var(--wv-text);
  background: transparent;
  font-family: var(--font-ui);
  padding: 0;
}
.wv-search-overlay-input::placeholder { color: #72777d; font-size: 22px; }

.wv-search-overlay-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wv-text-light);
  font-size: 18px;
  padding: 4px;
}

/* ★ 搜索結果：帶縮圖（真實網頁樣式） */
.wv-search-results { flex: 1; overflow-y: auto; }

.wv-search-result-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--wv-border-light);
  cursor: pointer;
  gap: 14px;
}
.wv-search-result-item:hover { background: var(--wv-bg); }

/* ★ 縮圖方形 */
.wv-search-result-thumb {
  width: 54px;
  height: 54px;
  border-radius: 2px;
  flex-shrink: 0;
  background: #eaecf0;
  overflow: hidden;
}
.wv-search-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wv-search-result-thumb-placeholder {
  width: 54px;
  height: 54px;
  background: #eaecf0;
  border-radius: 2px;
  flex-shrink: 0;
}

.wv-search-result-text { flex: 1; min-width: 0; }
.wv-search-result-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--wv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wv-search-result-desc {
  font-size: 16px;
  color: var(--wv-text-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  font-weight: 400;
}

/* ══════════════════════════════════════
   SIDE DRAWER
══════════════════════════════════════ */
.wv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
}
.wv-overlay.show { display: block; }

.wv-drawer {
  position: fixed;
  top: 0; left: -290px;
  width: 290px;
  height: 100vh;
  background: var(--wv-white);
  z-index: 201;
  transition: left .25s ease;
  overflow-y: auto;
}
.wv-drawer.open { left: 0; }

.wv-drawer-header {
  background: var(--wv-bg-header);
  border-bottom: 1px solid var(--wv-border-light);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wv-drawer-logo {
  color: var(--wv-text);            /* ★ 深色文字 */
  font-size: 18px;
  font-weight: bold;
}
.wv-drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--wv-text-gray);
}

.wv-drawer-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--wv-border-light);
}
.wv-drawer-section-title {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wv-text-light);
}
.wv-drawer-nav { list-style: none; }
.wv-drawer-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--wv-text);
}
.wv-drawer-nav li a:hover { background: var(--wv-bg); text-decoration: none; }
.wv-drawer-nav li a .wv-nav-icon { font-size: 18px; width: 24px; text-align: center; }

/* ══════════════════════════════════════
   HOME PAGE
══════════════════════════════════════ */
.wv-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 60px;
  text-align: center;
}

.wv-home-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.wv-home-globe {
  width: 64px;
  height: 64px;
  background: var(--wv-bg);
  border: 2px solid var(--wv-border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.wv-home-title {
  font-size: 28px;
  font-weight: normal;
  color: var(--wv-text);
  font-family: var(--font-content);
}

.wv-home-tagline {
  font-size: 14px;
  color: var(--wv-text-gray);
  margin-bottom: 28px;
}

.wv-home-search-wrap {
  width: 100%;
  max-width: 440px;
  margin-bottom: 24px;
}

.wv-home-search-box {
  display: flex;
  border: 2px solid var(--wv-border);
  border-radius: 4px;
  overflow: visible;
  position: relative;
}
.wv-home-search-box:focus-within {
  border-color: var(--wv-blue);
}

.wv-home-search-input {
  flex: 1;
  padding: 12px 14px;
  font-size: 16px;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  color: var(--wv-text);
  min-width: 0;
  background: var(--wv-white);
}

.wv-home-search-btn {
  padding: 12px 18px;
  background: var(--wv-blue);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  white-space: nowrap;
}
.wv-home-search-btn:hover { background: #2255bb; }

.wv-home-destinations {
  width: 100%;
  max-width: 440px;
  text-align: left;
}
.wv-home-destinations h3 {
  font-size: 14px;
  font-weight: bold;
  color: var(--wv-text-gray);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wv-home-dest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wv-home-dest-chip {
  padding: 10px 14px;
  background: var(--wv-bg);
  border: 1px solid var(--wv-border-light);
  border-radius: 4px;
  font-size: 14px;
  color: var(--wv-blue);
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wv-home-dest-chip:hover { background: #e8eef8; }

/* ══════════════════════════════════════
   ARTICLE PAGE
══════════════════════════════════════ */
.wv-article { padding-bottom: 40px; }

/* ── 封面圖區塊 ── */
.wv-article-hero {
  position: relative;
  width: 100%;
  height: 172px;
  background: #c8ccd1 center/cover no-repeat;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.wv-article-title {
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  font-family: var(--font-ui);
  line-height: 1.2;
  padding: 10px 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
}

/* ── 副標題（圖片下方，灰色小字，白底） ── */
.wv-article-desc {
  padding: 18px 14px 14px;
  font-size: 16px;
  color: var(--wv-text-gray);
  border-bottom: 1px solid var(--wv-border-light);
  background: var(--wv-white);
}

/* ── 工具列：語言/書籤/編輯 ── */
.wv-article-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  border-bottom: 1px solid var(--wv-border-light);
  background: var(--wv-white);
}
.wv-tool-left { display: flex; align-items: center; }
.wv-tool-btns { display: flex; gap: 4px; }
.wv-tool-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--wv-text-gray);
  padding: 6px 8px;
}

/* ★ 文A：緊靠在一起，文左上A右下 */
.wv-tool-btn.lang-btn {
  position: relative;
  font-size: 0;
  width: 30px;
  height: 30px;
}
.wv-tool-btn.lang-btn::before {
  content: "文";
  font-size: 16px;
  color: #54595d;
  position: absolute;
  left: 0;
  top: 3px;
  font-family: serif;
  line-height: 1;
}
.wv-tool-btn.lang-btn::after {
  content: "A";
  font-size: 20px;
  color: #54595d;
  position: absolute;
  left: 12px;
  top: 8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}



/* ── 麵包屑列（Asia > East Asia > Japan）── */
.wv-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--wv-blue);
  border-bottom: 1px solid var(--wv-border-light);
  background: var(--wv-white);
}
.wv-breadcrumb-bar span:last-child {
  font-size: 12px;
  color: var(--wv-text-light);
}



.wv-article-body {
  font-size: 18px;
  line-height: 1.8;
  color: var(--wv-text);
  font-family: var(--font-content);
}

.wv-article-body p {
  padding: 6px 16px;
  margin: 4px 0;
}

.wv-section {
  border-bottom: 1px solid var(--wv-border-light);
}

.wv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--wv-white);
}
.wv-section-header:hover { background: var(--wv-bg); }

.wv-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wv-section-chevron-icon svg {
  transition: transform 0.2s ease;
}

.wv-section-header h2 {
  font-size: 30px;
  font-weight: normal;
  color: var(--wv-text);
  font-family: 'Times New Roman', Times, Georgia, serif;
}

.wv-section-edit-icon {
  flex-shrink: 0;
  display: none;
}
.wv-section-header.is-open .wv-section-edit-icon {
  display: block;
}

.wv-section-content {
  padding: 0 16px 16px;
}
.wv-section-content.collapsed { display: none; }

.wv-subheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
}
.wv-subheading h3 {
  font-size: 22px;
  font-weight: bold;
  color: var(--wv-text);
  font-family: 'Times New Roman', Times, Georgia, serif;
}
.wv-edit-icon { color: var(--wv-text-light); flex-shrink: 0; display: none; }
.wv-section-content:not(.collapsed) .wv-edit-icon { display: inline-block; }

.wv-article-body .wv-listing-card,
.wv-article-body .listing,
.wv-article-body .vcard {
  background: none;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 0;
  margin: 4px 0;
  font-size: inherit;
}

/* 隱藏無法渲染的地圖 */
.wv-article-body .mw-kartographer-container,
.wv-article-body .mw-kartographer-map { display: none !important; }

/* 修正 listing 數字標籤 — 只控制大小，保留原本顏色 */
.wv-article-body .listing-markerr,
.wv-article-body bdi.listing-markerr,
.wv-article-body .mw-kartographer-autostyled {
  display: inline-block !important;
  padding: 1px 7px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  height: auto !important;
  min-width: unset !important;
  width: auto !important;
  border-radius: 3px !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  font-family: var(--font-ui) !important;
}

.wv-article-body .listing-name,
.wv-article-body .fn {
  font-weight: bold;
  color: var(--wv-text);
  font-size: inherit;
}

.wv-article-body .listing-address,
.wv-article-body .adr {
  color: var(--wv-text-gray);
  font-size: inherit;
}

.wv-article-body a { color: var(--wv-blue); }
.wv-article-body a.new { color: var(--wv-red); }

.wv-article-body ul, .wv-article-body ol {
  padding-left: 8px;
  margin: 6px 16px;
}
.wv-article-body li { margin: 4px 0; }

.wv-article-body img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 12px auto;
}
.wv-article-body figure,
.wv-article-body .thumb,
.wv-article-body .thumbinner,
.wv-article-body .floatright,
.wv-article-body .floatleft,
.wv-article-body .tright,
.wv-article-body .tleft,
.wv-article-body [style*="float"] {
  float: none !important;
  display: block !important;
  margin: 12px auto !important;
  max-width: 100% !important;
  width: auto !important;
  text-align: center;
  clear: both;
}
.wv-article-body figcaption,
.wv-article-body .thumbcaption {
  font-size: 12px;
  color: var(--wv-text-gray);
  text-align: center;
  padding: 4px 8px;
  font-style: italic;
}

.wv-article-body .infobox,
.wv-article-body .wikivoyage-infobox {
  background: var(--wv-bg);
  border: 1px solid var(--wv-border);
  border-radius: 4px;
  padding: 12px;
  margin: 12px 16px;
  font-size: 13px;
}

.wv-article-body table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px auto;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
/* 氣候圖等特殊 table 內圖片正常顯示 */
.wv-article-body table img {
  max-width: none !important;
  height: auto !important;
}
.wv-article-body table td,
.wv-article-body table th {
  padding: 6px 10px;
  border: 1px solid var(--wv-border-light);
  vertical-align: top;
}
.wv-article-body table th {
  background: var(--wv-bg);
  font-weight: bold;
}

.wv-article-body .mw-editsection,
.wv-article-body .noprint,
.wv-article-body .stub,
.wv-article-body .ambox { display: none !important; }

.wv-last-edited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--wv-bg);
  border-top: 1px solid var(--wv-border-light);
  font-size: 14px;
  color: var(--wv-text-gray);
  margin-top: 20px;
}
.wv-last-edited-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wv-article-status {
  padding: 14px 16px;
  background: var(--wv-white);
  border-top: 1px solid var(--wv-border-light);
}
.wv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #e8f4e8;
  border: 1px solid #a8d8a8;
  border-radius: 20px;
  font-size: 12px;
  color: #2d7a2d;
  font-weight: 600;
}

.wv-footer {
  background: var(--wv-bg);
  padding: 20px 16px;
  border-top: 1px solid var(--wv-border-light);
}
.wv-footer-logo {
  font-size: 20px;
  font-weight: bold;
  color: var(--wv-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wv-footer-desc {
  font-size: 13px;
  color: var(--wv-text-gray);
  margin-bottom: 14px;
  line-height: 1.6;
}
.wv-footer-links {
  font-size: 13px;
  color: var(--wv-text-gray);
  line-height: 2.2;
}
.wv-footer-links a { color: var(--wv-blue); margin-right: 4px; }

/* ══════════════════════════════════════
   LOADING
══════════════════════════════════════ */
.wv-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.wv-loading-dots { display: flex; gap: 8px; }
.wv-loading-dots span {
  width: 10px; height: 10px;
  background: var(--wv-blue);
  border-radius: 50%;
  animation: wvPulse 1.2s ease-in-out infinite;
  opacity: 0.4;
}
.wv-loading-dots span:nth-child(2) { animation-delay: .2s; }
.wv-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes wvPulse {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════
   NOT FOUND
══════════════════════════════════════ */
.wv-not-found {
  padding: 60px 20px;
  text-align: center;
  color: var(--wv-text-gray);
}
.wv-not-found h2 {
  font-size: 20px;
  color: var(--wv-text);
  margin-bottom: 12px;
  font-weight: normal;
}
.wv-not-found p { margin-bottom: 20px; font-size: 15px; }
.wv-not-found a { color: var(--wv-blue); }