/* v4.11 preview: one calm visual language for Home, Map, cards and Trip plan.
   These are original SoloDiningKorea styles informed by observed public Triple flows. */
:root {
  --trip-ink:#202c3b;
  --trip-muted:#677789;
  --trip-blue:#358fff;
  --trip-blue-dark:#176dcc;
  --trip-tint:#eef6ff;
  --trip-canvas:#f7f9fc;
  --trip-line:#e9eef5;
  --trip-shadow:0 4px 18px #2437540b;
  --ux-green:var(--trip-blue);
  --ux-bg:var(--trip-canvas);
  --ux-soft:var(--trip-tint);
  --ux-text:var(--trip-ink);
  --ux-line:var(--trip-line);
}
body.ux-ready{color:var(--trip-ink);background:var(--trip-canvas)}
body.ux-ready .ux-top{background:#fff;border-color:var(--trip-line);color:var(--trip-ink)}
body.ux-ready .ux-top .ux-brand{letter-spacing:-.025em}
body.ux-ready .ux-lang-trigger{color:var(--trip-blue-dark)!important}
body.ux-ready .ux-top button:hover,
body.ux-ready .ux-bottom a:hover{background:var(--trip-tint)}
body.ux-ready .ux-bottom{border-color:var(--trip-line);box-shadow:0 -4px 18px #233b5c08}
body.ux-ready .ux-bottom a{color:var(--trip-muted)}
body.ux-ready .ux-bottom a[aria-current=page]{color:var(--trip-blue-dark)}
body.ux-ready .ux-bottom a[aria-current=page]::after{content:"";width:16px;height:3px;border-radius:4px;background:var(--trip-blue);position:absolute;bottom:3px}
body.ux-ready .ux-bottom a{position:relative}
body.ux-ready .ux-dialog,
body.ux-ready .ux-drawer{border-color:var(--trip-line);box-shadow:var(--trip-shadow)}
body.ux-ready .ux-dialog .ux-choice[aria-checked=true]{background:var(--trip-tint);color:var(--trip-blue-dark)}

/* Keep the existing compact Home layout: no additional heading row. */
body.ux-ready .ux-home{background:var(--trip-canvas)}
body.ux-ready .ux-category-group{border:1px solid var(--trip-line);border-radius:19px;box-shadow:var(--trip-shadow);padding:15px 17px;margin-bottom:12px}
body.ux-ready .ux-category-group h2{color:var(--trip-ink);font-size:16px;letter-spacing:-.02em}
body.ux-ready .ux-category-grid button{border-radius:12px;transition:background .15s ease,transform .15s ease}
body.ux-ready .ux-category-grid button:hover{background:var(--trip-tint);transform:translateY(-1px)}
body.ux-ready .ux-category-grid button:active{transform:translateY(0)}
body.ux-ready .ux-category-icon{border:0;border-radius:50%;background:#f6f8fb}
body.ux-ready .ux-category-icon img{object-fit:contain}
body.ux-ready .ux-category-label{color:var(--trip-ink);font-weight:700}
body.ux-ready .ux-course-entry{background:#fff!important;border:1px solid var(--trip-line)!important;border-radius:17px!important;color:var(--trip-ink)!important;box-shadow:var(--trip-shadow)}
body.ux-ready .ux-home .ux-guide-entry{background:#eaf2ff!important;border:0!important;border-radius:7px!important;color:var(--trip-ink)!important;box-shadow:none;min-height:32px}
body.ux-ready .ux-guide-entry:hover{background:var(--trip-tint)!important}
body.ux-ready .ux-guide-entry>span:last-child{color:var(--trip-blue-dark)}
body.ux-ready .ux-home-legal{border-color:var(--trip-line)}

/* A compact map rail and a single selected-state treatment across categories. */
body.ux-ready.map-app-preview .map-category-rail>.map-category-button{border-radius:14px!important;box-shadow:0 2px 10px #233b5c13}
body.ux-ready.map-app-preview .map-category-rail>.map-category-button[aria-pressed="true"]{background:var(--trip-tint)!important;border:2px solid var(--trip-blue)!important;color:var(--trip-blue-dark)!important}
body.ux-ready.map-app-preview .map-category-rail>.map-category-button[aria-pressed="false"]{background:#ffffffed!important;border:1px solid var(--trip-line)!important}
body.ux-ready.map-app-preview .group-quicktabs,
body.ux-ready.map-app-preview .culture-quicktabs{border-color:var(--trip-line);border-radius:14px;background:#fffffff7;box-shadow:var(--trip-shadow)}
body.ux-ready.map-app-preview .solo-subtabs button{border-radius:10px!important;color:var(--trip-ink)}
body.ux-ready.map-app-preview .solo-subtabs button[aria-pressed="true"]{background:var(--trip-blue)!important;color:#fff!important}
body.ux-ready.map-app-preview .solo-subtabs button[aria-pressed="false"]:hover{background:var(--trip-tint)}
body.ux-ready.map-app-preview .group-quicktabs button[aria-pressed="true"],
body.ux-ready.map-app-preview .culture-quicktabs button[aria-pressed="true"]{background:var(--trip-blue)!important;color:#fff!important}
body.ux-ready.map-app-preview .beauty-filters button,
body.ux-ready.map-app-preview .lodging-type-tabs button,
body.ux-ready.map-app-preview .shopping-brands button,
body.ux-ready.map-app-preview .sights-filters button{border-color:var(--trip-line);border-radius:10px;color:var(--trip-ink)}
body.ux-ready.map-app-preview .beauty-filters button[aria-pressed="true"],
body.ux-ready.map-app-preview .lodging-type-tabs button[aria-pressed="true"],
body.ux-ready.map-app-preview .shopping-brands button[aria-pressed="true"],
body.ux-ready.map-app-preview .sights-filters button[aria-pressed="true"]{background:var(--trip-tint)!important;border-color:var(--trip-blue)!important;color:var(--trip-blue-dark)!important}
body.ux-ready.map-app-preview .app-sheet{border-color:var(--trip-line);box-shadow:var(--trip-shadow)}
body.ux-ready.map-app-preview .app-sheet .sheet-toolbar button,
body.ux-ready.map-app-preview .app-sheet .filters button,
body.ux-ready.map-app-preview .app-sheet .area-toggle{border-radius:10px!important;border-color:var(--trip-line);color:var(--trip-ink)}
body.ux-ready.map-app-preview .app-sheet .filters button.active{background:var(--trip-blue)!important;border-color:var(--trip-blue)!important;color:#fff!important}
body.ux-ready .ux-list-bar{border-color:var(--trip-line);color:var(--trip-ink)}
body.ux-ready .ux-list-bar a:last-child{border-color:var(--trip-line);border-radius:10px;background:var(--trip-tint);color:var(--trip-blue-dark)}

/* The same information hierarchy is used by list cards, pin details and stays. */
body.ux-ready #cards .card[data-place-surface],
body.ux-ready .lodging-grid .lodging-card[data-place-surface],
body.ux-ready .map-popup[data-place-surface]{border-color:var(--trip-line);border-radius:17px;color:var(--trip-ink);box-shadow:var(--trip-shadow)}
body.ux-ready.ux-list-mode.map-app-preview .app-sheet .cards>.card[data-place-surface]{margin:0 10px 10px;padding:13px!important;border:1px solid var(--trip-line)!important}
/* Banner widgets use width:100% elsewhere; inside a margined list card that overflows the sheet. */
body.ux-ready.ux-list-mode.map-app-preview .app-sheet .cards>.flight-banner-slot[data-place-surface]{width:auto;max-width:none}
body.ux-ready .app-sheet .cards>.card[data-place-surface] .place-title,
body.ux-ready .lodging-grid .lodging-card[data-place-surface] .place-title{color:var(--trip-ink)!important;font-weight:800;letter-spacing:-.02em}
body.ux-ready [data-place-surface] .place-local-name,
body.ux-ready [data-place-surface] .place-address,
body.ux-ready [data-place-surface] .place-categories{color:var(--trip-muted)!important}
body.ux-ready [data-place-surface] .place-summary{color:#345472}
body.ux-ready [data-place-surface] .place-media img{border-radius:13px}
body.ux-ready [data-place-surface] .place-action,
body.ux-ready [data-place-surface] .place-actions .walklink,
body.ux-ready [data-place-surface] .place-actions .google-map-button{border-color:var(--trip-line);border-radius:11px;color:var(--trip-ink)!important}
body.ux-ready [data-place-surface] .place-action:hover{background:var(--trip-tint)}
body.ux-ready [data-place-surface] .place-action-save{color:var(--trip-blue-dark)!important}
body.ux-ready [data-place-surface] .place-action-save[aria-pressed="true"]{background:var(--trip-tint);border-color:var(--trip-blue)}
body.ux-ready [data-place-surface] .place-more{border-color:var(--trip-line)}
body.ux-ready [data-place-surface] .place-more>summary{color:var(--trip-blue-dark)}
body.ux-ready [data-place-surface] .place-booking .ad-link{border-radius:10px}
body.ux-ready .place-detail-panel{background:#fff;border-color:var(--trip-line)}
body.ux-ready .place-detail-body .map-popup[data-place-surface]{box-shadow:none}

/* The itinerary follows the public day-by-day view: clear day tabs and numbered stops. */
body.ux-ready .saved-compact{color:var(--trip-ink)}
body.ux-ready .saved-compact-heading h2{color:var(--trip-ink)}
body.ux-ready.saved-days-active .plan-title{color:var(--trip-ink);font-weight:800}
body.ux-ready.saved-days-active .plan-add-place{background:var(--trip-blue);border-radius:10px;color:#fff}
body.ux-ready.saved-days-active .plan-add-place:hover{background:var(--trip-blue-dark)}
body.ux-ready.saved-days-active .plan-tools-menu summary{border-color:var(--trip-line);border-radius:12px;color:var(--trip-blue-dark)}
body.ux-ready.saved-days-active .plan-tools-content{border-color:var(--trip-line);border-radius:16px;box-shadow:var(--trip-shadow)}
body.ux-ready.saved-days-active .saved-tools .plan-tools-content>button:hover{background:var(--trip-tint)}
body.ux-ready.saved-days-active .saved-day-toolbar{border-color:var(--trip-line)}
body.ux-ready.saved-days-active .saved-day-toolbar .saved-add-day{color:#fff;background:var(--trip-blue);border-color:var(--trip-blue)}
body.ux-ready .saved-compact .saved-add-day,
body.ux-ready .saved-tools .saved-add-day{background:var(--trip-blue);border-color:var(--trip-blue);border-radius:10px;color:#fff}
body.ux-ready .saved-day-tab{border-color:var(--trip-line);border-radius:10px;color:var(--trip-ink)}
body.ux-ready .saved-day-tab.active{background:var(--trip-tint);border-color:var(--trip-blue);color:var(--trip-blue-dark)}
body.ux-ready .saved-all-tab{border-color:var(--trip-line);background:#f5f7fa;color:var(--trip-muted)}
body.ux-ready .saved-all-tab.active{background:var(--trip-blue);border-color:var(--trip-blue);color:#fff}
body.ux-ready .saved-compact .saved-day-list{border-color:var(--trip-line);border-radius:17px;box-shadow:var(--trip-shadow)}
body.ux-ready .saved-compact-item{border-color:var(--trip-line)}
body.ux-ready .saved-compact .saved-stop-number{background:var(--day-dark)}
body.ux-ready .saved-compact-route a{color:var(--trip-blue-dark)}
body.ux-ready .saved-compact .saved-drop-target{outline-color:var(--trip-blue)}
body.ux-ready.saved-days-active .saved-arrows .saved-compact-item{border-color:var(--trip-line);border-radius:16px;box-shadow:var(--trip-shadow)}
body.ux-ready.saved-days-active .saved-plan-actions button{color:var(--trip-blue-dark)}
body.ux-ready.saved-days-active .saved-plan-menu summary{color:var(--trip-blue-dark)}
body.ux-ready.saved-days-active .saved-plan-preview p{color:var(--trip-muted)}

body.ux-ready :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--trip-blue)!important;outline-offset:2px}
/* Controls follow the supplied lightly rounded rectangle, while image icons stay circular. */
body.ux-ready :is(.ux-lang-trigger,.ux-dialog button,.ux-drawer button,.ux-home button,.ux-guide-entry,.ux-course-entry){border-radius:10px!important}
body.ux-ready.map-app-preview :is(.beauty-filters,.lodging-type-tabs,.shopping-brands,.sights-filters) button,
body.ux-ready.map-app-preview .app-sheet :is(.sheet-toolbar,.filters) button{border-radius:10px!important}
body.ux-ready .saved-compact .saved-add-day{border-radius:10px!important}
/* Short mobile submenus shrink to their buttons; long ones retain horizontal scrolling. */
body.ux-ready.map-app-preview :is(.group-quicktabs,.sight-quicktabs,.culture-quicktabs,.hangang-quicktabs){width:max-content!important;max-width:calc(100vw - 16px)!important}
body.ux-ready.map-app-preview :is(.group-quicktabs,.culture-quicktabs).solo-subtabs{width:max-content!important;max-width:calc(100vw - 16px)!important}
/* The sort glyph is decorative and never steals the native select's hit target. */
body.ux-ready :is(.list-sortbar,.lodging-sortbar) .sort-control{display:inline-flex;align-items:center;gap:7px;min-width:0}
body.ux-ready :is(.list-sortbar,.lodging-sortbar) .sort-control-icon{display:block;width:19px;height:19px;flex:none;color:var(--trip-ink)}
body.ux-ready :is(.list-sortbar,.lodging-sortbar) .sort-control select{min-width:0;border-radius:10px}
@media(max-width:560px){
  body.ux-ready .ux-category-group{padding:12px;margin-bottom:10px}
  body.ux-ready .ux-category-grid button{min-height:70px}
  body.ux-ready.map-app-preview .group-quicktabs,
  body.ux-ready.map-app-preview .culture-quicktabs{max-width:calc(100vw - 16px)}
  body.ux-ready.ux-list-mode.map-app-preview .app-sheet .cards>.card[data-place-surface]{margin-left:7px;margin-right:7px}
}
@media(prefers-reduced-motion:reduce){body.ux-ready .ux-category-grid button{transition:none}}