/* =====================================================================
   ClubGG Back Office — shared shell + component layer
   Built on ds/colors_and_type.css + ds/redesign.css tokens.
   Reused by every page (rail, topbar, tables, modals, page-head).
   ===================================================================== */
html, body { margin: 0; background: var(--color-bg-alternate); }
.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* brand logo — theme-swapped (dark ink on light, white ink on dark) */
.rail-logo-img { height: 24px; width: auto; display: block; }
.rail-logo-img.on-dark { display: none; }
[data-theme="dark"] .rail-logo-img.on-light { display: none; }
[data-theme="dark"] .rail-logo-img.on-dark { display: block; }
.rail-brand .rail-env { margin-left: auto; }
.rail-nav a.nav-item { text-decoration: none; }
/* "New" tag on nav items — pending applicants */
.nav-new { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-4); background: var(--color-fg-strong); color: var(--color-bg-base); font: var(--font-weight-bold) 10.5px/1 var(--font-family-base); letter-spacing: .02em; }
.nav-item.active .nav-new { background: var(--color-primary); color: #fff; }

/* topbar bits */
.club-switch { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); background: var(--color-bg-base); cursor: pointer; }
.club-switch:hover { border-color: var(--color-line-strong); }
.club-switch .logo { width: 24px; height: 24px; border-radius: var(--radius-6); background: linear-gradient(135deg,#c0392b,#7a1f16); flex-shrink: 0; display: grid; place-items: center; color: #fff; font: var(--font-weight-bold) 10px/1 var(--font-family-base); }
.club-switch .nm { font: var(--font-weight-semibold) 13.5px/1 var(--font-family-base); color: var(--color-fg-strong); white-space: nowrap; }
.utc-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: var(--radius-6); border: 1px solid var(--color-informative); color: var(--color-informative); font: var(--font-weight-semibold) 12px/1 var(--font-family-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ===== topbar dropdowns (club switcher + user menu) ===== */
.top-drop { position: relative; }
.top-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; background: var(--color-bg-base); border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); box-shadow: var(--shadow-heavy); padding: 8px; display: none; }
.top-drop.open .top-pop { display: block; }
.club-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px; border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); margin-bottom: 8px; background: var(--color-bg-base); }
.club-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.club-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-fg-strong); font: var(--font-weight-medium) 13.5px/1 var(--font-family-base); }
.club-search input::placeholder { color: var(--color-fg-assistive); }
.club-list { max-height: 288px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.club-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: var(--radius-6); cursor: pointer; text-align: left; }
.club-opt:hover { background: var(--color-bg-neutral); }
.club-opt.on { background: var(--color-primary-bg); }
.club-opt .lg { width: 28px; height: 28px; border-radius: var(--radius-6); background: linear-gradient(135deg,#c0392b,#7a1f16); flex-shrink: 0; display: grid; place-items: center; color: #fff; font: var(--font-weight-bold) 10px/1 var(--font-family-base); }
.club-opt .cn { font: var(--font-weight-semibold) 13.5px/1.3 var(--font-family-base); color: var(--color-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-opt.on .cn { color: var(--color-primary); }
.club-opt .cid { margin-left: auto; font: var(--font-weight-medium) 12px/1 var(--font-family-mono); font-variant-numeric: tabular-nums; color: var(--color-fg-alternate); flex-shrink: 0; }
.club-empty { padding: 18px 10px; text-align: center; font: var(--font-weight-medium) 13px/1.4 var(--font-family-base); color: var(--color-fg-assistive); }

/* ===== help slide-over (shared) — ClubGGShell.help(title, html) ===== */
#cg-help .cg-help-scrim { position: fixed; inset: 0; z-index: 480; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
#cg-help.open .cg-help-scrim { opacity: 1; pointer-events: auto; }
.cg-help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 481; width: min(400px, calc(100vw - 24px)); background: var(--color-bg-base); box-shadow: -12px 0 36px rgba(16,24,40,.18); transform: translateX(calc(100% + 44px)); transition: transform .28s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; }
#cg-help.open .cg-help-panel { transform: none; }
.cg-help-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px 15px 20px; border-bottom: 1px solid var(--color-line-neutral); flex-shrink: 0; }
.cg-help-head .hic { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--color-informative-bg); color: var(--color-informative); display: grid; place-items: center; font: var(--font-weight-bold) 13px/1 var(--font-family-base); flex-shrink: 0; }
.cg-help-head h2 { margin: 0; flex: 1; min-width: 0; font: var(--font-weight-bold) 16px/1.3 var(--font-family-base); color: var(--color-fg-strong); }
.cg-help-body { padding: 20px 22px 30px; overflow-y: auto; font: var(--font-weight-medium) 14px/1.7 var(--font-family-base); color: var(--color-fg-normal); }
/* Standard TEXT help template: green lead → · green section titles → indented gray body → orange Example.
   Markup convention: lead = first <p> (or <p class="hp-lead">), sections = <h4>, Example = <h4 class="eg">,
   inline value highlights = <b>. See CLAUDE.md "도움말". Table help uses .tbl and is left unstyled here. */
.cg-help-body > p:first-child, .cg-help-body p.hp-lead { color: var(--color-primary); font: var(--font-weight-semibold) 15px/1.6 var(--font-family-base); margin: 0 0 16px; padding-left: 0; }
.cg-help-body h4 { color: var(--color-primary); font: var(--font-weight-semibold) 15px/1.4 var(--font-family-base); margin: 20px 0 6px; padding-left: 15px; text-indent: -15px; }
.cg-help-body h4::before { content: "·"; margin-right: 9px; }
.cg-help-body h4:first-child { margin-top: 0; }
.cg-help-body h4.eg { color: var(--color-accent); padding-left: 0; text-indent: 0; }
.cg-help-body h4.eg::before { content: none; }
.cg-help-body p { font: var(--font-weight-medium) 14px/1.7 var(--font-family-base); margin: 0 0 12px; padding-left: 15px; }
.cg-help-body p:last-child { margin-bottom: 0; }
.cg-help-body b { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.cg-help-body ul { margin: 0 0 12px; padding-left: 33px; display: flex; flex-direction: column; gap: 7px; }
.cg-help-body li { font: var(--font-weight-medium) 14px/1.6 var(--font-family-base); color: var(--color-fg-normal); }
.cg-help-body .hl { color: var(--color-cautionary); }
.cg-help-body .hp-formula { font: var(--font-weight-semibold) 13px/1.45 var(--font-family-mono); color: var(--color-fg-strong); font-variant-numeric: tabular-nums; background: var(--color-primary-bg, var(--color-bg-alternate)); border-radius: var(--radius-8); padding: 10px 12px; display: block; margin: 0 0 13px; }
.cg-help-body table.tbl { width: 100%; margin: 2px 0 4px; }
.cg-help-body table.tbl th, .cg-help-body table.tbl td { padding: 12px 16px; font-size: 14px; }
.cg-help-body table.tbl th { font-weight: var(--font-weight-bold); }

/* shared info trigger (ⓘ) */
.info-i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: var(--radius-full); border: 1.5px solid var(--color-fg-alternate); color: var(--color-fg-alternate); font: var(--font-weight-bold) 11px/1 var(--font-family-base); cursor: pointer; transition: border-color var(--duration-fast), color var(--duration-fast); }
.info-i:hover { border-color: var(--color-informative); color: var(--color-informative); }

/* ===== sortable table headers — th[data-sort] + ClubGGShell.initSort(table, cb?) =====
   icon hidden by default; faint on hover; single green arrow when active (rotates for desc) */
.tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--duration-fast); }
.tbl th.sortable:hover { color: var(--color-fg-strong); }
.sort-ic { display: inline-flex; margin-left: 4px; vertical-align: -2px; opacity: 0; transition: opacity var(--duration-fast), transform var(--duration-fast); }
.sort-ic svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tbl th.sortable:hover .sort-ic { opacity: .45; }
th.sortable.asc .sort-ic, th.sortable.desc .sort-ic { opacity: 1; color: var(--color-primary); }
th.sortable.desc .sort-ic { transform: rotate(180deg); }

/* ===== multi-select dropdown (checkbox rows) ===== */
.cg-opt-multi { display: flex; align-items: center; gap: 9px; }
.cg-ck { width: 17px; height: 17px; border-radius: var(--radius-4); border: 1.5px solid var(--color-line-strong); display: inline-grid; place-items: center; flex-shrink: 0; background: var(--color-bg-base); color: #fff; transition: background var(--duration-fast), border-color var(--duration-fast); }
.cg-ck svg { width: 11px; height: 11px; opacity: 0; transition: opacity var(--duration-fast); }
.cg-opt-multi.on .cg-ck { background: var(--color-primary); border-color: var(--color-primary); }
.cg-opt-multi.on .cg-ck svg { opacity: 1; }
.cg-div { height: 1px; background: var(--color-line-neutral); margin: 4px 2px; }
/* mobile: club dropdown pins to viewport instead of overflowing off-screen */
@media (max-width: 640px) {
  #cg-club-drop .top-pop { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h, 60px) + 8px); min-width: 0 !important; width: auto; }
  .club-list { max-height: min(288px, 55vh); }
}

/* page head (title + pill + breadcrumb) — sticky under the topbar so context stays visible while scrolling */
.page-head { position: sticky; top: var(--topbar-h, 60px); z-index: 15; display: flex; align-items: center; gap: 14px; background: var(--color-bg-alternate); margin: -24px -28px 10px; padding: 16px 28px 12px; border-bottom: 1px solid var(--color-line-neutral); }
@media (max-width: 920px) { .page-head { margin: -16px -14px 10px; padding: 12px 14px 10px; } }
.page-head .ph-title { font: var(--font-weight-bold) 22px/1.2 var(--font-family-base); letter-spacing: -0.02em; color: var(--color-fg-strong); }
.page-head .crumb { margin-left: auto; margin-bottom: 0; }
/* page-head context — who/which club is being viewed (name + status) */
.ph-ctx { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ph-ctx .ph-div { width: 1px; height: 20px; background: var(--color-line-normal); flex-shrink: 0; }
.ph-ctx .ph-name { font: var(--font-weight-bold) 15px/1.2 var(--font-family-base); color: var(--color-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.ph-ctx .ph-id { font: var(--font-weight-medium) 12.5px/1.2 var(--font-family-mono); font-variant-numeric: tabular-nums; color: var(--color-fg-alternate); white-space: nowrap; }
@media (max-width: 860px) { .ph-ctx .ph-id, .ph-ctx .badge { display: none; } }
.pill-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 14px; border-radius: var(--radius-full); background: var(--color-informative); color: #fff; font: var(--font-weight-semibold) 13px/1 var(--font-family-base); cursor: pointer; border: 0; }
.pill-tab .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(255,255,255,.25); border-radius: var(--radius-full); font-size: 11.5px; }
.pill-tab:hover { filter: brightness(.96); }

/* toolbar + dropdown trigger */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* mobile: 툴바 컨트롤은 전부 동일한 전체 폭으로 스택 (가로 스크롤 금지) */
.uc-bar { display: flex; align-items: center; gap: 12px; }
@media (max-width: 640px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > *, .toolbar .input, .toolbar .select, .toolbar .btn, .toolbar .dd,
  .toolbar .cg-field, .toolbar .cg-range-field, .toolbar .daterange { width: 100% !important; min-width: 0 !important; justify-content: center; }
  .toolbar .cg-field .cg-trigger, .toolbar .daterange { width: 100%; justify-content: flex-start; }
  /* pagers wrap instead of forcing page-level horizontal scroll */
  .tbl-head .pager, .data-toolbar .pager { flex-wrap: wrap; justify-content: center; margin-left: 0; }
  /* counter filter bars stack full-width on phones */
  .uc-bar { flex-direction: column; align-items: stretch; }
  .uc-bar > * { width: 100% !important; min-width: 0 !important; }
  .uc-bar .cg-field, .uc-bar .cg-multi, .uc-bar .cg-range { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .uc-bar .cg-trigger, .uc-bar .daterange { width: 100% !important; }
}
.dd { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--color-line-normal); border-radius: var(--radius-6); background: var(--color-bg-base); color: var(--color-fg-strong); font: var(--font-weight-medium) 14px/1 var(--font-family-base); cursor: pointer; white-space: nowrap; }
.dd:hover { border-color: var(--color-line-strong); }
.dd .ic { width: 15px; height: 15px; color: var(--color-fg-neutral); }

/* data table framing */
.tbl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.entries-note { font: var(--font-weight-medium) 13.5px/1 var(--font-family-base); color: var(--color-fg-neutral); }
.pgn { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pgn .pg { min-width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radius-6); cursor: pointer; color: var(--color-fg-neutral); font: var(--font-weight-semibold) 13px/1 var(--font-family-base); border: 1px solid transparent; }
.pgn .pg:hover { background: var(--color-bg-neutral); }
.pgn .pg.on { background: var(--color-primary); color: #fff; }
.pgn .pg.arrow { color: var(--color-fg-alternate); }
.tbl.grouped th { text-align: center; vertical-align: middle; white-space: nowrap; }
.tbl .grp-top, .tbl td.grp-top { border-left: 1px solid var(--color-line-neutral); }
.lk { color: var(--color-informative); font-weight: var(--font-weight-semibold); text-decoration: none; cursor: pointer; }
.lk:hover { text-decoration: underline; }
.dt2 { display: inline-flex; flex-direction: column; line-height: 1.25; }
.dt2 .tm { color: var(--color-fg-alternate); font-size: 12px; }

/* radio group (Include / Not Include, On / Off) */
.radio-row { display: inline-flex; gap: 22px; align-items: center; }
.rc { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: var(--font-weight-medium) 14px/1 var(--font-family-base); color: var(--color-fg-neutral); user-select: none; position: relative; }
.rc input { position: absolute; opacity: 0; width: 0; height: 0; }
.rc .dot { width: 18px; height: 18px; border-radius: var(--radius-full); border: 2px solid var(--color-line-strong); display: inline-grid; place-items: center; flex-shrink: 0; }
.rc .dot::after { content: ''; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-primary); transform: scale(0); transition: transform var(--duration-fast); }
.rc input:checked ~ .dot { border-color: var(--color-primary); }
.rc input:checked ~ .dot::after { transform: scale(1); }
.rc input:checked ~ .tx { color: var(--color-fg-strong); font-weight: var(--font-weight-semibold); }

/* shared toast */
.cg-toast-wrap { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
/* 카드는 작고 조용하게, 타입은 8px 색 점 하나로 알린다 (아이콘은 점으로 대체) */
.cg-toast { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--color-bg-base); border: 1px solid var(--color-line-neutral); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); font: var(--font-weight-semibold) 13.5px/1.45 var(--font-family-base); color: var(--color-fg-strong); pointer-events: auto; animation: cg-toast-in .22s ease-out; max-width: min(460px, calc(100vw - 32px)); }
.cg-toast.out { animation: cg-toast-out .2s ease forwards; }
.cg-toast .tic { width: 8px; height: 8px; border-radius: var(--radius-full); display: block; flex-shrink: 0; }
.cg-toast .tic .ic { display: none; }
.cg-toast.success .tic { background: var(--color-positive); }
.cg-toast.error .tic { background: var(--color-negative); }
.cg-toast.info .tic { background: var(--color-informative); }
.cg-toast .msg { display: block; }
/* 여러 개가 쌓이면 뒤에 것이 조금씩 작아지고 흐려진다 */
.cg-toast-wrap .cg-toast:nth-child(n+2) { transform: scale(.97); opacity: .9; }
.cg-toast-wrap .cg-toast:nth-child(n+3) { transform: scale(.94); opacity: .72; }
@keyframes cg-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes cg-toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* ===== shared tabs — underline + tint; single row, hidden scrollbar, arrows appear only on overflow (E안) =====
   마크업은 .cg-tabs > .tab 그대로 — 화살표 래퍼는 ClubGGShell.mount()가 자동 생성 */
.cg-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--color-line-neutral); overflow-x: auto; margin-bottom: 20px; scrollbar-width: none; }
.cg-tabs::-webkit-scrollbar { display: none; }
.cg-tabs-wrap { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; }
.cg-tabs-wrap .cg-tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.cg-tabs-nav { display: none; flex-shrink: 0; width: 32px; height: 34px; padding: 0; border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); background: var(--color-bg-base); color: var(--color-fg-neutral); cursor: pointer; place-items: center; }
.cg-tabs-nav:hover { border-color: var(--color-line-strong); color: var(--color-fg-strong); }
.cg-tabs-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cg-tabs-wrap.scrollable .cg-tabs-nav { display: grid; }
.cg-tabs .tab { position: relative; flex: 0 0 auto; border: 0; margin: 0; background: transparent; padding: 12px 16px; border-radius: var(--radius-8) var(--radius-8) 0 0; font: var(--font-weight-semibold) 14px/1.2 var(--font-family-base); color: var(--color-fg-neutral); cursor: pointer; white-space: nowrap; box-shadow: none; text-align: center; transition: background var(--duration-fast), color var(--duration-fast); }
.cg-tabs .tab:hover { background: var(--color-bg-neutral); color: var(--color-fg-strong); }
.cg-tabs .tab.active { color: var(--color-primary); background: var(--color-primary-bg); font-weight: var(--font-weight-bold); border: 0; }
.cg-tabs .tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--color-primary); border-radius: 2px; }

/* ===== shared tags & action pills ===== */
.nonmem { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-4); background: var(--color-fg-strong); color: var(--color-bg-base); font: var(--font-weight-semibold) 10.5px/1.5 var(--font-family-base); vertical-align: middle; }
.wsl-btn { min-width: 74px; }
.btn-reset { background: var(--color-informative); color: #fff; min-width: 74px; }
.btn-reset:hover { filter: brightness(.94); }
/* row action icon buttons — 40px square, aligns with adjacent .wsl-btn */
.act-ico { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); background: var(--color-bg-base); color: var(--color-fg-neutral); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.act-ico .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.act-ico.edit:hover { color: var(--color-primary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-base)); }
.act-ico:hover { border-color: var(--color-line-strong); }
.act-ico.reset:hover, .act-ico.del:hover { color: var(--color-negative); border-color: var(--color-negative); background: var(--color-negative-bg); }
.daterange { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--color-line-normal); border-radius: var(--radius-6); background: var(--color-bg-base); color: var(--color-fg-strong); font: var(--font-weight-medium) 14px/1 var(--font-family-base); cursor: pointer; white-space: nowrap; }
.daterange .ic { color: var(--color-fg-neutral); width: 17px; height: 17px; }

/* ===== notes component (Member/Club Information) ===== */
.notes-mini { margin-top: 4px; }
.nm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nm-head .t { font: var(--font-weight-bold) 14px/1.3 var(--font-family-base); color: var(--color-fg-strong); }
.nm-head .add { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: var(--font-weight-semibold) 13px/1 var(--font-family-base); color: var(--color-primary); cursor: pointer; background: none; border: 0; padding: 4px 6px; border-radius: var(--radius-6); }
.nm-head .add:hover { background: var(--color-primary-bg); }
.nm-list { display: flex; flex-direction: column; }
.nm-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: var(--radius-8); cursor: pointer; position: relative; }
.nm-row:hover { background: var(--color-bg-alternate); }
.nm-row .who { font: var(--font-weight-semibold) 12.5px/1.4 var(--font-family-base); color: var(--color-fg-neutral); flex-shrink: 0; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-row .prev { flex: 1; min-width: 0; font: var(--font-weight-medium) 13.5px/1.4 var(--font-family-base); color: var(--color-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-row .prev.empty { color: var(--color-fg-assistive); font-style: italic; }
.nm-row .dt { font: var(--font-weight-medium) 13.5px/1.4 var(--font-family-base); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--color-fg-strong); flex-shrink: 0; }
.nm-row .go { color: var(--color-fg-assistive); flex-shrink: 0; opacity: 0; transition: opacity var(--duration-fast); }
.nm-row:hover .go { opacity: 1; }
/* hover preview popover — full note content */
.nm-pop { position: absolute; left: 10px; right: 10px; top: calc(100% - 2px); z-index: 40; background: var(--color-bg-elevated); border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); box-shadow: var(--shadow-heavy); padding: 11px 13px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity var(--duration-fast), transform var(--duration-fast); }
.nm-row:hover .nm-pop { opacity: 1; transform: translateY(0); }
.nm-pop .pm { font: var(--font-weight-medium) 11.5px/1.3 var(--font-family-base); color: var(--color-fg-alternate); margin-bottom: 5px; }
/* 긴 노트(공백 없는 문자열 포함)도 줄바꿈되고, 너무 길면 팝오버 안에서 스크롤한다 */
.nm-pop .pb { font: var(--font-weight-medium) 13.5px/1.55 var(--font-family-base); color: var(--color-fg-strong); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-height: 260px; overflow-y: auto; }
.nm-pop .pb.empty { color: var(--color-fg-assistive); font-style: italic; }
.cmt-input { position: relative; }
.cmt-input textarea { width: 100%; min-height: 76px; resize: vertical; padding: 11px 12px; border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); background: var(--color-bg-base); color: var(--color-fg-strong); font: var(--font-weight-medium) 14px/1.5 var(--font-family-base); outline: none; }
.cmt-input textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.cmt-list { display: flex; flex-direction: column; }
.cmt { padding: 14px 0; border-top: 1px solid var(--color-line-neutral); }
.cmt .meta { display: flex; align-items: center; gap: 8px; font: var(--font-weight-medium) 12.5px/1.4 var(--font-family-base); color: var(--color-fg-alternate); }
.cmt .meta .who { color: var(--color-fg-neutral); font-weight: var(--font-weight-semibold); }
/* 노트 본문 — 공백 없는 긴 문자열도 줄바꿈, 사용자가 넣은 개행 유지 */
.cmt .body { margin-top: 5px; font: var(--font-weight-medium) 14px/1.5 var(--font-family-base); color: var(--color-fg-strong); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.load-more { text-align: center; padding: 12px 0 2px; }
.load-more span { color: var(--color-primary); font: var(--font-weight-semibold) 13.5px/1 var(--font-family-base); cursor: pointer; }

/* ===== field validation (shared) ===== */
.cg-invalid { border-color: var(--color-negative) !important; }
.cg-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-negative) 14%, transparent) !important; }
.cg-field.cg-invalid > .cg-trigger { border-color: var(--color-negative); }
/* 유효성 에러 메시지 — 인풋 바로 아래 한 줄 (in-flow) */
.cg-err-msg { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 5px; font: var(--font-weight-medium) 12px/1.35 var(--font-family-base); color: var(--color-negative); }
.cg-err-msg[hidden] { display: none; }
.cg-err-msg .eic { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ===== zebra striping — 행 교차 색상 (.tbl.zebra) ===== */
.tbl th { background: var(--color-bg-neutral); } /* 헤더는 지브라 행보다 한 단계 진한 톤 */
.tbl.zebra tbody tr:nth-child(even) { background: var(--color-bg-alternate); }
.tbl tbody tr:hover, .tbl.zebra tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-base)); } /* 호버는 그레이 계열 대신 은은한 그린 틴트 */
/* row focus — 행 클릭 시 위치 유지 (zebra/hover와 별개) */
.tbl.zebra tbody tr.row-focus, .tbl.zebra tbody tr.row-focus:hover, .tbl tbody tr.row-focus { background: color-mix(in srgb, var(--color-primary) 24%, var(--color-bg-base)); }
.tbl tbody tr.row-focus td:first-child { box-shadow: inset 4px 0 0 var(--color-primary); }

/* ===== unified empty state — 리스트/카드 비었을 때 공통 표기 ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 52px 20px; text-align: center; }
.empty-state .es-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-neutral); color: var(--color-fg-assistive); }
.empty-state .es-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.empty-state .es-title { font: var(--font-weight-semibold) 15px/1.3 var(--font-family-base); color: var(--color-fg-strong); }
.empty-state .es-sub { font: var(--font-weight-medium) 13px/1.5 var(--font-family-base); color: var(--color-fg-neutral); max-width: 340px; }
.empty-state .es-title, .empty-state .es-sub { white-space: normal; }
.tbl td > .empty-state { padding: 40px 16px; }
.tbl.zebra tbody tr.es-row td, .tbl.zebra tbody tr.es-row:hover td { background: transparent; }

/* ===== column picker — 컬럼 표시/순서 드롭다운 (.cols-wrap > .cols-btn + .cols-pop) ===== */
.cols-wrap { position: relative; }
.cols-btn { display: inline-flex; align-items: center; gap: 7px; }
.cols-btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cols-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 248px; background: var(--color-bg-base); border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px; }
.cols-pop.open { display: block; }
.cols-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.cols-pop-head .t { font: var(--font-weight-semibold) 11.5px/1 var(--font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--color-fg-assistive); }
.cols-pop-head .rs { border: 0; background: transparent; cursor: pointer; font: var(--font-weight-semibold) 12.5px/1 var(--font-family-base); color: var(--color-primary); padding: 4px 6px; border-radius: var(--radius-6); }
.cols-pop-head .rs:hover { background: var(--color-bg-neutral); }
.cols-list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.col-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius-6); cursor: default; }
.col-item:hover { background: var(--color-bg-neutral); }
.col-item.dragging { opacity: .45; }
.col-item.drop-above { box-shadow: inset 0 2px 0 var(--color-primary); }
.col-item.drop-below { box-shadow: inset 0 -2px 0 var(--color-primary); }
.col-item .grip { color: var(--color-fg-assistive); cursor: grab; display: grid; place-items: center; width: 15px; }
.col-item .grip:active { cursor: grabbing; }
.col-item .grip svg { width: 15px; height: 15px; fill: currentColor; }
.col-item input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.col-item .lbl { font: var(--font-weight-medium) 13.5px/1.2 var(--font-family-base); color: var(--color-fg-strong); flex: 1; }

/* ===== kebab menu (card overflow actions) ===== */
.prof-menu { position: relative; flex-shrink: 0; }
.kebab { width: 34px; height: 34px; border: 0; background: transparent; border-radius: var(--radius-8); color: var(--color-fg-neutral); cursor: pointer; display: grid; place-items: center; }
.kebab:hover { background: var(--color-bg-neutral); color: var(--color-fg-strong); }
.prof-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 180px; background: var(--color-bg-base); border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); box-shadow: var(--shadow-heavy); padding: 6px; display: none; }
.prof-menu.open .prof-menu-pop { display: block; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: var(--radius-6); cursor: pointer; font: var(--font-weight-medium) 14px/1.2 var(--font-family-base); color: var(--color-fg-normal); text-align: left; }
.menu-item:hover { background: var(--color-bg-neutral); }
.menu-item .ic { width: 16px; height: 16px; flex-shrink: 0; }
.menu-item { white-space: nowrap; }
.menu-item.danger { color: var(--color-negative); }
.menu-item.danger:hover { background: var(--color-negative-bg); }

/* ===== segmented control — radio replacement (Option A) ===== */
.cg-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 4px; background: transparent; border: 1px solid var(--color-line-normal); border-radius: var(--radius-8); box-sizing: border-box; }
.cg-seg .si { border: 0; background: transparent; padding: 8px 18px; border-radius: var(--radius-6); font: var(--font-weight-semibold) 13.5px/1.2 var(--font-family-base); color: var(--color-fg-neutral); cursor: pointer; transition: all var(--duration-fast); white-space: nowrap; text-align: center; }
.cg-seg .si:hover { color: var(--color-fg-strong); }
.cg-seg .si.on { background: var(--color-primary); color: #fff; font-weight: var(--font-weight-bold); }
/* full-width variant — fills its container, options split the width equally */
.cg-seg.stretch { display: grid; width: 100%; box-sizing: border-box; }
/* mobile: many-option segmented controls wrap to fit instead of forcing horizontal scroll */
@media (max-width: 560px) {
  .cg-seg.stretch { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); height: auto; }
  .cg-seg.stretch .si { min-width: 0; padding: 0 8px; }
}

/* ===== choice grid — card-radio options (e.g. ban durations) ===== */
.cg-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cg-choice .ci { display: flex; align-items: center; justify-content: center; padding: 12px 10px; border: 1.5px solid var(--color-line-normal); background: var(--color-bg-base); border-radius: var(--radius-8); font: var(--font-weight-semibold) 13.5px/1.3 var(--font-family-base); color: var(--color-fg-neutral); cursor: pointer; text-align: center; transition: all var(--duration-fast); }
.cg-choice .ci:hover { border-color: var(--color-line-strong); color: var(--color-fg-strong); }
.cg-choice .ci.on { border-color: var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); font-weight: var(--font-weight-bold); }
@media (max-width: 560px) { .cg-choice { grid-template-columns: repeat(2, 1fr); } }

/* ===== unified control rounding — all buttons & segmented controls share --radius-8 ===== */
.btn, .btn-sm, .btn-xs, .wsl-btn, .btn-reset, .pill-tab,
.cg-seg, .cg-seg .si, .pgn .pg, .dd { border-radius: var(--radius-8); }

/* ===== unified control height — every action button matches inputs (40px) ===== */
.btn, .btn-sm, .btn-xs, .wsl-btn, .btn-reset, .pill-tab { height: 40px; }
.cg-seg { padding: 3px; } /* 3 + 32 + 3 + 2px border = 40 total */
.cg-seg .si { height: 32px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; } /* 4+32+4 = 40 total */

/* ===== paired buttons — equal widths, the widest wins ===== */
.btn-row { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: 10px; }

/* ===== dropdown popups: size to longest option, never wrap ===== */
.cg-pop { width: max-content; min-width: 100%; }
.cg-opt { white-space: nowrap; }
/* closed popups must not occupy layout — a hidden 670px-wide range popup was adding phantom
   horizontal scroll at tablet widths (opacity:0 keeps it in flow; clamp it to 0×0 instead).
   Open-state slide/fade is unaffected: the transition animates opacity/transform only.
   ⚠ direct child (>) only — selects are often nested inside a hand-written .cg-field wrapper,
   and a descendant selector would keep the popup clamped even when its own field is open. */
.cg-field:not(.open) > .cg-pop { max-width: 0; max-height: 0; overflow: hidden; border-width: 0; padding: 0; }
.cg-color .cg-pop { width: 212px; }

/* ===== date range picker (기간 선택) ===== */
.cg-range-field { display: inline-block; }
.cg-range-pop { padding: 12px; }
.cg-rp-wrap { display: flex; gap: 14px; }
.cg-presets { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; border-right: 1px solid var(--color-line-neutral); min-width: 118px; }
.cg-presets button { border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: var(--radius-6); font: var(--font-weight-medium) 13px/1.2 var(--font-family-base); color: var(--color-fg-neutral); cursor: pointer; white-space: nowrap; }
.cg-presets button:hover { background: var(--color-bg-neutral); color: var(--color-fg-strong); }
.cg-rp { display: flex; gap: 18px; }
.cg-rp .cg-cal + .cg-cal { border-left: 1px solid var(--color-line-neutral); padding-left: 18px; }
.cg-day.ir { background: var(--color-primary-bg); color: var(--color-fg-strong); border-radius: 0; }
.cg-range-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--color-line-neutral); }
.cg-range-note { margin-right: auto; align-self: center; font: var(--font-weight-medium) 12.5px/1.4 var(--font-family-base); color: var(--color-fg-assistive); }
.cg-range-note.err { color: var(--color-negative); }
/* 종료일 확정 전 hover 미리보기 — 확정 선택(짙은 초록)과 구분해 테두리·연한 틴트로 */
.cg-day.sel.pv { background: transparent; color: var(--color-fg-strong); box-shadow: inset 0 0 0 2px var(--color-primary); }
.cg-day.ir.pv { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.cg-range-time { display: flex; gap: 14px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--color-line-neutral); }
.cg-range-time label { flex: 1; display: flex; flex-direction: column; gap: 6px; font: var(--font-weight-semibold) 12px/1.3 var(--font-family-base); color: var(--color-fg-assistive); }
.cg-range-time .cg-rt { height: 40px; text-align: center; font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
@media (max-width: 640px) { .cg-rp, .cg-rp-wrap { flex-direction: column; } .cg-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; padding-right: 0; min-width: 0; border-bottom: 1px solid var(--color-line-neutral); padding-bottom: 8px; } .cg-rp .cg-cal + .cg-cal { border-left: 0; padding-left: 0; } }

/* ===== skeleton page-load (shared, per-item bones) ===== */
html[data-cg-load] { overflow: hidden; }
/* instant flat cover (CSS-only, before JS runs) */
html[data-cg-load]::before { content: ''; position: fixed; inset: 0; z-index: 500; background: var(--color-bg-alternate); pointer-events: none; transition: opacity .25s ease; }
html[data-cg-load="done"]::before { opacity: 0; }

/* bone primitive — each item shimmers on its own */
.sk { position: relative; overflow: hidden; background: var(--color-bg-neutral); border-radius: var(--radius-6); flex-shrink: 0; }
.sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: cg-skm 1.2s ease-in-out infinite; }
[data-theme="dark"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@keyframes cg-skm { to { transform: translateX(100%); } }
.sk.circle { border-radius: var(--radius-full); }
.sk.pill { border-radius: var(--radius-full); }

/* skeleton layout (built by ClubGGShell) */
.cg-skel { position: fixed; inset: 0; z-index: 501; display: flex; background: var(--color-bg-alternate); opacity: 1; transition: opacity .25s ease; }
.cg-skel.hide { opacity: 0; pointer-events: none; }
.cg-skel .sk-rail { width: 232px; flex-shrink: 0; background: var(--color-bg-base); border-right: 1px solid var(--color-line-neutral); padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.cg-skel .sk-rail .grp { margin-top: 14px; }
.cg-skel .sk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-skel .sk-topbar { height: 60px; flex-shrink: 0; background: var(--color-bg-base); border-bottom: 1px solid var(--color-line-neutral); display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 28px; }
.cg-skel .sk-canvas { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; overflow: hidden; }
.cg-skel .sk-card { background: var(--color-bg-base); border: 1px solid var(--color-line-neutral); border-radius: var(--radius-12); padding: 20px; }
.cg-skel .sk-row { display: flex; gap: 12px; align-items: center; }
.cg-skel .sk-cells { display: flex; gap: 16px; align-items: center; }
.cg-skel .sk-cells .sk { height: 14px; }
.cg-skel .sk-detail { display: grid; grid-template-columns: 620px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1340px) { .cg-skel .sk-detail { grid-template-columns: 1fr; } }
@media (max-width: 920px) { .cg-skel .sk-rail { display: none; } }

@media (max-width: 720px) { .club-switch { padding: 0 10px; gap: 6px; } .club-switch .nm { max-width: 96px; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 560px) { .club-switch .nm, .utc-chip { display: none; } }

/* hover-to-copy button (all .tbl; opt out a table with .no-copy) */
.tbl td { position: relative; }
.cg-copy-btn {
  position: fixed; z-index: 60; transform: translate(-50%, -50%);
  width: 26px; height: 26px; padding: 0; margin: 0;
  display: none; align-items: center; justify-content: center;
  background: var(--color-bg-base); color: var(--color-fg-alternate);
  border: 1px solid var(--color-line-neutral); border-radius: var(--radius-8);
  box-shadow: 0 2px 8px rgba(0,0,0,.14); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.cg-copy-btn.show { display: inline-flex; }
.cg-copy-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-base)); }
.cg-copy-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cg-copy-btn .c-ok { display: none; }
.cg-copy-btn.done { color: var(--color-primary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-base)); }
.cg-copy-btn.done .c-i { display: none; }
.cg-copy-btn.done .c-ok { display: block; }

/* ===== button loading state (ClubGGShell.btnLoading) ===== */
.btn.is-loading { position: relative; pointer-events: none; cursor: default; }
.btn.is-loading > .cg-btn-lbl { display: inline-flex; align-items: center; gap: 8px; }
.cg-spin { display: inline-block; width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .9; animation: cg-spin .6s linear infinite; }
@keyframes cg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cg-spin { animation-duration: 1.2s; } }

/* 모달 오픈 모션 — 스크림은 페이드, 본체는 0.96 → 1 스케일 + 페이드 (전 페이지 공통) */
@keyframes cg-modal-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
/* fill-mode 는 backwards — forwards 로 transform 이 남으면 모달이 fixed 요소의 기준 컨테이너가 돼 드롭다운 위치가 어긋난다 */
.modal-backdrop { animation: cg-modal-scrim 160ms linear backwards; }
.modal-backdrop > .modal { animation: cg-modal-in 170ms cubic-bezier(.2,.8,.2,1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-backdrop > .modal { animation: cg-modal-scrim 100ms linear backwards; }
}


/* ── 생성 모달 그룹 골격 (Table Setup 오픈 + 아코디언) ───────────────── */
.cgrp { border: 1px solid var(--color-line-normal); border-radius: var(--radius-12); background: var(--color-bg-base); padding: 18px; margin-bottom: 12px; }
.cgrp > .gh:first-child { margin-top: -4px; }
.cgrp > .gh { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 14px 0; font: var(--font-weight-bold) 16px/1.3 var(--font-family-base); color: var(--color-fg-strong); }
.cacc { border: 1px solid var(--color-line-normal); border-radius: var(--radius-12); background: var(--color-bg-base); margin-bottom: 12px; }
.cacc:last-child, .cgrp:last-child { margin-bottom: 0; }
.cacc > .ah { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 11px 18px; cursor: pointer; user-select: none; border-radius: var(--radius-12); transition: background var(--duration-fast); }
.cacc > .ah:hover { background: var(--color-bg-alternate); }
.cacc.open > .ah { border-radius: var(--radius-12) var(--radius-12) 0 0; }
.cacc > .ah .ahl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cacc > .ah .aht { display: flex; align-items: center; gap: 10px; font: var(--font-weight-bold) 16px/1.3 var(--font-family-base); color: var(--color-fg-neutral); transition: color var(--duration-fast); }
.cacc.open > .ah .aht { color: var(--color-fg-strong); }
.cacc > .ah .ahn { padding: 2px 9px; border-radius: var(--radius-full); background: var(--color-primary-bg); color: var(--color-primary); font: var(--font-weight-bold) 11.5px/1.6 var(--font-family-mono); font-variant-numeric: tabular-nums; }
.cacc > .ah .ahs { font: var(--font-weight-medium) 12.5px/1.4 var(--font-family-base); color: var(--color-fg-assistive); }
.cacc.open > .ah .ahs { display: none; }
.cacc > .ah .ahc { flex: none; color: var(--color-fg-assistive); transition: transform var(--duration-base); }
.cacc.open > .ah .ahc { transform: rotate(180deg); }
.cacc > .ab { display: none; padding: 0 18px 18px; }
.cacc.open > .ab { display: block; }
/* 그룹 내부 2단 배치 — .fsec 카드를 좌우로 채운다 */
.gcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.gcols > .gcol { min-width: 0; }
.gcols > .gcol > .fsec:last-child { margin-bottom: 12px; }
@media (max-width: 1120px) { .gcols { grid-template-columns: 1fr; } }
/* 생성 모달 — 좌/우 컬럼 독립 스크롤 */
.ct-modal .modal-body { display: flex; overflow: hidden; padding-right: 12px; }
.ct-modal .modal-body > .gcols.ct-split { flex: 1; min-height: 0; align-items: stretch; }
.gcols.ct-split > .gcol { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 12px; scrollbar-gutter: stable; }
@media (max-width: 1120px) {
  .ct-modal .modal-body { display: block; overflow-y: auto; padding-right: 24px; }
  .gcols.ct-split > .gcol { overflow: visible; padding-right: 0; }
}

/* 생성 모달 — 옵션 노출 패널 (Tournament Format / Ring Game Mode 공용) */
.fmt-panel { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--color-line-neutral); border-radius: var(--radius-8); background: var(--color-bg-alternate); }
.fmt-panel + .fmt-panel { margin-top: 12px; }
.fmt-panel > .st { display: flex; align-items: center; gap: 8px; font: var(--font-weight-bold) 13px/1 var(--font-family-base); color: var(--color-fg-alternate); margin-bottom: 14px; }
.fmt-note { font: var(--font-weight-medium) 12.5px/1.6 var(--font-family-base); color: var(--color-fg-assistive); margin-top: 12px; }

/* ===== 2026-08-14 페이지 중복 CSS 승격 (3개 이상 페이지 공통, 동일 본문만) =====
   Counter/Send Ticket 전송 UI(.uc-*, .xfer*, .xp-*, .mv, .trade-bar, .rcp-*, #rcp-table, #cfm-*, .addall, .bi*),
   생성 모달 공통(.ct-*, .fsec, .tgl*, .fgrid, .nest, .opt*, #auth-modal), Detail 공통(.ti-*, .kebab-sm, .stat*) */
.uc-sums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.uc-sum { display: flex; align-items: center; gap: 16px; border: 1px solid var(--color-line-neutral); border-radius: var(--radius-12, 12px); padding: 20px 22px; background: var(--color-bg-base); box-shadow: var(--shadow-subtle); }
.uc-sum .ic-wrap { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-12, 12px); background: var(--color-primary-bg); color: var(--color-primary); }
.uc-sum .ic-wrap svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uc-sum.tot .ic-wrap { background: color-mix(in srgb, var(--color-informative) 14%, transparent); color: var(--color-informative); }
.uc-sum .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uc-sum .k { font: var(--font-weight-semibold) 13px/1.3 var(--font-family-base); color: var(--color-fg-neutral); }
.uc-sum .v { font: var(--font-weight-bold) 26px/1 var(--font-family-mono); color: var(--color-fg-strong); font-variant-numeric: tabular-nums; }
.uc-sum .v.inf { color: var(--color-primary); }
.xfer { display: grid; grid-template-columns: 0.82fr 1fr; gap: 16px; align-items: start; }
.xfer-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mv { width: 30px; height: 30px; border-radius: var(--radius-8); border: 1px solid var(--color-line-normal); background: var(--color-bg-base); color: var(--color-primary); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.mv:hover { background: var(--color-primary-bg); border-color: var(--color-primary); }
.mv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mv.back { color: var(--color-fg-neutral); }
.mv.back:hover { background: var(--color-bg-neutral); border-color: var(--color-line-strong); color: var(--color-fg-strong); }
.xp-count.inline { margin-left: 8px; }
.addall { display: inline-flex; align-items: center; gap: 6px; }
.xfer-pane { border: 1px solid var(--color-line-neutral); border-radius: var(--radius-8); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.xp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 2px; }
.xp-title { font: var(--font-weight-bold) 15px/1.2 var(--font-family-base); color: var(--color-fg-strong); white-space: nowrap; flex-shrink: 0; }
.xp-count { font: var(--font-weight-semibold) 13px/1 var(--font-family-mono); color: var(--color-fg-neutral); }
.xfer-scroll { overflow: auto; max-height: calc(100dvh - 372px); min-height: 300px; }
.xfer-scroll table.tbl { min-width: 100%; width: 100%; table-layout: fixed; }
.xfer-scroll table.tbl .dt2 .d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xfer-scroll table.tbl th, .xfer-scroll table.tbl td { padding-left: 12px; padding-right: 12px; }
#rcp-table tbody td { height: 52px; }
.xfer-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--color-line-neutral); background: var(--color-bg-base); }
.xfer-tools .entries-note { margin: 0; }
.xfer-tools .pgn { margin: 0; }
.rcp-empty { text-align: center; padding: 60px 16px; color: var(--color-fg-neutral); font: var(--font-weight-regular) 13px/1.5 var(--font-family-base); }
.fillmax { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; font: var(--font-weight-semibold) 12.5px/1 var(--font-family-base); color: var(--color-fg-normal); cursor: pointer; }
.fillmax[hidden] { display: none; }
.rcp-amt { width: 100%; text-align: right; background: var(--color-bg-base); }
.trade-bar { position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 20px; padding: 14px 28px; background: var(--color-bg-base); border-top: 1px solid var(--color-line-neutral); box-shadow: 0 -4px 18px rgba(16,24,40,.08); }
.trade-bar[hidden] { display: none; }
[data-tab-panel="trade"] { padding-bottom: 84px; }
.trade-bar .tb-warn { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; font: var(--font-weight-regular) 12.5px/1.5 var(--font-family-base); color: var(--color-fg-neutral); }
.trade-bar .tb-warn svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--color-cautionary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trade-bar .tb-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.trade-bar .tb-cost { display: grid; grid-template-columns: auto; justify-items: end; gap: 2px; text-align: right; }
.trade-bar .tb-cost-k { font: var(--font-weight-bold) 12px/1.2 var(--font-family-base); color: var(--color-fg-strong); }
.trade-bar .tb-cost-note { font: var(--font-weight-regular) 11.5px/1.2 var(--font-family-base); color: var(--color-fg-neutral); }
.trade-bar .tb-cost-v { font: var(--font-weight-bold) 22px/1 var(--font-family-mono); color: var(--color-cautionary); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pgn .pg.disabled { opacity: .4; pointer-events: none; }
.cfm-lead { margin: 6px 0 14px; font: var(--font-weight-medium) 14px/1.6 var(--font-family-base); color: var(--color-fg-normal); }
.cfm-lead b { color: var(--color-fg-strong); }
#cfm-modal .modal-body { overflow-x: hidden; }
#cfm-modal .tbl th:first-child, #cfm-modal .tbl td:first-child { padding-left: 20px; }
#cfm-modal .tbl th:last-child, #cfm-modal .tbl td:last-child { padding-right: 20px; }
#cfm-rows td { height: 48px; }
.cfm-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-8); background: var(--color-bg-alternate); }
.cfm-total span { font: var(--font-weight-semibold) 13.5px/1 var(--font-family-base); color: var(--color-fg-neutral); }
.cfm-total b { font: var(--font-weight-bold) 20px/1 var(--font-family-mono); color: var(--color-fg-strong); font-variant-numeric: tabular-nums; }
.kebab-sm { width: 28px; height: 28px; }
.kebab-sm .ic { width: 18px; height: 18px; }
#row-menu.open { display: block; }
.detail-grid { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 20px; align-items: start; }
.detail-grid > * { min-width: 0; }
.ti-sec { font: var(--font-weight-bold) 12px/1 var(--font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--color-fg-alternate); padding: 18px 0 8px; border-bottom: 1px solid var(--color-line-neutral); }
.ti-sec:first-child { padding-top: 4px; }
.ti-info { display: grid; grid-template-columns: 210px 1fr; margin: 0; }
.ti-info dt { min-width: 0; padding: 11px 0; font: var(--font-weight-medium) 13.5px/1.4 var(--font-family-base); color: var(--color-fg-neutral); border-bottom: 1px solid var(--color-line-neutral); display: flex; align-items: center; }
.ti-info dt:last-of-type, .ti-info dd:last-of-type { border-bottom: 0; }
.ti-info dd.mono { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }
.ti-info .off { color: var(--color-fg-assistive); font-weight: var(--font-weight-medium); }
.ti-info .link { color: var(--color-informative); cursor: pointer; }
.ti-info .link:hover { text-decoration: underline; }
.bi { padding-top: 2px; }
.bi-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.bi-out .k { font: var(--font-weight-semibold) 12px/1 var(--font-family-base); color: var(--color-fg-assistive); margin-right: 7px; }
.bi-out b { font: var(--font-weight-bold) 19px/1 var(--font-family-mono); color: var(--color-fg-strong); font-variant-numeric: tabular-nums; }
.bi-out.r { text-align: right; }
.bi-rail-wrap { position: relative; height: 24px; display: flex; align-items: center; }
.bi-rail { position: absolute; left: 0; right: 0; height: 6px; border-radius: var(--radius-full); background: var(--color-line-neutral); }
.bi-fill { position: absolute; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); }
.bi-rail-wrap input[type=range] { position: absolute; left: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; height: 24px; }
.bi-rail-wrap input[type=range]::-webkit-slider-runnable-track { height: 6px; background: transparent; border: none; }
.bi-rail-wrap input[type=range]::-moz-range-track { height: 6px; background: transparent; border: none; }
.bi-rail-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: -6px; border-radius: var(--radius-full); background: #fff; border: 3px solid var(--color-primary); box-shadow: 0 1px 3px rgba(16,24,40,.24); cursor: pointer; }
.bi-rail-wrap input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 3px solid var(--color-primary); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.24); cursor: pointer; }
.bi-scale { display: flex; justify-content: space-between; margin-top: 8px; font: var(--font-weight-medium) 11px/1 var(--font-family-mono); color: var(--color-fg-assistive); font-variant-numeric: tabular-nums; }
.ti-info dd { min-width: 0; margin: 0; padding: 11px 0; font: var(--font-weight-semibold) 13.5px/1.4 var(--font-family-base); color: var(--color-fg-strong); border-bottom: 1px solid var(--color-line-neutral); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding-top: 12px; }
.optc { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--color-line-neutral); border-radius: var(--radius-8); min-width: 0; background: var(--color-bg-base); }
.optc .top { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; }
.optc .nm { font: var(--font-weight-semibold) 12.5px/1.3 var(--font-family-base); color: var(--color-fg-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.optc .stt { margin-left: auto; flex: none; font: var(--font-weight-bold) 11px/1 var(--font-family-base); }
.optc .dtl { font: var(--font-weight-medium) 11.5px/1.4 var(--font-family-base); color: var(--color-fg-neutral); min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.optc.on { border-color: var(--color-primary); background: var(--color-primary-bg); }
.optc.on .stt { color: var(--color-primary); display: inline-flex; align-items: center; gap: 5px; }
.optc.on .stt::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.optc.off { background: var(--color-bg-alternate); border-color: var(--color-line-neutral); }
.optc.off .nm { color: var(--color-fg-assistive); font-weight: var(--font-weight-medium); }
.optc.off .stt { color: var(--color-fg-assistive); font-weight: var(--font-weight-medium); }
#auth-modal .modal-body { padding: 10px 12px 16px; overflow-x: hidden; }
#auth-modal .tbl { width: 100%; }
#auth-modal .tbl th { padding: 14px 12px; white-space: nowrap; }
#auth-modal .tbl td { padding: 16px 12px; }
#auth-modal .tbl td .wsl-btn { min-width: 84px; }
#auth-modal .app-ck { width: 17px; height: 17px; accent-color: var(--color-primary); cursor: pointer; vertical-align: middle; }
#auth-modal .modal-foot { align-items: center; justify-content: flex-end; }
#auth-modal .bulk { display: none; align-items: center; gap: 10px; }
#auth-modal .bulk .btn { min-width: 84px; }
#auth-modal .bulk .sel-note { font: var(--font-weight-medium) 13px/1 var(--font-family-base); color: var(--color-fg-neutral); font-variant-numeric: tabular-nums; }
.ct-modal { width: min(1320px, 100%); }
.fsec { background: var(--color-bg-base); border: 1px solid var(--color-line-normal); border-radius: var(--radius-12); padding: 15px 16px 17px; margin-bottom: 12px; }
.fsec:last-child { margin-bottom: 0; }
.fsec > .st { display: flex; align-items: center; gap: 8px; font: var(--font-weight-semibold) 13px/1.3 var(--font-family-base); color: var(--color-fg-normal); margin-bottom: 14px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.fgrid .span2 { grid-column: 1 / -1; }
.fld > label { display: flex; align-items: center; gap: 6px; font: var(--font-weight-semibold) 13px/1.3 var(--font-family-base); color: var(--color-fg-normal); margin-bottom: 7px; }
.tgl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.tgl { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--color-line-neutral); border-radius: var(--radius-8); background: var(--color-bg-base); }
.tgl .tl { display: flex; align-items: center; gap: 6px; font: var(--font-weight-semibold) 13px/1.3 var(--font-family-base); color: var(--color-fg-normal); min-width: 0; }
.tgl .switch { margin-left: auto; }
.nest.show { display: grid; }
.tgl.has-sub { flex-direction: column; align-items: stretch; grid-column: 1 / -1; }
.tgl.has-sub .tgl-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tgl.has-sub .tgl-head .switch { margin-left: auto; flex: none; }
.fsec .tgl-grid { grid-template-columns: 1fr; gap: 0; }
.fsec .tgl { border: 0; background: transparent; border-radius: 0; padding: 11px 2px; }
.fsec .tgl + .tgl { border-top: 1px solid var(--color-line-neutral); }
.fsec .tgl.has-sub { padding-bottom: 13px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--color-line-neutral); border-radius: var(--radius-8); padding: 12px 14px; background: var(--color-bg-base); }
.stat .sl { font: var(--font-weight-medium) 12px/1.3 var(--font-family-base); color: var(--color-fg-alternate); margin-bottom: 5px; white-space: nowrap; }
.stat .sv { font: var(--font-weight-bold) 17px/1.2 var(--font-family-mono); font-variant-numeric: tabular-nums; color: var(--color-fg-strong); }
.optc .dtl .lk2 { color: var(--color-informative); cursor: pointer; }

/* ===== 2026-08-14 후속 수정(P0/P1): 페이지 변형 modifier + 반응형 규칙 승격 ===== */
.detail-grid.narrow { grid-template-columns: 620px minmax(0, 1fr); }
.ti-info.tight { grid-template-columns: 190px 1fr; }
.ti-info.loose dd { line-height: 1.5; }
.xfer.even { grid-template-columns: 1fr 1fr; }
.xfer-scroll.tall { max-height: calc(100dvh - 300px); }
.bi-head.right { justify-content: flex-end; }
.bi-head.right .bi-out .k { margin-left: 7px; margin-right: 0; }
.fld.stacked > label { display: block; }
@media (max-width: 1340px) { .detail-grid, .detail-grid.narrow { grid-template-columns: 1fr; } }
@media (max-width: 920px) { .uc-sums { grid-template-columns: 1fr; } .xfer, .xfer.even { grid-template-columns: 1fr; } .trade-bar { left: 0; } }
@media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .opt-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { #auth-modal .modal-body { overflow-x: auto; } #auth-modal .tbl { min-width: 760px; } }
@media (max-width: 640px) { .fgrid, .tgl-grid, .nest { grid-template-columns: minmax(0,1fr); } }

/* Status pill — 클라이언트 로비 기준 솔리드 알약. 색은 --tsb-c (ClubGGShell.statusPill) */
.tsb { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--radius-full);
       background: var(--tsb-c); color: #fff; border: 0;
       font: var(--font-weight-bold) 12.5px/1 var(--font-family-base); letter-spacing: .01em; white-space: nowrap; }

/* 호버 상세가 붙은 배지 (모드·타입 설정값) — 칩의 .det 와 같은 규칙 */
.badge.det { cursor: help; }
.badge.det::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }