@charset "utf-8";
/* 字型大小一律用 rem（無障礙 CS2140401C：外部樣式表 font-size 須為相對單位；1rem = 16px） */

/*
 * 英文版網站導覽＋首頁地圖小女孩／泡泡（設計公司 2026-10-12 交付，搭配 js/tpsf-tour.js）
 * 本站改寫處：「?」鈕與泡泡改用 <button>（補按鈕預設樣式重設）、地圖自動輪播的播放／暫停鈕位置
 */

.tpsf-tour {
	--tpsf-cream: #FFF2DF;
	--tpsf-cream-2: #FFE9C9;
	--tpsf-yellow: #FFBF54;
	--tpsf-accent: #F4BD60;
	--tpsf-ink: #894000;
	/* 本站：色彩對比須達 4.5:1（無障礙 AA），淡棕字 #A9713A 在米色底只有 3.7、主按鈕棕字在黃底只有 4.4 → 加深 */
	--tpsf-ink-soft: #8A5A2B;
	--tpsf-ink-strong: #6B3100;
	--tpsf-line: #EBD3AB;

	position: fixed;
	inset: 0;
	z-index: 3000;
	font-family: inherit;
}

.tpsf-tour__backdrop {
	position: absolute;
	inset: 0;
	background: transparent;
	cursor: default;
}

.tpsf-tour__spot {
	position: fixed;
	border-radius: 14px;
	box-shadow: 0 0 0 9999px rgba(45, 28, 8, 0.62);
	outline: 3px solid var(--tpsf-yellow);
	outline-offset: 0;
	pointer-events: none;
	transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

.tpsf-tour__spot::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 14px;
	box-shadow: 0 0 0 6px rgba(255, 191, 84, .35);
	animation: tpsf-tour-pulse 1.8s ease-out infinite;
}

@keyframes tpsf-tour-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 191, 84, .55); }
	70%  { box-shadow: 0 0 0 14px rgba(255, 191, 84, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 191, 84, 0); }
}

/* 高亮區可點的步驟（Sign up）：框本身就是按鈕，滑過時加深提示 */
.tpsf-tour__spot--click {
	pointer-events: auto;
	cursor: pointer;
}
.tpsf-tour__spot--click:hover { outline-color: var(--tpsf-accent); outline-width: 4px; }

.tpsf-tour__spot--round,
.tpsf-tour__spot--round::after { border-radius: 50%; }
.tpsf-tour__spot--none { outline: 0; }
.tpsf-tour__spot--none::after { display: none; }

.tpsf-tour__pop {
	position: fixed;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
}

.tpsf-tour__girl {
	width: 145px;
	height: auto;
	flex: none;
	display: block;
	pointer-events: none;
	filter: drop-shadow(0 6px 14px rgba(45, 28, 8, .35));
	animation: tpsf-tour-pop-in .32s ease-out both;
}

.tpsf-tour__card {
	position: relative;
	width: 340px;
	max-width: calc(100vw - 32px);
	background: var(--tpsf-cream);
	border: 2px solid var(--tpsf-yellow);
	border-radius: 20px;
	box-shadow: 0 14px 40px rgba(45, 28, 8, .35);
	padding: 20px 20px 16px;
	pointer-events: auto;
	animation: tpsf-tour-pop-in .32s ease-out both;
}

@keyframes tpsf-tour-pop-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.tpsf-tour__girl[hidden] { display: none; }
.tpsf-tour__girl[hidden] + .tpsf-tour__card { margin-left: 0; margin-right: 0; }

.tpsf-tour__pop--girl-left .tpsf-tour__card { margin-left: -18px; }
.tpsf-tour__pop--girl-right { flex-direction: row-reverse; }
.tpsf-tour__pop--girl-right .tpsf-tour__card { margin-right: -18px; }

.tpsf-tour__arrow {
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--tpsf-cream);
	border: 2px solid var(--tpsf-yellow);
	transform: rotate(45deg);
}
.tpsf-tour__arrow--left   { left: -9px;   border-right: 0; border-top: 0; }
.tpsf-tour__arrow--right  { right: -9px;  border-left: 0;  border-bottom: 0; }
.tpsf-tour__arrow--top    { top: -9px;    border-right: 0; border-bottom: 0; }
.tpsf-tour__arrow--bottom { bottom: -9px; border-left: 0;  border-top: 0; }

.tpsf-tour__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tpsf-ink);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.tpsf-tour__close:hover,
.tpsf-tour__close:focus-visible { background: var(--tpsf-cream-2); color: var(--tpsf-ink); }

.tpsf-tour__title {
	margin: 0 34px 8px 0;
	font-size: 1.1875rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--tpsf-ink);
}

.tpsf-tour__body {
	margin: 0 0 16px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #4A3418;
}

.tpsf-tour__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tpsf-tour__dots {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: none;
}
.tpsf-tour__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tpsf-line);
	transition: background .2s ease, width .2s ease;
}
.tpsf-tour__dot--on {
	width: 18px;
	border-radius: 4px;
	background: var(--tpsf-accent);
}

.tpsf-tour__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tpsf-tour__btn {
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	padding: 10px 20px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.tpsf-tour__btn--ghost {
	background: transparent;
	color: var(--tpsf-ink-soft);
	border-color: var(--tpsf-line);
}
.tpsf-tour__btn--ghost:hover,
.tpsf-tour__btn--ghost:focus-visible {
	color: var(--tpsf-ink);
	border-color: var(--tpsf-accent);
	background: var(--tpsf-cream-2);
}
.tpsf-tour__btn--primary {
	background: var(--tpsf-accent);
	color: var(--tpsf-ink-strong);
}
.tpsf-tour__btn--primary:hover,
.tpsf-tour__btn--primary:focus-visible { background: #E8AC45; color: var(--tpsf-ink-strong); }

/*
 * style.css 全站有 button:hover { opacity: .6; color: unset }（權重 0,1,1，高於單一 class），
 * 導覽按鈕滑過時會變半透明、文字色被清掉，看起來像停用；點 Next 後游標常停在下一步的 Next 上，
 * 所以會一直維持這個樣子（客戶 2026-09-22）。導覽內一律還原透明度；
 * 文字色則由上方各 :hover 規則明寫（兩個 class 的權重 0,2,0 才蓋得過 color: unset）。
 */
.tpsf-tour button:hover { opacity: 1; }

.tpsf-tour-help {
	display: block;
	margin: 0 auto 8px;
	padding: 0;
	border: 0;
	background: none;
}
/* style.css 全站 button:hover { opacity: .6 }，與 TOP 鈕（.fixed-btn a:hover）一致 */
.fixed-btn .tpsf-tour-help:hover { opacity: 0.95; }
.tpsf-tour-help__btn {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	padding-bottom: 2px;
}

.tpsf-tour-open .modal-backdrop,
.tpsf-tour-open .filter-sidebar-overlay { opacity: 0; }

/*
 * 導覽期間視窗不播淡入／下滑動畫：導覽要等 shown.bs.modal 才量得到視窗內目標的位置，
 * Bootstrap 的 fade（約 0.45 秒）會讓高亮框停在上一步不動、之後才滑過去，體感遲緩。
 * 關掉轉場後 Bootstrap 立即觸發 shown，框可直接移向視窗內的目標（導覽遮罩本來就蓋著，淡入也看不到）。
 */
.tpsf-tour-open .modal.fade,
.tpsf-tour-open .modal.fade .modal-dialog,
.tpsf-tour-open .modal-backdrop.fade { transition: none; }
.tpsf-tour-open .modal.fade .modal-dialog { transform: none; }

/* 結尾畫面：置中、女孩在卡片上方、大標語，下方小按鈕可重看導覽 */
.tpsf-tour__replay[hidden] { display: none; }
.tpsf-tour__replay {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--tpsf-line);
	text-align: center;
}
.tpsf-tour__replay-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--tpsf-ink-soft);
	background: transparent;
	border: 1px solid var(--tpsf-line);
	border-radius: 999px;
	padding: 7px 14px 7px 8px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tpsf-tour__replay-btn:hover,
.tpsf-tour__replay-btn:focus-visible {
	color: var(--tpsf-ink);
	border-color: var(--tpsf-accent);
	background: var(--tpsf-cream-2);
}
.tpsf-tour__replay-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tpsf-accent);
	color: var(--tpsf-ink-strong);
	font-size: 0.75rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tpsf-tour__replay-hint {
	margin: 8px 0 0;
	font-size: 0.78125rem;
	line-height: 1.5;
	color: var(--tpsf-ink-soft);
}

/*
 * 結尾畫面：小女孩放在卡片內、標題上方，背後墊淡黃光暈（客戶 2026-09-22：
 * 原本站在卡片外，被背後的照片干擾看不清楚；卡片與文字也要放大）。
 * 小女孩由 showFinale() 搬進 .tpsf-tour__card。
 */
.tpsf-tour--finale .tpsf-tour__pop {
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	width: 460px;
	max-width: calc(100vw - 32px);
	transform: translate(-50%, -50%);
	display: block;
}
.tpsf-tour--finale .tpsf-tour__card {
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	margin: 0;
	text-align: center;
	padding: 22px 32px 20px;
	border-width: 3px;
	border-radius: 26px;
	background:
		radial-gradient(circle at 50% 118px, var(--tpsf-cream-2) 0 88px, rgba(255, 233, 201, 0) 89px),
		var(--tpsf-cream);
}
.tpsf-tour--finale .tpsf-tour__girl {
	position: static;
	display: block;
	width: 110px;
	margin: 0 auto 14px;
	filter: drop-shadow(0 6px 10px rgba(137, 64, 0, .18));
	animation: tpsf-tour-cheer .9s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tpsf-tour--finale .tpsf-tour__title {
	margin: 0 0 10px;
	font-size: 2.25rem;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: .5px;
}
.tpsf-tour--finale .tpsf-tour__body {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin-bottom: 20px;
}
.tpsf-tour--finale .tpsf-tour__foot { justify-content: center; }
.tpsf-tour--finale .tpsf-tour__dots { display: none; }
.tpsf-tour--finale .tpsf-tour__btn--primary { padding: 14px 36px; font-size: 1.0625rem; }
.tpsf-tour--finale .tpsf-tour__replay { margin-top: 18px; padding-top: 16px; }
.tpsf-tour--finale .tpsf-tour__replay-btn { font-size: 0.875rem; padding: 8px 16px 8px 9px; }
.tpsf-tour--finale .tpsf-tour__replay-icon { width: 20px; height: 20px; font-size: 0.8125rem; }
.tpsf-tour--finale .tpsf-tour__replay-hint { font-size: 0.84375rem; }
.tpsf-tour--finale .tpsf-tour__body,
.tpsf-tour--finale .tpsf-tour__replay-hint { text-wrap: balance; }

@keyframes tpsf-tour-cheer {
	0%   { opacity: 0; transform: translateY(24px) scale(.8); }
	60%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
	100% { opacity: 1; transform: none; }
}

@media screen and (max-width: 767px) {
	.tpsf-tour--finale .tpsf-tour__card {
		padding: 18px 20px 16px;
		background:
			radial-gradient(circle at 50% 98px, var(--tpsf-cream-2) 0 72px, rgba(255, 233, 201, 0) 73px),
			var(--tpsf-cream);
	}
	.tpsf-tour--finale .tpsf-tour__girl { width: 90px; margin-bottom: 10px; }
	.tpsf-tour--finale .tpsf-tour__title { font-size: 1.875rem; }
	.tpsf-tour--finale .tpsf-tour__body { font-size: 1rem; margin-bottom: 16px; }
}

@media screen and (max-width: 767px) {
	/* 手機導覽卡片固定在底部，會蓋住視窗下緣的內容（例：Sign up）；
	   導覽期間給視窗底部留白，讓 .modal 捲得動、把目標讓到卡片上方 */
	.tpsf-tour-open .modal-dialog { margin-bottom: 60vh; }
	.tpsf-tour__pop {
		left: 12px;
		right: 12px;
		bottom: 12px;
		top: auto;
		display: block;
	}
	.tpsf-tour__card {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 18px 16px 14px;
	}
	.tpsf-tour__girl {
		position: absolute;
		bottom: 100%;
		right: 10px;
		width: 86px;
		margin-bottom: -6px;
		transform: none;
	}
	.tpsf-tour__arrow { display: none; }
	.tpsf-tour__title { font-size: 1.0625rem; }
	.tpsf-tour__body { font-size: 0.875rem; margin-bottom: 14px; }
	.tpsf-tour__btn { padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tpsf-tour__spot,
	.tpsf-tour__spot::after,
	.tpsf-tour__girl,
	.tpsf-tour__card,
	.tpsf-tour--finale .tpsf-tour__girl { animation: none; transition: none; }
}

.guide-bubble {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.guide-bubble-wrap { width: 100%; }

.guide-bubble__fill { fill: #FFF3E8; }
.guide-bubble__ink { fill: var(--guide-bubble-ink, #894000); }
.guide-bubble__shape--left {
	display: none;
	fill: #FFF3E8;
	stroke: #894000;
	stroke-width: 5.5;
	stroke-linejoin: round;
}

.guide-bubble__label { overflow: visible; }
.guide-bubble__text {
	display: block; /* 本站泡泡在 <button> 內，文字容器用 span（設計稿為 div） */
	font-family: "Quicksand", "Noto Sans JP", -apple-system, "Segoe UI", sans-serif;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 46px;
	color: #894000;
	text-align: center;
	white-space: nowrap;
}
.guide-bubble__spark,
.guide-bubble__arrow { fill: #894000; }

/*
 * 泡泡本身做「被點一下」的動態（壓下 → 彈起），引導使用者點它；
 * 點下那一刻泡泡外框閃成粉紅、並沿著泡泡原本的形狀（含尾巴）向外擴散淡出。
 * 擴散層是 <use href="#guideBubbleInk">，直接引用泡泡外框路徑，形狀只有一份；
 * 顏色透過 --guide-bubble-ink 換成粉紅（<use> 內的複本仍吃 .guide-bubble__ink 規則，只能靠變數覆寫）。
 * 客戶 2026-09-22：原本另疊一圈紅色橢圓，畫面變成兩個橢圓；游標圖示維持靜態。
 * 泡泡不設任何 hover 效果（放大、縮寬、加速都拿掉）：會和持續播放的動畫互相干擾（客戶 2026-09-22）。
 */
/* style.css 全站 a:hover／button:hover { opacity: .6 } 會讓泡泡滑過時變半透明，這裡抵銷（泡泡不設任何 hover 效果） */
.taiwan-map .icon-10:hover { opacity: 1; }
/* 本站泡泡是 <button>（開啟導覽視窗），清掉按鈕預設內距 */
.taiwan-map .icon-10 { padding: 0; border: 0; background: none; cursor: pointer; }

.guide-bubble-wrap {
	position: relative;
	transform-origin: 65% 95%;
	animation: guide-bubble-tap 2.4s ease-in-out infinite;
}
.guide-bubble__echo {
	--guide-bubble-ink: #FB5A72;
	opacity: 0;
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: 50% 45%;
	animation: guide-bubble-echo 2.4s ease-out infinite;
}

@keyframes guide-bubble-tap {
	0%, 55%, 100% { transform: none; }
	62%           { transform: scale(.9); }
	72%           { transform: scale(1.07) rotate(-2deg); }
	82%           { transform: scale(.98) rotate(1deg); }
	90%           { transform: none; }
}
@keyframes guide-bubble-echo {
	0%, 60% { opacity: 0; transform: none; }
	64%     { opacity: 1; transform: none; }
	100%    { opacity: 0; transform: scale(1.16, 1.3); }
}

@media (prefers-reduced-motion: reduce) {
	.guide-bubble-wrap,
	.guide-bubble__echo { animation: none; }
}

.taiwan-map .icon-1 { z-index: 11; }

.taiwan-map .icon-10 { width: 27.8%; z-index: 12; top: 27.5%; left: -8%; }

@media screen and (min-width: 1401px) and (max-width: 1700px) {
	.taiwan-map .icon-10 { left: -1%; top: 24%; }
}
@media screen and (max-width: 1400px) { .taiwan-map .icon-10 { top: 27%; left: -3%; } }


.taiwan-map .icon-1 {
	width: 23%;
	height: auto;
	left: 2%;

	filter: drop-shadow(0 2px 3px rgba(45, 28, 8, .22));
}

.taiwan-map .icon-1-shadow {
	position: absolute;
	left: 2%;
	width: 23%;

	bottom: -30px;
	height: 26px;
	z-index: 10;
	pointer-events: none;

	background: radial-gradient(ellipse 36% 52% at 58% 55%,
		rgba(45, 28, 8, .24) 0%,
		rgba(45, 28, 8, .12) 55%,
		rgba(45, 28, 8, 0) 75%);
}


.taiwan-map .icon-2 { left: 27%; }

.taiwan-map-content { background-color: #B5DEFF; }

/* 地圖自動輪播的播放／暫停鈕（外觀沿用 style.css .swiper-rotation-toggle），放在地圖區右上角的空白海面 */
.taiwan-map .map-rotation-toggle {
	top: 16px;
	right: 16px;
}
.taiwan-map .map-rotation-toggle:hover { opacity: 1; background: #FFF3E8; }

/*
 * 泡泡／小女孩／書本的寬度全斷點沿用桌機百分比（等比縮小，PM 2026-09-14 定案）。
 * 但窄螢幕的容器比例比桌機高（base style.css 的 991px／600px 規則），小女孩頂緣
 * 會落在容器 54%～60% 處；泡泡若沿用桌機 top 會離小女孩很遠、蓋到地圖。
 * 所以只有「泡泡的 top」依斷點改：一律讓泡泡底緣貼在小女孩頭頂上方約 1%，
 * 對齊桌機的相對位置。數值是用多尺寸預覽台量測小女孩頂緣百分比算出來的，
 * 改小女孩尺寸或容器高度時要重新量。
 */
@media screen and (min-width: 1200px) and (max-width: 1400px) {
	.taiwan-map .icon-1,
	.taiwan-map .icon-1-shadow { width: 20%; }
	.taiwan-map .icon-2 { width: 8.8%; }
	.taiwan-map .icon-10 { width: 24.5%; top: 46%; left: -2%; }
}
@media screen and (max-width: 991.98px) {
	.taiwan-map .icon-10 { top: 42.5%; left: -3%; }
}
@media screen and (max-width: 600px) {
	.taiwan-map .icon-10 { top: 49.5%; width: 27.8%; }
	.taiwan-map .icon-1 { left: 2%; }
}