@charset "UTF-8";
/* ── 타이포 스케일(v286 → 1.577 재조정) — 크기 10단계·굵기 3단계만 쓴다.
   새 코드는 px 대신 이 변수를 쓴다. 여기가 --fs-* 의 **유일한** 정의처다(1.574에서 두 벌을 합쳤다).

   1.577에서 값을 다시 잡은 이유 — 통일은 됐는데 **위계가 안 생겼다.**
   옛 값은 열 단계 중 다섯(10·11·12·13·14)이 4px 안에 몰려 있었다. 특히 본문 13 과 카드 제목 14 가
   1px 차이라, 카드 제목이 제목으로 안 읽히고 화면 전체가 '한 덩어리'로 보였다.
   ("제목·섹션명·보조 설명·컨트롤 라벨 사이의 크기 차이가 너무 작다" — 외부 리뷰)

   고친 방식: **아래는 거의 그대로 두고 위를 벌린다.**
   본문을 크게 키우면 열이 많은 화면(스카우팅 후보 8열·주간 격자 7열·선수 명단)이 넘친다.
   그래서 본문은 한 단계만 올리고, 카드 제목부터 위로 간격을 크게 준다.
   → 본문→카드제목 간격이 1px 에서 2~3px 로, 카드제목→섹션제목이 4px 로 벌어진다.

   화면폭별로 나눈 이유: 좁은 화면은 밀도가 곧 쓸모이고(사이드라인의 폰),
   넓은 화면은 여백이 남아 글자가 작으면 '축소된 웹페이지'처럼 보인다. 한 벌로는 둘 다 만족 못 한다. */
:root{
  /* 기본 = 좁은 화면. 밀도 우선 — 폰에서 한 줄에 들어가던 것이 계속 들어가야 한다. */
  --fs-micro:10px;   /* 범례·태그 */
  --fs-caption:11px; /* 캡션·라벨 */
  --fs-sub:12px;     /* 보조 본문 */
  --fs-body:13px;    /* 본문·버튼 */
  --fs-title:15px;   /* 카드 제목  (14 — 본문과 1px 차이라 제목 노릇을 못 했다) */
  --fs-input:16px;   /* 입력·강조 — iOS 자동 확대 방지 최소 16px (이 값은 못 내린다) */
  --fs-h2:19px;      /* 섹션 제목  (18) */
  --fs-h1:22px;      /* 화면 제목  (20) */
  --fs-num:26px;     /* 통계 숫자  (24) */
  --fs-num-lg:34px;  /* 큰 숫자    (32) */
  --fw-body:600;     /* 본문 */
  --fw-strong:800;   /* 강조 */
  --fw-head:800;     /* 제목·버튼 */
}
/* 넓은 화면. 1.749 — 전체 한 단계 축소(사용자: 아이패드 최적화·전체적으로 줄이기).
   본문 계열은 모바일 밀도와 같게(12/13), 제목 계열만 반 단계 위로 남겨 위계 유지.
   예전 값(11/12/13/14/17/16/21/26/30/40)은 아이패드에서 '확대된 웹페이지'처럼 보였다. */
@media (min-width:768px){
  :root{
    --fs-micro:10px;
    --fs-caption:11px;
    --fs-sub:12px;
    --fs-body:13px;
    --fs-title:16px;
    --fs-input:16px;
    --fs-h2:20px;
    --fs-h1:24px;
    --fs-num:28px;
    --fs-num-lg:36px;
  }
}

/* ── 페이지 제목 규칙(1.575) — 전 화면 공통 ───────────────────────────────
   **탭 내비가 이미 화면 이름을 말한다. 페이지는 그 이름을 한 번 더 적지 않는다.**
   이 규약은 새로 만든 게 아니라 이미 있었다 — 통합 헤더는 .apphd-name{display:none!important} 로
   제목 행을 꺼 두고 있고 scout·process·gamemodel·terms 가 그렇게 쓴다.
   그런데 경기(h2 '경기 분석')·스카우팅(span '스카우팅')·IDP(h1 'IDP')만 각자 따로 만든 마크업이라
   그 규약을 비켜 갔고, 그래서 탭마다 제목이 있기도 없기도 하고 태그도 h1/h2/span 으로 제각각이었다.

   지우지 않고 **안 보이게만** 한다 — 제목은 문서 구조이고 스크린리더의 길잡이다.
   셸 밖(단독 실행)에서는 이름을 말해 줄 내비가 없으므로 그대로 보인다(아래 [data-shell] 조건). */
/* 1.604 — IDP·scout 는 이 규칙에서 뺀다.
   규칙의 전제는 «탭 내비가 이미 화면 이름을 말한다» 였고, 제목을 감춘 자리는
   **설명 한 줄이 눈에 보이는 이름표를 맡는다**고 적어 두었다. 그런데 실제로 남은 줄은
   '개인 성장 계획' · '경기 전 계획부터 실제 장면 리뷰…' 처럼 **이름표가 아니라 부제**다.
   이름 없이 혼자 서니 임자 없는 줄이 됐고, 위계도 뒤집혔다 —
   IDP 는 12px/600 인데 자기 탭이 14px/600, scout 는 12px/600 인데 자기 탭이 12px/700.
   **화면의 주인이 자기 내비보다 작고 약했다.**
   나머지 다섯 화면(process·gamemodel·analysis·note·learning)은 이 줄 자체가 없어
   규칙이 의도대로 작동한다 — 그래서 규칙을 없애지 않고 두 화면만 뺀다.
   속성을 하나씩 되돌리지 않고 선택자에서 빼는 이유: 그래야 셸 밖(단독 실행)과
   **똑같이** 그려진다. 되돌리기는 margin 같은 걸 빠뜨리기 쉽다. */
/* ── 1.635 · 예외 둘을 없앤다 — 다만 위 진단을 뒤집지 않는다 ──────────────────
   위 기록이 옳았다: 제목만 감추면 '개인 성장 계획' 같은 **부제가 임자 없이 혼자 남아**
   자기 탭 글자보다 작고 약한, 주인 없는 줄이 된다. 그래서 두 화면을 예외로 뺐던 것이다.
   그런데 고칠 자리는 '제목을 되살린다'가 아니라 **둘을 같이 감춘다** 였다.
   탭 내비가 이미 화면 이름을 말하므로, 제목도 부제도 셸 안에서는 할 일이 없다.
   (2026-08-07 실측: 일곱 탭 중 IDP 만 제목 줄이 있어 세로 60px 을 더 쓰고 있었다)
   셸 밖(단독 실행·인쇄)에서는 둘 다 그대로 보인다 — 거기선 이름을 말해 줄 내비가 없다. */
:root[data-shell="1"] .ps-pagetitle,
:root[data-shell="1"] .ps-pagedesc{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ps-pagedesc{font-size:var(--fs-sub);font-weight:var(--fw-body);color:var(--text-3,#646A73);
  line-height:1.5;margin:0;min-width:0}

/* PROCESS STUDIO · premium UI layer
   기능은 유지하고 설명 밀도, 위계, 여백, 표면과 상호작용 규칙을 통일한다. */

:root {
  --ps-premium-bg: var(--ps-color-app-bg,#ecedf0);
  --ps-premium-panel: var(--ps-color-surface,#ffffff);
  --ps-premium-soft: var(--ps-color-page-bg,#f7f8fa);
  --ps-premium-line: var(--ps-color-border,#E3E6EA);
  --ps-premium-text: var(--ps-color-text,#14161A);
  --ps-premium-dim: var(--ps-color-muted,#646A73);
  --ps-premium-blue: var(--ps-color-action,#14213D);   /* 1.764 — 의미 토큰 한 벌 */
  --ps-premium-violet: var(--ps-color-violet,#7c4dff);
  --ps-premium-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 10px 30px rgba(15, 23, 42, .045);
  --ps-premium-shadow-float: 0 18px 48px rgba(15, 23, 42, .14);
  /* 1.635 — 팀 탭 콘텐츠 폭. **일곱 탭이 이 값 하나만 본다.**
     그전에는 파일마다 달랐다(1440px 창 실측): 선수·오늘 1440(여백 0) · 일정 1408 ·
     스카우팅 1400 · 경기 1240 · IDP 860. 선수에서 IDP 로 옮기면 콘텐츠가 580px 줄며
     화면 가운데로 모였다 — 탭만 눌렀는데 레이아웃이 통째로 움직인 것이다.
     값은 사용자 확정(1360). 여기 한 곳만 고치면 일곱 탭이 함께 움직인다. */
  --ps-w: 1360px;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.fmdark) {
  background: var(--ps-premium-bg);
}

button,
.btn,
input,
select,
textarea {
  letter-spacing: -.01em;
}

button,
.btn {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease,
    box-shadow 120ms ease, transform 120ms ease;
}

button:active,
.btn:active {
  transform: translateY(1px);
}

/* 앱 셸 */
.ps-page-app .appbar {
  min-height: 56px;
  padding: 9px 16px;
  border-bottom-color: var(--ps-premium-line);
  box-shadow: none;
}

.ps-page-app .brand .wm {
  color: var(--ps-premium-text);
  font-size:14px;
  font-weight: 300;
  letter-spacing: .01em;
}

.ps-page-app .brand .wm .logo-pro,
.ps-page-app .brand .wm .logo-studio {
  font-weight: 650;
}

.ps-page-app .brand .wm .logo-cess {
  font-weight: 300;
}

/* 세그먼트(상단 알약)는 **넓은 화면 전용**이다.
   600px 이하에서 .seg 는 알약이 아니라 화면 아래 고정 탭바로 바뀐다(app.html 의 max-width:600px 규칙).
   그런데 이 블록에 미디어쿼리가 없어서 데스크톱 알약 스타일이 폰 탭바까지 덮고 있었다 —
   `.ps-page-app .seg button.on`(0,3,1)이 모바일의 `.seg button.on`(0,2,1)을 특이도로 이기고,
   파일 순서도 뒤라(app.html <style> → mobile-polish → premium-ui) 두 번 이겼다.
   그래서 모바일이 `box-shadow:none` 으로 지우려던 그림자가 살아남아, 폰에서 선택된 탭이
   배경 없이 그림자만 뜬 '떠 있는 흰 카드'처럼 보였다(사용자 폰 스크린샷). 데스크톱으로 가둔다. */
@media (min-width: 601px) {
  .ps-page-app .seg {
    gap: 1px;
    padding: 3px;
    border: 0;
    background: #f1f3f6;
    border-radius:10px;
  }

  .ps-page-app .seg button {
    min-height:32px;
    padding: 0 15px;
    color: #646A73;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
  }

  .ps-page-app .seg button.on {
    color: var(--ps-premium-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
  }
}

.ps-page-app .gearbtn,
.ps-page-app .sharebtn,
.ps-page-app .acct {
  border-color: var(--ps-premium-line);
  background: #f7f8fa;
  box-shadow: none;
}

.ps-page-app .gearpop {
  border-color: var(--ps-premium-line);
  border-radius: 16px;
  box-shadow: var(--ps-premium-shadow-float);
}

/* 공통 화면 헤더: 안내 문구 대신 현재 위치와 도구만 남긴다. */
.ps-page-scout .apphd,
.ps-page-gamemodel .apphd,
.ps-page-terms .apphd,
.ps-page-process .apphd {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--ps-premium-line);
}

.ps-page-scout .apphd-name,
.ps-page-gamemodel .apphd-name,
.ps-page-terms .apphd-name,
.ps-page-process .apphd-name {
  min-height: 48px;
  padding: 0 20px;
  border-bottom-color: #eef0f3;
  font-size:16px;
  letter-spacing: -.025em;
}

.ps-page-scout .apphd-name .sub,
.ps-page-gamemodel .apphd-name .sub,
.ps-page-terms .apphd-name .sub,
.ps-page-process .apphd-name .sub {
  display: none;
}

.ps-page-scout .apphd-seg,
.ps-page-gamemodel .apphd-seg,
.ps-page-terms .apphd-seg,
.ps-page-process .apphd-seg {
  gap: 2px;
  padding: 5px 18px;
}

.ps-page-scout .apphd-seg button,
.ps-page-gamemodel .apphd-seg button,
.ps-page-terms .apphd-seg button,
.ps-page-process .apphd-seg button {
  min-height:32px;
  padding: 0 13px;
  border-radius: 10px;
  color: #646A73;
  font-size: 12px;
  font-weight: 600;
}

/* 1.677 — 팀 서브탭 선택 문법 통일(사용자: "탭마다 달라 정신사납다").
   1.596 확정(틴트 필 단일 신호)을 4파일 전부에 적용 — 일정(process)도 이 층에 합류,
   파일별 밑줄 ::after 는 여기서 일괄 소등한다. 파랑도 --ps-premium-blue(#14213D) 하나. */
.ps-page-scout .apphd-seg button.on,
.ps-page-gamemodel .apphd-seg button.on,
.ps-page-terms .apphd-seg button.on,
.ps-page-process .apphd-seg button.on {
  color: var(--ps-premium-blue);
  background: color-mix(in srgb,var(--ps-navy,#14213D) 9%,transparent);
  font-weight: 800;
}
.ps-page-scout .apphd-seg button.on::after,
.ps-page-gamemodel .apphd-seg button.on::after,
.ps-page-terms .apphd-seg button.on::after,
.ps-page-process .apphd-seg button.on::after {
  display: none;
}

.ps-page-scout .apphd-more-menu {
  padding: 6px;
  border-color: var(--ps-premium-line);
  border-radius: 14px;
  box-shadow: var(--ps-premium-shadow-float);
}

.apphd-more-menu .mobile-more-item {
  display: none !important;
}

/* 게임모델: 제목·영문 태그·정렬 버튼이 좁은 화면에서도 서로 침범하지 않는다. */
.ps-page-gamemodel .mhead {
  min-width: 0;
}

.ps-page-gamemodel .mhead .mtitle {
  min-width: 0;
}

/* 팀 */
.ps-page-scout .wrap {
  padding-top: 16px;
}

/* 1.583 — 여기 max-width:1240px 가 1920px 화면에서 양옆을 340px 씩 비게 만든 주범이었다.
   상한을 풀고, 폭 제어는 운동장(비율로 묶음)과 명단(다열)이 각자 갖는다. */
.ps-page-scout #teamView > .card {
  max-width: none;
  margin-inline: 0;
  padding: 20px;
  border: 1px solid var(--ps-premium-line);
  border-radius: 16px;
  box-shadow: var(--ps-premium-shadow);
}

.ps-page-scout #teamView .tm-titlebox {
  gap: 0;
}

.ps-page-scout #teamView .tm-titlebox .t {
  color: var(--ps-premium-text);
  font-size: 20px !important;
  letter-spacing: -.04em !important;
}

.ps-page-scout #teamView .tm-subtitle {
  display: none;
}

.ps-page-scout #teamView .tm-titleline #teamCount {
  height: 22px;
  padding: 0 7px;
  border: 0;
  background: #f0f2f5;
  color: #68707b;
  font-size: 10px !important;
}

.ps-page-scout #teamView .tm-head-actions .btn {
  height:32px;
  min-height:32px;
  border-radius: 10px;
}

.ps-page-scout #teamView .tm-head-actions .primary {
  border-color: var(--ps-premium-blue);
  background: var(--ps-premium-blue);
  box-shadow: 0 4px 12px color-mix(in srgb,var(--ps-navy,#14213D) 18%,transparent);
}

.ps-page-scout #teamView .tm-summary {
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.ps-page-scout #teamView .tm-summary > div {
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid var(--ps-premium-line);
  border-radius:10px;
  background: var(--ps-premium-soft);
}

.ps-page-scout #teamView .tm-summary span {
  color: #747b85;
  font-size: 10px;
  font-weight: 600;
}

.ps-page-scout #teamView .tm-summary b {
  color: var(--ps-premium-text);
  font-size: 20px;
  letter-spacing: -.025em;
}

.ps-page-scout #teamView .tm-workbar {
  min-height:40px;
  padding-top: 2px;
}

.ps-page-scout #teamView .tm-view-switch {
  border: 0;
  background: #f0f2f5;
}

.ps-page-scout #teamView .tm-view-switch button {
  color: #646A73;
}

.ps-page-scout #teamView .tm-view-switch button.on {
  color: var(--ps-premium-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .09);
}

.ps-page-scout #teamView .tm-head-set {
  color: var(--ps-premium-dim);
}

.ps-page-scout #teamView .tm-split {
  gap: 32px;
}

.ps-page-scout #teamView .posfield {
  border-color: var(--ps-premium-line);
  box-shadow: none;
}

.ps-page-scout #teamView .tm-row {
  padding-block: 4px;
}

.ps-page-scout #teamView .tm-row .inp {
  border-color: #e6e8ec;
  background: #fafbfc;
}

.ps-page-scout #teamView .tm-row .inp:focus {
  border-color: color-mix(in srgb,var(--ps-navy,#14213D) 50%,transparent);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--ps-navy,#14213D) 8%,transparent);
}

.ps-page-scout #teamView .tm-roster > .muted:last-child {
  display: none;
}

/* IDP */
.ps-page-idp .top {
  border-bottom-color: var(--ps-premium-line);
  box-shadow: none;
}

.ps-page-idp .top-h {
  min-height: 48px;   /* 1.677 — 팀 탭 헤더 띠(48px)와 통일: 탭 전환 때 크롬이 안 들썩이게 */
  padding: 0 20px;
  border-bottom-color: #eef0f3;
}

/* 1.584 — 색을 테마 변수로 바꾼다.
   --ps-premium-text(#17191d) 는 **라이트 전용 고정색**이고 다크 짝이 없다.
   그래서 다크에서 제목 'IDP' 가 #17191D 글자 / #1A212B 배경 = **1.09:1** 로 사실상 안 보였다.
   --text 는 body.fmdark 에서 #E7EBF1 로 뒤집히므로 두 테마가 함께 맞는다. */
.ps-page-idp .idp-title h1 {
  color: var(--text, #17191d);
  font-size:16px;   /* 1.677 — 팀 탭 제목(17px)과 통일 */
  letter-spacing: -.025em;
}

/* 1.575 — 되살린다. 제목('IDP')을 감추고 나니(페이지 제목 규칙) 이 줄에 PDF 버튼만 남아
   59px 빈 띠가 됐다. 그리고 **IDP 는 약자다** — 탭 내비도 'IDP' 라고만 하므로 '개인 성장 계획'은
   이름을 되풀이하는 말이 아니라 유일하게 새 정보를 주는 줄이다.
   다른 화면(경기)과 같은 모양이 된다: 왼쪽에 설명 한 줄, 오른쪽에 액션. */
.ps-page-idp .idp-title small {
  font-size: var(--fs-sub);
  font-weight: var(--fw-body);
  color: var(--text-3, #646A73);
}

.ps-page-idp .idp-actions > .btn,
.ps-page-idp .viewer {
  border-color: var(--ps-premium-line);
  box-shadow: none;
}

.ps-page-idp .layers {
  gap: 2px;
  padding: 5px 18px;
}

/* 1.584 — #646A73 고정색도 같은 문제였다. 다크 배경(#1A212B)에서 3.59:1 로 AA(4.5) 미달이라
   내비 전체가 흐릿했다. 라이트에서는 지금 값을 유지하고, 다크에서만 --text-2 로 받는다. */
.ps-page-idp .layers button {
  min-height:32px;
  padding: 5px 13px;
  border-radius: 10px;
  color: #646A73;
}
/* 주의: .ps-page-idp 는 <html> 에, fmdark 는 <body> 에 붙는다.
   그래서 `body.fmdark .ps-page-idp …` 는 구조상 **절대 안 맞는다**(부모·자식이 뒤바뀐 선택자).
   `.ps-page-idp body.fmdark …` 만 유효하고, 위 기본 규칙을 확실히 이기도록 :not(.on) 까지 붙인다
   (활성 탭은 아래에서 따로 잡으므로 제외하는 편이 의미도 맞다). */
.ps-page-idp body.fmdark .layers button:not(.on) {
  color: #A9B3C1;   /* --text-2(#9AA4B3)로는 4.18:1 로 아직 AA 미달이었다. 한 단계 밝혀 4.5 를 넘긴다 */
}
/* 활성 탭도 라이트 전용 고정색(--ps-premium-violet #7048e8)이라 다크에서 2.72:1 이었다.
   다크 팔레트의 밝은 보라(--accent #9D7BFF)로 받는다. */
.ps-page-idp body.fmdark .layers button.on {
  color: var(--accent, #9D7BFF);
  background: rgba(157, 123, 255, .16);
}

/* 1.596 — IDP 탭 위계 재정비(애플식).
   고친 것 둘:
   ① **선택 표시가 두 개 겹쳐 있었다** — 연보라 알약 배경(여기)과 밑줄(idp.html .on::after)이 동시에.
      한 상태를 두 신호로 말하면 둘 다 약해진다. 알약만 남기고 밑줄은 끈다.
   ② **모든 탭이 굵기 800 이었다.** 굵기가 전부 같으면 선택 여부가 색으로만 구분된다 —
      색각이 다른 사람에겐 구분이 사라진다. 비활성 500 / 활성 600 으로 굵기에도 차이를 준다.
   크기도 12 → 14px. 탭 라벨은 화면의 길잡이라 본문보다 작을 이유가 없다(모바일 12px 바닥 기준). */
.ps-page-idp .layers button b {
  font-size: 12px;   /* 1.677 — 팀 서브탭(12/700)과 통일. 굵기 차(700→800)로 선택 구분 유지 */
  font-weight: 600;
  letter-spacing: -.01em;
}

.ps-page-idp .layers button.on b {
  font-weight: 800;
}

.ps-page-idp .layers button.on::after {
  display: none;
}

.ps-page-idp .layers button.on {
  color: var(--ps-premium-violet);
  background: rgba(112, 72, 232, .09);
}

.ps-page-idp .layers .learn-tab {
  margin-left: 0;
  padding-left: 13px;
}

.ps-page-idp .layers .learn-tab::before {
  display: none;
}

.ps-page-idp .layers .learn-tab span,
.ps-page-idp .share-line {
  display: none;
}

.ps-page-idp .stage {
  padding-top: 18px;
  background: var(--ps-premium-bg);
}

/* 1.635 — 여기가 IDP 만 860 이던 진짜 자리였다(파일별 CSS 가 아니라 공용 레이어).
   idp.html 의 .wrap 을 고쳐도 이 규칙이 특이도에서 이겨 계속 860 이었다.
   일곱 탭이 --ps-w 하나를 보게 한다. */
.ps-page-idp .wrap {
  max-width: var(--ps-w, 1360px);
}

.ps-page-idp .card {
  border-color: var(--ps-premium-line);
  border-radius: 16px;   /* 1.677 — 카드 표준 16 통일 */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.ps-page-idp .g-season-empty .ss-hd span {
  display: none;
}

.ps-page-idp input,
.ps-page-idp select,
.ps-page-idp textarea {
  border-color: #e4e7eb;
  background-color: #fafbfc;
}

.ps-page-idp input:focus,
.ps-page-idp select:focus,
.ps-page-idp textarea:focus {
  border-color: rgba(112, 72, 232, .48);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(112, 72, 232, .08);
}

/* 1.597 — 위 두 규칙에 어두운 화면 짝이 없었다. #fafbfc 바탕이 그대로 걸린 채
   글자만 --text(#E7EBF1)로 바뀌어서, IDP 의 **모든 입력칸이 흰 바탕에 흰 글씨**(1.06:1)가 됐다.
   이름·소속팀·포지션 무엇을 적어도 안 보이는 상태. `.ps-page-idp` 는 <html>, `.fmdark` 는 <body> 라
   이 순서여야 하고, 클래스 둘(0,2,1)이라 위 규칙(0,1,1)을 이긴다. */
.ps-page-idp body.fmdark input,
.ps-page-idp body.fmdark select,
.ps-page-idp body.fmdark textarea {
  border-color: var(--line, #2c3744);
  background-color: var(--surface-2, #232c38);
  color: var(--text, #e7ebf1);
}

.ps-page-idp body.fmdark input:focus,
.ps-page-idp body.fmdark select:focus,
.ps-page-idp body.fmdark textarea:focus {
  border-color: rgba(157, 123, 255, .55);
  background-color: var(--surface, #1a212b);
  box-shadow: 0 0 0 3px rgba(157, 123, 255, .14);
}

/* 작전판·보관함·커뮤니티의 표면과 팝업을 같은 재질로 통일한다. */
.ps-page-board .popmenu,
.ps-page-board .sel-ctl,
.ps-page-board .ps-settings-modal,
.ps-page-process .card,
.ps-page-community .card,
.ps-page-note .card {
  border-color: var(--ps-premium-line);
  box-shadow: var(--ps-premium-shadow);
}

/* 노트: 자주 쓰는 필기 도구는 한 줄에 두고, 파일·페이지 관리는 레이아웃을 밀지 않는 팝오버로 연다. */
@media (min-width: 768px) {
  .ps-page-note .bar {
    gap: 8px;
    padding: 8px 16px;
    height: 52px;
    min-height: 52px;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .ps-page-note #noteToolsToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height:32px;
    order: 99;
    margin-left: auto;
  }

  .ps-page-note .note-advanced {
    display: none;
    position: fixed;
    top: 112px;
    right: 16px;
    z-index: 160;
    width: min(660px, calc(100vw - 32px));
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid var(--ps-premium-line);
    border-radius: 16px;
    background: var(--bar, #fff);
    box-shadow: var(--ps-premium-shadow);
  }

  .ps-page-note body.note-tools-open .note-advanced,
  html.ps-page-note body.note-tools-open .note-advanced {
    display: flex;
  }

  .ps-page-note .note-core,
  .ps-page-note .note-ink {
    gap: 6px;
    flex: 0 1 auto;
  }

  .ps-page-note #nTitle {
    max-width: 260px;
    min-width: 120px;
  }

  .ps-page-note #tools button,
  .ps-page-note .icb,
  .ps-page-note .btn,
  .ps-page-note .bar select {
    min-height:32px;
  }
}

@media (max-width: 980px) and (min-width: 768px) {
  .ps-page-note .nhead .nh-s {
    display: none;
  }

  .ps-page-note .vault-personal-scope .scope-long {
    display: none;
  }

  .ps-page-note .vault-personal-scope .scope-short {
    display: inline;
  }

  .ps-page-note #nTitle {
    max-width: 150px;
  }

  .ps-page-note #tools button {
    padding-left: 8px;
    padding-right: 8px;
  }

  .ps-page-note .szwrap {
    display: none;
  }
}

@media (max-width: 767px) {
  .ps-page-note .nhead {
    padding: 0 var(--ps-m-gutter, 12px);
    gap: 6px;
  }

  .ps-page-note .nhead .nh-s {
    display: none;
  }

  .ps-page-note .vault-section-seg {
    margin-left: 2px;
  }

  .ps-page-note .vault-section-seg button {
    height:32px;
    padding: 0 9px;
  }

  .ps-page-note .vault-personal-scope .scope-long {
    display: none;
  }

  .ps-page-note .vault-personal-scope .scope-short {
    display: inline;
  }

  .ps-page-note .note-advanced {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 180 !important;
    width: auto !important;
    max-height: 60dvh;
    overflow-y: auto;
    padding: 12px !important;
    border: 1px solid var(--ps-premium-line) !important;
    border-radius: 16px !important;
    background: var(--bar, #fff) !important;
    box-shadow: var(--ps-premium-shadow) !important;
  }

  .ps-page-note body.note-tools-open .note-advanced,
  html.ps-page-note body.note-tools-open .note-advanced {
    display: grid !important;
  }
}

@media (max-width: 430px) {
  .ps-page-note .vault-personal-scope {
    font-size: 0;
    gap: 0;
  }

  .ps-page-note .vault-personal-scope .scope-short {
    display: none;
  }
}

/* 커뮤니티 필터는 모바일에서도 연령·인원·정렬이 같은 행에 놓인다. */
@media (max-width: 700px) {
  .ps-page-community .filters {
    display: grid !important;
    /* 1.896 — 정렬(#sortSel)은 항상 숨겨져 셀렉트가 2개뿐인데 3열이라 셋째 칸이 비고 '전체 연…'으로 잘렸다. 보이는 개수만큼 열 */
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 6px !important;
  }

  .ps-page-community .filters select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 7px !important;
    text-overflow: ellipsis;
  }
}

.ps-page-board .ps-settings-modal,
.ps-page-board .sel-ctl {
  border-radius: 16px;
}

@media (max-width: 767px) {
  .ps-page-app .appbar {
    min-height: 60px;
    padding: 8px 16px;
  }

  .ps-page-app .brand .wm {
    font-size: 14px;
  }

  .ps-page-app .seg {
    background: rgba(255, 255, 255, .96);
    border-top-color: var(--ps-premium-line);
    backdrop-filter: blur(18px) saturate(160%);
  }

  .ps-page-app .seg button {
    min-height: 48px;
    color: #656d78;
  }

  /* 활성 탭 색은 이 파일에서 같이 정해야 한다.
     바로 위 규칙이 `.ps-page-app .seg button`(0,3,1)이라, app.html 의 모바일 활성색
     `.seg button.on`(0,2,1) 을 특이도로 이긴다 — 색을 저쪽에만 두면 활성 탭이 회색으로 죽는다.
     (실제로 위쪽 데스크톱 블록을 미디어쿼리로 가두자마자 그렇게 됐다.) */
  .ps-page-app .seg button.on {
    color: var(--blue, var(--ps-navy,#14213D));
  }
  .ps-page-app .seg button[data-app="idp"].on,
  .ps-page-app .seg button[data-app="learning"].on {
    color: #7c4dff;
  }
  html.ps-page-app body.fmdark .seg button.on,
  .ps-page-app body.fmdark .seg button.on {
    color: #7F98D0;
  }
  html.ps-page-app body.fmdark .seg button[data-app="idp"].on,
  html.ps-page-app body.fmdark .seg button[data-app="learning"].on {
    color: #9d7bff;
  }

  .ps-page-scout .apphd-name,
  .ps-page-gamemodel .apphd-name,
  .ps-page-terms .apphd-name {
    min-height: 46px;
    padding-inline: 16px;
  }

  .ps-page-scout .apphd-seg,
  .ps-page-gamemodel .apphd-seg,
  .ps-page-terms .apphd-seg {
    padding: 4px 12px 6px;
  }

  .ps-page-scout .apphd-seg > button[data-v="report"],
  .ps-page-scout .apphd-seg > button[data-v="positions"],
  .ps-page-gamemodel .apphd-seg > button[data-v="report"],
  .ps-page-gamemodel .apphd-seg > button[data-v="positions"],
  .ps-page-terms .apphd-seg > button[data-v="report"],
  .ps-page-terms .apphd-seg > button[data-v="positions"] {
    display: none;
  }

  .apphd-more-menu .mobile-more-item {
    display: flex !important;
  }

  .ps-page-gamemodel .moment {
    margin-inline: 12px;
  }

  .ps-page-gamemodel .mhead {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) repeat(4, 28px);
    gap: 6px 8px;
    padding: 11px 12px;
  }

  .ps-page-gamemodel .mhead .mdot {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .ps-page-gamemodel .mhead .mtitle {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    font-size: 13px !important;
  }

  .ps-page-gamemodel .mhead .mtag {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    padding: 2px 7px;
    text-align: left !important;
  }

  .ps-page-gamemodel .mhead > button:not(.mdot) {
    grid-row: 1 / span 2;
    align-self: center;
    padding: 7px 5px !important;
  }

  .ps-page-gamemodel .mhead > button:nth-child(4) { grid-column: 3; }
  .ps-page-gamemodel .mhead > button:nth-child(5) { grid-column: 4; }
  .ps-page-gamemodel .mhead > button:nth-child(6) { grid-column: 5; }

  .ps-page-gamemodel .mhead .chev {
    grid-column: 6;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .ps-page-gamemodel .mbody {
    padding: 9px;
  }

  .ps-page-gamemodel .phase {
    padding: 10px;
  }

  .ps-page-gamemodel .phead {
    gap: 3px;
  }

  .ps-page-gamemodel .phead .pname {
    min-width: 0;
    font-size: 13px;
  }

  .ps-page-gamemodel .phead .pdel {
    min-width: 30px;
    min-height: 32px;
    padding: 6px;
    margin: 0;
  }

  .ps-page-scout .wrap {
    padding-top: 12px !important;
  }

  .ps-page-scout #teamView > .card {
    padding: 14px 12px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  }

  .ps-page-scout #teamView .tm-head-actions #tmAdd {
    width: 34px;
    min-width: 34px;
    padding: 0;
    box-shadow: none;
  }

  .ps-page-scout #teamView .tm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ps-page-scout #teamView .tm-summary > div {
    min-height: 64px;
    padding: 9px 11px;
  }

  .ps-page-scout #teamView .tm-summary span {
    font-size: 10px;
  }

  .ps-page-scout #teamView .tm-summary b {
    font-size:20px;
  }

  .ps-page-scout #teamView .tm-split {
    gap: 18px;
  }

  .ps-page-idp .top-h {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
  }

  .ps-page-idp .idp-title {
    height: 24px;
  }

  .ps-page-idp .idp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin: 0;
    gap: 6px;
  }

  .ps-page-idp .viewer.on {
    display: flex;
    min-width: 0;
    margin: 0;
  }

  .ps-page-idp .viewer select {
    width: auto;
    max-width: 128px;
    min-width: 0;
  }

  .ps-page-idp #repBtn,
  .ps-page-idp #parentRepBtn {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0 !important;
    padding-inline: 10px !important;
  }

  .ps-page-idp .layers {
    padding: 4px 10px 6px;
  }

  .ps-page-idp .layers button {
    min-height:32px;
    padding-inline: 12px;
  }

  .ps-page-idp .stage {
    padding: 14px 14px calc(82px + env(safe-area-inset-bottom));
  }

  .ps-page-idp .card {
    padding: 15px;
    border-radius: 14px;
  }
}

/* v223~v225 설정 규칙은 기록용으로 보존하되 실행에서는 제외한다.
   실제 설정 디자인은 아래 "v225 단일 설정 시스템" 한 곳만 담당한다. */
@supports not (display: flex) {
/* v223 · 작전판 빠른/상세 설정은 동일한 컴팩트 프레임을 사용한다. */
html body.ps-dock #ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick.popmenu,
html body.ps-dock #ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail.popmenu {
  left: auto !important;
  right: 10px !important;
  top: auto !important;
  bottom: 78px !important;
  width: min(360px, calc(100vw - 20px)) !important;
  height: min(380px, calc(100dvh - 96px)) !important;
  max-height: min(380px, calc(100dvh - 96px)) !important;
  padding: 11px 12px 12px !important;
  border-radius: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body.ps-dock #ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick.popmenu > *,
html body.ps-dock #ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail.popmenu > * {
  flex: 0 0 auto !important;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, #e05666 18%, var(--line, #d9dde5)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, #e05666 3%, var(--panel, #fff)) !important;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > .ps-danger-details {
  display: none !important;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail > .ps-danger-details {
  display: block !important;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  color: var(--txt-dim, #6f7886);
  font-size: 11px;
  font-weight: 600;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary::-webkit-details-marker {
  display: none;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary::after {
  content: "＋";
  font-size: 13px;
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details[open] > summary::after {
  content: "－";
}

#ps-dock #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > .ps-danger {
  margin: 0 !important;
  padding: 7px !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, #e05666 16%, var(--line, #d9dde5)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

@media (max-width: 480px) {
  html.ps-page-board body.ps-dock #ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick.popmenu,
  html.ps-page-board body.ps-dock #ps-dock #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail.popmenu {
    left: 6px !important;
    right: auto !important;
    bottom: 76px !important;
    width: calc(100vw - 24px) !important;
    height: min(58dvh, 440px) !important;
    max-height: min(58dvh, 440px) !important;
  }
}

/* v225 · 설정 패널 전용 디자인 시스템 — 누적 규칙보다 높은 구조 선택자로 최종 통일 */
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal {
  gap: 0 !important;
  width: min(372px, calc(100vw - 24px)) !important;
  padding: 16px !important;
  border: 1px solid rgba(24, 32, 44, .10) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .06) !important;
  color: #18202c !important;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  letter-spacing: -.01em !important;
  scrollbar-width: thin !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-hd {
  position: sticky !important;
  top: -16px !important;
  z-index: 6 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #e9ecf1 !important;
  background: rgba(255, 255, 255, .98) !important;
  align-items: center !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-titlebox {
  gap: 2px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-titlebox .ps-set-t {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-sub {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-x {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: -4px -6px -4px 0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs {
  position: sticky !important;
  top: 36px !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 -2px 10px !important;
  padding: 10px 2px 0 !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .98) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs button {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #687181 !important;
  font-size: 12px !important;
  line-height: 34px !important;
  font-weight: 650 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs button.on {
  background: #E9EDF5 !important;
  color: var(--ps-navy,#14213D) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ps-navy,#14213D) 14%,transparent) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menusec {
  min-height: 18px !important;
  margin: 12px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #8a93a2 !important;
  font-size: 10px !important;
  line-height: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  gap: 12px !important;
  border-radius: 0 !important;
  align-items: center !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .menulbl {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  color: #687181 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 620 !important;
  letter-spacing: -.015em !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .btn,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg > button,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal select.btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 640 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg {
  min-height: 38px !important;
  padding: 2px !important;
  gap: 2px !important;
  border-radius: 10px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-load-squad {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid #dfe4eb !important;
  border-radius: 10px !important;
  background: #f8f9fb !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-mode {
  margin: 8px 0 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #e9ecf1 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-more {
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: #E9EDF5 !important;
  color: var(--ps-navy,#14213D) !important;
  font-size: 12px !important;
  line-height: 20px !important;
  font-weight: 720 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-more b {
  color: var(--ps-navy,#14213D) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details {
  margin-top: 12px !important;
  border-color: #e7e9ee !important;
  background: #fafbfc !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary {
  height: 38px !important;
  padding: 0 12px !important;
  color: #7b8492 !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

@media (max-width: 480px) {
  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal {
    width: calc(100vw - 16px) !important;
    padding: 14px !important;
    border-radius: 16px 16px 12px 12px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow {
    min-height: 42px !important;
    gap: 10px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .menulbl {
    flex-basis: 66px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }
}
}

/* v226 · 단일 설정 시스템
   376×368 고정 shell, Pretendard 500/600/700, 4·8·12·16·20 간격 체계 */
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal {
  --ps-set-surface: #ffffff;
  --ps-set-surface-muted: #f4f7fa;
  --ps-set-surface-hover: #eef3f8;
  --ps-set-text: #172033;
  --ps-set-muted: #687386;
  --ps-set-line: #e3e8ef;
  --ps-set-accent: #14213D;
  position: fixed !important;
  inset: auto 12px calc(var(--ps-dock-h, 100px) + 12px) auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: min(376px, calc(100vw - 24px)) !important;
  height: min(368px, calc(100dvh - var(--ps-dock-h, 100px) - 24px)) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--ps-set-line) !important;
  border-radius: 16px !important;
  background: var(--ps-set-surface) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06) !important;
  color: var(--ps-set-text) !important;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition: opacity 120ms ease !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c8d0db transparent !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > * {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-hd {
  position: sticky !important;
  top: -16px !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--ps-set-line) !important;
  background: var(--ps-set-surface) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-titlebox {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-t {
  color: var(--ps-set-text) !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-sub {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-back,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-x {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ps-set-muted) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-back {
  display: none !important;
  margin-left: -8px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail #ps-set-back {
  display: inline-flex !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-x {
  margin-right: -8px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-back svg,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-x svg {
  width: 18px !important;
  height: 18px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-back:hover,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-x:hover {
  background: var(--ps-set-surface-hover) !important;
  color: var(--ps-set-text) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs {
  position: sticky !important;
  top: 28px !important;
  z-index: 5 !important;
  display: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-height: 44px !important;
  margin: 0 0 8px !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: var(--ps-set-surface) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail .ps-set-tabs {
  display: grid !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs > button {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: var(--ps-set-surface-muted) !important;
  color: var(--ps-set-muted) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs > button.on {
  border-color: var(--ps-set-line) !important;
  background: var(--ps-set-surface) !important;
  color: var(--ps-set-accent) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menusec {
  display: flex !important;
  align-items: center !important;
  min-height: 16px !important;
  margin: 12px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ps-set-muted) !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow:hover {
  background: transparent !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .menulbl {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  margin: 0 !important;
  color: var(--ps-set-muted) !important;
  font-size: 12px !important;
  line-height: 17px !important;
  font-weight: 600 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .btn,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg > button,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal select.btn {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid var(--ps-set-line) !important;
  border-radius: 10px !important;
  background: var(--ps-set-surface-muted) !important;
  color: var(--ps-set-text) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .btn:hover,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg > button:hover {
  border-color: #cbd4df !important;
  background: var(--ps-set-surface-hover) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 2px !important;
  gap: 2px !important;
  overflow: hidden !important;
  border: 1px solid var(--ps-set-line) !important;
  border-radius: 10px !important;
  background: var(--ps-set-surface-muted) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ps-set-muted) !important;
  white-space: nowrap !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg > button.on {
  background: var(--ps-set-surface) !important;
  color: var(--ps-set-text) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-cntseg,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-grassseg,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #zonePreset {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  height: auto !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow {
  align-items: flex-start !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow #ps-team-ctl {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  order: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow #ps-team-ctl > .ps-ts-hd {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow #ps-team-ctl > .menurow {
  display: grid !important;
  grid-template-columns: 36px 24px minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow #ps-team-ctl > .menurow > .menulbl {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  color: var(--ps-set-muted) !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow #ps-team-ctl > .menurow > .teamcol-sw {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-formrow #ps-team-ctl > .menurow > select.btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-load-squad {
  flex: 1 1 auto !important;
  width: auto !important;
  justify-content: center !important;
  background: var(--ps-set-surface) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow:has(#ps-token-shortcuts) > span:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 8px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-token-shortcuts,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-tool-shortcuts {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-source {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 8px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select-control {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select .ps-pcol {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border: 1px solid var(--ps-set-line) !important;
  border-radius: 10px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select .ps-pcol input {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select .ps-pcol input::-webkit-color-swatch-wrapper {
  padding: 4px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select .ps-pcol input::-webkit-color-swatch {
  border: 0 !important;
  border-radius: 6px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-pitch-select .ps-pcol input::-moz-color-swatch {
  border: 0 !important;
  border-radius: 6px !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > .ps-set-tabs,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > .menusec,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > [data-ps-cat],
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > .ps-actfoot,
html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > .ps-danger-details {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-quick > [data-ps-quick="1"] {
  display: flex !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-mode {
  display: flex !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--ps-set-line) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal.ps-settings-detail > .ps-set-mode {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-more {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: var(--ps-set-surface-muted) !important;
  color: var(--ps-set-text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-more:hover {
  border-color: var(--ps-set-line) !important;
  background: var(--ps-set-surface-hover) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-more b {
  color: var(--ps-set-muted) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-actfoot {
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--ps-set-line) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-actfoot > .menurow {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 0 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #pngBtn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ps-set-line) !important;
  border-radius: 10px !important;
  background: var(--ps-set-surface) !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 40px !important;
  padding: 0 12px !important;
  list-style: none !important;
  cursor: pointer !important;
  color: var(--ps-set-muted) !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary::-webkit-details-marker {
  display: none !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > summary::after {
  content: "＋";
  font-size: 14px;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details[open] > summary::after {
  content: "－";
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > .ps-danger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px !important;
  gap: 4px !important;
  border: 0 !important;
  border-top: 1px solid var(--ps-set-line) !important;
  border-radius: 0 !important;
  background: #fbfcfd !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > .ps-danger > button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ps-set-text) !important;
  text-align: left !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-copy strong {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-copy small {
  color: var(--ps-set-muted);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > .ps-danger > button.ps-reset-btn {
  color: #c33b4b !important;
}

html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal :is(button, select, input):focus-visible {
  outline: 2px solid rgba(47, 103, 223, .42) !important;
  outline-offset: 2px !important;
}

@media (max-width: 480px) {
  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal {
    inset: auto 8px calc(var(--ps-dock-h, 100px) + 8px) 8px !important;
    width: auto !important;
    height: min(400px, calc(100dvh - var(--ps-dock-h, 100px) - 16px)) !important;
    padding: 14px !important;
    border-radius: 16px 16px 12px 12px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-hd {
    top: -14px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-back,
  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal #ps-set-x {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs {
    min-height: 48px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-set-tabs > button {
    height: 40px !important;
    min-height: 40px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow {
    min-height: 44px !important;
    padding: 4px 0 !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .menulbl {
    flex-basis: 66px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .btn,
  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal select.btn,
  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg > button {
    height: 40px !important;
    min-height: 40px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .seg {
    min-height: 44px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow:has(#ps-token-shortcuts) {
    align-items: flex-start !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow:has(#ps-token-shortcuts) > .menulbl {
    padding-top: 12px !important;
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal > .menurow:has(#ps-token-shortcuts) > span:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html.ps-page-board body.fmdark #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal {
  --ps-set-surface: #1a212b;
  --ps-set-surface-muted: #232c38;
  --ps-set-surface-hover: #2a3543;
  --ps-set-text: #f5f7fa;
  --ps-set-muted: #a9b3c1;
  --ps-set-line: #344253;
  --ps-set-accent: var(--ps-color-action,#7F98D0);
}

html.ps-page-board body.fmdark #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal .ps-danger-details > .ps-danger {
  background: var(--ps-set-surface-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  button,
  .btn,
  .card,
  .modal,
  .mask,
  .popmenu,
  .seg button,
  .teamnav button,
  .layers button,
  #board,
  #tokenLayer > g {
    transition: none !important;
    animation: none !important;
  }
}

/* 기존 다크 테마의 대비를 새 공통 표면 규칙에서도 유지한다. */
html.ps-page-app body.fmdark .seg {
  background: rgba(0, 0, 0, .28);
}

html.ps-page-app body.fmdark .gearbtn,
html.ps-page-app body.fmdark .sharebtn,
html.ps-page-app body.fmdark .acct {
  border-color: #2c3744;
  background: rgba(0, 0, 0, .28);
}

html.ps-page-app body.fmdark .gearpop,
html.ps-page-board body.fmdark .sel-ctl,
html.ps-page-board body.fmdark .ps-settings-modal,
html.ps-page-process body.fmdark .card,
html.ps-page-community body.fmdark .card,
html.ps-page-note body.fmdark .card {
  border-color: #2c3744;
  background: #1a212b;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36);
}

html.ps-page-scout body.fmdark #teamView > .card {
  border-color: #2c3744;
  box-shadow: none;
}

html.ps-page-scout body.fmdark #teamView .tm-summary > div,
html.ps-page-scout body.fmdark #teamView .tm-view-switch,
html.ps-page-scout body.fmdark #teamView .tm-row .inp {
  border-color: #2c3744;
  background: #232c38;
}

html.ps-page-idp body.fmdark .stage {
  background: #0f141b;
}

html.ps-page-idp body.fmdark .cf-item,
html.ps-page-idp body.fmdark .lt-count {
  background: #232c38;
}

@media (max-width: 767px) {
  html.ps-page-app body.fmdark .seg {
    border-top-color: #2c3744;
    background: rgba(18, 24, 31, .96);
  }
}

/* SURFACE-PASS-1764:start — 기존 배치는 두고 표면 언어만 16px · border-only · float로 정렬 */
@media screen {
  /* 팀 페이지의 고정 헤더는 떠 있는 카드가 아니라 단일 경계면이다. */
  html.ps-page-scout .apphd,
  html.ps-page-process .apphd,
  html.ps-page-terms .apphd,
  html.ps-page-gamemodel .apphd {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    box-shadow: none;
  }

  html.ps-page-scout .apphd-more-menu,
  html.ps-page-process .apphd-more-menu,
  html.ps-page-terms .apphd-more-menu,
  html.ps-page-gamemodel .apphd-more-menu {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }

  /* 스카우팅: 팀 상세 최상위 카드만 안전하게 정렬한다. */
  html.ps-page-scout #teamView > .card,
  html.ps-page-scout body.fmdark #teamView > .card {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  /* 매치 데스크: 최상위 카드는 border-only, 내부 그룹은 깊이만 제거한다. */
  html.ps-page-analysis .card,
  html.ps-page-analysis .tv-roster,
  html.ps-page-analysis .tv-pitch-card,
  html.ps-page-analysis .tv-live,
  html.ps-page-analysis .tv-analysis,
  html.ps-page-analysis .role-hero {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-analysis .live-panel,
  html.ps-page-analysis .tv-pro,
  html.ps-page-analysis .quick-roster,
  html.ps-page-analysis .meeting-phase,
  html.ps-page-analysis .desk-team,
  html.ps-page-analysis .pl-item {
    border-color: var(--dv2-border, #E3E6EA);
    box-shadow: none;
  }

  html.ps-page-analysis .workflow-step {
    box-shadow: none;
  }

  html.ps-page-analysis .workflow-step:not(.done) {
    border-color: var(--dv2-border, #E3E6EA);
  }

  html.ps-page-analysis .paste-box {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }

  /* 작전판: 메뉴만 부유하고, 선택 컨트롤 컨테이너는 투명하게 유지한다. */
  html.ps-page-board .popmenu,
  html.ps-page-board .vmenu {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }

  html.ps-page-board .sel-ctl,
  html.ps-page-board body.fmdark .sel-ctl {
    background: transparent;
    border-color: transparent;
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-board body.fmdark .ps-settings-modal {
    background: var(--dv2-surface, #1a212b);
    border-color: var(--dv2-border, #2c3744);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 16px 40px rgba(0, 0, 0, .38));
  }

  html.ps-page-board body.ps-dock #ps-dock #ps-dock-right #ps-group-set > .popmenu.ps-settings-modal {
    border-color: var(--dv2-border, #E3E6EA) !important;
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14)) !important;
  }

  html.ps-page-board .vault-explorer,
  html.ps-page-board .vh-block {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-board #sessionView #drillFiles:not(.vlist) .vx-items.vx-grid .vcard,
  html.ps-page-board #sessionView #drillFiles:not(.vlist) .vfcard {
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px) !important;
  }

  html.ps-page-board #sessionView #drillFiles:not(.vlist) .vx-items.vx-grid .vcard:not(.selected),
  html.ps-page-board #sessionView #drillFiles:not(.vlist) .vfcard,
  html.ps-page-board #sessionView #drillFiles:not(.vlist) .vx-items.vx-grid .vcard:not(.selected):hover,
  html.ps-page-board #sessionView #drillFiles:not(.vlist) .vfcard:hover {
    box-shadow: none;
  }

  html.ps-page-board .vault-start .vs-card {
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-board .vault-start .vs-card:not(.vs-new) {
    border-color: var(--dv2-border, #E3E6EA);
  }

  html.ps-page-board .vault-start .vs-card:hover {
    box-shadow: none;
  }

  /* 커뮤니티: 목록 행은 평면, 선택 표시는 왼쪽 inset 하나만 남긴다. */
  html.ps-page-community .comm-shell {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-community .comm-list .card:not(.on) {
    border-bottom-color: var(--dv2-border-2, #eceef2);
    box-shadow: none;
  }

  html.ps-page-community .comm-list .card.on {
    background: var(--dv2-accent-soft, #E9EDF5);
    box-shadow: inset 3px 0 0 var(--dv2-accent, var(--ps-navy,#14213D));
  }

  html.ps-page-community .comm-list .card:hover {
    box-shadow: none;
  }

  html.ps-page-community body.fmdark .comm-list .card:not(.on) {
    background: transparent;
    border-bottom-color: var(--dv2-border-2, #26313d);
    box-shadow: none;
  }

  html.ps-page-community body.fmdark .comm-list .card.on {
    background: var(--dv2-accent-soft, #1B2640);
    border-color: var(--dv2-border, #2c3744);
    box-shadow: inset 3px 0 0 var(--dv2-accent, #7F98D0);
  }

  /* 프로세스·용어·IDP·게임모델의 본문 카드는 테두리로만 나눈다. */
  html.ps-page-process .card,
  html.ps-page-process body.fmdark .card {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-process .mpop {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }

  html.ps-page-process body.fmdark .mpop {
    background: var(--dv2-surface, #1a212b) !important;
  }

  html.ps-page-terms .card {
    background: var(--dv2-surface, #fff);
    border-top-color: var(--dv2-border, #E3E6EA);
    border-right-color: var(--dv2-border, #E3E6EA);
    border-bottom-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-terms .card:hover {
    box-shadow: none;
  }

  html.ps-page-terms .modal {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }

  /* 2.317 — `.wc-card`(첫 진입 환영) 예외: 이 규칙이 파란 그라디언트를 흰 면으로 덮어
     **흰 배경에 흰 글씨**가 되어 인사말이 안 보였다. `:not(.coach-feedback-card)` 와 같은 자리. */
  html.ps-page-idp .card:not(.coach-feedback-card):not(.wc-card):not(.g-clock),
  html.ps-page-idp .phys-card,
  html.ps-page-idp .sq-card {
    background: var(--dv2-surface, #fff);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-idp .card:not(.on):not(.coach-feedback-card),
  html.ps-page-idp .phys-card {
    border-color: var(--dv2-border, #E3E6EA);
  }

  html.ps-page-gamemodel .idcard,
  html.ps-page-gamemodel .mhead,
  html.ps-page-gamemodel .phase {
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: none;
  }

  html.ps-page-gamemodel .mbody {
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: 0 0 var(--dv2-r-xl, 16px) var(--dv2-r-xl, 16px);
    box-shadow: none;
  }
}

@media screen and (min-width: 601px) {
  html.ps-page-app .gearpop,
  html.ps-page-app .acct-pop,
  html.ps-page-app body.fmdark .gearpop,
  html.ps-page-app body.fmdark .acct-pop {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }
}

@media screen and (min-width: 768px) {
  html.ps-page-idp .modal {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }
}

@media screen and (min-width: 640px) {
  html.ps-page-community .modal {
    background: var(--dv2-surface, #fff);
    border: 1px solid var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }
}

@media screen and (min-width: 701px) {
  html.ps-page-community .cv-shell {
    background: var(--dv2-surface, #fff);
    border-color: var(--dv2-border, #E3E6EA);
    border-radius: var(--dv2-r-xl, 16px);
    box-shadow: var(--dv2-sh-float, 0 12px 32px rgba(16, 24, 40, .14));
  }
}
/* SURFACE-PASS-1764:end */