/* ──────────────────────────────────────────────────────────────────────────
   junome — custom giscus theme
   Base: giscus "noborder_dark" (parameterized by --primary-default / --bg-default),
   retoned to the site's design tokens (src/styles/tokens.css):
     accent indigo rgb(99 102 241) · near-black canvas #0c0c10 · Pretendard text.
   Served from /giscus-theme.css; giscus loads it into its iframe via a
   cross-origin <link> (CORS not strictly required). vercel.json sets
   Access-Control-Allow-Origin defensively anyway.
   ────────────────────────────────────────────────────────────────────────── */
main {
  /* ── Site palette knobs (drive most derived colors below) ── */
  --primary-default: 99, 102, 241;   /* --color-accent (indigo) */
  --bg-default: 20, 20, 26;          /* --color-surface-2 */

  /* ── Syntax highlighting — kept from noborder_dark (reads well on dark) ── */
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #93c5fd;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;

  /* ── Buttons (secondary) ── */
  --color-btn-text: rgb(238 240 248 / 92%);
  --color-btn-bg: rgb(255 255 255 / 4%);
  --color-btn-border: rgba(42, 42, 49, 0.86);
  --color-btn-shadow: 0 1px 0 rgb(0 0 0 / 10%);
  --color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
  --color-btn-hover-bg: rgb(255 255 255 / 7%);
  --color-btn-hover-border: rgba(147, 159, 198, 0.22);
  --color-btn-active-bg: rgba(var(--primary-default), 0.18);
  --color-btn-active-border: rgba(var(--primary-default), 0.9);
  --color-btn-selected-bg: rgba(var(--primary-default), 0.14);

  /* ── Buttons (primary = "Sign in with GitHub" / "Comment") — solid indigo CTA ── */
  --color-btn-primary-text: rgb(255 255 255 / 100%);
  --color-btn-primary-bg: rgba(var(--primary-default), 0.92);
  --color-btn-primary-border: rgba(var(--primary-default), 1);
  --color-btn-primary-shadow: 0 1px 0 rgb(0 0 0 / 12%);
  --color-btn-primary-inset-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 6%);
  --color-btn-primary-hover-bg: rgba(var(--primary-default), 1);
  --color-btn-primary-hover-border: rgba(var(--primary-default), 1);
  --color-btn-primary-selected-bg: rgba(var(--primary-default), 0.95);
  --color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 0 0 / 20%);
  --color-btn-primary-disabled-text: rgb(255 255 255 / 70%);
  --color-btn-primary-disabled-bg: rgba(var(--primary-default), 0.45);
  --color-btn-primary-disabled-border: rgba(var(--primary-default), 0.45);

  /* ── Lists / segmented control ── */
  --color-action-list-item-default-hover-bg: rgb(255 255 255 / 6%);
  --color-segmented-control-bg: rgb(255 255 255 / 5%);
  --color-segmented-control-button-bg: rgb(26 26 31 / 100%);
  --color-segmented-control-button-selected-border: rgba(var(--primary-default), 0.6);

  /* ── Foreground (text) — site tokens ── */
  --color-fg-default: rgb(238 240 248 / 96%);
  --color-fg-muted: rgb(216 220 232 / 70%);
  --color-fg-subtle: rgb(164 170 188 / 74%);

  /* ── Canvas (surfaces) — canvas-default is the comment input/well surface,
     so it must read LIGHTER than the page (#0c0c10) to keep the depth cue;
     overlays/popups lighter still, code insets recessed. ── */
  --color-canvas-default: rgb(26 26 31 / 100%);  /* surface-3 — input/well */
  --color-canvas-overlay: rgb(34 34 40 / 100%);  /* emoji picker / menus, sit above */
  --color-canvas-inset: rgb(16 16 20 / 100%);    /* code blocks / quotes — recessed */
  --color-canvas-subtle: rgb(22 22 27 / 100%);   /* subtle fills / hovers */

  /* ── Borders ── */
  --color-border-default: rgba(42, 42, 49, 0.86);
  --color-border-muted: rgba(42, 42, 49, 0.56);
  --color-neutral-muted: rgb(164 170 188 / 16%);

  /* ── Accent — indigo for emphasis, light-blue for links (matches --color-link) ── */
  --color-accent-fg: #93c5fd;
  --color-accent-emphasis: rgba(var(--primary-default), 0.95);
  --color-accent-muted: rgba(var(--primary-default), 0.4);
  --color-accent-subtle: rgba(var(--primary-default), 0.12);

  /* ── Semantic ── */
  --color-success-fg: #4ade80;
  --color-attention-fg: #fbbf24;
  --color-attention-muted: rgb(251 191 36 / 40%);
  --color-attention-subtle: rgb(251 191 36 / 14%);
  --color-danger-fg: #fb7185;
  --color-danger-muted: rgb(251 113 133 / 40%);
  --color-danger-subtle: rgb(251 113 133 / 12%);

  --color-primer-shadow-inset: 0 0 0 rgb(0 0 0 / 0%);
  --color-scale-gray-7: rgb(20 20 26 / 100%);
  --color-scale-blue-8: rgba(var(--primary-default), 0.15);

  /*! Extensions from @primer/css/alerts/flash.scss */
  --color-social-reaction-bg-hover: rgb(255 255 255 / 6%);
  --color-social-reaction-bg-reacted-hover: rgba(var(--primary-default), 0.2);

  /* Typeface — match the site (Pretendard). Falls back gracefully. */
  font-family: "Pretendard Variable", Pretendard, "Inter", "Noto Sans KR",
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main .pagination-loader-container {
  background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
}

main .gsc-loading-image {
  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
}

/* ════════════════════════════════════════════════════════════════════════
   junome blend layer — giscus 내부를 사이트에 녹인다 (실제 .gsc-* 클래스 기준).
   무거운 '이중 테두리 카드'를 → 부드러운 단일 입력 카드 하나로. 나머지는
   페이지 위에 가볍게 떠 있도록 차분한 다크 톤 + 넉넉한 여백.
   ════════════════════════════════════════════════════════════════════════ */

/* 위아래 리듬을 한 단계 더 여유롭게 */
main .gsc-main { gap: 1.75rem; }

/* 헤더("댓글 N개" / "반응 N개") — 작고 차분한 소제목 톤 */
main .gsc-comments-count,
main .gsc-comments-count-separator,
main .gsc-reactions-count {
  font-weight: 600;
  color: var(--color-fg-muted);
}

/* 반응 영역("반응 N개" + 이모지)도 네모 박스/테두리 선 없이 페이지 위에 그대로 */
main .gsc-reactions {
  border: 0;
}

/* 입력 영역: 외곽 테두리 '선'을 완전히 제거 → 선 없이 아주 옅은 표면만 남긴다.
   (배경 필름 + 라운드로 입력 영역만 은은히 구분, 네모 박스 선은 그리지 않음) */
main .gsc-comment-box {
  background: rgb(22 22 27 / 55%);
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
/* 포커스도 선 대신 아주 옅은 배경 리프트로만 */
main .gsc-comment-box:focus-within {
  background: rgb(26 26 32 / 70%);
}
/* 탭(작성하기/미리보기)은 옅은 구분선만 */
main .gsc-comment-box-tabs {
  border-bottom-color: rgba(127, 127, 127, 0.08);
  padding-inline: 4px;
}
/* 안쪽 write 래퍼의 테두리·자체 포커스링 제거 → 카드가 유일한 프레임 */
main .gsc-comment-box-write {
  border: 0;
}
main .gsc-comment-box-write:focus-within {
  box-shadow: none;
}
/* 텍스트 입력칸: 테두리 없이 카드 표면에 그대로, 넉넉한 패딩 */
main .gsc-comment-box-textarea {
  background: transparent;
  border: 0;
  padding: 0.85rem 1rem;
  line-height: 1.65;
}
main .gsc-comment-box-preview {
  border-bottom: 0;
  padding: 0.85rem 1rem;
}

/* 버튼 — 차분한 알약 */
main .btn {
  border-radius: 9px;
}

/* 개별 댓글 — 테두리 선 없이 아주 옅은 표면 + 큰 라운드 */
main .gsc-comment-content {
  background: rgb(20 20 26 / 55%);
  border: 0;
  border-radius: 14px;
}
main .gsc-comment-header { padding-top: 0.85rem; }

/* 타임라인 세로선·간격 — 더 옅고 여유롭게 */
main .gsc-tl-line { background-color: rgba(127, 127, 127, 0.12); }
main .gsc-timeline { gap: 0.75rem; }