/* ==========================================================================
   hotels.css — verified hotel candidate overlay (js/hotels.js)
   House-shaped numbered pins (H1/H2/H3), a small candidate list and a pin
   card. Separate visual system from the teal "숙소 권역" zone pin: these are
   real shortlisted properties, marked 예약 전 (not booked).
   ========================================================================== */

/* ---------- map pin ---------- */
/* Same hit-test split as .mk: the button box itself is inert, the name pill
   and the house head take taps. */
.htl { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-ko); pointer-events: none; }
.htl-name {
  pointer-events: auto;
  max-inline-size: 170px; padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--mk-label-bg); color: var(--mk-label-fg);
  font-size: 14px; font-weight: var(--fw-semi); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--mk-shadow);
}
.htl-pin {
  pointer-events: auto;
  inline-size: 34px; block-size: 43px; overflow: visible;
  padding: 4px 5px 0; /* tap target >= 44x44 around the house head */
  filter: drop-shadow(0 1px 1.5px rgba(26, 18, 8, 0.45));
}
.htl-body { fill: var(--hc, #6d28d9); stroke: #fff; stroke-width: 3; stroke-linejoin: round; paint-order: stroke fill; }
.htl-num { font-family: var(--font-num); font-size: 12px; font-weight: 700; fill: #fff; }
/* Compact collision fallback: when labels would overlap, the lower-priority
   pins keep the full house head and shrink the tag to the "H#" code; the name
   still shows on hover/focus, in the list and in the card. */
.htl.htl-compact .htl-name { max-inline-size: none; }
.htl.htl-compact .htl-name .htl-nm { display: none; }
.htl:hover .htl-name, .htl:focus-visible .htl-name { box-shadow: 0 0 0 2px var(--mk-focus), var(--mk-shadow); }
.htl:focus-visible { outline: none; }
.htl:focus-visible .htl-pin { outline: 2px solid var(--mk-focus); outline-offset: 3px; border-radius: 6px; }
.htl[aria-current="true"] { z-index: 1; }
.htl[aria-current="true"] .htl-pin { scale: 1.15; }
.htl[aria-current="true"] .htl-name { background: var(--hc, var(--mk-label-fg)); color: #fff; }
.htl[aria-current="true"] .htl-name .htl-nm { display: inline; }

/* ---------- legend glyph inside the 레이어 popover's map-key ---------- */
.htl-key { display: inline-grid; place-items: center; inline-size: 22px; block-size: 26px; flex: none; }

/* ---------- toggle button (lives inside .map-controls) ---------- */
.ctl-hotels { font-size: 14px; }

/* ---------- candidate list popover ---------- */
.htl-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px);
  inline-size: min(330px, calc(100vw - 24px));
  padding: 10px 8px 8px;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-2);
  animation: pop-in var(--dur-base) var(--ease-standard);
}
.htl-pop h3 { margin: 0 4px 2px; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.htl-pop-sub { margin: 0 4px 8px; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--fg-2); }
.htl-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.htl-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center;
  min-block-size: 44px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: none; text-align: start; cursor: pointer;
  font-family: var(--font-ko); font-size: var(--fs-md); color: var(--fg);
}
.htl-item:hover, .htl-item:focus-visible { background: var(--surface-2); border-color: var(--border); }
.htl-item[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); }
.htl-badge {
  display: grid; place-items: center; inline-size: 26px; block-size: 26px;
  border-radius: 7px 7px 7px 11px;
  background: var(--hc); color: #fff;
  font-family: var(--font-num); font-size: 13px; font-weight: 700;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(26, 18, 8, 0.35);
}
.htl-item b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.htl-item .htl-price { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--fg); margin-block-start: 1px; }
.htl-item .htl-cond { display: block; font-size: var(--fs-md); color: var(--fg-2); line-height: var(--lh-snug); margin-block-start: 1px; }
.htl-flag { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: var(--r-pill); background: #fff4db; color: #7a4d00; font-size: 14px; font-weight: var(--fw-semi); vertical-align: 1px; }
.htl-pop-foot { margin: 8px 4px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- pin card (the one popup, anchored over the pin) ---------- */
.htl-card {
  position: absolute; z-index: 6;
  inline-size: min(310px, calc(100% - 24px));
  max-block-size: min(430px, calc(100% - 24px));
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-2);
  font-family: var(--font-ko); color: var(--fg);
  overflow: hidden;
}
.htl-card[hidden] { display: none; }
/* No usable map (library/style never loaded): the card docks above the
   control row instead of tracking a pin. */
.htl-card.is-static { left: 12px; top: auto; bottom: calc(var(--sheet-h) + 64px); }
/* The map is dead for good (its init rejected, or map3d.js never arrived): the app
   shows its own full-screen error; reparented to #app, the list and card park in the
   dimmed top area (z above .modal's 20) so names, prices and links stay reachable. */
.htl-pop.htl-dead, .htl-card.htl-dead { z-index: 21; left: 12px; top: calc(var(--safe-top) + 70px); bottom: auto; }
.htl-pop.htl-dead { position: absolute; }
/* The toggle comes along, out of the scrimmed controls row, so the list can be
   opened again after a tap outside it. */
#btn-hotels.htl-dead { position: absolute; z-index: 21; inset-inline-start: 12px; inset-block-start: calc(var(--safe-top) + 16px); }
#btn-hotels[disabled] { opacity: 0.55; cursor: default; }
.htl-card-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 0; }
.htl-card-head .htl-badge { inline-size: 30px; block-size: 30px; border-radius: 8px 8px 8px 13px; font-size: 14px; flex: none; margin-block-start: 1px; }
.htl-card-title { flex: 1; min-width: 0; }
.htl-card-title b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.htl-card-title .en { display: block; font-size: var(--fs-md); color: var(--fg-2); font-weight: var(--fw-regular); }
.htl-x { flex: none; inline-size: 32px; block-size: 32px; margin: -4px -4px 0 0; border: 0; border-radius: 50%; background: none; color: var(--fg-2); font-size: 18px; cursor: pointer; }
.htl-x:hover { background: var(--surface-2); }
.htl-card-body { padding: 8px 12px 12px; overflow-y: auto; font-size: var(--fs-md); line-height: var(--lh-snug); }
.htl-tagrow { display: flex; flex-wrap: wrap; gap: 4px; margin-block-end: 8px; }
.htl-tag { padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 14px; font-weight: var(--fw-semi); }
.htl-tag.warn { background: #fff4db; color: #7a4d00; }
.htl-price-main { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.htl-price-main small { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--fg-2); }
.htl-price-sub { margin-block-start: 2px; font-size: var(--fs-md); color: var(--fg-2); }
.htl-rows { display: grid; gap: 6px; margin-block-start: 8px; }
.htl-rows .r { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; font-size: var(--fs-md); }
.htl-rows .r > b { color: var(--muted); font-weight: var(--fw-semi); }
.htl-links { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.htl-links a {
  display: inline-flex; align-items: center; gap: 4px; min-block-size: 34px; padding: 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--accent-text);
  font-size: var(--fs-md); font-weight: var(--fw-semi); text-decoration: none;
}
.htl-links a:hover { background: var(--surface-3); }
.htl-card-note { margin-block-start: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- phones ---------- */
@container app (max-width: 860px) {
  /* Compact dock: a title line and one row per candidate, so the three pins and
     their labels stay in view above it (fits keep clear of it via openSpace). */
  .htl-pop { left: 0; right: 0; bottom: calc(100% + 6px); inline-size: auto; padding: 6px; }
  .htl-pop h3 { margin: 0 4px 4px; font-size: 14px; }
  .htl-pop-sub, .htl-pop-foot { display: none; }
  .htl-item { grid-template-columns: 24px minmax(0, 1fr); min-block-size: 44px; padding: 4px 8px; }
  .htl-item b { display: inline; font-size: 14px; }
  .htl-item .htl-price { display: inline; margin-inline-start: 8px; font-size: 14px; }
  .htl-item .htl-cond { display: none; }
  .htl-badge { inline-size: 24px; block-size: 24px; font-size: 12px; }
  .htl-flag { font-size: 12px; padding: 0 5px; }
  .htl-x { inline-size: 44px; block-size: 44px; margin: -8px -8px 0 0; font-size: 20px; }
  .htl-links a { min-block-size: 44px; }
  /* The full-height sheet covers the controls row entirely; nothing to dock to. */
  #app[data-sheet="full"] .htl-pop { display: none; }
}