/* 게스트 허브 v2 (guesthub-v2.html) — 지하철 안내 표지 체계.
   짙은 표지 띠 · 승강장 회색 바탕 · 노선 색 = 포지션 색, 칸 코드 = 역 번호 표식,
   제안 · 연결마다 '노선 띠'(받음 ● — 지금 ◉ — 정리 ○)로 남은 시간을 보여 준다.
   하늘(4호선) = 수락 전에 보이는 제안, 보라(5호선) = 수락한 선수에게만 보이는 안내.
   방향 기록: .impeccable/surfaces/public-guesthub-v2-html.md */

:root {
    --gh-ground: #e9ecef;
    --gh-sheet: #f3f4f6;
    --gh-panel: #ffffff;
    --gh-panel-2: #f6f7f8;
    --gh-ink: #1b1f24;
    --gh-ink-2: #4a525c;
    --gh-ink-3: #636b75;
    --gh-rule: #d3d7dc;
    --gh-rule-strong: #aab1b9;
    --gh-band: #1b1f24;
    --gh-band-text: #ffffff;
    --gh-band-sub: #b9c0c8;
    --gh-map: #1f252b;
    --gh-map-line: rgba(255, 255, 255, 0.24);
    --gh-hover: #eef0f2;
    --gh-backdrop: rgba(12, 14, 17, 0.62);

    /* 노선 색: 칠하는 색 / 글자색(흰 바탕 4.5:1 이상) / 옅은 바탕 */
    --line-fw: #d31145; --line-fw-text: #c20e3e; --line-fw-soft: #fbe7ec;
    --line-mf: #00a84d; --line-mf-text: #007a38; --line-mf-soft: #e3f5ea;
    --line-df: #0052a4; --line-df-text: #0052a4; --line-df-soft: #e4ecf6;
    --line-gk: #ef7c1c; --line-gk-text: #a64f08; --line-gk-soft: #fdeedf;
    --line-offer: #00a5de; --line-offer-text: #006e99; --line-offer-soft: #e2f4fb;
    --line-guide: #996cac; --line-guide-text: #6f4482; --line-guide-soft: #f2ecf5;
    --line-guide-fill: #6f4482;
    --gh-ok: #13804f; --gh-ok-text: #0f6b42; --gh-ok-soft: #e4f2ea;
    --gh-warn-text: #8a4a06; --gh-warn-soft: #fdf1e2;
    --gh-danger: #c20e3e;

    --gh-primary-bg: #1b1f24;
    --gh-primary-hover: #000000;
    --gh-primary-text: #ffffff;
    --gh-focus: #0052a4;

    --gh-r-s: 6px;
    --gh-r-m: 8px;
    --gh-r-l: 12px;

    /* 목록 색: 용병 리스트 = 노랑, 팀 리스트 = 청록 (탭 · 목록 위 줄 · 공고 올리기 단추만) */
    --theme-player: #f2b000; --theme-player-ink: #1b1f24; --theme-player-text: #7a5600;
    --theme-team: #0b7a7a; --theme-team-ink: #ffffff; --theme-team-text: #0b6e6e;

    /* navbar · 바닥글이 읽는 사이트 공통 이름 */
    --primary-color: #0052a4;
    --bg-color: #e9ecef;
    --card-bg: #ffffff;
    --border-color: #d3d7dc;
    --text-main: #1b1f24;
    --text-sub: #4a525c;
    --hover-bg: #eef0f2;
    --danger-color: #c20e3e;
}

[data-theme="dark"] {
    --gh-ground: #111417;
    --gh-sheet: #15191d;
    --gh-panel: #1c2126;
    --gh-panel-2: #232930;
    --gh-ink: #f1f3f5;
    --gh-ink-2: #b4bcc5;
    --gh-ink-3: #8e98a3;
    --gh-rule: #343c45;
    --gh-rule-strong: #4f5965;
    --gh-band: #262c33;
    --gh-band-text: #ffffff;
    --gh-band-sub: #b4bcc5;
    --gh-map: #262d34;
    --gh-map-line: rgba(255, 255, 255, 0.2);
    --gh-hover: #262c33;
    --gh-backdrop: rgba(0, 0, 0, 0.66);

    --line-fw: #ff4f78; --line-fw-text: #ff7d9b; --line-fw-soft: rgba(255, 79, 120, 0.14);
    --line-mf: #2fcf7a; --line-mf-text: #5fdc98; --line-mf-soft: rgba(47, 207, 122, 0.13);
    --line-df: #4f8dff; --line-df-text: #8bb3ff; --line-df-soft: rgba(79, 141, 255, 0.15);
    --line-gk: #ff9a45; --line-gk-text: #ffb276; --line-gk-soft: rgba(255, 154, 69, 0.14);
    --line-offer: #36c3f2; --line-offer-text: #7dd8f6; --line-offer-soft: rgba(54, 195, 242, 0.13);
    --line-guide: #c39bd6; --line-guide-text: #d6b8e3; --line-guide-soft: rgba(195, 155, 214, 0.15);
    --line-guide-fill: #c39bd6;
    --gh-ok: #4cc38a; --gh-ok-text: #74d3a5; --gh-ok-soft: rgba(76, 195, 138, 0.13);
    --gh-warn-text: #ffc58f; --gh-warn-soft: rgba(255, 154, 69, 0.13);
    --gh-danger: #ff7d9b;

    --gh-primary-bg: #f1f3f5;
    --gh-primary-hover: #ffffff;
    --gh-primary-text: #111417;
    --gh-focus: #8bb3ff;

    --theme-player: #ffc933; --theme-player-ink: #15191d; --theme-player-text: #ffd76a;
    --theme-team: #3cc7c4; --theme-team-ink: #0b1414; --theme-team-text: #6fdcd9;

    --primary-color: #8bb3ff;
    --bg-color: #111417;
    --card-bg: #1c2126;
    --border-color: #343c45;
    --text-main: #f1f3f5;
    --text-sub: #b4bcc5;
    --hover-bg: #262c33;
    --danger-color: #ff7d9b;
}

/* 포지션 그룹 → 노선 */
.pos-fw { --line: var(--line-fw); --line-text: var(--line-fw-text); --line-soft: var(--line-fw-soft); }
.pos-mf { --line: var(--line-mf); --line-text: var(--line-mf-text); --line-soft: var(--line-mf-soft); }
.pos-df { --line: var(--line-df); --line-text: var(--line-df-text); --line-soft: var(--line-df-soft); }
.pos-gk { --line: var(--line-gk); --line-text: var(--line-gk-text); --line-soft: var(--line-gk-soft); }

/* ---------- 바탕 ---------- */

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background: var(--gh-ground);
    color: var(--gh-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
/* 한국어는 낱말 안에서 끊지 않는다(숫자와 단위가 갈라지지 않게). 일본어는 낱말 사이 띄어쓰기가 없어 기본 줄바꿈 */
html:lang(ko) body { word-break: keep-all; }
body.modal-open { overflow: hidden; touch-action: none; }
::selection { background: color-mix(in srgb, var(--gh-ink) 22%, transparent); }
input, textarea { caret-color: var(--gh-ink); }
:focus-visible { outline: 2px solid var(--gh-focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
.hidden { display: none !important; }
.ghv2-hidden { display: none !important; }
.gh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { max-width: 1120px; margin: 0 auto; padding: 20px 16px 96px; }
.page-shell { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 표지 띠 (페이지 머리) ---------- */

.gh-sign { border-radius: var(--gh-r-l); overflow: hidden; background: var(--gh-band); color: var(--gh-band-text); }
.gh-sign-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 20px 20px 16px; }
.gh-sign-title h1 { margin: 0; font-size: 1.728rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.gh-sign-title p { margin: 4px 0 0; font-size: 0.833rem; color: var(--gh-band-sub); }
.gh-sign-stripe { display: grid; grid-template-columns: repeat(4, 1fr); height: 5px; }
.gh-sign-stripe i:nth-child(1) { background: var(--line-fw); }
.gh-sign-stripe i:nth-child(2) { background: var(--line-mf); }
.gh-sign-stripe i:nth-child(3) { background: var(--line-df); }
.gh-sign-stripe i:nth-child(4) { background: var(--line-gk); }

.guesthub-guide-ribbon { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--gh-r-s); border: 1px solid rgba(255, 255, 255, 0.28); color: var(--gh-band-text); font-size: 0.833rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.guesthub-guide-ribbon:hover { background: rgba(255, 255, 255, 0.1); }

/* 시범 줄: 표지 띠 아래 칸 */
.ghv2-pilot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.833rem; color: var(--gh-band-sub); }
.ghv2-pilot:empty { display: none; }
.ghv2-pilot-badge { padding: 1px 8px; border-radius: 999px; background: #ffffff; color: #15191d; font-size: 0.694rem; font-weight: 800; }
.ghv2-pilot-text { flex: 1 1 280px; min-width: 0; line-height: 1.45; }
.ghv2-pilot-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ghv2-pilot .ghv2-link-btn { min-height: 34px; border-color: rgba(255, 255, 255, 0.28); background: transparent; color: var(--gh-band-text); }
.ghv2-pilot .ghv2-link-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

/* ---------- 처음 화면: 두 갈래 ---------- */

.intro-card { display: block; }
.intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* 두 카드 높이를 같게: 칸이 늘어나면 단추도 같이 */
.intro-option-shell { display: flex; min-width: 0; }
.intro-option { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--gh-r-l); background: var(--gh-panel); color: var(--gh-ink); text-align: left; cursor: pointer; transition: background-color 0.18s ease; }
.intro-option.seeking { --intro-theme: var(--theme-player); }
.intro-option.recruiting { --intro-theme: var(--theme-team); }
.intro-option:hover { background: var(--gh-hover); }
.intro-option:disabled { cursor: default; opacity: 0.6; }
/* 그림 칸: 짙은 표지 바탕 + 목록 색 원(용병 노랑 · 팀 청록) + 투명 배경 3D 그림(10-28 새로 받음, 원본은 .impeccable/review/guide-capture/art) */
.intro-art { position: relative; display: block; flex: 0 0 auto; height: 210px; overflow: hidden; background: var(--gh-map); border-bottom: 5px solid var(--intro-theme); }
.intro-art::before { content: ""; position: absolute; top: -90px; left: calc(50% - 30px); width: 260px; height: 260px; border-radius: 50%; background: var(--intro-theme); transition: transform 0.35s ease; }
.intro-art img { position: absolute; left: 50%; bottom: 8px; width: auto; height: 190px; transform: translateX(-50%); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.35)); transition: transform 0.35s ease; }
.intro-option:hover .intro-art::before { transform: scale(1.12); }
.intro-option:hover .intro-art img { transform: translateX(-50%) translateY(-4px); }
.intro-content-bx { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px 20px; }
.intro-option-title { margin: 0; font-size: 1.44rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.intro-option-desc { margin: 0; font-size: 0.833rem; line-height: 1.55; color: var(--gh-ink-2); white-space: pre-line; }

/* ---------- 목록 화면 ---------- */

.browse-shell { display: flex; flex-direction: column; gap: 12px; }
.browse-top-row { display: flex; align-items: stretch; gap: 8px; }
.back-entry-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); font-size: 0.833rem; font-weight: 700; cursor: pointer; }
.back-entry-btn:hover { border-color: var(--gh-ink); }
.browse-top-actions { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 3px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
.jump-mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--gh-r-s); background: transparent; color: var(--gh-ink-2); font-size: 1rem; font-weight: 700; cursor: pointer; }
.jump-mode-btn:hover { color: var(--gh-ink); background: var(--gh-hover); }
.jump-mode-btn[aria-current="true"] { background: var(--gh-primary-bg); color: var(--gh-primary-text); font-weight: 800; cursor: default; }
.jump-mode-btn .gh-tab-n { font-size: 0.833rem; font-weight: 800; opacity: 0.75; }
.jump-mode-btn { white-space: nowrap; }
.jump-mode-btn svg { flex: 0 0 auto; }
#gh-jump-seeking svg { color: var(--theme-player-text); }
#gh-jump-recruiting svg { color: var(--theme-team-text); }
#gh-jump-seeking[aria-current="true"] { background: var(--theme-player); color: var(--theme-player-ink); }
#gh-jump-recruiting[aria-current="true"] { background: var(--theme-team); color: var(--theme-team-ink); }
#gh-jump-seeking[aria-current="true"] svg, #gh-jump-recruiting[aria-current="true"] svg { color: inherit; }
.browse-shell.seeking-mode { --theme: var(--theme-player); --theme-ink: var(--theme-player-ink); }
.browse-shell.recruiting-mode { --theme: var(--theme-team); --theme-ink: var(--theme-team-ink); }

/* 내 제안 현황판 */
/* 내 현황: 역할마다 카드 한 장 — '나'(노랑) · '우리 팀'(청록). 안 된 일은 세지 않고, 할 일이 없으면 카드도 없다 */
.ghv2-strip { border-radius: 0; background: transparent; overflow: visible; }
.gh-cards { display: grid; gap: 12px; align-items: start; }
@media (min-width: 900px) { .gh-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gh-card { border-radius: var(--gh-r-l); background: var(--gh-panel); overflow: hidden; border-top: 4px solid var(--card-theme); }
.gh-card.is-me { --card-theme: var(--theme-player); --card-text: var(--theme-player-text); }
.gh-card.is-team { --card-theme: var(--theme-team); --card-text: var(--theme-team-text); }
.gh-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; }
.gh-card.is-me .gh-card-head { padding: 8px 16px 6px; }
.gh-card-headtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gh-card-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.833rem; font-weight: 800; color: var(--card-text); }
.gh-card-title { font-size: 1rem; font-weight: 800; color: var(--gh-ink); }
.gh-card-sub { font-size: 0.833rem; color: var(--gh-ink-2); }
.gh-card-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px 8px 16px; border: 0; border-top: 1px solid var(--gh-rule); background: transparent; text-align: left; cursor: pointer; font-size: 0.833rem; color: var(--gh-ink-2); }
.gh-card-row:hover { background: var(--gh-hover); }
.gh-card-row b { font-size: 1rem; font-weight: 800; color: var(--gh-ink); }
.gh-card-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gh-card-side { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--gh-ink-2); white-space: nowrap; }
.gh-card-row.is-ok { background: var(--gh-ok-soft); }
.gh-card-row.is-ok > .gh-card-main > svg, .gh-card-row.is-ok b { color: var(--gh-ok-text); }
/* 답이 필요한 것(새 제안 · 새 지원): 짙은 표지로 뒤집는다 */
.gh-card-row.is-action { background: var(--gh-band); color: var(--gh-band-sub); }
.gh-card-row.is-action:hover { background: color-mix(in srgb, var(--gh-band) 88%, #ffffff); }
.gh-card-row.is-action b { color: var(--gh-band-text); }
.gh-card-row.is-action .gh-card-side { padding: 3px 10px; border-radius: 999px; background: #ffffff; color: #15191d; }
.gh-card-row.is-action .gh-station { background: #ffffff; }
/* 다크에서는 짙은 띠가 바탕과 비슷하므로 밝게 뒤집는다 */
[data-theme="dark"] .gh-card-row.is-action { background: #f1f3f5; color: #4a525c; }
[data-theme="dark"] .gh-card-row.is-action:hover { background: #ffffff; }
[data-theme="dark"] .gh-card-row.is-action b { color: #111417; }
[data-theme="dark"] .gh-card-row.is-action .gh-card-side { background: #111417; color: #ffffff; }
[data-theme="dark"] .gh-card-row.is-action .pos-fw { --line: #d31145; --line-text: #c20e3e; }
[data-theme="dark"] .gh-card-row.is-action .pos-mf { --line: #00a84d; --line-text: #007a38; }
[data-theme="dark"] .gh-card-row.is-action .pos-df { --line: #0052a4; --line-text: #0052a4; }
[data-theme="dark"] .gh-card-row.is-action .pos-gk { --line: #ef7c1c; --line-text: #a64f08; }
.gh-joined-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--gh-panel); color: var(--gh-ok-text); font-weight: 800; }

/* 필터 */
.control-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--gh-r-l); background: var(--gh-panel); }
.filter-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.833rem; font-weight: 800; }
.gh-filter-rail { display: flex; flex-direction: column; gap: 12px; }
/* PC 는 글자 폭만큼 왼쪽부터 놓는다(꽉 채우면 눈이 좌우로 흩어짐). 휴대폰은 아래 768px 에서 칸을 나눠 다 펼친다 */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
#gh-recruiting-formation-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 769px) { .preset-row .preset-btn, #gh-recruiting-formation-filter-row .preset-btn { min-width: 64px; padding: 0 18px; } }
#gh-recruiting-formation-filter-row.hidden { display: none !important; }

.preset-btn, .expiry-btn, .formation-btn { min-height: 40px; padding: 0 10px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-s); background: var(--gh-panel); color: var(--gh-ink); font-size: 0.833rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.preset-btn:hover, .expiry-btn:hover, .formation-btn:hover { border-color: var(--gh-ink); }
.expiry-btn.active, .formation-btn.active { border-color: var(--gh-primary-bg); background: var(--gh-primary-bg); color: var(--gh-primary-text); font-weight: 800; }
/* 묶음 버튼은 여러 개가 함께 켜질 수 있어 칠하지 않고 굵은 테두리로 */
.preset-btn.active { border: 2px solid var(--gh-ink); color: var(--gh-ink); font-weight: 800; }

/* FA만 스위치 */
.fa-only-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.fa-only-toggle.hidden { display: none; }
.fa-only-toggle-knob { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--gh-rule-strong); transition: background-color 0.18s ease; }
.fa-only-toggle-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s ease; }
.fa-only-toggle.active .fa-only-toggle-knob { background: var(--gh-primary-bg); }
.fa-only-toggle.active .fa-only-toggle-knob::after { transform: translateX(16px); background: var(--gh-primary-text); }
.fa-only-toggle-label { font-size: 0.833rem; font-weight: 800; color: var(--gh-ink-2); }

/* ---------- 역 번호 표식 (포지션 · 칸) ---------- */

.position-chip, .compact-chip, .ghv2-chip, .gh-station {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 24px; min-width: 34px; padding: 0 8px;
    border: 2px solid var(--line, var(--gh-rule-strong)); border-radius: 999px;
    background: var(--gh-panel); color: var(--line-text, var(--gh-ink-2));
    font-size: 0.694rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
}
.gh-station.is-m, .ghv2-chip { height: 28px; padding: 0 10px; font-size: 0.833rem; }
.gh-station.is-l { height: 44px; min-width: 64px; padding: 0 14px; border-width: 3px; font-size: 1.2rem; }
/* 받은 자리: 노선 색으로 칠한 역 표식 */
.gh-station.is-done, .position-chip.is-done { background: var(--line); color: #ffffff; }
[data-theme="dark"] .gh-station.is-done, [data-theme="dark"] .position-chip.is-done { color: #0b0d10; }
.selected-position-list { display: flex; flex-wrap: wrap; gap: 6px; }

.filter-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border: 2px dashed var(--gh-rule-strong); border-radius: 999px; background: transparent; color: var(--gh-ink-3); font-size: 0.833rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; }
.filter-btn.active { border-style: solid; border-color: var(--line); background: var(--gh-panel); color: var(--line-text); }
.filter-btn:hover { border-color: var(--line); }
.filter-count-badge { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--line-soft, var(--gh-panel-2)); color: var(--line-text, var(--gh-ink-2)); font-size: 0.694rem; font-weight: 800; text-align: center; }
.filter-count-badge.is-zero { background: var(--gh-panel-2); color: var(--gh-ink-3); }

/* ---------- 목록 ---------- */

.list-card { border-radius: var(--gh-r-l); background: var(--gh-panel); overflow: hidden; }
.browse-shell .list-card { border-top: 5px solid var(--theme, var(--gh-ink)); }
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--gh-rule); }
.list-title { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.list-subtitle { font-size: 0.833rem; color: var(--gh-ink-2); }
.list-subtitle:empty { display: none; }
.list-header-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cooldown-text { font-size: 0.833rem; color: var(--gh-ink-2); }
.cooldown-text:empty { display: none; }
.list-stack { display: flex; flex-direction: column; }
.empty-state { padding: 40px 16px; text-align: center; font-size: 1rem; color: var(--gh-ink-2); }
.gh-skel-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 0.8fr) 96px; align-items: center; gap: 16px; padding: 18px 16px; }
.gh-skel-row + .gh-skel-row { border-top: 1px solid var(--gh-rule); }
.gh-skel-row i, .gh-skel-row b { display: block; height: 12px; border-radius: 6px; background: var(--gh-panel-2); animation: gh-skel 1.4s ease-in-out infinite alternate; }
.gh-skel-row i { height: 36px; border-radius: 50%; }
.gh-skel-row b:last-child { height: 36px; border-radius: var(--gh-r-s); }
@keyframes gh-skel { from { opacity: 1; } to { opacity: 0.45; } }

/* 한 줄 = 한 공고: 누구 | 포지션 | 남은 시간 | 할 일 */
.post-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(140px, 200px) 236px;
    grid-template-areas: "who pos time act";
    align-items: center; gap: 8px 20px;
    padding: 14px 16px; cursor: pointer; transition: background-color 0.15s ease;
}
.post-card + .post-card { border-top: 1px solid var(--gh-rule); }
.post-card:hover { background: var(--gh-hover); }
.post-card.is-mine { background: var(--gh-panel-2); }
.gh-row-who { grid-area: who; display: flex; align-items: center; gap: 12px; min-width: 0; }
.gh-row-pos { grid-area: pos; min-width: 0; }
.gh-row-time { grid-area: time; min-width: 0; }
.gh-row-act { grid-area: act; display: flex; justify-content: flex-end; }
.gh-row-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gh-row-name > a, .gh-row-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scout-card-name, .user-name, .team-name { font-size: 1rem; font-weight: 800; color: var(--gh-ink); text-decoration: none; }
.guesthub-profile-link:hover { text-decoration: underline; }
.gh-row-desc { margin: 0; font-size: 0.833rem; color: var(--gh-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-row-desc.is-empty { color: var(--gh-ink-3); }
.gh-mine-tag { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--gh-primary-bg); color: var(--gh-primary-text); font-size: 0.694rem; font-weight: 800; }
.gh-formation-tag { flex: 0 0 auto; font-size: 0.833rem; font-weight: 700; color: var(--gh-ink-2); }
/* 팀 줄: 사진 대신 작은 필드(뽑는 칸만 흰 점, 찬 칸은 칠함, 팀원 칸은 흐린 점). 예전 공고는 팀 아이콘 네모 */
.gh-team-thumb { position: relative; flex: 0 0 auto; width: 52px; height: 47px; border-radius: var(--gh-r-s); background: var(--gh-map); overflow: hidden; }
.gh-team-thumb::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--gh-map-line); border-radius: 2px; }
.gh-team-thumb::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1px solid var(--gh-map-line); }
.gh-team-thumb.is-plain { display: inline-flex; align-items: center; justify-content: center; color: #c9d0d7; }
.gh-team-thumb.is-plain::before, .gh-team-thumb.is-plain::after { display: none; }
.gh-thumb-slot { position: absolute; z-index: 1; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.gh-thumb-slot.is-open { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #ffffff; box-shadow: 0 0 0 2px var(--line); }
.gh-thumb-slot.is-filled { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--line); }
.gh-open-count { align-self: center; margin-left: 2px; font-size: 0.833rem; font-weight: 800; color: var(--gh-ink); white-space: nowrap; }

.avatar-box, .recruiting-owner-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--gh-panel-2); display: flex; align-items: center; justify-content: center; color: var(--gh-ink-3); }
.avatar-box img, .recruiting-owner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.833rem; }
.current-team-meta, .compact-team-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.team-badge, .compact-team-badge { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--gh-ink-3); font-size: 0.694rem; }
.team-badge img, .compact-team-badge img { width: 100%; height: 100%; object-fit: contain; }
.team-badge.fa, .compact-team-badge.fa { width: auto; padding: 0 5px; border: 1px solid var(--gh-rule-strong); border-radius: 4px; font-size: 0.694rem; font-weight: 800; color: var(--gh-ink-2); }
.team-meta-text { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.833rem; color: var(--gh-ink-2); }

/* ---------- 노선 띠 (서명 요소) ---------- */

.gh-route { --route-line: var(--line, var(--gh-ink)); --p: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gh-route-track { position: relative; height: 14px; }
.gh-route-rail { position: absolute; left: 5px; right: 5px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
    background: linear-gradient(to right, var(--route-line) 0 calc(var(--p) * 100%), color-mix(in srgb, var(--route-line) 26%, transparent) calc(var(--p) * 100%) 100%); }
.gh-route-stop { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-sizing: border-box; }
.gh-route-stop.is-from { left: 5px; background: var(--route-line); }
.gh-route-stop.is-to { left: calc(100% - 5px); border: 2px solid color-mix(in srgb, var(--route-line) 55%, var(--gh-rule-strong)); background: var(--gh-panel); }
.gh-route-stop.is-now { left: calc(5px + (100% - 10px) * var(--p)); width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--route-line); background: var(--gh-panel); z-index: 1; }
.gh-route-stop.is-now::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--route-line); opacity: 0; animation: gh-route-blink 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes gh-route-blink { 0% { transform: scale(0.6); opacity: 0.7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
/* 글자가 점을 따라가되 띠 밖으로 나가지 않게: 왼쪽 p% + 자기 폭의 -p% */
.gh-route-labels { position: relative; height: 1.1rem; font-size: 0.833rem; white-space: nowrap; }
.gh-route-labels strong { position: absolute; top: 0; left: calc(5px + (100% - 10px) * var(--p)); transform: translateX(calc(var(--p) * -100%)); color: var(--line-text, var(--gh-ink)); font-weight: 800; }
.gh-route.is-quiet .gh-route-stop.is-now::after { display: none; }
.gh-route.is-done { --route-line: var(--gh-rule-strong); }
.gh-route.is-arrived .gh-route-stop.is-to { border-color: var(--route-line); background: var(--route-line); }
.gh-route.is-done .gh-route-labels strong { color: var(--gh-ink-2); }
.gh-route.is-small .gh-route-track { height: 10px; }
.gh-route.is-small .gh-route-rail { height: 3px; margin-top: -1.5px; }
.gh-route.is-small .gh-route-stop { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.gh-route.is-small .gh-route-stop.is-now { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-width: 2px; }

/* ---------- 버튼 ---------- */

.btn-primary, .browse-action-btn, .ghv2-primary, .ghv2-accept-btn, .ghv2-offer-btn, #gh-detail-dm {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--gh-r-s);
    background: var(--gh-primary-bg); color: var(--gh-primary-text);
    font-size: 1rem; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn-primary:hover, .browse-action-btn:hover, .ghv2-primary:hover:not(:disabled), .ghv2-accept-btn:hover, .ghv2-offer-btn:hover, #gh-detail-dm:hover { background: var(--gh-primary-hover); }
.btn-primary:disabled, .ghv2-primary:disabled, .ghv2-offer-btn:disabled { background: var(--gh-rule); color: var(--gh-ink-3); cursor: default; }
.ghv2-offer-btn { min-height: 40px; padding: 0 14px; font-size: 0.833rem; }
.browse-shell .browse-action-btn { background: var(--theme, var(--gh-primary-bg)); color: var(--theme-ink, var(--gh-primary-text)); box-shadow: 0 2px 0 color-mix(in srgb, var(--theme, #000000) 60%, #000000); }
.browse-shell .browse-action-btn:hover { background: color-mix(in srgb, var(--theme, #000000) 88%, #000000); }
.ghv2-primary { width: 100%; min-height: 48px; font-size: 1rem; }
.ghv2-primary.is-guide { background: var(--line-guide-fill); color: #fff; }
/* 연결 취소(10-28): 붉은 확정 단추 · 빠른 사유 · 사유 한 줄 */
.ghv2-primary.is-danger { background: var(--gh-danger); color: #fff; }
.ghv2-primary.is-danger:hover:not(:disabled) { background: #a00b33; }
.ghv2-cancel-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.ghv2-cancel-reason { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--gh-r-s); background: var(--gh-panel-2); color: var(--gh-ink); font-size: 0.833rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ghv2-cancel-reason b { margin-right: 6px; color: var(--gh-ink-2); font-weight: 800; }
.ghv2-row-main .ghv2-cancel-reason { margin-top: 4px; }
.ghv2-accept-btn { min-width: 96px; }

.btn-secondary, .btn-refresh, .ghv2-secondary, .ghv2-mini-btn, .ghv2-link-btn, .ghv2-dm-btn, .dm-btn, #gh-detail-bump {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 14px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m);
    background: var(--gh-panel); color: var(--gh-ink);
    font-size: 0.833rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-secondary:hover, .btn-refresh:hover:not([disabled]), .ghv2-secondary:hover, .ghv2-mini-btn:hover, .ghv2-link-btn:hover, .ghv2-dm-btn:hover, .dm-btn:hover, #gh-detail-bump:hover:not(:disabled) { border-color: var(--gh-ink); }
.btn-refresh[disabled], #gh-detail-bump:disabled { color: var(--gh-ink-3); cursor: default; }
.btn-refresh { min-height: 40px; }
.ghv2-mini-btn { min-height: 36px; padding: 0 12px; font-size: 0.833rem; }
.ghv2-link-btn { min-height: 36px; padding: 0 12px; font-size: 0.833rem; }
.ghv2-dm-btn { width: 100%; }
.close-post-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--gh-danger); border-radius: var(--gh-r-m); background: var(--gh-panel); color: var(--gh-danger); font-size: 0.833rem; font-weight: 800; cursor: pointer; }
.close-post-btn:hover { background: var(--line-fw-soft); }
.ghv2-secondary { min-height: 48px; font-size: 1rem; }
.ghv2-icon-btn { flex: 0 0 auto; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); color: var(--gh-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ghv2-icon-btn:hover { border-color: var(--gh-ink); color: var(--gh-ink); }
.ghv2-text-link { padding: 6px 2px; border: 0; background: none; color: var(--gh-ink); font-size: 0.833rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ghv2-text-link.is-muted { color: var(--gh-ink-2); }
.ghv2-offer-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.833rem; font-weight: 800; color: var(--gh-ink-2); white-space: nowrap; }
.ghv2-card-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 창 (위: 표지 띠, 아래: 승강장 바탕) ---------- */

.modal-root { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--gh-backdrop); }
.modal-root.open { display: flex; }
.modal-box { display: flex; flex-direction: column; width: min(100%, 560px); max-height: min(92vh, 920px); border-radius: var(--gh-r-l); overflow: hidden; background: var(--gh-sheet); color: var(--gh-ink); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28); animation: gh-sheet-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes gh-sheet-in { from { transform: translateY(12px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.modal-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 20px; background: var(--gh-band); color: var(--gh-band-text); }
.modal-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: var(--gh-band-text); }
.modal-title .ghv2-count { background: #ffffff; color: #15191d; }
.modal-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--gh-r-m); background: transparent; color: var(--gh-band-text); cursor: pointer; }
.modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.modal-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.modal-body > * { flex-shrink: 0; }
.modal-box > form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--gh-rule); background: var(--gh-sheet); }
.modal-footer.modal-footer-split { justify-content: space-between; align-items: center; }
.modal-footer-left, .modal-footer-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ghv2-modal .modal-box { width: min(100%, 520px); }
.ghv2-modal .modal-body { gap: 14px; }

/* 글쓰기 · 상세 창 */
.modal-grid { display: flex; flex-direction: column; gap: 18px; }
.modal-helper-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-label { display: block; margin-bottom: 8px; font-size: 0.833rem; font-weight: 800; color: var(--gh-ink); }
.field-input, .field-textarea, .field-select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); color: var(--gh-ink); font: inherit; font-size: 1rem; }
.field-input:focus, .field-textarea:focus, .field-select:focus { border-color: var(--gh-focus); outline: 2px solid color-mix(in srgb, var(--gh-focus) 30%, transparent); outline-offset: 0; }
.field-input[readonly] { background: var(--gh-panel-2); color: var(--gh-ink-2); }
.field-textarea { min-height: 112px; line-height: 1.6; resize: vertical; }
.field-textarea::placeholder, .field-input::placeholder, .ghv2-input::placeholder, .ghv2-textarea::placeholder { color: var(--gh-ink-3); }
.char-count { margin-top: 6px; text-align: right; font-size: 0.833rem; color: var(--gh-ink-2); }
.field-hint { margin-top: 6px; font-size: 0.833rem; line-height: 1.5; color: var(--gh-ink-2); }
.position-selector { display: flex; flex-direction: column; gap: 8px; }
.position-line { display: flex; flex-wrap: wrap; gap: 8px; }
.selector-chip { min-width: 52px; height: 40px; padding: 0 12px; border: 2px solid var(--gh-rule); border-radius: 999px; background: var(--gh-panel); color: var(--line-text); font-size: 0.833rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; }
.selector-chip:hover { border-color: var(--line); }
.selector-chip.active { border-color: var(--line); background: var(--line); color: #fff; }
[data-theme="dark"] .selector-chip.active { color: #0b0d10; }
.formation-selector, .expiry-row { display: flex; flex-wrap: wrap; gap: 8px; }
.formation-btn { min-width: 76px; }
.form-warning-note { margin: 10px 0; font-size: 0.833rem; font-weight: 700; line-height: 1.5; white-space: pre-line; color: var(--gh-danger); }
.detail-user-row { display: flex; align-items: center; gap: 14px; }
.detail-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--gh-panel-2); display: flex; align-items: center; justify-content: center; color: var(--gh-ink-3); }
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-meta h3 { margin: 0 0 2px; font-size: 1.2rem; font-weight: 800; }
.detail-meta p { margin: 0; font-size: 0.833rem; line-height: 1.5; color: var(--gh-ink-2); }
.detail-position-list .selected-position-list { gap: 8px; }
.detail-formation-row, .formation-row { display: flex; flex-wrap: wrap; gap: 6px; }
.formation-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--gh-r-s); background: var(--gh-panel); border: 1px solid var(--gh-rule); font-size: 0.833rem; font-weight: 700; }
.detail-desc { padding: 14px 16px; border-radius: var(--gh-r-m); background: var(--gh-panel); font-size: 1rem; line-height: 1.7; color: var(--gh-ink); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- 제안 창 조각 ---------- */

.ghv2-step { margin-left: 2px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); font-size: 0.694rem; font-weight: 700; color: var(--gh-band-sub); }
.ghv2-section-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ghv2-section-head h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.ghv2-section-head span { font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-section-head > svg { color: var(--line-offer-text); }
.ghv2-field { display: flex; flex-direction: column; gap: 6px; }
.ghv2-label { font-size: 0.833rem; font-weight: 800; color: var(--gh-ink); }
.ghv2-label small { font-weight: 500; color: var(--gh-ink-2); }
.ghv2-row-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px 8px 8px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); text-align: left; cursor: pointer; }
.ghv2-row-btn:hover { border-color: var(--gh-ink); }
.ghv2-row-btn.is-blue { border: 2px solid var(--gh-ink); padding: 7px 13px 7px 7px; }
.ghv2-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ghv2-row-main strong { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.ghv2-row-main span { font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-row-side { flex: 0 0 auto; font-size: 0.833rem; font-weight: 700; color: var(--gh-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ghv2-seg { display: flex; gap: 6px; }
.ghv2-seg button { flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-s); background: var(--gh-panel); font-size: 0.833rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ghv2-seg button:hover:not(:disabled) { border-color: var(--gh-ink); }
.ghv2-seg button.is-on { border-color: var(--gh-primary-bg); background: var(--gh-primary-bg); color: var(--gh-primary-text); font-weight: 800; }
.ghv2-seg button.is-fixed { font-weight: 800; }
.ghv2-seg button.is-fixed svg { width: 12px; height: 12px; opacity: 0.7; }
.ghv2-seg button:disabled { border-style: dashed; background: transparent; color: var(--gh-ink-3); text-decoration: line-through; cursor: default; }
.ghv2-seg .ghv2-seg-icon { flex: 0 0 48px; }
.ghv2-input, .ghv2-textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); color: var(--gh-ink); font: inherit; font-size: 1rem; }
.ghv2-textarea { min-height: 112px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.ghv2-input:focus, .ghv2-textarea:focus { border-color: var(--gh-focus); outline: 2px solid color-mix(in srgb, var(--gh-focus) 30%, transparent); outline-offset: 0; }
.ghv2-count-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ghv2-count-line span { font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-note { margin: 0; padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); color: var(--gh-ink); font-size: 0.833rem; line-height: 1.55; }
.ghv2-note.is-blue { background: var(--gh-panel); }
.ghv2-note.is-warn { background: var(--gh-warn-soft); color: var(--gh-warn-text); }
.ghv2-note.is-warn a { color: inherit; font-weight: 800; }
.ghv2-hint { margin: 0; font-size: 0.833rem; line-height: 1.55; color: var(--gh-ink-2); }
.ghv2-footer-row { display: flex; gap: 8px; width: 100%; }
.ghv2-footer-row > * { flex: 1; }
.ghv2-footer-row > .ghv2-primary { flex: 2; }
.ghv2-count { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--gh-panel-2); color: var(--gh-ink-2); font-size: 0.833rem; font-weight: 800; }
.ghv2-count.is-open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gh-rule-strong); color: var(--gh-ink); }
.ghv2-count.is-ok { background: var(--gh-ok-soft); color: var(--gh-ok-text); }
.ghv2-count.is-alert { background: var(--gh-primary-bg); color: var(--gh-primary-text); }
.ghv2-count.is-pending { background: var(--gh-panel); box-shadow: inset 0 0 0 1.5px var(--gh-ink); color: var(--gh-ink); }

.ghv2-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
/* 이름 칸은 최소 9em 은 지킨다: 포지션이 많으면(최대 9개) 칩 묶음이 다음 줄로 내려간다 */
.ghv2-who-main { flex: 1 1 9em; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ghv2-who-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 100%; margin-left: auto; }
.ghv2-who-main strong { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.ghv2-who-main > span { font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--gh-r-m); overflow: hidden; background: var(--gh-panel-2); color: var(--gh-ink-2); display: flex; align-items: center; justify-content: center; font-size: 0.833rem; font-weight: 800; }
.ghv2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ghv2-avatar.is-round { border-radius: 50%; }
.ghv2-avatar.is-small { width: 24px; height: 24px; font-size: 0.694rem; }

/* ---------- 필드 = 짙은 노선도 판 ---------- */

.ghv2-pitch { position: relative; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1.1; border-radius: var(--gh-r-l); overflow: hidden; background: var(--gh-map); }
.ghv2-pitch-line { position: absolute; pointer-events: none; border: 2px solid var(--gh-map-line); }
.ghv2-pitch-line.is-outer { inset: 12px; border-radius: 4px; }
.ghv2-pitch-line.is-half { left: 12px; right: 12px; top: 50%; height: 0; border-width: 2px 0 0; }
.ghv2-pitch-line.is-circle { left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; }
.ghv2-pitch-line.is-box-top { left: 28%; right: 28%; top: 12px; height: 42px; border-top: 0; }
.ghv2-pitch-line.is-box-bottom { left: 28%; right: 28%; bottom: 12px; height: 42px; border-bottom: 0; }
.ghv2-slot { position: absolute; z-index: 1; width: 40px; height: 40px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #59636e; background: #2b3239; color: #c9d0d7; font-size: 0.694rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; }
.ghv2-slot:hover { border-color: #ffffff; color: #ffffff; }
.ghv2-slot.is-match { width: 46px; height: 46px; border: 4px solid var(--line); background: #ffffff; color: #15191d; font-size: 0.833rem; font-weight: 800; }
.ghv2-slot.is-selected { width: 52px; height: 52px; border: 3px solid #ffffff; background: var(--line); color: #ffffff; font-size: 0.833rem; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--line) 45%, transparent); }
.ghv2-slot:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
/* 지원 창: 팀원 자리 · 이미 찬 자리는 고를 수 없다 */
span.ghv2-slot { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: default; }
.ghv2-slot.is-member { width: 34px; height: 34px; border-color: #3f4851; background: #262c32; color: #6f7a85; font-size: 0.694rem; }
.ghv2-slot.is-filled { border: 2px dashed var(--line); background: #2b3239; color: #c9d0d7; }
.ghv2-slot.is-member:hover, .ghv2-slot.is-filled:hover { border-color: inherit; color: inherit; }
.ghv2-slot-badge { position: absolute; z-index: 2; transform: translate(6px, -32px); padding: 1px 6px; border-radius: 999px; background: #ffffff; color: #15191d; box-shadow: 0 0 0 1.5px #15191d; font-size: 0.694rem; font-weight: 800; white-space: nowrap; pointer-events: none; }
.ghv2-slot-badge.is-left { transform: translate(calc(-100% - 6px), -32px); }
.ghv2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ghv2-legend i.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.ghv2-legend i.dot.is-match { border: 3px solid var(--gh-ink); background: #fff; }
.ghv2-legend i.dot.is-other { border: 2px solid #59636e; background: #2b3239; }
.ghv2-legend i.dot.is-member { border: 2px solid #3f4851; background: #262c32; }
.ghv2-legend i.dot.is-picked { border: 3px solid #ffffff; background: var(--gh-ink); box-shadow: 0 0 0 1.5px var(--gh-ink); }
.ghv2-pick-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
.ghv2-pick-summary strong { font-size: 1rem; font-weight: 800; }
.ghv2-pick-summary span { font-size: 0.833rem; font-weight: 700; color: var(--gh-ok-text); text-align: right; }
.ghv2-pick-summary.is-warn { background: var(--gh-warn-soft); }
.ghv2-pick-summary.is-warn span { color: var(--gh-warn-text); }

.ghv2-mini-pitch { position: relative; flex: 0 0 auto; width: 77px; height: 70px; border-radius: var(--gh-r-s); background: var(--gh-map); overflow: hidden; }
.ghv2-mini-pitch.is-small { width: 44px; height: 40px; border-radius: 4px; }
.ghv2-mini-pitch::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--gh-map-line); border-radius: 2px; }
.ghv2-mini-pitch::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1px solid var(--gh-map-line); }
.ghv2-mini-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.ghv2-mini-pitch.is-small .ghv2-mini-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.ghv2-mini-tag { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 1px 4px; border-radius: 999px; background: var(--line, var(--line-offer)); color: #fff; font-size: 0.694rem; font-weight: 800; line-height: 1.3; }
.ghv2-mini-pitch.is-small .ghv2-mini-tag { width: 11px; height: 11px; padding: 0; font-size: 0; border: 2px solid #fff; box-sizing: border-box; }

/* 포메이션 목록 */
.ghv2-formation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ghv2-formation-btn { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 12px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); text-align: left; cursor: pointer; }
.ghv2-formation-btn:hover { border-color: var(--gh-ink); }
.ghv2-formation-btn strong { font-size: 1rem; font-weight: 800; }
.ghv2-formation-btn span { font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-formation-btn.is-on { border: 2px solid var(--gh-ink); padding: 5px 11px; }
.ghv2-subhead { margin: 4px 0 0; font-size: 0.833rem; font-weight: 800; color: var(--gh-ink-2); }

/* 시작 시간 격자 */
.ghv2-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ghv2-time-grid button { min-height: 44px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-s); background: var(--gh-panel); font-size: 0.833rem; font-weight: 700; cursor: pointer; }
.ghv2-time-grid button:hover:not(:disabled) { border-color: var(--gh-ink); }
.ghv2-time-grid button.is-on { border-color: var(--gh-primary-bg); background: var(--gh-primary-bg); color: var(--gh-primary-text); font-weight: 800; }
.ghv2-time-grid button.is-fixed { font-weight: 800; }
.ghv2-time-grid button:disabled { border-style: dashed; background: transparent; color: var(--gh-ink-3); text-decoration: line-through; cursor: default; }
.ghv2-custom-time { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
.ghv2-custom-time-row { display: flex; align-items: center; gap: 10px; }
.ghv2-custom-time-row input { flex: 1; }
.ghv2-custom-time-row span { font-size: 0.833rem; color: var(--gh-ink-2); white-space: nowrap; }

/* 인게임 팀 · 목록 */
.ghv2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ghv2-pill { min-height: 36px; padding: 0 12px; border: 1px solid var(--gh-rule); border-radius: 999px; background: var(--gh-panel); font-size: 0.833rem; font-weight: 700; cursor: pointer; }
.ghv2-pill:hover { border-color: var(--gh-ink); }
.ghv2-pill.is-on { border-color: var(--gh-primary-bg); background: var(--gh-primary-bg); color: var(--gh-primary-text); }
.ghv2-list { list-style: none; margin: 0; padding: 0; border-radius: var(--gh-r-m); background: var(--gh-panel); overflow: hidden; }
.ghv2-list li + li { border-top: 1px solid var(--gh-rule); }
.ghv2-list .ghv2-row-btn { border: 0; border-radius: 0; }
.ghv2-tag { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--gh-panel-2); color: var(--gh-ink-2); font-size: 0.694rem; font-weight: 800; }
.ghv2-manual { border-style: dashed !important; }
.ghv2-empty { padding: 20px 16px; border-radius: var(--gh-r-m); background: var(--gh-panel); text-align: center; font-size: 0.833rem; line-height: 1.55; color: var(--gh-ink-2); }

/* 수락 안내 (보라 띠) */
.ghv2-guide-box { display: flex; flex-direction: column; gap: 0; border-radius: var(--gh-r-m); overflow: hidden; background: var(--line-guide-soft); }
.ghv2-guide-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: var(--line-guide-fill); color: #fff; }
.ghv2-guide-head h4 { margin: 0; font-size: 0.833rem; font-weight: 800; color: #fff; }
.ghv2-guide-head span { font-size: 0.833rem; color: #ffffff; }
[data-theme="dark"] .ghv2-guide-head, [data-theme="dark"] .ghv2-guide-head h4 { color: #1d1023; }
[data-theme="dark"] .ghv2-guide-head span { color: rgba(29, 16, 35, 0.8); }
.ghv2-guide-box > .ghv2-guide-pick { margin: 10px; width: auto; }
.ghv2-guide-box > .ghv2-guide-note { margin: -2px 12px 10px; color: var(--line-guide-text); }
.ghv2-guide-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px 10px 14px; border: 1px solid color-mix(in srgb, var(--line-guide) 40%, transparent); border-radius: var(--gh-r-m); background: var(--gh-panel); text-align: left; cursor: pointer; }
.ghv2-guide-pick:hover { border-color: var(--line-guide); }
.ghv2-guide-pick strong { flex: 1; min-width: 0; font-size: 1rem; font-weight: 800; line-height: 1.45; }
.ghv2-guide-pick span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; font-size: 0.833rem; font-weight: 800; color: var(--line-guide-text); }
.ghv2-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ghv2-compare div { padding: 12px; border-radius: var(--gh-r-m); font-size: 0.833rem; line-height: 1.5; color: var(--gh-ink); }
.ghv2-compare div strong { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.833rem; font-weight: 800; }
.ghv2-compare .is-offer { background: var(--line-offer-soft); }
.ghv2-compare .is-offer strong { color: var(--line-offer-text); }
.ghv2-compare .is-guide { background: var(--line-guide-soft); box-shadow: inset 0 0 0 2px var(--line-guide); }
.ghv2-compare .is-guide strong { color: var(--line-guide-text); }
.ghv2-preset { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 8px 8px 14px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); }
.ghv2-preset.is-on { border: 2px solid var(--line-guide); padding: 7px 7px 7px 13px; background: var(--line-guide-soft); }
.ghv2-preset input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--line-guide); }
.ghv2-preset label { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; cursor: pointer; overflow-wrap: anywhere; }
.ghv2-preset .ghv2-input { flex: 1; }
.ghv2-guide-new { gap: 8px; padding: 12px 14px; border: 2px dashed color-mix(in srgb, var(--line-guide) 55%, transparent); border-radius: var(--gh-r-m); }
[data-theme="dark"] .ghv2-primary.is-guide { color: #1d1023; }
.ghv2-default-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: var(--line-guide-fill); color: #fff; font-size: 0.694rem; font-weight: 800; vertical-align: 1px; }
[data-theme="dark"] .ghv2-default-tag { color: #1d1023; }

/* 받은 제안 */
.ghv2-offer-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
.ghv2-offer-top { display: flex; align-items: center; gap: 12px; }
.ghv2-offer-top .gh-station { flex: 0 0 auto; }
.ghv2-offer-top .ghv2-who-main strong { font-size: 1.2rem; }
.ghv2-offer-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.833rem; font-weight: 700; color: var(--gh-ink); }
.ghv2-offer-tags span + span::before { content: "·"; margin-right: 8px; color: var(--gh-ink-3); }
.ghv2-offer-msg { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--gh-r-s); background: var(--line-offer-soft); font-size: 1rem; line-height: 1.5; color: var(--gh-ink); overflow-wrap: anywhere; }
.ghv2-offer-msg svg { flex: 0 0 auto; margin-top: 3px; color: var(--line-offer-text); }
.ghv2-offer-mismatch { margin: 0; font-size: 0.833rem; font-weight: 700; color: var(--gh-warn-text); }
.ghv2-offer-bottom { display: flex; align-items: center; gap: 8px; }
.ghv2-offer-bottom .gh-route { flex: 1; margin-right: 4px; }
.ghv2-offer-left { display: inline-flex; align-items: center; gap: 4px; font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-mypost { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
.ghv2-mypost-row { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-mypost-row strong { font-size: 0.833rem; color: var(--gh-ink); }
.ghv2-mypost-row .ghv2-right { margin-left: auto; }
.ghv2-switch { position: relative; flex: 0 0 auto; display: inline-flex; justify-content: flex-start; width: 44px; height: 26px; padding: 3px; border: 0; border-radius: 999px; background: var(--gh-rule-strong); cursor: pointer; transition: background-color 0.18s ease; }
.ghv2-switch[aria-checked="true"] { justify-content: flex-end; background: var(--gh-primary-bg); }
.ghv2-switch span { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.ghv2-switch[aria-checked="true"] span { background: var(--gh-primary-text); }

/* 수락 확인 */
.ghv2-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ghv2-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.5; }
.ghv2-bullets li i { flex: 0 0 28px; height: 28px; border-radius: 50%; border: 3px solid var(--gh-ink); background: var(--gh-panel); display: inline-flex; align-items: center; justify-content: center; font-size: 0.694rem; color: var(--gh-ink); }
.ghv2-bullets li i.is-guide { border-color: var(--line-guide); color: var(--line-guide-text); }
.ghv2-bullets li span small { display: block; font-size: 0.833rem; color: var(--gh-ink-2); }

/* 합류 정보 = 승강장 안내판 */
.ghv2-joined-head { display: flex; align-items: center; gap: 12px; }
.ghv2-joined-head i { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--gh-ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ghv2-joined-head i.is-off { background: var(--gh-ink-3); }
.ghv2-joined-head h4 { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.ghv2-joined-head p { margin: 2px 0 0; font-size: 0.833rem; color: var(--gh-ink-2); }
.gh-platform { border-radius: var(--gh-r-l); overflow: hidden; background: var(--gh-panel); }
.gh-platform-band { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--gh-band); color: var(--gh-band-text); }
.gh-platform-band .gh-station { background: #fff; color: #15191d; }
.gh-platform-band .ghv2-row-main strong { font-size: 1.44rem; font-weight: 800; line-height: 1.2; color: #fff; }
.gh-platform-band .ghv2-row-main span { font-size: 0.833rem; color: var(--gh-band-sub); }
.gh-platform-band .ghv2-join-label { color: var(--gh-band-sub); }
.gh-platform-band .ghv2-mini-pitch { margin-left: auto; background: #2b3239; }
.gh-platform-stripe { height: 5px; background: var(--line, var(--line-offer)); }
.gh-platform-rows { display: flex; flex-direction: column; }
.gh-platform-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.gh-platform-row + .gh-platform-row { border-top: 1px solid var(--gh-rule); }
.gh-platform-row .ghv2-row-main strong { font-size: 1.2rem; }
.gh-platform-row .gh-route { flex: 1; }
.ghv2-row-main .gh-platform-time { font-size: 1.728rem; color: var(--gh-ink); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.ghv2-join-label { display: flex; align-items: center; gap: 4px; font-size: 0.833rem; font-weight: 800; color: var(--gh-ink-2); }
.gh-platform .ghv2-guide-quote { margin: 0; padding: 14px 16px; border-radius: 0; border-top: 1px solid var(--gh-rule); }
.gh-platform .ghv2-dm-btn { margin: 12px; width: calc(100% - 24px); }
.ghv2-guide-quote { padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--line-guide-soft); }
.ghv2-guide-quote .ghv2-join-label { color: var(--line-guide-text); }
.ghv2-guide-quote p { margin: 4px 0 0; font-size: 1.2rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.ghv2-guide-quote small { display: block; margin-top: 4px; font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-divider { height: 1px; background: var(--gh-rule); }
.ghv2-join-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--gh-r-m); background: var(--gh-panel); }
.ghv2-join-row { display: flex; align-items: center; gap: 12px; }

/* 보낸 제안 */
.ghv2-sent-group { display: flex; flex-direction: column; gap: 8px; }
.ghv2-sent-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ghv2-sent-head h4 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.ghv2-sent-head span.ghv2-club { font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-sent-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; }
.ghv2-sent-row .ghv2-row-main strong { font-size: 1rem; }
.ghv2-sent-row .ghv2-row-main span.is-pending { color: var(--gh-ink); font-weight: 800; }
.ghv2-sent-row .ghv2-row-main span.is-ok { color: var(--gh-ok-text); font-weight: 800; }
.ghv2-sent-row .gh-route { margin-top: 4px; }
/* 수락된 제안: 흰 판 위 초록 띠, 안내는 판 안의 평평한 보라 줄 */
.ghv2-accepted-card { display: flex; flex-direction: column; border-radius: var(--gh-r-m); overflow: hidden; background: var(--gh-panel); border-top: 5px solid var(--gh-ok); }
.ghv2-accepted-card strong.ghv2-title { display: flex; align-items: center; gap: 6px; padding: 12px 14px 0; font-size: 1rem; font-weight: 800; color: var(--gh-ink); }
.ghv2-accepted-card strong.ghv2-title svg { color: var(--gh-ok-text); }
.ghv2-accepted-card span.ghv2-sub { padding: 2px 14px 0; font-size: 0.833rem; color: var(--gh-ink-2); }
.ghv2-accepted-route { padding: 10px 14px 12px; }
.ghv2-accepted-card .ghv2-guide-quote { border-radius: 0; padding: 12px 14px; }
.ghv2-accepted-card .ghv2-dm-btn { margin: 12px 14px 0; width: calc(100% - 28px); }
.ghv2-accepted-card .ghv2-text-link { align-self: center; margin: 4px 0 8px; }

/* 메뉴 */
.ghv2-menu-btn { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); background: var(--gh-panel); text-align: left; cursor: pointer; }
.ghv2-menu-btn:hover { border-color: var(--gh-ink); }
.ghv2-menu-btn i { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--gh-panel-2); display: inline-flex; align-items: center; justify-content: center; color: var(--gh-ink-2); }
.ghv2-menu-btn strong { display: block; font-size: 1rem; font-weight: 800; }
.ghv2-menu-btn small { display: block; margin-top: 2px; font-size: 0.833rem; line-height: 1.5; color: var(--gh-ink-2); }

/* 알림 */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 6000; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--gh-r-m); background: var(--gh-band); color: var(--gh-band-text); font-size: 0.833rem; font-weight: 700; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
[data-theme="dark"] .toast { box-shadow: 0 0 0 1px var(--gh-rule-strong), 0 8px 24px rgba(0, 0, 0, 0.4); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ---------- 좁은 화면 ---------- */

@media (max-width: 1024px) and (min-width: 769px) {
    .post-card { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 236px; grid-template-areas: "who pos act" "time time time"; }
}

@media (max-width: 768px) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .container { padding: 12px 12px 72px; }
    .gh-sign-main { flex-wrap: nowrap; align-items: center; padding: 14px 10px 10px 16px; }
    .gh-sign-title h1 { font-size: 1.44rem; }
    .gh-sign-title p { display: none; }
    .guesthub-guide-ribbon { flex: 0 0 auto; min-height: 36px; padding: 0 8px; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
    .ghv2-pilot { gap: 2px 8px; padding: 8px 12px 8px 16px; }
    .ghv2-pilot .ghv2-link-btn { min-height: 32px; padding: 0 6px; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
    /* 휴대폰도 좌우 두 칸: 그림 · 이름 · 흐름만, 설명은 작게 */
    .intro-grid { gap: 8px; }
    .intro-art { height: 140px; }
    .intro-art::before { top: -60px; left: calc(50% - 30px); width: 170px; height: 170px; }
    .intro-art img { bottom: 6px; height: 126px; }
    .intro-content-bx { gap: 8px; padding: 12px 12px 14px; }
    .intro-option-title { font-size: 1.1rem; }
    .intro-option-desc { font-size: 0.75rem; line-height: 1.5; white-space: normal; }
    .back-entry-btn { width: 44px; padding: 0; justify-content: center; }
    .back-entry-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* 필터는 옆으로 밀지 않고 다 펼친다: 묶음 5 · 포지션 5+4 */
    .control-card { padding: 12px; gap: 10px; }
    .gh-filter-rail { gap: 8px; }
    .gh-filter-rail .preset-row, .gh-filter-rail .filter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    #gh-recruiting-formation-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .gh-filter-rail .preset-btn { min-height: 38px; padding: 0 2px; }
    .gh-filter-rail .filter-btn { justify-content: center; gap: 4px; height: 36px; padding: 0 4px; }
    .gh-filter-rail .filter-count-badge { min-width: 16px; padding: 0 4px; }
    /* 제목이 길면(영어 등) 단추는 다음 줄 오른쪽으로 */
    .list-header { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
    .list-header-action { margin-left: auto; }
    .list-title { font-size: 1rem; white-space: nowrap; }
    .jump-mode-btn { gap: 6px; padding: 0 6px; font-size: 0.833rem; }
    .gh-team-thumb { width: 44px; height: 40px; }
    .btn-refresh { width: 40px; padding: 0; }
    #gh-refresh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cooldown-text { display: none; }
    .gh-skel-row { grid-template-columns: 32px minmax(0, 1fr) 64px; }
    .gh-skel-row b:nth-of-type(2) { display: none; }
    .browse-action-btn { min-height: 40px; padding: 0 14px; }
    /* 1줄: 누구 | 노선 띠, 2줄: 포지션 | 할 일 */
    .post-card { grid-template-columns: minmax(0, 1fr) auto 92px; grid-template-areas: "who who time" "pos act act"; gap: 10px 12px; padding: 12px 14px; }
    .gh-row-who { gap: 10px; }
    .avatar-box, .recruiting-owner-avatar { width: 32px; height: 32px; }
    .gh-row-time { width: 92px; align-self: start; padding-top: 4px; }
    .gh-row-time .gh-route-labels { justify-content: flex-end; font-size: 0.833rem; }
    .gh-row-time .gh-route-labels > span:first-child { display: none; }
    .gh-row-pos { align-self: center; }
    .gh-row-name .team-meta-text { display: none; }
    .ghv2-card-actions .ghv2-offer-state { white-space: normal; text-align: right; max-width: 9.5rem; line-height: 1.3; }
    .modal-root { align-items: flex-end; padding: 0; }
    .modal-box { width: 100%; max-height: 90vh; border-radius: var(--gh-r-l) var(--gh-r-l) 0 0; animation-name: gh-sheet-up; }
    .ghv2-modal .modal-box { width: 100%; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
    .gh-platform-band .ghv2-row-main strong { font-size: 1.2rem; }
}
@keyframes gh-sheet-up { from { transform: translateY(24px); } to { transform: none; } }

@media (max-width: 380px) {
    .ghv2-seg button { padding: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .gh-route-stop.is-now::after { animation: none; display: none; }
    .modal-box { animation: none; }
    .intro-option, .intro-art::before, .intro-art img, .post-card, .fa-only-toggle-knob, .fa-only-toggle-knob::after, .ghv2-switch, .toast { transition: none; }
    .gh-skel-row i, .gh-skel-row b { animation: none; }
}

/* 팀들이 많이 찾는 포지션 TOP 3 (2026-11-03, guesthub-v2.js renderDemand · /api/guesthub/position-demand)
   역 번호 표식처럼 노선 색 고리(포지션 색 --line)에 칸 코드, 큰 숫자 = 고르면 게임할 확률, 막대 둘 = 고르면 · 안 고르면 */
.gh-demand { margin-top: 12px; background: var(--gh-panel); border: 1px solid var(--gh-rule); border-radius: var(--gh-r-l); padding: 18px 20px; display: grid; gap: 14px; }
.gh-demand.hidden { display: none; }
.gh-demand-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.gh-demand-top h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--gh-ink); }
.gh-demand-top p { margin: 4px 0 0; font-size: 0.833rem; color: var(--gh-ink-2); line-height: 1.5; }
.gh-demand-updated { font-size: 0.75rem; color: var(--gh-ink-3); }
.gh-demand-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gh-demand-item { border: 1px solid var(--gh-rule); border-radius: var(--gh-r-m); padding: 14px; display: grid; gap: 12px; }
.gh-demand-head { display: flex; align-items: center; gap: 10px; }
.gh-demand-rank { font-size: 1.5rem; font-weight: 800; width: 18px; color: var(--gh-ink); }
.gh-demand-mark { width: 44px; height: 44px; border-radius: 50%; border: 5px solid var(--line); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: var(--line-text); background: var(--gh-panel); flex: none; }
.gh-demand-name { display: grid; gap: 1px; min-width: 0; flex: 1; }
.gh-demand-name strong { font-size: 1rem; color: var(--gh-ink); }
.gh-demand-share { font-size: 0.78rem; color: var(--gh-ink-2); }
.gh-demand-share.is-short, .gh-demand-rate-short { display: none; }
.gh-demand-rate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gh-demand-rate b { font-size: 2rem; line-height: 1; font-weight: 800; color: var(--line-text); }
.gh-demand-rate span { font-size: 0.833rem; font-weight: 700; color: var(--gh-ink); }
.gh-demand-bars { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px; gap: 6px 8px; align-items: center; font-size: 0.75rem; color: var(--gh-ink-2); }
.gh-demand-bars b { color: var(--gh-ink); text-align: right; }
.gh-demand-bars > span:nth-child(6) { text-align: right; }
.gh-demand-track { height: 8px; border-radius: 999px; background: var(--gh-panel-2); border: 1px solid var(--gh-rule); overflow: hidden; }
.gh-demand-track i { display: block; height: 100%; background: var(--gh-rule-strong); }
.gh-demand-track i.is-pick { background: var(--line); }
.gh-demand-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-radius: var(--gh-r-m); background: var(--gh-sheet); font-size: 0.875rem; color: var(--gh-ink); }
.gh-demand-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--gh-r-m); background: var(--gh-primary-bg); color: var(--gh-primary-text); font: inherit; font-weight: 800; cursor: pointer; }
.gh-demand-btn:hover { background: var(--gh-primary-hover); }
@media (max-width: 768px) {
    .gh-demand { padding: 14px; gap: 10px; }
    .gh-demand-note { display: none; }
    .gh-demand-list { grid-template-columns: 1fr; gap: 0; }
    .gh-demand-item { border: 0; border-bottom: 1px solid var(--gh-rule); border-radius: 0; padding: 10px 0; }
    .gh-demand-item:last-child { border-bottom: 0; }
    .gh-demand-mark { width: 38px; height: 38px; border-width: 4px; font-size: 0.75rem; }
    .gh-demand-rate, .gh-demand-bars, .gh-demand-share.is-long { display: none; }
    .gh-demand-share.is-short { display: inline; }
    .gh-demand-rate-short { display: grid; text-align: right; gap: 1px; }
    .gh-demand-rate-short b { font-size: 1.15rem; font-weight: 800; color: var(--line-text); }
    .gh-demand-rate-short span { font-size: 0.7rem; color: var(--gh-ink-2); }
    .gh-demand-cta { padding: 10px 12px; }
    .gh-demand-btn { width: 100%; }
}
/* 구직 글 포지션 고르기: 많이 찾는 포지션 배지 · 안내 */
.selector-chip.is-demand { position: relative; }
.selector-chip-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.625rem; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--line); color: #fff; pointer-events: none; }
[data-theme="dark"] .selector-chip-badge { color: #0b0d10; }
.position-selector .position-line:has(.selector-chip.is-demand) { padding-top: 6px; }
.demand-hint { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--gh-r-m); background: var(--gh-sheet); font-size: 0.8rem; line-height: 1.55; color: var(--gh-ink); display: grid; gap: 8px; }
.demand-hint.hidden { display: none; }
.demand-hint-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.demand-add { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--gh-panel); color: var(--line-text); font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; }