/* Game-room and saved-viewer results share these presentation rules. */
.ocv-saved-result-backdrop,
.ocv-saved-report-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px;
}

.ocv-saved-result-backdrop {
  background: transparent;
  /* 결과 카드 바깥은 보드·수 이동에 그대로 반응하고, 그 첫 조작에 카드가 닫힌다(2026-09-12). */
  pointer-events: none;
}

.ocv-saved-report-backdrop {
  background: rgba(0, 0, 0, .34);
}

/* 결과 카드 뒤 딤(2026-10-11, 분석에서만 — 게임방·로비 안에서 연 결과는 스크립트가 붙이지 않는다). 온라인 게임방 채팅 확장(#obChatExpandBackdrop)·리뷰 코치 대화(.ocv-review-copy-backdrop)와
   같은 방식·같은 값: 카드 레이어와 형제인 별도 요소, rgba(15,23,42,.35), backdrop-filter 없음, 다크모드도 같은 값.
   역할(role=dialog)은 카드에만 둔다(앱 다크 테마가 [role=dialog] 배경을 불투명하게 덮는다).
   클릭은 통과시켜 바깥 보드 조작과 그 첫 조작에 카드가 닫히는 동작(2026-09-12)을 그대로 둔다. */
.ocv-saved-result-dim {
  position: fixed;
  inset: 0;
  z-index: 11999;
  background: rgba(15, 23, 42, .35);
  pointer-events: none;
}

/* 사후 결과/신고가 열린 동안 앱 셸용 전체화면 토글이 반투명 배경 위로 비치지 않게 한다. */
body.ocv-saved-result-open .ocv-fullscreen-menu-item,
body.ocv-saved-result-open .ocv-fs-shell-item {
  visibility: hidden !important;
  pointer-events: none !important;
}

.ocv-saved-result-dialog,
#pzResult[data-online-result] {
  pointer-events: auto;
  box-sizing: border-box;
  /* 결과 카드는 보드 위에 겹쳐 뜬다. 정보량은 그대로 두고 상자·글자만 줄여 가림을 줄인다(2026-09-18).
     버튼은 font:inherit 라 여기 font-size 가 함께 내려간다. */
  width: min(268px, 100%);
  padding: 9px;
  margin: 0;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  color: #f8fafc;
  background: #303030;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}

.ocv-saved-result-head {
  position: relative;
  min-height: 24px;
  padding: 1px 28px 6px 0;
  text-align: center;
}

.ocv-saved-result-title,
#pzResult .verdict {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.ocv-saved-result-close,
#pzResult .ob-result-close {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  color: #e5e7eb;
  background: transparent;
  font-size: 24px;
  line-height: 24px;
  cursor: pointer;
}

.ocv-saved-result-players,
#pzResultPlayers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ocv-saved-result-player,
#pzResult .ob-result-player {
  display: grid;
  grid-template-columns: 18px 22px minmax(0, 1fr) 50px;
  align-items: center;
  column-gap: 5px;
  min-height: 34px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
}

.ocv-saved-result-player.is-winner,
#pzResult .ob-result-player.is-winner {
  border-color: #86efac;
  background: rgba(220, 252, 231, .13);
}

.ocv-saved-result-stone,
#pzResult .ob-result-stone {
  box-sizing: border-box;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.ocv-saved-result-stone.black,
#pzResult .ob-result-stone.black {
  border: 2px solid rgba(255, 255, 255, .82);
  background: #080808;
}

.ocv-saved-result-stone.white,
#pzResult .ob-result-stone.white {
  border: 2px solid #d1d5db;
  background: #fff;
}

.ocv-saved-result-photo,
#pzResult .ob-result-photo {
  box-sizing: border-box;
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  object-fit: cover;
  background: #f3f4f6;
}

.ocv-saved-result-main,
#pzResult .ob-result-player-main {
  min-width: 0;
}

.ocv-saved-result-name-line,
#pzResult .ob-result-player-id {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 5px;
  line-height: 1.15;
}

.ocv-saved-result-color,
#pzResult .ob-result-color {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .66);
  font-size: 10px;
  font-weight: 700;
}

.ocv-saved-result-name,
#pzResult .ob-result-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-saved-result-rating,
#pzResult .ob-result-rating {
  overflow: hidden;
  margin-top: 2px;
  color: rgba(255, 255, 255, .86);
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-saved-result-rating.is-up,
#pzResult .ob-result-rating.is-up { color: #4ade80; }
.ocv-saved-result-rating.is-down,
#pzResult .ob-result-rating.is-down { color: #f87171; }

.ocv-saved-result-outcome,
#pzResult .ob-result-outcome {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.ocv-saved-result-win-mark,
#pzResult .ob-result-win-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  font-size: 13px;
  line-height: 1;
}

.ocv-saved-result-score,
#pzResult .ob-result-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 25px;
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.ocv-saved-result-player.is-winner .ocv-saved-result-score,
#pzResult .ob-result-player.is-winner .ob-result-score {
  color: #166534;
  background: #dcfce7;
}

.ocv-saved-result-play,
#pzResult .ob-result-review {
  /* 앱 다크 테마의 공용 링크색도 이 버튼에서는 흰색으로 표시한다. */
  --fs-app-link: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  background: #2563eb;
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.ocv-saved-result-play:hover,
#pzResult .ob-result-review:hover { background: #1d4ed8; }
/* 카드 자체는 앱에서 키 입력을 받으려고 스크립트로 포커스만 잡는다(focusResultForKeyboard).
   사용자가 고른 대상이 아니므로 카드 테두리에 포커스 링을 그리지 않는다(2026-10-05). 버튼 링은 아래대로 유지. */
.ocv-saved-result-dialog:focus,
.ocv-saved-result-dialog:focus-visible { outline: none; }
.ocv-saved-result-play:focus-visible,
#pzResult .ob-result-review:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
/* 결과 팝업의 게임 리뷰는 아래 '온라인 대국하기'와 같은 높이(40px·위아래 8px, 2026-10-11). 퍼즐·로비 결과창(#pzResult)은
   다른 버튼도 32px 라 리뷰도 32px 로 둔다. */
.ocv-saved-result-review,
#pzResult .ob-result-review { border-color: #0f766e; background: #0f766e; }
#pzResult .ob-result-review { min-height: 32px; padding: 4px 12px; }
.ocv-saved-result-review:hover, .ocv-saved-result-review:focus-visible,
#pzResult .ob-result-review:hover,
#pzResult .ob-result-review:focus-visible { border-color: #115e59; background: #115e59; }
.ocv-saved-result-review:focus-visible,
#pzResult .ob-result-review:focus-visible { outline-color: #5eead4; }
.ocv-saved-result-review:active,
#pzResult .ob-result-review:active { border-color: #134e4a; background: #134e4a; }

.ocv-saved-result-actions,
#pzResult .ob-result-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.ocv-saved-result-report,
.ocv-saved-result-dismiss,
.ocv-saved-report-buttons button,
#pzResult .ob-result-report,
#pzResult .ob-result-action:not(:where(.ob-result-review)) {
  border: 1px solid;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ocv-saved-report-buttons button {
  min-width: 76px;
  min-height: 34px;
  padding: 6px 14px;
}

.ocv-saved-result-report,
.ocv-saved-result-dismiss,
#pzResult .ob-result-report,
#pzResult .ob-result-action:not(:where(.ob-result-review)) {
  min-width: 62px;
  min-height: 29px;
  padding: 4px 10px;
}

.ocv-saved-result-report,
.ocv-saved-result-dismiss,
#pzResult .ob-result-report,
#pzResult .ob-result-action:not(:where(.ob-result-review)) {
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.ocv-saved-report-buttons button {
  border-color: #d1d5db;
  color: #1f2937;
  background: #fff;
}

/* X 포스팅·공유 아이콘 버튼 — 신고·닫기와 같은 테두리·높이(2026-09-27). */
.ocv-saved-result-icon,
#pzResult .ob-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 29px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}
.ocv-saved-result-icon svg,
#pzResult .ob-result-icon svg { display: block; width: 16px; height: 16px; }
.ocv-saved-result-icon:hover,
.ocv-saved-result-report:hover,
.ocv-saved-result-dismiss:hover,
#pzResult .ob-result-icon:hover,
#pzResult .ob-result-report:hover,
#pzResult .ob-result-action:not(:where(.ob-result-review)):hover { background: rgba(255, 255, 255, .16); }

/* 웹 전용 앱 다운로드 줄 — 홈 앱 배너와 같은 로고·라벨. */
.ocv-saved-result-stores,
#pzResultStores {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.ocv-saved-result-store,
#pzResultStores a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.ocv-saved-result-store:hover,
#pzResultStores a:hover { background: rgba(255, 255, 255, .18); }
.ocv-saved-result-store svg,
#pzResultStores a svg { display: block; width: 16px; height: 16px; flex: 0 0 auto; }

.ocv-saved-result-report:disabled,
.ocv-saved-result-dismiss:disabled,
.ocv-saved-report-buttons button:disabled,
#pzResult .ob-result-report:disabled,
#pzResult .ob-result-action:not(:where(.ob-result-review)):disabled {
  opacity: .5;
  cursor: default;
}

.ocv-saved-report-backdrop {
  z-index: 12100;
  background: rgba(0, 0, 0, .58);
}

.ocv-saved-report-modal {
  box-sizing: border-box;
  width: min(340px, 100%);
  padding: 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  color: #111827;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
}

.ocv-saved-report-modal h3 {
  margin: 0 0 12px;
  font-size: 17px;
  text-align: center;
}

.ocv-saved-report-reasons {
  display: grid;
  gap: 7px;
}

.ocv-saved-report-reason {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
}

.ocv-saved-report-reason input {
  accent-color: #2563eb;
}

.ocv-saved-report-detail {
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #111827;
  background: #f9fafb;
  font: inherit;
  resize: vertical;
}

.ocv-saved-report-detail::placeholder { color: #9ca3af; }

.ocv-saved-report-detail:focus {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, .18);
  outline-offset: 0;
}

.ocv-saved-report-count {
  margin-top: 3px;
  color: #6b7280;
  font-size: 11px;
  text-align: right;
}

.ocv-saved-report-warning {
  margin-top: 8px;
  color: #be123c;
  font-size: 11px;
  line-height: 1.35;
}

.ocv-saved-report-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.ocv-saved-report-submit {
  border-color: #111827 !important;
  color: #fff !important;
  background: #111827 !important;
}

html.fs-app-theme-dark .ocv-saved-result-dialog,
html.fs-app-theme-dark .ocv-saved-report-modal,
html.fs-app-theme-dark #pzResult[data-online-result] {
  border-color: var(--fs-app-border, #3a414c);
  color: var(--fs-app-text, #f1f5f9);
  background: var(--fs-app-surface, #151d2a);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .48);
}

html.fs-app-theme-dark .ocv-saved-result-player,
html.fs-app-theme-dark #pzResult .ob-result-player {
  border-color: var(--fs-app-border, #3a414c);
  background: var(--fs-app-surface-2, #1c2635);
}

html.fs-app-theme-dark .ocv-saved-result-player.is-winner,
html.fs-app-theme-dark #pzResult .ob-result-player.is-winner {
  border-color: #2f6e50;
  background: #163a2a;
}

/* 흑돌 표시의 밝은 흰 테두리는 다크 카드에서 튄다. 대국자 머리말 흑돌 표시(app-theme.css .player-header .badge.black)와
   같은 다크 테두리색을 쓴다(2026-10-11). 사진의 다크 바탕·테두리는 app-theme.css 공용 사진 목록에 있다. */
html.fs-app-theme-dark .ocv-saved-result-stone.black,
html.fs-app-theme-dark #pzResult .ob-result-stone.black {
  border-color: #94a3b8;
}

html.fs-app-theme-dark .ocv-saved-result-actions,
html.fs-app-theme-dark #pzResult .ob-result-secondary-actions {
  border-top-color: var(--fs-app-border, #3a414c);
}

html.fs-app-theme-dark .ocv-saved-result-report,
html.fs-app-theme-dark .ocv-saved-result-dismiss,
html.fs-app-theme-dark .ocv-saved-report-buttons button,
html.fs-app-theme-dark #pzResult .ob-result-report,
html.fs-app-theme-dark #pzResult .ob-result-action:not(:where(.ob-result-review, .ob-result-icon)) {
  border-color: var(--fs-app-border, #3a414c);
  color: var(--fs-app-text, #f1f5f9);
  background: var(--fs-app-surface-2, #1c2635);
}

html.fs-app-theme-dark .ocv-saved-report-submit {
  border-color: var(--fs-app-border, #3a414c) !important;
  color: var(--fs-app-text, #f1f5f9) !important;
  background: var(--fs-app-surface-2, #1c2635) !important;
}

html.fs-app-theme-dark .ocv-saved-report-reason {
  color: var(--fs-app-text, #f1f5f9);
}

html.fs-app-theme-dark .ocv-saved-report-detail {
  border-color: var(--fs-app-border, #3a414c);
  color: var(--fs-app-text, #f1f5f9);
  background: var(--fs-app-surface-2, #1c2635);
}

html.fs-app-theme-dark .ocv-saved-report-detail:focus {
  border-color: #60a5fa;
  outline-color: rgba(96, 165, 250, .24);
}

html.fs-app-theme-dark .ocv-saved-report-detail::placeholder,
html.fs-app-theme-dark .ocv-saved-report-count {
  color: var(--fs-app-muted, #94a3b8);
}

html.fs-app-theme-dark .ocv-saved-report-warning {
  color: #fca5a5;
}

.ocv-saved-result-toast {
  position: fixed;
  z-index: 12200;
  left: 50%;
  bottom: 24px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border-radius: 7px;
  color: #fff;
  background: rgba(17, 24, 39, .94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity .16s ease, transform .16s ease;
}

.ocv-saved-result-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 모바일: 보드 폭이 좁아 가림 부담보다 가독성이 앞선다. 글자·사진·돌·점수 칸·버튼을 함께 키운다(2026-09-29). */
@media (max-width: 767px) {
  .ocv-saved-result-dialog,
#pzResult[data-online-result] { width: min(304px, 100%); padding: 10px; font-size: 13px; }
  .ocv-saved-result-head { min-height: 26px; }
  .ocv-saved-result-title,
#pzResult .verdict { font-size: 16px; }
  .ocv-saved-result-players,
#pzResultPlayers { gap: 5px; }
  .ocv-saved-result-player,
#pzResult .ob-result-player {
    grid-template-columns: 20px 30px minmax(0, 1fr) 56px;
    column-gap: 7px;
    min-height: 42px;
    padding: 4px 8px;
  }
  .ocv-saved-result-stone,
#pzResult .ob-result-stone { width: 20px; height: 20px; }
  .ocv-saved-result-photo,
#pzResult .ob-result-photo { width: 30px; height: 30px; }
  .ocv-saved-result-color,
#pzResult .ob-result-color { font-size: 11px; }
  .ocv-saved-result-name,
#pzResult .ob-result-name { font-size: 14px; }
  .ocv-saved-result-rating,
#pzResult .ob-result-rating { font-size: 12px; }
  .ocv-saved-result-win-mark,
#pzResult .ob-result-win-mark { width: 16px; height: 16px; flex-basis: 16px; font-size: 15px; }
  .ocv-saved-result-score,
#pzResult .ob-result-score { min-width: 31px; height: 28px; font-size: 17px; }
  .ocv-saved-result-report,
  .ocv-saved-result-dismiss,
#pzResult .ob-result-report,
#pzResult .ob-result-action:not(:where(.ob-result-review)) { min-height: 32px; }
  .ocv-saved-result-icon,
#pzResult .ob-result-icon { min-width: 42px; min-height: 32px; }
  .ocv-saved-result-icon svg,
#pzResult .ob-result-icon svg { width: 18px; height: 18px; }
  .ocv-saved-result-store,
#pzResultStores a { font-size: 13px; }
}

@media (max-width: 360px) {
  .ocv-saved-result-dialog,
#pzResult[data-online-result] { padding: 8px; }
  .ocv-saved-report-modal { padding: 10px; }
  .ocv-saved-result-player,
#pzResult .ob-result-player {
    grid-template-columns: 18px 26px minmax(0, 1fr) 50px;
    column-gap: 5px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .ocv-saved-result-stone,
#pzResult .ob-result-stone { width: 18px; height: 18px; }
  .ocv-saved-result-photo,
#pzResult .ob-result-photo { width: 26px; height: 26px; }
  .ocv-saved-result-name,
#pzResult .ob-result-name { font-size: 13px; }
  .ocv-saved-result-win-mark,
#pzResult .ob-result-win-mark {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    font-size: 13px;
  }
  .ocv-saved-result-score,
#pzResult .ob-result-score { min-width: 28px; height: 26px; font-size: 16px; }
}

/* 결과창 리뷰 버튼 위 봇코치 말풍선(2026-10-02, 대국자 전용).
   선택한 리뷰 코치의 사진·이름과 결과 + 리뷰 권유 한마디. 두 결과창(대국방 #pzResult,
   게임 오버레이 카드)이 같은 마크업(ocviewer.coach-invite.js)을 쓴다. 카드가 어두워 말풍선은 흰색. */
.ocv-coach-invite {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}
.ocv-coach-invite-coach {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex: 0 0 auto;
  width: 56px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  cursor: pointer;
}
.ocv-coach-invite-coach:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 8px; }
.ocv-coach-invite-coach img {
  display: block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .75);
  object-fit: cover;   /* 모양(둥근 사각)·바탕색은 ocviewer.review-coach.css 의 코치 아바타 공용 규칙 */
}
.ocv-coach-invite-coach:hover img { border-color: #60a5fa; }
/* 리뷰 코치 버튼과 같은 이름 + 선택 화살표 */
.ocv-coach-invite-name {
  display: inline-flex;
  max-width: 64px;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}
.ocv-coach-invite-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocv-coach-invite-name > i { flex: 0 0 auto; font-style: normal; font-weight: 900; font-size: 12px; }
.ocv-coach-invite-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 8px 11px;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}
.ocv-coach-invite-bubble::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -6px;
  border-width: 6px 7px 6px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}
@media (max-width: 767px) {
  .ocv-coach-invite-bubble { font-size: 14px; }
}
/* 다크 앱(2026-10-04): 채팅 말풍선(.ocv-bot-bubble)처럼 다크 면을 쓰되, 결과 카드(#151d2a)·선수 칸(#1c2635)에
   묻히지 않게 한 단계 밝은 면(--fs-app-surface-3) + 테두리. 흰 말풍선은 다크 화면에서 가장 밝아 튀었다. */
html.fs-app-theme-dark .ocv-coach-invite-bubble {
  border: 1px solid var(--fs-app-border, #3a414c);
  background: var(--fs-app-surface-3, #253247);
  color: var(--fs-app-text, #f1f5f9);
}
html.fs-app-theme-dark .ocv-coach-invite-bubble::before {
  left: -7px;   /* 테두리 1px 만큼 바깥으로 */
  border-right-color: var(--fs-app-surface-3, #253247);
}
/* 입문 봇에게 진 뒤 코치가 권하는 입문 강의(2026-10-06, coach-invite.js). 말풍선 안 둘째 줄. */
.ocv-coach-invite-lesson {
  display: block;
  margin-top: 4px;
  font-weight: 500;
}
.ocv-coach-invite-lesson-link {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}
.ocv-coach-invite-lesson-link:hover,
.ocv-coach-invite-lesson-link:focus-visible { text-decoration: underline; }
html.fs-app-theme-dark .ocv-coach-invite-lesson-link { color: var(--fs-app-link, #93c5fd); }

/* 봇 아바타 모양(둥근 사각)·바탕색은 ocviewer.review-coach.css 의 공용 규칙(온라인 접속자 목록과 같은 값)을 쓴다. */

/* 말풍선 코치 선택창: 리뷰 화면 코치 선택창(ocviewer.css)과 같은 값. 온라인 대국방은 ocviewer.css 를
   싣지 않아 여기 둔다. 항목은 OCVReviewCoachUI.createOption 공용. */
.ocv-coach-invite-picker { position: fixed; inset: 0; z-index: 2147483000; display: flex; padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); align-items: center; justify-content: center; box-sizing: border-box; background: rgba(15,23,42,.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ocv-coach-invite-picker-card { display: flex; width: min(430px, 100%); max-height: min(78vh, 610px); flex-direction: column; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 16px; background: #f8fafc; color: #172033; box-shadow: 0 18px 50px rgba(15,23,42,.35); }
.ocv-coach-invite-picker-heading { display: flex; min-height: 50px; padding: 7px 8px 7px 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
.ocv-coach-invite-picker-heading h2 { margin: 0; color: inherit; font-size: 17px; line-height: 1.25; }
.ocv-coach-invite-picker-close { appearance: none; -webkit-appearance: none; display: inline-flex; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: #334155; font: 700 28px/1 system-ui, sans-serif; cursor: pointer; }
.ocv-coach-invite-picker-close:hover { background: #e2e8f0; }
.ocv-coach-invite-picker-close:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.ocv-coach-invite-picker-options { display: grid; min-height: 0; padding: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ocv-coach-invite-picker .ocv-review-coach-option { appearance: none; -webkit-appearance: none; display: flex; min-width: 0; min-height: 58px; padding: 5px; align-items: center; gap: 7px; overflow: hidden; border: 1px solid #dbe4ef; border-radius: 11px; background: #fff; color: #172033; text-align: left; cursor: pointer; }
.ocv-coach-invite-picker .ocv-review-coach-option:hover { border-color: #93c5fd; background: #eff6ff; }
.ocv-coach-invite-picker .ocv-review-coach-option.is-selected { border-color: #d4a017; background: #fff8d8; box-shadow: inset 0 0 0 1px rgba(212,160,23,.2); }
.ocv-coach-invite-picker .ocv-review-coach-option:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.ocv-coach-invite-picker .ocv-review-coach-option img { display: block; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #e2e8f0; object-fit: cover; }
.ocv-coach-invite-picker .ocv-review-coach-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ocv-coach-invite-picker .ocv-review-coach-option-copy strong { overflow: hidden; color: inherit; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.ocv-coach-invite-picker .ocv-review-coach-option-copy small { display: -webkit-box; overflow: hidden; color: #64748b; font-size: 10px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
html.fs-app-theme-dark .ocv-coach-invite-picker-card { border-color: #475569; background: #111c2d; color: #f1f5f9; box-shadow: 0 18px 50px rgba(0,0,0,.72); }
html.fs-app-theme-dark .ocv-coach-invite-picker-heading { border-bottom-color: #334155; }
html.fs-app-theme-dark .ocv-coach-invite-picker-close { color: #e2e8f0; }
html.fs-app-theme-dark .ocv-coach-invite-picker-close:hover { background: #243249; }
html.fs-app-theme-dark .ocv-coach-invite-picker .ocv-review-coach-option { border-color: #334155; background: #17243a; color: #f1f5f9; }
html.fs-app-theme-dark .ocv-coach-invite-picker .ocv-review-coach-option:hover { border-color: #60a5fa; background: #1e3352; }
html.fs-app-theme-dark .ocv-coach-invite-picker .ocv-review-coach-option.is-selected { border-color: #facc15; background: #4a3808; box-shadow: inset 0 0 0 1px rgba(250,204,21,.22); }
html.fs-app-theme-dark .ocv-coach-invite-picker .ocv-review-coach-option img { border-color: #475569; }
html.fs-app-theme-dark .ocv-coach-invite-picker .ocv-review-coach-option-copy small { color: #aebdd0; }