/* 구단·인물 설정 화면 (DESIGN 08 · 2026-10-21 Claude)
   - 값은 전부 tokens.css 토큰이다. 상단 내비·브랜드·푸터·버튼 기본은 styles.css 규칙을 그대로 쓴다.
   - 프레임 두 개: 왼쪽 로스터(오렌지 윗선 = 보조 정보), 오른쪽 시트(라임 윗선 = 지금 조작 중인 것).
   - 입력은 바탕색 위에 강한 경계선 한 줄. 포커스는 라임 2px 외곽선(styles.css 공통). 오류는 실패색 글자 + 경계선. */

/* 상단 내비는 index.html 의 버튼 규칙과 같은 모양의 링크 */
.site-nav a { display: inline-flex; align-items: center; height: 100%; color: var(--color-muted); padding: 0 3px; font-size: var(--fs-13); font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--color-ink); }

.office .shell { max-width: 1300px; }
.office-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.office-title h1 { font: 750 var(--fs-23)/var(--lh-tight) var(--font-ui); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-1); }
.office-lede { margin: 0; max-width: 64ch; color: var(--color-ink-2); font-size: var(--fs-12); line-height: var(--lh-ui); }
.office .category { margin-bottom: var(--sp-1); }

/* 주 버튼 — 중계 화면의 판정 "먹혔다"·"경기 시작"과 같은 라임 블록 */
.office button.primary { background: var(--color-accent); color: var(--color-accent-ink); border: 0; font: 700 var(--fs-12) var(--font-emphasis); min-height: 36px; padding: 6px 16px; border-radius: var(--r-2); white-space: nowrap; }
.office button.primary:hover:not(:disabled) { filter: brightness(1.08); }
.office button.primary:disabled { opacity: .45; cursor: default; }
.office button:not(.primary) { border-radius: var(--r-2); background: var(--color-surface-3); border-color: var(--color-line); font-size: var(--fs-12); min-height: 36px; padding: 6px 12px; }
.office button.autofill { background: transparent; border: 1px dashed var(--color-line-strong); color: var(--color-muted); font-weight: 600; }
.office button.sample { font-weight: 600; }
.sheet-guide { margin: var(--sp-1) 0 0; font-size: var(--fs-12); color: var(--color-muted); line-height: var(--lh-ui); max-width: 60ch; }
.sheet-guide.is-progress { color: var(--color-ink-2); }
.sheet-guide b { color: var(--color-accent); font-weight: 600; }
/* 설정 칸 위 길잡이 칩: 누르면 그 항목의 머리말을 본문에 넣는다 */
.guides { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 2px; }
.office .guides button { min-height: 22px; padding: 1px 8px; font-size: var(--fs-10); line-height: 1.4; border-radius: var(--r-1); background: transparent; border: 1px solid var(--color-line); color: var(--color-muted); }
.office .guides button:hover { color: var(--color-ink); border-color: var(--color-line-strong); }
.office .guides button.is-used { color: var(--color-ink-2); border-color: var(--color-line-strong); background: var(--color-surface-3); }
.count.is-zero { visibility: hidden; }
.office button.autofill:disabled { cursor: default; }
.sheet-tools { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.office button:not(.primary):hover:not(:disabled) { border-color: var(--color-accent); }

/* 상단 알림 띠 — 중계 화면 status-strip 과 같은 문법 */
.office-status { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); background: var(--color-surface-2); border: 1px solid var(--color-line-strong); border-left: 3px solid var(--color-signal); font-size: var(--fs-12); color: var(--color-ink-2); }
.office-status .notice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal); flex: none; }
.office-status.is-good { border-left-color: var(--color-good); } .office-status.is-good .notice-dot { background: var(--color-good); }
.office-status #statusText { flex: 1; min-width: 0; line-height: var(--lh-ui); }
.office-status button { min-height: 32px; padding: 4px 10px; font-size: var(--fs-11); }
.office-status #statusDismiss { font-size: var(--fs-14); padding: 0 8px; }

/* 두 프레임 */
.office-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.roster, .sheet { background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--r-frame); box-shadow: var(--shadow-frame); min-width: 0; }
.roster { border-top: 3px solid var(--color-signal); }
.sheet { border-top: 3px solid var(--color-accent); }

/* 로스터 */
.roster-head, .squad-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.roster-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--color-line); }
.roster-head strong, .squad-head strong { font: 700 var(--fs-13) var(--font-emphasis); }
.roster-head small, .squad-head small { color: var(--color-muted); font-size: var(--fs-11); }
.roster-list { display: grid; }
.club-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; text-align: left; width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--color-line); border-radius: 0; background: transparent; color: inherit; min-height: 0; transition: background var(--dur-1), border-color var(--dur-1); }
.club-card:hover { background: var(--color-surface-2); }
/* 왼쪽 띠: 구단이 고른 팀 색(palette.mjs). 버튼 공통 테두리 규칙과 겹치지 않게 그림 요소로 둔다. */
.office .club-card { position: relative; padding-left: calc(var(--sp-3) + 4px); }
.club-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--club, var(--color-line-strong)); }
.club-card[aria-current="true"] { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.club-card img { width: 32px; height: 32px; object-fit: contain; }
.club-card .club-name { display: block; font: 700 var(--fs-13) var(--font-emphasis); letter-spacing: var(--ls-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-card .club-world { display: block; font-size: var(--fs-11); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-card .club-actors { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: 2px; }
.club-card .club-actors span { font-size: var(--fs-10); color: var(--color-ink-2); background: var(--color-surface-3); padding: 1px 6px; border-radius: var(--r-1); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-card .club-rev { font: 500 var(--fs-10) var(--font-ui); color: var(--color-muted); letter-spacing: var(--ls-label); transform: skewX(var(--skew-soft)); border: 1px solid var(--color-line); padding: 2px 6px; }
.club-card .club-rev.is-draft { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.roster-empty { padding: var(--sp-5) var(--sp-3); display: grid; gap: var(--sp-2); color: var(--color-ink-2); font-size: var(--fs-12); line-height: var(--lh-ui); }
.roster-empty b { font: 700 var(--fs-14) var(--font-emphasis); color: var(--color-ink); }
.roster-foot { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-11); color: var(--color-muted); }
.roster-foot a { color: var(--color-accent); text-decoration: none; }
.roster-foot a:hover { text-decoration: underline; }

/* 시트 */
.sheet form[inert] { opacity: .55; }
.sheet form { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.sheet-head h2 { font: 400 var(--fs-28)/1 var(--font-display); color: var(--color-accent); letter-spacing: var(--ls-display); margin: 4px 0 0; font-synthesis: none; overflow-wrap: anywhere; }
.sheet-head h2.is-placeholder { color: var(--color-muted); }
.sheet-crest img { display: block; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 8px #0c12202e); }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-3); }
.field { display: grid; gap: 3px; min-width: 0; }
.field-label { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-11); color: var(--color-ink-2); letter-spacing: .02em; }
.field-label em { font-style: normal; font-size: var(--fs-10); color: var(--color-signal); letter-spacing: var(--ls-label); }
.field-label small { font-size: var(--fs-10); color: var(--color-muted); }
.field input, .field textarea, .field select { width: 100%; background: var(--color-bg); border: 1px solid var(--color-line-strong); color: var(--color-ink); font: var(--fs-13)/var(--lh-ui) var(--font-ui); padding: 7px 10px; border-radius: var(--r-2); min-height: 36px; transition: border-color var(--dur-1); }
.field textarea { resize: vertical; line-height: 1.6; font-size: var(--fs-12); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-muted); }
.field select { background: var(--color-surface-3); cursor: pointer; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--color-bad); }
.field-foot { display: flex; justify-content: space-between; gap: var(--sp-2); min-height: 14px; font-size: var(--fs-10); line-height: 1.3; }
.field-error { color: var(--color-bad); }
.count { color: var(--color-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.count.is-near { color: var(--color-signal); }

.squad-head { margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--color-line); }
.squad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.actor-card { background: var(--color-surface-2); border: 1px solid var(--color-line); padding: var(--sp-2) var(--sp-3) var(--sp-1); display: grid; gap: var(--sp-1); min-width: 0; }
.actor-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.actor-slot { display: grid; place-items: center; width: 22px; height: 22px; font: 700 var(--fs-11) var(--font-emphasis); color: var(--color-accent-ink); background: var(--color-accent); transform: skewX(var(--skew)); flex: none; }
.actor-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-2); }
.actor-mirror { font: 700 var(--fs-13) var(--font-emphasis); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actor-mirror.is-placeholder { color: var(--color-muted); font-weight: 400; font-family: var(--font-ui); }

/* 경기장 캐릭터 (C-016): 인물 카드 아래 칸. 위는 경기장과 같은 남색 격자 띠에 경기 크기 캐릭터,
   아래는 시트의 네 방향 줄. 등록 시트는 원래 색, 기본 실루엣은 팀 색 덧칠(경기장과 같음). */
.sprite-slot { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); padding: var(--sp-2) 0 var(--sp-1); border-top: 1px dashed var(--color-line-strong); border-radius: var(--r-1); transition: background var(--dur-1), outline-color var(--dur-1); outline: 2px dashed transparent; outline-offset: 3px; }
.sprite-slot.is-drag { outline-color: var(--color-accent); background: var(--color-surface-3); }
.sprite-slot.is-busy .sprite-body { opacity: .6; }
.sprite-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.sprite-state { font: 600 var(--fs-10) var(--font-ui); color: var(--color-muted); border: 1px solid var(--color-line); padding: 1px 7px; border-radius: var(--r-1); white-space: nowrap; }
.sprite-slot.is-custom .sprite-state { color: var(--color-ink-2); border-color: var(--color-line-strong); }
.sprite-slot .sprite-state.is-new { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.sprite-body { display: grid; gap: var(--sp-1); }
.sprite-stage { display: block; width: 100%; height: 150px; border-radius: var(--r-2); background: var(--color-stage-2); box-shadow: inset 0 0 0 1px #ffffff14; }
.sprite-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.office .sprite-actions button { min-height: 30px; padding: 3px 10px; font-size: var(--fs-11); }
.office .sprite-actions .sprite-upload { font-weight: 700; }
.office .sprite-actions .sprite-remove { background: transparent; border-style: dashed; color: var(--color-muted); }
.sprite-note { margin: 0; font-size: var(--fs-11); line-height: var(--lh-ui); color: var(--color-muted); }
.sprite-note.is-error { color: var(--color-bad); }

.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); border-top: 1px solid var(--color-line); }
.sheet-status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--color-muted); min-width: 0; }
.sheet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-muted); flex: none; }
.sheet-status.is-dirty .sheet-dot { background: var(--color-signal); } .sheet-status.is-dirty { color: var(--color-ink-2); }
.sheet-status.is-saved .sheet-dot { background: var(--color-good); }
.sheet-status.is-error .sheet-dot { background: var(--color-bad); } .sheet-status.is-error { color: var(--color-bad); }
.sheet-status.is-busy .sheet-dot { background: var(--color-accent); animation: sheet-pulse 1s infinite alternate; }
@keyframes sheet-pulse { to { opacity: .3; } }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.sheet-actions .delete-club { color: var(--color-bad); }


body.booting .office-layout { opacity: .75; }

@media (max-width: 1180px) {
  .office-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-4); }
  .squad { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .office-layout { grid-template-columns: minmax(0, 1fr); }
  .roster-list { max-height: 300px; overflow: auto; }
  .office-head { align-items: flex-start; flex-direction: column; }
  .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sheet form { padding: var(--sp-3); }
  .sheet-head h2 { font-size: var(--fs-23); }
  .sheet-tools .autofill { font-size: var(--fs-11); padding: 4px 8px; min-height: 32px; }
  .club-card .club-actors { display: none; }
}

/* 구단 색: 20색 팔레트 10칸×2줄. 고른 색은 굵은 잉크 테두리 + 체크, 다른 구단이 쓰는 색은 아래 점. 팀 색은 칩으로만 쓴다. */
.color-field { gap: var(--sp-1); }
.color-picks { display: grid; grid-template-columns: repeat(10, minmax(0, 34px)); gap: 8px 6px; }
.office button.color-pick { position: relative; min-height: 0; aspect-ratio: 1; width: 100%; padding: 0; border-radius: var(--r-1); border: 1px solid #0c122033; background: var(--swatch); box-shadow: inset 0 0 0 1px #ffffff40; }
.office button.color-pick:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--color-ink-2); }
.office button.color-pick[aria-checked="true"] { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.office button.color-pick[aria-checked="true"]::before { content: ""; position: absolute; left: 50%; top: 46%; width: 8px; height: 13px; border: solid var(--team-ink); border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.color-pick.is-taken::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--color-muted); }
.color-pick:focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; }
.color-note { font-size: var(--fs-11); color: var(--color-muted); margin-top: 4px; }
/* 엠블럼 (docs/04 #club-emblems): 템플릿 15종 + 원래 엠블럼 + 직접 올리기, 한 라디오 묶음 */
.emblem-field { gap: var(--sp-1); }
.emblem-current { font: 700 var(--fs-11) var(--font-ui); color: var(--color-ink); }
.emblem-picks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; max-width: 720px; }
.office button.emblem-pick { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 0; padding: 8px 4px 6px; border: 1px solid var(--color-line); border-radius: var(--r-2); background: var(--color-surface); color: var(--color-ink-2); font: 600 var(--fs-11)/1.3 var(--font-ui); }
.emblem-pick img { width: 54px; height: 54px; object-fit: contain; }
.emblem-pick .emblem-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.office button.emblem-pick:hover:not(:disabled) { border-color: var(--color-ink-2); }
.office button.emblem-pick[aria-checked="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); color: var(--color-ink); }
.emblem-pick[aria-checked="true"]::after { content: "✓"; position: absolute; right: 5px; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--color-ink); color: var(--color-surface); font-size: 10px; line-height: 17px; text-align: center; }
.office button.emblem-pick[data-key="upload"] { border: 1.5px dashed var(--color-line-strong); color: var(--color-muted); }
.office button.emblem-pick[data-key="upload"][aria-checked="true"] { border-style: solid; border-color: var(--color-ink); color: var(--color-ink); }
.emblem-pick[data-key="upload"]:not(.has-image)::before { content: "+"; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--color-surface-3); color: var(--color-ink-2); font: 300 26px/1 var(--font-ui); }
.emblem-pick:focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; }
.office button.emblem-pick:disabled { opacity: .55; cursor: default; }
.emblem-field.is-drag .emblem-picks { outline: 2px dashed var(--color-accent); outline-offset: 4px; }
.emblem-note { margin: 2px 0 0; font-size: var(--fs-11); color: var(--color-muted); line-height: 1.5; }
.emblem-note.is-error { color: var(--color-bad); }
@media (max-width: 720px) { .emblem-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .color-picks { grid-template-columns: repeat(10, minmax(0, 28px)); gap: 10px 5px; } .office button.color-pick[aria-checked="true"]::before { width: 6px; height: 11px; border-width: 0 2.5px 2.5px 0; } }

/* 구단 시트의 포인트 색 = 그 구단의 팀 색(--point, clubs.mjs renderSheet). 팀 색은 막대·칩·버튼 바탕에만 쓰고
   글자는 잉크(--team-ink)로 둔다. 아이보리·레몬처럼 밝은 색도 흰 종이 위에서 보이게 얇은 잉크 테두리를 함께 준다.
   입력칸 포커스는 진한 테두리 + 팀 색 번짐, 버튼의 키보드 포커스 링은 모든 색에서 보이도록 울트라마린 그대로. */
.sheet { --point: var(--color-accent); --point-ink: var(--team-ink, #0c1220); --point-edge: inset 0 0 0 1px #0c122033; border-top: 6px solid var(--point); box-shadow: var(--shadow-frame), inset 0 1px 0 #0c12201f; }
.sheet-head h2 { color: var(--color-ink); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--point) 70%, transparent) 62%, color-mix(in srgb, var(--point) 70%, transparent) 92%, transparent 92%); width: fit-content; max-width: 100%; padding: 0 2px; }
.sheet-guide b { color: var(--color-ink); box-shadow: inset 0 -.35em 0 color-mix(in srgb, var(--point) 55%, transparent); }
.sheet .actor-slot { background: var(--point); color: var(--point-ink); box-shadow: var(--point-edge); }
.office .sheet button.primary { background: var(--point); color: var(--point-ink); box-shadow: var(--point-edge); }
.office .sheet button:not(.primary):hover:not(:disabled) { border-color: var(--color-ink-2); }
.sheet .sprite-slot .sprite-state.is-new { background: var(--point); color: var(--point-ink); border-color: #0c122033; }
.sheet .sprite-slot.is-drag { outline-color: var(--point); }
.sheet-status.is-busy .sheet-dot { background: var(--point); box-shadow: var(--point-edge); }
.sheet .field input:focus, .sheet .field textarea:focus { border-color: var(--color-ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--point) 45%, transparent); outline: none; }