@font-face{
  font-family:'GenSenRounded';
  src:url('/source/GenSenRounded2TW-R.otf') format('opentype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'GenSenRounded';
  src:url('/source/GenSenRounded2TW-M.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'GenSenRounded';
  src:url('/source/GenSenRounded2TW-H.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* 韓國奶油色系 Korean Butter Cream */
  --cream:#FFF9F0;--cream-dark:#F7EDDF;--cream-light:#FFFCF7;
  --brown:#9C8167;--brown-light:#B89B7A;--brown-dark:#6B5344;
  --beige:#F0E4D7;--beige-light:#F7F0E8;
  --sage:#A7B89A;--sage-light:#C4D4B8;--sage-dark:#8AA07A;
  --pink:#E8C4C0;--gold:#D4AA78;--gold-light:#ECDCC0;
  --butter:#FFF5E6;--latte:#E8D4C4;--milk:#FFFEF9;
  --text:#5C4D3D;--text-light:#8A7A68;--text-muted:#A89888;
  /* Enhanced shadows - warmer */
  --shadow-sm:0 2px 8px rgba(120,90,60,0.05);
  --shadow-md:0 8px 24px rgba(120,90,60,0.07);
  --shadow-lg:0 16px 48px rgba(120,90,60,0.10);
  --shadow-xl:0 24px 64px rgba(120,90,60,0.14);
  --shadow-glow:0 8px 32px rgba(167,184,154,0.20);
  /* Glassmorphism - creamier */
  --glass-bg:rgba(255,252,247,0.90);
  --glass-border:rgba(255,255,250,0.7);
}

/* Dark Mode - 韓式深夜咖啡廳風格 */
[data-theme="dark"]{
  --cream:#1a1612;--cream-dark:#151210;--cream-light:#221d18;
  --brown:#d4b896;--brown-light:#e8cdb0;--brown-dark:#a08060;
  --beige:#2a241e;--beige-light:#332c24;
  --sage:#7a9a6a;--sage-light:#8aaa7a;--sage-dark:#5a7a4a;
  --pink:#a08080;--gold:#c4a060;--gold-light:#8a7a5a;
  --butter:#2a2418;--latte:#3a302a;--milk:#1e1a16;
  --text:#e8e0d8;--text-light:#b8a898;--text-muted:#887868;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.5);
  --shadow-xl:0 24px 64px rgba(0,0,0,0.6);
  --shadow-glow:0 8px 32px rgba(122,154,106,0.15);
  --glass-bg:rgba(26,22,18,0.95);
  --glass-border:rgba(50,44,36,0.8);
}
[data-theme="dark"] body{background:linear-gradient(180deg,var(--cream-light) 0%,var(--cream) 100%)}
[data-theme="dark"] img{opacity:0.92}
[data-theme="dark"] .place-card,[data-theme="dark"] .product-card,[data-theme="dark"] .stay-card{background:var(--cream-light);border-color:var(--beige)}
[data-theme="dark"] .nav-glass,[data-theme="dark"] .mobile-tabs{background:var(--glass-bg);border-color:var(--glass-border)}
[data-theme="dark"] .themes-panel{background:var(--cream)}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:var(--beige);border-color:var(--beige-light);color:var(--text)}
[data-theme="dark"] .city-card{background:var(--cream-light)}
[data-theme="dark"] .stat-card{background:var(--beige)}
[data-theme="dark"] .tools-panel{background:var(--cream)}
[data-theme="dark"] .footer{background:linear-gradient(160deg,#2a2520 0%,#1a1815 100%)}
[data-theme="dark"] .mobile-bottom-nav{background:rgba(35,30,28,0.98);border-top-color:rgba(80,70,60,0.5)}
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--cream)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--sage-dark);border-color:var(--cream)}

/* ===== CUSTOM SCROLLBAR (信紙風格) ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,var(--cream) 0%,var(--beige-light) 100%);border-radius:10px;border:1px solid var(--beige)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--sage-light) 0%,var(--sage) 100%);border-radius:10px;border:2px solid var(--cream);transition:all 0.3s}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--sage) 0%,var(--sage-dark) 100%)}
::-webkit-scrollbar-corner{background:var(--cream)}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--sage) var(--cream)}

html{scroll-behavior:smooth;font-size:20px}
body{font-family:"GenSenRounded","Noto Sans TC",sans-serif;font-weight:400;background:linear-gradient(180deg,var(--cream-light) 0%,var(--cream) 100%);color:var(--text);line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem}
h1,h2,h3,h4,h5,h6,.section-header h2,.page-hero h1,.stat-number,.city-card-header h4,.place-card-content h4,.product-info h4,.stay-info h4,.tools-panel-header h3,.weather-info h4,.exchange-info h4,.footer-logo{font-weight:700}
small,.note,.caption,.text-small,.stat-label,.hero-badge{font-weight:300}

.particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;opacity:0;animation:floatUp 12s infinite ease-out}
.particle.star::before{content:'✨';font-size:12px}
.particle.leaf::before{content:'🍂';font-size:14px}
.particle.flower::before{content:'🌸';font-size:12px}
.particle.circle{background:var(--sage);opacity:0.2}
@keyframes floatUp{0%{transform:translateY(100vh) rotate(0deg) scale(0);opacity:0}10%{opacity:0.8}90%{opacity:0.8}100%{transform:translateY(-100px) rotate(720deg) scale(1);opacity:0}}

.header{background:var(--glass-bg);padding:16px 0;position:fixed;width:100%;top:0;z-index:1000;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--glass-border);transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}
.header.scrolled{background:rgba(255,253,251,0.95);box-shadow:var(--shadow-md);padding:12px 0}
.header-content{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:14px;font-family:"GenSenRounded","Noto Sans TC",sans-serif;font-weight:700;font-size:1.35rem;color:var(--brown);text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);letter-spacing:0.5px}
.logo:hover{transform:translateY(-2px)}
.logo-icon{width:46px;height:46px;background:linear-gradient(145deg,var(--sage),var(--sage-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;animation:logoFloat 4s ease-in-out infinite;box-shadow:0 6px 24px rgba(156,175,136,0.35),inset 0 1px 0 rgba(255,255,255,0.3)}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.header-badge{display:none;font-size:0.65rem;color:var(--brown);letter-spacing:1px;opacity:0.7}
.nav-links{display:flex;gap:20px;flex-wrap:wrap}
.nav-links a{color:var(--brown);text-decoration:none;font-family:"GenSenRounded","Noto Sans TC",sans-serif;font-weight:700;font-size:0.85rem;padding:5px 10px;transition:all 0.4s;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nav-links a::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--sage),var(--gold));transition:all 0.4s;transform:translateX(-50%);border-radius:2px}
.nav-links a:hover{color:var(--sage);transform:translateY(-3px)}
.nav-links a:hover::before{width:100%}
@media(max-width:768px){.nav-links{display:none}.header-badge{display:block}}

.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,var(--cream-dark) 50%,var(--beige) 100%);padding-top:80px}
.hero-bg{position:absolute;inset:0}
.hero-bg .floating-emoji{position:absolute;font-size:60px;opacity:0.1;animation:floatEmoji 25s infinite linear}
@keyframes floatEmoji{0%{transform:translate(-100px, 100vh) rotate(0deg)}100%{transform:translate(calc(100vw + 100px), -100px) rotate(360deg)}}
.hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(100px);opacity:0.3;animation:glowPulse 8s ease-in-out infinite}
.hero-glow.glow1{background:var(--sage);top:-200px;left:-200px}
.hero-glow.glow2{background:var(--gold);bottom:-200px;right:-200px;animation-delay:4s}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:0.3}50%{transform:scale(1.2);opacity:0.5}}
.hero-content{position:relative;z-index:10;padding:0 20px;width:100%;max-width:900px}
.hero-badge{display:inline-block;background:linear-gradient(135deg,var(--beige),white);color:var(--brown);padding:14px 28px;border-radius:30px;font-size:0.9rem;margin-bottom:25px;letter-spacing:4px;box-shadow:0 10px 40px rgba(0,0,0,0.1);animation:badgePop 1s cubic-bezier(0.68,-0.55,0.265,1.55) forwards;opacity:0;transform:scale(0)}
@media(max-width:768px){.hero-badge{display:none}}
@keyframes badgePop{to{opacity:1;transform:scale(1)}}
.hero-subtitle-small{font-size:1.3rem;color:var(--text-light);margin:0 auto 25px;opacity:0;animation:fadeSlideUp 1s ease 0.3s forwards}
.hero-subtitle-small .typing{border-right:2px solid var(--sage);animation:blink 1s infinite}
@keyframes blink{0%,100%{border-color:var(--sage)}50%{border-color:transparent}}
@keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(30px)}}
.stats-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:35px;padding:0 20px;max-width:700px;margin-left:auto;margin-right:auto}
/* Glassmorphism 統計卡片 */
.stat-card{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  padding:28px 18px;
  border-radius:24px;
  box-shadow:0 8px 32px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.5);
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  opacity:0;animation:cardFlipIn 0.8s ease forwards;
  animation-delay:calc(0.5s + var(--i) * 0.15s);
  position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.5) 0%,transparent 60%);
  pointer-events:none;transition:opacity 0.4s;
}
.stat-card::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  transition:left 0.6s ease;
}
.stat-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 20px 48px rgba(0,0,0,0.12),var(--shadow-glow)}
.stat-card:hover::after{left:100%}
@keyframes cardFlipIn{0%{opacity:0;transform:translateY(40px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
.stat-icon{font-size:2rem;margin-bottom:10px;animation:iconFloat 3s ease-in-out infinite;animation-delay:calc(var(--i) * 0.2s)}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.stat-number{font-family:"Gowun Batang",serif;font-size:2.5rem;background:linear-gradient(135deg,var(--brown),var(--sage));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:numberPulse 2s ease-in-out infinite;animation-delay:calc(var(--i) * 0.1s)}
@keyframes numberPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.stat-label{color:var(--text);font-size:1rem;margin-top:8px;font-weight:500;letter-spacing:0.5px;background:linear-gradient(135deg,var(--brown),var(--sage-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);animation:scrollBounce 2s infinite;cursor:pointer}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
.scroll-hint i{font-size:1.8rem;color:var(--brown);opacity:0.6}
.scroll-hint span{display:block;font-size:0.8rem;color:var(--text-light);margin-top:5px}

/* ===== TABLET (768px - 1024px) ===== */
@media(max-width:1024px){
  .hero-content{max-width:700px}
  .hero-badge{padding:12px 24px;font-size:0.85rem}
  .hero-subtitle-small{font-size:1.2rem}
  .stats-container{gap:15px;max-width:600px}
  .stat-card{padding:20px 12px}
  .stat-icon{font-size:1.8rem}
  .stat-number{font-size:2.2rem}
  .stat-label{font-size:0.9rem}
}

/* ===== MOBILE (< 768px) ===== */
@media(max-width:768px){
  .hero{padding-top:70px}
  .hero-content{padding:0 15px}
  .hero-badge{padding:10px 20px;font-size:0.75rem;letter-spacing:2px;margin-bottom:20px}
  .hero-subtitle-small{font-size:1rem;margin-bottom:20px}
  .stats-container{grid-template-columns:repeat(2,1fr);gap:12px;max-width:100%;padding:0 15px}
  .stat-card{padding:18px 10px;border-radius:16px}
  .stat-icon{font-size:1.5rem;margin-bottom:8px}
  .stat-number{font-size:1.8rem}
  .stat-label{font-size:0.8rem}
  .scroll-hint{bottom:20px}
  .scroll-hint i{font-size:1.5rem}
}

/* ===== SMALL MOBILE (< 400px) ===== */
@media(max-width:400px){
  .hero-badge{padding:8px 16px;font-size:0.7rem;letter-spacing:1px}
  .hero-subtitle-small{font-size:0.9rem}
  .stats-container{gap:10px;padding:0 10px}
  .stat-card{padding:15px 8px;border-radius:14px}
  .stat-icon{font-size:1.3rem}
  .stat-number{font-size:1.5rem}
  .stat-label{font-size:0.75rem}
}

.main-content{max-width:1200px;margin:0 auto;padding:100px 32px;padding-bottom:100px;position:relative;z-index:1}
#page1 .main-content,#page2 .main-content{padding-top:20px}
@media(max-width:768px){.main-content{padding-bottom:120px}}
.section{margin-bottom:120px;opacity:1;transform:translateY(0);transition:all 0.8s cubic-bezier(0.4,0,0.2,1)}
.section.visible{opacity:1;transform:translateY(0)}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-family:"Gowun Batang",serif;font-size:2.4rem;color:var(--brown);font-weight:400;margin-bottom:16px;position:relative;display:inline-block;letter-spacing:1px}
.section-header h2::before,.section-header h2::after{content:'✦';position:absolute;top:50%;transform:translateY(-50%);color:var(--sage);font-size:0.9rem;opacity:0.7;animation:starSpin 6s linear infinite}
.section-header h2::before{left:-36px}
.section-header h2::after{right:-36px;animation-direction:reverse}
@keyframes starSpin{to{transform:translateY(-50%) rotate(360deg)}}
.section-header p{color:var(--text-light);font-size:1.05rem;letter-spacing:0.3px}
.section-header .divider{width:72px;height:3px;background:linear-gradient(90deg,var(--sage),var(--gold));margin:18px auto;border-radius:3px}

/* ===== PAGES & NAVIGATION ===== */
.pages-container{position:relative;overflow-x:hidden;overflow-y:visible;width:100%}
.page-link{cursor:pointer;transition:all 0.3s}
.page-link.active{color:var(--sage);font-weight:600}
.page-hero{padding:100px 30px 15px;text-align:center;background:linear-gradient(135deg,var(--cream),var(--beige))}
.page-hero h1{font-family:"Gowun Batang",serif;font-size:1.6rem;color:var(--brown);margin-bottom:5px}
.page-hero p{color:var(--text-light);font-size:0.85rem}

/* ===== STORIES ===== */
.stories-section{margin:30px 0}
.story-name{display:block;font-size:0.75rem;margin-top:6px;color:var(--text)}
.story-time{display:block;font-size:0.65rem;color:var(--text-light)}

/* Story Viewer */
.story-viewer{position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s}
.story-viewer.active{opacity:1;pointer-events:auto}
.story-viewer-content{position:relative;max-width:400px;width:90%;max-height:90vh}
.story-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.3);border-radius:3px;overflow:hidden}
.story-progress-bar{height:100%;background:white;width:0;transition:width 5s linear}
.story-viewer-header{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;z-index:10}
.story-viewer-user{display:flex;align-items:center;gap:10px}
.story-viewer-user img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid white}
.story-viewer-user span{color:white;font-weight:500}
.story-viewer-close{color:white;font-size:2rem;cursor:pointer}
.story-viewer-content>img{width:100%;border-radius:12px}
.story-viewer-text{position:absolute;bottom:20px;left:20px;right:20px;color:white;text-align:center;font-size:1rem;text-shadow:0 2px 4px rgba(0,0,0,0.5)}

/* ===== PRODUCTS ===== */
.products-filter,.stays-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:15px 20px;margin-bottom:15px}
/* 微互動按鈕 */
.filter-btn{
  padding:10px 20px;
  border:2px solid var(--beige);
  border-radius:25px;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(10px);
  cursor:pointer;
  font-size:0.85rem;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  font-weight:500;
  position:relative;
  overflow:hidden;
}
.filter-btn::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(167,184,154,0.3) 0%,transparent 70%);
  opacity:0;transition:opacity 0.3s,transform 0.3s;
  transform:scale(0);
}
.filter-btn:hover{
  border-color:var(--sage);
  background:rgba(167,184,154,0.15);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(167,184,154,0.25);
}
.filter-btn:hover::after{opacity:1;transform:scale(1.5)}
.filter-btn:active{transform:translateY(-1px) scale(0.98)}
.filter-btn.active{
  background:linear-gradient(135deg,var(--sage),var(--sage-dark));
  color:white;
  border-color:var(--sage);
  box-shadow:0 4px 16px rgba(167,184,154,0.4);
}
.products-grid,.stays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;padding:0 32px 60px}
.product-card{background:white;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md);cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(232,221,212,0.5)}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.product-img{position:relative;height:200px;overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.product-card:hover .product-img img{transform:scale(1.1)}
.product-cat{position:absolute;top:15px;right:15px;background:white;padding:6px 12px;border-radius:20px;font-size:0.85rem}
.product-info{padding:20px}
.product-info h4{font-family:"Gowun Batang",serif;color:var(--brown);font-size:1.15rem;margin-bottom:5px}
.product-kr{color:var(--text-light);font-size:0.85rem;margin-bottom:8px}
.product-price{color:var(--sage);font-size:1.3rem;font-weight:700;margin-bottom:5px}
.product-rating{margin-bottom:10px}
.product-note{color:var(--text);font-size:0.9rem;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-where{color:var(--text-light);font-size:0.85rem}
.product-where i{margin-right:5px}

/* ===== STAYS ===== */
.stay-card{background:white;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(232,221,212,0.5)}
.stay-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.stay-img{position:relative;height:200px;overflow:hidden;cursor:pointer}
.stay-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.stay-card:hover .stay-img img{transform:scale(1.1)}
.stay-city{position:absolute;top:15px;left:15px;background:var(--sage);color:white;padding:6px 14px;border-radius:20px;font-size:0.85rem}
.stay-info{padding:20px}
.stay-info h4{font-family:"Gowun Batang",serif;color:var(--brown);font-size:1.2rem;margin-bottom:8px}
.stay-rating{margin-bottom:8px}
.stay-price{color:var(--sage);font-size:1.4rem;font-weight:700;margin-bottom:10px}
.stay-price span{font-size:0.9rem;font-weight:400;color:var(--text-light)}
.stay-address{color:var(--text-light);font-size:0.85rem;margin-bottom:8px}
.stay-address i{margin-right:5px}
.stay-note{color:var(--text);font-size:0.9rem;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stay-book{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:var(--brown);color:white;border-radius:25px;text-decoration:none;font-size:0.9rem;transition:all 0.2s}
.stay-book:hover{background:var(--sage)}

/* ===== XHS (小紅書) STYLE + BENTO GRID ===== */
.xhs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  padding:0 16px 60px;
}
/* Bento Grid - 特色卡片放大 */
.xhs-card:nth-child(3n+1){grid-column:span 1}
.xhs-card:nth-child(5n){grid-row:span 2}
@media(min-width:768px){
  .xhs-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .xhs-card:nth-child(7n+1){grid-column:span 2}
}

/* Glassmorphism 卡片 */
.xhs-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow:0 4px 24px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  border:1px solid rgba(255,255,255,0.6);
  position:relative;
}
.xhs-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,transparent 50%);
  pointer-events:none;z-index:1;
  opacity:0;transition:opacity 0.4s;
}
.xhs-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,0.12),0 8px 16px rgba(0,0,0,0.08);
}
.xhs-card:hover::before{opacity:1}
.xhs-card:active{transform:translateY(-4px) scale(0.98)}

.xhs-card-img{position:relative;overflow:hidden;background:var(--cream);min-height:220px}
.xhs-card-img img{width:100%;display:block;min-height:220px;object-fit:cover;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.xhs-card:hover .xhs-card-img img{transform:scale(1.08)}
.xhs-card-img video{width:100%;display:block;object-fit:cover;background:var(--cream);min-height:220px;transition:transform 0.6s}
.xhs-card:hover .xhs-card-img video{transform:scale(1.08)}
.xhs-photo-count{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.5);color:white;padding:2px 6px;border-radius:8px;font-size:0.55rem;display:flex;align-items:center;gap:2px}
.xhs-play-icon{position:absolute;top:6px;right:6px;font-size:0.55rem;color:white;background:rgba(0,0,0,0.5);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.xhs-card-info{padding:10px 12px 6px}
.xhs-card-info h4{font-family:'Noto Sans TC',sans-serif;color:var(--brown);font-size:0.85rem;font-weight:500;margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xhs-desc{display:none}
.xhs-price{color:var(--sage);font-size:1rem;font-weight:700}
.xhs-price span{font-size:0.75rem;font-weight:400;color:var(--text-light)}
.xhs-tags{display:none}
.xhs-tag{background:var(--cream);color:var(--text);padding:3px 8px;border-radius:10px;font-size:0.7rem}
.xhs-card-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 12px 10px;border-top:none}
.xhs-author{display:flex;align-items:center;gap:6px}
.xhs-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;border:none}
.xhs-author span{font-size:0.65rem;color:var(--text-light)}
.xhs-heart{font-size:0.65rem;color:var(--text-light);display:flex;align-items:center;gap:3px}
.xhs-heart::before{content:'♡';font-size:0.75rem}
.xhs-city{position:absolute;top:6px;left:6px;background:var(--sage);color:white;padding:2px 6px;border-radius:8px;font-size:0.55rem}
.xhs-rating{font-size:0.75rem;margin-top:4px}

@media(max-width:768px){
  .xhs-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:0 12px 100px}
  /* 手機版取消 Bento 放大 */
  .xhs-card:nth-child(5n){grid-row:span 1}
  .xhs-card:nth-child(7n+1){grid-column:span 1}
  .xhs-card{border-radius:16px}
  .xhs-card:hover{transform:none;box-shadow:0 4px 24px rgba(0,0,0,0.06)}
  .xhs-card-img{min-height:180px}
  .xhs-card-img img{min-height:180px}
  .xhs-card-img video{min-height:180px}
  .xhs-card-info{padding:12px 14px 6px}
  .xhs-card-info h4{font-size:0.9rem}
  .xhs-card-footer{padding:5px 14px 12px}
  .xhs-avatar{width:20px;height:20px}
  .xhs-author span{font-size:0.65rem}
  .xhs-play-icon{width:22px;height:22px;font-size:0.6rem;top:8px;right:8px}
  .xhs-heart{font-size:0.65rem}
  .xhs-heart::before{font-size:0.7rem}
  .xhs-city{font-size:0.6rem;padding:3px 8px;top:8px;left:8px}
  .xhs-photo-count{font-size:0.6rem;padding:3px 8px;top:8px;right:8px}
}

.empty{text-align:center;padding:60px 20px;color:var(--text-light)}
.empty i{font-size:3rem;margin-bottom:15px;display:block;opacity:0.3}

@media(max-width:768px){
  .page-hero{padding:100px 15px 8px}
  .page-hero h1{font-size:1.2rem;margin-bottom:3px}
  .page-hero p{font-size:0.8rem}
  .products-filter,.stays-filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:10px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px}
  .products-filter::-webkit-scrollbar,.stays-filter::-webkit-scrollbar{display:none}
  .filter-btn{flex-shrink:0;padding:8px 16px;font-size:0.8rem}
  .products-grid,.stays-grid{grid-template-columns:1fr;padding:0 15px 100px}
  .story-avatar-ring{width:60px;height:60px}
  .story-avatar-ring img{width:52px;height:52px}
}

/* ===== FLOATING TOOLS ===== */
.floating-tools-btn{display:none}
.floating-tools-btn:hover{transform:scale(1.1);box-shadow:0 10px 40px rgba(156,175,136,0.55)}
.floating-tools-btn.hidden{opacity:0;pointer-events:none;transform:scale(0)}

.tools-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;opacity:0;pointer-events:none;transition:opacity 0.3s}
.tools-overlay.open{opacity:1;pointer-events:auto}

/* Glassmorphism 工具面板 */
.tools-panel{
  position:fixed;bottom:0;right:0;
  width:520px;max-width:100%;height:88vh;
  background:rgba(255,252,247,0.85);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:28px 28px 0 0;
  z-index:10001;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  display:flex;flex-direction:column;
  box-shadow:0 -15px 60px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.5);
  border-bottom:none;
}
.tools-panel.open{transform:translateY(0)}
.tools-panel-header{padding:20px 25px;border-bottom:1px solid var(--beige);display:flex;justify-content:space-between;align-items:center}
.tools-panel-header h3{font-family:"Gowun Batang",serif;color:var(--brown);font-size:1.3rem;margin:0}
.tools-panel-close{width:36px;height:36px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brown);transition:all 0.2s}
.tools-panel-close:hover{background:var(--beige)}
.tools-panel-tabs{display:flex;padding:15px 15px;gap:8px;border-bottom:1px solid var(--beige);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tools-panel-tabs::-webkit-scrollbar{display:none}
.tools-panel-tabs .tools-tab{flex:0 0 auto;padding:10px 16px;border-radius:12px;border:none;background:var(--cream);cursor:pointer;font-size:0.85rem;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text);white-space:nowrap}
.tools-panel-tabs .tools-tab.active{background:var(--brown);color:white}
.tools-panel-tabs .tools-tab:hover:not(.active){background:var(--cream-dark)}
.tools-panel-content{flex:1;overflow-y:auto;padding:12px}

/* Tools Panel Weather & Exchange */
.tools-panel .weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tools-panel .weather-card{padding:12px;border-radius:12px}
.tools-panel .weather-icon{font-size:1.8rem}
.tools-panel .weather-temp{font-size:1.4rem}
.tools-panel .weather-info h4{font-size:1rem;margin-bottom:2px}
.tools-panel .weather-info span{font-size:0.75rem}
.tools-panel .exchange-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tools-panel .exchange-card{padding:12px;border-radius:12px}
.tools-panel .exchange-icon{font-size:1.4rem}
.tools-panel .exchange-rate{font-size:1.3rem}
.tools-panel .exchange-info h4{font-size:0.95rem;margin-bottom:2px}
.tools-panel .exchange-info span{font-size:0.75rem}

@media(max-width:768px){
  .tools-panel{width:100%;height:92vh;border-radius:20px 20px 0 0;z-index:10001}
  .tools-overlay{z-index:10000}
}

/* ===== TOOLS SECTION (keeping styles for panel) ===== */
.tools-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px}
.tools-tab{padding:15px 35px;background:white;border:2px solid var(--beige);border-radius:30px;cursor:pointer;font-size:0.95rem;font-weight:500;transition:all 0.3s;display:flex;align-items:center;gap:8px}
.tools-tab.active{background:var(--brown);color:white;border-color:var(--brown)}
.tools-tab:hover:not(.active){background:var(--cream-dark)}
.tools-tab i{font-size:1.1rem}
.tools-content{display:none}
.tools-content.active{display:block}

/* ===== WEATHER ===== */
.weather-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.weather-card{background:white;border-radius:24px;padding:32px;border:1px solid rgba(232,221,212,0.5);text-align:center;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-sm)}
.weather-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.weather-icon{font-size:4rem;margin-bottom:15px;animation:weatherFloat 3s ease-in-out infinite}
@keyframes weatherFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.weather-info h4{font-family:"Gowun Batang",serif;font-size:1.3rem;color:var(--brown);margin-bottom:5px}
.weather-kr{font-size:0.9rem;color:var(--text-light);margin-bottom:15px}
.weather-temp{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--brown),var(--sage));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}
.weather-desc{color:var(--text-light);font-size:0.95rem;margin-bottom:15px}
.weather-details{display:flex;justify-content:center;gap:20px;font-size:0.85rem;color:var(--text-light)}
.weather-details i{color:var(--sage);margin-right:5px}

/* ===== EXCHANGE ===== */
.exchange-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.exchange-card{background:white;border-radius:24px;padding:36px;border:1px solid rgba(232,221,212,0.5);text-align:center;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-sm)}
.exchange-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.exchange-icon{font-size:2.5rem;margin-bottom:15px}
.exchange-info h4{font-family:"Gowun Batang",serif;font-size:1.3rem;color:var(--brown);margin-bottom:5px}
.exchange-rate{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--sage),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}
.exchange-desc{color:var(--text-light);font-size:0.9rem;margin-bottom:20px}
.exchange-calc{display:flex;flex-direction:column;gap:10px;background:var(--cream);padding:15px;border-radius:15px}
.exchange-calc input{padding:12px 15px;border:2px solid var(--beige);border-radius:12px;font-size:1rem;text-align:center;width:100%}
.exchange-calc input:focus{outline:none;border-color:var(--sage)}
.exchange-result{font-size:1.1rem;font-weight:600;color:var(--brown);padding:10px;background:white;border-radius:10px}

/* ===== GUESTBOOK (留言板) ===== */
.guestbook-form{padding:15px;background:var(--beige-light);border-radius:16px;margin-bottom:15px}
.gb-emoji-row{display:flex;gap:8px;margin-bottom:12px;justify-content:center}
.gb-emoji-btn{font-size:1.5rem;cursor:pointer;padding:8px;border-radius:10px;transition:all 0.2s;opacity:0.5}
.gb-emoji-btn:hover{opacity:0.8;transform:scale(1.1)}
.gb-emoji-btn.active{opacity:1;background:var(--sage-light);transform:scale(1.15)}
.guestbook-form input,.guestbook-form textarea{width:100%;padding:12px;border:2px solid var(--beige);border-radius:12px;font-size:0.95rem;margin-bottom:10px;font-family:inherit;background:white}
.guestbook-form input:focus,.guestbook-form textarea:focus{outline:none;border-color:var(--sage)}
.guestbook-form textarea{min-height:80px;resize:none}
.guestbook-form button{width:100%;padding:12px;background:var(--sage);color:white;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.2s}
.guestbook-form button:hover{background:var(--sage-dark);transform:translateY(-2px)}
.guestbook-list{max-height:300px;overflow-y:auto}
.gb-item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--beige);align-items:flex-start}
.gb-item:last-child{border-bottom:none}
.gb-emoji{font-size:1.8rem;flex-shrink:0}
.gb-content{flex:1;min-width:0}
.gb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.gb-header strong{color:var(--brown);font-size:0.9rem}
.gb-date{color:var(--text-muted);font-size:0.75rem}
.gb-msg{color:var(--text);font-size:0.9rem;line-height:1.5;word-break:break-word}
.gb-empty{text-align:center;padding:30px;color:var(--text-muted)}
.gb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* Facebook Login for Guestbook */
.fb-login-area{text-align:center;padding:20px 0}
.fb-login-hint{color:var(--text-muted);margin-bottom:15px;font-size:0.9rem}
.fb-login-btn{background:#1877f2;color:white;border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all 0.2s}
.fb-login-btn:hover{background:#166fe5;transform:translateY(-2px)}
.fb-login-btn i{font-size:1.2rem}
.fb-user-area{}
.fb-user-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:12px;background:white;border-radius:12px}
.fb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.fb-user-info span{flex:1;font-weight:500;color:var(--brown)}
.fb-logout-btn{background:transparent;border:1px solid var(--beige);padding:6px 12px;border-radius:6px;font-size:0.8rem;color:var(--text-muted);cursor:pointer;transition:all 0.2s}
.fb-logout-btn:hover{background:var(--beige-light);color:var(--brown)}
[data-theme="dark"] .fb-user-info{background:rgba(40,35,30,0.5)}
[data-theme="dark"] .fb-login-btn{background:#1877f2}
[data-theme="dark"] .fb-logout-btn{border-color:rgba(255,255,255,0.2)}

/* ===== EXPENSES (費用記帳) ===== */
.expense-summary{background:linear-gradient(135deg,var(--sage-light),var(--sage));border-radius:16px;padding:20px;margin-bottom:15px;color:white;text-align:center}
.exp-total-amount{font-size:1.8rem;font-weight:700}
.exp-total-twd{font-size:0.9rem;opacity:0.9;margin-top:5px}
.exp-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.exp-cat-tag{background:rgba(255,255,255,0.25);padding:4px 10px;border-radius:20px;font-size:0.75rem}
.expense-form{padding:15px;background:var(--beige-light);border-radius:16px;margin-bottom:15px}
.exp-row{display:flex;gap:10px;margin-bottom:10px}
.expense-form select,.expense-form input{padding:12px;border:2px solid var(--beige);border-radius:12px;font-size:0.95rem;font-family:inherit;background:white}
.expense-form select{flex:1}
.expense-form input[type="number"]{flex:1;width:100%}
.expense-form input[type="text"]{width:100%;margin-bottom:10px}
.expense-form select:focus,.expense-form input:focus{outline:none;border-color:var(--sage)}
.expense-form button{width:100%;padding:12px;background:var(--sage);color:white;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.2s}
.expense-form button:hover{background:var(--sage-dark)}
.expense-list{max-height:250px;overflow-y:auto}
.exp-item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--beige);align-items:center}
.exp-item:last-child{border-bottom:none}
.exp-icon{font-size:1.5rem}
.exp-info{flex:1;min-width:0}
.exp-desc{font-size:0.9rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-amount{font-size:0.85rem;color:var(--sage-dark);font-weight:600}
.exp-del{background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:5px;opacity:0.5;transition:all 0.2s}
.exp-del:hover{opacity:1;color:#e74c3c}
.exp-empty{text-align:center;padding:30px;color:var(--text-muted)}

/* ===== EXPORT (資料匯出) ===== */
.export-section{text-align:center;padding:20px}
.export-section h4{color:var(--brown);margin-bottom:8px;font-size:1.1rem}
.export-section p{color:var(--text-muted);font-size:0.85rem;margin-bottom:20px}
.export-btns{display:flex;flex-direction:column;gap:12px}
.export-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;background:var(--beige-light);color:var(--brown);text-decoration:none;border-radius:12px;font-size:0.95rem;font-weight:500;transition:all 0.2s;border:2px solid var(--beige)}
.export-btn:hover{background:var(--sage-light);border-color:var(--sage);color:var(--sage-dark)}
.export-btn i{font-size:1.1rem}

/* ===== TRIP PLANNER (行程規劃) ===== */
.trip-header{display:flex;gap:10px;margin-bottom:15px}
.trip-header select{flex:1;padding:12px;border:2px solid var(--beige);border-radius:12px;font-size:0.95rem;background:white}
.trip-new-btn{width:44px;height:44px;border:none;background:var(--sage);color:white;border-radius:12px;font-size:1.5rem;cursor:pointer;transition:all 0.2s}
.trip-new-btn:hover{background:var(--sage-dark)}
.trip-items{max-height:220px;overflow-y:auto;margin-bottom:15px}
.trip-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--beige-light);border-radius:12px;margin-bottom:8px;cursor:grab}
.trip-item:active{cursor:grabbing}
.trip-num{width:28px;height:28px;background:var(--sage);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:600;flex-shrink:0}
.trip-item-info{flex:1;min-width:0}
.trip-item-name{font-size:0.9rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trip-item-del{background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:5px;opacity:0.5;transition:all 0.2s}
.trip-item-del:hover{opacity:1;color:#e74c3c}
.trip-add{display:flex;gap:10px}
.trip-add input{flex:1;padding:12px;border:2px solid var(--beige);border-radius:12px;font-size:0.95rem}
.trip-add button{padding:12px 20px;background:var(--sage);color:white;border:none;border-radius:12px;font-weight:500;cursor:pointer;transition:all 0.2s}
.trip-add button:hover{background:var(--sage-dark)}
.trip-empty{text-align:center;padding:30px;color:var(--text-muted)}

/* ===== KAKAO MAP ===== */
.map-artsy-container{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative}
.map-artsy-frame{position:relative;background:linear-gradient(145deg,#fffdf9,#faf6f0,#f5efe5);border-radius:20px;padding:25px;box-shadow:0 15px 50px rgba(139,115,85,0.12),inset 0 2px 10px rgba(255,255,255,0.8);border:2px solid rgba(139,115,85,0.15);width:100%;max-width:1200px}
.map-artsy-corner{position:absolute;width:40px;height:40px;border:3px solid var(--sage);opacity:0.4}
.map-artsy-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.map-artsy-corner.tr{top:12px;right:12px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.map-artsy-corner.bl{bottom:12px;left:12px;border-right:none;border-top:none;border-radius:0 0 0 8px}
.map-artsy-corner.br{bottom:12px;right:12px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.map-wrapper{background:white;border-radius:16px;padding:8px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(139,115,85,0.1);overflow:hidden}
#kakaoMap{width:100%;height:650px;border-radius:12px;filter:sepia(15%) saturate(85%) brightness(102%) contrast(95%)}
.map-artsy-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:20px;border-top:1px dashed rgba(139,115,85,0.2)}
.map-legend{display:flex;gap:30px}
.legend-item{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:var(--text)}
.legend-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.legend-dot.visited{background:linear-gradient(135deg,var(--sage),#7a9970)}
.legend-dot.planned{background:linear-gradient(135deg,var(--gold),#c9a035)}
.map-artsy-note{font-size:0.85rem;color:var(--text-light);display:flex;align-items:center;gap:8px}
.map-artsy-note i{color:var(--sage)}
.map-artsy-deco{position:absolute;top:-10px;right:40px;background:white;padding:12px 18px;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,0.1);transform:rotate(5deg);border:1px solid var(--beige);display:flex;align-items:center;gap:12px}
.deco-flag{width:36px;height:auto;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.deco-text{font-size:0.65rem;font-weight:700;color:var(--brown);letter-spacing:1.5px;line-height:1.5;text-align:center}
.map-photos{margin-top:40px;width:100%}
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.15)}
.leaflet-popup-tip{display:none}
.custom-marker div:hover{transform:scale(1.2)}
.city-tooltip{background:white;border:none;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,0.15);padding:8px 12px}
.city-tooltip::before{display:none}

/* City Cards - Cozy Cream Style */
.city-card,.city-card-empty{background:linear-gradient(145deg,#fffdf9,#faf6f0);border-radius:28px;overflow:hidden;box-shadow:0 8px 32px rgba(139,109,76,0.12),0 2px 8px rgba(139,109,76,0.08),inset 0 1px 0 rgba(255,255,255,0.9);margin-top:30px;animation:cardSlideUp 0.4s ease;border:1px solid rgba(232,221,212,0.6);position:relative}
.city-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sage),var(--gold),var(--sage));opacity:0.7}
@keyframes cardSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.city-card-header{background:linear-gradient(135deg,rgba(156,175,136,0.15),rgba(212,165,116,0.1));padding:22px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(232,221,212,0.5);position:relative}
.city-card-header::after{content:'✦';position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:0.8rem;color:var(--gold);opacity:0.5}
.city-card-header h4{font-family:"Gowun Batang",serif;color:var(--brown);font-size:1.5rem;margin:0;display:flex;align-items:center;gap:10px}
.city-badge{background:linear-gradient(135deg,var(--sage),var(--sage-dark));color:white;padding:6px 16px;border-radius:20px;font-size:0.8rem;font-weight:500;box-shadow:0 2px 8px rgba(156,175,136,0.3)}
.city-type{background:linear-gradient(135deg,var(--gold),#c9a064);color:white;padding:6px 14px;border-radius:20px;font-size:0.8rem;box-shadow:0 2px 8px rgba(212,165,116,0.3)}
.city-card-body{padding:45px;text-align:center;background:linear-gradient(180deg,transparent,rgba(156,175,136,0.03))}
.city-card-body .empty-icon{font-size:4rem;margin-bottom:15px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1))}
.city-card-body p{color:var(--brown);font-size:1.1rem;margin-bottom:5px;font-weight:500}
.city-card-body .empty-hint{color:var(--text-light);font-size:0.95rem}

.city-places-list{padding:20px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;max-height:none;overflow:visible;background:linear-gradient(180deg,transparent,rgba(250,246,240,0.5))}
.city-places-list.expanded{max-height:2000px}
.city-place-item{display:block;padding:0;background:white;border-radius:12px;cursor:pointer;transition:all 0.3s;position:relative;border:1px solid rgba(232,221,212,0.6);box-shadow:var(--shadow-sm);aspect-ratio:1/1;overflow:hidden}
.city-place-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.city-place-arrow{display:none}
.city-expand-btn{display:none;justify-content:center;padding:18px;background:linear-gradient(to top,#fffdf9 60%,transparent);margin-top:-45px;position:relative;z-index:1}
.city-expand-btn.show{display:flex}
.city-expand-btn button{background:linear-gradient(135deg,#fffefb,#faf6f0);border:1px solid var(--beige);padding:12px 28px;border-radius:25px;font-size:0.9rem;color:var(--brown);cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:8px;box-shadow:0 3px 12px rgba(139,109,76,0.1);font-weight:500}
.city-expand-btn button:hover{background:linear-gradient(135deg,var(--sage),var(--sage-dark));color:white;border-color:var(--sage);box-shadow:0 6px 20px rgba(156,175,136,0.3)}
.city-expand-btn button i{transition:transform 0.3s}
.city-expand-btn.expanded button i{transform:rotate(180deg)}
.city-place-img{position:absolute;inset:0;overflow:hidden}
.city-place-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none}
.city-place-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.city-place-item:hover .city-place-img img{transform:scale(1.1)}
.city-place-info{position:absolute;bottom:0;left:0;right:0;padding:10px;z-index:2}
.city-place-info h5{font-family:"Gowun Batang",serif;color:white;font-size:0.9rem;margin:0 0 3px 0;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,0.8);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-place-kr{color:rgba(255,255,255,0.85);font-size:0.75rem;margin:0 0 4px 0;font-style:italic;text-shadow:0 1px 3px rgba(0,0,0,0.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-place-date{font-size:0.7rem;color:rgba(255,255,255,0.8);text-shadow:0 1px 3px rgba(0,0,0,0.7)}
.city-place-date i{margin-right:3px}
.city-place-category,.city-place-note{display:none}

/* Map Popup Styles */
.map-place-popup .leaflet-popup-content-wrapper{background:#fffdf9;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.2);padding:0;overflow:hidden}
.map-place-popup .leaflet-popup-content{margin:0;width:340px !important}
.map-place-popup .leaflet-popup-tip{background:#fffdf9}
.popup-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(135deg,rgba(156,175,136,0.15),rgba(212,165,116,0.1));border-bottom:1px solid rgba(232,221,212,0.5)}
.popup-header h4{font-family:"Gowun Batang",serif;color:var(--brown);font-size:1.2rem;margin:0}
.popup-badge{background:var(--sage);color:white;padding:4px 12px;border-radius:12px;font-size:0.8rem;font-weight:500}
.popup-empty{padding:30px;text-align:center;color:var(--text-light)}
.popup-empty span{font-size:2.5rem;display:block;margin-bottom:10px}
.popup-empty p{margin:0;font-size:0.95rem}
.popup-places-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.popup-place-card{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform 0.2s;min-height:120px}
.popup-place-card:hover{transform:scale(1.03)}
.popup-place-card img{width:100%;height:100%;object-fit:cover}
.popup-place-card span{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,0.75));color:white;font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popup-more{padding:12px;text-align:center;color:var(--sage);font-size:0.9rem;font-weight:500;cursor:pointer;border-top:1px solid rgba(232,221,212,0.5);transition:background 0.2s}
.popup-more:hover{background:rgba(156,175,136,0.1)}

.map-photos h4{font-family:"Gowun Batang",serif;color:var(--brown);margin-bottom:20px;text-align:center;font-size:1.3rem}
.map-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.map-photo-item{border-radius:16px;overflow:hidden;position:relative;cursor:pointer;aspect-ratio:1;transition:all 0.4s}
.map-photo-item:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.15)}
.map-photo-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.map-photo-item:hover img{transform:scale(1.1)}
.map-photo-info{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,0.7));color:white;font-size:0.9rem}
.map-photos-empty{text-align:center;padding:40px;background:var(--cream-dark);border-radius:20px;color:var(--text-light)}

/* ===== PLACES ===== */
.view-toggle{display:flex;gap:8px;margin-top:20px;justify-content:center}
.view-toggle .view-btn{background:white;border:1px solid var(--beige);padding:10px 20px;border-radius:25px;cursor:pointer;font-family:"LXGW WenKai TC","Noto Sans TC",sans-serif;font-size:0.9rem;color:var(--brown);transition:all 0.3s;display:flex;align-items:center;gap:8px}
.view-toggle .view-btn:hover{border-color:var(--sage);background:var(--cream)}
.view-toggle .view-btn.active{background:var(--sage);color:white;border-color:var(--sage)}
.view-toggle .view-btn i{font-size:0.85rem}

.places-map-container{width:100%;height:550px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);border:2px solid var(--beige);background:var(--cream)}
#placesMap{width:100%;height:100%}
#placesMap .cream-map-tiles{filter:sepia(15%) saturate(90%) brightness(102%)}

/* 足跡地圖標記 - 單點 */
.visited-pin .vpin{width:14px;height:14px;background:var(--sage);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,0.4);cursor:pointer;transition:all 0.2s;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1}
.visited-pin .vpin:hover{transform:scale(1.5);box-shadow:0 3px 10px rgba(0,0,0,0.5)}

/* 單點 Popup */
.visited-popup-single .leaflet-popup-content-wrapper{border-radius:12px;padding:0;box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.visited-popup-single .leaflet-popup-content{margin:0;width:280px !important}
.vp-single{padding:12px 16px;font-family:"GenSenRounded","LXGW WenKai TC","Noto Sans TC",sans-serif}
.vp-single-name{font-size:1rem;font-weight:600;color:var(--brown);margin-bottom:2px;font-family:"GenSenRounded","LXGW WenKai TC","Noto Sans TC",sans-serif}
.vp-single-kr{font-size:0.85rem;color:var(--text-light);margin-bottom:6px;font-family:"Gowun Batang",serif}
.vp-single-info{font-size:0.8rem;color:var(--text-light);margin-bottom:10px;font-family:"GenSenRounded","LXGW WenKai TC","Noto Sans TC",sans-serif}
.vp-preview{width:100%;height:100px;border-radius:10px;overflow:hidden;margin-bottom:10px;background:var(--cream);border:1px solid var(--beige)}
.vp-preview img{width:100%;height:100%;object-fit:cover}
.vp-single-btn{display:inline-flex;align-items:center;gap:6px;background:var(--sage);color:white;padding:8px 14px;border-radius:20px;text-decoration:none;font-size:0.8rem;transition:all 0.2s;font-family:"GenSenRounded","LXGW WenKai TC","Noto Sans TC",sans-serif}
.vp-single-btn:hover{background:var(--sage-dark);transform:translateY(-1px)}

@media(max-width:768px){
  .places-map-container{height:450px;border-radius:16px}
  .view-toggle .view-btn{padding:8px 16px;font-size:0.85rem}
  .vp-list{max-height:220px}
}

/* 景點標籤過濾器 */
.places-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0 20px 15px;
  justify-content: center;
}

.places-tag-btn {
  padding: 8px 16px;
  border: 2px solid var(--beige);
  border-radius: 20px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.places-tag-btn:hover {
  border-color: var(--sage);
  background: rgba(167,184,154,0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(167,184,154,0.2);
}

.places-tag-btn.active {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(167,184,154,0.4);
}

.places-tag-btn .tag-count {
  font-size: 0.7rem;
  background: rgba(0,0,0,0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.places-tag-btn.active .tag-count {
  background: rgba(255,255,255,0.3);
}

/* Dark mode */
[data-theme="dark"] .places-tag-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #e0e0e0;
}

[data-theme="dark"] .places-tag-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}

[data-theme="dark"] .places-tag-btn.active {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
  color: white;
}

[data-theme="dark"] .places-tag-btn .tag-count {
  background: rgba(255,255,255,0.15);
}

/* Mobile responsive */
@media(max-width:768px) {
  .places-filter-tags {
    padding: 0 15px 12px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .places-filter-tags::-webkit-scrollbar { display: none; }
  .places-tag-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.places-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.place-card{background:white;border-radius:16px;overflow:hidden;border:1px solid rgba(232,221,212,0.6);transition:all 0.3s ease;cursor:pointer;position:relative;box-shadow:var(--shadow-sm);aspect-ratio:1/1}
.place-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.place-card-image{position:absolute;inset:0;overflow:hidden}
.place-card-image img,.place-card-image video{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.place-card:hover .place-card-image img,.place-card:hover .place-card-image video{transform:scale(1.08)}
.place-card-image::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.3) 40%,transparent 70%);pointer-events:none}
.place-category{display:none}
.place-tags{display:none}
.place-tag{background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);padding:3px 8px;border-radius:10px;font-size:0.6rem;color:var(--brown);box-shadow:0 2px 6px rgba(0,0,0,0.1);white-space:nowrap}
.place-tag-more{background:var(--sage);color:white;padding:3px 6px;border-radius:10px;font-size:0.6rem}
.pm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pm-tags .place-tag{background:var(--beige);padding:5px 12px;border-radius:15px;font-size:0.8rem}
.place-card-content{position:absolute;bottom:0;left:0;right:0;padding:14px;z-index:2}
.place-card-content h4{color:white;margin:0;font-size:1rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,0.8),0 1px 2px rgba(0,0,0,0.6);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.place-card-content .korean-name{color:rgba(255,255,255,0.95);font-size:0.8rem;margin-top:5px;text-shadow:0 1px 3px rgba(0,0,0,0.7);font-weight:500}
.place-card-content .city-tag,.place-card-content .note-area,.place-card-content .note-expand-btn{display:none}
.place-card-footer{display:none}
.note-area{margin-bottom:5px;white-space:pre-wrap;word-wrap:break-word}
.note-area.collapsible{max-height:80px;overflow:hidden;position:relative;transition:max-height 0.4s ease}
.note-area.collapsible::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,#ffffff)}
.note-area.collapsible.expanded{max-height:none;overflow:visible}
.note-area.collapsible.expanded::after{display:none}
.note-expand-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;margin-top:5px;font-size:0.85rem;color:var(--sage);cursor:pointer;transition:all 0.3s}
.note-expand-btn:hover{color:var(--brown)}
.note-expand-btn i{font-size:0.75rem;transition:transform 0.3s}
.note-expand-btn.expanded i{transform:rotate(180deg)}
/* Link Card */
.link-card{display:flex;align-items:center;gap:12px;padding:12px 15px;margin-top:12px;background:linear-gradient(135deg,#fafafa,#f5f5f5);border:1px solid var(--beige);border-radius:12px;text-decoration:none;transition:all 0.3s}
.link-card:hover{background:white;box-shadow:0 4px 15px rgba(0,0,0,0.08);transform:translateY(-2px);border-color:var(--sage)}
.link-favicon{width:28px;height:28px;border-radius:6px;object-fit:contain;background:white;padding:2px}
.link-card-text{flex:1;overflow:hidden}
.link-domain{display:block;font-size:0.85rem;font-weight:600;color:var(--brown)}
.link-url-short{display:block;font-size:0.75rem;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-arrow{color:var(--sage);font-size:1rem;opacity:0;transition:all 0.3s;transform:translateX(-5px)}
.link-arrow i{display:none}
.link-arrow::after{content:'↗'}
.link-card:hover .link-arrow{opacity:1;transform:translateX(0)}
.place-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid rgba(139,115,85,0.1)}
.place-date{font-size:0.85rem;color:var(--text-light)}
.place-card-footer .view-btn{background:linear-gradient(135deg,var(--sage),var(--gold));color:white;border:none;padding:8px 18px;border-radius:20px;font-size:0.8rem;cursor:pointer;opacity:0;transform:translateX(20px);transition:all 0.3s;box-shadow:0 4px 15px rgba(156,175,136,0.3)}
.place-card:hover .view-btn{opacity:1;transform:translateX(0)}

/* ===== SOCIAL ===== */
.social-tabs{display:flex;justify-content:center;gap:15px;margin-bottom:30px}
.social-tab{padding:15px 40px;background:white;border:2px solid var(--beige);border-radius:30px;cursor:pointer;font-size:1rem;font-weight:500;transition:all 0.3s}
.social-tab.active{background:var(--brown);color:white;border-color:var(--brown)}
.social-tab:hover:not(.active){background:var(--cream-dark)}
.social-section{background:linear-gradient(135deg,var(--cream-dark),var(--beige));border-radius:30px;padding:40px;border:1px solid rgba(255,255,255,0.5)}
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:900px){.social-row{grid-template-columns:1fr}}
.social-col h3{font-family:"Gowun Batang",serif;color:var(--brown);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.social-col h3 i{font-size:1.5rem}
.fb-posts-grid,.ig-posts-grid{display:flex;flex-direction:column;gap:20px}
.fb-post-wrapper,.ig-post-wrapper{background:white;border-radius:16px;padding:15px;box-shadow:0 10px 30px rgba(0,0,0,0.05);position:relative;overflow:hidden;max-width:100%;width:100%}
.fb-post-wrapper .fb-post,.fb-post-wrapper .fb-post span,.fb-post-wrapper .fb-post iframe,.fb-post-wrapper>*{max-width:100%!important;width:100%!important;overflow:hidden!important}
.ig-post-wrapper iframe,.ig-post-wrapper .instagram-media,.ig-post-wrapper .instagram-media-rendered{max-width:100%!important;width:100%!important}
@media(max-width:768px){.fb-post-wrapper,.ig-post-wrapper{padding:10px}.fb-post-wrapper .fb-post,.fb-post-wrapper .fb-post>span,.fb-post-wrapper .fb-post iframe{max-width:calc(100vw - 80px)!important;width:100%!important}}
.post-owner-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:0.8rem;font-weight:500;margin-bottom:10px;text-transform:capitalize}
.post-owner-badge img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.post-owner-badge.chris{background:linear-gradient(135deg,rgba(156,175,136,0.2),rgba(212,175,55,0.15));color:var(--brown)}
.post-owner-badge.tony{background:linear-gradient(135deg,rgba(232,180,184,0.3),rgba(220,39,67,0.15));color:#8B4557}
.social-empty{text-align:center;padding:40px;color:var(--text-light)}
.social-empty i{font-size:3rem;opacity:0.2;margin-bottom:15px;display:block}

/* ===== FOOTER ===== */
.footer{background:linear-gradient(160deg,var(--brown) 0%,var(--brown-dark) 100%);padding:80px 20px;padding-bottom:120px;text-align:center;color:white;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent)}
@media(min-width:769px){.footer{padding-bottom:80px}}
.footer-logo{font-family:"Gowun Batang",serif;font-size:1.8rem;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:14px;letter-spacing:1px}
.footer p{opacity:0.75;font-size:1rem;margin-bottom:25px;letter-spacing:0.3px}
.footer-icon{font-size:1.8rem}

.loading{text-align:center;padding:80px;color:var(--text-light)}
.loading i{font-size:3rem;margin-bottom:20px;display:block;animation:loadingSpin 1s linear infinite}
@keyframes loadingSpin{to{transform:rotate(360deg)}}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(12px)}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox-close{position:absolute;top:20px;right:25px;color:white;font-size:1.8rem;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);z-index:10;border:1px solid rgba(255,255,255,0.15)}
.lightbox-close:hover{background:var(--sage);transform:scale(1.1);border-color:transparent}
.lb-container{display:flex;align-items:center;justify-content:center;width:100%;flex:1;position:relative;padding:0 70px}
.lb-swipe-area{position:relative;width:100%;max-width:90vw;height:85vh;overflow:hidden;border-radius:16px 0 0 16px;background:transparent}
.lb-swipe-area.no-caption{border-radius:16px}
.lb-track{display:flex;height:100%;will-change:transform}
.lb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;height:100%}
.lb-slide img,.lb-slide video{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.lb-counter{position:absolute;top:15px;right:15px;background:rgba(0,0,0,0.6);color:white;padding:6px 14px;border-radius:20px;font-size:0.85rem;z-index:10}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;color:white;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;z-index:10;font-family:"ChenYuluoyan",cursive}
.lb-nav i{display:none}
.lb-nav:hover{background:var(--sage);transform:translateY(-50%) scale(1.1)}
.lb-prev{left:10px}
.lb-prev::after{content:'←'}
.lb-next{right:10px}
.lb-next::after{content:'→'}
.lb-dots{display:flex;justify-content:center;align-items:center;gap:6px;padding:20px 0}
.lb-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.25s ease-out}
.lb-dot.active{background:#fff;width:8px;height:8px}
.lb-dot.small{width:6px;height:6px;opacity:0.6}
.lb-dot.tiny{width:4px;height:4px;opacity:0.4}
/* Sidebar - 便條紙風格 */
.lb-sidebar{
  display:none;flex-direction:column;width:300px;height:80vh;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    repeating-linear-gradient(transparent,transparent 26px,rgba(180,150,110,0.25) 26px,rgba(180,150,110,0.25) 27px),
    linear-gradient(180deg,#faf4e8 0%,#f5ead8 50%,#f0e4d0 100%);
  border-left:4px solid rgba(220,80,80,0.5);
  border-radius:0;
  box-shadow:-3px 0 15px rgba(40,25,10,0.2),inset 0 0 40px rgba(139,115,85,0.08);
  position:relative;
}
.lb-sidebar::before{
  content:'📌';position:absolute;top:-8px;left:20px;font-size:1.5rem;
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.3));transform:rotate(-15deg);
}
.lb-sidebar-header{
  padding:20px 20px 12px;font-size:0.8rem;letter-spacing:0.5px;
  color:#6b5040;border-bottom:1px dashed rgba(139,115,85,0.3);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  font-family:"Noto Sans TC",sans-serif;font-weight:500;
}
.lb-sidebar-header::before{content:'✎';font-size:1rem}
.lb-sidebar-header i{display:none}
.lb-sidebar-content{
  padding:15px 20px;color:#3d2d1f;font-size:1.1rem;line-height:1.9;
  flex:1;overflow-y:auto;
  font-family:"LXGW WenKai TC","Noto Sans TC",sans-serif;
  font-weight:400;letter-spacing:0.5px;
}
.photo-count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.3);color:rgba(255,255,255,0.5);padding:5px 10px;border-radius:12px;font-size:0.75rem;display:flex;align-items:center;gap:5px;z-index:1}
.video-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:rgba(0,0,0,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.8rem;pointer-events:none;transition:all 0.3s;font-family:"ChenYuluoyan","LXGW WenKai TC",cursive}
.video-badge i{display:none}
.video-badge::after{content:'播';font-size:1.2rem}
.place-card:hover .video-badge{background:var(--sage);transform:translate(-50%,-50%) scale(1.1)}
.place-card-image video{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){
  .lb-container{padding:0;flex-direction:column}
  .lb-swipe-area{height:70vh;max-width:100%;border-radius:0}
  .lb-swipe-area.no-caption{border-radius:0;height:85vh}
  .lb-nav{display:none}
  .lb-sidebar{
    width:100%;height:auto;max-height:25vh;border-radius:0;
    border-left:none;border-top:3px solid rgba(220,80,80,0.4);
    background:
      repeating-linear-gradient(transparent,transparent 24px,rgba(180,150,110,0.2) 24px,rgba(180,150,110,0.2) 25px),
      linear-gradient(180deg,#faf4e8,#f0e4d0);
  }
  .lb-sidebar::before{display:none}
  .lb-sidebar-header{padding:10px 15px 6px;font-size:0.7rem}
  .lb-sidebar-content{padding:8px 15px 12px;font-size:0.95rem;line-height:1.7}
  .lightbox-close{top:10px;right:10px;width:36px;height:36px;font-size:1.3rem}
  .lb-dots{padding:10px 0}
  .lb-slide img{border-radius:0;max-height:70vh;width:auto;max-width:100%}
  .lb-slide video{border-radius:0;max-height:70vh;width:100%;max-width:100%;object-fit:contain}
}

.back-to-top{position:fixed;bottom:30px;right:30px;width:52px;height:52px;background:linear-gradient(145deg,var(--sage),var(--sage-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;cursor:pointer;opacity:0;transform:translateY(20px);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);z-index:999;box-shadow:var(--shadow-glow);border:none}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 12px 36px rgba(156,175,136,0.5)}
@media(max-width:768px){.back-to-top{bottom:90px;right:20px;width:46px;height:46px;font-size:1rem}}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:768px){
  .header-content{flex-direction:column;gap:15px}
  .nav-links{gap:12px;justify-content:center}
  .hero h1{font-size:2.5rem}
  .hero{min-height:auto;padding:140px 20px 100px}
  .stats-container{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{width:100%;max-width:280px}
  .places-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .weather-grid,.exchange-grid{grid-template-columns:1fr}
  .section-header h2{font-size:1.8rem}
  .section-header h2::before,.section-header h2::after{display:none}
  .social-tabs,.tools-tabs{flex-direction:column}
  .tools-tab{padding:12px 25px}
  #kakaoMap{height:500px}
  .map-artsy-frame{padding:15px}
  .map-artsy-corner{width:20px;height:20px}
  .map-artsy-footer{flex-direction:column;gap:15px;align-items:center}
  .map-artsy-deco{top:-8px;right:15px;padding:8px 12px;gap:8px;transform:rotate(4deg)}
  .map-artsy-deco .deco-flag{width:24px}
  .map-artsy-deco .deco-text{font-size:0.6rem}
}

/* ===== v9 NEW STYLES ===== */

/* Pages - show/hide with fade */
.pages-wrapper{display:block;width:100%}
.page{display:none;width:100%;padding-bottom:80px;opacity:0;transition:opacity 0.2s ease-out}
.page.active,.page#page0{display:block;opacity:1}
@media(min-width:769px){.page{padding-bottom:0}}
/* Page Loading Spinner */
#pageLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.15s ease}
#pageLoader.show{opacity:1;pointer-events:auto}
.page-loader-spinner{width:36px;height:36px;border:3px solid var(--sage-light,#e8ebe4);border-top-color:var(--sage,#9caf88);border-radius:50%;animation:pageLoaderSpin 0.7s linear infinite}
@keyframes pageLoaderSpin{to{transform:rotate(360deg)}}
/* Mobile Bottom Navigation - UR Living style */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(232,221,212,0.5);z-index:10001;padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom));overscroll-behavior:none}
.mobile-bottom-nav{display:flex;justify-content:space-around;align-items:center}
.bottom-tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 22px;color:var(--text-muted);text-decoration:none;font-family:"GenSenRounded","Noto Sans TC",sans-serif;font-size:0.75rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-weight:700;border-radius:16px;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none;-webkit-user-select:none}
.bottom-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(156,175,136,0.15),rgba(212,165,116,0.1));opacity:0;transition:opacity 0.3s;border-radius:16px}
.bottom-tab:hover::before{opacity:1}
.bottom-tab i{font-size:1.3rem;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.bottom-tab:hover{color:var(--brown)}
.bottom-tab:hover i{transform:translateY(-3px)}
.bottom-tab.active{color:var(--sage);background:linear-gradient(135deg,rgba(156,175,136,0.2),rgba(156,175,136,0.1))}
.bottom-tab.active::after{content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:var(--sage);border-radius:50%;animation:dotPulse 1.5s infinite}
.bottom-tab.active i{transform:scale(1.2)}
@keyframes dotPulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:0.6;transform:translateX(-50%) scale(1.3)}}
@media(min-width:769px){.mobile-bottom-nav{display:none}}

/* Music Button */
.music-btn{position:fixed;top:75px;right:15px;width:44px;height:44px;border-radius:50%;background:white;border:1.5px solid var(--sage);display:flex;align-items:center;justify-content:center;cursor:grab;z-index:1001;box-shadow:var(--shadow-md);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);touch-action:none}
.music-btn:active{cursor:grabbing}
.music-btn:hover{transform:scale(1.08);box-shadow:var(--shadow-lg)}
.music-btn.playing{animation:musicPulse 2s infinite}
.music-btn i{color:var(--sage);font-size:1rem}
@media(max-width:768px){
  .music-btn{top:60px;right:10px;width:36px;height:36px}
  .music-btn i{font-size:0.85rem}
  .header{padding:10px 0}
  .header.scrolled{padding:8px 0}
  .header-content{gap:8px}
  .logo{font-size:1rem;gap:8px}
  .logo-icon{width:32px;height:32px;font-size:0.9rem}
  .mobile-bottom-nav{padding:6px 0;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .bottom-tab{padding:6px 12px;gap:3px;font-size:0.65rem;border-radius:12px}
  .bottom-tab i{font-size:1rem}
  .bottom-tab.active::after{bottom:3px;width:4px;height:4px}
}
@keyframes musicPulse{0%,100%{box-shadow:0 0 0 0 rgba(156,175,136,0.4)}50%{box-shadow:0 0 0 10px rgba(156,175,136,0)}}

/* Stories IG Style */
.stories-section{margin:25px 0;padding:0}
/* IG Style Stories - Horizontal Scroll */
.stories-scroll{display:flex;gap:15px;padding:10px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:center}
.stories-scroll::-webkit-scrollbar{display:none}
.story-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.story-item:hover .story-ring{transform:scale(1.05)}
.story-ring{width:66px;height:66px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);transition:transform 0.2s;position:relative}
.story-ring.chris{background:linear-gradient(135deg,#9CAF88,#D4A574)}
.story-ring.tony{background:linear-gradient(135deg,#E8B4B8,#dc2743)}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid white;background:white}
.story-video-badge{position:absolute;bottom:0;right:0;width:20px;height:20px;background:linear-gradient(135deg,var(--sage),var(--gold));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.5rem;border:2px solid white}
.story-name{font-size:0.7rem;color:var(--text);max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){.stories-scroll{justify-content:flex-start}}
.story-name{display:block;font-size:0.75rem;margin-top:6px;color:var(--text);font-weight:500}
.story-time{display:block;font-size:0.65rem;color:var(--text-light)}

/* Story Viewer Modal */
.story-viewer{position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s}
.story-viewer.active{opacity:1;pointer-events:auto}
.story-viewer-content{position:relative;max-width:400px;width:94%;max-height:85vh;border-radius:16px;overflow:hidden}
.story-progress{position:absolute;top:10px;left:12px;right:12px;height:3px;background:rgba(255,255,255,0.3);border-radius:3px;overflow:hidden;z-index:10}
.story-progress-bar{height:100%;background:white;width:0;transition:width 5s linear}
.story-viewer-header{position:absolute;top:18px;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;z-index:10}
.story-viewer-user{display:flex;align-items:center;gap:10px}
.story-viewer-user img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid white}
.story-viewer-user span{color:white;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.story-viewer-close{color:white;font-size:2rem;cursor:pointer;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.story-viewer-img,.story-viewer-video{width:100%;height:75vh;object-fit:contain;background:black}
.story-viewer-text-bg{width:100%;height:75vh;display:flex;align-items:center;justify-content:center;padding:50px 30px;text-align:center}
.story-viewer-text-bg p{color:white;font-size:1.4rem;line-height:1.7;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.story-viewer-caption{position:absolute;bottom:25px;left:20px;right:20px;color:white;text-align:center;font-size:1rem;text-shadow:0 2px 6px rgba(0,0,0,0.6)}
.gradient1{background:linear-gradient(135deg,#ff9a9e,#fecfef)}
.gradient2{background:linear-gradient(135deg,#a8edea,#9CAF88)}
.gradient3{background:linear-gradient(135deg,#ffecd2,#fcb69f)}
.gradient4{background:linear-gradient(135deg,#a18cd1,#fbc2eb)}
.gradient5{background:linear-gradient(135deg,#667eea,#764ba2)}

/* Demo Products/Stays */
.demo-badge{position:absolute;top:15px;left:15px;background:var(--gold);color:white;padding:5px 12px;border-radius:15px;font-size:0.75rem;font-weight:600}

/* Place Detail Modal - Vintage Letter Style */
.place-modal{position:fixed;inset:0;background:rgba(30,20,10,0.9);z-index:1500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.place-modal.active{opacity:1;pointer-events:auto}
.place-modal-content{
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#e8d8b8 0%,#dcc8a0 15%,#d4bc90 40%,#d8c498 70%,#e5d8b8 100%);
  max-width:900px;width:90%;max-height:90vh;
  overflow:visible;display:flex;flex-direction:column;
  box-shadow:0 20px 80px rgba(40,25,10,0.7),inset 0 0 120px rgba(120,90,50,0.25);
  animation:letterUnfold 0.5s ease;
  position:relative;
  border:none;
  transform:rotate(-0.5deg);
  filter:sepia(8%) contrast(0.97);
}
.place-modal-content::before{
  content:'';position:absolute;inset:0;
  background:
    /* 咖啡漬圓環 */
    radial-gradient(ellipse 60px 55px at 85% 12%,transparent 45%,rgba(120,70,30,0.12) 50%,rgba(100,60,25,0.08) 55%,transparent 60%),
    radial-gradient(ellipse 45px 40px at 8% 88%,transparent 42%,rgba(110,65,25,0.1) 48%,rgba(90,55,20,0.06) 54%,transparent 60%),
    /* 水漬痕跡 */
    radial-gradient(ellipse 120px 80px at 75% 70%,rgba(160,130,80,0.08) 0%,transparent 50%),
    radial-gradient(ellipse 80px 100px at 15% 40%,rgba(140,110,60,0.06) 0%,transparent 45%),
    /* 邊角泛黃 */
    radial-gradient(ellipse at 0% 0%,rgba(130,90,40,0.18) 0%,transparent 35%),
    radial-gradient(ellipse at 100% 0%,rgba(120,85,35,0.12) 0%,transparent 30%),
    radial-gradient(ellipse at 100% 100%,rgba(110,75,30,0.2) 0%,transparent 40%),
    radial-gradient(ellipse at 0% 100%,rgba(125,85,35,0.15) 0%,transparent 35%),
    /* 隨機污漬斑點 */
    radial-gradient(circle 8px at 25% 15%,rgba(100,70,30,0.1) 0%,transparent 100%),
    radial-gradient(circle 12px at 70% 25%,rgba(90,60,25,0.08) 0%,transparent 100%),
    radial-gradient(circle 6px at 40% 80%,rgba(110,75,35,0.09) 0%,transparent 100%),
    radial-gradient(circle 10px at 90% 55%,rgba(95,65,30,0.07) 0%,transparent 100%),
    radial-gradient(circle 5px at 55% 45%,rgba(105,70,30,0.06) 0%,transparent 100%);
  pointer-events:none;z-index:0;
}
.place-modal-content::after{
  content:'';position:absolute;inset:12px;
  border:2px solid rgba(139,100,60,0.3);
  pointer-events:none;z-index:1;
}
/* 動態浮水印 - 手繪風 SVG */
.pm-watermark{
  position:absolute;
  bottom:10%;right:3%;
  width:180px;height:180px;
  opacity:0.12;
  pointer-events:none;
  z-index:0;
  transform:rotate(-8deg);
  color:rgba(120,90,50,0.8);
}
.pm-watermark svg{
  width:100%;height:100%;
}
@keyframes letterUnfold{from{opacity:0;transform:rotate(-0.5deg) scale(0.9) translateY(30px)}to{opacity:1;transform:rotate(-0.5deg) scale(1) translateY(0)}}
.place-modal-close{position:absolute;top:15px;right:18px;font-size:1.3rem;color:#5c4030;cursor:pointer;z-index:10;transition:all 0.2s;background:rgba(245,235,220,0.95);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(139,100,64,0.5);box-shadow:2px 2px 8px rgba(0,0,0,0.15)}
.place-modal-close:hover{transform:scale(1.1);background:#f5ead0;border-color:rgba(139,100,64,0.7);box-shadow:3px 3px 12px rgba(0,0,0,0.2)}
/* 手機版下拉關閉指示條 */
.pm-swipe-hint{display:none}
@media(max-width:768px){
  .place-modal-close{display:none}
}
.pm-back-btn{display:none;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,var(--sage),#7a9a6a);color:white;padding:16px;text-align:center;font-size:1.2rem;font-weight:500;cursor:pointer;align-items:center;justify-content:center;gap:8px;border-radius:0;font-family:"ChenYuluoyan","LXGW WenKai TC",cursive;letter-spacing:2px;z-index:1600}
.pm-back-btn:active{background:linear-gradient(135deg,#7a9a6a,var(--sage))}
@media(max-width:768px){.pm-back-btn{display:flex}}
.place-modal-gallery{
  display:flex;gap:15px;padding:30px 25px 20px;
  background:transparent;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  position:relative;z-index:2;
  flex-wrap:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.place-modal-gallery::-webkit-scrollbar{display:none}
.pm-gallery-item{
  flex:0 0 auto;width:130px;height:165px;
  padding:12px 12px 35px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.03'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#f8f2e4,#ebe4d0);
  box-shadow:4px 5px 15px rgba(50,30,10,0.4),inset 0 0 25px rgba(139,115,85,0.1);
  transform:rotate(-3deg);
  cursor:pointer;position:relative;transition:all 0.3s;
  border:1px solid rgba(160,140,110,0.4);
}
.pm-gallery-item::before{
  content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:60%;height:1px;background:rgba(139,115,85,0.2);
}
.pm-gallery-item::after{
  content:'❋';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:0.6rem;color:rgba(139,115,85,0.3);font-family:"ChenYuluoyan",cursive;
}
.pm-gallery-item:nth-child(even){transform:rotate(2.5deg)}
.pm-gallery-item:nth-child(3n){transform:rotate(-1.5deg)}
.pm-gallery-item:nth-child(4n){transform:rotate(4deg)}
.pm-gallery-item:hover{transform:rotate(0deg) scale(1.08);z-index:5;box-shadow:6px 8px 20px rgba(40,25,10,0.4)}
.pm-gallery-item img,.pm-gallery-item video{
  width:100%;height:100%;object-fit:cover;
  filter:sepia(25%) contrast(0.9) brightness(1.03) saturate(0.85);
  border-radius:2px;
  box-shadow:inset 0 0 40px rgba(70,40,15,0.25);
  border:1px solid rgba(139,115,85,0.15);
}
.pm-gallery-item .video-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(245,235,220,0.92);color:#5c4030;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(139,100,64,0.5);font-family:"ChenYuluoyan",cursive;box-shadow:2px 2px 8px rgba(0,0,0,0.2)}
.pm-gallery-item .video-badge i{display:none}
.pm-gallery-item .video-badge::after{content:'播';font-size:1.2rem;letter-spacing:0}
.place-modal-info{padding:25px 35px 40px;overflow-y:auto;flex:1;position:relative;z-index:2}
.pm-header{margin-bottom:20px;position:relative}
.pm-header::after{
  content:'❦';position:absolute;right:0;top:0;
  font-size:2rem;opacity:0.15;color:#8b6540;
}
.pm-category{display:inline-block;background:transparent;color:#8b6540;padding:4px 0;font-size:0.85rem;margin-bottom:10px;font-style:italic}
.pm-tags{margin-bottom:12px}
.pm-header h2{font-family:"ChenYuluoyan","LXGW WenKai TC",cursive;font-size:2.4rem;color:#4a3525;margin-bottom:10px;font-weight:400;letter-spacing:4px;text-shadow:1px 1px 2px rgba(255,250,240,0.5);-webkit-text-stroke:0.5px #4a3525}
.pm-name-kr{color:#8b6540;font-size:1rem;font-style:italic;opacity:0.7;font-family:"LXGW WenKai TC",serif}
.pm-address,.pm-date{display:flex;align-items:center;gap:10px;color:#6b5540;font-size:1.2rem;margin-bottom:10px;font-family:"ChenYuluoyan","LXGW WenKai TC",cursive;-webkit-text-stroke:0.3px #6b5540;flex-wrap:wrap}
.pm-date{font-size:1.4rem}
.pm-address i,.pm-date i{display:none}
.pm-address span::before{content:'✧';font-size:1.1rem;color:#9caf88;margin-right:6px}
.pm-address span{display:flex;align-items:center}
.pm-date::before{content:'❋';font-size:1.2rem;color:#9caf88}
.pm-note{
  margin-top:25px;padding:20px 15px 20px 25px;
  color:#3d2d20;line-height:2.2;font-size:1.35rem;
  white-space:pre-wrap;word-wrap:break-word;
  font-family:"ChenYuluoyan","LXGW WenKai TC",cursive;
  position:relative;
  background:
    repeating-linear-gradient(transparent,transparent 2.1em,rgba(180,150,110,0.3) 2.1em,rgba(180,150,110,0.3) 2.15em);
  letter-spacing:3px;
  border-left:3px solid rgba(180,140,100,0.4);
  -webkit-text-stroke:0.3px #3d2d20;
}
.pm-note p{margin-bottom:12px}
.pm-note::before{
  content:'"';position:absolute;left:5px;top:-10px;
  font-size:3rem;color:rgba(139,101,64,0.2);
  font-family:Georgia,serif;
}
.pm-note::after{
  content:'— Tony & Chris';position:absolute;right:10px;bottom:-5px;
  font-size:0.8rem;color:rgba(139,101,64,0.4);
  font-family:"LXGW WenKai TC",serif;font-style:italic;
}
@media(max-width:768px){
  .place-modal-content{max-height:95vh;margin-top:auto;width:100%;transform:none;border-radius:15px 15px 0 0;overflow-y:auto;overflow-x:hidden}
  .place-modal-gallery{padding:25px 15px 15px;gap:12px;min-height:160px;overflow:visible}
  .pm-gallery-item{width:110px;height:140px;padding:8px 8px 28px}
  .place-modal-info{padding:20px 25px 35px;overflow:visible;flex:none}
  .pm-header h2{font-size:1.9rem}
  .pm-note{font-size:1.35rem;line-height:2.2;padding:15px 10px 15px 20px}
}
.pm-gallery-more{position:absolute;inset:10px 10px 30px;background:rgba(60,40,20,0.75);display:flex;align-items:center;justify-content:center;color:#f5e6d3;font-size:1.2rem;font-weight:600;font-family:"LXGW WenKai TC",serif}

/* AI Chatbot Widget */
.ai-chat-btn{
  position:fixed;bottom:170px;right:25px;z-index:2000;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#9caf88,#7d9a6a);
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.3s ease;border:none;overflow:hidden;
}
.ai-chat-btn:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(0,0,0,0.3)}
.ai-chat-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;transition:opacity 0.3s}
.ai-chat-btn.active img{opacity:0}
.ai-chat-btn.active::after{content:'✕';font-size:1.4rem;color:white;position:absolute}

.ai-chat-window{
  position:fixed;bottom:240px;right:25px;z-index:1999;
  width:450px;max-width:calc(100vw - 40px);height:550px;max-height:70vh;
  background:linear-gradient(180deg,#faf6f0,#f5ead8);
  border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.25);
  display:none;flex-direction:column;overflow:hidden;
  border:2px solid rgba(139,100,64,0.2);
  font-family:"GenSenRounded","Noto Sans TC",sans-serif;
}
.ai-chat-window.active{display:flex;animation:chatSlideUp 0.3s ease}
@keyframes chatSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.ai-chat-header{
  padding:15px 20px;
  background:linear-gradient(135deg,#9caf88,#7d9a6a);
  color:white;display:flex;align-items:center;gap:12px;
}
.ai-chat-header .avatar{width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden}
.ai-chat-header .avatar img{width:100%;height:100%;object-fit:cover}
.ai-chat-header .info h4{margin:0;font-size:1rem;font-weight:600}
.ai-chat-header .info p{margin:0;font-size:0.75rem;opacity:0.85}
.ai-chat-header .info{flex:1}
.ai-chat-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.2);border:none;
  color:white;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.ai-chat-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}

.ai-chat-messages{
  flex:1;overflow-y:auto;padding:15px;
  display:flex;flex-direction:column;gap:12px;
}
.ai-msg{
  max-width:85%;padding:10px 14px;border-radius:18px;
  font-size:0.82rem;line-height:1.45;word-break:break-word;
}
.ai-msg.bot{
  align-self:flex-start;
  background:white;color:#4a3728;
  border:1px solid rgba(139,100,64,0.15);
  border-bottom-left-radius:5px;
}
.ai-msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,#9caf88,#7d9a6a);
  color:white;border-bottom-right-radius:5px;
}
.ai-msg.typing{background:white;color:#888}
.ai-msg.typing::after{content:'...';animation:dots 1.5s infinite}
@keyframes dots{0%,20%{content:'.'}40%{content:'..'}60%,100%{content:'...'}}

.ai-chat-input,form.ai-chat-input{
  padding:12px 15px;background:white;
  border-top:1px solid rgba(139,100,64,0.15);
  display:flex;gap:10px;margin:0;
  flex-shrink:0;
}
.ai-chat-input input{
  flex:1;border:1px solid rgba(139,100,64,0.2);
  border-radius:20px;padding:10px 15px;
  font-size:0.85rem;outline:none;
  font-family:inherit;
}
.ai-chat-input input:focus{border-color:#9caf88}
.ai-chat-input button{
  width:44px !important;height:44px !important;min-width:44px;min-height:44px;
  border-radius:50%;border:none;
  background:linear-gradient(135deg,#9caf88,#7d9a6a) !important;
  color:white;cursor:pointer;
  display:flex !important;align-items:center;justify-content:center;
  font-size:1.2rem;
  transition:transform 0.2s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  pointer-events:auto;
  flex-shrink:0;
}
.ai-chat-input button i{pointer-events:none}
.ai-chat-input button:hover{transform:scale(1.1)}
.ai-chat-input button:disabled{opacity:0.5;cursor:not-allowed}

@media(max-width:480px){
  .ai-chat-btn{bottom:155px;right:15px;width:50px;height:50px}
  .ai-chat-window{bottom:70px;right:10px;left:10px;width:auto;max-width:none;height:45vh;max-height:350px}
}

/* ===== THEMES 主題探索 ===== */
.themes-btn{
  background:none;border:none;color:var(--brown);font-size:1.1rem;
  cursor:pointer;padding:8px;margin-left:10px;transition:all 0.2s;
  display:flex;align-items:center;justify-content:center;
}
.themes-btn:hover{color:var(--sage);transform:scale(1.1)}

/* Theme Toggle Button */
.theme-btn{
  background:none;border:none;color:var(--brown);font-size:1.1rem;
  cursor:pointer;padding:8px;margin-left:5px;transition:all 0.3s;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.theme-btn:hover{color:var(--sage);transform:scale(1.1) rotate(15deg)}
.theme-btn .theme-icon{transition:transform 0.3s}
[data-theme="dark"] .theme-btn .sun{display:inline}
[data-theme="dark"] .theme-btn .moon{display:none}
.theme-btn .sun{display:none}
.theme-btn .moon{display:inline}

/* ===== THEMES PANEL - 奶油韓系風格 ===== */
.themes-panel{
  position:fixed;inset:0;background:rgba(156,129,103,0.4);
  z-index:10000;opacity:0;pointer-events:none;
  transition:opacity 0.4s ease;backdrop-filter:blur(8px);
}
.themes-panel.open{opacity:1;pointer-events:auto}

.themes-panel-content{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--cream);
  display:flex;flex-direction:column;
}

.themes-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;padding-top:max(20px,calc(env(safe-area-inset-top) + 10px));
  background:linear-gradient(135deg,var(--sage) 0%,var(--sage-dark) 100%);
  color:white;position:relative;overflow:hidden;
}
.themes-header::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.themes-header h3{margin:0;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:10px;position:relative}
.themes-close{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.2);border:none;
  color:white;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;position:relative;
}
.themes-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}

.themes-list{
  flex:1;overflow-y:auto;padding:20px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
  background:var(--cream);
}

.theme-card{
  background:white;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 12px rgba(156,129,103,0.1);
  cursor:pointer;transition:all 0.3s ease;
  border:1px solid var(--beige);
}
.theme-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(156,129,103,0.15)}
.theme-card-image{
  height:160px;background-size:contain;background-position:center;
  background-repeat:no-repeat;
  position:relative;
}
.theme-card-image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(107,83,68,0.7) 100%);
}
.theme-card-icon{
  position:absolute;bottom:12px;left:14px;
  font-size:2.2rem;z-index:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  transition:transform 0.3s;
}
.theme-card:hover .theme-card-icon{transform:scale(1.1)}
.theme-card-info{padding:16px 18px}
.theme-card-info h4{margin:0 0 4px;color:var(--brown-dark);font-size:1.05rem;font-weight:600}
.theme-card-kr{margin:0 0 8px;color:var(--brown-light);font-size:0.8rem}
.theme-card-desc{margin:0 0 12px;color:var(--text);font-size:0.85rem;line-height:1.5}
.theme-card-count{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--sage);
  padding:5px 12px;border-radius:20px;
  font-size:0.75rem;color:white;font-weight:500;
}
.theme-card-count i{font-size:0.7rem}

/* Theme Map View */
.themes-map-container{
  flex:1;flex-direction:column;display:none;
}
.themes-map-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;
  background:linear-gradient(135deg,var(--sage),var(--sage-dark));
  border-bottom:none;
}
.themes-back{
  background:rgba(255,255,255,0.2);border:none;
  color:white;font-size:0.85rem;cursor:pointer;padding:10px 16px;
  border-radius:20px;transition:all 0.3s;
  display:flex;align-items:center;gap:8px;font-weight:500;
}
.themes-back:hover{background:rgba(255,255,255,0.3)}
.themes-map-header h4{margin:0;flex:1;font-size:1.05rem;color:white;font-weight:600}

#themesMap{flex:1;min-height:280px}

.themes-places-list{
  max-height:40vh;overflow-y:auto;
  background:var(--cream-light);
  border-top:1px solid var(--beige);
}
.theme-place-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;cursor:pointer;
  border-bottom:1px solid var(--beige-light);
  transition:all 0.2s;position:relative;
}
.theme-place-item:hover{background:var(--beige-light)}
.theme-place-item.active{background:var(--beige-light);border-left:3px solid var(--sage)}
.theme-place-marker{
  width:32px;height:32px;border-radius:50%;
  background:var(--sage);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;font-weight:600;flex-shrink:0;
}
.theme-place-info{flex:1;min-width:0}
.theme-place-name{font-size:0.95rem;color:var(--brown-dark);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.theme-place-name small{background:var(--pink);color:var(--brown-dark);padding:2px 8px;border-radius:10px;font-size:0.65rem;font-weight:500}
.theme-place-kr-copy{display:flex;align-items:center;gap:6px;margin-top:3px}
.theme-place-kr{font-size:0.8rem;color:var(--brown-light)}
.copy-kr-btn{background:none;border:none;color:var(--brown-light);cursor:pointer;padding:2px 6px;font-size:0.7rem;opacity:0.6;transition:all 0.2s;border-radius:4px}
.copy-kr-btn:hover{opacity:1;background:var(--beige-light);color:var(--sage-dark)}
.copy-kr-btn.copied{color:var(--sage);opacity:1}
.theme-place-note{font-size:0.8rem;color:var(--sage-dark);margin-top:5px;font-weight:500}

/* Korean Address with Copy */
.theme-place-addr-kr{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;background:var(--beige-light);border-radius:10px;font-size:0.75rem;color:var(--brown)}
.theme-place-addr-kr span{flex:1}
.copy-addr-btn{background:var(--sage);color:white;border:none;padding:5px 12px;border-radius:8px;font-size:0.7rem;cursor:pointer;transition:all 0.2s;white-space:nowrap;font-weight:500}
.copy-addr-btn:hover{background:var(--sage-dark)}
.copy-addr-btn.copied{background:var(--gold)}

/* Season Filter */
.season-filter{display:flex;gap:10px;padding:12px 18px;background:var(--cream);border-bottom:1px solid var(--beige);flex-wrap:wrap;align-items:center}
.season-filter::before{content:'📺';margin-right:4px}
.season-filter-btn{padding:7px 16px;border:1px solid var(--beige);background:white;color:var(--brown);border-radius:20px;font-size:0.8rem;cursor:pointer;transition:all 0.2s;font-weight:500}
.season-filter-btn:hover{border-color:var(--sage);color:var(--sage-dark)}
.season-filter-btn.active{background:var(--sage);color:white;border-color:var(--sage)}

/* Place Photos Grid */
.theme-place-photos{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.theme-place-photo{width:72px;height:72px;border-radius:12px;overflow:hidden;border:2px solid var(--beige);transition:all 0.3s;background:var(--beige-light);position:relative}
.theme-place-photo:hover{transform:scale(1.05);border-color:var(--pink)}
.theme-place-photo img{width:100%;height:100%;object-fit:cover;display:block}
.theme-place-photo a{display:block;width:100%;height:100%}
.theme-place-photo-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(107,83,68,0.9));color:white;font-size:0.65rem;text-align:center;padding:10px 4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cast Avatars */
.theme-place-cast{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.cast-avatar{display:flex;flex-direction:column;align-items:center;text-decoration:none;transition:transform 0.2s}
.cast-avatar:hover{transform:scale(1.1)}
.cast-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--pink);box-shadow:0 2px 6px rgba(255,107,157,0.3)}
.cast-avatar.no-ig img{border-color:#999}
.cast-name{font-size:0.65rem;color:var(--text-secondary);margin-top:2px;text-align:center;max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cast-avatar:hover .cast-name{color:var(--pink)}

/* Theme Map Markers */
.theme-marker{background:none !important;border:none !important}
.theme-marker-pin{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--sage),var(--sage-dark));
  color:white;display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;font-weight:700;
  box-shadow:0 3px 10px rgba(138,160,122,0.4);
  border:2px solid white;
}
.theme-popup{padding:4px}
.theme-popup h4{margin:0 0 5px;color:var(--brown-dark);font-size:0.95rem;font-weight:600;display:flex;align-items:center;gap:6px}
.theme-popup h4 small{background:var(--pink);color:var(--brown-dark);padding:2px 6px;border-radius:6px;font-size:0.6rem}
.theme-popup .popup-kr{margin:0 0 5px;color:var(--brown-light);font-size:0.8rem}
.theme-popup .popup-note{margin:0 0 8px;color:var(--sage-dark);font-size:0.8rem;font-weight:500}
.theme-popup .popup-addr{margin:0 0 5px;color:var(--brown);font-size:0.75rem;padding:5px 8px;background:var(--beige-light);border-radius:6px;cursor:pointer;transition:all 0.2s}
.theme-popup .popup-addr:hover{background:var(--beige)}
.theme-popup .popup-addr i{margin-right:5px;color:var(--sage)}

/* Dark mode for themes */
[data-theme="dark"] .themes-panel-content{background:var(--cream)}
[data-theme="dark"] .themes-list{background:var(--cream)}
[data-theme="dark"] .theme-card{background:var(--cream-light);border-color:var(--beige)}
[data-theme="dark"] .theme-card-info h4{color:var(--brown)}
[data-theme="dark"] .theme-card-desc{color:var(--text)}
[data-theme="dark"] .themes-places-list{background:var(--cream-light)}
[data-theme="dark"] .theme-place-item{border-color:var(--beige)}
[data-theme="dark"] .theme-place-item:hover{background:var(--beige)}
[data-theme="dark"] .theme-place-name{color:var(--brown)}
[data-theme="dark"] .theme-place-kr{color:var(--brown-light)}
[data-theme="dark"] .theme-place-addr-kr{background:var(--beige);color:var(--brown-light)}
[data-theme="dark"] .season-filter{background:var(--cream)}
[data-theme="dark"] .season-filter-btn{background:var(--cream-light);color:var(--brown);border-color:var(--beige)}

/* Mobile - IG風格 + 奶油韓系配色 */
@media(max-width:768px){
  .themes-btn{display:none}
  .themes-panel-content{bottom:0}

  /* Header */
  .themes-header{padding:16px 20px;padding-top:max(16px,calc(env(safe-area-inset-top) + 8px))}
  .themes-header h3{font-size:1.1rem}
  .themes-close{width:36px;height:36px}

  /* IG Style Grid with cream colors */
  .themes-list{
    padding:3px;padding-bottom:calc(90px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(2,1fr);gap:3px;
    background:var(--beige);
  }
  .theme-card{
    border-radius:4px;box-shadow:none;border:none;
    aspect-ratio:1;position:relative;overflow:hidden;
  }
  .theme-card:hover{transform:none;box-shadow:none}
  .theme-card-image{
    position:absolute;inset:0;height:100%;
    background-size:contain;background-position:center;
    background-repeat:no-repeat;
  }
  .theme-card-image::after{
    background:linear-gradient(180deg,transparent 30%,rgba(107,83,68,0.85) 100%);
  }
  .theme-card-icon{
    bottom:auto;top:10px;left:10px;font-size:1.6rem;
  }
  .theme-card:hover .theme-card-icon{transform:none}
  .theme-card-info{
    position:absolute;bottom:0;left:0;right:0;
    padding:10px 12px;background:transparent;z-index:2;
  }
  .theme-card-info h4{color:white;font-size:0.85rem;margin-bottom:4px;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
  .theme-card-kr,.theme-card-desc{display:none}
  .theme-card-count{
    background:rgba(167,184,154,0.9);backdrop-filter:blur(4px);
    padding:4px 10px;font-size:0.7rem;
  }

  /* Map View */
  .themes-map-header{padding:12px 16px}
  .themes-back{padding:8px 14px;font-size:0.8rem}
  .themes-map-header h4{font-size:1rem}

  /* Places List */
  .themes-places-list{max-height:40vh;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .theme-place-item{padding:12px 14px;gap:10px}
  .theme-place-marker{width:28px;height:28px;font-size:0.75rem}
  .theme-place-name{font-size:0.88rem}
  .theme-place-kr{font-size:0.72rem}
  .theme-place-note{font-size:0.72rem}
  .theme-place-addr-kr{padding:6px 10px;font-size:0.68rem;margin-top:6px}
  .copy-addr-btn{padding:4px 10px;font-size:0.65rem}
  .theme-place-photos{gap:8px;margin-top:10px}
  .theme-place-photo{width:60px;height:60px;border-radius:10px}

  /* Season Filter */
  .season-filter{padding:10px 14px;gap:8px;background:var(--cream-light)}
  .season-filter::before{font-size:0.85rem}
  .season-filter-btn{padding:6px 12px;font-size:0.72rem}
}

/* ===== TIMELINE (照片時間軸) ===== */
.timeline-filter{
  margin-bottom:15px;
}
.timeline-filter select{
  width:100%;padding:10px 15px;
  border:1px solid var(--beige);border-radius:12px;
  background:var(--cream-light);color:var(--text);
  font-size:0.9rem;cursor:pointer;
}
.timeline-container{
  position:relative;padding-left:20px;
  max-height:calc(100vh - 280px);overflow-y:auto;
}
.timeline-container::before{
  content:'';position:absolute;left:8px;top:0;bottom:0;
  width:2px;background:linear-gradient(180deg,var(--sage),var(--gold));
  border-radius:2px;
}
.timeline-group{
  position:relative;margin-bottom:25px;
  animation:fadeInLeft 0.4s ease;
}
@keyframes fadeInLeft{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}
.timeline-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:10px;flex-wrap:wrap;
}
.timeline-dot{
  position:absolute;left:-16px;top:5px;
  width:14px;height:14px;
  background:linear-gradient(135deg,var(--sage),var(--sage-dark));
  border-radius:50%;border:3px solid var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.timeline-date{
  display:flex;flex-direction:column;
  min-width:50px;text-align:center;
}
.timeline-month{
  font-size:0.85rem;font-weight:600;color:var(--brown);
}
.timeline-year{
  font-size:0.7rem;color:var(--text-light);
}
.timeline-title{
  font-size:1rem;font-weight:600;color:var(--brown);flex:1;
}
.timeline-count{
  font-size:0.75rem;color:var(--text-light);
  background:var(--beige);padding:4px 10px;
  border-radius:12px;
}
.timeline-places{
  display:flex;flex-direction:column;gap:8px;
  padding-left:10px;
}
.timeline-place{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--cream-light);
  border-radius:12px;cursor:pointer;
  transition:all 0.2s ease;
  border:1px solid transparent;
}
.timeline-place:hover{
  background:var(--beige-light);
  border-color:var(--beige);
  transform:translateX(5px);
}
.timeline-cat{
  font-size:1.2rem;flex-shrink:0;
}
.timeline-place-info{flex:1;min-width:0}
.timeline-place-name{
  font-size:0.85rem;color:var(--text);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.timeline-place-loc{
  font-size:0.7rem;color:var(--text-light);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.timeline-more{
  font-size:0.8rem;color:var(--sage);
  padding:8px 12px;text-align:center;
  font-style:italic;
}
.timeline-empty{
  text-align:center;padding:40px 20px;color:var(--text-light);
}
.timeline-empty i{font-size:2rem;margin-bottom:10px;opacity:0.5}
.timeline-empty p{font-size:0.9rem}

[data-theme="dark"] .timeline-container::before{
  background:linear-gradient(180deg,var(--sage-dark),var(--gold-light));
}
[data-theme="dark"] .timeline-dot{
  border-color:var(--cream);
  background:linear-gradient(135deg,var(--sage-light),var(--sage));
}
[data-theme="dark"] .timeline-place{
  background:var(--beige);
}

/* ===== SHARE CARD GENERATOR (分享卡片生成器) ===== */
.share-modal{
  position:fixed;inset:0;z-index:10001;
  background:rgba(0,0,0,0.7);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s;
  backdrop-filter:blur(4px);
}
.share-modal.active{
  opacity:1;pointer-events:auto;
}
.share-modal-content{
  background:var(--cream);border-radius:20px;
  padding:25px;max-width:400px;width:90%;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  transform:scale(0.9);
  transition:transform 0.3s;
}
.share-modal.active .share-modal-content{
  transform:scale(1);
}
.share-modal-header{
  display:flex;justify-content:space-between;
  align-items:center;margin-bottom:20px;
}
.share-modal-header h3{
  font-size:1.1rem;color:var(--brown);margin:0;
}
.share-modal-close{
  background:none;border:none;font-size:1.2rem;
  color:var(--text-light);cursor:pointer;
  padding:5px;transition:color 0.2s;
}
.share-modal-close:hover{color:var(--brown)}

.share-card-preview{
  margin-bottom:20px;
}
.share-card{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:16px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}
.share-card-bg{
  position:absolute;inset:0;
}
.share-card-content{
  position:relative;z-index:1;
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:30px;text-align:center;color:white;
}
.share-card-icon{
  font-size:3rem;margin-bottom:15px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.share-card-title{
  font-size:1.4rem;font-weight:700;
  margin:0 0 10px;
  text-shadow:0 2px 4px rgba(0,0,0,0.2);
  line-height:1.3;
}
.share-card-location{
  font-size:0.9rem;opacity:0.95;
  margin:0 0 8px;
}
.share-card-location i{margin-right:5px}
.share-card-category{
  font-size:0.8rem;opacity:0.85;
  background:rgba(255,255,255,0.2);
  padding:4px 12px;border-radius:15px;
  margin:0;
}
.share-card-footer{
  position:absolute;bottom:15px;left:15px;right:15px;
  display:flex;justify-content:space-between;
  font-size:0.7rem;opacity:0.8;
}
.share-card-logo,.share-card-site{
  background:rgba(0,0,0,0.2);padding:4px 10px;
  border-radius:10px;
}

.share-card-actions{
  display:flex;gap:10px;
}
.share-card-actions button{
  flex:1;padding:12px;border:none;border-radius:12px;
  font-size:0.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all 0.2s;
}
.share-btn-download{
  background:linear-gradient(135deg,var(--sage),var(--sage-dark));
  color:white;
}
.share-btn-download:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(122,154,106,0.4)}
.share-btn-copy{
  background:var(--beige);color:var(--brown);
}
.share-btn-copy:hover{background:var(--beige-light)}

/* Share button on timeline */
.timeline-share{
  padding:4px 8px;background:var(--beige);
  border:none;border-radius:8px;cursor:pointer;
  font-size:0.75rem;color:var(--text-light);
  transition:all 0.2s;margin-left:auto;flex-shrink:0;
}
.timeline-share:hover{
  background:var(--sage);color:white;
}

[data-theme="dark"] .share-modal-content{
  background:var(--cream-light);
}
[data-theme="dark"] .share-card{
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* ===== SMART RECOMMENDATIONS (智慧推薦系統) ===== */
.recommend-intro{
  text-align:center;padding:10px;margin-bottom:15px;
}
.recommend-intro p{
  font-size:0.85rem;color:var(--text-light);margin:0;
}
.recommend-filters{
  display:flex;gap:10px;margin-bottom:15px;
}
.recommend-filters select{
  flex:1;padding:10px;border:1px solid var(--beige);
  border-radius:12px;background:var(--cream-light);
  color:var(--text);font-size:0.85rem;cursor:pointer;
}
.recommend-quick{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:8px;margin-bottom:20px;
}
.recommend-quick button{
  padding:12px 10px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--beige),var(--beige-light));
  color:var(--text);font-size:0.85rem;cursor:pointer;
  transition:all 0.2s;display:flex;align-items:center;
  justify-content:center;gap:6px;
}
.recommend-quick button:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  background:linear-gradient(135deg,var(--sage-light),var(--sage));
  color:white;
}
.recommend-list{
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(100vh - 380px);overflow-y:auto;
}
.recommend-empty{
  text-align:center;padding:40px 20px;color:var(--text-light);
}
.recommend-empty i{font-size:2rem;margin-bottom:10px;opacity:0.5}
.recommend-empty p{font-size:0.9rem;margin:0}

.recommend-item{
  display:flex;align-items:center;gap:12px;
  padding:12px;background:var(--cream-light);
  border-radius:14px;cursor:pointer;
  transition:all 0.2s;border:1px solid transparent;
}
.recommend-item:hover{
  background:var(--beige-light);
  border-color:var(--beige);
  transform:translateX(5px);
}
.recommend-icon{
  font-size:1.5rem;width:45px;height:45px;
  background:var(--beige);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.recommend-info{flex:1;min-width:0}
.recommend-name{
  font-size:0.9rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recommend-meta{
  font-size:0.75rem;color:var(--text-light);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recommend-share{
  padding:8px;background:var(--beige);border:none;
  border-radius:10px;cursor:pointer;color:var(--text-light);
  transition:all 0.2s;flex-shrink:0;
}
.recommend-share:hover{
  background:var(--sage);color:white;
}

[data-theme="dark"] .recommend-item{background:var(--beige)}
[data-theme="dark"] .recommend-icon{background:var(--beige-light)}
[data-theme="dark"] .recommend-quick button{
  background:linear-gradient(135deg,var(--beige),var(--beige-light));
}

/* ===== PUSH NOTIFICATIONS (推播通知) ===== */
.notify-section{
  background:var(--cream-light);border-radius:16px;
  padding:20px;margin-bottom:15px;
}
.notify-header{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.notify-header i{font-size:1.3rem;color:var(--sage)}
.notify-header h4{margin:0;font-size:1rem;color:var(--brown)}
.notify-desc{
  font-size:0.85rem;color:var(--text-light);
  margin:0 0 15px;line-height:1.5;
}
.notify-status{margin-bottom:15px}
.notify-badge{
  display:inline-block;padding:6px 14px;
  border-radius:20px;font-size:0.8rem;
}
.notify-badge.success{
  background:rgba(122,154,106,0.2);color:var(--sage-dark);
}
.notify-badge.error{
  background:rgba(220,80,80,0.15);color:#c44;
}
.notify-badge.pending{
  background:var(--beige);color:var(--text-light);
}
.notify-btn{
  width:100%;padding:14px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--sage),var(--sage-dark));
  color:white;font-size:0.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all 0.2s;
}
.notify-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(122,154,106,0.3)}
.notify-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.notify-btn.active{background:var(--beige);color:var(--text)}

.notify-test-btn{
  width:100%;padding:12px;border:none;border-radius:12px;
  background:var(--beige);color:var(--text);font-size:0.9rem;
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;transition:all 0.2s;
}
.notify-test-btn:hover{
  background:var(--gold);color:white;
}

.notify-options{
  display:flex;flex-direction:column;gap:10px;
}
.notify-option{
  display:flex;align-items:center;gap:10px;
  padding:10px;background:var(--beige);border-radius:10px;
  cursor:pointer;transition:background 0.2s;
}
.notify-option:hover{background:var(--beige-light)}
.notify-option input{
  width:18px;height:18px;accent-color:var(--sage);
}
.notify-option span{font-size:0.85rem;color:var(--text)}

[data-theme="dark"] .notify-section{background:var(--beige)}
[data-theme="dark"] .notify-badge.success{
  background:rgba(122,154,106,0.3);
}
[data-theme="dark"] .notify-option{background:var(--beige-light)}

/* ==================== INSTAGRAM FEED SECTION ==================== */
.ig-section {
  margin-top: 40px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(131,58,180,0.05) 0%, rgba(253,29,29,0.05) 50%, rgba(252,176,69,0.05) 100%);
  border-radius: 20px;
  border: 1px solid rgba(131,58,180,0.1);
}

.ig-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.ig-section-header h2 {
  font-size: 1.3rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ig-section-header h2 i {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ig-follow-btn {
  padding: 4px 12px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
  text-decoration: none;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ig-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(131,58,180,0.3);
}

.ig-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .ig-feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Glassmorphism IG 卡片 */
.ig-feed-item {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  background:rgba(255,255,255,0.5);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  border:1px solid rgba(255,255,255,0.6);
  transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ig-feed-item:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 40px rgba(0,0,0,0.15);
}

.ig-feed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ig-feed-item:hover img {
  transform: scale(1.1);
}

.ig-type-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* 影片播放按鈕置中 */
.ig-feed-item[data-video="true"] .ig-type-icon {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  backdrop-filter: blur(5px);
}

.ig-feed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.ig-feed-item:hover .ig-feed-overlay {
  opacity: 1;
}

/* Skeleton loading */
.ig-skeleton { background: #f0ebe4; }
.ig-skeleton-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0ebe4 25%, #e8e0d5 50%, #f0ebe4 75%);
  background-size: 200% 100%;
  animation: igShimmer 1.5s infinite;
}
@keyframes igShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Full page Instagram section */
.ig-section-full {
  margin-top: 0;
  background: transparent;
  border: none;
  padding: 20px 0;
}

.ig-section-full .ig-feed-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .ig-section-full .ig-feed-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .ig-section-full .ig-feed-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.ig-section-full .ig-feed-item {
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Instagram Filter Tags */
.ig-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ig-tag-btn {
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 15px;
  background: white;
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ig-tag-btn:hover {
  border-color: var(--sage);
  background: rgba(122,154,106,0.1);
}

.ig-tag-btn.active {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
  color: white;
  border-color: transparent;
}

.ig-tag-count {
  font-size: 0.65rem;
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 8px;
}

.ig-tag-btn.active .ig-tag-count {
  background: rgba(255,255,255,0.3);
}

/* Dark mode for Instagram tags */
[data-theme="dark"] .ig-tag-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #e0e0e0;
}

[data-theme="dark"] .ig-tag-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}

[data-theme="dark"] .ig-tag-btn.active {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
  color: white;
  border-color: transparent;
}

[data-theme="dark"] .ig-tag-count {
  background: rgba(255,255,255,0.15);
}

[data-theme="dark"] .ig-filter-tags {
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .ig-section-header h2 {
  color: #e0e0e0;
}

[data-theme="dark"] .ig-follow-btn {
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Dark mode for weather and exchange cards */
[data-theme="dark"] .weather-card,
[data-theme="dark"] .exchange-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .weather-info h4,
[data-theme="dark"] .exchange-info h4 {
  color: #e0e0e0;
}

[data-theme="dark"] .weather-kr,
[data-theme="dark"] .weather-desc,
[data-theme="dark"] .weather-details,
[data-theme="dark"] .exchange-sub {
  color: #aaa;
}

[data-theme="dark"] .tools-panel .weather-card,
[data-theme="dark"] .tools-panel .exchange-card {
  background: rgba(255,255,255,0.05);
}

/* Dark mode for header when scrolled */
[data-theme="dark"] .header.scrolled {
  background: rgba(30, 30, 35, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .header {
  background: transparent;
}

[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(30, 30, 35, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Infinite scroll for Instagram */
.ig-load-more-wrap {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 0;
}

.ig-loading-spinner {
  color: var(--sage);
  font-size: 1rem;
  margin-bottom: 8px;
}

.ig-loading-spinner i {
  margin-right: 8px;
}

.ig-load-progress {
  color: #999;
  font-size: 0.8rem;
  margin: 0;
}

.ig-end-text {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  padding: 20px 0;
}

[data-theme="dark"] .ig-loading-spinner {
  color: #a8c89a;
}

[data-theme="dark"] .ig-load-progress {
  color: #777;
}

[data-theme="dark"] .ig-end-text {
  color: #aaa;
}

/* Video preview in Instagram feed */
.ig-feed-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.ig-feed-item:hover video {
  transform: scale(1.08);
}

.ig-feed-item[data-video="true"] .ig-type-icon {
  transition: opacity 0.3s;
}

.ig-feed-item[data-video="true"]:hover .ig-type-icon {
  opacity: 0;
}

/* IG Post Modal */
.ig-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.ig-modal.active {
  opacity: 1;
  visibility: visible;
}

.ig-modal-content {
  background: white;
  border-radius: 16px;
  max-width: 900px;
  width: 95%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 25px 80px rgba(0,0,0,0.4);
}

.ig-modal.active .ig-modal-content {
  transform: scale(1) translateY(0);
}

.ig-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, transform 0.2s;
}

.ig-modal-close:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.1);
}

.ig-modal-media {
  position: relative;
  width: 55%;
  min-height: 400px;
  max-height: 85vh;
  background: #000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-modal-media img,
.ig-modal-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ig-modal-info {
  width: 45%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 85vh;
}

.ig-modal-caption {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 12px;
  word-break: break-word;
  flex: 1;
}

.ig-modal-caption .ig-hashtag {
  color: #0095f6;
  font-weight: 500;
}

.ig-modal-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 12px;
}

.ig-modal-likes i {
  color: #e74c3c;
  margin-right: 4px;
}

.ig-modal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ig-modal-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(225,48,108,0.4);
}

/* IG Modal Carousel Navigation */
.ig-modal-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}

.ig-modal-prev,
.ig-modal-next {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ig-modal-prev:hover,
.ig-modal-next:hover {
  background: #fff;
  transform: scale(1.1);
}

.ig-modal-prev i,
.ig-modal-next i {
  color: #333;
  font-size: 14px;
}

.ig-modal-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.ig-modal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.2s;
}

.ig-modal-dot.active {
  background: #fff;
  transform: scale(1.2);
}

.ig-modal-dot:hover {
  background: rgba(255,255,255,0.8);
}

/* Dark mode IG Modal */
[data-theme="dark"] .ig-modal-content {
  background: #1e1e1e;
}

[data-theme="dark"] .ig-modal-caption {
  color: #ddd;
}

[data-theme="dark"] .ig-modal-meta {
  color: #999;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ig-modal {
    padding: 10px;
  }

  .ig-modal-content {
    flex-direction: column;
    max-height: 95vh;
    border-radius: 12px;
    overflow-y: auto;
  }

  .ig-modal-media {
    width: 100%;
    min-height: auto;
    aspect-ratio: 1;
    max-height: 50vh;
  }

  .ig-modal-info {
    width: 100%;
    padding: 12px;
    max-height: none;
    overflow-y: visible;
  }
}

/* ==================== 2024-2025 現代化設計元素 ==================== */

/* ===== 1. 滾動觸發動畫 (Scroll Animations) ===== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal.delay-1 { transition-delay: 0.1s; }
.scroll-reveal.delay-2 { transition-delay: 0.2s; }
.scroll-reveal.delay-3 { transition-delay: 0.3s; }
.scroll-reveal.delay-4 { transition-delay: 0.4s; }

/* 滾動觸發縮放效果 */
.scroll-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scroll-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* 滾動觸發模糊效果 */
.scroll-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-blur.revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ===== 2. 3D 卡片傾斜效果 (Tilt Cards) ===== */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.tilt-card .tilt-inner {
  transform: translateZ(20px);
  transition: transform 0.3s ease;
}
.tilt-card:hover .tilt-inner {
  transform: translateZ(40px);
}
/* 3D 光澤效果 */
.tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 54%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 10;
}
.tilt-card:hover::before {
  opacity: 1;
}

/* ===== 3. 磁性游標效果 (Magnetic Cursor) ===== */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.magnetic:hover {
  /* 效果由 JS 控制 */
}

/* 自定義游標 */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--sage);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  mix-blend-mode: difference;
  display: none;
}
.cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid var(--sage);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
  display: none;
}
.cursor-dot.active, .cursor-ring.active {
  display: block;
}
.cursor-dot.hover {
  width: 16px;
  height: 16px;
  background: var(--gold);
}
.cursor-ring.hover {
  width: 60px;
  height: 60px;
  border-color: var(--gold);
}
@media (max-width: 1024px) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ===== 4. 漸層動畫背景 (Animated Gradients) ===== */
.gradient-animate {
  background: linear-gradient(
    -45deg,
    var(--cream),
    var(--sage-light),
    var(--gold-light),
    var(--pink),
    var(--cream)
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 呼吸發光效果 */
.glow-breathe {
  animation: glowBreathe 4s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { box-shadow: 0 0 20px rgba(167, 184, 154, 0.3); }
  50% { box-shadow: 0 0 40px rgba(167, 184, 154, 0.6), 0 0 60px rgba(167, 184, 154, 0.3); }
}

/* Mesh 漸層背景 */
.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, var(--sage-light) 0px, transparent 50%),
    radial-gradient(at 80% 0%, var(--gold-light) 0px, transparent 50%),
    radial-gradient(at 0% 50%, var(--pink) 0px, transparent 50%),
    radial-gradient(at 80% 50%, var(--latte) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--butter) 0px, transparent 50%),
    radial-gradient(at 80% 100%, var(--cream) 0px, transparent 50%),
    var(--cream);
}

/* ===== 5. 噪點紋理覆蓋層 (Noise Texture) ===== */
.noise-overlay {
  position: relative;
}
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* 復古紙張紋理 */
.paper-texture {
  position: relative;
}
.paper-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 115, 85, 0.01) 2px,
      rgba(139, 115, 85, 0.01) 4px
    );
  pointer-events: none;
  z-index: 1;
}

/* ===== 6. 彈性動畫效果 (Spring Animations) ===== */
.spring-bounce {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spring-bounce:hover {
  transform: scale(1.05);
}
.spring-bounce:active {
  transform: scale(0.95);
}

/* 果凍彈跳效果 */
.jelly {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.jelly:hover {
  transform: scale(1.1);
}
.jelly:active {
  animation: jellySquish 0.4s ease;
}
@keyframes jellySquish {
  0% { transform: scale(1, 1); }
  20% { transform: scale(0.9, 1.1); }
  40% { transform: scale(1.1, 0.9); }
  60% { transform: scale(0.95, 1.05); }
  80% { transform: scale(1.02, 0.98); }
  100% { transform: scale(1, 1); }
}

/* 浮動動畫 */
.float-gentle {
  animation: floatGentle 6s ease-in-out infinite;
}
@keyframes floatGentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

/* 搖擺動畫 */
.swing {
  transform-origin: top center;
  animation: swingMotion 3s ease-in-out infinite;
}
@keyframes swingMotion {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* ===== 7. 按鈕水波紋效果 (Ripple Effect) ===== */
.ripple-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}
@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 發光按鈕 */
.glow-btn {
  position: relative;
  z-index: 1;
}
.glow-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, var(--sage), var(--gold), var(--sage));
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.3s ease;
  animation: glowRotate 3s linear infinite;
}
@keyframes glowRotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.glow-btn:hover::before {
  opacity: 1;
}

/* ===== 8. 輸入框聚焦發光效果 (Input Glow) ===== */
.input-glow {
  position: relative;
  background: transparent;
}
.input-glow input,
.input-glow textarea,
.input-glow select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-glow input:focus,
.input-glow textarea:focus,
.input-glow select:focus {
  border-color: var(--sage);
  box-shadow:
    0 0 0 3px rgba(167, 184, 154, 0.2),
    0 0 20px rgba(167, 184, 154, 0.15);
  outline: none;
}

/* 底線動畫輸入框 */
.input-underline {
  position: relative;
}
.input-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sage), var(--gold));
  transition: width 0.4s ease, left 0.4s ease;
}
.input-underline:focus-within::after {
  width: 100%;
  left: 0;
}

/* ===== 9. 載入骨架屏 (Skeleton Loading) ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--cream-dark) 0%,
    var(--cream-light) 20%,
    var(--cream-dark) 40%,
    var(--cream-dark) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.long { width: 100%; }

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-card {
  aspect-ratio: 1;
  border-radius: 16px;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: 12px;
}

/* ===== 10. 進階微互動 (Micro-interactions) ===== */

/* 心跳效果 */
.heartbeat:hover {
  animation: heartbeat 0.6s ease-in-out;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

/* 閃爍效果 */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmerMove 2s infinite;
}
@keyframes shimmerMove {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 旋轉進入效果 */
.rotate-in {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rotate-in.revealed {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* 打字機效果 */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--sage);
  white-space: nowrap;
  animation:
    typewriter 3s steps(40) 1s forwards,
    blinkCaret 0.75s step-end infinite;
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blinkCaret {
  from, to { border-color: transparent; }
  50% { border-color: var(--sage); }
}

/* 數字跳動效果 */
.number-pop {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.number-pop.pop {
  animation: numberPopAnim 0.4s ease;
}
@keyframes numberPopAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 標籤彈入效果 */
.tag-bounce {
  opacity: 0;
  transform: scale(0) translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tag-bounce.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ===== 11. 玻璃態強化 (Enhanced Glassmorphism) ===== */
.glass-premium {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 32px rgba(255, 255, 255, 0.1);
}

/* 霓虹玻璃效果 */
.glass-neon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.glass-neon::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--sage), var(--gold), var(--pink), var(--sage));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: neonBorder 4s ease infinite;
  opacity: 0.5;
}
@keyframes neonBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== 12. 視差滾動效果 (Parallax) ===== */
.parallax-container {
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}
.parallax-layer {
  transform-style: preserve-3d;
}
.parallax-back {
  transform: translateZ(-2px) scale(3);
}
.parallax-front {
  transform: translateZ(0);
}

/* ===== 13. 文字動畫效果 (Text Animations) ===== */
.text-gradient-animate {
  background: linear-gradient(90deg, var(--brown), var(--sage), var(--gold), var(--brown));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradientMove 5s linear infinite;
}
@keyframes textGradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 文字浮現效果 */
.text-reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.text-reveal.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* 文字分散效果 */
.split-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-text.revealed span {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 14. 圖片懸停效果強化 ===== */
.img-zoom-blur {
  overflow: hidden;
}
.img-zoom-blur img {
  transition: transform 0.6s ease, filter 0.6s ease;
}
.img-zoom-blur:hover img {
  transform: scale(1.15);
  filter: blur(2px);
}
.img-zoom-blur::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.img-zoom-blur:hover::after {
  opacity: 1;
}

/* Ken Burns 效果 */
.ken-burns img {
  animation: kenBurns 20s ease infinite alternate;
}
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.2) translate(-3%, -3%); }
}

/* ===== 15. 深色模式現代化元素支援 ===== */
[data-theme="dark"] .scroll-reveal,
[data-theme="dark"] .scroll-scale,
[data-theme="dark"] .scroll-blur {
  /* 保持動畫效果 */
}

[data-theme="dark"] .glass-premium {
  background: rgba(30, 26, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 32px rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .gradient-animate {
  background: linear-gradient(
    -45deg,
    var(--cream),
    var(--sage-dark),
    var(--gold-light),
    var(--cream)
  );
  background-size: 400% 400%;
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--beige) 0%,
    var(--beige-light) 20%,
    var(--beige) 40%,
    var(--beige) 100%
  );
  background-size: 200% 100%;
}

[data-theme="dark"] .noise-overlay::after {
  opacity: 0.05;
}

[data-theme="dark"] .cursor-dot {
  background: var(--sage-light);
}

[data-theme="dark"] .cursor-ring {
  border-color: var(--sage-light);
}

/* ===== WEATHER ANIMATIONS (天氣動畫) ===== */
.weather-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* 雪花動畫 */
.snowflake {
  position: absolute;
  top: -10px;
  color: #fff;
  font-size: 1em;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
  animation: snowfall linear infinite;
  opacity: 0.8;
}

@keyframes snowfall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg) translateX(50px);
    opacity: 0.3;
  }
}

/* 雨滴動畫 */
.raindrop {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 15px;
  background: linear-gradient(transparent, rgba(174, 194, 224, 0.6));
  border-radius: 0 0 5px 5px;
  animation: rainfall linear infinite;
}

@keyframes rainfall {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0.2;
  }
}

/* 霧氣效果 */
.fog-layer {
  position: absolute;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.03) 20%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 80%,
    transparent 100%
  );
  animation: fog-drift 30s linear infinite;
}

@keyframes fog-drift {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* 深色模式下的天氣效果調整 */
[data-theme="dark"] .raindrop {
  background: linear-gradient(transparent, rgba(120, 150, 200, 0.5));
}

[data-theme="dark"] .fog-layer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.05) 20%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.05) 80%,
    transparent 100%
  );
}

/* 強風效果 - 飄動的樹葉/塵埃 */
.wind-particle {
  position: absolute;
  font-size: 1rem;
  opacity: 0.6;
  animation: wind-blow linear infinite;
}

@keyframes wind-blow {
  0% {
    transform: translateX(-20px) translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(100vw) translateY(100px) rotate(720deg);
    opacity: 0;
  }
}

/* 強風時的背景微動 */
.wind-active {
  animation: wind-sway 3s ease-in-out infinite;
}

@keyframes wind-sway {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}

/* 晴天陽光效果 */
.sun-ray {
  position: absolute;
  top: -50px;
  width: 3px;
  height: 150px;
  background: linear-gradient(
    180deg,
    rgba(255, 236, 179, 0.8) 0%,
    rgba(255, 236, 179, 0.3) 50%,
    transparent 100%
  );
  transform-origin: top center;
  animation: sun-shimmer ease-in-out infinite;
  filter: blur(1px);
}

@keyframes sun-shimmer {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(1) rotate(var(--ray-angle, 0deg));
  }
  50% {
    opacity: 0.6;
    transform: scaleY(1.1) rotate(var(--ray-angle, 0deg));
  }
}

/* 陽光光暈 */
.sun-flare {
  position: absolute;
  top: -30px;
  right: 10%;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    rgba(255, 244, 214, 0.4) 0%,
    rgba(255, 236, 179, 0.2) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: sun-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sun-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* 深色模式調整 */
[data-theme="dark"] .sun-ray {
  background: linear-gradient(
    180deg,
    rgba(255, 220, 150, 0.5) 0%,
    rgba(255, 220, 150, 0.2) 50%,
    transparent 100%
  );
}

[data-theme="dark"] .sun-flare {
  background: radial-gradient(
    circle,
    rgba(255, 220, 150, 0.3) 0%,
    rgba(255, 220, 150, 0.1) 40%,
    transparent 70%
  );
}

/* 減少動畫效果（尊重使用者偏好） */
@media (prefers-reduced-motion: reduce) {
  .snowflake,
  .raindrop,
  .fog-layer,
  .wind-particle,
  .sun-ray,
  .sun-flare {
    animation: none;
    display: none;
  }
}