/* ========================================================================== 전달본에 없는 화면들 — 게시판 · 문의 · 고객센터 · 약관 · 검색 ★ 전달본(2026-08-28)이 준 것은 열일곱 장이고 이 화면들은 그중에 없다. 지금까지 exit.css 의 ex-* 로 그려 <혼자만 다른 결>이었다 — 카드 모서리도, 글자 크기도, 여백도 전달본과 달랐다. ★ 여기서도 <전달본의 토큰과 규칙만> 쓴다. · 구역 제목 → .sec__head / .sec__title (전달본에 <있다>. 그대로 쓴다) · 패널 → .ac-panel 결 (surface-1 + line + r) · 목록 행 → .ac-row 결 · 표 → .ac-table 결 · 빈 상태 → .empty 결 · 넘기개 → .loadmore 결 · 입력 → auth.css 의 .auth__input 을 <그대로 쓴다> 두 벌을 만들면 문의 폼과 로그인 폼의 칸이 달라진다 ⚠ 이름은 pg-* 다. 전달본에 없는 이름이므로 전달본 화면은 하나도 안 바뀐다. ========================================================================== */ /* ---- 카드 한 장 ---------------------------------------------------------- */ .pg-panel { padding: 20px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r); } /* ---- 목록 --------------------------------------------------------------- */ .pg-list { display: grid; gap: 10px; } /* 한 줄. 누를 수 있으므로 hover 를 준다 — 전달본 .ac-row 와 같은 결 */ .pg-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r); transition: background var(--t-bg), border-color var(--t-bg); } .pg-item:hover { background: var(--surface-2); border-color: var(--nav-caret); } .pg-item__thumb { flex: none; width: 96px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); } .pg-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-item__body { min-width: 0; flex: 1; } .pg-item__title { font-size: var(--fs-md); font-weight: 800; color: var(--text); } .pg-item__desc { margin-top: 4px; font-size: var(--fs-base); color: var(--text-4); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pg-item__meta { margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--text-5); } /* ---- 글 한 편 (공지 상세 · 약관) ---------------------------------------- */ .pg-post { padding: 28px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r); } .pg-post__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-4); } .pg-post__back:hover { color: var(--text); } .pg-post__title { margin: 0; font-size: var(--fs-xl); font-weight: 900; color: var(--text); } .pg-post__meta { margin-top: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-5); } /* * 본문은 <콘솔이 작성한 HTML> 이다. 안쪽 태그에 규칙이 없으면 * 제목도 목록도 본문과 같은 크기로 붙어 버린다. */ .pg-post__body { margin-top: 20px; font-size: var(--fs-base); line-height: 1.75; color: var(--text-2); } .pg-post__body > * + * { margin-top: 14px; } .pg-post__body h1, .pg-post__body h2, .pg-post__body h3 { color: var(--text); font-weight: 800; line-height: 1.4; } .pg-post__body h1 { font-size: var(--fs-lg); } .pg-post__body h2 { font-size: var(--fs-md); } .pg-post__body h3 { font-size: var(--fs-base); } .pg-post__body a { color: var(--primary); text-decoration: underline; } .pg-post__body ul, .pg-post__body ol { padding-left: 20px; } .pg-post__body li + li { margin-top: 6px; } .pg-post__body img { max-width: 100%; height: auto; border-radius: var(--r-sm); } .pg-post__body table { width: 100%; border-collapse: collapse; } .pg-post__body th, .pg-post__body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; } .pg-post__body th { background: var(--surface-2); font-weight: 800; color: var(--text); } .pg-post__body hr { border: 0; border-top: 1px solid var(--line); } /* ---- 연락처 두 장 (고객센터) -------------------------------------------- */ .pg-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-card, 16px); margin-bottom: 28px; } .pg-contact__card { display: flex; gap: 14px; padding: 20px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r); } /* 누를 수 있는 카드(1:1 문의). 나머지 카드는 안내뿐이라 눌러도 아무 일이 없다 — 같은 모양이면 회원이 그것들도 눌러 보고 고장인 줄 안다. */ .pg-contact__card--go { text-decoration: none; color: inherit; transition: border-color .15s ease, background .15s ease; } .pg-contact__card--go:hover { border-color: var(--primary); background: var(--surface-2); } .pg-contact__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--primary); } .pg-contact__card h3 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-5); } .pg-contact__card a, .pg-contact__card strong { display: block; font-size: var(--fs-md); font-weight: 800; color: var(--text); } .pg-contact__card a:hover { color: var(--primary); } .pg-contact__card p { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-5); line-height: 1.5; } /* ---- 고객센터 한 장 ------------------------------------------------------ */ .pg-support { display: grid; gap: 0; } /* ---- 자주 묻는 질문 ------------------------------------------------------ ★ 육각 배지가 카드를 물고 나오는 구성 (레드가 준 참고 이미지). 색은 전달본 토큰만 쓴다 — 참고 이미지는 흰 바탕이고 우리는 어둡다. ★ 배지는 clip-path 로 그린다. 이미지나 SVG 로 두면 색을 못 바꾸는데, <펼쳤을 때 CTA 색으로 도는 것>이 이 디자인의 요점이다. ------------------------------------------------------------------------ */ .pg-faq { display: grid; gap: 12px; counter-reset: faq; } .pg-faq__item { counter-increment: faq; border-radius: var(--r); } .pg-faq__item > summary { display: flex; align-items: center; gap: 18px; padding: 0 20px 0 0; cursor: pointer; list-style: none; } .pg-faq__item > summary::-webkit-details-marker { display: none; } /* 육각 배지. 번호는 CSS 가 센다 — 화면 코드가 순서를 몰라도 된다 */ .pg-faq__item > summary::before { content: counter(faq, decimal-leading-zero); flex: none; width: 64px; height: 72px; display: grid; place-items: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(160deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000)); color: var(--text); font-size: var(--fs-md); font-weight: 900; letter-spacing: .02em; transition: background var(--t-bg); } /* 펼치면 배지가 CTA 색으로 — 어느 것을 열어 두었는지 멀리서도 보인다 */ .pg-faq__item[open] > summary::before { background: linear-gradient(160deg, var(--cta-hi), var(--cta)); color: var(--text-on-cta); } /* 질문 카드. 배지 오른쪽에 붙어 한 덩이로 읽힌다 */ .pg-faq__q { flex: 1; min-width: 0; padding: 20px 0; font-size: var(--fs-md); font-weight: 800; color: var(--text); } .pg-faq__item > summary { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .pg-faq__item > summary:hover { background: var(--surface-2); border-color: var(--nav-caret); } .pg-faq__item[open] > summary { border-radius: var(--r) var(--r) 0 0; border-bottom-color: transparent; } .pg-faq__caret { flex: none; color: var(--text-5); transition: transform var(--t-bg); } .pg-faq__item[open] .pg-faq__caret { transform: rotate(180deg); color: var(--cta); } /* 답변. 배지 폭만큼 들여써서 질문과 <같은 줄기>로 보이게 한다 */ .pg-faq__a { padding: 20px 20px 22px 82px; background: var(--surface-1); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); font-size: var(--fs-base); line-height: 1.75; color: var(--text-3); } .pg-faq__a > * + * { margin-top: 12px; } .pg-faq__a a { color: var(--primary); text-decoration: underline; } @media (max-width: 640px) { .pg-faq__item > summary { gap: 12px; } .pg-faq__item > summary::before { width: 46px; height: 54px; font-size: var(--fs-base); } .pg-faq__q { padding: 14px 0; font-size: var(--fs-base); } .pg-faq__a { padding: 16px 16px 18px 58px; } } /* ---- 문의 --------------------------------------------------------------- */ .pg-inq__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } /* ---- 새 문의 접힘 ------------------------------------------------------- ★ 단추는 summary 다. details 에 .btn 을 씌우면 펼쳤을 때 폼까지 단추 안으로 들어간다. ------------------------------------------------------------------------ */ .pg-newinq { margin-bottom: 20px; } .pg-newinq__btn { list-style: none; cursor: pointer; } .pg-newinq__btn::-webkit-details-marker { display: none; } /* 펼치면 폼이 아래로 떨어진다 */ .pg-newinq[open] .pg-newinq__btn { margin-bottom: 12px; } /* 분류 · 상태 배지 — 전달본 .tag 와 같은 결 */ .pg-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-chip); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 800; color: var(--text-3); } .pg-badge--done { background: rgba(102,187,106,.14); color: var(--success); } .pg-badge--wait { background: rgba(255,206,0,.14); color: var(--cta); } /* 답변 대기 점 — 목록에서 <답이 왔는지>가 한눈에 보여야 한다 */ .pg-dot { width: 8px; height: 8px; flex: none; border-radius: var(--r-full); background: var(--cta); } /* ---- 문의 실타래 (질문 → 답변) ------------------------------------------ */ .pg-thread { display: grid; gap: 12px; } /* ★★ 우리 시그니처 (레드 2026-09-15 「이 느낌으로 가즈아」). 스포츠 줄(.sb-row[data-sport])과 <같은 공식>이다 — ① 왼쪽에서 세로 전체로 번지는 radial-gradient ② 테두리로 그린 왼쪽 띠 (::before 라 둥근 모서리를 그대로 따라간다) ⚠ 띠를 border-left 로 <직접> 주면 안 된다. 모서리에서 각이 서고, padding 도 같이 밀려 글자가 3px 씩 어긋난다. 그래서 겹쳐 그린다. ★ 색으로 <누가 썼는지>를 가른다 (레드). 회원 문의 → 파랑 답변 → 빨강 들여쓰기는 폭이 좁아지면 티가 안 나지만 색은 어디서나 같다. */ .pg-thread__item { position: relative; --sp: var(--primary); padding: 20px; background: radial-gradient(90% 190% at 0% 50%, color-mix(in srgb, var(--sp) 22%, transparent) 0%, transparent 42%), var(--surface-1); border: 1px solid var(--line); border-radius: var(--r); } .pg-thread__item::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; border-left: 5px solid var(--sp); } /* 글이 띠 위로 올라오게 한다 — 안 그러면 덮개가 글자를 가린다 */ .pg-thread__who, .pg-thread__body { position: relative; z-index: 1; } /* 답변은 <빨강>이다 (레드). ⚠ 들여쓰기를 <걷었다> (레드 2026-09-15 「가로맞춰줄래」). 색 띠가 이미 누가 썼는지를 말해 주는데 들여쓰기까지 두니 답변만 안쪽으로 밀려, 두 상자의 왼쪽 끝이 안 맞고 오른쪽만 맞았다. 둘이 겹치면 <어긋나 보인다>. */ .pg-thread__item--reply { --sp: var(--danger); } .pg-thread__who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: var(--fs-xs); font-weight: 800; color: var(--text-4); } .pg-thread__when { font-weight: 500; color: var(--text-5); margin-left: auto; } /* 역할 아이콘. 글자만으로는 훑을 때 누가 쓴 것인지 안 들어온다 */ .pg-thread__ico { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-3); font-size: 11px; color: var(--text-4); } .pg-thread__item--reply .pg-thread__ico { background: var(--primary); color: var(--text-on-cta); } .pg-thread__body { font-size: var(--fs-base); line-height: 1.75; color: var(--text-2); white-space: pre-wrap; } /* 콘솔이 작성한 답변은 HTML 이라 줄바꿈을 그대로 두면 안 된다 */ .pg-thread__body--rich { white-space: normal; } .pg-thread__body--rich > * + * { margin-top: 12px; } .pg-thread__body--rich a { color: var(--primary); text-decoration: underline; } /* 아직 답이 없을 때. 빈칸으로 두면 <불러오는 중>으로 읽힌다 */ .pg-thread__waiting { text-align: center; color: var(--text-5); font-size: var(--fs-base); } /* ---- 쪽 넘기개 — 전달본 .loadmore 결 ------------------------------------ */ .pg-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; } .pg-pager__at { font-size: var(--fs-sm); color: var(--text-5); } /* ---- 검색 --------------------------------------------------------------- */ .pg-search { display: flex; gap: 10px; margin-bottom: 24px; } .pg-search .auth__input { flex: 1; } /* ---- 좁은 화면 ---------------------------------------------------------- */ @media (max-width: 640px) { .pg-item { padding: 14px; gap: 12px; } .pg-item__thumb { width: 72px; height: 52px; } .pg-post { padding: 20px 16px; } /* ⚠ 여기서도 들여쓰기를 안 준다 — 위 규칙과 같은 까닭이다 (가로를 맞춘다) */ } /* ========================================================================== 검색 겹창 · 안내 겹창 — 전달본에 <대응 화면이 없다> ★ 전달본이 준 겹창은 <지갑 모달> 하나뿐이고, 그 규칙은 #walletModal 안에 갇혀 있다. 헤더 돋보기가 여는 검색 겹창과 「로그인이 필요합니다」 같은 안내 겹창은 우리가 만들어야 한다. ★ 지갑 모달과 <같은 결>로 짠다 — 회원이 이미 본 창이라야 새 창이 아니라 같은 사이트의 다른 창으로 읽힌다: 바닥 어둡게 + 흐림(backdrop-filter) 상자 surface-1 + line + r-lg 입력 auth.css 의 .auth__input 을 그대로 쓴다 ========================================================================== */ /* ---- 겹창 바닥 ----------------------------------------------------------- */ .pg-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(9, 12, 29, .72); backdrop-filter: blur(4px); } /* 바닥을 누르면 닫힌다. 상자 뒤에 깔린다 */ .pg-overlay__back { position: absolute; inset: 0; } /* ---- 검색 상자 ----------------------------------------------------------- */ .pg-search__panel { position: relative; width: 100%; max-width: 560px; padding: 20px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); } /* 돋보기 · 입력 · 닫기가 한 줄 */ .pg-search__form { display: flex; align-items: center; gap: 10px; } .pg-search__form .auth__input { flex: 1; } .pg-search__ico { flex: none; color: var(--text-5); } .pg-search__x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-4); transition: background var(--t-bg), color var(--t-bg); } .pg-search__x:hover { background: var(--surface-2); color: var(--text); } .pg-search__hint { margin: 10px 2px 0; font-size: var(--fs-xs); color: var(--text-5); } /* ---- 안내 상자 (로그인 필요 등) ------------------------------------------ */ .pg-dialog { position: relative; width: 100%; max-width: 380px; padding: 28px 24px 24px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); text-align: center; } /* 동그란 아이콘. 무슨 안내인지 글자보다 먼저 읽힌다 */ .pg-dialog__ico { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: var(--r-full); background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .pg-dialog h3 { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 900; color: var(--text); } .pg-dialog p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text-4); } .pg-dialog__actions { display: grid; gap: 10px; margin-top: 22px; } @media (max-width: 640px) { .pg-search__panel { padding: 16px; } .pg-dialog { padding: 24px 20px 20px; } } /* ========================================================================== 게임 상자 안의 실행 단추 — ★ 전달본은 이 자리가 게임사 iframe 이라 단추가 없다. 「실제 플레이」는 .game-poster 안에만 있고, 그 포스터는 components.css 가 「모바일 전용」으로 두어 PC 에서는 감춘다. 우리는 <팝업>으로 띄우므로 PC 에도 실행할 구몍이 필요하다. ⚠ 전달본에 없는 이름(game-frame__play)이므로 전달본 화면은 하나도 안 바뀐다. 모바일에서는 부모(.game-frame__demo)가 통째로 display:none 이라 이 단추도 함께 사라진다 — 거기서는 포스터의 단추가 같은 일을 한다. ========================================================================== */ .game-frame__play { min-width: 200px; height: 44px; margin-top: 8px; padding: 0 24px; font-size: var(--fs-base); font-weight: 900; } /* ========================================================================== 게임사 화면 — 상자 안 iframe (레드 2026-08-29 "저기 iframe에서 바로 게임실행") ★ 전달본이 「실제 연동 시 이 자리에 게임사 iframe 이 들어갑니다」라고 적어 둔 <바로 그 자리>다. 상자를 꽉 채운다. ⚠ 게임사가 X-Frame-Options 로 막을까 걱정했는데 실서버에서 넣어 보니 막지 않았다 — 게임사 안내창까지 그대로 떴다. ========================================================================== */ .game-frame__iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; } /* * 실행이 거절됐을 때 그 자리에 적는다. * * ⚠ 예전에는 「겹창을 띄우면 게임 상자가 가려진다」는 까닭으로 팝업을 안 띄웠다. * 그런데 이 글씨가 <너무 작아 묻혔다> — 회원이 왜 게임이 안 열리는지 모른 채 * 다시 누른다. 지금은 <둘 다> 한다: 팝업으로 알리고, 닫으면 이 줄이 남는다. * (레드 2026-08-30 "우리쪽에도 사이트에도 팝업하나띄워야할듯") */ .game-frame__err { margin-top: 4px; max-width: 420px; font-size: var(--fs-sm); line-height: 1.5; color: var(--cta); text-align: center; } /* 전체화면 — 게임 화면만 꽉 채운다 (레드 2026-08-29 "전체화면 iframe 기준으로") ⚠ 상자를 채우면 게임 바깥에 상자의 바탕·모서리가 함께 들어가 가장자리가 남는다. */ .game-frame__iframe:fullscreen { width: 100vw; height: 100vh; background: #000; } /* 아직 게임을 안 열었을 때는 상자가 대신 채워진다 — 그때도 모서리를 없앤다. */ .game-frame:fullscreen { border-radius: 0; } /* ========================================================================== 게임 카드의 하트 — 즐겨찾기 (레드 2026-08-29 "카지노 즐겨찾기 시스템 만들자") ★ 전달본 카드에는 하트가 없다. .gamecard 가 position:relative 이므로 그 위에 얹는다. 이름은 우리 것이라 전달본 화면은 안 바뀐다. ★ 평소에는 <숨어 있다.> 카드는 그림이 주인공이고, 하트가 늘 떠 있으면 격자 전체가 시끄러워진다. 손을 올리면 나오고, <담은 것은 계속 보인다> — 어느 것을 담았는지가 한눈에 들어와야 한다. ⚠ 손가락에는 hover 가 없다. 터치 기기에서는 늘 보이게 한다 — 안 그러면 모바일에서 담을 방법이 사라진다. ========================================================================== */ .gamecard__fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-full); background: rgba(9, 12, 29, .55); color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity var(--t-bg), color var(--t-bg), background var(--t-bg); } .gamecard:hover .gamecard__fav, .gamecard__fav:focus-visible, .gamecard__fav.is-on { opacity: 1; } .gamecard__fav:hover { background: rgba(9, 12, 29, .8); color: var(--text); } /* 담은 것은 CTA 노랑. 멀리서도 어느 카드가 내 것인지 보인다. */ .gamecard__fav.is-on { color: var(--cta); } @media (hover: none) { .gamecard__fav { opacity: 1; } } /* ========================================================================== 경기 줄의 마켓 이름 칸을 넓힌다 (레드 2026-08-29 "마켓이름 길어서 씹히는데") ★ 전달본은 이 칸을 104px 로 잡았다. 전달본 더미의 이름이 「승무패」 「오버언더」처럼 짧아서 그 폭이면 충분했기 때문이다. 우리 이름은 <콘솔이 붙인 실제 이름>이라 훨씬 길다 — 오버언더 (연장 포함) 11 124px 아시안 핸디캡 (연장 포함) -0.5 159px ← 가장 길다 .sb-mkt__head 는 white-space:nowrap 이라 넘치는 만큼 그대로 잘렸다. 한 화면에서 25개가 잘리는 것을 재서 확인했다. ★ 이름을 줄이지 않는다. 「(연장 포함)」은 야구·농구에서 <다른 마켓과 가르는 말>이라, 떼면 무엇에 거는지 알 수 없게 된다. ⚠ 640px 이하는 건드리지 않는다. 거기서는 전달본이 이름을 배당 <위로> 올려 한 단으로 바꾸므로(.sb-mkt{grid-template-columns:minmax(0,1fr)}) 폭 문제가 없고, 우리가 덮으면 그 배치가 깨진다. ⚠ 641~1024 구간도 함께 넓힌다. 그 구간은 마켓 줄이 경기 줄 <전체 폭>을 쓰므로(grid-area:mkts) 배당 칸이 좁아지지 않는다. ========================================================================== */ @media (min-width: 641px) { /* * ★ 이름 칸을 <고정하지 않고> 내용만큼 쓴다(max-content). * * 164px 로 늘렸더니 한국어는 맞았는데 <영어가 여전히 잘렸다> — * 아시안 핸디캡 (연장 포함) -0.5 159px * Asian Handicap Including Overtime -0.5 244px * 언어마다 다른 폭을 숫자 하나로 맞추려면 가장 긴 쪽에 * 맞춰야 하고, 그러면 한국어 화면은 빈 칸이 넘친다. * (레드 2026-08-29 "배당쪽으로 마켓이름 정렬하고 풀로 쓰게") * * ★ 세 줄을 <하나의 격자>로 묶는다(display:contents). * 줄마다 따로 격자면 이름 폭이 제각각이라 * <배당이 세로로 어긋난다.> 묶어야 셋 중 가장 긴 이름에 * 다 맞춰지고 배당 시작점이 같아진다. */ /* * ★ 이름 칸은 <모든 경기에서 같은 폭>이어야 한다. * * 처음에는 max-content 로 두었는데, 그러면 <이름이 길수록 배당이 좁아져> * 경기마다 배당 칸 너비가 들쭉날쭉했다. (레드 2026-08-29 * "배당쪽 표기가 넓이가 뒤죽박죽 … 일정하게 처리부탁해") * * 250px 은 <영어 가장 긴 이름>을 담는 폭이다 — * Asian Handicap Including Overtime -0.5 가 244px. */ .sb-mkts { grid-template-columns: 250px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; } .sb-mkt { display: contents; } /* 이름을 배당 쪽에 붙인다 — 읽는 눈이 배당으로 바로 이어진다. */ .sb-mkt__head { justify-content: flex-end; } /* * ★ 이름 250 + 배당을 담으려면 마켓 영역이 더 넓어야 한다. * 전달본은 360~520px 이었고, 그것은 이름이 「승무패」처럼 * 짧을 때의 값이다. 배당에 340~400px 이 남는다 — * 세 칸이면 각 131px, 두 칸이면 198px. */ .sb-row { grid-template-columns: minmax(150px, 1fr) minmax(600px, 660px) 60px; } /* * ⚠ +N 은 <두 가지로> 자리를 흔든다. * * ① 세 자리가 되면 단추가 넓어진다 +98 50px / +100 58px * ② 마켓이 셋뿐인 경기는 <아예 없다> → 그 경기만 60px 밀린다 * * 그래서 단추 폭을 고정하고, 열 자체도 auto 가 아니라 60px 로 잡는다. * +N 이 없어도 자리는 남겨 둔다 — 모든 경기가 같은 선에서 시작해야 한다. */ .sb-more { min-width: 60px; justify-content: center; } } /* ========================================================================== 배당 단추의 기준선 (레드 2026-08-29 "기준점있는것들 색구분을 좀주면") ★ 전달본에는 이 규칙이 <없다.> 기준선은 우리가 더한 자리라 브라우저 기본 이탤릭으로 떠서 팀 이름에 묻혀 있었다 — 「Mito Hollyhock-1.5」처럼 이름의 일부로 읽혔다. ★ 음수는 색을 달리한다. 핸디캡에서 음수는 <접어 주는 쪽>이고 양수는 받는 쪽이라, 색이 갈리면 한 줄만 봐도 어느 쪽이 유리한지 읽힌다. Mito Hollyhock −1.5 9.26 ↔ Machida Zelvia 1.5 1.01 ========================================================================== */ .mt-pick em, .sb-pick em { font-style: normal; margin-left: 5px; padding: 1px 6px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--primary) 42%, transparent); color: #FFFFFF; font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; } /* ★★ 빨강은 <오버/언더의 문턱>이다 (레드 2026-09-15). 전에는 <음수면> 빨강이었다. 그런데 핸디캡의 −1.5 와 +1.5 는 같은 한 줄의 두 쪽이라, 색이 갈리면 둘이 다른 종류의 값처럼 보인다 — 실은 같은 기준선을 양쪽에서 본 것뿐이다. 그래서 핸디캡은 부호와 무관하게 파랑이다. 오버/언더의 숫자는 <넘느냐 못 넘느냐>의 문턱이고 부호가 없다. */ .mt-pick em.is-total, .sb-pick em.is-total { background: color-mix(in srgb, var(--updown-down) 38%, transparent); color: #FFE4E4; } /* 목록 마켓 머리의 기준선 — 상세의 칩과 <같은 규칙>으로 음수를 가른다. 목록은 칩을 씌우지 않는다. 이름 옆이라 칩이 겹치면 줄이 시끄러워진다 — 색과 굵기만으로 충분하다. */ .sb-mkt__head b { margin-left: 1px; padding: 1px 6px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--primary) 42%, transparent); color: #FFFFFF; font-variant-numeric: tabular-nums; } .sb-mkt__head b.is-minus { background: color-mix(in srgb, var(--updown-down) 38%, transparent); color: #FFE4E4; } /* ========================================================================== 인플레이 상세의 트래커 기둥 (레드 2026-08-29 "트래커쪽 상단 디자인 뭉개지는거") ★ STATSCORE 위젯은 <컨테이너 폭을 보고 배치를 스스로 고른다.> 좁으면 클래스에 --vertical · --xs · --baseball-250 이 붙어 팀 이름을 세로로 쪼갠다(Saitama / Seibu / Lions). 전달본은 이 기둥을 304px 로 잡았다. 거기에 두려던 것은 <작은 스코어 요약>이었지 실시간 트래커 위젯이 아니다. ★ 폭마다 위젯이 이렇게 달라진다(야구 기준으로 재 봤다): 304px 팀 이름 세 줄 · 이닝 표가 4회부터만 보인다 400px 팀 이름 두 줄 · 이닝 1~8회 · 탭 4개 480px 팀 이름 두 줄 · 이닝 <1~9회 + 합계> · 탭 5개 ← 지금 야구는 9회에 합계까지 열 열이라, 480px 이 되어야 이닝 표를 <가로로 밀지 않고> 다 본다. (레드 2026-08-29 "480px으로 넓혀줘") ⚠ 글꼴만 줄여서는 안 풀린다. 위젯이 <폭으로> 배치를 고르기 때문에 글자를 줄여도 세로 배치가 그대로다. 폭과 함께 줄여야 효과가 있다. ⚠ 본문은 그만큼(880 → 704px) 줄어든다. 상세 배당은 한 줄에 두세 칸이라 그 폭에서도 넉넉하다 — 배당이 쏟아지는 마켓도 세 칸이 최대다. ========================================================================== */ @media (min-width: 1025px) { .mt-layout { grid-template-columns: minmax(0, 1fr) 480px; } } /* 팀 이름은 위젯 기본(14px)보다 작게 — 좁은 기둥에서 줄바꿈이 덜 생긴다. 위젯이 제 값을 인라인으로 넣으므로 !important 가 필요하다. */ .ex-lv-tracker .STATSCOREWidget--scoreboard__participantNameLine { font-size: 12px !important; line-height: 1.3 !important; } /* ========================================================================== 프리매치 상세 — 트래커를 걷어낸 자리 ★ 2026-08-30 배당을 <한 줄로> 되돌렸다 (레드 "디자인 준대로 롤백하자"). 2026-08-29 에 "배당부분을 5:5로" 넣었던 두 칸 규칙을 걷어냈다. 전달본 .mt-mkts 가 minmax(0,1fr) 이므로 마켓이 세로로 한 줄이 된다. ★ 전달본 .mt-layout 은 <본문 + 트래커> 두 칸이고, 칸 이름을 격자에 박아 두었다(grid-template-areas). 트래커만 안 그리면 그 칸이 <빈 채로 폭을 차지한다> — 배당이 왼쪽 절반에 그대로 갇힌다. 그래서 칸 얼개를 통째로 다시 적는다. ★ 경기 머리와 탭은 100%, 배당만 두 칸으로 나눈다. 레드가 그린 그림 그대로다. ⚠ 칸 얼개를 <다시 적는 일>은 그대로 필요하다. 트래커를 안 그려도 전달본의 304px 칸은 남아, 지우지 않으면 배당이 왼쪽에 갇힌다. ========================================================================== */ .mt-layout.is-prematch { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "mkts"; } /* ========================================================================== 배너 — 좁은 화면에서 가로로 민다 (레드 2026-08-29 "상단 스포츠배너 … 모바일은 가로 스크롤 처리") ★ 전달본은 3열 격자라, 폰에서는 세 장이 세로로 쌓여 <첫 화면을 통째로 먹는다.> 정작 회원이 보러 온 경기 목록은 스크롤을 한참 내려야 나온다. ★ 한 장이 화면의 82%다. 옆 장이 <살짝 보여야> 밀 수 있다는 것을 안다 — 딱 100% 로 채우면 더 있는지 알 수 없다. ========================================================================== */ @media (max-width: 640px) { .sb-banners { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; /* 손을 떼면 카드 머리에 맞춰 선다 */ scroll-snap-type: x mandatory; } .sb-banners::-webkit-scrollbar { display: none; } .sb-banner { flex: 0 0 82%; scroll-snap-align: start; /* 좁은 화면에서 150px 은 과하다 — 목록이 그만큼 밀린다 */ min-height: 124px; } } /* ========================================================================== 리그 머리의 종목 아이콘 (레드 2026-08-29 "리그명 앞에 종목아이콘으로 표기") ⚠ 전달본 규칙은 를 잡는다. 우리는 폰트어썸 라 그 규칙이 안 걸려, 바꾸는 순간 크기도 색도 없는 글자가 된다. 같은 값(22px · --text-4)을 에 다시 준다. ★ width 를 고정한다. 아이콘마다 글자 폭이 달라서(축구공은 넓고 하키 퍽은 좁다) 그대로 두면 리그 이름 시작점이 줄마다 어긋난다. ========================================================================== */ .sb-league__head > i:first-child { flex: none; width: 22px; font-size: 19px; line-height: 22px; text-align: center; color: var(--text-4); } /* ========================================================================== 라이브 목록 — 카드 격자 (레드 2026-08-29 "오히려 라이브는 리스트말고 이걸로 처리하자 전체 / 진행중 / 진행예정") ★ 전에는 프리매치와 같은 <긴 줄>이었다. 라이브는 스코어와 시계가 본체라 줄로 늘어놓으면 가운데가 텅 비고, 배당은 오른쪽 끝에 몰린다. 주요 경기 카드(.sb-hl)와 <같은 생김새>로 모은다 — 같은 경기이고 같은 배당인데 화면마다 다른 모양이면 회원은 다른 것으로 읽는다. ⚠ .sb-hls 는 전달본의 <가로 레일>이다(display:flex + overflow-x). 경기가 열 몇 개라 가로로 밀게 두면 뒤쪽이 안 보인다 — 격자로 덮어쓰되 overflow 도 <되돌린다.> 안 되돌리면 카드가 격자로 서 놓고도 잘린다. ========================================================================== */ .sb-hls.ex-lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap-card); overflow: visible; } /* 격자 안에서는 카드가 칸을 채운다 — 레일의 고정 폭(flex:none)을 푼다 */ .sb-hls.ex-lv-grid > .sb-hl { flex: initial; width: auto; min-width: 0; } /* 묶음 머리의 경기 수. 「주요 경기」 머리의 화살표 자리를 대신한다 */ .ex-lv-count-tag { margin-left: auto; font-size: var(--fs-sm); color: var(--text-5); font-variant-numeric: tabular-nums; } /* * 배당이 아직 없는 카드. * * ⚠ 빈 자리를 두지 않는다. 배당 칸이 통째로 비면 회원은 <고장>으로 읽고, * 카드를 눌러 볼 생각을 안 한다. */ .ex-lv-noodds { padding: 9px 0; text-align: center; font-size: var(--fs-sm); color: var(--text-5); } /* 카드 머리의 종목 아이콘 — 전달본은 이 자리에 svg 를 둔다 */ .sb-hl__top > i:first-child { flex: none; width: 16px; font-size: 14px; text-align: center; color: var(--text-5); } @media (max-width: 640px) { .sb-hls.ex-lv-grid { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 게임 카드 호버 (레드 2026-08-29 "마우스호버시 흰색배경잔재남음 / 보라색 밝은 테두리 눈에띄게 확실히") ★ 전달본은 <흰 테두리>다 — outline:2px solid var(--text). outline 은 요소 <바깥>에 그려지는데 border-radius 를 따라가지 않는 브라우저가 있어, 둥근 카드 모서리 밖으로 흰 각이 삐져나온다. 그것이 「흰색 잔재」의 정체다. ★ 안쪽으로 들인다(outline-offset 음수). 그러면 카드 모서리와 정확히 겹쳐 각이 남지 않는다. 색은 브랜드 보라를 <밝게> 올려 눈에 띄게 한다. ★ 바깥으로 번지는 빛을 하나 더 준다. 테두리만으로는 어두운 배경에서 카드가 촘촘히 붙어 있을 때 어느 것이 선택됐는지 잘 안 보인다. ========================================================================== */ .gamecard:hover, .gamecard:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, #FFFFFF); outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent), 0 6px 20px color-mix(in srgb, var(--primary) 28%, transparent); } /* ========================================================================== 라이브 카드 — 무엇을 누를 수 있는지 (레드 2026-08-29 "인플레이카드 hover하면 마우스 커서도 확실히 처리부탁해") ★ 카드 안에 <누를 수 있는 것이 둘>이다 — 팀 이름 쪽(경기로 간다)과 배당 단추(카트에 담는다). 커서가 둘 다 화살표면 회원은 어디를 눌러야 하는지 모르고, 카드 전체가 링크인 줄 알고 배당을 못 찾는다. ⚠ 카드 <전체>에 pointer 를 주지 않는다. 그러면 리그 이름이나 빈 자리도 눌리는 것처럼 보이는데 실제로는 아무 일도 안 일어난다. ========================================================================== */ .sb-hls.ex-lv-grid .sb-hl__teams, .sb-hls.ex-lv-grid .sb-mkt__picks > * { cursor: pointer; } /* 카드에 손이 닿으면 테두리로 알린다 — 격자에서는 어느 카드를 보고 있는지 알기 어렵다. 게임 카드와 같은 결(보라)로 맞춘다. */ .sb-hls.ex-lv-grid > .sb-hl { transition: border-color var(--t-color), box-shadow var(--t-bg); } .sb-hls.ex-lv-grid > .sb-hl:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); } /* ========================================================================== 라이브 카드 — 전달본 .sb-hl 은 overflow:hidden 이라 안쪽에서 넘치는 것이 잘린다. 지금은 넘칠 것이 없지만, 커서·호버 규칙을 이 이름으로 걸어 둔다. ========================================================================== */ .ex-lv-card { position: relative; } /* ========================================================================== 내 베팅 (레드 2026-08-29 "스포츠 내배팅 내역에 상세내역 확인이 불가함") ★ 폴더를 늘 펼쳐 둔다. 접어 두면 이 화면을 만든 까닭이 사라진다 — 회원은 무엇에 걸었는지 보러 온 것이지 배팅 번호를 보러 온 것이 아니다. ========================================================================== */ .ex-mybets { display: grid; gap: 10px; } .ex-mybet { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-1); overflow: hidden; } /* 결과에 따라 왼쪽 띠 색을 바꾼다 — 목록에서 훑을 때 이것부터 보인다 */ .ex-mybet.is-win { border-left: 3px solid var(--updown-up, #24C88B); } .ex-mybet.is-lose { border-left: 3px solid var(--updown-down, #FF4B4B); } .ex-mybet.is-cancel, .ex-mybet.is-avoid { border-left: 3px solid var(--text-5); } .ex-mybet.is-progress { border-left: 3px solid var(--primary); } .ex-mybet__top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .ex-mybet__type { font-weight: 800; color: var(--text-2); } .ex-mybet__folders { color: var(--text-5); } .ex-mybet__at { margin-left: auto; color: var(--text-5); font-variant-numeric: tabular-nums; } .ex-mybet__state { padding: 2px 8px; border-radius: var(--r-chip); font-weight: 800; background: var(--surface-2); color: var(--text-3); } .ex-mybet__state.is-win { background: color-mix(in srgb, var(--updown-up, #24C88B) 22%, transparent); color: #9BF3D0; } .ex-mybet__state.is-lose { background: color-mix(in srgb, var(--updown-down, #FF4B4B) 20%, transparent); color: #FFC4C4; } .ex-mybet__state.is-progress { background: color-mix(in srgb, var(--primary) 26%, transparent); color: #DCCEFF; } .ex-mybet__folders-list { display: grid; } .ex-mybet__folder { display: grid; gap: 4px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .ex-mybet__folder:last-child { border-bottom: 0; } /* 진 폴더는 흐리게 — 여러 폴더 중 어디서 틀렸는지가 한눈에 보여야 한다 */ .ex-mybet__folder.is-lose { opacity: .55; } /* 경기 줄 — <두 줄로 가른다> (레드 2026-09-14 「한눈에 안 들어온다」). ⚠ 예전에는 리그·팀·시각·점수가 한 줄에 흘러(flex-wrap), 좁은 칸에서 <팀 이름 사이로> 줄이 끊겼다 — 「… vs」 다음 줄에 원정팀이 떨어졌다. 두 팀이 한눈에 안 잡히는 것이 그 때문이다. */ .ex-mybet__match { display: grid; gap: 3px; font-size: var(--fs-sm); } /* ① 곁들이 — 리그 · 경기 시각 · 점수. 작고 흐리게 둔다 */ .ex-mybet__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-5); } .ex-mybet__meta b { display: inline-flex; align-items: center; color: var(--text-5); font-weight: 700; } /* ② 팀 줄 — 이 폴더에서 <제일 먼저 읽어야 하는 것>이다. 크고 진하게. ⚠ 팀 이름은 각각 min-width:0 이라야 긴 이름에서 「…」가 걸린다. 안 주면 flex 칸이 글자 길이만큼 버텨 칸을 밀어낸다. */ .ex-mybet__teams { display: flex; align-items: center; gap: 6px; font-size: var(--fs-base); font-weight: 800; color: var(--text); } .ex-mybet__teams > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* vs 는 이름이 아니다 — 흐리게 두어 두 팀이 먼저 읽히게 한다 */ .ex-mybet__teams > i { flex: none; font-style: normal; font-size: var(--fs-sm); font-weight: 700; color: var(--text-5); } .ex-mybet__score { font-style: normal; padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums; } .ex-mybet__pick { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ex-mybet__market { font-size: var(--fs-sm); color: var(--text-5); } .ex-mybet__pick b { font-weight: 800; color: var(--text); } /* 기준선 칩 — 배당 단추·카트와 같은 결로 맞춘다 */ .ex-mybet__pick b i { font-style: normal; margin-left: 5px; padding: 1px 6px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--primary) 42%, transparent); color: #FFFFFF; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .ex-mybet__odds { margin-left: auto; font-weight: 900; color: var(--cta); font-variant-numeric: tabular-nums; } .ex-mybet__sum { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg); font-size: var(--fs-sm); } .ex-mybet__sum span { color: var(--text-5); } .ex-mybet__sum b { text-align: right; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .ex-mybet__sum b.is-win { color: var(--updown-up, #24C88B); } /* 정산 배당 — 담을 때와 다를 때만 온다 */ .ex-mybet__final { font-style: normal; margin-left: 6px; color: var(--text-5); font-weight: 700; } /* 다폴더 보너스 — 총 배당에는 이미 먹여져 있고, 여기는 얼마가 얹혔는지 적는 자리다. 회사가 얹어 준 것이라 당첨금과 같은 성공 색을 쓴다. 정산 배당(회색)과 뜻이 반대라 같은 색으로 두면 「깎였다」로 읽힌다. */ .ex-mybet__bonus { font-style: normal; margin-left: 6px; color: var(--success); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; } /* 지갑 줄은 한 단 아래로 */ .ex-mybet__sum .ex-mybet__wallet { font-size: var(--fs-xs); color: var(--text-6, var(--text-5)); } /* 폴더의 경기 시각 — 같은 팀이 리그에서 여러 번 붙으므로 이것이 있어야 짚어 낸다 */ .ex-mybet__kick { color: var(--text-5); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* ========================================================================== 라이브 경기 줄 — 부드러운 스크롤을 끈다 (레드 2026-08-29 "인플레이 트래커위에 경기 리스트 가로 스크롤이안된다") ★ 전달본 .scroll-x 는 scroll-behavior:smooth 다. 미는 데 시간이 걸리는데, 이 줄은 <8초마다 갱신>된다 — 애니메이션이 끝나기 전에 화면이 다시 그려지면 스크롤이 0 으로 되돌아간다. 밀어도 밀어도 제자리인 이유다. ⚠ 다른 가로 줄(주요 경기 레일 등)은 그대로 둔다. 거기는 갱신이 없어서 부드럽게 움직이는 편이 낫다 — 문제는 <갱신되는 줄>에서만 난다. ========================================================================== */ .mt-strip.scroll-x { scroll-behavior: auto; } /* 배팅한 그 순간의 경기 상황 — 인플레이만. 결과 점수와 색을 달리해 구별한다 */ .ex-mybet__when { font-style: normal; padding: 0 6px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--primary) 24%, transparent); color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* ========================================================================== 겹창 닫기 단추 (레드 2026-08-29 "모달 닫기 x 버튼 UI 깨짐 현상") ★ 전달본은 .modal__close 를 <#walletModal 안에서만> 꾸민다. 우리 겹창 (.pg-dialog — 로그인 안내 · 게임 실행 실패)에서 같은 이름을 쓰니 <아무 규칙도 안 걸려> 「닫기」 단추 아래에 ✕ 가 덩그러니 떨어져 있었다. 이름은 같은데 자리가 달라서 생긴 일이다. ★ 오른쪽 위로 올린다. 겹창의 ✕ 는 어디서나 그 자리에 있고, 회원은 글자를 읽기 전에 그 자리를 먼저 본다. ========================================================================== */ .pg-dialog > .modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: transparent; color: var(--text-4); transition: background var(--t-bg), color var(--t-color); } .pg-dialog > .modal__close:hover { background: var(--surface-2); color: var(--text); } /* ========================================================================== 게임이 도는 동안 지갑을 잠근다 (레드 2026-08-29 "슬롯 라이브 게임 진행시에는 지갑변동 못하게 하기") ★ 게임 중에 통화를 바꾸면 <선택 지갑이 바뀐다.> 배팅은 그 지갑에서 나가므로, 회원이 보고 있던 잔액과 실제로 빠지는 곳이 갈린다. ★ 여기서 막는 것은 <보이는 신호>다. 실제 차단은 두 곳에서 한다 — common.js 의 toggleWallet 과 리액트 Cashier 가 각각 되돌린다. CSS 만으로 막으면 주소를 치고 들어오는 길이 남는다. ⚠ 잔액 자체는 계속 보인다(「게임 중」으로 바뀐다). 감추면 회원은 연결이 끊긴 줄 안다. ========================================================================== */ body.in-game .balance__caret, body.in-game .btn-cta, body.in-game .ex-wallet-btn { pointer-events: none; opacity: .45; cursor: default; } /* ═══════════════════════════════════════════════════════════════════════ 책임도박 한도 — 「내 정보」 안의 입력칸 ═══════════════════════════════════════════════════════════════════════ ⚠ 전달본의 .input 은 <#walletModal 안에서만> 정의돼 있다(wallet.css:560). 같은 클래스를 모달 밖에서 쓰면 그 규칙을 하나도 못 받아, 브라우저 기본 흰 배경에 상속된 흰 글씨가 된다 — <값은 들어 있는데 안 보인다.> 오류도 안 나고 DOM 에도 값이 있어서, 화면만 보면 저장이 안 된 것으로 읽힌다. (2026-08-29 실제로 그렇게 떴다) ★ 모달의 생김새를 그대로 옮긴다. 여기서만 다른 모양이 되면 같은 사이트에서 입력칸이 두 벌이 된다. ═══════════════════════════════════════════════════════════════════════ */ .ac-row .input{ /* ⚠ 오른쪽 정렬이라 padding 을 넉넉히 준다. sp-4 로는 숫자가 테두리에 붙는다 */ width:100%; height:44px; padding:0 var(--sp-5) 0 var(--sp-4); color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); font-size:var(--fs-base); outline:none; transition:border-color var(--t-fast); } .ac-row .input:focus{ border-color:var(--primary); } .ac-row .input::placeholder{ color:var(--text-4); } /* 꺼져 있을 때는 만질 수 없다는 것이 보여야 한다 */ .ac-row .input:disabled{ color:var(--text-4); background:rgba(255,255,255,.02); cursor:not-allowed; } .ac-row .input-group{ display:flex; gap:var(--sp-2); align-items:center; } /* * 게임 화면 — 오늘 남은 배팅 한도 (책임도박) * * ★ 오류(.game-frame__err)와 <다른 결>로 둔다. 이것은 나무람이 아니라 * 알림이다 — 붉게 띄우면 회원이 무언가 잘못한 것으로 읽는다. * (레드 2026-08-30 "게임실행전에 금일 한도 얼마남으셨습니다 알려줘야할듯") */ .game-frame__note { display:block; margin-top:10px; text-align:center; font-size:var(--fs-sm); color:var(--text-3); } /* ═══════════════════════════════════════════════════════════════════════ 예측마켓 — 카테고리 색 2026-08-30 · 레드 "예측마켓카드들도 카테고리별로 색을 스포츠배너처럼" ★ 전달본 market.css 를 고치지 않는다. 같은 이름에 <뒤에서> 얹는다 — pages.css 가 전달본보다 나중에 실려서 이긴다. ★ 그라데이션 식은 스포츠 배너(.sb-banner)와 <똑같다>. 두 화면이 같은 결로 보여야 하고, 식을 새로 지으면 언젠가 한쪽만 고쳐진다. ⚠ --c 가 없으면(관리자가 색을 안 넣은 갈래) color-mix 가 무효가 되어 background 선언 하나가 통째로 날아간다. 그래서 기본값을 둔다 — var(--c, var(--surface-2)) 면 전달본과 같은 민무늬로 떨어진다. ═══════════════════════════════════════════════════════════════════════ */ /* ★★ 그라데이션을 <걷었다> (레드 2026-09-15 「그라데이션 → 단색」). 카드 아홉 장이 저마다 다른 빛으로 물들어 있으니, 정작 읽어야 할 <질문과 확률>이 뒤로 밀렸다. 목록은 훑는 화면이다 — 바탕이 저마다 다르면 훑는 눈이 매 칸에서 한 번씩 멈춘다. ★ 카테고리 색은 <버리지 않는다>. 바탕에서 빼는 대신 아이콘과 테두리에 남긴다. 갈래를 알아보는 일은 그 둘로 충분하다. ⚠ --c 가 없으면(관리자가 색을 안 넣은 갈래) color-mix 가 무효가 되어 선언 하나가 통째로 날아간다. 그래서 기본값을 둔다. */ .mk-card { background: var(--surface-2); border-color: color-mix(in oklab, var(--c, var(--line)) 22%, var(--line)); } .mk-card:hover { border-color: color-mix(in oklab, var(--c, var(--primary)) 55%, var(--primary)); } /* 상단 배너는 스포츠 것을 그대로 쓴다(.sb-banner). ⚠ 열 수만 다시 정한다 — sb-banners 가 3열로 고정돼 있어 마켓이 둘뿐이면 한 칸이 빈 채로 남는다. */ .mk-banners.sb-banners { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ── 분류 칩에도 갈래 색 (레드 2026-08-30) ───────────────────────────── ★ 카드·배너와 <같은 --c> 를 쓴다. 칩에서 고른 색이 아래 카드에 그대로 이어져야 「이 갈래를 보고 있다」가 눈으로 읽힌다. ⚠ 전체·내 보유에는 --c 가 없다. 그때는 전달본 그대로(보라)로 떨어진다 — var(--c, var(--primary)) 의 기본값이 그 몫을 한다. ────────────────────────────────────────────────────────────────── */ .mk-chip { /* 꺼져 있어도 테두리에 갈래 색이 옅게 배어 어느 갈래인지 읽힌다 */ border-color: color-mix(in oklab, var(--c, var(--line)) 28%, var(--line)); } /* 아이콘만 갈래 색으로. 글자까지 물들이면 꺼진 칩이 켜진 것처럼 보인다 */ .mk-chip svg { color: color-mix(in oklab, var(--c, var(--text-4)) 65%, var(--text-4)); } .mk-chip:hover { border-color: var(--c, var(--primary)); background: color-mix(in oklab, var(--c, var(--primary)) 12%, var(--surface-1)); } .mk-chip.is-on { background: var(--c, var(--primary)); border-color: var(--c, var(--primary)); color: #fff; } /* 켜진 칩의 아이콘은 바탕과 같은 색이 되면 안 보인다 — 흰색으로 되돌린다 */ .mk-chip.is-on svg { color: #fff; } /* ========================================================================== 메시지함 — 관리자가 <먼저> 보낸 쪽지 (레드 2026-09-15 ⑪) 1:1 문의와 다른 창구다. 그래서 모양도 다르게 둔다 — 문의는 「글 + 답변」 목록이고 여기는 <대화>다. 같은 모양이면 회원이 어느 쪽에 써야 하는지 헷갈린다. ========================================================================== */ .pg-msg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pg-msg__list > li { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-1); overflow: hidden; } .pg-msg__list > li.is-open { border-color: var(--primary); } .pg-msg__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; } .pg-msg__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 안 읽은 수. 이것이 이 화면에 온 까닭이라 눈에 먼저 들어와야 한다 */ /* 안 읽음 — <점>이다. 통마다 하나뿐이라 숫자를 적을 것이 없다 */ .pg-msg__new { flex: none; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--cta); } .pg-msg__meta { flex: none; font-size: var(--fs-xs); color: var(--text-5); } .pg-msg__body { padding: 4px 16px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } /* 운영진이 보낸 한 통을 편다. 답장이 없으므로 말풍선도 좌우도 없다 */ .pg-msg__text { font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-word; } /* 지우기. 되돌릴 수 없는 일이라 눈에 덜 띄는 자리에 둔다 */ .pg-msg__act { display: flex; justify-content: flex-end; } /* 바깥 상자. 화면마다 있는 감싸개라 값은 없어도 <이름은 있어야> 한다 — 검사기가 「CSS 에 없는 클래스」로 잡는다. */ .pg-msg { display: block; } /* ========================================================================== 폼 손질 (레드 2026-09-15 「디자인이 좀 많이 안좋다」) 세 가지가 어긋나 있었다. ① .field 에 CSS 가 <아예 없었다> — 칸 사이 간격이 0 이라 라벨과 입력칸이 달라붙어 어디까지가 한 칸인지 안 읽혔다 ② 고르개가 .select(알약)였다 — 그것은 <도구줄>용이라 폼에서 혼자 좁고 둥글어 입력칸들과 따로 놀았다 ③ 펼치개와 보내기가 <둘 다> 플래티넘 슬래브였다. 화면에 가장 센 색이 두 덩어리면 무엇을 눌러야 하는지 갈리지 않는다 ========================================================================== */ /* 한 칸 = 라벨 + 입력칸 + 설명 */ .pg-panel .field { margin-bottom: 18px; } .pg-panel .field:last-of-type { margin-bottom: 20px; } .pg-panel .field > .auth__label { display: block; margin-bottom: 8px; } /* 고르개를 입력칸과 같은 껍데기로. 화살표는 우리가 그린다(기본 것은 OS마다 다르다) */ .pg-select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-4) 50%), linear-gradient(135deg, var(--text-4) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .pg-select option { background: var(--surface-2); color: var(--text); } /* 여러 줄 칸. .auth__input 의 height:44px 를 풀어 준다 — 안 풀면 여섯 줄짜리가 한 줄 높이로 눌린다 */ .pg-textarea { height: auto; min-height: 150px; padding: 12px 16px; line-height: 1.6; resize: vertical; } /* 펼치개 — <조용한> 단추. 점선은 「여기에 더 있다」는 뜻이고, 플래티넘은 보내기 하나에만 남긴다 */ .pg-newinq__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1px dashed var(--line); border-radius: var(--r); background: transparent; color: var(--text-3); font-size: var(--fs-base); font-weight: 700; transition: border-color var(--t-bg), color var(--t-bg), background var(--t-bg); } .pg-newinq__btn:hover { border-color: var(--primary); color: var(--text); background: var(--surface-1); } /* 펼쳤으면 「닫기」 쪽으로 읽히게 색을 죽인다 */ .pg-newinq[open] .pg-newinq__btn { border-style: solid; color: var(--text-5); } .pg-newinq[open] .pg-newinq__btn i { transform: rotate(45deg); } .pg-newinq__btn i { transition: transform var(--t-bg); } /* ========================================================================== 누를 수 있는 목록 줄 + 모달 속 쪽지 (레드 2026-09-15 「디자인 정말 심각해」 · 「모달로 해당내역 보이게」) 전에는 줄 안에서 펼쳤다. 목록이 밀려 내려가 <방금 누른 줄이 어디였는지>를 잃었고, 본문이 길면 더 그랬다. 모달은 목록을 그대로 두고 그 위에 연다. ========================================================================== */ /* 줄 전체가 단추다.