/* =========================================================
   lhw-widget / 地図から探す＋人気検索
   Organized stable CSS 2026-07-02
   Scope: embed.css only
   ========================================================= */

/* ========== 01. Base / Variables ========== */
.lhw-widget * {
  box-sizing: border-box;
}

.lhw-widget {
  --g: #56c400;
  --t: #263442;
  --b: #0f79cb;
  --bg: #eef9fc;
  --scale-pc: 116;
  --scale-tab: 118;
  --scale-sp: 122;
  --area-font: 15px;
  --area-pad-y: 5px;
  --area-pad-x: 10px;
  --area-border: 3px;
  --area-radius: 2px;
  --panel-w: 320px;
  --panel-cols: 3;
  --panel-link-font: 14px;
  --popular-font: 13px;
  width: 100%;
  color: var(--t);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.lhw-widget a {
  text-decoration: none;
}

/* ========== 02. Layout ========== */
.lhw-section {
  max-width: 1392px;
  width: 100%;
  margin: 28px auto;
  padding: 0;
}

.lhw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: 24px;
}

/* ========== 03. Headings ========== */
.lhw-map-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 .5rem;
}

.lhw-map-head h2,
.lhw-popular-head h2 {
  margin: 0;
  font-size: 2rem;
}

.lhw-icon {
  width: 24px;
  height: 20px;
  position: relative;
}

.lhw-icon::before,
.lhw-icon::after {
  content: "";
  position: absolute;
  background: var(--g);
  border-radius: 2px;
}

.lhw-icon::before {
  width: 20px;
  height: 7px;
  left: 3px;
  top: 1px;
  transform: skewX(-18deg);
}

.lhw-icon::after {
  width: 13px;
  height: 9px;
  left: 0;
  top: 10px;
}

/* ========== 04. Map Area ========== */
.lhw-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1 / 1;
  overflow: hidden;
  border: 1px solid #d9e7ec;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.lhw-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lhw-map-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--scale-pc) * 1%);
  height: calc(var(--scale-pc) * 1%);
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.lhw-buttons {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lhw-area-btn {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(calc(-50% + var(--btn-shift-x, 0px)), calc(-50% + var(--btn-shift-y, 0px)));
  border: var(--area-border) solid var(--g);
  border-radius: var(--area-radius);
  background: #fff;
  color: #2b3743;
  font-size: var(--area-font);
  font-weight: 700;
  padding: var(--area-pad-y) var(--area-pad-x);
  box-shadow: 0 2px 5px rgba(31, 41, 55, .18);
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
}

.lhw-area-btn span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.lhw-area-btn span::before {
  content: "";
  width: 0;
  height: 0;
  border-top: .36em solid transparent;
  border-bottom: .36em solid transparent;
  border-left: .48em solid var(--g);
}

.lhw-area-btn:hover,
.lhw-area-btn.is-active {
  background: #f5fff0;
}

/* ========== 05. Prefecture Panel / Balloon ========== */
.lhw-panel {
  position: absolute;
  z-index: 3;
  width: min(var(--panel-w), calc(100% - 20px));
  min-width: min(150px, calc(100% - 20px));
  max-width: min(420px, calc(100% - 20px));
  background: #fff;
  border: 3px solid var(--g);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

.lhw-panel[hidden] {
  display: none;
}

.lhw-panel-inner {
  padding: 8px 10px;
}

.lhw-panel-heading {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.lhw-panel-heading span {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--g);
}

.lhw-panel-heading h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.lhw-panel-links {
  display: grid;
  grid-template-columns: repeat(var(--panel-cols), minmax(0, 1fr));
  gap: 2px 5px;
}

.lhw-panel-links a {
  color: var(--b);
  font-size: var(--panel-link-font);
  font-weight: 700;
  line-height: 1.08;
  white-space: nowrap;
}

.lhw-panel-close {
  position: absolute;
  top: 2px;
  right: 5px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

/* ========== 06. Popular Search ========== */
.lhw-popular {
  padding: 16px;
  border-left: 1px solid #edf1f5;
}

.lhw-popular-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.lhw-popular-head span {
  color: #64748b;
  font-size: 12px;
}

.lhw-search {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 38px;
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid #e6eef5;
  border-radius: 999px;
  background: #f8fbfd;
}

.lhw-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
}

.lhw-search button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #eaf1f7;
  color: #7c8da1;
}

.lhw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.lhw-tabs button {
  min-height: 25px;
  padding: 4px 11px;
  border: 1px solid #dce7f1;
  border-radius: 999px;
  background: #fff;
  color: #56677a;
  font-size: 12px;
}

.lhw-tabs button.is-active {
  border-color: #0078d4;
  background: #0078d4;
  color: #fff;
}

.lhw-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  max-height: 286px;
  overflow-y: auto;
}

.lhw-list a {
  position: relative;
  display: block;
  min-height: 38px;
  padding: 11px 28px 10px 14px;
  border-radius: 9px;
  background: #f7fafc;
  color: #263442;
  font-size: var(--popular-font);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lhw-list a::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #74879a;
}

/* ========== 07. Tablet ========== */
@media (max-width: 980px) {
  .lhw-grid {
    grid-template-columns: 1fr;
  }

  .lhw-stage {
    aspect-ratio: 1.22 / 1;
  }

  .lhw-map-img {
    width: calc(var(--scale-tab) * 1%);
  }

  .lhw-popular {
    border-left: 0;
    padding: 0;
  }

  .lhw-list {
    max-height: none;
    overflow: visible;
  }
}

/* ========== 08. Smartphone ========== */
@media (max-width: 560px) {
  .lhw-stage {
    aspect-ratio: 1 / 1;
    min-height: 330px;
    overflow: hidden;
  }

  .lhw-map-img {
    width: calc(var(--scale-sp) * 1%);
  }

  .lhw-area-btn {
    font-size: calc(var(--area-font) * .82);
    padding: calc(var(--area-pad-y) * .58) calc(var(--area-pad-x) * .5);
    border-width: 2px;
    white-space: nowrap;
    line-height: 1.1;
    text-align: center;
    box-shadow: 0 1px 4px rgba(31, 41, 55, .18);
  }

  .lhw-area-btn span {
    gap: 4px;
  }

  .lhw-list {
    grid-template-columns: 1fr;
  }

  .lhw-panel-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========== 09. Smartphone Modal ========== */
@media (max-width: 560px) {
  .lhw-widget.is-panel-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .68);
    pointer-events: none;
  }

  .lhw-widget.is-panel-open .lhw-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 9999;
    width: calc(100vw - 34px);
    max-width: 500px;
    min-width: 0;
    transform: translate(-50%, -50%) !important;
    border-width: 4px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
  }

  .lhw-widget.is-panel-open .lhw-panel-inner {
    padding: 10px 14px 12px;
  }

  .lhw-widget.is-panel-open .lhw-panel-heading {
    gap: 6px;
    margin-bottom: 8px;
  }

  .lhw-widget.is-panel-open .lhw-panel-heading h3 {
    font-size: 20px;
    line-height: 1.12;
  }

  .lhw-widget.is-panel-open .lhw-panel-links {
    gap: 5px 14px;
  }

  .lhw-widget.is-panel-open .lhw-panel-links a {
    font-size: 19px;
    line-height: 1.18;
    white-space: nowrap;
  }

  .lhw-widget.is-panel-open .lhw-panel-close {
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 46px;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  }
}
/* ========== 10. Final PC Heading Alignment ========== */
@media (min-width: 981px) {
  .lhw-map-head,
  .lhw-popular-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
  }

  .lhw-popular {
    padding-top: 0;
  }

  .lhw-map-head > .lhw-icon {
    position: relative;
    top: 4px;
  }
}

/* === Balloon right padding compact patch 2026-07-06 ===
   Minimal CSS-only change: reduce the right inside padding of the prefecture balloon. */
.lhw-panel-inner{
  padding-right:4px;
}
.lhw-panel-close{
  right:3px;
}

/* === Dedicated balloon editor variables patch 2026-07-06 ===
   Controlled by admin.html dedicated balloon adjustment panel. */
.lhw-widget{
  --balloon-panel-w:320px;
  --balloon-pad-top:8px;
  --balloon-pad-right:4px;
  --balloon-pad-bottom:8px;
  --balloon-pad-left:10px;
  --balloon-head-gap:6px;
  --balloon-head-bottom:6px;
  --balloon-head-font:18px;
  --balloon-link-row-gap:2px;
  --balloon-link-col-gap:5px;
  --balloon-link-line-height:1.08;
  --balloon-close-top:2px;
  --balloon-close-right:3px;
}
.lhw-panel{
  width:min(var(--balloon-panel-w), calc(100% - 20px));
}
.lhw-panel-inner{
  padding:var(--balloon-pad-top) var(--balloon-pad-right) var(--balloon-pad-bottom) var(--balloon-pad-left);
}
.lhw-panel-heading{
  gap:var(--balloon-head-gap);
  margin-bottom:var(--balloon-head-bottom);
}
.lhw-panel-heading h3{
  font-size:var(--balloon-head-font);
}
.lhw-panel-links{
  gap:var(--balloon-link-row-gap) var(--balloon-link-col-gap);
}
.lhw-panel-links a{
  line-height:var(--balloon-link-line-height);
}
.lhw-panel-close{
  top:var(--balloon-close-top);
  right:var(--balloon-close-right);
}

/* === Balloon close above last prefecture column patch 2026-07-06 ===
   Places the close button above the last column of prefecture links instead of the far right edge. */
.lhw-widget{
  --balloon-close-left:auto;
}
.lhw-panel-close{
  left:var(--balloon-close-left);
  right:auto;
}
.balloon-sample{
  --balloon-close-left:auto;
}
.balloon-sample-close{
  left:var(--balloon-close-left);
  right:auto;
}



/* === Balloon prefecture links fit-to-text patch 2026-07-06 ===
   Prefecture link columns no longer stretch equally.
   Each link/column fits the actual text width, keeping the balloon compact. */
.lhw-panel-links{
  grid-template-columns:repeat(var(--panel-cols), max-content);
  justify-content:start;
  align-items:start;
}
.lhw-panel-links a{
  display:inline-block;
  width:max-content;
  max-width:100%;
}
@media(max-width:560px){
  .lhw-widget.is-panel-open .lhw-panel-links{
    grid-template-columns:repeat(2, max-content);
    justify-content:start;
  }
}

/* === Balloon auto width to last prefecture column patch 2026-07-06 ===
   The balloon width now fits the actual prefecture link columns instead of leaving wide blank space.
   The right edge of the balloon follows the last visible prefecture column plus the configured padding. */
@media(min-width:561px){
  .lhw-panel{
    width:fit-content !important;
    min-width:0;
    max-width:calc(100% - 20px);
  }
  .lhw-panel-inner{
    width:fit-content;
    max-width:100%;
  }
  .lhw-panel-links{
    width:max-content;
    max-width:100%;
  }
}

/* =========================================================
   SP columns and Hiragino font final patch 2026-07-06
   - SP吹き出し列崩れ対策
   - 埋め込み先ページの見出しCSS影響を遮断
   - ウィジェット全体のフォントをHiragino Kaku Gothic ProNに統一
   ========================================================= */
.lhw-widget,
.lhw-widget * {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.lhw-widget .lhw-panel .lhw-panel-heading {
  margin: 0 0 var(--balloon-head-bottom) 0;
  padding: 0;
  gap: var(--balloon-head-gap);
  align-items: center;
  min-height: 0;
  line-height: 1;
}

.lhw-widget .lhw-panel .lhw-panel-heading span {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.lhw-widget .lhw-panel .lhw-panel-title,
.lhw-widget .lhw-panel .lhw-panel-heading h3 {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: var(--balloon-head-font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: normal;
  text-indent: 0;
  box-shadow: none;
}

@media (max-width: 560px) {
  .lhw-widget.is-panel-open .lhw-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 9999;
    transform: translate(-50%, -50%) !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    border-width: 4px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .30);
  }

  .lhw-widget.is-panel-open .lhw-panel-inner {
    padding:
      calc(var(--balloon-pad-top) + 6px)
      calc(var(--balloon-pad-right) + 4px)
      calc(var(--balloon-pad-bottom) + 8px)
      calc(var(--balloon-pad-left) + 8px) !important;
    width: fit-content !important;
    max-width: 100%;
  }

  .lhw-widget.is-panel-open .lhw-panel .lhw-panel-heading {
    margin: 0 0 calc(var(--balloon-head-bottom) + 4px) 0;
    padding: 0;
    gap: var(--balloon-head-gap);
    align-items: center;
    min-height: 0;
    line-height: 1;
  }

  .lhw-widget.is-panel-open .lhw-panel .lhw-panel-title,
  .lhw-widget.is-panel-open .lhw-panel .lhw-panel-heading h3 {
    margin: 0;
    padding: 0;
    font-size: calc(var(--balloon-head-font) * 1.12);
    line-height: 1.18;
  }

  .lhw-widget.is-panel-open .lhw-panel-links {
    display: grid !important;
    grid-template-columns: repeat(var(--panel-cols), max-content) !important;
    justify-content: start !important;
    align-items: start !important;
    gap:
      calc(var(--balloon-link-row-gap) + 4px)
      calc(var(--balloon-link-col-gap) + 6px) !important;
    width: max-content !important;
    max-width: 100%;
  }

  .lhw-widget.is-panel-open .lhw-panel-links a {
    display: inline-block !important;
    width: max-content !important;
    max-width: 100%;
    white-space: nowrap;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    font-size: calc(var(--panel-link-font) * 1.16);
    line-height: 1.18;
  }

  
}

/* =========================================================
   FINAL sync PC no close / SP X / double tap guard 2026-07-06
   PC: 閉じるボタン非表示
   SP: Xだけ表示、背景タップで閉じる、開いた直後の誤タップ遷移を抑制
   ========================================================= */
@media (min-width: 561px) {
  .lhw-widget .lhw-panel-close {
    display: none;
  }
}

@media (max-width: 560px) {
  .lhw-widget.is-panel-open::before {
    pointer-events: auto;
    touch-action: none;
  }

  .lhw-widget.is-panel-open .lhw-panel {
    z-index: 10000;
    pointer-events: auto;
  }

  .lhw-widget.is-panel-open .lhw-panel.is-opening .lhw-panel-links a {
    pointer-events: none;
  }

  .lhw-widget.is-panel-open .lhw-panel .lhw-panel-close,
  .lhw-widget.is-panel-open .lhw-panel-close {
    display: block;
    position: absolute;
    top: -44px;
    right: 0;
    left: auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    cursor: pointer;
    pointer-events: auto;
    z-index: 10001;
  }
}
/* =========================================================
   11. Popular Cities / Title Icons / Host h2 Bypass
   Consolidated CSS 2026-07-10
   Scope: .lhw-widget only
   Notes:
   - Replaces previous popular v2/v4/v5/v6/v7/v12 patch stack.
   - Keeps h2 compatibility and supports .lhw-title for host h2 CSS avoidance.
   ========================================================= */
.lhw-widget{
  --popular-city-font:16px;
  --popular-city-weight:700;
  --popular-suffix-font:13px;
  --popular-suffix-weight:400;
  --popular-category-font:13px;
  --popular-category-weight:500;
  --popular-category-active-weight:700;
}
.lhw-widget .lhw-map-head .lhw-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  position:relative;
  top:0;
  background:url("./icon-map.webp") center / contain no-repeat;
}
.lhw-widget .lhw-map-head .lhw-icon::before,
.lhw-widget .lhw-map-head .lhw-icon::after{
  content:none;
  display:none;
}
.lhw-widget .lhw-title{
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  line-height:1.2;
}
.lhw-widget .lhw-map-head .lhw-title,
.lhw-widget .lhw-popular-head .lhw-title,
.lhw-widget .lhw-map-head h2,
.lhw-widget .lhw-popular-head h2{
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:#111;
  font-size:2rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.02em;
}
.lhw-widget .lhw-popular{
  position:relative;
  border-left:0;
  padding:0;
  background:#fff;
  color:#111;
  overflow:visible;
}
.lhw-widget .lhw-popular-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:34px;
  margin:0 0 .5rem;
  padding:0;
}
.lhw-widget .lhw-popular-head .lhw-count{
  display:none;
}
.lhw-widget .lhw-popular-head .lhw-title::before,
.lhw-widget .lhw-popular-head h2::before{
  content:"";
  display:inline-block;
  width:30px;
  height:30px;
  margin-right:8px;
  vertical-align:-6px;
  background:url("./icon-building.webp") center / contain no-repeat;
  -webkit-mask:none;
  mask:none;
  box-shadow:none;
  border-radius:0;
}
.lhw-widget .lhw-search{
  display:flex;
  align-items:center;
  height:44px;
  margin:0 0 14px;
  padding:0 10px 0 15px;
  gap:10px;
  border:1px solid #d8d8d8;
  border-radius:999px;
  background:#fff;
  box-shadow:none;
}
.lhw-widget.is-popular-search-hidden .lhw-search{
  display:none;
}
.lhw-widget.is-popular-search-hidden .lhw-popular-head{
  margin-bottom:.5rem;
}
.lhw-widget .lhw-search span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:transparent;
  position:relative;
}
.lhw-widget .lhw-search span::before{
  content:"";
  position:absolute;
  left:1px;
  top:1px;
  width:13px;
  height:13px;
  border:2px solid #92969b;
  border-radius:50%;
}
.lhw-widget .lhw-search span::after{
  content:"";
  position:absolute;
  left:13px;
  top:15px;
  width:9px;
  height:2px;
  border-radius:999px;
  background:#92969b;
  transform:rotate(45deg);
  transform-origin:left center;
}
.lhw-widget .lhw-search input{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#333;
  font-size:15px;
  font-weight:400;
  letter-spacing:.02em;
}
.lhw-widget .lhw-search input::placeholder{
  color:#9da0a4;
  opacity:1;
}
.lhw-widget .lhw-search button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#969696;
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:1;
}
.lhw-widget .lhw-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
  padding:0;
}
.lhw-widget .lhw-tabs button{
  min-height:30px;
  padding:4px 12px;
  border:1px solid #d8d8d8;
  border-radius:999px;
  background:#fff;
  color:#444;
  font-size:var(--popular-category-font);
  font-weight:var(--popular-category-weight);
  box-shadow:none;
}
.lhw-widget .lhw-tabs button.is-active{
  border-color:#0086c9;
  background:#0086c9;
  color:#fff;
  font-weight:var(--popular-category-active-weight);
}
.lhw-widget .lhw-list{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  max-height:533px;
  overflow-y:auto;
  padding:14px 36px 14px 14px;
  background:#f7f7f7;
  scrollbar-width:auto;
  scrollbar-color:#666 transparent;
}
.lhw-widget .lhw-list a{
  position:relative;
  display:block;
  min-height:44px;
  padding:12px 34px 10px 16px;
  border-radius:6px;
  background:#fff;
  color:#111;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.lhw-widget .lhw-list a::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#0086c9;
  font-size:28px;
  font-weight:400;
}
.lhw-widget .lhw-list a .lhw-city-name{
  font-size:var(--popular-city-font);
  font-weight:var(--popular-city-weight);
}
.lhw-widget .lhw-list a .lhw-city-suffix{
  margin-left:1px;
  font-size:var(--popular-suffix-font);
  font-weight:var(--popular-suffix-weight);
}
.lhw-widget .lhw-list::-webkit-scrollbar{
  width:18px;
}
.lhw-widget .lhw-list::-webkit-scrollbar-track{
  background:transparent;
}
.lhw-widget .lhw-list::-webkit-scrollbar-thumb{
  min-height:90px;
  border:6px solid #f7f7f7;
  border-radius:999px;
  background:#666;
}
@media (min-width:981px){
  .lhw-widget .lhw-popular{
    min-height:0;
    padding-top:0;
    overflow:hidden;
  }
  .lhw-widget .lhw-list{
    align-content:start;
    grid-auto-rows:minmax(44px,max-content);
    min-height:0;
    overflow-y:auto;
  }
  .lhw-widget .lhw-list a{
    height:auto;
    min-height:44px;
    align-self:start;
  }
}
@media (max-width:980px){
  .lhw-widget .lhw-popular{
    padding:0;
  }
  .lhw-widget .lhw-list{
    max-height:440px;
    overflow-y:auto;
  }
}
@media (max-width:560px){
  .lhw-widget .lhw-map-head .lhw-icon,
  .lhw-widget .lhw-popular-head .lhw-title::before,
  .lhw-widget .lhw-popular-head h2::before{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
  .lhw-widget .lhw-map-head,
  .lhw-widget .lhw-popular-head{
    margin-bottom:.5rem;
  }
  .lhw-widget .lhw-popular-head{
    min-height:32px;
  }
  .lhw-widget .lhw-map-head .lhw-title,
  .lhw-widget .lhw-popular-head .lhw-title,
  .lhw-widget .lhw-map-head h2,
  .lhw-widget .lhw-popular-head h2{
    font-size:1.25rem;
  }
  .lhw-widget .lhw-popular-head .lhw-title::before,
  .lhw-widget .lhw-popular-head h2::before{
    margin-right:7px;
    vertical-align:-6px;
  }
  .lhw-widget .lhw-search{
    height:42px;
    margin-bottom:12px;
    padding-left:14px;
    padding-right:8px;
    gap:9px;
  }
  .lhw-widget .lhw-search input{
    font-size:14px;
  }
  .lhw-widget .lhw-search button{
    width:26px;
    height:26px;
    flex-basis:26px;
    font-size:22px;
  }
  .lhw-widget .lhw-tabs{
    gap:6px;
    margin-bottom:12px;
  }
  .lhw-widget .lhw-tabs button{
    min-height:30px;
    padding:4px 11px;
  }
  .lhw-widget .lhw-list{
    grid-template-columns:1fr;
    max-height:271px;
    padding:12px 14px;
    gap:10px;
  }
  .lhw-widget .lhw-list a{
    min-height:42px;
    padding:11px 34px 10px 15px;
    font-size:15px;
  }
}

/* =========================================================
   Phase5 important reduction 2026-07-10
   Scope: removed non-critical !important from scoped typography and spacing resets.
   Kept modal positioning, width, grid and SP layout-critical !important.
   safeUrl remains intentionally deferred.
   ========================================================= */

/* === Loading skeleton and load-failure fallback 2026-07-17 === */
.lhw-widget[data-lhw-state="loading"]{
  cursor:progress;
}
.lhw-widget[data-lhw-state="loading"] .lhw-buttons,
.lhw-widget[data-lhw-state="loading"] .lhw-panel,
.lhw-widget[data-lhw-state="loading"] .lhw-tabs,
.lhw-widget[data-lhw-state="loading"] .lhw-list>*{
  visibility:hidden;
}
.lhw-widget[data-lhw-state="loading"] .lhw-stage::after,
.lhw-widget[data-lhw-state="loading"] .lhw-list::before{
  content:"";
  display:block;
  border-radius:10px;
  background:
    linear-gradient(100deg,transparent 20%,rgba(255,255,255,.78) 40%,transparent 60%) 0 0/220% 100%,
    #e6edf2;
  animation:lhw-skeleton-shimmer 1.25s linear infinite;
}
.lhw-widget[data-lhw-state="loading"] .lhw-stage::after{
  position:absolute;
  inset:16px;
  z-index:5;
}
.lhw-widget[data-lhw-state="loading"] .lhw-list{
  min-height:240px;
}
.lhw-widget[data-lhw-state="loading"] .lhw-list::before{
  grid-column:1/-1;
  min-height:212px;
  visibility:visible;
}
@keyframes lhw-skeleton-shimmer{
  to{
    background-position:-220% 0,0 0;
  }
}
@media(prefers-reduced-motion:reduce){
  .lhw-widget[data-lhw-state="loading"] .lhw-stage::after,
  .lhw-widget[data-lhw-state="loading"] .lhw-list::before{
    animation:none;
  }
}
.lhw-load-error{
  display:none;
}
.lhw-widget[data-lhw-state="error"]>.lhw-grid{
  display:none;
}
.lhw-widget[data-lhw-state="error"] .lhw-load-error{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:220px;
  padding:28px 20px;
  border:1px solid #d9e7ec;
  border-radius:10px;
  background:#f8fbfd;
  color:#263442;
  text-align:center;
}
.lhw-load-error-message{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
}
.lhw-load-error-detail{
  margin:-4px 0 0;
  color:#526779;
  font-size:14px;
  line-height:1.6;
}
.lhw-load-retry{
  min-height:42px;
  padding:9px 20px;
  border:0;
  border-radius:999px;
  background:#0078d4;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.lhw-load-retry:focus-visible{
  outline:3px solid rgba(0,120,212,.3);
  outline-offset:3px;
}
.lhw-map-error{
  position:absolute;
  inset:16px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border:1px solid #d9e7ec;
  border-radius:10px;
  background:#f8fbfd;
  color:#415466;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  text-align:center;
}
.lhw-widget.is-map-image-error .lhw-map-img,
.lhw-widget.is-map-image-error .lhw-buttons,
.lhw-widget.is-map-image-error .lhw-panel{
  display:none;
}
@media(max-width:560px){
  .lhw-widget[data-lhw-state="loading"] .lhw-list{
    min-height:210px;
  }
  .lhw-widget[data-lhw-state="loading"] .lhw-list::before{
    min-height:186px;
  }
  .lhw-load-error-message,
  .lhw-map-error{
    font-size:14px;
  }
}
/* Final heading-to-content spacing: PC and SP */
.lhw-widget .lhw-grid .lhw-map-card > .lhw-map-head,
.lhw-widget .lhw-grid .lhw-popular > .lhw-popular-head,
.lhw-widget.is-popular-search-hidden .lhw-grid .lhw-popular > .lhw-popular-head{
  margin-bottom:.5rem;
}