` 이다 (patch-switch-cards.py STEP D).
세로 카드에서는 규칙을 하나도 안 준다 — inline 이라 그전의 텍스트 노드와 흐름이 같고,
긴 이름 줄바꿈도 button 의 white-space: normal 이 그대로 한다. 이 클래스가 실제로 쓰이는 자리는
§31-b 의 가로 압축 줄뿐이다(말줄임을 걸려면 요소여야 해서 만들었다). */
.wide-controls .switchmenu.cherish-tp button {
width: 128px;
min-height: 0;
font-size: 11.5pt;
padding: 5px 4px 12px;
margin: 3px 4px 0;
}
.wide-controls .switchmenu.cherish-tp button .cherish-tpart {
width: 118px;
height: 118px;
}
/* 2대2 동료 카드는 한 단계 작게 (2026-09-08 사용자). 업스트림이 `myAllyPokemon` 을 같은 목록에 disabled 로 끼워 넣는데,
같은 크기라 「앞 3장만 내가 낼 수 있다」가 안 보였다. 동료 버튼은 cmd 가 비어 있는 유일한 카드다(내 아이는 기절해도 `/switch N` 을 달고 있다) —
preact 가 빈 문자열을 attribute 로 찍든 빼든 걸리게 `:not([data-cmd^="/"])` 로 잡는다.
⚠️ 대기 중 「내 팀」(.cherish-teamlist)은 전부 cmd 가 비어 있으므로 제외. 크기는 각 문맥 카드의 8할. */
.switchmenu.cherish-swcards:not(.cherish-teamlist) button.disabled:not([data-cmd^="/"]) {
width: 80px;
font-size: 9.5pt;
padding: 3px 3px 10px;
}
.switchmenu.cherish-swcards:not(.cherish-teamlist) button.disabled:not([data-cmd^="/"]) .cherish-tpart {
width: 72px;
height: 72px;
}
.wide-controls .switchmenu.cherish-swcards:not(.cherish-teamlist) button.disabled:not([data-cmd^="/"]) {
width: 102px;
font-size: 10.5pt;
padding: 4px 4px 11px;
}
.wide-controls .switchmenu.cherish-swcards:not(.cherish-teamlist) button.disabled:not([data-cmd^="/"]) .cherish-tpart {
width: 94px;
height: 94px;
}
/* (d) 모바일 (2026-09-06 사용자 지적 「교체 카드가 커지니 배틀 로그가 아예 안 보인다」)
조작부(.controls, sticky)가 .battle-log 를 다 먹지 않게 상한 — 로그가 최소 110px 은 보이고, 넘치면 조작부 안에서 스크롤.
%는 .battle-log(absolute, top/bottom 확정) 기준. 대기 중 「내 팀」은 로그를 읽는 시간이라 카드를 작게 그린다.
⚠️ 2026-09-06 실기기 제보(안드로이드, 플래그 없음): 조작부가 「어떻게 할까?」 + 소제목 높이(≈63px)로 눌리고 기술·교체가 안 보였다.
기술 버튼은 float 라 .movecontrols 높이에 안 잡힌다 — (d) 의 overflow 상자가 그 높이로 잘리면 딱 그 그림이다. 메뉴 상자를 flow-root 로
float 를 품게 한다(PC .movemenu flex 는 §28 이 뒤에서 덮으므로 영향 없음). */
.battle-controls .movecontrols, .battle-controls .switchcontrols, .battle-controls .targetcontrols, .battle-controls .teamcontrols { display: flow-root; }
/* (d) 의 상한 규칙(.controls max-height + overflow)은 2026-09-06 밤 껍데기 A 가 전원에게 켜지면서 **제거** — 로그 패널이 없으니 존재 이유가 없고,
실기기에서 기술·교체를 잘라 먹던 규칙이었다. (a) 의 sticky 규칙은 ?cwpreview=0 탈출구(옛 화면)에서만 살아 있다. 아래는 「내 팀」 소형 카드만 남긴다. */
/* 대기 중 「내 팀」 소형 카드 — 2026-09-22 부터 **PC 도 같이** 작게 (사용자: 이 자리에 채팅창이 들어온다).
09-06 에 모바일만 줄인 건 로그 패널이 눌리는 걸 막으려던 것이고, 09-21 교체 줄 압축이 이 화면을
제외한 건 「자리가 남으니 크게 둔다」는 이유였다. 자리를 쓸 데가 생겼으니 그 전제가 바뀌었다.
⚠️ 여기는 **대기 중 목록(.cherish-teamlist)뿐**이다. 기술 화면의 교체 목록은 §31-b 가 따로 눕힌다 —
둘을 합치면 선봉 선택·기절 뒤 교체 전용 화면까지 같이 줄어든다(거기는 화면이 통째로 그 용도다).
⚠️ **PC 에서 안 먹고 있었다 (2026-09-22 실측으로 발견, 같은 날 고침).** 클래스 둘짜리 선택자
`.switchmenu.cherish-teamlist button`(0,2,1) 이 §10 (c) 의 `.wide-controls .switchmenu.cherish-tp
button`(0,3,1) 에 졌다 — 주석은 「PC 도 같이 작게」인데 PC 는 그대로 128px 이었고, 그 바람에
노트북(1280×800)에서 2대2·6대6 **대기 화면이 107px 넘쳐 있었다**(입력칸을 넣기 전부터).
그래서 `html.cw-bshell .cw-bpanel` 로 감싸 특정도를 올렸다(0,4,2). 고친 뒤 실측:
조작부 420 → **198px** · 넘침 −152 → **여유 +55**. 값을 다시 만질 땐 특정도부터 확인할 것. */
html.cw-bshell .cw-bpanel .switchmenu.cherish-teamlist button { width: 72px; padding: 3px 2px 9px; margin: 2px 2px 0; font-size: 9pt; }
html.cw-bshell .cw-bpanel .switchmenu.cherish-teamlist button .cherish-tpart { width: 64px; height: 64px; }
html.cw-bshell .cw-bpanel .switchmenu.cherish-teamlist button .hpbar { left: 6px; right: 6px; }
/* 껍데기 밖(?cwpreview=0 탈출구)에서는 종전 규칙 그대로 — 거기는 로그 패널이 살아 있다. */
.switchmenu.cherish-teamlist button { width: 72px; padding: 3px 2px 9px; margin: 2px 2px 0; font-size: 9pt; }
.switchmenu.cherish-teamlist button .cherish-tpart { width: 64px; height: 64px; }
.switchmenu.cherish-teamlist button .hpbar { left: 6px; right: 6px; }
/* -- 10) 홈 CTA -- 자동매칭 시작 · 모드 세그먼트 ----------------------
업스트림 광택 버튼(.button.mainmenu1)을 쓰지 않고 자체 마크업으로 세웠다.
클래스는 patch-ffa-client.py 가 붙이고 외형은 여기가 소유한다.
v2 (2026-09-05) -- 사용자: 「여전히 투박하다」. 1차의 문제는 셋이었다:
- 꽉 찬 붉은 판 하나가 화면을 가로지르는 모양이라 버튼이 아니라 「띠」로 읽혔다.
- 모드 토글이 넓은 알약 3개로 헐겁게 놓여 비활성 입력칸처럼 보였다.
- 그라디언트 한 겹뿐이라 재질이 없었다.
그래서 토글을 **세그먼트 컨트롤 한 덩어리**로 묶고, CTA 에는 아이콘 뒤 방사형 빛과
위아래 안쪽 테두리를 넣어 두께를 만들었다.
WARN `` 로 만든 블록(.cw-modes/.cw-cta-hint)은 `.menugroup > p`(0,1,1)에 여백을
뺏긴다. 반드시 `.menugroup > p.xxx`(0,2,1)로 잡을 것 -- 1차에서 이걸 놓쳐
토글 위 여백이 0 이 되고 CTA 그림자에 칩이 깔렸다.
WARN 애니메이션은 transform/opacity 만 건드린다. box-shadow 키프레임은 저사양에서
매 프레임 리페인트를 만든다. */
/* cw-cta-centered: 아이콘+글자를 한 덩어리로 가운데. 셰브론은 흐름 밖(아래 .cw-cta-go). */
.cw-cta {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
width: 100%;
margin: 0;
/* 오른쪽 셰브론이 절대 배치라 좌우 패딩을 같게 둬도 글자 묶음이 안 밀린다 */
padding: 13px 44px;
border: 0;
border-radius: 16px;
/* 그린 배경이 정본, CSS 그라데이션은 그림을 못 받았을 때의 폴백으로 밑에 깐다.
100% 100% 로 늘린다 — 그림에 또렷한 형태가 없어서 폭이 3배 달라져도 티가 안 난다
(그 제약은 docs/showdown-home-assets.md §2-4 가 소유한다). */
background:
url('/cherish/ui/cta-bg.png?v=1') center / 100% 100% no-repeat,
var(--cw-cta-grad);
color: var(--cw-on-accent);
font: inherit;
text-align: left;
text-shadow: none;
cursor: pointer;
overflow: hidden;
box-shadow: var(--cw-cta-shadow), var(--cw-cta-inset);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
/* 질감 -- 128px 타일을 옅게 반복. 배경 그림은 늘어나지만 이 타일은 반복이라 안 늘어난다.
그래서 「또렷해도 되는 무늬」는 전부 이쪽이 담당한다.
⚠️ 세기를 opacity 로 주므로 이 요소에 box-shadow 를 두면 그림자까지 흐려진다.
안쪽 테두리는 .cw-cta 본체의 box-shadow(--cw-cta-inset)로 옮겨 뒀다.
⚠️ 예전에 있던 방사형 하이라이트는 뺐다 — 배경 그림에 자체 명암이 생겨 광원이 둘이 됐다. */
.cw-cta::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url('/cherish/ui/cta-texture.png?v=1') repeat 0 0 / 128px 128px;
opacity: .14;
pointer-events: none;
}
/* 호버에 한 번 지나가는 빛 */
.cw-cta::after {
content: "";
position: absolute;
top: -60%;
bottom: -60%;
left: 0;
width: 38%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent);
transform: translateX(-280%) skewX(-16deg);
pointer-events: none;
}
.cw-cta:hover {
transform: translateY(-2px);
box-shadow: var(--cw-cta-shadow-hover), var(--cw-cta-inset);
}
.cw-cta:hover::after {
transition: transform .75s ease;
transform: translateX(440%) skewX(-16deg);
}
.cw-cta:active { transform: translateY(0); filter: brightness(.96); }
.cw-cta:focus-visible { outline: 3px solid var(--cw-line-strong); outline-offset: 3px; }
/* 아이콘 -- 원형 배지. 안에 포켓볼 SVG 가 들어온다 (마크업 소유) */
.cw-cta-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .15);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .34),
0 1px 2px rgba(0, 0, 0, .14);
color: var(--cw-on-accent);
}
.cw-cta-icon svg { display: block; }
.cw-cta-body { flex: 0 1 auto; min-width: 0; text-align: center; }
.cw-cta-title {
display: block;
font-size: 17px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
}
/* 켜둔 모드 목록 -- 길어지면 줄바꿈 대신 말줄임 (버튼 높이가 흔들리면 안 된다) */
.cw-cta-sub {
display: block;
margin-top: 3px;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
letter-spacing: .01em;
opacity: .78;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cw-cta-go {
position: absolute;
top: 50%;
right: 15px;
font-size: 13px;
opacity: .6;
/* translateY 로 세로 가운데를 잡으므로 호버 이동도 같은 transform 안에서 처리한다 */
transform: translateY(-50%);
transition: transform .16s ease, opacity .16s ease;
}
.cw-cta:hover .cw-cta-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
/* 대기 중 -- is-waiting 는 **기본 상태를 물려받는다** (배경 그림·가운데 정렬 그대로).
달라지는 건 아이콘(도는 화살표)·문구·바닥 진행 줄, 그리고 오른쪽 취소 알약뿐이다.
예전엔 색을 빼고(흰 카드) 왼쪽 정렬이었다. 「계속 띄워 두는 상태라 조용해야 한다」는
판단이었는데, 배경 그림이 들어오면서 같은 버튼이 누르면 딴 것으로 바뀌는 것처럼 보였다
(2026-09-05 사용자 지적).
⚠️ 취소 알약이 절대 배치라 좌우 패딩을 그 폭만큼 **대칭으로** 벌린다. 안 그러면 가운데
묶음이 알약 밑으로 파고든다. 라벨이 「대기 취소」가 아니라 「취소」인 것도 그 폭 때문. */
.cw-cta.is-waiting { padding: 13px 62px; }
/* 호버 광택은 끈다 -- 대기 중에 눌러 봐야 취소지 시작이 아니다 */
.cw-cta.is-waiting::after { display: none; }
.cw-cta.is-waiting:hover { transform: none; box-shadow: var(--cw-cta-shadow), var(--cw-cta-inset); }
/* 취소 -- 셰브론 자리를 알약이 대신한다 (같은 절대 배치를 물려받는다) */
.cw-cta.is-waiting .cw-cta-go {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
font-size: 11.5px;
font-weight: 600;
color: var(--cw-on-accent);
opacity: 1;
transition: background .14s ease;
}
.cw-cta.is-waiting .cw-cta-go i { font-size: 9px; }
.cw-cta.is-waiting:hover .cw-cta-go {
transform: translateY(-50%);
background: rgba(255, 255, 255, .32);
}
/* 바닥 진행 줄 -- 남은 시간을 모르니 좌우로 오가며 「돌고 있다」만 알린다 */
.cw-cta-wait-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
overflow: hidden;
background: rgba(0, 0, 0, .18);
}
.cw-cta-wait-bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 38%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
animation: cw-cta-sweep 1.5s ease-in-out infinite;
}
@keyframes cw-cta-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(265%); }
}
/* cw-modes-seg: 모드 토글 = **세그먼트 컨트롤**. 알약 3개를 따로 띄우면 헐거워 보여서 한 덩어리로 묶었다.
특이도는 `.menugroup > p` 를 이기도록 p 를 포함시킨다 (위 WARN 참조). */
.menugroup > p.cw-modes {
display: flex;
gap: 3px;
margin: 10px 0 0;
padding: 3px;
border: 1px solid var(--cw-line);
border-radius: 13px;
background: var(--cw-tint);
}
.cw-modechip {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px 4px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--cw-ink-muted);
font: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
text-shadow: none;
cursor: pointer;
transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.cw-modechip:hover:not(:disabled):not(.on) { background: var(--cw-white); color: var(--cw-ink); }
/* 켜진 칸 = **색 채움** (2026-09-05 사용자: 흰 알약은 꺼진 칸과 구분이 안 갔다). CTA 와 같은 붉은 그라데이션 +
흰 글자. 꺼진 칸은 바탕색 그대로 + 회색 글자. §15 소프트 글래스에도 같은 규칙이 있다 -- 둘 다 고칠 것. */
.cw-modechip.on {
background: var(--cw-cta-grad);
color: var(--cw-on-accent);
box-shadow: 0 4px 10px -6px rgba(190, 18, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.cw-modechip.on .cw-modechip-crowd { background: var(--cw-white); color: var(--cw-accent); }
.cw-modechip:disabled { cursor: default; opacity: .55; }
/* 잠긴 칸(6대6 자격 미달) -- 흐리게만 두면 「대기 중이라 잠긴 것」과 구별이 안 되어 점선을 같이 준다.
2026-09-22 평면화로 하위 칸이 사라지면서 **큰 칸이 그대로 물려받았다**. */
.cw-modechip.is-locked {
opacity: .7;
outline: 1px dashed var(--cw-line-strong);
outline-offset: -2px;
}
/* 잠긴 이유 한 줄 -- **여섯 마리가 모이면 줄째로 사라진다**(상시 문구가 아니다).
title 툴팁만 두면 모바일에서 영영 안 보여서 줄로도 적는다. */
.menugroup > p.cw-submodes-note { margin: 4px 0 0 5px; font-size: 11px; color: var(--cw-ink-muted); }
/* 모드 엠블럼 -- 예전엔 체크(✓)가 있던 자리다 (2026-09-05 사용자 확정으로 교체).
켜짐·꺼짐은 이미 알약 배경과 글자색이 보여주므로 체크는 중복이었고, 그 자리를 엠블럼이 받았다.
그림의 알파만 쓰고 색은 currentColor 가 칠한다 -- 그래서 흰색 PNG 한 장으로
켜짐(액센트)·꺼짐(회색)·붉은 CTA 위(흰색)가 전부 해결된다. */
.cw-modechip-mark {
flex: 0 0 auto;
width: 13px;
height: 13px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.cw-modechip-mark.is-ffa {
-webkit-mask-image: url('/cherish/ui/mode-ffa.png?v=1');
mask-image: url('/cherish/ui/mode-ffa.png?v=1');
}
.cw-modechip-mark.is-solo {
-webkit-mask-image: url('/cherish/ui/mode-solo.png?v=1');
mask-image: url('/cherish/ui/mode-solo.png?v=1');
}
.cw-modechip-mark.is-multi {
-webkit-mask-image: url('/cherish/ui/mode-multi.png?v=1');
mask-image: url('/cherish/ui/mode-multi.png?v=1');
}
/* 세 칸을 **균등**하게 만드는 장치. flex:1 1 0 만으로는 안 된다 -- 플렉스 아이템은
min-content 아래로 줄지 않아서, N/4 배지가 붙은 칸만 넓어진다 (실측). */
.cw-modechip-label {
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.cw-modechip-crowd {
flex: 0 0 auto;
padding: 1px 5px;
border-radius: 6px;
background: var(--cw-accent);
color: var(--cw-on-accent);
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.menugroup > p.cw-cta-hint {
margin: 8px 0 0;
text-align: center;
font-size: 11px;
line-height: 1.5;
color: var(--cw-ink-muted);
}
/* 파티 비리더 -- 버튼 자리에 들어가는 읽기 전용 카드 */
.cw-cta-passive {
display: flex;
align-items: center;
gap: 13px;
padding: 13px 15px;
border: 1px dashed var(--cw-line-strong);
border-radius: 16px;
background: var(--cw-tint);
}
.cw-cta-passive .cw-cta-icon {
background: var(--cw-white);
box-shadow: inset 0 0 0 1px var(--cw-line);
color: var(--cw-accent);
}
.cw-cta-passive .cw-cta-title { color: var(--cw-ink); font-size: 15px; }
.cw-cta-passive .cw-cta-sub { color: var(--cw-ink-muted); opacity: 1; white-space: normal; }
/* 「배틀 진행 중」 카드는 버튼이다 (눌러서 그 배틀로 돌아간다). 브라우저 기본 버튼
스타일이 폭·정렬·글꼴을 덮으므로 여기서 되돌린다. 점선 테두리는 그대로 둔다 —
「지금은 못 누르는 자리」가 아니라 「다른 곳으로 가는 자리」라는 결이 맞다. */
button.cw-cta-passive {
width: 100%;
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .18s ease, background .18s ease;
}
button.cw-cta-passive:hover {
border-color: var(--cw-accent);
background: var(--cw-tint-2);
}
button.cw-cta-passive:hover .cw-cta-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.cw-cta, .cw-cta-go { transition: none; }
.cw-cta:hover { transform: none; }
.cw-cta:hover::after { transition: none; transform: translateX(-280%) skewX(-16deg); }
.cw-cta:hover .cw-cta-go { transform: none; }
.cw-cta-wait-bar::after { animation: none; transform: translateX(80%); }
}
/* -- 10b) 자동매칭 첫 안내 팝업 (2026-09-05) --------------------------
첫 「자동매칭 시작」 에서 한 번 뜬다 (localStorage cherish-mode-intro-seen-2). 세 모드를 설명하고
원하는 것만 골라 돌릴 수 있음을 알린다. 2대2·난투전에 「추천」 -- 초보를 그쪽으로 유도.
마크업은 patch-ffa-client.py renderCherishIntro 가 만든다. 모드 칸 오른쪽 「?」 로 다시 연다.
WARN 카드는