:root{
  /* Yeobaek (Travel Encyclopedia) — Curated Archive tokens */
  --surface:#f3faff;                 /* Level 0 canvas */
  --surface-low:#eaf5fc;             /* Level 1 section */
  --surface-lowest:#ffffff;          /* Level 2 card */

  --on-surface:#121d22;              /* no pure black */
  --on-surface-variant:#404752;
  --outline-variant: rgba(191,199,212,.20); /* ghost border (20%) */

  --primary:#0061a4;
  --primary-container:#2196f3;
  --on-primary:#ffffff;

  /* Legacy aliases used across the demo */
  --bg: var(--surface);
  --text: var(--on-surface);
  --muted: var(--on-surface-variant);
  --line: var(--outline-variant);
  --card: var(--surface-lowest);
  --brand: var(--primary);
  --brand2: #54633e;                 /* tertiary olive (accent) */
  --warn:#f59e0b;
  --danger:#ef4444;

  /* Depth (blue-tinted shadow) */
  --shadow: 0 12px 24px rgba(0, 97, 164, 0.08);

  /* Radius anchors */
  --r-md: 12px;                      /* 0.75rem */
  --r-lg: 16px;

  /* Typography scale */
  --fs-900: 34px;
  --fs-800: 28px;
  --fs-700: 20px;
  --fs-600: 16px;
  --fs-500: 14px;
  --fs-400: 12px;
  --lh: 1.55;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Hide scrollbars (keep scrolling) */
html{scrollbar-width:none}
body{scrollbar-width:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0}
body{
  margin:0;
  font-family: "Inter", Pretendard, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", Helvetica, Arial;
  font-size: var(--fs-500);
  line-height: var(--lh);
  letter-spacing: -0.12px;
  color:var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit; text-decoration:none}

/* Icons */
.icon{
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-3px;
  flex:0 0 auto;
}
.icon svg{width:100%; height:100%; display:block}

.nav a{display:flex; align-items:center; gap:8px}
.btn{display:inline-flex; align-items:center; gap:8px}
.pill{display:inline-flex; align-items:center; gap:8px}

/* More dropdown */
.more{position:relative}
.more__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-500);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  white-space:nowrap;      /* prevent 2-line */
  line-height: 1;
}
.more__btn:hover{background:#f8fafc}
.more__btn[aria-expanded="true"]{background:#f1f5f9}
.more__dots{font-weight:900}
.more__menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width: 200px;
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  display:none;
  z-index:50;
}
.more__menu.open{display:block}
.more__menu a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
}
.more__menu a:hover{background:#f1f5f9}

@media (max-width: 520px){
  .icon{width:20px; height:20px}
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:12px 16px;
  /* Glass header (no-line rule) */
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: 0 12px 24px rgba(0, 97, 164, 0.06);
}
/* prevent nav from pushing brand to a second row */
.topbar .brand{flex:0 0 auto}
.topbar .topbarActions{flex:0 0 auto}
.topbar .nav{flex:1 1 auto; justify-content:flex-end; min-width:0; max-width:100%}
.topbarActions{display:none; align-items:center; gap:8px}
.brand{display:flex; flex-direction:column; gap:2px; align-items:center}
.brand__logo{display:inline-flex; align-items:center; gap:8px; line-height:1}
.brand__logoImg{height:54px; width:auto; display:block}
.brand__tag{font-size:var(--fs-400); color:var(--muted); text-align:center}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
  overflow: visible; /* allow dropdown */
}
.nav__item{white-space:nowrap}
.navLeft{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto}
.navRight{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.nav__auth{border:1px solid var(--line); background:#fff; font-weight:900}
.nav__auth:hover{background:#f8fafc}

/* Remove old spacer if any remains (after refactors) */
.nav__spacer{display:none}

/* Desktop/tablet: Priority+ will move items into More; keep overflow visible so dropdown can show */
@media (min-width: 521px){
  .nav{overflow:visible}
  body{overflow-x:hidden}
}

/* When hamburger mode is active, the nav becomes a drawer */
@media (max-width: 1340px){
  .topbar .nav{justify-content:flex-start}
}
.nav a{
  font-size:var(--fs-500);
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{background:#f1f5f9}
.nav a.active{background:#e0f2fe; color:#0369a1; font-weight:700}
.nav__admin{border:1px dashed var(--line)}

.container{max-width:1080px; margin:0 auto; padding:18px 16px 40px}

/* Section background (tonal nesting) */
.section{
  background: var(--surface-low);
  border-radius: var(--r-lg);
  padding: 16px;
}

/* Auth pages */
.authCenter{max-width:420px; margin:0 auto}
.authCenter .card{box-shadow: 0 18px 40px rgba(0,0,0,.08)}

.h1{font-size:var(--fs-800); margin:10px 0 6px; letter-spacing:-.6px}
.sub{color:var(--muted); margin:0 0 14px; line-height:var(--lh)}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px}

.card{
  background: var(--surface-lowest);
  border: none; /* No-Line Rule */
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px;
}

.badges{display:flex; gap:6px; flex-wrap:wrap}
.badges--tight{gap:6px}
.badge{
  font-size:var(--fs-400);
  padding:6px 10px;
  border-radius:999px;
  border:none; /* No-Line Rule */
  color:var(--on-surface-variant);
  background: var(--surface-low);
  line-height:1;
  white-space:nowrap;
  letter-spacing:-.1px;
}

/* Keep badges readable even when they appear inside dense link rows (home lists, etc.) */
.trendItem .badge,
.miniCard__meta .badge{
  padding:5px 9px;
}
.badge--verified{border-color:#bae6fd; background:#e0f2fe; color:#075985; font-weight:850}
.badge--popular{border-color:#fde68a; background:#fef3c7; color:#92400e; font-weight:800}
.badge--ok{border-color:#bbf7d0; background:#dcfce7; color:#166534; font-weight:800}
.badge--agency{border-color:#bbf7d0; background:#dcfce7; color:#166534; font-weight:800}
.badge--freelancer{border-color:#ddd6fe; background:#ede9fe; color:#5b21b6; font-weight:800}

/* Quick info chips (time/weather/exchange) – keep one-line on small screens */
.quickInfo .pill{
  white-space: nowrap;
  flex-wrap: nowrap;
}
@media (max-width: 420px){
  .quickInfo{gap:8px !important}
  .quickInfo .pill{padding:9px 10px !important}
}
@media (max-width: 360px){
  .quickInfo{gap:6px !important}
  .quickInfo .pill{padding:8px 9px !important; font-size:12px}
  .quickInfo .small{display:none}
}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.kpi{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:linear-gradient(90deg,#e0f2fe,#ecfccb);
  border:1px solid #dbeafe;
  border-radius:16px;
}
.kpi .btn--primary{
  box-shadow: 0 10px 18px rgba(2,132,199,.18);
}
.kpi b{font-size:16px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size: var(--fs-500);
}
.btn:hover{background:#f8fafc}
.btn--primary{
  border-color:#0284c7;
  background:#0284c7; /* darker for contrast on light-blue KPI bg */
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.btn--primary:hover{background:#0369a1}
.btn--primary:active{background:#075985}
.btn--ghost{background:transparent}
.btn--danger{border-color:#fecaca; background:#fee2e2; color:#991b1b}

.input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:var(--fs-500);
}
textarea{min-height:110px; resize:vertical}
.label{font-size:var(--fs-400); color:var(--muted); margin:10px 0 6px}

.col-12{grid-column: span 12}
.col-9{grid-column: span 9}
.col-8{grid-column: span 8}
.col-6{grid-column: span 6}
.col-4{grid-column: span 4}
.col-3{grid-column: span 3}

@media (max-width: 860px){
  .col-9,.col-8,.col-6,.col-4,.col-3{grid-column: span 12}
  .nav__admin{display:none}
}

/* Mobile header actions */
.navBack,.navToggle{display:none}

/* Drawer-only header (hide on desktop/tablet) */
.navDrawerTop{display:none}
.navDrawerBottom{display:none}

@media (max-width: 520px){
  html, body{overflow-x:hidden}

  /* Drawer should contain a real menu list (even if bottom tabs exist). */

  :root{
    --fs-900: 28px;
    --fs-800: 24px;
    --fs-700: 18px;
    --fs-600: 15px;
    --fs-500: 14px;
    --fs-400: 12px;
  }

  .container{padding:14px 12px 32px}
  .h1{font-size:var(--fs-800)}

  .more{display:none}

  .topbar{
    padding:10px 12px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .topbarActions{display:flex; margin-left:auto; gap:8px}
  .brand__tag{display:none}

  .navBack,
  .navToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    color:#111827;
    cursor:pointer;
  }
  .navBack:hover,
  .navToggle:hover{background:#f8fafc}
  .navBack:active,
  .navToggle:active{transform: translateY(1px)}
  .navBack:focus-visible,
  .navToggle:focus-visible{outline:3px solid rgba(2,132,199,.22); outline-offset:2px}
  .navBack__icon,
  .navToggle__icon{width:22px; height:22px}
  .navToggle[aria-expanded="true"]{ background:#f1f5f9; }

  .navBackdrop{
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.35);
    z-index:19;
  }

  .nav{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(360px, 86vw);
    z-index:20;
    background:#fff;
    border-left:1px solid var(--line);
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    padding:14px;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;

    transform: translate3d(110%, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
    overflow-y:auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav.nav--open{ transform: translate3d(0,0,0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .18s ease, opacity .18s ease; }

  /* drawer layout for new navLeft/navRight structure */
  .navLeft, .navRight{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    min-width:0;
  }
  .navRight{margin-top:8px}

  .navDrawerTop{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 8px}
  .navDrawerTop__title{font-weight:1100; letter-spacing:-.3px}
  .navClose{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#111827; cursor:pointer}
  .navClose svg{width:20px; height:20px}
  .navClose:hover{background:#f8fafc}

  /* Drawer bottom login */
  .navDrawerBottom{display:block; margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
  .navDrawerLogin{width:100%; justify-content:center; background:#0284c7 !important; border-color:#0284c7 !important; color:#fff !important; box-shadow: 0 10px 18px rgba(2,132,199,.18)}
  .navDrawerLogin:hover{background:#0369a1 !important}

  .nav a{padding:12px 12px; border-radius:12px; width:100%}
  .nav a.active{background:#e0f2fe}
  .nav__admin{margin-top:8px}

  .kpi{flex-direction:column; align-items:flex-start}
  .kpi .btn{width:100%}

  /* Keep list cards compact on mobile (Coupang-style) */
  .item{flex-direction:row}
  .thumb{width:92px; height:92px; flex:0 0 auto}

  /* Make CTA feel "filled" on mobile: stack and full-width inside list cards */
  .item .row{flex-direction:column; align-items:stretch}
  .item .row > a.btn{width:100%}
  .row .btn{flex:1 1 auto}
  .btn{min-height:44px}

  .pill{padding:8px 12px}
  .input, select, textarea{padding:12px 12px}
}

.list{display:flex; flex-direction:column; gap:12px}

.archiveHeader{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:4px 0 10px}
.archiveHeader__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; letter-spacing:-.6px; font-size:22px}
.archiveHeader__sub{margin-top:4px; font-size:12px; color:color-mix(in srgb, var(--on-surface-variant) 70%, transparent); font-weight:800}

.filterCard{background: var(--surface-low); border-radius: var(--r-lg); padding:14px}
.filterCard .card{box-shadow:none}
.item{
  display:flex; gap:12px;
  padding:14px;
  border:none; /* No-Line Rule */
  border-radius: var(--r-lg);
  background: var(--surface-lowest);
  box-shadow: 0 12px 24px rgba(0,97,164,.06);
}
.thumb{
  width:88px; height:88px;
  border-radius: var(--r-md);
  background:linear-gradient(135deg, rgba(0,97,164,.16), rgba(84,99,62,.10));
  background-size:cover;
  background-position:center;
  border:none; /* No-Line Rule */
  flex:0 0 auto;
}
.item__main{flex:1 1 auto}
.item__text{min-width:0}
.item .row{flex-wrap:nowrap}
.item .row > a.btn{flex:0 0 auto; white-space:nowrap}
.item .row > a.btn:not(.btn--ghost):not(.btn--primary){
  border-color: rgba(0,97,164,.22);
  background: rgba(0,97,164,.06);
  font-weight: 900;
}
.item .row > a.btn:not(.btn--ghost):not(.btn--primary):hover{
  background: rgba(0,97,164,.10);
}
.item__titleRow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.item__title{
  font-weight:1000;
  margin:0;
  letter-spacing:-.2px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.item__meta{font-size:13px; color:var(--muted); margin:0 0 4px; font-weight:800}
.item__desc{
  font-size:12px;
  color:rgba(17,24,39,.72);
  font-weight:700;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Prevent overflow on very small mobile widths (stay list etc.) */
@media (max-width: 420px){
  .thumb{width:72px; height:72px}
  .item{padding:12px}
  .item .row{flex-wrap:wrap}
  .item .row > a.btn{width:100%; white-space:normal}
  .item__title{white-space:normal}
}

.pillbar{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  border:none; /* No-Line Rule */
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
  background: var(--surface-low);
  color: var(--on-surface-variant);
  font-weight:800;
}
.pill.active{background: var(--primary); color: var(--on-primary); font-weight:900}
.pill--active{background: var(--primary); color: var(--on-primary); font-weight:900; box-shadow: 0 14px 26px rgba(0,97,164,.16)}

.status{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.status__step{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
}
.status__step.on{border-color:#a7f3d0; background:#ecfdf5; color:#065f46; font-weight:800}

.footer{
  padding:28px 16px calc(112px + env(safe-area-inset-bottom));
  background: var(--surface-low);
  border-top: none; /* No-Line Rule */
}
.footer__inner{max-width:1080px; margin:0 auto}
.footer__heading{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.footer__brand{font-size:18px; font-weight:1000; letter-spacing:-.35px; color:var(--on-surface)}
.footer__headingLabel{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(0,97,164,.08);
  color:var(--primary);
  font-size:11px;
  font-weight:900;
}
.footer__business{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 28px;
  margin-top:16px;
}
.footer__businessItem{
  display:grid;
  grid-template-columns:132px minmax(0, 1fr);
  gap:12px;
  align-items:start;
  min-width:0;
  font-size:12px;
  line-height:1.65;
}
.footer__businessItem--wide{grid-column:1 / -1}
.footer__label{color:var(--muted); font-weight:800}
.footer__value{min-width:0; color:var(--on-surface); font-weight:750; overflow-wrap:anywhere}
.footer__placeholder{color:color-mix(in srgb, var(--on-surface-variant) 78%, transparent); font-weight:650}
.footer__links{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(191,199,212,.38);
  font-size:12px;
}
.footer__linkGroup{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.footer__privacy{color:var(--primary); font-weight:1000; text-decoration:underline; text-underline-offset:3px}
.footer__privacy:hover{color:#034f84}
.footer__centerLink{color:var(--on-surface-variant); font-weight:850; text-decoration:none}
.footer__centerLink:hover{color:var(--primary); text-decoration:underline; text-underline-offset:3px}
.footer__version{color:var(--muted); font-weight:800}
.footer__notice{margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.65}
.small{font-size:12px; color:var(--muted)}

@media (max-width: 720px){
  .footer__business{grid-template-columns:1fr}
  .footer__businessItem--wide{grid-column:auto}
}

@media (max-width: 520px){
  .footer{padding:24px 16px calc(112px + env(safe-area-inset-bottom))}
  .footer__business{gap:10px; margin-top:14px}
  .footer__businessItem{grid-template-columns:1fr; gap:1px}
  .footer__links{margin-top:16px}
}

/* Privacy policy */
.privacyPage{max-width:900px; margin:0 auto}
.privacyPage__hero{
  padding:24px;
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(224,242,254,.88));
  box-shadow:var(--shadow);
}
.privacyPage__heroTop{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.privacyPage__eyebrow{font-size:11px; font-weight:1000; letter-spacing:.16em; color:var(--primary)}
.privacyPage__title{margin:5px 0 0; font-size:30px; line-height:1.25; letter-spacing:-.8px}
.privacyPage__lead{max-width:700px; margin:14px 0 0; color:var(--on-surface-variant); line-height:1.75}
.privacyPage__meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.privacyPage__meta span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,97,164,.08);
  color:var(--primary);
  font-size:12px;
  font-weight:900;
}
.privacyPage__content{display:flex; flex-direction:column; gap:14px; margin-top:16px}
.privacySection{
  padding:22px;
  border-radius:18px;
  background:var(--surface-lowest);
  box-shadow:0 10px 22px rgba(0,97,164,.055);
}
.privacySection--intro{background:var(--surface-low); box-shadow:none}
.privacySection h2{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 13px;
  font-size:18px;
  line-height:1.45;
  letter-spacing:-.35px;
}
.privacySection__number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:9px;
  background:rgba(0,97,164,.10);
  color:var(--primary);
  font-size:13px;
  font-weight:1000;
}
.privacySection p{margin:0; color:var(--on-surface-variant); line-height:1.82; word-break:keep-all}
.privacySection p + p{margin-top:10px}
.privacySection strong{color:var(--on-surface)}
.privacyList{margin:12px 0 0; padding-left:20px; color:var(--on-surface-variant)}
.privacyList li{padding-left:2px; line-height:1.78; word-break:keep-all}
.privacyList li + li{margin-top:7px}
.privacyList--rights{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 24px}
.privacyContact{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:14px 0 0}
.privacyContact > div{padding:13px 14px; border-radius:14px; background:var(--surface-low)}
.privacyContact dt{font-size:11px; color:var(--muted); font-weight:900}
.privacyContact dd{margin:5px 0 0; color:var(--on-surface); font-size:13px; font-weight:800; overflow-wrap:anywhere}
.privacySection .privacySection__placeholderNote{margin-top:10px; font-size:11px; color:var(--muted)}
.privacySection .privacySection__version{margin-top:8px; color:var(--primary)}

@media (max-width: 640px){
  .privacyPage__hero{padding:20px}
  .privacyPage__heroTop{align-items:flex-start}
  .privacyPage__title{font-size:25px}
  .privacyPage__home{padding-left:10px; padding-right:10px; white-space:nowrap}
  .privacySection{padding:18px}
  .privacyList--rights{grid-template-columns:1fr}
  .privacyContact{grid-template-columns:1fr}
}

@media (max-width: 380px){
  .privacyPage__heroTop{flex-direction:column}
  .privacyPage__home{width:100%}
}

/* ------------------------------
 * Coupang-style Home / Bottom tabs
 * ------------------------------ */

/* Make room for bottom tab */
.container{padding-bottom:96px}

.bottomTab{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex;
  /* Glassmorphic bottom nav */
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:none; /* No-Line Rule */
  box-shadow: 0 -8px 20px rgba(0, 97, 164, 0.05);
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
}
.bottomTab__item{
  position:relative;
  flex:1 1 20%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px 12px;
  border-radius: var(--r-md);
  font-size:12px;
  color: color-mix(in srgb, var(--on-surface-variant) 80%, transparent);
}
.bottomTab__item .icon{width:20px; height:20px}
.bottomTab__item.active{
  color: var(--primary);
  font-weight:900;
  background: transparent;
}
/* Active dot indicator (no labels change needed) */
.bottomTab__item.active::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:6px;
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--primary);
}

.searchBar{
  display:flex;
  align-items:center;
  gap:10px;
  border:none; /* No-Line Rule */
  background: var(--surface-lowest);
  border-radius: var(--r-lg);
  padding:12px 14px;
  box-shadow: var(--shadow);
}
.searchBar__ph{flex:1 1 auto; color:color-mix(in srgb, var(--on-surface-variant) 70%, transparent); font-weight:800}
.searchBar__go{font-size:12px; color:var(--primary); font-weight:900}


.homeAdBanner{
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:18px;
  background:var(--surface-lowest);
  box-shadow:0 12px 24px rgba(0,97,164,.08);
  line-height:0;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
}
.homeAdBanner:active{cursor:grabbing}
.homeAdBanner__track{
  display:flex;
  width:100%;
  transform:translate3d(0,0,0);
  transition:transform .52s cubic-bezier(.22,.72,.24,1);
  will-change:transform;
}
.homeAdBanner__track.no-transition{transition:none!important}
.homeAdBanner__track.is-dragging{transition:none!important}
.homeAdBanner__slide,
.homeAdBanner img{
  display:block;
  flex:0 0 100%;
  width:100%;
  height:auto;
  aspect-ratio:1080/300;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.searchPageGrid{gap:16px}
.searchPage{
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,253,.98));
}
.searchPage__head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.searchPage__badge{
  width:48px;
  height:48px;
  border-radius:16px;
  background: rgba(0,97,164,.08);
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.searchPage__badge .icon,
.searchPage__fieldIcon .icon,
.searchPage__badge svg,
.searchPage__fieldIcon svg{
  width:22px;
  height:22px;
}
.searchPage__copy{min-width:0}
.searchPage__title{
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.3px;
  color: var(--on-surface);
}
.searchPage__sub{
  margin-top:4px;
  font-size:14px;
  line-height:1.55;
  color: var(--muted);
  font-weight:700;
}
.searchPage__controls{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 120px;
  gap:12px;
  align-items:center;
}
.searchPage__field{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid rgba(191,199,212,.8);
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.searchPage__field:focus-within{
  border-color: rgba(2,132,199,.55);
  box-shadow: 0 0 0 4px rgba(2,132,199,.10);
}
.searchPage__fieldIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  flex:0 0 auto;
}
.searchPage__input{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  min-width:0;
  width:100%;
  height:54px;
  font-size:16px;
  font-weight:900;
}
.searchPage__input::placeholder{
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-weight:700;
}
.searchPage__input:focus{outline:none}
.searchPage__submit{
  width:100%;
  min-height:56px;
  padding:0 22px;
  border-radius:18px;
  font-size:15px;
  font-weight:1000;
  box-shadow: 0 12px 26px rgba(2,132,199,.18);
}
@media (max-width: 520px){
  .searchPage{
    padding:16px;
  }
  .searchPage__head{
    margin-bottom:12px;
  }
  .searchPage__controls{
    grid-template-columns:1fr;
  }
  .searchPage__submit{
    min-height:52px;
  }
  .searchPage__sub{
    font-size:13px;
  }
}

/* Home — Curated Archive blocks */
.secTitle{font-weight:1000; letter-spacing:-.3px}
.secSub{font-size:12px; color:color-mix(in srgb, var(--on-surface-variant) 70%, transparent); font-weight:800; margin-top:2px}
.secKicker{color: var(--primary); font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px}

/* Magazine facts grid */
.factsGrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.fact{background: var(--surface-lowest); border-radius: 16px; padding:14px; box-shadow: 0 12px 24px rgba(0,97,164,.06)}
.fact__k{font-size:11px; font-weight:1000; color: var(--secondary); letter-spacing:.12em; text-transform:uppercase}
.fact__v{margin-top:6px; font-size:16px; font-weight:1000; letter-spacing:-.2px; color: var(--on-surface)}
@media (max-width: 420px){
  .factsGrid{grid-template-columns: 1fr}
  .fact__v{font-size:15px}
}

/* Stitch _7: quick view triplet */
.quickTriplet{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; background: var(--surface-lowest); border-radius: 18px; padding:14px; box-shadow: 0 18px 40px rgba(0,97,164,.10)}
.quickTriplet__item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.quickTriplet__big{font-size:22px; font-weight:1000; color: var(--primary); letter-spacing:-.4px}
.quickTriplet__icon{width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:999px; background: rgba(0,97,164,.08); color: var(--primary); font-weight:1000}
.quickTriplet__small{font-size:11px; font-weight:800; color: var(--on-surface-variant); text-align:center}
@media (max-width: 420px){
  .quickTriplet{gap:10px; padding:12px}
}

/* Reviews thumb strip (stitch _7 vibe) */
.revThumb{flex:0 0 auto; width:140px; height:140px; border-radius: 16px; background:#0b1220; background-size:cover; background-position:center; box-shadow: 0 14px 30px rgba(0,97,164,.10); border:1px solid rgba(191,199,212,.18)}
.revThumb--more{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:1000; background: linear-gradient(135deg, rgba(0,97,164,.55), rgba(0,0,0,.45))}
.avatar{width:40px; height:40px; border-radius: 999px; background: rgba(0,97,164,.12); display:flex; align-items:center; justify-content:center; font-weight:1000; font-size:11px; line-height:1; color: var(--primary); white-space:nowrap; overflow:hidden; text-overflow:clip; box-sizing:border-box; padding:0 6px; letter-spacing:-.02em}

/* Magazine tone form */
.formMag{padding:16px}
.formMag__head{margin-bottom:12px}
.formMag .label{font-weight:900}
.formMag textarea{min-height: 120px}
.formMag .row{gap:12px}

/* Form layout: date/time/party as fixed 3 columns on desktop, 2 columns on mobile */
.formMag__top3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.formMag__top3 .col-6{grid-column:auto}
@media (max-width: 720px){
  .formMag__top3{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 420px){
  .formMag__top3{grid-template-columns: 1fr}
}

.heroCard{
  position:relative;
  display:block;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,97,164,.12);
  min-height: 220px;
}
.heroCard__img{
  position:absolute; inset:0;
  /* Web-ready banner (auto-published to ybv2) */
  background-image:
    radial-gradient(1200px 420px at 30% 20%, rgba(33,150,243,.18), transparent 60%),
    radial-gradient(800px 360px at 80% 40%, rgba(84,99,62,.14), transparent 60%),
    url('./assets/images/banners/yeobaek_banner_dragonbridge_night_00002_.png');
  background-size: cover;
  background-position: center;
}
.heroCard__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.60));}
.heroCard__copy{position:relative; padding:18px; color:#fff; display:flex; flex-direction:column; gap:6px; justify-content:flex-end; min-height:220px}
.heroCard__badge{align-self:flex-start; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; background:linear-gradient(135deg, var(--primary), var(--primary-container)); padding:4px 8px; border-radius:999px}
.heroCard__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; font-size:26px; letter-spacing:-.6px}
.heroCard__sub{font-size:12px; color:rgba(255,255,255,.85); font-weight:700}

.trendList{display:flex; flex-direction:column; gap:8px}
.trendItem{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius: var(--r-md); background: var(--surface-lowest)}
.trendRank{width:26px; font-size:18px; font-weight:1000; font-style:italic; color:var(--primary)}
.trendText{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0}
.trendName{font-weight:1000; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trendMeta{font-size:12px; color:color-mix(in srgb, var(--on-surface-variant) 70%, transparent); font-weight:800}
.trendCta{font-size:12px; font-weight:900; color:var(--primary)}

/* City detail (stitch _4 inspired) */
.cityHero{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,97,164,.12);
  min-height: 240px;
}
.cityHero__img{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1200px 420px at 30% 20%, rgba(33,150,243,.16), transparent 60%),
    radial-gradient(800px 360px at 80% 40%, rgba(84,99,62,.12), transparent 60%),
    url('./assets/images/banners/yeobaek_banner_mykhe_sunset_00001_.png');
  background-size: cover;
  background-position: center;
}
.cityHero__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62));}
.cityHero__copy{position:relative; padding:18px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:240px}
.cityHero__kicker{font-size:10px; font-weight:900; letter-spacing:.14em; opacity:.85}
.cityHero__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; font-size:32px; letter-spacing:-.8px}
.cityHero__sub{font-size:12px; color:rgba(255,255,255,.85); font-weight:700}

/* Data Sheet */
.dataSheet{background: var(--surface-low); border-radius: var(--r-md); padding: 12px; display:grid; gap:10px}
.dataSheet__row{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:center}
.dataSheet__k{font-size:12px; color:color-mix(in srgb, var(--on-surface-variant) 70%, transparent); font-weight:800}
.dataSheet__v{font-size:12px; color:var(--on-surface); font-weight:1000; text-align:right}

/* Home: activity cards (stitch _3 style) */
.actCard{position:relative; display:block; flex:0 0 260px; border-radius: 16px; overflow:hidden; aspect-ratio: 4 / 5; box-shadow: 0 18px 40px rgba(0,97,164,.10)}
.actCard__img{position:absolute; inset:0; background-size:cover; background-position:center}
.actCard__img--banahills{background-image:url('./assets/images/banners/yeobaek_banner_banahills_goldenbridge_00001_.png')}
.actCard__img--hoian{background-image:url('./assets/images/banners/yeobaek_banner_hoian_lanterns_00001_.png')}
.actCard__img--mykhe{background-image:url('./assets/images/banners/yeobaek_banner_mykhe_sunset_00001_.png')}
.actCard__img--food{background-image:url('./assets/images/banners/yeobaek_banner_danang_food_00001_.png')}
.actCard__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.68));}
.actCard__copy{position:relative; padding:14px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; height:100%}
.actCard__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; letter-spacing:-.5px; font-size:18px}
.actCard__meta{font-size:12px; color:rgba(255,255,255,.85); font-weight:800}

/* TOP Spot cards (city detail) */
.spotGrid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
@media (max-width: 720px){ .spotGrid{grid-template-columns:1fr; } }
.spotCard{position:relative; display:block; border-radius: 18px; overflow:hidden; min-height: 160px; box-shadow: 0 18px 40px rgba(0,97,164,.10)}
.spotCard__img{position:absolute; inset:0; background-size:cover; background-position:center}
.spotCard__img--banahills{background-image:url('./assets/images/banners/yeobaek_banner_banahills_goldenbridge_00001_.png')}
.spotCard__img--hoian{background-image:url('./assets/images/banners/yeobaek_banner_hoian_lanterns_00001_.png')}
.spotCard__img--mykhe{background-image:url('./assets/images/banners/yeobaek_banner_mykhe_sunset_00001_.png')}
.spotCard__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.65));}
.spotCard__copy{position:relative; padding:14px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; min-height:160px}
.spotCard__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; letter-spacing:-.5px; font-size:18px}
.spotCard__meta{font-size:12px; color:rgba(255,255,255,.85); font-weight:800}

/* Spot detail hero */
.spotHero{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,97,164,.12);
  min-height: 320px;
}
.spotHero__img{position:absolute; inset:0; background-size:cover; background-position:center}
.spotHero__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.70));}
.spotHero__copy{position:relative; padding:18px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-height:320px}
.spotHero__kicker{font-size:10px; font-weight:900; letter-spacing:.14em; opacity:.85}
.spotHero__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; font-size:30px; letter-spacing:-.8px}
.spotHero__sub{font-size:12px; color:rgba(255,255,255,.85); font-weight:700}

/* Restaurant/place detail hero (the_memory vibe) */
.placeHero{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,97,164,.12);
  min-height: 320px;
}
.placeHero__img{position:absolute; inset:0; background-size:cover; background-position:center}
.placeHero__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.70));}
.placeHero__copy{position:relative; padding:18px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-height:320px}
.placeHero__kicker{font-size:10px; font-weight:900; letter-spacing:.14em; opacity:.85}
.placeHero__title{font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui; font-weight:1000; font-size:30px; letter-spacing:-.8px}
.placeHero__sub{font-size:12px; color:rgba(255,255,255,.85); font-weight:700}

/* Gallery */
.gallery{display:flex; gap:12px; overflow:auto; padding-bottom:4px; scroll-snap-type:x mandatory}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:rgba(0,97,164,.15); border-radius:999px}
.gallery__img{flex:0 0 220px; aspect-ratio:4/3; border-radius: var(--r-lg); overflow:hidden; background: var(--surface-lowest); box-shadow: 0 12px 24px rgba(0,97,164,.08); scroll-snap-align:start}
.gallery__img img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:720px){ .gallery__img{flex-basis: 72vw} }

/* Gallery v2 (main + selectable thumbs) */
.gallery2{display:grid; grid-template-columns:1fr; gap:10px}
.gallery2__main{display:block; position:relative; border-radius: 18px; overflow:hidden; background: var(--surface-lowest); box-shadow: 0 18px 40px rgba(0,97,164,.12)}
.gallery2__main img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3}
.gallery2--stay .gallery2__main img{aspect-ratio:16/9}
.gallery2__nav{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff; font-weight:1000; line-height:34px; text-align:center; cursor:pointer; backdrop-filter: blur(4px)}
.gallery2__nav--prev{left:10px}
.gallery2__nav--next{right:10px}
.gallery2__nav:hover{background:rgba(0,0,0,.48)}
.gallery2__meta{display:flex; gap:8px; align-items:center}
.gallery2__thumbs{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.gallery2__thumb{display:block; padding:0; border-radius: var(--r-lg); overflow:hidden; background: var(--surface-lowest); box-shadow: 0 12px 24px rgba(0,97,164,.08); border:1px solid rgba(0,97,164,.10); transition: transform .12s ease, border-color .12s ease}
.gallery2__thumb:hover{transform: translateY(-1px)}
.gallery2__thumb.is-active{border-color: rgba(0,97,164,.38)}
.gallery2__thumb img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3}
.gallery2--stay .gallery2__thumb img{aspect-ratio:16/9}

/* Magazine tone for gallery */
.gallery2--mag{gap:12px}
.gallery2--mag .gallery2__main{border-radius: 22px; box-shadow: 0 22px 55px rgba(0,97,164,.14)}
.gallery2--mag .gallery2__nav{width:34px; height:34px; line-height:32px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.28)}
.gallery2--mag .gallery2__nav:hover{background:rgba(0,0,0,.40)}
.gallery2--mag .gallery2__thumb{border-radius: 16px; box-shadow: 0 14px 30px rgba(0,97,164,.10); border:1px solid rgba(191,199,212,.20)}
.gallery2--mag .gallery2__thumb.is-active{border-color: rgba(0,97,164,.40)}

.catGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.cat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #eef2f7;
  font-weight:900;
  font-size:12px;
}
.cat span{white-space:nowrap}
.cat span{max-width:100%; overflow:hidden; text-overflow:ellipsis}
.cat:hover{background-color:#f1f5f9}
.cat .icon{width:22px; height:22px}
.cat__img{width:34px; height:34px; display:block}

/* Hero-style category tiles (image fills, text on top) */
.cat--hero{
  position:relative;
  overflow:hidden;
  min-height: 86px;
  padding: 12px 10px;
  align-items:flex-start;
  justify-content:flex-end;
  gap:0;
  color:#fff;
  border:1px solid rgba(0,97,164,.10);
  background: #0b1220;
  background-image: var(--cat-img);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  box-shadow: 0 10px 22px rgba(0,97,164,.10);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background-size .18s ease;
}
.cat--hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* subtle darkening only for text readability (not blurry) */
  background: linear-gradient(180deg, rgba(0,0,0,.00) 45%, rgba(0,0,0,.42) 100%);
  transition: background .14s ease;
}
.cat--hero span{position:relative; z-index:1}
.cat--hero:hover{
  transform: translateY(-2px);
  background-size: 112%;
  border-color: rgba(0,97,164,.28);
  box-shadow: 0 18px 40px rgba(0,97,164,.18);
}
.cat--hero:hover::before{
  background: linear-gradient(180deg, rgba(0,0,0,.00) 38%, rgba(0,0,0,.52) 100%);
}
.cat--hero span{
  font-family:"Plus Jakarta Sans","Inter",Pretendard,system-ui;
  font-weight:1000;
  letter-spacing:-.2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  color: #fff;
}

@media (max-width: 360px){
  .cat{font-size:11px}
  .cat--hero{min-height:78px}
  .cat--hero span{font-size:11px}
}

@media (max-width: 320px){
  .cat{font-size:10.5px}
  .cat--hero span{font-size:10.5px}
}

.bannerRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

/* Stitch _5: Food list hero */
.foodHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin: 2px 0 8px;
}

/* Tour hero (stitch-like) */
.tourHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin: 2px 0 8px;
}
.tourHero__kicker{
  color: var(--primary);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tourHero__title{
  font-family: "Plus Jakarta Sans","Inter",Pretendard,system-ui;
  font-weight: 1000;
  font-size: 28px;
  letter-spacing: -.6px;
  color: var(--on-surface);
  margin-top: 4px;
}
.tourHero__sub{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 420px){
  .tourHero__title{font-size:24px}
}
.foodHero__kicker{
  color: var(--primary);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.foodHero__title{
  font-family: "Plus Jakarta Sans","Inter",Pretendard,system-ui;
  font-weight: 1000;
  font-size: 28px;
  letter-spacing: -.6px;
  color: var(--on-surface);
  margin-top: 4px;
}
.foodHero__sub{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 420px){
  .foodHero__title{font-size:24px}
}

/* Stitch _5: Filter bar */
.filterBar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 6px 0 8px}
.filterBar > div{display:flex}
.filterBtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.95);
  border:1px solid rgba(191,199,212,.28);
  box-shadow: 0 10px 22px rgba(0,97,164,.06);
  font-weight:900;
  font-size:12px;
  color: var(--on-surface);
  white-space:nowrap;
}
.filterBtn[aria-disabled="true"]{opacity:.55}
.filterBtn .chev{font-size:12px; opacity:.75}
.filterTune{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  padding:7px 10px;
  border:none;
  background: transparent;
  color: var(--primary);
  font-weight:1000;
  cursor:pointer;
  white-space:nowrap;
}

/* Stitch _5: Featured + grid */
.restBento{display:grid; grid-template-columns: 1fr; gap:14px}
.restGrid{display:grid; grid-template-columns: 1fr; gap:14px}
.restFeatured{
  position:relative;
  overflow:hidden;
  border-radius: var(--r-xl);
  background: var(--surface-lowest);
  box-shadow: 0 18px 40px rgba(0,97,164,.12);
  min-height: 220px;
  text-decoration:none;
  color: inherit;
}
.restFeatured__img{position:absolute; inset:0; background:#0b1220; background-size:cover; background-position:center}
.restFeatured__shade{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.70) 100%)}
.restFeatured__body{position:relative; z-index:1; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; min-height: 220px}
.restFeatured__kicker{font-size:10px; font-weight:1000; letter-spacing:.18em; color: rgba(255,255,255,.85)}
.restFeatured__title{margin-top:6px; font-size:22px; font-weight:1000; color:#fff; letter-spacing:-.4px}
.restFeatured__meta{margin-top:6px; font-size:12px; font-weight:800; color: rgba(255,255,255,.85)}

/* Stay (stitch _6) featured card */
.stayFeatured{position:relative; display:block; overflow:hidden; border-radius: var(--r-xl); background: var(--surface-lowest); box-shadow: 0 18px 40px rgba(0,97,164,.12); min-height: 280px; text-decoration:none; color: inherit}
.stayFeatured__img{position:absolute; inset:0; background:#0b1220; background-size:cover; background-position:center}
.stayFeatured__shade{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.70) 100%)}
.stayFav{position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.18); color:#fff; font-weight:1000; cursor:pointer; backdrop-filter: blur(10px)}
.stayFav.is-on{background: rgba(255,255,255,.30); border-color: rgba(255,255,255,.35)}
.stayFav:active{transform:scale(.96)}
.stayFeatured__body{position:relative; z-index:1; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; min-height: 280px}
.stayFeatured__kicker{font-size:10px; font-weight:1000; letter-spacing:.18em; color: rgba(255,255,255,.85)}
.stayFeatured__title{margin-top:6px; font-size:22px; font-weight:1000; color:#fff; letter-spacing:-.4px}
.stayFeatured__meta{margin-top:6px; font-size:12px; font-weight:800; color: rgba(255,255,255,.85)}
.scorePill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.20); color:#fff; font-weight:1000; font-size:12px; white-space:nowrap}
.stayPriceRow{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:12px}
.stayStrike{font-size:12px; color: rgba(255,255,255,.70); text-decoration:line-through; font-weight:800}
.stayPrice{font-size:22px; font-weight:1000; color:#fff; letter-spacing:-.4px}
.stayPriceSub{font-size:10px; color: rgba(255,255,255,.75); font-weight:700}

/* Modal (simple) */
.modal{position:fixed; inset:0; display:none; z-index:80}
.modal.is-open{display:block}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.35); backdrop-filter: blur(8px)}
.modal__panel{position:relative; z-index:1; max-width: 720px; margin: 10vh auto 0; background: rgba(255,255,255,.96); border:1px solid rgba(191,199,212,.30); border-radius: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.18); padding: 14px}
.modal__panel--request{max-width:min(94vw, 820px); margin-top:4vh; max-height:92vh; overflow:auto; padding:16px}
.requestModal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; padding:2px 2px 0}
.requestModal__title{margin-top:4px; font-size:20px; font-weight:1000; letter-spacing:-.4px; color:var(--text)}
.requestModal .formMag{box-shadow:none; border-color:rgba(191,199,212,.28)}
.requestModal .formMag__head{display:none}
.requestModal__close{white-space:nowrap}
@media (max-width: 520px){
  .modal__panel{margin: 8vh 12px 0; padding: 12px}
  .modal__panel--request{margin:4vh 10px 0; max-height:90vh; padding:12px}
  .requestModal__head{align-items:center}
  .requestModal__title{font-size:18px}
}

/* Mobile sticky CTA dock */
.ctaDock{display:none}
@media (max-width: 520px){
  /* Avoid duplicate CTAs: keep bottom dock, hide top CTA */
  .goReserveTop{display:none !important}
  .goRequestTop{display:none !important}

  .ctaDock{
    display:flex;
    position:fixed;
    left:0; right:0;
    /* keep above bottomTab */
    bottom: calc(74px + env(safe-area-inset-bottom));
    padding:10px 14px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border-top:1px solid rgba(191,199,212,.30);
    z-index: 60;
  }
  .ctaDock__btn{width:100%}
  /* extra room so content isn't hidden behind dock + bottomTab */
  body{padding-bottom: 190px}
}

@media (min-width: 860px){
  .restBento{grid-template-columns: 1.1fr .9fr; align-items:start}
  .restGrid{grid-template-columns: 1fr}
  .restFeatured__body{padding:20px; min-height: 320px}
  .restFeatured{min-height: 320px}
}
.banner{
  border-radius:16px;
  padding:14px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, #e0f2fe, #ffffff);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.banner::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:120px;
  height:120px;
  border-radius:999px;
  background: rgba(14,165,233,.16);
}
.banner:nth-child(2){ background: linear-gradient(135deg, #fef3c7, #ffffff); }
.banner:nth-child(2)::after{ background: rgba(245,158,11,.20); }
.banner:nth-child(3){ background: linear-gradient(135deg, #ede9fe, #ffffff); }
.banner:nth-child(3)::after{ background: rgba(91,33,182,.14); }
.banner__title{font-weight:1000; letter-spacing:-.3px}
.banner__sub{margin-top:4px; font-size:12px; color:rgba(17,24,39,.70); font-weight:900}

.hscroll{
  display:flex;
  gap:10px;
  overflow:auto;
  flex-wrap:nowrap;
  white-space:nowrap;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.hscroll::-webkit-scrollbar{height:0}

/* Ensure pills inside hscroll never shrink/wrap on small widths */
.hscroll .pill{flex:0 0 auto}

.miniCard{
  flex:0 0 210px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.miniCard__thumb{height:92px; background:linear-gradient(135deg,#e0f2fe,#fef3c7); background-size:cover; background-position:center}
.miniCard__body{padding:12px}
.miniCard__title{font-weight:1000; letter-spacing:-.2px}
.miniCard__meta{margin-top:4px; font-size:12px; color:var(--muted); font-weight:800}
.miniCard__cta{display:inline-flex; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:900}

@media (max-width: 520px){
  .bannerRow{grid-template-columns: 1fr;}
  .catGrid{grid-template-columns: repeat(4, 1fr);}
}


/* Loading overlay */
.loadingOverlay{position:fixed; inset:0; z-index:520; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(243,250,255,.72); backdrop-filter:blur(6px); pointer-events:auto}
.loadingOverlay.is-open{display:flex}
.loadingOverlay__panel{display:flex; align-items:center; gap:12px; min-width:220px; padding:16px 18px; border-radius:18px; border:1px solid rgba(191,199,212,.28); background:rgba(255,255,255,.96); box-shadow:0 22px 55px rgba(0,97,164,.14); color:var(--text); font-weight:900}
.loadingOverlay__spinner{width:22px; height:22px; border-radius:999px; border:3px solid rgba(0,97,164,.18); border-top-color:var(--primary); animation:loadingSpin .8s linear infinite}
.loadingOverlay__text{letter-spacing:-.2px}
html.is-loading, body.is-loading{cursor:progress}
html.is-loading .container, body.is-loading .container{pointer-events:none}
@keyframes loadingSpin{to{transform:rotate(360deg)}}

/* Request status badges */
.badge--submitted{border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; font-weight:800}
.badge--checking{border-color:#fde68a; background:#fffbeb; color:#b45309; font-weight:800}
.badge--confirmed{border-color:#bbf7d0; background:#ecfdf5; color:#047857; font-weight:800}
.badge--completed{border-color:#ddd6fe; background:#f5f3ff; color:#6d28d9; font-weight:800}
.badge--rejected{border-color:#fecaca; background:#fef2f2; color:#b91c1c; font-weight:800}

/* Map picker / modal */
.mapPicker{position:relative}
.mapPicker__menu{position:absolute; top:calc(100% + 8px); right:0; min-width:140px; padding:8px; border-radius:14px; border:1px solid rgba(191,199,212,.30); background:rgba(255,255,255,.98); box-shadow:0 18px 40px rgba(0,0,0,.12); z-index:45}
.mapPicker__option{width:100%; display:flex; align-items:center; justify-content:flex-start; padding:10px 12px; border:none; border-radius:10px; background:transparent; font:inherit; font-weight:800; cursor:pointer}
.mapPicker__option:hover{background:#f1f5f9}
.mapPicker__option + .mapPicker__option{margin-top:4px}
.modal__panel--map{max-width:960px}
.mapModalFrameWrap{position:relative; border-radius:18px; overflow:hidden; background:#dbe7f3; box-shadow: inset 0 0 0 1px rgba(191,199,212,.25)}
.mapModalFrameWrap iframe{width:100%; min-height: min(72vh, 620px); border:0; display:block; background:#fff}
.mapModalCanvas{width:100%; min-height:min(72vh, 620px); background:#dbe7f3}
.mapModalStatus{position:absolute; left:16px; bottom:16px; z-index:450; display:inline-flex; align-items:center; gap:8px; max-width:min(90%, 420px); padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.94); border:1px solid rgba(191,199,212,.30); box-shadow:0 18px 40px rgba(0,0,0,.12); color:var(--text); font-weight:800; font-size:12px; line-height:1.4}
@media (max-width: 520px){
  .modal__panel--map{margin-top:6vh}
  .mapModalFrameWrap iframe,.mapModalCanvas{min-height: 58vh}
  .mapPicker, .mapPicker__menu{width:100%}
  .mapModalStatus{left:12px; right:12px; bottom:12px; max-width:none; border-radius:14px}
}

/* My reservations cards */
.myRequestList{display:grid; gap:14px}
.myRequestCard{display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border-radius:20px; border:1px solid rgba(191,199,212,.22); background:rgba(255,255,255,.96); box-shadow:0 16px 32px rgba(0,97,164,.08)}
.myRequestCard__media{display:block; width:112px; height:112px; border-radius:18px; overflow:hidden; background:var(--surface-low); border:1px solid rgba(191,199,212,.22)}
.myRequestCard__media img{width:100%; height:100%; object-fit:cover; display:block}
.myRequestCard__mediaEmpty{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--muted); font-size:12px; font-weight:800}
.myRequestCard__body{min-width:0; display:grid; gap:8px}
.myRequestCard__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.myRequestCard__title{font-size:18px; font-weight:1000; line-height:1.25}
.myRequestCard__meta{font-size:14px; color:var(--muted)}
.myRequestCard__contact{font-size:13px; color:var(--text); font-weight:800}
.myRequestCard__desc{font-size:13px; color:var(--muted); line-height:1.65; white-space:pre-wrap}
.myRequestCard__details{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:2px}
.myRequestCard__detail{padding:9px 10px; border-radius:12px; background:var(--surface-lowest); border:1px solid rgba(191,199,212,.22); min-width:0}
.myRequestCard__detailLabel{display:block; font-size:10px; font-weight:1000; color:var(--secondary); letter-spacing:.08em}
.myRequestCard__detailValue{display:block; margin-top:4px; font-size:13px; font-weight:900; color:var(--on-surface); line-height:1.45; overflow-wrap:anywhere}
.myRequestCard__side{display:flex; align-items:center; justify-content:flex-end}
@media (max-width:720px){
  .myRequestCard{grid-template-columns:1fr; align-items:start}
  .myRequestCard__media{width:100%; height:auto; aspect-ratio:4/3}
  .myRequestCard__top{flex-direction:column; align-items:flex-start}
  .myRequestCard__details{grid-template-columns:1fr}
  .myRequestCard__side{justify-content:flex-start}
}

/* Filter state + gallery overflow fixes */
.filterBtn--active{
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 14px 26px rgba(0,97,164,.18);
}
.filterBtn[aria-disabled="true"]{cursor:not-allowed}
.gallery2,.gallery2__main,.gallery2__thumbs{max-width:100%; min-width:0}
.gallery2__main img{min-width:0}
.gallery2__thumbs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 8px;
}
.gallery2__thumb{flex:0 0 clamp(86px, 24%, 128px)}
.gallery2__thumbs.is-dragging{cursor:grabbing}

/* Media gallery video support */
.gallery2__main img,
.gallery2__main video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:4/3;
  background:#000;
  min-width:0;
}
.gallery2--stay .gallery2__main img,
.gallery2--stay .gallery2__main video{aspect-ratio:16/9}
.gallery2__thumb img,
.gallery2__thumb video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:4/3;
  background:#000;
}
.gallery2--stay .gallery2__thumb img,
.gallery2--stay .gallery2__thumb video{aspect-ratio:16/9}
.gallery2__videoThumb{position:relative; display:block; width:100%; height:100%}
.gallery2__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.gallery2__empty{padding:18px; border:1px dashed rgba(191,199,212,.45); border-radius:18px; color:var(--muted); font-weight:800; background:var(--surface-lowest)}

/* Video thumbnails keep a visible placeholder even before metadata is ready. */
.gallery2__videoThumb{background:#111;overflow:hidden}
.gallery2__videoThumb video{position:relative;z-index:1}
.gallery2__videoFallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;font-size:12px;font-weight:900;z-index:0}
.gallery2__play{z-index:2}

/* Feature pack: live capture, menu board, market prices, itinerary */
body.modal-open{overflow:hidden}
button.pill,.liveInfoBtn{appearance:none; -webkit-appearance:none; font:inherit; border:0}
.liveInfoBtn{white-space:nowrap}
.detailHeroActions{gap:8px; flex-wrap:wrap; margin-top:14px}
.detailHeroActions .btn{min-width:124px}

.menuBoard{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(191,199,212,.28);
  background:#fff;
  box-shadow:0 12px 26px rgba(0,97,164,.06);
}
.menuBoard__head,.menuBoard__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}
.menuBoard__head{
  padding:12px 14px;
  background:linear-gradient(135deg, rgba(2,132,199,.10), rgba(14,165,233,.04));
  color:var(--primary);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
}
.menuBoard__row{padding:12px 14px; border-top:1px dashed rgba(191,199,212,.50); font-size:14px}
.menuBoard__row span{min-width:0; overflow-wrap:anywhere; font-weight:850; color:var(--text)}
.menuBoard__row b{white-space:nowrap; color:var(--secondary); font-weight:1000}
.menuBoard__row--note{grid-template-columns:1fr; color:var(--muted)}

.modal__panel--live{max-width:min(96vw, 960px); margin-top:4vh}
.modal__panel--schedule{max-width:min(94vw, 560px); margin-top:10vh}
.liveCaptureBox{
  min-height:220px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(191,199,212,.26);
  background:linear-gradient(135deg,#f8fafc,#eef7ff);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.liveCaptureBox[hidden]{display:none!important}
.liveCaptureBox img{display:none; width:100%; max-height:70vh; object-fit:contain; background:#fff}
.liveCaptureBox__loading,.liveCaptureBox__error{
  padding:24px;
  color:var(--muted);
  text-align:center;
  font-weight:900;
  line-height:1.6;
}
.liveCaptureBox__error{color:#b91c1c}

.liveExchangePanel{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(191,199,212,.26);
  background:#f4f6f8;
  padding:26px;
  display:grid;
  gap:18px;
  max-height:82vh;
  overflow:auto;
}
.liveExchangePanel[hidden]{display:none!important}
.liveExchangePanel__head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.liveExchangePanel__title{font-size:26px; font-weight:1000; letter-spacing:-.02em; color:#111827}
.liveExchangePanel__status{font-size:12px; font-weight:900; color:#64748b; padding:8px 10px; border-radius:999px; background:#fff; border:1px solid rgba(191,199,212,.26)}
.liveExchangePanel__status.is-error{color:#b91c1c; background:#fff5f5}
.liveExchangeCard{background:#fff; border:1px solid rgba(191,199,212,.28); border-radius:26px; box-shadow:0 18px 32px rgba(15,23,42,.08)}
.liveExchangeCard--rate{padding:34px 38px}
.liveExchangeUnit{font-size:22px; font-weight:1000; color:#111827; margin-bottom:16px}
.liveExchangeRate{font-size:clamp(48px, 8vw, 76px); line-height:1; font-weight:1000; letter-spacing:-.04em; color:#111827}
.liveExchangeChange{margin-top:16px; font-size:18px; font-weight:1000; color:#f04452}
.liveExchangeChange.is-down{color:#2563eb}
.liveExchangeTime{margin-top:22px; font-size:17px; font-weight:900; color:#6b7280; line-height:1.5}
.liveExchangeCard--calc{padding:34px 38px; display:grid; gap:18px}
.liveExchangeCalcHead{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.liveExchangeCalcHead strong{font-size:24px; font-weight:1000; color:#111827}
.liveExchangeCalcHead span{font-size:15px; font-weight:900; color:#7b8794}
.liveExchangeInputRow{display:grid; grid-template-columns:minmax(120px, 1fr) minmax(150px, 1.2fr) auto; align-items:center; gap:10px; min-height:58px; padding:0 16px; border:1px solid #dbe2ea; border-radius:16px; background:#f8fafc}
.liveExchangeInputRow span{font-size:18px; font-weight:1000; color:#111827}
.liveExchangeInputRow input{width:100%; border:0; background:transparent; outline:0; text-align:right; font-size:24px; font-weight:1000; color:#111827; min-width:0}
.liveExchangeInputRow input:disabled{opacity:.72}
.liveExchangeInputRow b{font-size:19px; font-weight:1000; color:#111827}
.liveExchangeFooter{font-size:14px; font-weight:900; color:#64748b; line-height:1.55}
.scheduleAddForm .grid{gap:12px}

.marketSearchBox{box-shadow:var(--shadow)}
.marketSearchForm{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; margin-top:14px}
.marketGrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px}
.marketCard{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(191,199,212,.24);
  background:#fff;
  box-shadow:0 14px 28px rgba(0,97,164,.07);
}
.marketCard__img{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--surface-lowest); color:var(--muted); font-size:12px; font-weight:900}
.marketCard__img img{width:100%; height:100%; object-fit:contain; display:block; padding:10px; background:#fff}
.marketCard__body{padding:12px; display:grid; gap:6px}
.marketCard__name{font-weight:1000; line-height:1.35; min-height:38px}
.marketCard__price{font-weight:1000; color:var(--secondary)}

.myRequestCard__actions{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:112px}
.myRequestCard__actions .btn{width:100%}
.myScheduleHero{background:linear-gradient(135deg, #eff6ff, #ffffff)}
.myScheduleDay{scroll-margin-top:90px}
.myScheduleCard{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(191,199,212,.24);
  background:#fff;
  box-shadow:0 14px 28px rgba(0,97,164,.06);
}
.myScheduleCard__media{display:block; width:104px; height:104px; border-radius:16px; overflow:hidden; background:var(--surface-lowest); border:1px solid rgba(191,199,212,.20)}
.myScheduleCard__media img{width:100%; height:100%; object-fit:cover; display:block}
.myScheduleCard__empty{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; font-weight:900}
.myScheduleCard__body{min-width:0; display:grid; gap:6px; align-content:start}
.myScheduleCard__title{font-size:17px; font-weight:1000; line-height:1.3; overflow-wrap:anywhere}
.myScheduleCard__meta{font-size:13px; color:var(--muted); font-weight:850}

@media (max-width:720px){
  .marketSearchForm{grid-template-columns:1fr}
  .marketSearchForm .btn{width:100%}
  .myRequestCard__actions{flex-direction:row; flex-wrap:wrap; width:100%}
  .myRequestCard__actions .btn{flex:1 1 130px}
}
@media (max-width:520px){
  .detailHeroActions .btn{flex:1 1 100%}
  .ctaDock{gap:8px}
  .ctaDock > .btn{flex:1 1 0; min-width:0; white-space:nowrap}
  .marketGrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .marketCard__body{padding:10px}
  .marketCard__name{font-size:13px}
  .myScheduleCard{grid-template-columns:82px minmax(0,1fr); padding:10px}
  .myScheduleCard__media{width:82px; height:82px}
  .myScheduleCard__title{font-size:15px}
  .myScheduleCard .btn--danger{padding:8px 10px; min-height:38px}
  .modal__panel--live,.modal__panel--schedule{margin:6vh 12px 0}
  .liveExchangePanel{padding:18px; gap:14px}
  .liveExchangeCard--rate,.liveExchangeCard--calc{padding:24px 20px}
  .liveExchangeInputRow{grid-template-columns:1fr; align-items:start; gap:4px; padding:12px 14px}
  .liveExchangeInputRow input{text-align:left; font-size:24px}
  .liveExchangeInputRow b{justify-self:end; margin-top:-34px}
}
.bottomTab__item{min-width:0; white-space:nowrap}
@media (max-width:420px){.bottomTab__item{font-size:11px; padding-left:3px; padding-right:3px}}

/* Follow-up polish */
.scheduleAddBtn,
.placeHero .scheduleAddBtn,
.ctaDock .scheduleAddBtn{
  background:#fff !important;
  color:var(--primary) !important;
  border:1px solid rgba(191,199,212,.36) !important;
  box-shadow:0 12px 26px rgba(0,97,164,.13) !important;
}
.scheduleAddBtn:hover{filter:brightness(.98)}
.detailDescriptionBox{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  background:var(--surface-container-low);
  border:1px solid rgba(191,199,212,.24);
  color:var(--text);
  font-size:14px;
  line-height:1.75;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media (max-width:520px){
  .scheduleAddBtn{min-width:0}
}

/* Live weather/exchange image: large weather cards can scroll inside the popup */
.liveCaptureBox{max-height:82vh; overflow:auto; align-items:flex-start; justify-content:flex-start}
.liveCaptureBox img{max-height:none; height:auto; object-fit:initial}

/* Lotte Mart popup */
.modal__panel--market{max-width:min(96vw, 1120px); margin-top:4vh}
.marketModalFrameWrap{position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(191,199,212,.26); background:#fff; box-shadow:inset 0 0 0 1px rgba(191,199,212,.10)}
.marketModalFrameWrap iframe{width:100%; min-height:min(76vh, 760px); border:0; display:block; background:#fff}
.marketModalHint{margin-top:8px; color:var(--muted); font-size:12px; font-weight:800; line-height:1.55}
@media (max-width:520px){
  .modal__panel--market{margin:6vh 12px 0}
  .marketModalFrameWrap iframe{min-height:66vh}
}


/* Unity WebView custom alert/confirm dialog: browser URL is not shown. */
.ybAppDialog{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.ybAppDialog.is-open{display:flex}
.ybAppDialog__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(2px);
}
.ybAppDialog__panel{
  position:relative;
  width:min(92vw, 380px);
  padding:22px 20px 18px;
  border-radius:22px;
  border:1px solid rgba(191,199,212,.42);
  background:var(--surface, #fff);
  box-shadow:0 24px 70px rgba(15,23,42,.22);
}
.ybAppDialog__title{
  font-size:18px;
  line-height:1.35;
  font-weight:1000;
  color:var(--text, #0f172a);
}
.ybAppDialog__message{
  margin-top:10px;
  font-size:15px;
  line-height:1.65;
  color:var(--muted, #475569);
  white-space:pre-wrap;
  word-break:keep-all;
}
.ybAppDialog__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px;
}
.ybAppDialog__actions .btn{min-width:72px}
body.yb-app-dialog-open{overflow:hidden}

/* Product discount UI */
.badge--discount{border-color:#fecaca;background:#ef4444;color:#fff;font-weight:1000;box-shadow:0 8px 18px rgba(239,68,68,.22)}
.discountBanner{position:relative;display:block;overflow:hidden;border-radius:18px;background:var(--surface-lowest);box-shadow:0 18px 40px rgba(0,97,164,.12);min-height:120px;text-decoration:none;color:inherit}
.discountBanner__bg{display:block;width:100%;height:auto;aspect-ratio:2618/601;object-fit:cover}
.discountBanner__rate{position:absolute;top:50%;right:clamp(18px,5vw,64px);transform:translateY(-50%);display:flex;align-items:center;gap:clamp(2px,.8vw,8px);height:clamp(54px,12vw,138px);pointer-events:none}
.discountBanner__rate--triple{height:clamp(48px,10vw,120px)}
.discountBanner__digit,.discountBanner__percent{display:block;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
@media (max-width:720px){.discountBanner{border-radius:16px;min-height:86px}.discountBanner__bg{min-height:86px}.discountBanner__rate{right:14px;height:clamp(42px,14vw,68px)}.discountBanner__rate--triple{height:clamp(36px,12vw,60px)}}