/* ============================================================
   v0 Design System — Transplant CSS
   Applies v0 visual design to the existing PHP site.
   Scoped to .mainpage to avoid affecting other pages.
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
  --v0-primary:          #1d6fa7;
  --v0-rose-pink:        #f5d0da;
  --v0-rose-pink-light:  #fbf0f4;
  --v0-sky-blue:         #c5e5f5;
  --v0-sky-blue-light:   #e8f5fb;
  --v0-navy:             #1e2d4a;
  --v0-muted:            #f7f8fa;
  --v0-border:           #e5eaef;
  --v0-fg:               #1a202c;
  --v0-fg-muted:         #6c7280;
}

/* ============================================================
   HERO — 1883 bg section (원본 그대로 유지, 건드리지 않음)
   ============================================================ */

/* ============================================================
   HERO CTA — 1883 banner (원본 그대로 유지)
   ============================================================ */

/* ============================================================
   EVENT INFO SECTION — lsp-wrap
   ============================================================ */
.mainpage #main-banner {
  background-image: none !important;
  background-color: transparent !important;
  background: linear-gradient(160deg,
    var(--v0-sky-blue-light) 0%,
    #ffffff 55%,
    var(--v0-rose-pink-light) 100%
  ) !important;
}
/* Modernize the main event info card */
.mainpage .sectionWrap.lsp-wrap .lsp-info-box > .lsp-text {
  border: 1px solid var(--v0-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  background: url(/images/character/img-0106-01.png) no-repeat right bottom / 100px auto #fff !important;
}
.mainpage .sectionWrap.lsp-wrap .lsp-info-box > .lsp-text > .title {
  color: var(--v0-primary) !important;
}
/* Banner process circle */
.mainpage .sectionWrap.lsp-wrap .lsp-info-box > .lsp-box {
  background-color: var(--v0-sky-blue-light) !important;
  border-color: var(--v0-border) !important;
}
.mainpage .sectionWrap.lsp-wrap .lsp-info-box > .lsp-box div.process > div > span {
  border-color: var(--v0-primary) !important;
}
.mainpage .sectionWrap.lsp-wrap .lsp-info-box > .lsp-box div.process > div:nth-child(odd) > span {
  border-color: var(--v0-primary) !important;
}
.mainpage .sectionWrap.lsp-wrap .lsp-info-box > .lsp-box div.process > div:nth-child(even) > span {
  border-color: var(--v0-rose-pink) !important;
}

/* ============================================================
   HOW TO JOIN SECTION
   ============================================================ */
.mainpage #main-join-section {
  background-color: rgba(200, 229, 245, 0.3) !important; /* sky-blue-light/50 */
}
/* Expand card width to match youtube player width (960px) */
.mainpage #main-join-section .w-768 {
  max-width: 960px !important;
  width: 100% !important;
}
/* Expand button column to match */
.mainpage #main-join-section .row.mt-5.justify-content-center > [class*="col-"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 960px !important;
}
/* Card header: override inline style for "How to Join" */
.mainpage #main-join-section .card-header {
  background-color: var(--v0-primary) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  font-size: 1rem !important;
  padding: 1rem 1.5rem !important;
}
.mainpage #main-join-section .card {
  border: 1px solid var(--v0-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}
.mainpage #main-join-section .card-body {
  padding: 1.5rem !important;
  line-height: 1.8 !important;
}
/* CTA buttons */
.mainpage #main-join-section .btn[style*="007dc6"] {
  background-color: var(--v0-primary) !important;
  border-color: var(--v0-primary) !important;
  border-radius: 2rem !important;
}
.mainpage #main-join-section .btn-secondary {
  background-color: #f16681 !important;
  border-color: #f16681 !important;
  color: #fff !important;
  border-radius: 2rem !important;
}
.mainpage #main-join-section .btn[style*="f16681"] {
  background-color: #f16681 !important;
  border-color: #f16681 !important;
  color: #fff !important;
  border-radius: 2rem !important;
}

/* ============================================================
   GUIDELINES SECTION — Guidelines + Special Rewards + Additional Benefits
   ============================================================ */
.mainpage #main-guidelines-section {
  background-color: #ffffff;
}
/* Expand card width to match youtube player width (960px) */
.mainpage #main-guidelines-section .w-768 {
  max-width: 960px !important;
  width: 100% !important;
}

/* Event Guidelines card */
.mainpage #main-guidelines-section .card-header.bg-success-subtle {
  background-color: #FEBAD8 !important;
  color: #7d1a4a !important;
  border-bottom: 2px solid #e87ab0 !important;
  font-size: 1rem !important;
  padding: 1rem 1.5rem !important;
}
/* Special Rewards card */
.mainpage #main-guidelines-section .card-header.bg-warning-subtle {
  background-color: var(--v0-navy) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  font-size: 1rem !important;
  padding: 1rem 1.5rem !important;
}
/* Additional Benefits card */
.mainpage #main-guidelines-section .card-header.bg-danger-subtle {
  background-color: #99DCFE !important;
  color: #0d4f7a !important;
  border-bottom: 2px solid #5bc0f0 !important;
  font-size: 1rem !important;
  padding: 1rem 1.5rem !important;
}
/* All cards in guidelines section */
.mainpage #main-guidelines-section .card {
  border: 1px solid var(--v0-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  overflow: hidden !important;
}
.mainpage #main-guidelines-section .card-body {
  padding: 1.5rem !important;
  line-height: 1.8 !important;
}
/* Special Rewards section background */
.mainpage #main-guidelines-section .row.my-5 .card {
  background-color: #fff !important;
}
/* Character image */
.mainpage #main-guidelines-section .character.small {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}

/* ============================================================
   BACKGROUND ALTERNATION (for key sections)
   ============================================================ */
/* "Beginning of travel" parallax — keep as-is */

/* ============================================================
   E-CATALOG CARDS
   ============================================================ */
.mainpage .container-fluid.py-5:has(.col-6.col-sm-6.col-md-3) .card {
  border: 1px solid var(--v0-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.mainpage .container-fluid.py-5:has(.col-6.col-sm-6.col-md-3) .card:hover {
  box-shadow: 0 8px 24px rgba(29,111,167,0.15) !important;
  transform: translateY(-2px) !important;
}
.mainpage .container-fluid.py-5:has(.col-6.col-sm-6.col-md-3) .btn-outline-dark {
  border-color: var(--v0-primary) !important;
  color: var(--v0-primary) !important;
  border-radius: 2rem !important;
}
.mainpage .container-fluid.py-5:has(.col-6.col-sm-6.col-md-3) .btn-outline-dark:hover {
  background-color: var(--v0-primary) !important;
  color: #fff !important;
}

/* ============================================================
   "LET'S GO ON A TRIP" CTA SECTION
   ============================================================ */
/* Keep bg-fixed-image as-is */

/* ============================================================
   FOOTER — Navy for main page
   ============================================================ */
.mainpage footer.footer {
  background-color: var(--v0-navy) !important;
  border-top: none !important;
  padding: 3rem 1rem 5rem !important;
}
.mainpage footer.footer a {
  color: rgba(255,255,255,0.5) !important;
}
.mainpage footer.footer a:hover {
  color: #ffffff !important;
}
.mainpage footer.footer .btn-outline-primary {
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
}
.mainpage footer.footer .btn-outline-secondary {
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
.mainpage footer.footer .btn-outline-primary:hover,
.mainpage footer.footer .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}
.mainpage footer.footer .list-group-item {
  background: transparent !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.mainpage footer.footer .list-group-item a {
  color: rgba(255,255,255,0.5) !important;
}
.mainpage footer.footer .list-group-item.active {
  background-color: rgba(255,255,255,0.1) !important;
}
.mainpage footer.footer .site-language .list-group-item a img {
  opacity: 0.7;
}
.mainpage footer.footer .move-top {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.mainpage footer.footer .share-btn {
  background-color: rgba(255,255,255,0.1) !important;
}
.mainpage footer.footer .go-to-help {
  background-color: var(--v0-rose-pink) !important;
  border-color: var(--v0-rose-pink) !important;
  color: var(--v0-fg) !important;
}

/* ============================================================
   GLOBAL BUTTON STYLE OVERRIDES (mainpage)
   ============================================================ */
.mainpage .btn-dark[style*="007dc6"] {
  border-radius: 2rem !important;
}
.mainpage .btn-dark[style*="f16681"] {
  border-radius: 2rem !important;
}

/* ============================================================
   DIVIDER STYLE
   ============================================================ */
.mainpage .section-title .divider.dark {
  border-color: var(--v0-primary) !important;
}
.mainpage .section-title .divider.dark:after,
.mainpage .section-title .divider.dark:before {
  background: var(--v0-primary) !important;
  opacity: 0.3 !important;
}

/* ============================================================
   INFOCENTER PAGE
   body.infoCenter
   ============================================================ */

/* Hero section gradient background */
.infoCenter #infocenter-hero {
  background: linear-gradient(135deg,
    #0079c2 0%,
    #99DCFE 50%,
    #FEBAD8 100%
  ) !important;
  background-attachment: scroll !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.infoCenter #infocenter-hero::before {
  display: none !important;
}
.infoCenter #infocenter-hero h1 {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* Intro text section */
.infoCenter .container-fluid.py-5.bg-white h2.text-gradient {
  background: linear-gradient(135deg, #0079c2 0%, #e05a9a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ============================================================
   INFOCENTER — Detail header section
   ============================================================ */
.infoCenter #infocenter-detail-header {
  background: linear-gradient(160deg,
    var(--v0-sky-blue-light) 0%,
    #ffffff 50%,
    var(--v0-rose-pink-light) 100%
  ) !important;
}
.infoCenter #infocenter-detail-header h2.text-gradient {
  background: linear-gradient(135deg, var(--v0-primary), #e06090) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.infoCenter #infocenter-detail-header blockquote {
  background: rgba(255,255,255,0.7) !important;
  border-left: 4px solid var(--v0-sky-blue) !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
  padding: 1rem 1.25rem !important;
  backdrop-filter: blur(4px) !important;
}

/* Cards section background */
.infoCenter #infocenter-cards-section {
  background: linear-gradient(180deg,
    rgba(232,245,251,0.5) 0%,
    #ffffff 40%,
    rgba(251,240,244,0.5) 100%
  ) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 3rem !important;
  border-radius: 0 !important;
}

/* "Tap to flip" badge */
.infoCenter .v0-flip-badge-wrap {
  padding: 0.5rem 0 1.5rem;
}
.infoCenter .v0-flip-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, var(--v0-sky-blue-light), var(--v0-rose-pink-light));
  color: var(--v0-fg-muted);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--v0-border);
}

/* Area filter button group — override Bootstrap btn-group */
.infoCenter #areaGroup_btn.btn-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  border: none !important;
  background: none !important;
}
.infoCenter #areaGroup_btn.btn-group > .btn {
  margin-left: 0 !important;
  border-radius: 2rem !important;
}

/* Area filter button group */
.infoCenter #areaGroup_btn .btn-outline-secondary {
  border-radius: 2rem !important;
  border-color: var(--v0-border) !important;
  color: var(--v0-fg-muted) !important;
  background: #fff !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  margin: 0 2px !important;
}
.infoCenter #areaGroup_btn .btn-outline-secondary:hover {
  border-color: var(--v0-sky-blue) !important;
  color: var(--v0-primary) !important;
  background: var(--v0-sky-blue-light) !important;
}
.infoCenter #areaGroup_btn .btn-outline-secondary.active {
  background: linear-gradient(135deg, var(--v0-primary), #5baad6) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(29,111,167,0.25) !important;
}

/* Mobile select */
.infoCenter #areaGroup_sel {
  border-radius: 0.75rem !important;
  border-color: var(--v0-border) !important;
  padding: 0.6rem 1rem !important;
}
.infoCenter #areaGroup_sel:focus {
  border-color: var(--v0-primary) !important;
  box-shadow: 0 0 0 3px rgba(29,111,167,0.15) !important;
}

/* Location Cards */
.infoCenter #areaGroupTarget .card {
  border: 1px solid var(--v0-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.infoCenter #areaGroupTarget .card:hover {
  box-shadow: 0 8px 28px rgba(29,111,167,0.15) !important;
  transform: translateY(-3px) !important;
}
/* Closed card */
.infoCenter #areaGroupTarget .card.is-close {
  opacity: 0.7 !important;
  filter: grayscale(0.4) !important;
}
/* Area badge pill */
.infoCenter #areaGroupTarget .card .badge.text-bg-dark {
  background: rgba(30,45,74,0.85) !important;
  border-radius: 2rem !important;
  font-size: 0.7rem !important;
  padding: 0.35rem 0.75rem !important;
  font-weight: 500 !important;
  backdrop-filter: blur(4px) !important;
}
/* Goods photo circle */
.infoCenter #areaGroupTarget .card .goodsPhoto {
  width: 60px !important;
  height: 60px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background-size: cover !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
/* Card body */
.infoCenter #areaGroupTarget .card-body {
  padding: 1.25rem !important;
}
.infoCenter #areaGroupTarget .card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--v0-fg) !important;
}
.infoCenter #areaGroupTarget .card-text {
  font-size: 0.85rem !important;
  color: var(--v0-fg-muted) !important;
}
.infoCenter #areaGroupTarget .card-text i {
  color: var(--v0-primary) !important;
  width: 1rem !important;
}
.infoCenter #areaGroupTarget .card-text .fs-7 {
  color: var(--v0-fg) !important;
}
/* Learn more button */
.infoCenter #areaGroupTarget .btn-outline-success {
  border-color: var(--v0-primary) !important;
  color: var(--v0-primary) !important;
  border-radius: 2rem !important;
  font-size: 0.85rem !important;
}
.infoCenter #areaGroupTarget .btn-outline-success:hover {
  background-color: var(--v0-primary) !important;
  color: #fff !important;
}

/* ============================================================
   INFOCENTER — Magazine-style Location Cards (v0 locations)
   ============================================================ */

/* Column stretch — equal height per row */
.infoCenter #infocenter-cards-section .col-md-6 {
  display: flex !important;
  flex-direction: column !important;
}
/* d-none 필터링 복원 — flex !important가 d-none을 덮어쓰는 문제 방지 */
.infoCenter #infocenter-cards-section .col-md-6.d-none {
  display: none !important;
}

/* Card container */
.infoCenter .v0-loc-card {
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.07);
  transition: box-shadow 0.5s ease, border-color 0.3s ease;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}
.infoCenter .v0-loc-card:hover {
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15) !important;
  border-color: transparent !important;
}

/* Horizontal main area */
.infoCenter .v0-loc-main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 576px) {
  .infoCenter .v0-row-normal { flex-direction: row; }
  .infoCenter .v0-row-reverse { flex-direction: row-reverse; }
}

/* Image side */
.infoCenter .v0-loc-img-side {
  position: relative;
  width: 100%;
  height: 14rem;
  overflow: hidden;
  flex-shrink: 0;
}
@media (min-width: 576px) {
  .infoCenter .v0-loc-img-side {
    width: 50%;
    height: 18rem;
  }
}
.infoCenter .v0-loc-img-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
}
.infoCenter .v0-loc-card:hover .v0-loc-img-bg {
  transform: scale(1.08);
}
/* Gradient overlay */
.infoCenter .v0-loc-img-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 55%);
}
@media (min-width: 576px) {
  .infoCenter .v0-grad-right {
    background: linear-gradient(to right, rgba(0,0,0,0.35) 0%, transparent 55%);
  }
  .infoCenter .v0-grad-left {
    background: linear-gradient(to left, rgba(0,0,0,0.35) 0%, transparent 55%);
  }
}
/* Distance badge */
.infoCenter .v0-dist-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  min-width: 3.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
@media (min-width: 576px) {
  .infoCenter .v0-row-reverse .v0-dist-badge { left: auto; right: 1rem; }
}
.infoCenter .v0-dist-label {
  font-size: 0.45rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.82;
}
.infoCenter .v0-dist-value {
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
/* Stamp badge (absolute, top-right of image side) */
.infoCenter .v0-loc-stamp {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  z-index: 2;
}
@media (min-width: 576px) {
  .infoCenter .v0-row-reverse .v0-loc-stamp { right: auto; left: 0.75rem; }
}
.infoCenter .v0-stamp-label { font-size: 0.55rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }
.infoCenter .v0-stamp-num   { font-size: 0.95rem; font-weight: 900; }

/* Stamp colors (sky/rose/violet/amber/emerald/pink) */
.infoCenter .v0-stamp-0 { background: linear-gradient(135deg,#38bdf8,#3b82f6); }
.infoCenter .v0-stamp-1 { background: linear-gradient(135deg,#fb7185,#ec4899); }
.infoCenter .v0-stamp-2 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.infoCenter .v0-stamp-3 { background: linear-gradient(135deg,#fbbf24,#f97316); }
.infoCenter .v0-stamp-4 { background: linear-gradient(135deg,#34d399,#14b8a6); }
.infoCenter .v0-stamp-5 { background: linear-gradient(135deg,#f472b6,#fb7185); }

/* Distance badge colors (same gradient palette as stamp) */
.infoCenter .v0-dist-badge-0 { background: linear-gradient(135deg,#38bdf8,#3b82f6); }
.infoCenter .v0-dist-badge-1 { background: linear-gradient(135deg,#fb7185,#ec4899); }
.infoCenter .v0-dist-badge-2 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.infoCenter .v0-dist-badge-3 { background: linear-gradient(135deg,#fbbf24,#f97316); }
.infoCenter .v0-dist-badge-4 { background: linear-gradient(135deg,#34d399,#14b8a6); }
.infoCenter .v0-dist-badge-5 { background: linear-gradient(135deg,#f472b6,#fb7185); }

/* Card color variants (hover border accent) */
.infoCenter .v0-card-color-0:hover { border-color: #38bdf8 !important; }
.infoCenter .v0-card-color-1:hover { border-color: #fb7185 !important; }
.infoCenter .v0-card-color-2:hover { border-color: #a78bfa !important; }
.infoCenter .v0-card-color-3:hover { border-color: #fbbf24 !important; }
.infoCenter .v0-card-color-4:hover { border-color: #34d399 !important; }
.infoCenter .v0-card-color-5:hover { border-color: #f472b6 !important; }

/* Area tag */
.infoCenter .v0-loc-area-tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--v0-fg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
@media (min-width: 576px) {
  .infoCenter .v0-row-reverse .v0-loc-area-tag { left: auto; right: 0.75rem; }
}
/* Closed overlay */
.infoCenter .v0-img-closed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  opacity: 0.82;
}

/* Content side */
.infoCenter .v0-loc-content-side {
  flex: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.infoCenter .v0-loc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--v0-fg);
  margin: 0 0 0.2rem;
  line-height: 1.35;
  min-height: calc(1rem * 1.35 * 3); /* 3줄 고정 — 소버니어박스 높이 맞춤 */
}
.infoCenter .v0-loc-title-ko {
  font-size: 0.8rem;
  color: var(--v0-fg-muted);
  margin: 0 0 0.9rem;
}

/* Souvenir highlight box */
.infoCenter .v0-souvenir-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-width: 2px;
  border-style: solid;
  border-radius: 1rem;
  padding: 0.75rem;
  margin-bottom: 0.9rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infoCenter .v0-loc-card:hover .v0-souvenir-box {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
/* Souvenir box backgrounds */
.infoCenter .v0-souvenir-bg-0{background:#f0f9ff;border-color:#bae6fd}
.infoCenter .v0-souvenir-bg-1{background:#fff1f2;border-color:#fecdd3}
.infoCenter .v0-souvenir-bg-2{background:#f5f3ff;border-color:#ddd6fe}
.infoCenter .v0-souvenir-bg-3{background:#fffbeb;border-color:#fde68a}
.infoCenter .v0-souvenir-bg-4{background:#ecfdf5;border-color:#a7f3d0}
.infoCenter .v0-souvenir-bg-5{background:#fdf2f8;border-color:#fbcfe8}
/* Icon wrap */
.infoCenter .v0-souvenir-icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
}
.infoCenter .v0-souvenir-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 썸네일 위 돋보기 아이콘 */
.infoCenter .v0-souvenir-icon-wrap {
  position: relative;
}
.infoCenter .v0-souvenir-zoom-icon {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.2s;
}
.infoCenter .v0-souvenir-clickable:hover .v0-souvenir-zoom-icon {
  opacity: 1;
}
/* 클릭 가능 소버니어 박스 */
.infoCenter .v0-souvenir-clickable {
  cursor: pointer;
}
/* 소버니어 이미지 모달 */
#v0-souvenir-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#v0-souvenir-modal.is-open {
  display: flex;
}
.v0-souvenir-modal-inner {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  animation: v0ModalIn 0.2s ease;
}
@keyframes v0ModalIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
#v0-souvenir-modal-img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
}
#v0-souvenir-modal-name {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: #1e2d4a;
  margin: 0;
}
.v0-souvenir-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.v0-souvenir-modal-close:hover {
  background: #e2e8f0;
  color: #1e2d4a;
}
.infoCenter .v0-souvenir-icon-bg-0{background:#e0f2fe}
.infoCenter .v0-souvenir-icon-bg-1{background:#fee2e2}
.infoCenter .v0-souvenir-icon-bg-2{background:#ede9fe}
.infoCenter .v0-souvenir-icon-bg-3{background:#fef3c7}
.infoCenter .v0-souvenir-icon-bg-4{background:#d1fae5}
.infoCenter .v0-souvenir-icon-bg-5{background:#fce7f3}
/* Souvenir label + name */
.infoCenter .v0-souvenir-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.infoCenter .v0-souvenir-text-0{color:#0284c7}
.infoCenter .v0-souvenir-text-1{color:#e11d48}
.infoCenter .v0-souvenir-text-2{color:#7c3aed}
.infoCenter .v0-souvenir-text-3{color:#d97706}
.infoCenter .v0-souvenir-text-4{color:#059669}
.infoCenter .v0-souvenir-text-5{color:#db2777}
.infoCenter .v0-souvenir-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--v0-fg);
  margin-top: 0.15rem;
}
/* Tap hint badge */
.infoCenter .v0-tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 2rem;
  margin-top: 0.35rem;
  animation: v0TapPulse 2.2s ease-in-out infinite;
  cursor: pointer;
}
@keyframes v0TapPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.05); }
}
.infoCenter .v0-tap-hint-0 { background: #e0f2fe; color: #0284c7; }
.infoCenter .v0-tap-hint-1 { background: #fee2e2; color: #e11d48; }
.infoCenter .v0-tap-hint-2 { background: #ede9fe; color: #7c3aed; }
.infoCenter .v0-tap-hint-3 { background: #fef3c7; color: #d97706; }
.infoCenter .v0-tap-hint-4 { background: #d1fae5; color: #059669; }
.infoCenter .v0-tap-hint-5 { background: #fce7f3; color: #db2777; }

/* Quick info row */
.infoCenter .v0-quick-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--v0-fg-muted);
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.infoCenter .v0-qi-divider {
  color: var(--v0-border);
}
.infoCenter .v0-lang-row {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
}
.infoCenter .v0-lang-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
}

/* 모바일: 제목 여백 제거 + 언어 태그 별도 줄 */
@media (max-width: 575px) {
  .infoCenter .v0-loc-title {
    min-height: 0;
  }
  .infoCenter .v0-quick-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .infoCenter .v0-qi-divider {
    display: none;
  }
}
.infoCenter .v0-lang-0{background:#e0f2fe;color:#0284c7}
.infoCenter .v0-lang-1{background:#fee2e2;color:#e11d48}
.infoCenter .v0-lang-2{background:#ede9fe;color:#7c3aed}
.infoCenter .v0-lang-3{background:#fef3c7;color:#d97706}
.infoCenter .v0-lang-4{background:#d1fae5;color:#059669}
.infoCenter .v0-lang-5{background:#fce7f3;color:#db2777}

/* More info button */
.infoCenter .v0-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-top: auto;
  transition: color 0.2s;
  text-decoration: none;
}
.infoCenter .v0-more-btn:hover { text-decoration: underline; }
.infoCenter .v0-chevron {
  transition: transform 0.3s ease;
}
.infoCenter .v0-loc-card.is-expanded .v0-chevron {
  transform: rotate(180deg);
}
.infoCenter .v0-more-text-0{color:#0284c7}
.infoCenter .v0-more-text-1{color:#e11d48}
.infoCenter .v0-more-text-2{color:#7c3aed}
.infoCenter .v0-more-text-3{color:#d97706}
.infoCenter .v0-more-text-4{color:#059669}
.infoCenter .v0-more-text-5{color:#db2777}

/* Expand panel */
.infoCenter .v0-expand-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.3s ease;
}
.infoCenter .v0-loc-card.is-expanded .v0-expand-panel {
  max-height: 220px;
  opacity: 1;
}
.infoCenter .v0-expand-bg-0{background:#f0f9ff;border-top:1px solid #bae6fd}
.infoCenter .v0-expand-bg-1{background:#fff1f2;border-top:1px solid #fecdd3}
.infoCenter .v0-expand-bg-2{background:#f5f3ff;border-top:1px solid #ddd6fe}
.infoCenter .v0-expand-bg-3{background:#fffbeb;border-top:1px solid #fde68a}
.infoCenter .v0-expand-bg-4{background:#ecfdf5;border-top:1px solid #a7f3d0}
.infoCenter .v0-expand-bg-5{background:#fdf2f8;border-top:1px solid #fbcfe8}
.infoCenter .v0-expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
}
.infoCenter .v0-expand-full { grid-column: 1 / -1; }
.infoCenter .v0-expand-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--v0-fg-muted);
  margin-bottom: 0.2rem;
}
.infoCenter .v0-expand-value {
  font-weight: 500;
  color: var(--v0-fg);
}
/* Learn More button inside expand */
.infoCenter .v0-learn-more-btn {
  display: inline-block;
  padding: 0.45rem 1.25rem;
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  color: #fff !important;
  transition: opacity 0.2s;
}
.infoCenter .v0-learn-more-btn:hover { opacity: 0.85; }
.infoCenter .v0-learn-0{background:#0ea5e9}
.infoCenter .v0-learn-1{background:#f43f5e}
.infoCenter .v0-learn-2{background:#8b5cf6}
.infoCenter .v0-learn-3{background:#f59e0b}
.infoCenter .v0-learn-4{background:#10b981}
.infoCenter .v0-learn-5{background:#ec4899}

/* City tour CTA section */
.infoCenter .container-fluid.py-5.mb-5.bg-fixed-image {
  background: linear-gradient(135deg, var(--v0-navy) 0%, #2d4a6e 100%) !important;
  background-attachment: scroll !important;
}
.infoCenter .container-fluid.py-5.mb-5.bg-fixed-image::before {
  display: none !important;
}

/* Footer navy for infoCenter */
.infoCenter footer.footer {
  background-color: var(--v0-navy) !important;
  border-top: none !important;
  padding: 3rem 1rem 5rem !important;
}
.infoCenter footer.footer a {
  color: rgba(255,255,255,0.5) !important;
}
.infoCenter footer.footer a:hover {
  color: #ffffff !important;
}
.infoCenter footer.footer .btn-outline-primary {
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
}
.infoCenter footer.footer .btn-outline-secondary {
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
.infoCenter footer.footer .list-group-item {
  background: transparent !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.infoCenter footer.footer .list-group-item a {
  color: rgba(255,255,255,0.5) !important;
}
.infoCenter footer.footer .list-group-item.active {
  background-color: rgba(255,255,255,0.1) !important;
}
.infoCenter footer.footer .move-top {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.infoCenter footer.footer .share-btn {
  background-color: rgba(255,255,255,0.1) !important;
}
.infoCenter footer.footer .go-to-help {
  background-color: var(--v0-rose-pink) !important;
  border-color: var(--v0-rose-pink) !important;
  color: var(--v0-fg) !important;
}

/* ============================================================
   MAIN PAGE — Card header colors
   ============================================================ */
/* 이벤트 가이드라인 → 찐한 핑크 */
.mainpage .card-header.bg-success-subtle {
  background-color: #f066a8 !important;
  color: #fff !important;
}
/* 추가 특전 → 브랜드 블루 */
.mainpage .card-header.bg-danger-subtle {
  background-color: #0079c2 !important;
  color: #fff !important;
}