:root {
  color-scheme: dark;
  --bg: #07080c; --space: #030409;
  --ink: #edebe5; --ink-2: #b5b3ab; --muted: #7e7c85; --faint: #55545c;
  --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.16);
  --fill: rgba(255, 255, 255, 0.045); --fill-2: rgba(255, 255, 255, 0.09);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
  --light: #ffd98a; --light-soft: #fff4d6;
  --font: "Pretendard Variable", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: rgba(255, 217, 138, 0.3); }
:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; }
/* 로고: 실이 엮인 네 갈래 별 (logo.png, Gemini로 만든 그림) */
.brand .mark { width: 22px; height: 22px; background: url(/logo.png) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(200, 190, 255, 0.35)); }
.nav-links { display: flex; gap: 16px; align-items: center; font-size: 14px; color: var(--ink-2); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--ink); color: #121212; font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background 0.15s, transform 0.1s; }
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn .en { font-weight: 500; font-size: 13px; color: #75716a; }
.btn.small { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn.ghost { background: var(--fill-2); color: var(--ink); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.14); }
.text-link { color: var(--ink-2); font-size: 14.5px; text-decoration: none; border-bottom: 1px solid var(--hair-2); padding-bottom: 1px; }
.text-link:hover { color: var(--ink); border-color: var(--ink-2); }
.muted { color: var(--muted); }
.en { color: var(--muted); font-weight: 500; font-size: 0.8em; letter-spacing: 0; }
/* 권한 이름은 심사 녹화 모드(?demo=1)에서만 보인다 */
.perm { display: none; font-family: var(--mono); font-size: 11.5px; color: var(--light); }
.demo .perm { display: inline; }
/* 한국어/영어 전환: lang.js가 <html lang>을 바꾸면 고른 언어만 보인다 */
:root[lang="en"] .ko-only, :root:not([lang="en"]) .en-only { display: none !important; }
.lang-toggle { height: 30px; padding: 0 11px; border: 1px solid var(--hair-2); border-radius: 999px; background: transparent; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.lang-toggle:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.32); }
:root[lang="en"] .doc .lang { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- landing ---------- */
.sky-hero { --scrim: 0.4; position: relative; min-height: 100vh; min-height: min(100svh, 960px); display: flex; flex-direction: column; overflow: hidden; }
/* 영상 가운데의 금빛 별이 로그인 버튼 아래에 오도록 20% 내린다. 위쪽 끝은 부드럽게 사라지게.
   screen 합성: 영상의 검은 부분은 페이지 배경이 그대로 비친다 */
.hero-film { position: absolute; left: 0; right: 0; top: 20%; width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%); mask-image: linear-gradient(180deg, transparent, #000 15%); }
/* 아래쪽은 본문 배경으로 이어지게, 글자 뒤는 살짝 어둡게 눌러 읽기 쉽게 */
.sky-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent calc(100% - 260px), var(--bg)),
    radial-gradient(ellipse var(--scrim-size, 60% 40%) at 50% 48%, rgba(7, 8, 12, var(--scrim)) 45%, transparent 85%); }
@media (max-width: 760px) { .sky-hero { --scrim-size: 110% 36%; } }
.sky-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.hero { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px 12vh; }
.hero h1 { font-size: clamp(56px, 11vw, 132px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; margin: 0; color: #f4efe4;
  text-shadow: 0 0 40px rgba(7, 8, 12, 0.9); }
.hero .lede { margin: 30px 0 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.8; color: var(--ink-2); max-width: 34em;
  text-shadow: 0 0 24px rgba(7, 8, 12, 0.95), 0 0 6px rgba(7, 8, 12, 0.9); }
/* 빛을 밝히는 법: 별 세 개를 선으로 이은 별자리. 별이 차례로 켜졌다 꺼진다 */
.hero .how { margin: 40px 0 0; }
.hero .how-t { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--light-soft); text-shadow: 0 0 18px rgba(7, 8, 12, 0.95); }
.hero .how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: center; margin: 0; padding: 0; list-style: none; }
.hero .how li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 10px; font-size: 15px; line-height: 1.5;
  color: var(--ink-2); text-shadow: 0 0 18px rgba(7, 8, 12, 0.95), 0 0 5px rgba(7, 8, 12, 0.9); }
.hero .how li:not(:last-child)::after { content: ""; position: absolute; top: 5px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 1px;
  background: linear-gradient(90deg, rgba(255, 217, 138, 0.4), rgba(255, 255, 255, 0.12)); }
.hero .how i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); animation: how-lit 4.5s ease-in-out infinite both; }
.hero .how li:nth-child(2) i { animation-delay: 0.7s; }
.hero .how li:nth-child(3) i { animation-delay: 1.4s; }
.hero .how li.done i { animation: none; background: var(--light); box-shadow: 0 0 14px 4px rgba(255, 217, 138, 0.55); }
@keyframes how-lit { 0%, 70%, 100% { background: rgba(255, 255, 255, 0.22); box-shadow: none; }
  20%, 50% { background: var(--light); box-shadow: 0 0 14px 4px rgba(255, 217, 138, 0.55); } }
/* 은하지기 팔로우: 누를 수 있는 작은 알약. 올리면 별빛처럼 밝아진다 */
.hero .how a.go { margin-top: -5px; padding: 4px 13px; border: 1px solid rgba(255, 217, 138, 0.45); border-radius: 999px; background: rgba(255, 217, 138, 0.08);
  color: var(--light-soft); font-weight: 600; text-decoration: none; text-shadow: none; transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.hero .how a.go::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; }
.hero .how a.go:hover { background: rgba(255, 217, 138, 0.18); border-color: var(--light); box-shadow: 0 0 18px rgba(255, 217, 138, 0.35); transform: translateY(-1px); }
.hero .how a.go:active { transform: translateY(0); }
/* 휴대폰: 세 단계 모두 두 줄로 맞춘다 (Threads로 / 로그인, 은하지기 / 팔로우, 하루 뒤 / 별 생성) */
@media (max-width: 520px) {
  .hero .how li { font-size: 13.5px; padding: 0 4px; }
  .hero .how .w { display: block; }
  .hero .how a.go { display: inline-block; padding: 5px 12px; border-radius: 14px; line-height: 1.4; }
  .hero .how a.go::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { .hero .how i { animation: none; } }
.hero .cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero .consent { margin: 0; font-size: 12.5px; color: var(--muted); }
.hero .consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* 첫 화면 버튼 아래: 가입자 · 오늘 · 최근 7일. 점 대신 넉넉한 간격으로 나눈다 */
/* 화면 아래쪽 줄: 가입자 수 + 은하지기에게 신호 보내기 */
.hero-foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 24px 30px; text-align: center; }
.hero-foot .sky-stats { margin: 0; font-size: 15px; color: var(--muted); text-align: center; text-shadow: 0 0 18px rgba(7, 8, 12, 0.95), 0 0 5px rgba(7, 8, 12, 0.9); }
.hero-foot .sky-stats > span { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px; }
.hero-foot .sky-stats b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.notice { display: none; margin: 22px 0 0; font-size: 14px; color: var(--light-soft); }
.notice.on { display: block; }


/* ---------- docs ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; }
.doc h1 { font-size: 34px; letter-spacing: -0.04em; margin: 12px 0 4px; }
.doc h2 { font-size: 19px; margin: 40px 0 8px; letter-spacing: -0.02em; }
.doc p, .doc li { color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.doc th, .doc td { border-bottom: 1px solid var(--hair); padding: 10px 8px; text-align: left; vertical-align: top; color: var(--ink-2); }
.doc th { color: var(--muted); font-weight: 500; }
.doc .lang { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--hair); }
.doc .meta { color: var(--muted); font-size: 13px; }
.doc .card { margin: 20px 0; padding: 18px 20px; border-radius: 14px; background: var(--fill); }

footer.site { border-top: 1px solid var(--hair); padding: 32px 0 52px; font-size: 13px; color: var(--muted); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.site a { text-decoration: none; color: var(--ink-2); }
footer.site a:hover { color: var(--ink); }
footer.site .company { line-height: 1.85; }
footer.site .company b { color: var(--ink-2); font-weight: 600; }

/* ---------- app ---------- */
.userbox { display: flex; align-items: center; gap: 12px; font-size: 14px; min-width: 0; }
.userbox .who { min-width: 0; }
.userbox .text-link { white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #1c1c22; flex: none; }
.avatar.lg { width: 56px; height: 56px; }
@media (max-width: 520px) { .userbox .who .muted { display: none; } .userbox .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* 대시보드 첫 화면: 화면 전체가 대화 은하이고, 메뉴와 요약은 그 위에 겹쳐 올린다 */
.universe { --pr: max(20px, calc((100% - 1120px) / 2 + 24px)); position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--space); }
.universe .gx { position: absolute; inset: 0; height: auto; min-height: 0; }
.universe .gx .gx-panel { top: 84px; }
.universe .gx .gx-focusbar { top: var(--gx-top, 84px); }
.uni-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 4, 9, 0.85), rgba(3, 4, 9, 0)); }
.uni-nav a, .uni-nav button, .uni-nav img { pointer-events: auto; }
.uni-head { position: absolute; top: 84px; left: var(--pr); z-index: 5; width: min(400px, calc(100% - 2 * var(--pr))); pointer-events: none;
  text-shadow: 0 1px 14px rgba(3, 4, 9, 0.95), 0 0 3px rgba(3, 4, 9, 0.9); }
.uni-head a, .uni-head button { pointer-events: auto; }
.uni-head.is-loading { visibility: hidden; } /* 불러오는 동안은 비워 둔다 (관심사 지도면 아예 숨기고, 아니면 대화 은하 제목이 나온다) */
.uni-owner { margin: 0; font-size: 13px; color: var(--muted); }
.uni-owner #uniOwner { color: var(--ink-2); }
.uni-head h1 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 750; letter-spacing: -0.04em; line-height: 1.25; margin: 6px 0 0; }
.uni-head h1 .lit { color: var(--light-soft); text-shadow: 0 0 24px rgba(255, 217, 138, 0.5); }
.uni-head .sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin: 6px 0 0; }
.uni-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.uni-actions .btn.small { height: 34px; padding: 0 15px; font-size: 13px; }
.uni-actions .text-link { font-size: 13.5px; }
/* 은하를 불러오는 동안: 가운데에서 별 하나가 궤도를 돈다 */
.gx-loader { display: grid; justify-items: center; gap: 20px; color: var(--ink-2); font-size: 15px; text-align: center; }
.gx-loader p { margin: 0; }
.gx-loader .msg { display: inline-block; transition: opacity 0.2s, transform 0.2s; }
.gx-loader .msg.out { opacity: 0; transform: translateY(3px); }
/* 말줄임표가 하나씩 늘었다 줄어든다 */
.gx-loader .dots { display: inline-block; margin-left: 2px; }
.gx-loader .dots i { font-style: normal; animation: gx-dots 1.2s infinite both; }
.gx-loader .dots i:nth-child(2) { animation-delay: 0.2s; }
.gx-loader .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes gx-dots { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
.gx-loader .orbit { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); animation: gx-spin 1.6s linear infinite; }
.gx-loader .orbit::before { content: ""; position: absolute; inset: 27px; border-radius: 50%; background: var(--light-soft); box-shadow: 0 0 16px 5px rgba(255, 217, 138, 0.45); }
.gx-loader .orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--light);
  box-shadow: 0 0 10px 3px rgba(255, 217, 138, 0.6); }
@keyframes gx-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .universe { height: auto; overflow: visible; }
  .universe .gx { position: relative; display: flex; flex-direction: column; }
  .universe .gx .gx-canvas { order: -1; height: 100vh; height: 100svh; min-height: 520px; }
  .universe .gx.gx-loading { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; }
  .universe .gx .gx-focusbar { top: auto; bottom: 64px; }
  .uni-head { top: 68px; }
  .uni-head h1 { font-size: 21px; }
  .uni-head .sub { display: none; }
  .uni-actions { margin-top: 12px; }
}

.finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 64px 0 88px; scroll-margin-top: 16px; }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.035em; }
.hint { color: var(--muted); font-size: 14.5px; margin: 8px 0 0; }
.form { display: flex; gap: 8px; margin: 20px 0 0; flex-wrap: wrap; }
.input { flex: 1; min-width: 150px; height: 46px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: var(--fill); outline: none;
  transition: border-color 0.15s, background 0.15s; }
.input::placeholder { color: var(--faint); }
.input:focus { background: rgba(255, 255, 255, 0.065); border-color: rgba(255, 217, 138, 0.45); }
.form .btn.small { height: 46px; border-radius: 12px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--fill); }
.seg button { height: 40px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.result { margin-top: 24px; }
.status { font-size: 14.5px; color: var(--ink-2); padding: 4px 0; line-height: 1.7; }
.status.err { color: #f2a7a0; }
.status .en { display: block; margin-top: 4px; }
.pcard { display: flex; gap: 14px; align-items: flex-start; }
.pcard h3 { margin: 2px 0 0; font-size: 19px; letter-spacing: -0.03em; }
.pcard .bio { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; white-space: pre-line; }
.badge { font-size: 12.5px; font-weight: 500; color: var(--light); letter-spacing: 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; margin: 24px 0; }
.stat b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); }
.post { border-top: 1px solid var(--hair); padding: 14px 0; }
.post .who { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.post .who b { color: var(--ink); font-weight: 600; }
.post p { margin: 6px 0 0; font-size: 15px; white-space: pre-line; color: var(--ink-2); }
.post a { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--muted); text-decoration: none; }
.post a:hover { color: var(--ink); }
.authors { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.authors button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--fill); color: var(--ink-2); font-size: 13.5px; cursor: pointer; }
.authors button:hover { background: var(--fill-2); color: var(--ink); }
@media (max-width: 900px) { .finder { grid-template-columns: 1fr; gap: 56px; padding-top: 48px; } }
@media (max-width: 520px) { #searchForm .input { flex-basis: 100%; } #searchForm .btn { flex: 1; } }

/* ---------- 대화 은하 (galaxy.js) ---------- */
.galaxy-section { padding: 8px 0 0; scroll-margin-top: 0; }
.galaxy-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.galaxy-head .hint { margin: 0; }
.gx { --panel-w: 340px; --gap: 20px; --pr: max(var(--gap), calc((100% - 1120px) / 2 + 24px));
  --unk: #6f6e7d; --star: #c9c8d4; --edge: rgba(255, 224, 168, 0.6);
  position: relative; height: min(88vh, 900px); min-height: 620px; overflow: hidden;
  background: radial-gradient(ellipse 38% 45% at 42% 50%, rgba(255, 217, 138, 0.05), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--space) 10%, var(--space) 90%, var(--bg) 100%); }
.gx-loading { display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
.gx .gx-canvas { position: absolute; inset: 0; }
.gx .gx-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.gx .gx-svg:active { cursor: grabbing; }
.gx .gx-toolbar { position: absolute; left: var(--pr); bottom: var(--gap); right: calc(var(--panel-w) + var(--pr) + 72px); z-index: 3;
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.gx .chip, .gx .gx-toggle { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2); font-size: 13px; white-space: nowrap; cursor: pointer; }
.gx .chip:hover, .gx .gx-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.gx .chip[aria-pressed="true"] { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.gx .chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.gx .chip .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.gx .gx-toggle[hidden] { display: none; }
.gx .gx-zoom { position: absolute; right: calc(var(--panel-w) + var(--pr) + 16px); bottom: var(--gap); z-index: 3; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: rgba(12, 13, 19, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gx .gx-zoom button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.gx .gx-zoom button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.gx .gx-zoom .lvl { font-size: 10.5px; color: var(--muted); text-align: center; padding: 2px 0 7px; font-variant-numeric: tabular-nums; }
.gx .gx-focusbar { position: absolute; top: var(--gap); left: calc((100% - var(--panel-w) - var(--pr)) / 2); transform: translateX(-50%); z-index: 3;
  display: none; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap;
  background: rgba(12, 13, 19, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gx .gx-focusbar.on { display: flex; }
.gx .gx-focusbar button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.09); font-size: 13px; cursor: pointer; }
.gx .gx-focusbar button:hover { background: rgba(255, 255, 255, 0.15); }
.gx .gx-tip { position: absolute; pointer-events: none; z-index: 6; opacity: 0; transition: opacity 0.12s; max-width: 270px; padding: 10px 13px;
  border-radius: 12px; background: rgba(16, 17, 24, 0.96); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); font-size: 13px; line-height: 1.55; }
.gx .gx-tip .t-name { font-weight: 650; }
.gx .gx-tip .t-sub, .gx .gx-tip .t-quote { color: var(--ink-2); }
.gx .gx-panel { position: absolute; top: var(--gap); right: var(--pr); bottom: var(--gap); width: var(--panel-w); z-index: 4; overflow: auto;
  padding: 24px 22px; border-radius: 18px; background: rgba(10, 11, 16, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

/* marks */
.gx .nebula, .gx .edge, .gx .label, .gx .ringguide, .gx .ringtext { pointer-events: none; }
.gx .edge { transition: opacity 0.3s; }
.gx .node { cursor: pointer; transition: opacity 0.35s; outline: none; }
.gx .node.hidden { opacity: 0; pointer-events: none; }
.gx .dim { opacity: 0.08 !important; }
.gx .edge.hot { opacity: 0.95 !important; stroke: #fff !important; }
.gx .node.hl .mark { stroke: #fff !important; stroke-width: 2px !important; }
.gx .quiet .mark { animation: gx-twinkle 4.5s ease-in-out infinite; }
@keyframes gx-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
.gx .skystar { fill: #b8bdd6; pointer-events: none; animation: gx-sky 6s ease-in-out infinite; }
@keyframes gx-sky { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0.35; } }
.gx .halo { pointer-events: none; opacity: var(--o); animation: gx-breathe 5s ease-in-out infinite; }
@keyframes gx-breathe { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * 0.6); } }
.gx .core { fill: #fffaf0; pointer-events: none; }
.gx .label { font-size: calc(11.5px / var(--k, 1)); fill: var(--ink-2); paint-order: stroke; stroke: var(--space); stroke-width: calc(3px / var(--k, 1)); stroke-linejoin: round; display: none; }
.gx .me-label { font-size: calc(12.5px / var(--k, 1)); fill: var(--ink); font-weight: 700; display: inline; }
.gx .anchor-label { font-size: calc(15px / var(--k, 1)); font-weight: 700; fill: var(--ink); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--space); stroke-width: calc(5px / var(--k, 1)); stroke-linejoin: round; }
.gx .anchor-count { font-size: calc(12px / var(--k, 1)); font-weight: 500; fill: var(--muted); letter-spacing: 0; }
.gx .ringguide { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-dasharray: 2 6; }
.gx .ringtext { font-size: calc(11px / var(--k, 1)); fill: var(--faint); }
.gx .layer { transition: opacity 0.9s ease; }
.gx:not(.in) .layer { opacity: 0; }

/* panel */
.gx-panel .glow-sum .big { display: flex; align-items: baseline; gap: 8px; }
.gx-panel .glow-sum .big b { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--light-soft);
  text-shadow: 0 0 26px rgba(255, 217, 138, 0.5); font-variant-numeric: tabular-nums; }
.gx-panel .glow-sum .big span { font-size: 15px; color: var(--ink-2); }
.gx-panel .glow-sum .muted { margin-top: 10px; }
.gx-panel h2 { font-size: 19px; margin: 0 0 4px; letter-spacing: -0.03em; line-height: 1.35; }
.gx-panel h3 { font-size: 12.5px; margin: 28px 0 8px; color: var(--muted); font-weight: 600; }
.gx-panel .muted { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 4px 0 0; }
.gx-panel .back { border: 0; background: none; color: var(--ink-2); font-size: 13px; padding: 0; cursor: pointer; margin-bottom: 14px; }
.gx-panel .back:hover { color: var(--ink); }
.gx-panel .rank { list-style: none; margin: 4px -8px 0; padding: 0; }
.gx-panel .rank li { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; cursor: pointer; }
.gx-panel .rank li:hover { background: rgba(255, 255, 255, 0.06); }
.gx-panel .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.gx-panel .who { flex: 1; min-width: 0; }
.gx-panel .who b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-panel .who span { font-size: 12px; color: var(--muted); }
.gx-panel .cnt { font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-panel .meter { display: block; height: 2px; border-radius: 1px; margin-top: 6px; }
.gx-panel .badges { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 4px; }
.gx-panel .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.gx-panel .badge.hub { color: var(--light-soft); }
.gx-panel .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gx-panel .tile b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gx-panel .tile span { font-size: 12px; color: var(--muted); }
.gx-panel .quote { border-left: 2px solid var(--hair-2); padding: 2px 0 2px 12px; margin: 14px 0; }
.gx-panel .q-post, .gx-panel .q-date { font-size: 12px; color: var(--muted); }
.gx-panel .q-text { font-size: 14px; line-height: 1.65; white-space: pre-line; margin: 3px 0 0; color: var(--ink-2); }
.gx-panel .ext { display: inline-block; margin-top: 18px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.gx-panel .ext:hover { color: var(--ink); }
.gx-panel .note { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 12px 0 0; }
:is(.gx-panel, .gx-legend) .catbars { display: grid; gap: 8px; }
:is(.gx-panel, .gx-legend) .catbar { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
:is(.gx-panel, .gx-legend) .catbar:hover { color: var(--ink); }
:is(.gx-panel, .gx-legend) .catbar .track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
:is(.gx-panel, .gx-legend) .catbar .fill { height: 100%; border-radius: 3px; }
:is(.gx-panel, .gx-legend) .catbar .v { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.gx-panel .topics { display: grid; gap: 9px; }
.gx-panel .topic { display: grid; grid-template-columns: 1fr 64px 40px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.gx-panel .topic .t { min-width: 0; line-height: 1.45; }
.gx-panel .topic small { margin-left: 6px; font-size: 11.5px; color: var(--muted); }
.gx-panel .topic .track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.gx-panel .topic .fill { height: 100%; border-radius: 3px; }
.gx-panel .topic .v { text-align: right; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.gx-panel .who .sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-panel .mine { margin-top: 14px; padding: 0; border: 0; background: none; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  border-bottom: 1px solid var(--hair-2); }
.gx-panel .mine:hover { color: var(--ink); }

/* ---------- 관심사 지도 (topicmap.js + galaxy3d.js) ----------
   우주가 화면 전체를 쓰고, 글은 상자 없이 그 위에 띄운다. 왼쪽 글 영역은 옅어지는 그림자로만 읽기 쉽게 한다 */
.universe.map-mode .uni-head { display: none; }
.universe.map-mode ~ .wrap, .universe.map-mode ~ footer.site { display: none; } /* 관심사 지도에서는 아래 사람 찾기·키워드 트렌드와 회사 정보(홈에 있음)를 숨긴다 */
.gx.gx-map { --panel-w: 340px; --hair-m: rgba(170, 190, 230, 0.12); }
.gx .gx-3d { position: absolute; inset: 0; z-index: 0; } /* 별 이름표가 글·검색·필터 위로 올라오지 않게 맨 아래 층 */
.gx .gx-3d canvas { display: block; touch-action: none; cursor: grab; }
.gx .gx-3d canvas:active { cursor: grabbing; }
.gx .gx-3d .gx3d-hull { position: absolute; left: 0; top: 0; pointer-events: none; }
.gx .gx-3d .gx3d-bg { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; } /* 은하 배경 타원: 별(WebGL) 뒤 */
.universe.map-mode { touch-action: pan-x pan-y; } /* 휴대폰에서 패널 위를 두 손가락으로 벌려도 페이지가 확대되지 않게 (우주 캔버스는 따로 처리) */
.gx3d-labels { position: absolute; inset: 0; pointer-events: none; }
.gx3d-label { font-size: 11px; letter-spacing: 0.01em; color: rgba(222, 230, 248, 0.8); white-space: nowrap; pointer-events: none;
  transition: opacity 0.25s; text-shadow: 0 0 2px #02040a, 0 0 4px #02040a, 0 0 10px #02040a, 0 1px 0 #02040a; }
.gx3d-galaxy { padding: 2px 6px; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; font-weight: 650; letter-spacing: -0.01em;
  text-align: center; cursor: pointer; pointer-events: auto; text-shadow: 0 0 12px #02040a, 0 0 4px #02040a; transition: opacity 0.3s; }
.gx3d-galaxy small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.gx3d-galaxy:hover { color: #cfe6ff; }
.gx3d-label.sel { color: #fff; font-size: 12.5px; font-weight: 650; text-shadow: 0 0 10px rgba(170, 215, 255, 0.85), 0 0 3px #02040a; }

/* 왼쪽 글 영역: 상자 대신 왼쪽에서 오른쪽으로 옅어지는 그림자 */
.gx.gx-map .gx-panel { left: 0; right: auto; top: 0; bottom: 0; width: calc(var(--pr) + var(--panel-w) + 90px); padding: 92px 90px 0 var(--pr);
  display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(90deg, rgba(3, 5, 10, 0.92) 0%, rgba(3, 5, 10, 0.82) 62%, rgba(3, 5, 10, 0) 100%); }
.gx-map .card-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 6px 0 18px; }
.gx-map .card-head .back { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 -6px -2px; padding: 4px 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: color 0.15s; }
.gx-map .card-head .back:hover { color: var(--ink); }
.gx-map .card-head .back svg { transition: transform 0.15s; }
.gx-map .card-head .back:hover svg { transform: translateX(-2px); }
/* ThreadVerse 바로 아래 한 줄 */
.gx-map .gx-title { position: absolute; top: 58px; left: var(--pr); z-index: 6; margin: 0; font-size: 13px; color: var(--ink-2); text-shadow: 0 0 8px #02040a; }
.gx-map .gx-title b { color: var(--ink); font-weight: 700; }
.gx-map .gx-title .unk { color: var(--muted); }
.gx-map .sec-head { display: flex; align-items: baseline; justify-content: space-between; }
.gx-map .sec-head.first h3 { margin-top: 8px; }
.gx-map .fold, .gx-map .more { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.gx-map .fold:hover, .gx-map .more:hover { color: var(--ink); }
.gx-map .more { margin: 4px 0 0 34px; }
/* 한 줄짜리 목록 (트렌드·랭킹) */
.gx-map .gx-panel .rank.compact li { padding: 6px 8px; gap: 10px; }
.gx-map .rank.compact .kw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.gx-map .rank.compact .kw b { font-weight: 600; }
.gx-map .rank.compact .kw .handle { font-size: 11.5px; }
.gx-map .rank.compact .star-ic.sm { width: 22px; height: 22px; margin: -3px -2px; }
.gx-map .card-title { flex: 1; min-width: 0; }
.gx-map .card-title .tag { font-size: 12px; letter-spacing: 0.02em; color: var(--muted); }
.gx-map .card-title h2 { margin: 4px 0 0; font-size: 24px; font-weight: 750; letter-spacing: -0.035em; line-height: 1.25; overflow-wrap: anywhere; }
.gx-map .card-title .muted { margin: 3px 0 0; }
.gx-map .card-title .ord { color: var(--light-soft); }
.gx-map .unknown-dot.lg { width: 56px; height: 56px; background: radial-gradient(circle, #000 0 7px, rgba(200, 210, 230, 0.75) 7.8px 9.6px, transparent 10.6px); }
.gx-map .card-head .close { align-self: flex-start; width: 30px; height: 30px; margin: -4px -8px 0 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.gx-map .card-head .close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.gx-map .card-body { flex: 1; min-height: 0; overflow: auto; padding: 0 6px 28px 0; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); }
.gx-map .card-body::-webkit-scrollbar { display: none; }
.gx-map .card-foot { padding: 8px 0 26px; }
.gx-map .card-foot .btn { width: 100%; height: 46px; font-size: 14.5px; text-decoration: none; }
.gx-map .card-foot .btn + .btn { margin-top: 8px; }
/* 짧은 안내 팝업 */
.gx-dialog { width: min(320px, calc(100vw - 48px)); padding: 26px 24px 20px; border: 0; border-radius: 18px; text-align: center;
  background: rgba(14, 17, 28, 0.96); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.gx-dialog::backdrop { background: rgba(2, 4, 10, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gx-dialog .t { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.gx-dialog .b { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.gx-dialog form { margin: 20px 0 0; }
.gx-dialog .btn { width: 100%; height: 40px; font-size: 14px; }
.invite-dlg { width: min(380px, calc(100vw - 40px)); }
.invite-dlg .b.sub { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.invite-dlg form { display: grid; gap: 8px; }
/* 내 별 생성하기: 동의 팝업 · 별이 하나도 없을 때의 빈 우주 */
.star-dlg { width: min(400px, calc(100vw - 40px)); }
.star-dlg .b.sub { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.star-dlg form { display: grid; gap: 8px; }
.gx-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; }
.gx-empty .t { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.gx-empty .b { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
/* 홈: 은하지기에게 신호 보내기 (깜빡이는 작은 빛 + 글자) */
.hero-foot .signal { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 4px; border: 0; background: none; color: var(--ink-2);
  font: inherit; font-size: 14px; cursor: pointer; text-shadow: 0 0 18px rgba(7, 8, 12, 0.95); transition: color 0.15s; }
.hero-foot .signal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--light); box-shadow: 0 0 10px 2px rgba(255, 217, 138, 0.6);
  animation: signal-blink 2.4s ease-in-out infinite; }
.hero-foot .signal:hover { color: #fff; }
.hero-foot .signal span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 4px; }
@keyframes signal-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .hero-foot .signal::before { animation: none; } }
.signal-dlg { width: min(440px, calc(100vw - 40px)); text-align: left; }
.hero .consent .switch { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.hero .consent .switch:hover { color: #fff; }
.switch-dlg { width: min(400px, calc(100vw - 40px)); }
.switch-dlg .col { display: grid; gap: 8px; margin-top: 18px; }
.switch-dlg .col .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; text-decoration: none; }
.switch-dlg form { margin: 10px 0 0; }
.switch-dlg .close { padding: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.signal-dlg form { margin: 16px 0 0; }
.signal-dlg textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; resize: vertical;
  background: rgba(255, 255, 255, 0.04); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.6; outline: none; }
.signal-dlg textarea:focus { border-color: rgba(255, 217, 138, 0.55); }
.signal-dlg .row { display: flex; gap: 8px; margin-top: 12px; }
.signal-dlg .row .btn { flex: 1; }
.signal-dlg .fine { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
/* 오른쪽 위 로그인 정보 아래: 내 별 보기 */
/* 오른쪽 위 한 묶음: [전체 우주로] [내 별 보기]. 같은 알약 모양 */
.gx-map .gx-quick { position: absolute; top: 58px; right: var(--pr); z-index: 6; display: flex; align-items: center; gap: 8px; }
.gx-map .gx-mystar, .gx-map .gx-home { position: static; height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  background: rgba(10, 14, 24, 0.7); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.gx-map .gx-mystar:hover, .gx-map .gx-home:hover { color: #fff; background: rgba(30, 36, 54, 0.9); border-color: rgba(255, 255, 255, 0.32); }
.gx-map .gx-home, .gx-map .gx-mystar { color: var(--ink); } /* 오른쪽 위 버튼 글자 밝기를 같게 */
/* 팔로워 초대: 같은 알약에 별빛 색 테두리 */
.gx-map .gx-invite { height: 32px; padding: 0 14px; border: 1px solid rgba(255, 217, 138, 0.45); border-radius: 999px; background: rgba(40, 32, 14, 0.55);
  color: var(--light-soft); font: inherit; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.gx-map .gx-invite:hover { color: #fff; background: rgba(70, 56, 22, 0.75); border-color: var(--light); }
.gx-map .gx-home[hidden] { display: none; }
@media (max-width: 900px) {
  .gx.gx-map:not(.picked) .gx-home { display: none; } /* 휴대폰: 자리가 좁아 무언가를 골랐을 때만 */
  .gx-map .gx-search { z-index: 10; } /* 검색 결과가 왼쪽 "트렌드" 손잡이 위로 */
  /* 시트 아래 버튼 두 개는 나란히 (시트가 낮아 글이 더 보이게) */
  .gx-map .card-foot { display: flex; gap: 8px; padding: 8px 0 14px; }
  .gx-map .card-foot .btn { flex: 1; height: 42px; font-size: 13.5px; }
  .gx-map .card-foot .btn + .btn { margin-top: 0; }
}
.gx-map .lead { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.gx-map .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 24px; }
.gx-map .stat span { display: block; font-size: 11.5px; color: var(--muted); }
.gx-map .stat b { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gx-map .gx-panel h3 { margin: 34px 0 10px; font-size: 12px; letter-spacing: 0.02em; }
.gx-map .gx-panel .rank li { padding: 7px 8px; }
.gx-map .gx-panel .meter { height: 1.5px; opacity: 0.7; }
.gx-panel .who a.handle { font-size: 12px; color: var(--muted); text-decoration: none; }
.gx-panel .who a.handle:hover { color: var(--ink); text-decoration: underline; }
.gx-panel .rk { width: 18px; flex: none; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
:is(.gx-panel, .gx-legend) .fine { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.gx-panel .opt-out { margin-top: 32px; }
.gx-panel .opt-out a { color: var(--ink-2); }
.gx-panel .mine { margin-top: 2px; padding: 0; border: 0; background: none; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  border-bottom: 1px solid var(--hair-2); }
.gx-panel .mine:hover { color: var(--ink); }
/* 탭: 밑줄만 */
.gx-panel .seg.tabs { display: flex; gap: 20px; margin: 0 0 6px; padding: 0; background: none; border-radius: 0; }
.gx-panel .seg.tabs button { flex: none; height: 30px; padding: 0; border-radius: 0; background: none; color: var(--muted); font-size: 13.5px; }
.gx-panel .seg.tabs button:hover { color: var(--ink-2); }
.gx-panel .seg.tabs button[aria-pressed="true"] { background: none; color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
.gx-map .tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gx-map .tiers li { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.gx-map .tiers li.none { opacity: 0.4; }
.gx-map .tiers div { flex: 1; }
.gx-map .tiers b { display: block; font-size: 13.5px; font-weight: 600; }
.gx-map .tiers span { font-size: 12px; color: var(--muted); }
.star-ic { flex: none; display: block; width: 26px; height: 26px; }
.gx-map .unknown-dot.sm { width: 22px; height: 22px; margin: -2px -1px; }
.gx-map .unknown-dot { flex: none; width: 26px; height: 26px; background: radial-gradient(circle, #000 0 3.2px, rgba(200, 210, 230, 0.7) 3.6px 4.6px, transparent 5.2px); } /* 속이 빈 원: 아직 밝혀지지 않은 별 */
.gx-map .tiers li:first-child { align-items: flex-start; }
.star-ic.sm { width: 26px; height: 26px; margin: -4px -3px; }
.star-ic.lg { width: 72px; height: 72px; margin: -10px -8px -10px -14px; }

/* 위 가운데 검색 · 현재 위치 */
.gx-map .gx-search { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 7; width: min(400px, calc(100% - 660px)); }
.gx-map .gx-search .box { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; color: var(--muted);
  background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.2s; }
.gx-map .gx-search .box:focus-within { background: rgba(255, 255, 255, 0.1); color: var(--ink-2); }
.gx-map .gx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.gx-map .gx-search input::placeholder { color: var(--muted); }
.gx-map .gx-search .results { list-style: none; margin: 8px 0 0; padding: 6px; max-height: 360px; overflow: auto; border-radius: 16px;
  background: rgba(6, 9, 16, 0.94); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.gx-map .gx-search .results li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.gx-map .gx-search .results li > div { line-height: 1.4; min-width: 0; }
.gx-map .gx-search .results li:hover { background: rgba(255, 255, 255, 0.06); }
.gx-map .gx-search .results li.empty { color: var(--muted); font-size: 13px; cursor: default; }
.gx-map .gx-search .results li.sec { padding: 10px 10px 2px; font-size: 11.5px; color: var(--muted); cursor: default; }
.gx-map .gx-search .results li.sec:hover, .gx-map .gx-search .results li.hint:hover { background: none; }
.gx-map .gx-search .results li.hint { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); cursor: default; }
.gx-map .gx-search .results li.all { justify-content: center; font-size: 12.5px; color: var(--ink-2); }
.gx-map .gx-search .results b { display: block; font-size: 13.5px; font-weight: 600; }
.gx-map .gx-search .results span:not(.rk) { font-size: 12px; color: var(--muted); }
.gx-map .crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--muted);
  text-shadow: 0 0 8px var(--space); }
.gx-map .crumbs button { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
.gx-map .crumbs button:hover { color: var(--ink); }
.gx-map .crumbs b { color: var(--ink); font-weight: 600; }
.gx-map .crumbs .sep { opacity: 0.5; }
.gx-map .crumb-desc { margin: 8px auto 0; max-width: 520px; font-size: 13px; line-height: 1.6; color: var(--ink-2); text-align: center;
  text-shadow: 0 0 10px #02040a, 0 0 3px #02040a; }
.gx-map .crumb-desc:empty { display: none; }
.gx-map .topic-tags { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
/* 트렌드 카드: 주로 나오는 이야기 */
.gx-panel .points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gx-panel .points li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.gx-panel .points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

/* 오른쪽 확대 버튼 · 아래 분야 필터: 상자 없이 글자·아이콘만 */
.gx.gx-map .gx-zoom { right: var(--pr); top: 50%; bottom: auto; transform: translateY(-50%); gap: 4px; overflow: visible;
  background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gx.gx-map .gx-zoom button { border-radius: 50%; color: var(--ink-2); }
.gx.gx-map .gx-zoom button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.gx.gx-map .gx-toolbar { left: calc(var(--pr) + var(--panel-w) + 90px); right: calc(var(--pr) + 60px); bottom: 24px; display: flex;
  flex-direction: column; align-items: center; gap: 4px; }
.gx-map .gx-note { margin: 0; font-size: 11.5px; color: var(--faint); text-align: center; text-shadow: 0 0 8px #02040a; }
.gx-map .gx-note .plan { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; pointer-events: auto;
  text-decoration: underline dotted rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.gx-map .gx-note .plan:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.8); }
.gx.gx-map.panel-off .gx-toolbar { left: var(--pr); }
/* 아래쪽 분야·안내 글 뒤를 살짝 어둡게 해 은하 이름과 겹쳐도 읽히게 */
@media (min-width: 901px) {
.gx.gx-map .gx-toolbar::before { content: ""; position: absolute; inset: -28px -40px -14px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(2, 4, 10, 0.88), transparent 75%); }
}
/* 테마 칩: 한 줄 슬라이드. 끝이 아니면 가장자리를 흐리게 하고 화살표를 보인다 */
.gx-map .gx-slider { position: relative; width: 100%; max-width: 860px; }
.gx.gx-map .gx-chips { display: flex; flex-wrap: nowrap; gap: 0 22px; padding: 0 50px; overflow-x: auto; scrollbar-width: none;
  --fade-l: 56px; --fade-r: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.gx.gx-map .gx-chips::-webkit-scrollbar { display: none; }
.gx-map .gx-slider.at-start .gx-chips { --fade-l: 0px; padding-left: 0; }
.gx-map .gx-slider.at-end .gx-chips { --fade-r: 0px; }
.gx-map .gx-slider .sl { position: absolute; top: 50%; z-index: 1; width: 36px; height: 36px; margin-top: -18px; padding: 0 0 3px; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%; background: rgba(14, 18, 30, 0.85); color: #fff; font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transition: opacity 0.2s, background 0.15s, border-color 0.15s; }
.gx-map .gx-slider .sl:hover { background: rgba(40, 46, 66, 0.95); border-color: rgba(255, 255, 255, 0.32); }
.gx-map .gx-slider .prev { left: 0; }
.gx-map .gx-slider .next { right: 0; }
.gx-map .gx-slider.at-start .prev, .gx-map .gx-slider.at-end .next { opacity: 0; pointer-events: none; }
.gx.gx-map .chip { flex: none; height: 34px; padding: 0; font-size: 14px; gap: 7px; white-space: nowrap; background: none !important; color: var(--muted); text-shadow: 0 0 8px #02040a; }
.gx.gx-map .chip:hover { color: #fff; }
.gx.gx-map .chip:hover .dot { box-shadow: 0 0 10px currentColor; }
:is(.gx-panel, .gx-legend) .catbar:hover span:first-child { color: #fff; }
.gx.gx-map .chip[aria-pressed="true"] { color: #fff; }
.gx.gx-map .chip[aria-pressed="true"] .dot { box-shadow: 0 0 8px currentColor; }
.gx .gx-panel-open { display: none; position: absolute; top: 76px; left: var(--pr); z-index: 4; height: 36px; padding: 0 2px; border: 0;
  background: none; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; text-shadow: 0 0 8px #02040a; }
.gx .gx-panel-open::after { content: " →"; color: var(--muted); }
.gx.panel-off .gx-panel { display: none; }
.gx.panel-off .gx-panel-open { display: inline-flex; align-items: center; }
.gx-map .gx-drawer-btn { display: none; }
.gx-map .sheet-grip, .gx-map .gx-theme-btn { display: none; } /* 휴대폰에서만 보인다 */
.gx.gx-map .gx-zoom button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; } /* 누르고 있으면 계속 확대 */
/* 관심 테마 고르기 팝업 (휴대폰) */
.gx-picker { width: min(360px, calc(100vw - 32px)); padding: 20px 8px 14px; text-align: left; }
.gx-picker .t { padding: 0 14px 10px; }
.gx-picker ul { list-style: none; margin: 0; padding: 0; max-height: 58vh; overflow: auto; }
.gx-picker li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: none;
  color: var(--ink-2); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.gx-picker li button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.gx-picker .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.gx-picker .nm { flex: 1; }
.gx-picker .n { color: var(--muted); font-size: 13px; }
.gx-picker form { margin: 10px 0 0; padding: 0 14px; }
@media (max-width: 900px) { .gx-map .gx-drawer-btn { display: block; } }

@media (max-width: 900px) {
  .gx-map .gx-search { top: 62px; width: calc(100% - 32px); }
  .gx-map .gx-title { top: 114px; left: 16px; }
  .gx-map .gx-quick { top: 144px; right: 16px; } /* 휴대폰: 성단 제목 아래 줄 (영어 제목이 길어도 겹치지 않게) */
  .gx-map .gx-mystar, .gx-map .gx-home, .gx-map .gx-invite { height: 30px; padding: 0 12px; font-size: 12.5px; }
  .gx-map .gx-quick { gap: 6px; }
  .gx.gx-map .gx-zoom { top: auto; bottom: 12px; transform: none; right: 12px; }
  .gx.gx-map .gx-toolbar { position: static; display: block; padding: 12px 16px 26px; overflow-x: auto; } /* 아래 안내 글 밑에 여백 */
  .gx.gx-map .gx-toolbar { overflow: visible; }
  .gx-map .gx-slider { display: none; } /* 휴대폰은 하단 슬라이드 대신 "관심 테마" 버튼 → 고르는 팝업 */
  .gx-map .gx-theme-btn { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 5; align-items: center; gap: 6px; height: 38px; padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(10, 14, 24, 0.85); color: var(--ink); font: inherit; font-size: 14px;
    max-width: calc(100% - 132px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .gx-map .gx-theme-btn::after { content: "▾"; color: var(--muted); font-size: 12px; }
  .gx.gx-map.sheet-open .gx-theme-btn, .gx.gx-map.drawer-open .gx-theme-btn { display: none; }
  /* 좁은 화면: 카드는 왼쪽 서랍. 손잡이(트렌드)로 열고 닫는다 */
  .gx.gx-map .gx-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 380px); z-index: 8; padding: 64px 18px 0;
    background: rgba(4, 6, 12, 0.985); transform: translateX(-102%); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.5); }
  .gx.gx-map.drawer-open .gx-panel { transform: none; }
  .gx.gx-map.drawer-open .gx3d-labels, .gx.gx-map.drawer-open .gx-title, .gx.gx-map.drawer-open .gx-quick, .gx.gx-map.drawer-open .gx-search { visibility: hidden; }
  .gx.gx-map.panel-off .gx-panel { display: flex; }
  .gx .gx-panel-open { display: none !important; }
  .gx-map .gx-drawer-btn { position: absolute; left: 0; top: 50%; z-index: 9; transform: translateY(-50%); padding: 14px 7px; border: 0;
    border-radius: 0 10px 10px 0; background: rgba(10, 15, 26, 0.85); color: var(--ink); font-size: 12.5px; font-weight: 600;
    writing-mode: vertical-rl; letter-spacing: 0.1em; cursor: pointer; transition: left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .gx.gx-map.drawer-open .gx-drawer-btn { left: min(86vw, 380px); }
  /* 별·은하를 고르면: 아래에서 올라오는 시트 (화면 아래 46%). 손잡이를 누르면 거의 전체로 펼친다 */
  .gx.gx-map.sheet-open .gx-panel { top: auto; right: 0; bottom: 0; width: auto; height: 46%; padding: 0 18px; border-radius: 20px 20px 0 0;
    transform: none; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55); transition: height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .gx.gx-map.sheet-open.sheet-full .gx-panel { height: calc(100% - 56px); }
  .gx.gx-map.sheet-open .gx-drawer-btn { display: none; }
  .gx.gx-map.sheet-open .sheet-grip { position: sticky; top: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: calc(100% + 36px);
    height: 28px; margin: 0 -18px 4px; padding: 0; border: 0; background: rgba(4, 6, 12, 0.985); cursor: pointer; }
  .gx-map .sheet-grip span { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
  .gx-map .crumbs, .gx-map .crumb-desc { display: none !important; } /* 휴대폰은 시트의 뒤로 버튼·설명으로 충분하고, 위 제목 줄과 겹친다 */
}
.gx-panel .legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 13px; color: var(--ink-2); }
.gx-panel .legend li { display: flex; gap: 10px; align-items: center; }
.gx-panel .legend svg { flex: none; }
.gx-panel .pcard { display: flex; gap: 12px; align-items: center; }

@media (max-width: 900px) {
  .gx { height: auto; min-height: 0; overflow: visible; background: none; }
  .gx .gx-canvas { position: relative; height: 72vh; min-height: 460px; overflow: hidden;
    background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(255, 217, 138, 0.05), transparent 70%), var(--space); }
  .gx .gx-toolbar { position: static; padding: 0 16px 10px; flex-wrap: nowrap; overflow-x: auto; }
  .gx .gx-zoom { right: 12px; bottom: 12px; }
  .gx .gx-focusbar { left: 50%; top: 12px; max-width: calc(100% - 24px); }
  .gx .gx-panel { position: static; width: auto; margin: 16px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 8px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gx .quiet .mark { animation: none; opacity: 0.55; }
  .gx .skystar, .gx .halo { animation: none; }
  .gx-loader .orbit { animation-duration: 6s; }
  .gx-loader .dots i { animation: none; opacity: 1; }
  .gx .layer, .gx .node, .gx .edge { transition: none; }
}

/* ---------- 심사 녹화 모드 자막 (?demo=1) ---------- */
.demo-caption { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; width: min(900px, calc(100% - 32px));
  background: rgba(8, 9, 16, 0.94); border: 1px solid rgba(255, 217, 138, 0.4); border-radius: 16px; padding: 14px 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6); font-size: 17px; line-height: 1.5; color: #fff; }
.demo-caption .demo-head { font-size: 12.5px; letter-spacing: 0.08em; color: var(--light); font-weight: 700; margin-bottom: 4px; }
.demo-caption code { font-family: var(--mono); letter-spacing: 0; color: #fff; background: rgba(255, 217, 138, 0.16); padding: 1px 6px; border-radius: 5px; }
.demo-caption.pop { animation: demo-pop 0.35s ease; }
@keyframes demo-pop { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- v2 ---------- */
/* 전체 카드 위 탭: 트렌드 / 테마 은하 / 쓰레더 */
.gx-map .sec-head.ov { align-items: center; margin: 4px 0 18px; }
.gx-map .ov-tabs { display: flex; gap: 22px; }
.gx-map .ov-tabs button { padding: 0 0 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 650;
  letter-spacing: -0.02em; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color 0.15s, box-shadow 0.2s; }
.gx-map .ov-tabs button:hover { color: var(--ink-2); }
.gx-map .ov-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
/* 트렌드 행 아래 아주 얇은 선: 1위 대비 좋아요 */
.gx-map .gx-panel .rank.compact li.trend { position: relative; }
.gx-map .rank.compact li.trend .bar { position: absolute; left: 36px; right: 8px; bottom: 1px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.05); }
.gx-map .rank.compact li.trend .bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 1px;
  background: linear-gradient(90deg, rgba(150, 185, 255, 0.6), rgba(255, 170, 215, 0.6)); }
/* 사람 카드: 핵심 숫자 세 개, 나머지는 더 보기 */
.gx-map .stats.three { grid-template-columns: repeat(3, 1fr); gap: 16px 14px; }
.gx-map .stats.more-stats { margin-top: 16px; }
.gx-map .gx-panel .more.stats-more { margin: 12px 0 0; padding-left: 0; }
/* 카드가 바뀔 때 짧게 떠오르며 들어온다 */
@keyframes gx-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gx-map .gx-panel.swap > :not(.sheet-grip) { animation: gx-swap 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gx-map .gx-panel.swap > :not(.sheet-grip):nth-child(3) { animation-delay: 0.04s; }
/* 범례: 확대 버튼 아래 작은 버튼 → 오른쪽 팝업 */
.gx-map .gx-legend-btn { position: absolute; right: var(--pr); top: calc(50% + 70px); z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.gx-map .gx-legend-btn:hover, .gx-map .gx-legend-btn[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.gx-map .gx-legend { position: absolute; right: calc(var(--pr) + 56px); top: 50%; transform: translateY(-50%); z-index: 7; width: 300px; max-height: min(72vh, 580px);
  overflow: auto; padding: 18px 20px 20px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; background: rgba(8, 11, 20, 0.95);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); scrollbar-width: none; }
.gx-map .gx-legend[hidden] { display: none; }
.gx-map .gx-legend h3 { margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.gx-map .gx-legend h3:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .gx-map .gx-legend-btn { top: auto; bottom: 134px; right: 10px; }
  /* 은하단: 아래에서 올라오는 시트 (손잡이로 높이 조절) */
  .gx-map .gx-legend { top: auto; bottom: 0; left: 0; right: 0; z-index: 11; width: auto; max-height: 56vh; padding: 0 18px 22px; transform: none;
    border: 0; border-radius: 20px 20px 0 0; background: rgba(4, 6, 12, 0.985); box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55); transition: max-height 0.3s; }
  .gx-map .gx-legend.full { max-height: calc(100% - 56px); }
  .gx-map .gx-legend .lg-grip { position: sticky; top: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: calc(100% + 36px);
    height: 28px; margin: 0 -18px 6px; padding: 0; border: 0; background: rgba(4, 6, 12, 0.985); cursor: grab; }
  .gx-map .gx-legend h3.only-narrow { margin-top: 0; }
  .gx-map .dragging { transition: none !important; max-height: none !important; }
  .gx.gx-map.sheet-open .gx-legend-btn, .gx.gx-map.drawer-open .gx-legend-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gx-map .gx-panel.swap > * { animation: none; } }
/* 전체 카드: 세 탭이 같은 높이(화면의 절반 정도)를 쓰고, 넘치는 목록은 그 안에서 스크롤. 위·아래에 더 있으면 그쪽 끝을 흐리게 */
.gx-map .ov-pane { display: flex; flex-direction: column; height: clamp(220px, calc(100vh - 430px), 50vh); }
.gx-map .ov-pane > .seg.tabs { flex: none; }
.gx-map .ov-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; --fade-t: 28px; --fade-b: 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%); }
.gx-map .ov-scroll.at-top { --fade-t: 0px; }
.gx-map .ov-scroll.at-end { --fade-b: 0px; }
.gx-map .ov-scroll::-webkit-scrollbar { width: 4px; }
.gx-map .ov-scroll::-webkit-scrollbar-thumb { border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.gx-map .ov-pane > .fine { flex: none; margin-top: 12px; }
@media (min-width: 901px) {
  /* 왼쪽 패널은 하단 테마 줄 위에서 끝나고, 배경은 아래로 흐리게 사라진다 (테마 이름과 안내 글이 잘 보이게) */
  .gx.gx-map { --dock: 142px; } /* 하단 타임라인 + 테마 줄 + 안내 글 높이 */
  .gx.gx-map .gx-panel { bottom: var(--dock); background: none; }
  .gx.gx-map .gx-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 5, 10, 0.92) 0%, rgba(3, 5, 10, 0.82) 62%, rgba(3, 5, 10, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); }
  .gx.gx-map .gx-toolbar, .gx.gx-map.panel-off .gx-toolbar { left: var(--pr); right: var(--pr); } /* 화면 가운데 정렬 (양쪽 여백 같게) */
  /* 전체 카드는 내용 높이만큼만 (아래쪽 우주가 보이게) */
  .gx.gx-map .gx-panel.ov { bottom: auto; max-height: calc(100% - var(--dock)); padding-bottom: 40px; }
  .gx-map .gx-panel.ov .card-body { flex: none; overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 900px) {
  .gx-map .gx-panel.ov .card-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 32px; -webkit-mask-image: none; mask-image: none; }
  .gx-map .ov-pane { flex: 1; min-height: 0; height: auto; }
}
/* 전체 카드 아래: 별의 단계. 별을 선으로 이어 한 줄로 두고 옆으로 넘긴다 */
.gx-map .tier-strip { flex: none; margin-top: 26px; }
.gx-map .tier-strip .ts-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.gx-map .tier-strip h3 { margin: 0; }
.gx-map .tier-strip .ts-me { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.gx-map .tier-strip .ts-me b { color: var(--light-soft); font-weight: 700; }
.gx-map .tier-strip .ts-me:hover b { color: #fff; text-shadow: 0 0 12px rgba(255, 217, 138, 0.6); }
.gx-map .ts-slider { position: relative; }
.gx-map .ts-row { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; --fade-l: 36px; --fade-r: 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.gx-map .ts-row::-webkit-scrollbar { display: none; }
.gx-map .ts-slider.at-start .ts-row { --fade-l: 0px; }
.gx-map .ts-slider.at-end .ts-row { --fade-r: 0px; }
.gx-map .ts-row li { position: relative; flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gx-map .ts-row li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 18px); width: calc(100% - 36px); height: 1px;
  background: rgba(255, 255, 255, 0.12); }
.gx-map .ts-row .star-ic, .gx-map .ts-row .unknown-dot { width: 34px; height: 34px; margin-bottom: 6px; }
.gx-map .ts-row b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.gx-map .ts-row span:not(.unknown-dot) { font-size: 11px; color: var(--muted); white-space: nowrap; }
.gx-map .ts-row .n { margin-top: 2px; color: var(--ink-2) !important; font-variant-numeric: tabular-nums; }
.gx-map .ts-row li.none { opacity: 0.4; }
/* 내 단계: 별 둘레에 별빛 고리, 이름도 별빛 색 */
.gx-map .ts-row li.me { opacity: 1; }
.gx-map .ts-row li.me :is(.star-ic, .unknown-dot) { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 217, 138, 0.75), 0 0 16px rgba(255, 217, 138, 0.35); }
.gx-map .ts-row li.me b { color: var(--light-soft); }
.gx-map .ts-slider .sl { position: absolute; top: 4px; z-index: 1; width: 28px; height: 28px; padding: 0 0 2px; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%; background: rgba(14, 18, 30, 0.9); color: #fff; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; transition: opacity 0.2s, background 0.15s; }
.gx-map .ts-slider .sl:hover { background: rgba(40, 46, 66, 0.95); }
.gx-map .ts-slider .prev { left: -4px; }
.gx-map .ts-slider .next { right: -4px; }
.gx-map .ts-slider.at-start .prev, .gx-map .ts-slider.at-end .next { opacity: 0; pointer-events: none; }
/* 범례 팝업의 별의 단계는 휴대폰에서만 (데스크톱은 전체 카드 아래에 늘 있다) */
@media (min-width: 901px) { .gx-map .gx-legend .only-narrow { display: none; } }
/* 은하 카드: 이 은하에서 뜨는 이야기 */
.gx-map .gx-panel ol.hot { display: grid; gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.gx-map ol.hot li { display: flex; gap: 12px; }
.gx-map ol.hot .rk { padding-top: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.gx-map ol.hot li:first-child .rk { color: var(--ink); }
.gx-map ol.hot b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.gx-map ol.hot p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.gx-map ol.hot .meta { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 성단 제목 옆 "미확인 N명": 누를 수 있는 글자. 마우스를 올리면 오른쪽에 설명, 누르면 반짝 */
.gx-map .gx-title .sep { color: var(--muted); }
.gx-map .gx-title .unk { position: relative; padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; text-shadow: inherit; cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, 0.4); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.15s, text-decoration-color 0.15s; }
.gx-map .gx-title .unk:hover, .gx-map .gx-title .unk[aria-expanded="true"] { color: var(--ink); text-decoration-color: rgba(255, 255, 255, 0.75); }
.gx-map .gx-title .unk::after { content: ""; position: absolute; inset: -5px -10px; border: 1px solid rgba(190, 210, 255, 0.7); border-radius: 999px; opacity: 0; pointer-events: none; }
.gx-map .gx-title .unk.ping { animation: unk-glow 0.9s ease-out; }
.gx-map .gx-title .unk.ping::after { animation: unk-ring 0.9s ease-out; }
@keyframes unk-glow { 0% { color: #fff; text-shadow: 0 0 14px rgba(170, 200, 255, 0.95), 0 0 4px #02040a; } }
@keyframes unk-ring { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.3); } }
.gx-map .gx-title.unk-open { z-index: 12; }
.gx-map .gx-unk-box { position: absolute; left: calc(100% + 14px); top: -12px; width: 300px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; background: rgba(8, 11, 20, 0.96); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); text-shadow: none; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-2); animation: gx-swap 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gx-map .gx-unk-box[hidden] { display: none; }
.gx-map .gx-unk-box .t { display: flex; align-items: center; gap: 6px; margin: 0 0 0 -4px; font-size: 14px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.gx-map .gx-unk-box .d { margin: 2px 0 14px; color: var(--muted); }
.gx-map .gx-unk-box ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.gx-map .gx-unk-box li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.gx-map .gx-unk-box li b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.gx-map .gx-unk-box li span { font-size: 12px; color: var(--muted); }
.gx-map .gx-unk-box .n { font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-map .gx-unk-box li.alpha .n { font-family: "Times New Roman", serif; font-style: italic; font-size: 15px; } /* 수학 기호 α */
.gx-map .gx-unk-box .f { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .gx-map .gx-unk-box { left: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); }
}
/* 은하단: 확대 버튼 아래 버튼을 누르면 바로 아래로 펼쳐진다 (데스크톱). 확대 버튼 묶음을 조금 올려 펼칠 자리를 둔다 */
.gx-map .gx-legend-btn svg { width: 14px; height: 14px; transition: transform 0.2s; }
.gx-map .gx-legend-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
:is(.gx-panel, .gx-legend) .catbar .gals { grid-column: 1 / -1; margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.gx-map .gx-legend .fine.intro { margin: 0 0 14px; }
@media (min-width: 901px) {
  /* 확대 · 축소 · 맞추기 · 은하단을 한 자리에. 테두리 없이 배경만 살짝 밝게 해 우주와 구분한다. 은하단 목록은 바로 아래로 펼쳐진다 */
  .gx-map .gx-tools { position: absolute; right: var(--pr); top: 40%; transform: translateY(-50%); z-index: 7; display: flex; flex-direction: column;
    align-items: center; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .gx.gx-map .gx-tools .gx-zoom { position: static; top: auto; right: auto; transform: none; }
  .gx-map .gx-tools .gx-cluster { position: relative; margin-top: 6px; }
  .gx-map .gx-cluster .gx-legend-btn { position: static; height: 30px; padding: 0 6px 0 10px; }
  /* 펼친 은하단: 상자 없이 오른쪽에서 왼쪽으로 옅어지는 그림자 위에 (왼쪽 패널과 같은 방식). 넓게 써서 줄이 바뀌지 않게 */
  .gx-map .gx-cluster .gx-legend { position: absolute; top: calc(100% + 10px); right: -6px; transform: none; width: 560px; padding: 18px 6px 22px 120px;
    max-height: calc(60vh - 98px - var(--dock, 104px)); border: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(270deg, rgba(3, 5, 10, 0.9) 0%, rgba(3, 5, 10, 0.8) 58%, rgba(3, 5, 10, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
    animation: gx-drop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top right; }
  .gx-map .gx-cluster .gx-legend .fine { white-space: nowrap; }
  .gx-map .gx-cluster .catbars { gap: 14px; }
  .gx-map .gx-cluster .catbar { grid-template-columns: 112px 1fr 40px; padding: 2px 0; }
  .gx-map .gx-cluster .catbar > span:first-child { font-weight: 600; color: var(--ink); }
}
@keyframes gx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .gx-map .gx-tools, .gx-map .gx-cluster { display: contents; } }
@media (prefers-reduced-motion: reduce) { .gx-map .gx-cluster .gx-legend { animation: none; } }
@media (prefers-reduced-motion: reduce) { .gx-map .gx-title .unk.ping, .gx-map .gx-title .unk.ping::after, .gx-map .gx-unk-box { animation: none; } }

/* 위쪽 메뉴: 로그인 정보는 오른쪽 끝 */
.uni-nav .userbox { margin-left: auto; }
/* 관심사 지도(데스크톱): 화면이 넓어지면 왼쪽 카드·오른쪽 버튼이 가운데 1120px 안에 갇히지 않고 양옆으로 붙는다 */
@media (min-width: 901px) {
  .universe.map-mode, .universe.map-mode .gx.gx-map { --pr: clamp(24px, 3vw, 72px); }
  .universe.map-mode .uni-nav .wrap { max-width: none; padding: 0 var(--pr); }
  .gx-map .gx-slider { max-width: min(1100px, 100%); }
}
@media (max-width: 900px) {
  .uni-nav .brand { white-space: nowrap; } .uni-nav .userbox .who { display: none; } /* 좁은 화면: 이름은 숨기고 로그아웃만 */
}

.gx-map .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; display: inline-flex; align-items: center; justify-content: center; } /* 가상 사용자: 팔로우 버튼 대신 */

/* 은하 타임라인: 하단 테마 줄 위. 재생 버튼 + 끌어서 보는 막대 + 지금 몇 번째 별인지 */
.gx-map .gx-timeline { display: flex; align-items: center; gap: 12px; width: min(620px, 100%); margin: 0 auto 8px; pointer-events: auto; }
.gx-map .gx-timeline[hidden] { display: none; }
.gx-map .gx-timeline .tl-play { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff;
  font: inherit; font-size: 11px; cursor: pointer; transition: background 0.15s; }
.gx-map .gx-timeline .tl-play:hover { background: rgba(255, 255, 255, 0.2); }
.gx-map .gx-timeline .tl-range { flex: 1; min-width: 0; accent-color: var(--light); cursor: pointer; }
.gx-map .gx-timeline .tl-info { flex: none; min-width: 168px; font-size: 12px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px #02040a; }
@media (max-width: 900px) { .gx-map .gx-timeline { padding: 0 2px; } .gx-map .gx-timeline .tl-info { min-width: 0; } }