/* ============================================================
   日本旅游指南 - 全站共享样式
   ============================================================ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* 锚点跳转时避开固定导航栏 */
    -webkit-text-size-adjust: 100%; /* 禁用 iOS 自动放大文字 */
    -webkit-tap-highlight-color: transparent; /* 去掉移动端点击高亮 */
    overflow-x: hidden; /* 全局防止水平溢出 */
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* 移动端防横向滚动 */
    /* 刘海屏/灵动屏安全区 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* 图片自适应，避免超出容器 */
img {
    max-width: 100%;
    height: auto;
}

/* iOS 输入框聚焦时不自动放大（输入框字号已设为 16px） */
input, select, textarea {
    font-size: 16px;
}

/* ---------- 导航链接悬停 ---------- */
.nav-hover {
    transition: color .3s ease;
}
.nav-hover:hover {
    color: #E63946;
}

/* ---------- 卡片阴影与悬停浮起 ---------- */
.card-shadow {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    transition: box-shadow .3s ease, transform .3s ease;
}
.card-shadow:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    transform: translateY(-4px);
}

/* ---------- 滚动淡入动画 ---------- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 返回顶部按钮 ---------- */
#back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    color: #fff;
    background: #4A6C8C;
    box-shadow: 0 4px 12px rgb(0 0 0 / .18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .3s ease;
}
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover {
    background: #E63946;
}

/* ---------- 无障碍：减弱动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade-in { opacity: 1; transform: none; transition: none; }
    #back-to-top { transition: none; }
}

/* ---------- 细滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F5F5F0; }
::-webkit-scrollbar-thumb { background: #c7cdd4; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #4A6C8C; }