@charset "big5";
/* ============================================================
   藏王樹冰活動頁 介紹區塊樣式（字卡以外）
   2026.07.22 simon 新建；2026.07.22 simon 改為資訊圖表(infographic)版型
   對照使用者提供的「藏王樹冰介紹.jpg」重製。
   字卡區沿用 foreign_search.css，此檔只放介紹區。
   ============================================================ */

/* 註：banner(.bigimg) 不再覆寫 —— 沿用站台原本 RWD 行為
   （桌機自然高度；手機 768px 以下固定 175px 置中填滿）。
   先前 banner 下方的白帶其實來自 margin 穿透，已由 .zao-info 改用 padding-top 解決。 */

/* 灰底裝飾：把 #main 純灰換成冷色漸層 + 淡雪花圖樣（低調不搶字卡）
   容器(.bigimg1/.container/.tourdata…)皆透明，故整個灰底區(含行程字卡)都會透出此底 */
#main {
    background:
        url(../images/snowpattern.svg) repeat,
        linear-gradient(180deg, #f3f7fc 0%, #e9f0f8 55%, #e6edf5 100%);
    background-size: 230px 230px, auto;   /* 圖磚放大 → 雪花間距拉大、密度降低 */
}

/* 上方間隔用 padding-top（顯示 #main 的 #eee 灰底），
   不可用 margin-top —— 第一個子元素的 margin 會穿透 #main 露出上方的白色 body 底 */
.zao-info {
    max-width: 1040px;
    margin: 0 auto 10px;
    padding: 40px 14px 0;
    color: #33435c;
    font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
    line-height: 1.7;
}
.zao-info * { box-sizing: border-box; }

/* 共用：小標題 */
.zao-panel-title {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    color: #1b3b6f;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px dashed #7aa9de;
}

/* ===== Hero ===== */
.zao-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(120deg, #dbe9f8 0%, #c4dcf3 100%);
    background-size: cover;
    background-position: center;
    padding: 42px 40px 46px;
    margin-bottom: 26px;
    min-height: 240px;
}
/* 左側加白色柔光，確保深色標題可讀 */
.zao-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 70%;
    background: linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.45) 60%, rgba(255,255,255,0) 100%);
}
.zao-hero-inner { position: relative; z-index: 1; }
.zao-hero-title {
    font-size: 40px;
    font-weight: 900;
    color: #16305c;
    letter-spacing: 2px;
    margin: 0;
}
.zao-hero-sub {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #2a5599;
    margin: 6px 0 16px;
    letter-spacing: 4px;
}
.zao-hero-desc {
    font-size: 15.5px;
    color: #3a4a63;
    margin: 0;
    max-width: 520px;
    line-height: 1.9;
}

/* ===== 三階段時序卡 ===== */
.zao-stages {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
}
.zao-stage {
    flex: 1 1 33.333%;
    background: #fff;
    border: 1px solid #e5edf7;
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 6px 18px rgba(27,59,111,.06);
    display: flex;
    flex-direction: column;
}
.zao-stage-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.zao-stage-no {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    line-height: 42px;
    text-align: center;
}
.zao-stage-period { font-size: 20px; font-weight: bold; line-height: 1.2; }
.zao-stage-name  { font-size: 15px; font-weight: bold; margin-top: 2px; }

.zao-stage-img {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #dce9f7 0%, #c3d8ef 100%);
}
.zao-stage-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.zao-stage-desc {
    font-size: 14px;
    color: #4a5a72;
    line-height: 1.9;
    margin: 0 0 14px;
}
.zao-feat-label {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 4px;
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 2px solid currentColor;
}
.zao-stage-feat ul {
    margin: 0;
    padding-left: 2px;
    list-style: none;
}
.zao-stage-feat li {
    position: relative;
    font-size: 13.5px;
    color: #4a5a72;
    padding-left: 16px;
    margin-bottom: 5px;
    line-height: 1.7;
}
.zao-stage-feat li::before {
    content: "";
    position: absolute;
    left: 2px; top: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* 三卡各自的主色 */
.stage-1 .zao-stage-no { background: #3f7fd0; }
.stage-1 .zao-stage-period, .stage-1 .zao-feat-label { color: #3f7fd0; }
.stage-1 .zao-stage-feat li { color: #4a5a72; }
.stage-1 .zao-stage-feat li::before { background: #3f7fd0; }

.stage-2 .zao-stage-no { background: #1f9d9d; }
.stage-2 .zao-stage-period, .stage-2 .zao-feat-label { color: #1f9d9d; }
.stage-2 .zao-stage-feat li::before { background: #1f9d9d; }

.stage-3 .zao-stage-no { background: #7a6ac9; }
.stage-3 .zao-stage-period, .stage-3 .zao-feat-label { color: #7a6ac9; }
.stage-3 .zao-stage-feat li::before { background: #7a6ac9; }

/* ===== 藏王樹冰美景 ===== */
.zao-gallery {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5edf7;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(27,59,111,.06);
}
.zao-gallery-label {
    flex: 0 0 auto;
    width: 34px;
    background: linear-gradient(180deg, #3f7fd0, #2a5599);
    color: #fff;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    padding: 14px 6px;
    writing-mode: vertical-rl;
    line-height: 1.3;
}
.zao-gallery-body { flex: 1 1 auto; }
.zao-gallery-imgs {
    display: flex;
    gap: 12px;
}
.zao-gallery-img {
    position: relative;
    flex: 1 1 33.333%;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #dce9f7 0%, #c3d8ef 100%);
}
.zao-gallery-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.zao-gallery-tag {
    position: absolute;
    left: 8px; top: 8px;
    background: rgba(63,127,208,.92);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
}
.zao-gallery-cap {
    text-align: center;
    font-size: 14px;
    color: #4a5a72;
    margin: 12px 4px 2px;
    line-height: 1.9;
}

/* ===== 底部兩欄 ===== */
.zao-bottom {
    display: flex;
    gap: 18px;
    margin-bottom: 48px;
}
.zao-elements, .zao-access {
    background: #fff;
    border: 1px solid #e5edf7;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(27,59,111,.06);
}

.zao-elements { flex: 1 1 46%; }
.zao-access { flex: 1 1 54%; }

/* 四大形成要素 */
.zao-elem-grid {
    display: flex;
    gap: 12px;
}
.zao-elem {
    position: relative;
    flex: 1 1 25%;
    background: #f2f7fd;
    border: 1px solid #e2ecf8;
    border-radius: 10px;
    padding: 26px 6px 14px;
    text-align: center;
}
.zao-elem-badge {
    position: absolute;
    left: 8px; top: 8px;
    width: 22px; height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: #cfe0f5;
    color: #2a5599;
    font-size: 12px;
    font-weight: bold;
}
.zao-elem-icon { height: 34px; margin-bottom: 8px; }
.zao-elem-icon svg { width: 34px; height: 34px; }
.zao-elem-name { font-size: 15px; font-weight: bold; color: #2a3f5f; white-space: nowrap; }
.zao-elem-note { font-size: 11px; color: #8a9bb3; margin-top: 2px; }

/* 搭乘藏王纜車 */
.zao-access-body { display: flex; gap: 14px; align-items: center; }
.zao-access-list { flex: 1 1 auto; }
.zao-access-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.zao-access-item:last-child { margin-bottom: 0; }
.zao-access-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
}
.zao-access-icon svg { width: 34px; height: 34px; }
.zao-access-item b {
    display: block;
    font-size: 15px;
    color: #1b3b6f;
    margin-bottom: 2px;
}
.zao-access-item p {
    margin: 0;
    font-size: 13px;
    color: #5a6a82;
    line-height: 1.7;
}
.zao-access-map {
    flex: 0 0 190px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zao-access-map img { max-width: 100%; height: auto; display: block; }

/* ===== footer 緞帶 ===== */
/* 寬螢幕：纜車說明強制單行 */
@media (min-width: 1100px) {
    .zao-access-item p { white-space: nowrap; }
}

.zao-ribbon {
    background: linear-gradient(90deg, #1b3b6f, #274b86);
    color: #eaf2ff;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 16px 18px;
    margin-bottom: 6px;
}
.zao-ribbon svg { width: 18px; height: 18px; vertical-align: -3px; margin: 0 12px; }
.zao-ribbon svg path, .zao-ribbon svg line { stroke: #bcd6ff; }

/* ===== 區塊間小雪花分隔線 ===== */
.zao-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 4px 12px;
}
.zao-divider::before,
.zao-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(140,175,215,0), rgba(140,175,215,.55), rgba(140,175,215,0));
}
.zao-divider svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}
.zao-divider svg line { stroke: #9ec2e8; }

/* ===== 字卡區分隔標題（置中） ===== */
.zao-cards-title {
    max-width: 1040px;
    margin: 88px auto 26px;   /* 上(離緞帶)、下(離字卡)都留間隔 */
    padding: 0 14px;
    text-align: center;
}
.zao-cards-title h2 {
    display: inline-block;
    font-size: 36px;
    font-weight: bold;
    color: #1b3b6f;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 3px solid #4a8fe7;
}
.zao-cards-title p {
    font-size: 14px;
    color: #888;
    margin: 12px 0 0;
}

/* ============================================================
   RWD
   ============================================================ */
@media screen and (max-width: 900px) {
    .zao-stages { flex-wrap: wrap; }
    .zao-stage { flex: 1 1 100%; }
    .zao-bottom { flex-direction: column; }
    .zao-hero-desc { max-width: 100%; }
}
@media screen and (max-width: 600px) {
    .zao-hero { padding: 28px 20px 30px; }
    .zao-hero-title { font-size: 28px; }
    .zao-hero-sub { font-size: 18px; }
    .zao-gallery { flex-direction: column; }
    .zao-gallery-label {
        width: auto;
        writing-mode: horizontal-tb;
        letter-spacing: 6px;
        padding: 8px;
    }
    .zao-gallery-imgs { flex-direction: column; }
    .zao-elem-grid { flex-wrap: wrap; }
    .zao-elem { flex: 1 1 44%; }
    .zao-access-body { flex-direction: column; }
    .zao-access-map { flex-basis: auto; }
    .zao-ribbon { font-size: 15px; }
}

/* 精選行程標題：手機縮小 */
@media screen and (max-width: 600px) {
    .zao-cards-title { margin-top: 48px; }
    .zao-cards-title h2 { font-size: 26px; }
}

/* ============================================================
   banner 疊字 + 進場動畫
   ============================================================ */
.bigimg { position: relative; overflow: hidden; }
/* 極淡的中央柔光，讓文字在樹冰上仍清楚（不改變畫面調性） */
.bigimg::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: radial-gradient(62% 72% at 50% 50%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.18) 46%, rgba(255,255,255,0) 74%);
    z-index: 1;
    pointer-events: none;
}
.zao-banner-txt {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
    font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
.zao-bn-sub {
    margin: 0 0 .5em;
    font-size: clamp(13px, 1.7vw, 28px);
    font-weight: bold;
    letter-spacing: .5em;
    text-indent: .5em;
    color: #1b3b6f;
    text-shadow: 0 1px 2px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.85);
    opacity: 0;
    animation: zaoFadeDown 1s cubic-bezier(.22,.7,.3,1) .2s both;
}
.zao-bn-main {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: clamp(22px, 3.8vw, 70px);
    font-weight: bold;
    letter-spacing: .06em;
    color: #163462;
    text-shadow: 0 2px 14px rgba(255,255,255,.85), 0 1px 2px rgba(255,255,255,1);
    opacity: 0;
    overflow: hidden;
    animation: zaoFadeUp 1.2s cubic-bezier(.22,.7,.3,1) .5s both;
}
/* 大標上緩慢掃過的光暈 */
.zao-bn-main::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 45%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    animation: zaoShine 5.2s ease-in-out 1.7s infinite both;
}
.zao-bn-desc {
    margin: 1.1em 0 0;
    font-size: clamp(12px, 1.35vw, 22px);
    font-weight: bold;
    line-height: 1.85;
    color: #1b3b6f;
    text-shadow: 0 1px 2px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.8);
    opacity: 0;
    animation: zaoFadeUp 1s cubic-bezier(.22,.7,.3,1) 1s both;
}
@keyframes zaoFadeDown {
    from { opacity: 0; transform: translateY(-14px); letter-spacing: .8em; }
    to   { opacity: 1; transform: translateY(0);     letter-spacing: .5em; }
}
@keyframes zaoFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 0~42% = 2.2 秒掃過，42~100% = 停留 3 秒後再掃一次 */
@keyframes zaoShine {
    0%   { left: -60%; }
    42%  { left: 130%; }
    100% { left: 130%; }
}
/* 手機：banner 被裁成 175px 高，字要再收一點 */
@media screen and (max-width: 768px) {
    .zao-bn-sub  { font-size: 14px; letter-spacing: .35em; text-indent: .35em; margin-bottom: .4em; }
    .zao-bn-main { font-size: 22px; }
    .zao-bn-desc { font-size: 13px; margin-top: .7em; line-height: 1.7; }
}
/* 使用者若開啟系統「減少動態效果」則直接靜態顯示 */
@media (prefers-reduced-motion: reduce) {
    .zao-bn-sub, .zao-bn-main, .zao-bn-desc { animation: none; opacity: 1; }
    .zao-bn-main::after { display: none; }
}

/* ============================================================
   行程字卡覆寫（蓋 foreign_search.css，只作用於本頁 #resultTours）
   ============================================================ */
/* 卡片外觀：對齊上方 infographic 的圓角／邊框／陰影 */
#resultTours .newTourBox { margin-bottom: 18px; }
#resultTours .tourBox {
    border-radius: 14px;
    border: 1px solid #e5edf7;
    box-shadow: 0 6px 18px rgba(27,59,111,.06);
    transition: box-shadow .35s ease, transform .35s ease;
}
#resultTours .tourBox.hoverable:hover { box-shadow: 0 12px 28px rgba(27,59,111,.16); }
#resultTours .tourBox .imgGroup { border-radius: 14px 0 0 14px; overflow: hidden; }

/* hover 回饋：卡片上浮 + 圖片微放大 */
#resultTours .newTourBox:hover .tourBox { transform: translateY(-2px); }
#resultTours .newTourBox:hover .tripImg { transform: scale(1.06); }

/* 圖片遮罩：黑 -> 深藍，雪景圖不會發灰 */
#resultTours .tourBox .imgMask {
    background: linear-gradient(to bottom, rgba(13,35,68,0) 0%, rgba(13,35,68,.58) 100%);
}

/* 價格：加深藍膠囊底，壓在亮色圖片上也清楚 */
#resultTours .tourBox .dayPriceBox {
    left: 14px;
    bottom: 12px;
    padding: 3px 14px;
    border-radius: 999px;
    background: rgba(13,35,68,.55);
}
#resultTours .tourBox .dayPriceBox .dayPrice span { color: #ffc861; }


/* 行程名稱：3 行 -> 2 行截斷，字級收斂，卡片高度整齊 */
#resultTours .tourBox .tourInfo .infoGroup .strokeName { -webkit-line-clamp: 2; }
#resultTours .tourBox .tourInfo .infoGroup .strokeName strong {
    font-size: 17px;
    line-height: 1.55;
    color: #24354d;
}

/* 區域標籤：灰底 -> 淡藍膠囊，降低存在感 */
#resultTours .tourBox .tourInfo .infoGroup .locate {
    background: #eef4fb;
    color: #4a6b93;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 11px;
}
#resultTours .tourBox .tourInfo .infoGroup .locate h3 { font-size: 11px; }
#resultTours .tourBox .tourInfo .infoGroup .locate .material-icons { color: #8fb0d4; }

/* 日期／團況：只改形狀(膠囊)，紅(已成團)、橘(熱銷)顏色維持站台原值 */
#resultTours .dateFavoriteBox { border-top: 1px solid #e5edf7; }
#resultTours .dateFavoriteBox .dateBox .toolTipBox .toolTipTextBox {
    width: auto;
    min-width: 62px;
    padding: 4px 12px;
    border-radius: 999px;
}

/* 更多...：從灰字提升為明確的可點入口 */
#resultTours .dateFavoriteBox .dateBox .dateMore a { color: #2f6fb5; font-weight: bold; }
#resultTours .dateFavoriteBox .dateBox .dateMore a:hover { color: #1b3b6f; text-decoration: underline; }
#resultTours .dateFavoriteBox .dateBox .dateMore a:after { content: " \203A"; }

/* 767px 以下卡片轉直式（站台原生行為）：圖片圓角改到上方 */
@media (max-width: 767px) {
    #resultTours .tourBox .imgGroup { border-radius: 14px 14px 0 0; }
    /* 站台原生手機版會讓「會員獨享」width:100% 獨佔一行，本頁改成與直飛/早去/晚回同一行 */
    #resultTours .preFlag .tag[rel='forTripMember'] { width: auto; }
    #resultTours .newTourBox { margin-bottom: 18px; }
    #resultTours .tourBox .tourInfo .infoGroup .strokeName strong { font-size: 16px; }
}