/* ============================================================
   TravelBeot — desktop place panel (#right-panel), what stays of
   the 2026-09-25 refit
   ============================================================
   The refit to the 홈페이지 개선안 right sidebar (claude.ai/design
   "홈페이지 디자인 검토") made the panel one 404px column. John
   compared it with the previous panel the same day: the previous one
   reads better, so the panel's frame and upper half are back to the
   tb-home-overrides.css look (Collapse, the floating preview card and
   the docked ~45% panel, the 280px photo, 38px name, status line
   between hairlines, outline/soft tags, checklist, lead, Menu Picks,
   Hours & directions). Kept from the refit:
   - Add to My Trip as the DS secondary (celadon outline, "+")
   - the round icon-only bookmark
   - the Reviews section, the linked event and the hidden gold foot
     CTA (none of them were part of the rollback)
   Then (John, same day): the photo now reaches the panel's right edge
   (it stopped ~48px short, a bug), and there is no Collapse: a place
   always opens in the docked panel (tb-panel-enhance.js keeps .expanded
   on), so the floating preview card and its Expand button are gone.
   Desktop-only (min-width:769px) and scoped to #right-panel, so the
   mobile sheet (#mobile-place-detail shares the .place-* classes) and
   index-legacy.html are untouched. Remove this link in index.html to
   drop the kept parts too.
   ============================================================ */

@media (min-width: 769px) {

  /* ---- Actions: Add to My Trip (celadon outline) + round bookmark ----
     Same slot and spacing as before; only the two buttons changed. */
  body.tb-page #right-panel .place-action-buttons {
    flex-wrap: nowrap; align-items: center; gap: 10px;
  }
  body.tb-page #right-panel #add-to-trip-btn.tb-add-to-trip {
    flex: 1 1 auto; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px !important;
    background: transparent !important;
    border: 1px solid var(--color-celadon, #7B9E89) !important;
    border-radius: 12px !important;
    color: var(--color-celadon-deep, #44604F) !important;
    font-family: var(--tb-sans); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) var(--ease, ease);
  }
  body.tb-page #right-panel #add-to-trip-btn.tb-add-to-trip:hover {
    background: var(--color-celadon-soft, #DCE4DB) !important;
    border-color: var(--color-celadon, #7B9E89) !important;
  }
  body.tb-page #right-panel #add-to-trip-btn.tb-add-to-trip svg { width: 16px; height: 16px; flex-shrink: 0; vertical-align: 0 !important; }

  /* Icon-only bookmark. The label text stays in the DOM as the button's
     accessible name (font-size 0 keeps it in the accessibility tree);
     ui.js rewrites it on every place and tb-panel-enhance.js copies it
     into the tooltip. */
  body.tb-page #right-panel .place-action-buttons #bookmark-toggle-btn {
    flex: 0 0 40px;
    position: relative;
    width: 40px; height: 40px;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0;                                  /* the 0-wide label must not push the icon off centre */
    background: var(--color-base, #F9FBFD) !important;
    border: 1px solid var(--color-line, rgba(28, 27, 24, 0.08)) !important;
    border-radius: 50% !important;
    color: var(--color-ink-muted, #5A5E55) !important;
    font-size: 0 !important; line-height: 0;
    cursor: pointer;
    transition: border-color var(--dur-fast, 150ms) var(--ease, ease), color var(--dur-fast, 150ms) var(--ease, ease), background var(--dur-fast, 150ms) var(--ease, ease);
  }
  body.tb-page #right-panel .place-action-buttons #bookmark-toggle-btn:hover {
    background: var(--color-base, #F9FBFD) !important;
    border-color: var(--color-celadon, #7B9E89) !important;
    color: var(--color-celadon-deep, #44604F) !important;
  }
  body.tb-page #right-panel .place-action-buttons #bookmark-toggle-btn[aria-pressed="true"] {
    background: var(--color-celadon, #7B9E89) !important;
    border-color: var(--color-celadon, #7B9E89) !important;
    color: var(--text-on-celadon, #FFFFFF) !important;
  }
  body.tb-page #right-panel .place-action-buttons #bookmark-toggle-btn[aria-pressed="true"]:hover {
    background: var(--color-celadon-hover, #6B8E79) !important;
    border-color: var(--color-celadon-hover, #6B8E79) !important;
  }
  body.tb-page #right-panel #bookmark-toggle-btn svg { width: 17px; height: 17px; flex-shrink: 0; vertical-align: 0 !important; }
  body.tb-page #right-panel #bookmark-toggle-btn[aria-pressed="true"] svg { fill: currentColor; }
  /* If a legacy writer replaced the button's markup with text (it happened
     on every load until 2026-09-25), draw the bookmark from CSS instead. */
  body.tb-page #right-panel #bookmark-toggle-btn:not(:has(svg))::before {
    content: '';
    width: 17px; height: 17px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.tb-page #right-panel #add-to-trip-btn:focus-visible,
  body.tb-page #right-panel #bookmark-toggle-btn:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(123, 158, 137, 0.35)) !important; }

  /* ---- Toolbar: no Collapse (John 2026-09-25). Share and × keep the
     right-hand slot; with Collapse gone they'd slide left under
     justify-content: space-between. ---- */
  body.tb-page #right-panel .tb-toolbar-collapse { display: none !important; }
  body.tb-page #right-panel .tb-toolbar-right { margin-left: auto; }

  /* ---- Photo reaches the right edge. style.css gives .picture-slider
     width:100%, which beat the -24px side margins and left a ~48px strip
     of paper on the right with the × floating over it. ---- */
  body.tb-page #right-panel .bottom-sheet-content .picture-slider { width: auto; }

  /* ---- Small fixes that don't change the look ---- */
  /* one photo: no arrows (they showed on hover and did nothing) */
  body.tb-page #right-panel .picture-slider:not(:has(#slider-dots .dot)) :is(.slider-prev, .slider-next) { display: none; }
  /* the status line's "·" travels with the part after it (tb-panel-enhance.js),
     so a wrapped line never ends on a dangling dot; same 8px rhythm as before */
  body.tb-page #right-panel .tb-decide-seg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  /* today's hours not listed: the week shows open in place of the today line */
  body.tb-page #right-panel .tb-hours-week--open { margin-top: 0; padding-top: 0; border-top: none; }

  /* ---- Reviews (kept from the refit) ----
     The section gets its own hairline and the old <hr> above it goes. */
  body.tb-page #right-panel .bottom-sheet-content > hr { display: none; }
  body.tb-page #right-panel #reviews-section,
  body.tb-page #right-panel #event-info-section {
    margin: 20px 0 0; padding: 20px 0 0;
    border-top: 1px solid var(--tb-rule);
  }
  body.tb-page #right-panel #reviews-section {
    background: transparent; border-radius: 0; box-shadow: none;
  }
  body.tb-page #right-panel .reviews-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin: 0 0 12px; padding: 0; border: none;
  }
  /* same heading as Menu Picks / Hours & directions */
  body.tb-page #right-panel .reviews-header h3 {
    margin: 0;
    font-family: var(--tb-serif); font-weight: 500; font-size: 22px; line-height: 1.25;
    letter-spacing: -0.012em; font-variation-settings: 'opsz' 48;
    color: var(--color-ink, #1C1B18);
  }
  body.tb-page #right-panel .reviews-heading-link { color: var(--color-ink, #1C1B18) !important; }
  body.tb-page #right-panel .reviews-heading-link:hover { color: var(--color-celadon-deep, #44604F) !important; }
  body.tb-page #right-panel .reviews-heading-arrow { color: var(--color-celadon, #7B9E89); }
  body.tb-page #right-panel #view-all-reviews-btn {
    padding: 6px 10px !important;
    background: transparent !important; border: none !important; border-radius: 8px !important;
    color: var(--color-celadon-deep, #44604F) !important;
    font-family: var(--tb-sans); font-size: 14px; font-weight: 600;
  }
  body.tb-page #right-panel #view-all-reviews-btn:hover { background: var(--color-celadon-soft, #DCE4DB) !important; }
  body.tb-page #right-panel .average-rating {
    margin: 0 0 12px; padding: 0;
    background: transparent; border: none; border-radius: 0;
    align-items: baseline;
  }
  body.tb-page #right-panel .average-rating .stars { color: var(--color-celadon, #7B9E89); font-size: 14px; letter-spacing: 1px; }
  body.tb-page #right-panel .average-rating .rating-number { font-size: 14px; font-weight: 600; color: var(--color-ink, #1C1B18); }

  /* empty state: sunk card, italic serif invitation, one outline button */
  body.tb-page #right-panel .no-reviews {
    display: block;
    margin: 0 !important; padding: 22px 18px !important;
    background: var(--color-base-sunk, #EEF2F4) !important;
    border: none; border-radius: 12px;
    box-shadow: none;
    text-align: center;
    font-size: 14px; line-height: 1.5;       /* the strut the inline lines sit on */
  }
  body.tb-page #right-panel .no-reviews-title {
    margin: 0 0 6px;
    font-family: var(--tb-serif); font-style: italic; font-weight: 400;
    font-size: 19px; line-height: 1.3; letter-spacing: 0;
    font-variation-settings: normal;
    color: var(--color-ink, #1C1B18) !important;
  }
  body.tb-page #right-panel .no-reviews-subtitle,
  body.tb-page #right-panel .no-reviews-description {
    display: inline; margin: 0;
    font-family: var(--tb-sans); font-style: normal;
    font-size: 14px; line-height: 1.5;
    font-variation-settings: normal;
    color: var(--color-ink-muted, #5A5E55) !important;
  }
  body.tb-page #right-panel .no-reviews-subtitle::after { content: ' '; }

  /* Write a review: DS secondary (celadon outline), small */
  body.tb-page #right-panel .write-review-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; padding: 9px 14px !important;
    background: transparent !important;
    border: 1px solid var(--color-celadon, #7B9E89) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--color-celadon-deep, #44604F) !important;
    font-family: var(--tb-sans); font-size: 14px; font-weight: 600; line-height: 1;
    cursor: pointer; transform: none;
  }
  body.tb-page #right-panel .write-review-btn:hover {
    background: var(--color-celadon-soft, #DCE4DB) !important;
    transform: none !important; box-shadow: none !important;
  }
  body.tb-page #right-panel .no-reviews .write-review-btn { display: flex; margin: 14px auto 0; }
  body.tb-page #right-panel .write-review-btn .review-icon { display: none; }
  /* with reviews, ui.js appends a second Write button after the list; the
     one in the sort row is enough */
  body.tb-page #right-panel #reviews-section > .write-review-btn { display: none; }

  /* sort row: sunk track, raised active segment (the rail's segment grammar) */
  body.tb-page #right-panel .review-controls {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 12px;
  }
  body.tb-page #right-panel .review-sort {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--color-base-sunk, #EEF2F4); border-radius: 999px;
  }
  body.tb-page #right-panel .sort-button {
    padding: 6px 12px; border: none; border-radius: 999px;
    background: transparent;
    font-family: var(--tb-sans); font-size: 13px; font-weight: 600;
    color: var(--color-ink-muted, #5A5E55);
  }
  body.tb-page #right-panel .sort-button:hover:not(.active) { background: transparent; color: var(--color-ink, #1C1B18); }
  body.tb-page #right-panel .sort-button.active {
    background: var(--color-base-2, #FFFFFF);
    color: var(--color-celadon-deep, #44604F);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(28, 27, 24, 0.08));
  }

  /* review cards */
  body.tb-page #right-panel .reviews-list { display: flex; flex-direction: column; gap: 10px; }
  body.tb-page #right-panel .review-item {
    margin: 0; padding: 14px 16px;
    background: var(--color-base-2, #FFFFFF);
    border: 1px solid var(--color-line, rgba(28, 27, 24, 0.08));
    border-radius: 12px;
    box-shadow: none;
  }
  body.tb-page #right-panel .review-item:hover { background: var(--color-base-2, #FFFFFF); border-color: var(--color-line-strong, rgba(28, 27, 24, 0.14)); box-shadow: none; }
  body.tb-page #right-panel .review-header { margin: 0 0 2px; }
  body.tb-page #right-panel .review-author { font-size: 14px; font-weight: 600; color: var(--color-ink, #1C1B18); }
  body.tb-page #right-panel .review-date { font-size: 12.5px; color: var(--color-ink-faint, #9AA09A); }
  body.tb-page #right-panel .review-content { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--color-ink, #1C1B18); }
  body.tb-page #right-panel .review-photo { border-radius: 8px; }
  body.tb-page #right-panel .review-actions { border-top: 1px solid var(--color-line, rgba(28, 27, 24, 0.08)); }
  body.tb-page #right-panel .review-recommend { font-size: 13px; color: var(--color-celadon-deep, #44604F); }
  body.tb-page #right-panel .helpful-button,
  body.tb-page #right-panel .helpful-display {
    background: transparent;
    border: 1px solid var(--color-line-strong, rgba(28, 27, 24, 0.14));
    border-radius: 999px;
    color: var(--color-ink-muted, #5A5E55);
    font-family: var(--tb-sans);
  }
  body.tb-page #right-panel .helpful-button:hover { background: var(--color-base-sunk, #EEF2F4); border-color: var(--color-line-strong, rgba(28, 27, 24, 0.14)); }
  body.tb-page #right-panel .helpful-button.active { background: var(--color-celadon-soft, #DCE4DB); border-color: var(--color-celadon, #7B9E89); color: var(--color-celadon-deep, #44604F); }
  body.tb-page #right-panel .helpful-count { background: var(--color-base-sunk, #EEF2F4); color: var(--color-ink, #1C1B18); }
  body.tb-page #right-panel .helpful-button.active .helpful-count { background: var(--color-base-2, #FFFFFF); color: var(--color-celadon-deep, #44604F); }
  body.tb-page #right-panel .rs-comments { border-top: 1px solid var(--color-line, rgba(28, 27, 24, 0.08)); }
  body.tb-page #right-panel .rs-comments-toggle,
  body.tb-page #right-panel .rs-comments-submit { font-family: var(--tb-sans); }   /* buttons don't inherit it: Arial otherwise */
  body.tb-page #right-panel .rs-comments-toggle { color: var(--color-ink-muted, #5A5E55); }
  body.tb-page #right-panel .rs-comments-toggle:hover,
  body.tb-page #right-panel .rs-comments-toggle.rs-open .rs-comments-chevron,
  body.tb-page #right-panel .rs-comments-toggle.rs-open i.fa-comment-dots { color: var(--color-celadon-deep, #44604F) !important; }
  body.tb-page #right-panel .rs-comment { background: var(--color-base, #F9FBFD); border-left-color: var(--color-celadon-soft, #DCE4DB); }
  body.tb-page #right-panel .rs-comment-curator { background: var(--color-celadon-soft, #DCE4DB) !important; border-left-color: var(--color-celadon, #7B9E89); }
  body.tb-page #right-panel .rs-comment-badge { background: var(--color-celadon-deep, #44604F) !important; }
  body.tb-page #right-panel .rs-comments-submit { background: var(--color-celadon-deep, #44604F) !important; }
  body.tb-page #right-panel .rs-comments-input:focus { border-color: var(--color-celadon, #7B9E89) !important; box-shadow: var(--ring, 0 0 0 3px rgba(123, 158, 137, 0.35)) !important; }

  /* before the first place arrives */
  body.tb-page #right-panel #reviews-loading-placeholder {
    background: var(--color-base-sunk, #EEF2F4) !important;
    border: none !important; border-radius: 12px !important;
  }

  /* ---- Event at this place (only for places with a linked event; this
     was the pre-Baekja orange badge) ---- */
  body.tb-page #right-panel .event-info-badge {
    margin: 0; padding: 16px 18px;
    background: var(--color-base-2, #FFFFFF);
    border: 1px solid var(--color-line, rgba(28, 27, 24, 0.08));
    border-radius: 12px; box-shadow: none;
    color: var(--color-ink, #1C1B18);
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  }
  body.tb-page #right-panel .event-info-header { margin: 0; display: flex; }
  body.tb-page #right-panel .event-info-icon { display: none; }
  body.tb-page #right-panel .event-info-label {
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-celadon-deep, #44604F); opacity: 1;
  }
  body.tb-page #right-panel .event-info-title {
    margin: 0;
    font-family: var(--tb-serif); font-weight: 500; font-size: 18px; line-height: 1.28;
    color: var(--color-ink, #1C1B18);
  }
  body.tb-page #right-panel .event-info-dates { margin: 0; font-size: 14px; color: var(--color-ink-muted, #5A5E55); opacity: 1; }
  body.tb-page #right-panel .event-free-tag {
    padding: 4px 10px; border-radius: 999px;
    background: var(--color-celadon-soft, #DCE4DB); color: var(--color-celadon-deep, #44604F);
    font-size: 12.5px; font-weight: 600;
  }
  body.tb-page #right-panel .event-details-btn {
    margin-top: 6px; padding: 9px 14px;
    background: transparent; border: 1px solid var(--color-celadon, #7B9E89); border-radius: 8px;
    color: var(--color-celadon-deep, #44604F);
    font-family: var(--tb-sans); font-size: 14px; font-weight: 600; line-height: 1;
    box-shadow: none; cursor: pointer;
  }
  body.tb-page #right-panel .event-details-btn:hover { background: var(--color-celadon-soft, #DCE4DB); transform: none; }

  /* Hangul and kana have no true italic and don't take caps tracking */
  body.tb-page #right-panel .no-reviews-title:is(:lang(ko), :lang(ja)) { font-style: normal; }
  body.tb-page #right-panel .event-info-label:is(:lang(ko), :lang(ja)) { letter-spacing: 0.02em; }

  /* ---- No foot CTA in the panel: the header's "Get Your Custom
     Itinerary" is the view's one gold. Delete this rule to bring the
     panel CTA back. ---- */
  body.tb-page #right-panel .tb-panel-cta { display: none !important; }

  /* ---- Chat button beside the docked panel ----
     tb-home-overrides.css slides it left by clamp(340px, 45%, 540px), but
     the button is position:fixed, so its 45% read the whole window while
     the panel's 45% reads the map area (the button floated 87px into the
     map at 1440). Same formula on the map area's width; the story reader
     widens the rail to 608px. */
  body.tb-page:has(.right-panel.expanded):has(#right-panel) .chat-fab {
    right: calc(clamp(340px, (100vw - var(--tb-rail-w, 380px)) * 0.45, 540px) + 24px);
  }
  body.tb-page:has(.right-panel.expanded):has(#right-panel):has(.sidebar.tb-reading) .chat-fab {
    right: calc(clamp(340px, (100vw - 608px) * 0.45, 540px) + 24px);
  }
}