/* ========================================================================= * LottoLie (로또라이) - 네이비 + 골드 테마 * 설계 원칙: 네이비 기조 · 골드 포인트 · 넉넉한 여백 · 명확한 위계 · 라이트/다크 * * 토큰 체계(중요): * 1) 아래 "디자인 토큰"이 단일 원천이다. 시안(design_handoff)의 oklch 값 그대로. * 2) 그 아래 "레거시 별칭"은 기존 화면이 쓰던 옛 이름(--text/--border/--brand …)을 * 디자인 토큰에 연결한 것이다. 덕분에 아직 시안으로 갈아엎지 않은 화면도 * 팔레트와 다크모드를 자동으로 따라온다. 옛 이름에 색을 직접 박지 말 것. * 3) 다크모드는 :root[data-theme="dark"] 하나로 전환한다(app.js applyTheme). * index.html 인라인 스크립트가 첫 페인트 전에 data-theme 를 세팅한다. * ========================================================================= */ :root { /* ---------- 디자인 토큰: 표면·경계 (웜 뉴트럴 — 눈부심↓·명도대비 유지) ---------- */ --bg: oklch(0.965 0.014 85); --surface: oklch(0.995 0.006 85); --surface-2: oklch(0.965 0.01 84); --surface-3: oklch(0.945 0.014 82); --line: oklch(0.9 0.016 82); --line-2: oklch(0.84 0.022 80); /* ---------- 디자인 토큰: 앵커(딥 에스프레소)·텍스트 ---------- */ --navy: oklch(0.25 0.03 60); --navy-2: oklch(0.33 0.035 60); --ink: oklch(0.28 0.022 58); --ink-2: oklch(0.46 0.024 60); --muted: oklch(0.58 0.02 64); /* ---------- 디자인 토큰: 골드(포인트) ---------- */ --gold: oklch(0.68 0.12 85); --gold-2: oklch(0.76 0.12 85); --gold-soft: oklch(0.92 0.06 88); /* ---------- 디자인 토큰: 주황(액션 강조 — 즐겨찾기·규칙·QR·번호뽑기 등, 라이트/다크 공통) ---------- */ --orange: #cf7645; --orange-strong: #b85f2e; --orange-soft: #fbeadd; /* ---------- 디자인 토큰: 적중 표시(과거지정분석에서 당첨번호·보너스와 일치하는 번호) ---------- */ --hit: oklch(0.6 0.15 150); /* 당첨번호 일치(초록) */ --hit-soft: oklch(0.93 0.06 150); --bonus: oklch(0.58 0.13 245); /* 보너스 번호 일치(파랑) */ --bonus-soft: oklch(0.93 0.05 245); /* ---------- 디자인 토큰: 로또 번호 구간색(1-9/10s/20s/30s/40+) ---------- */ --r0: oklch(0.3 0.06 258); --r1: oklch(0.46 0.12 258); --r2: oklch(0.58 0.1 235); --r3: oklch(0.62 0.13 85); --r4: oklch(0.52 0.13 55); /* ---------- 디자인 토큰: 형태·그림자·폰트 ---------- */ --radius: 22px; --radius-sm: 14px; --radius-xs: 10px; --shadow-sm: 0 4px 16px -10px oklch(0.25 0.03 60 / 0.32); --shadow: 0 20px 46px -22px oklch(0.25 0.03 60 / 0.38); --shadow-gold: 0 14px 30px -12px oklch(0.6 0.13 85 / 0.5); --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---------- 레거시 별칭 → 디자인 토큰 ---------- 기존 3,700줄 CSS가 이 이름들을 250회 넘게 참조한다. 별칭으로 두면 화면을 하나씩 시안으로 옮기는 동안에도 팔레트/다크모드가 일관되게 유지된다. */ --border: var(--line); --border-strong: var(--line-2); --text: var(--ink); --text-2: var(--ink-2); --faint: oklch(0.72 0.018 70); /* 인터랙션 포인트색(버튼·활성·칩): 카멜/탄 브라운(이미지 스타일). 골드(--gold*)는 장식 포인트, 주황(--orange*)은 액션 강조로 유지. */ --brand: oklch(0.56 0.085 72); --brand-strong: oklch(0.46 0.08 68); --brand-soft: oklch(0.93 0.035 82); --shadow-brand: oklch(0.56 0.085 72 / 0.28); /* 상태색: 시안에 대응이 없어 유지하되 네이비 계열로 톤을 맞춤 */ --danger: oklch(0.58 0.16 25); --rule-diff-bg: oklch(0.96 0.04 25); /* 규칙 변경 하이라이트 배경(연한 danger) */ --save: oklch(0.55 0.08 195); --save-strong: oklch(0.46 0.08 195); --save-soft: oklch(0.94 0.02 195); /* 규칙 선택 표시 전용(선택 규칙 배지·내 번호 적용규칙 칩·규칙 고르기). 예전엔 --save(틸 195)를 함께 썼는데 초록으로 읽혀 골드/카멜 팔레트와 겉돌았다. 골드(85)의 보색쪽 인디고(268)로 분리 — 번호 구간색 --r1(258)과 같은 계열이라 팔레트 안에 머문다. ⚠ --save 는 채팅 알림·주기분석 등에서 계속 쓰이므로 건드리지 않는다. */ --rulesel: oklch(0.5 0.09 268); --rulesel-strong: oklch(0.42 0.1 268); --rulesel-soft: oklch(0.945 0.025 268); --profit: oklch(0.5 0.1 160); --loss: oklch(0.55 0.16 25); --shadow-md: var(--shadow-sm); --shadow-lg: var(--shadow); } /* ============ 다크 모드 ============ 디자인 토큰만 재정의하면 위 별칭들이 자동으로 따라온다. ⚠ 색을 hex 로 직접 박아둔 옛 규칙(.ball.c1~c5 등)은 따라오지 않는다 → 화면을 시안으로 옮길 때 토큰 참조로 바꿔가며 정리한다. */ :root[data-theme="dark"] { --bg: oklch(0.2 0.012 62); --surface: oklch(0.26 0.016 62); --surface-2: oklch(0.3 0.018 62); --surface-3: oklch(0.34 0.02 60); --line: oklch(0.4 0.02 62); --line-2: oklch(0.46 0.022 60); --navy: oklch(0.24 0.028 60); --navy-2: oklch(0.31 0.032 60); --ink: oklch(0.94 0.014 80); --ink-2: oklch(0.82 0.016 76); --muted: oklch(0.68 0.016 70); --gold: oklch(0.8 0.13 86); --gold-2: oklch(0.86 0.12 86); --gold-soft: oklch(0.34 0.07 86); --orange-soft: #2b1e14; /* 주황 소프트 배경의 다크 대응(--orange 자체는 고정) */ --hit: oklch(0.72 0.16 150); --hit-soft: oklch(0.33 0.07 150); --bonus: oklch(0.7 0.13 245); --bonus-soft: oklch(0.33 0.06 245); --r0: oklch(0.72 0.09 258); --r1: oklch(0.68 0.13 258); --r2: oklch(0.72 0.11 235); --r3: oklch(0.78 0.14 85); --r4: oklch(0.72 0.13 55); --shadow-sm: 0 4px 16px -10px #000; --shadow: 0 20px 46px -22px #000; --shadow-gold: 0 14px 30px -12px oklch(0.78 0.14 85 / 0.4); /* 레거시 별칭 중 hex 로 고정돼 있던 것들의 다크 대응 */ --faint: oklch(0.6 0.016 68); /* 카멜/탄 브라운의 다크 대응: 박스·포인트 더 밝은 카멜로 */ --brand: oklch(0.66 0.09 74); --brand-strong: oklch(0.75 0.08 76); --brand-soft: oklch(0.34 0.045 64); --shadow-brand: oklch(0.66 0.09 74 / 0.32); --danger: oklch(0.7 0.15 25); --rule-diff-bg: oklch(0.32 0.07 25); /* 규칙 변경 하이라이트 배경(다크) */ --save: oklch(0.72 0.09 195); --save-strong: oklch(0.8 0.08 195); --save-soft: oklch(0.3 0.04 195); --rulesel: oklch(0.7 0.1 268); --rulesel-strong: oklch(0.81 0.09 268); --rulesel-soft: oklch(0.33 0.05 268); --profit: oklch(0.72 0.11 160); --loss: oklch(0.7 0.15 25); } * { box-sizing: border-box; } /* 더블탭 확대 완전 차단: 모든 요소의 기본 touch-action 을 manipulation 으로. iOS Safari 는 탭된 요소 자체의 touch-action 을 봐서 조상(html)만으로는 부족하므로 요소마다 지정. 스크롤 컨테이너는 각자의 pan-x/pan-y(더 높은 우선순위)로 덮어써 스크롤은 그대로 유지된다. */ *, *::before, *::after { touch-action: manipulation; } /* 브라우저 기본 당겨서-새로고침(전체 리로드→검은 파도/깜박임) 차단 → 앱의 커스텀 PTR 하나만 동작(일관성) */ html, body { margin: 0; overscroll-behavior-y: contain; } body { font-family: var(--font); background: var(--bg); color: var(--ink); min-height: 100vh; overscroll-behavior-y: none; /* 브라우저 기본 당겨서-새로고침(리로드) 차단 보조 */ line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; transition: background 0.45s, color 0.45s; /* 라이트↔다크 전환 */ } /* 드로어/시트 열림 시 배경 스크롤 잠금. ⚠ overflow:hidden 을 쓰면 body 가 스크롤 컨테이너에서 빠져 position:sticky 헤더·티커가 풀려버린다(스크롤된 상태에서 드로어를 열면 헤더가 화면 밖으로 사라짐). 그래서 overflow 대신 JS touchmove/wheel preventDefault(app.js)로 배경 스크롤만 막고 헤더는 sticky 로 유지한다. ⚠ touch-action 은 body 에 걸면 안 된다. 브라우저는 터치 대상에서 조상까지 touch-action 을 교집합으로 계산하므로 body 가 none 이면 그 안의 드로어·시트 스크롤 컨테이너(.modal-scroll 등)가 자식에서 pan-y 로 되돌려도 손가락 스크롤이 전부 죽는다(메모 목록이 안 밀리던 원인). → 드로어/시트는 body 직속이라 조상이 아니므로, 잠글 대상(배경=헤더/본문/탭바)에만 건다. */ body.drawer-scroll-locked > header, body.drawer-scroll-locked > main, body.drawer-scroll-locked > .tabbar, body.drawer-scroll-locked > .ticker, body.drawer-scroll-locked > .footer { touch-action: none; } /* 팝업/시트 안 스크롤 영역은 항상 세로 스크롤 허용(개별 모달마다 지정하던 것을 공통화) */ .modal-overlay .modal-scroll { touch-action: pan-y; -webkit-overflow-scrolling: touch; } a { color: var(--navy-2); text-decoration: none; } a:hover { color: var(--gold); } ::selection { background: oklch(0.78 0.14 85 / 0.35); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ================= 시안 keyframes (design_handoff) ================= */ @keyframes numPop { 0% { opacity: 0; transform: scale(0.3) rotate(-12deg); } 60% { transform: scale(1.16) rotate(3deg); } 100% { opacity: 1; transform: none; } } @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes wx { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pulseGlow { 0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 oklch(0.6 0.13 85 / 0.5); } 50% { opacity: 1; box-shadow: 0 0 10px 2px oklch(0.6 0.13 85 / 0.6); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes floatParticle { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-24px) translateX(10px); } 100% { transform: translateY(0) translateX(0); } } @keyframes slideIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @keyframes spinIn { from { opacity: 0; transform: rotate(-90deg) scale(0.7); } to { opacity: 1; transform: none; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* 스크롤 진입 등장(IntersectionObserver 가 .in 을 붙인다) */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: none; } /* ================= 테마 토글(헤더 PC·모바일) ================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; border: 1px solid var(--navy); border-radius: 50%; background: var(--navy); color: #fff; cursor: pointer; /* 다크 네이비 원형(시안) */ transition: transform 0.12s, border-color 0.18s, color 0.18s, background 0.18s; } .theme-toggle:hover { border-color: var(--navy-2); background: var(--navy-2); color: #fff; } .theme-toggle:active { transform: scale(0.9); } .theme-toggle svg { width: 18px; height: 18px; display: block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } } h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); } .muted { color: var(--muted); } .qr-photo-status { margin: -4px 0 12px; padding: 7px 10px; color: var(--save-strong); background: var(--save-soft); border: 1px solid rgba(58, 143, 131, 0.2); border-radius: var(--radius-xs); font-size: 0.82rem; font-weight: 650; } .qr-photo-status.err { color: var(--loss); background: #fff1ed; border-color: rgba(193, 92, 68, 0.22); } .mono { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--brand-soft); } /* ---------- 헤더 / 네비 ---------- */ .site-header { /* 불투명 배경: 스크롤 콘텐츠가 메뉴 뒤로 비치지 않도록 반투명·블러 제거 */ background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; /* 상단 티커가 sticky 로 고정되므로 헤더는 티커 아래에 붙는다(--ticker-h, JS가 실측 갱신). */ top: var(--ticker-h, 34px); z-index: 20; } /* 시안 내비: [햄버거] [브랜드] [navlinks] [navright]. 시안의 .nav 는 z-index 50 + 반투명/blur 이지만 여기선 z-index 20(드로어 45/46 아래여야 함) + 불투명(위 주석의 비침 버그) 을 유지한다. */ /* 시안의 .nav 는 max-width 없이 전폭이다(본문 .wrap 만 1240 제한). 여기에 1240 을 걸면 넓은 화면에서도 메뉴 폭이 늘지 않아 뒤쪽 메뉴가 가로 스크롤 뒤로 숨는다. */ .header-inner { margin: 0 auto; padding: 12px clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; position: relative; } /* PC: 메인메뉴(nav.tabs)를 로고와 '같은 줄'에 둔다 — [☰][브랜드][메인메뉴][navright]. order 를 주지 않아 DOM 순서 그대로 배치되고, flex:1 1 auto 로 브랜드와 navright 사이 남은 폭을 메뉴가 차지한다(min-width:0 이라야 좁을 때 navright 를 밀어내지 않고 자기 안에서 가로 스크롤된다 — nav.tabs 는 overflow-x:auto). ⚠ 모바일(≤560px)은 아래 미디어쿼리에서 다시 자기 줄로 내린다. */ .header-inner > nav.tabs { flex: 1 1 auto; min-width: 0; margin-top: 0; } .brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); display: grid; place-items: center; color: var(--gold-2); font-weight: 900; font-size: 19px; box-shadow: var(--shadow-sm); flex-shrink: 0; } .brand-txt { display: flex; align-items: baseline; gap: 8px; } .navright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } /* 좁은 데스크톱(≤1360)에서는 navright 를 아이콘만 남겨 폭을 확보한다. 안 그러면 [브랜드+11개 메뉴+navright] 가 1240 을 넘겨 뒤쪽 메뉴(추첨결과·게시판·설정·도움말)가 가로 스크롤 뒤로 숨는다. 라벨은 title/aria-label 로 유지. */ @media (max-width: 1500px) { .brand .kr { display: none; } /* 좁아지면 로고 옆 '로또라이' 생략(브랜드 폭 확보) */ .header-refresh-txt { display: none; } /* 최신회차 버튼은 아이콘만 */ .header-refresh { padding: 7px 10px; } /* ⚠ .header-inner 를 붙여 특이도를 올린다. 그냥 `nav.tabs button` 이면 파일 뒤쪽의 동일 특이도 기본 규칙(padding:9px 13px)이 이겨서 이 압축이 먹지 않는다. */ .header-inner nav.tabs { gap: 0; } /* 버튼 사이 간격 회수(10칸 × 2px) */ .header-inner nav.tabs button { padding: 9px 9px; } /* 11개 메뉴가 한 줄에 다 들어가도록 */ /* 골드 밑줄은 '글자 폭'만큼 그어져야 한다 → 좌우 인셋을 위 패딩과 같은 값으로 맞춘다. (13px 인 채로 두면 '홈' 같은 한 글자 메뉴에서 밑줄이 4px 점처럼 보인다) */ .header-inner nav.tabs button.active::after { left: 9px; right: 9px; } } /* 시안은 햄버거를 ≤760px 에서만 보여주지만, 여기선 전 폭에서 유지한다. 좌측 드로어에만 있는 기능(관리자 패널 #drawerAdminBtn, 즐겨찾기 목록)이 있어 데스크톱에서 숨기면 관리자가 admin 탭에 접근할 방법이 사라진다(navlinks 에 admin 없음). */ .brand { display: flex; align-items: center; gap: 11px; padding: 0; border: none; background: transparent; font: inherit; cursor: pointer; flex-shrink: 0; } .brand:hover .logo { color: var(--brand-strong); } .brand .logo { font-size: 1.28rem; font-weight: 750; letter-spacing: -0.03em; color: var(--text); } .brand .logo b { color: var(--brand); font-weight: 750; } .brand .logo .beta-tag { font-size: 0.42rem; font-weight: 800; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: #e5484d; /* BETA 배지: 붉은색 계열 */ padding: 1.5px 3.5px; border-radius: 4px; vertical-align: super; margin-left: 1px; } .brand .kr { color: var(--muted); font-size: 0.85rem; } /* (제거) .header-latest* — 헤더 최신회차 스트립은 상단 티커·히어로 최신회차 카드로 대체됨 */ /* navright 새로고침: 눈에 띄게 하이라이트한 pill 버튼 */ .header-refresh { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px 6px 10px; margin-left: 8px; border: none; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.82rem; font-weight: 750; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(207, 118, 69, 0.4); transition: background 0.14s, transform 0.1s; } .header-refresh:hover { background: var(--brand-strong); } .header-refresh:active { transform: scale(0.96); } .header-refresh .header-refresh-ico { font-size: 1.05rem; line-height: 1; display: inline-block; } .header-refresh.spin .header-refresh-ico { animation: refresh-spin 0.7s linear infinite; } .header-refresh:disabled { opacity: 0.75; cursor: default; } /* 최신회차 가져오기 버튼은 PC 전용(헤더 PC 레이아웃 경계와 동일). 모바일에선 숨김 */ @media (max-width: 560px) { .header-refresh { display: none; } /* ── 모바일 헤더 2줄 ── 1줄: [☰ 햄버거][로고] ……(우측 끝) [🌙 다크][관리자 배지][로그인] 2줄: 메인메뉴(nav.tabs) — 항상 표시, 좁으면 내부 가로 스크롤. navright 를 display:contents 로 풀어 자식(테마·auth)이 header-inner flex 에 직접 참여하게 하고, order 로 순서를, flex-basis:100% 로 줄바꿈 지점을 정한다. */ .header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; } .quick-menu-btn.hamburger { display: inline-flex; order: 1; flex: 0 0 auto; width: 34px; height: 34px; margin-top: 0; font-size: 1.15rem; } .brand { order: 2; flex: 0 0 auto; margin-top: 0; min-width: 0; } .navright { display: contents; } /* display:contents 로 .navright 가 사라져 그 margin-left:auto 도 함께 사라진다 → 오른쪽 묶음의 첫 항목(테마)에 auto 를 줘서 로고와 로그인 사이를 벌린다. */ .navright > .theme-toggle { order: 3; flex: 0 0 auto; margin-left: auto; } /* 로그인은 로고와 같은 줄(우측 끝). basis:100% 를 주면 자기 줄로 떨어지므로 쓰지 않는다. */ .navright > .auth-row { order: 4; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } /* 2줄: 메인메뉴는 자기 줄(basis:100%). 좁으면 nav.tabs 기본 overflow-x:auto 로 내부 가로 스크롤 (본문 가로 스크롤은 생기지 않는다). */ .header-inner > nav.tabs { order: 6; flex: 1 0 100%; min-width: 0; margin-top: 2px; } /* 모바일 메인메뉴에서 게시판 숨김(드로어·FAB 로 접근 가능). .header-inner 특이도로 뒤쪽 규칙 이김 */ .header-inner nav.tabs button[data-tab="board"] { display: none; } /* 메인메뉴는 가로 폭을 가득 채운다: 버튼이 남는 공간을 나눠 가져(flex:1) 좌우 끝에 딱 맞고 항목 사이도 자동으로 벌어진다(가운데 정렬로 몰아 두면 항목이 서로 붙어 좁아 보였다). flex-shrink:0 이라 글자보다 작게 눌리지 않고, 넘치는 좁은 화면에서는 기존대로 가로 스크롤. */ .header-inner nav.tabs { justify-content: flex-start; gap: 1px; } .header-inner nav.tabs button { flex: 1 0 auto; } } /* (제거) .slogan — 헤더 슬로건 마크업 삭제. 하단 .page-slogan 은 그대로 사용 중 */ /* 하단 슬로건(면책 문구 위) */ .page-slogan { text-align: right; color: var(--muted); font-size: 0.85rem; margin: 44px 0 0; } .page-slogan b { color: var(--brand-strong); font-weight: 750; } .page-slogan + .disclaimer { margin-top: 8px; } /* 슬로건을 면책 네모칸 바로 위에 붙여 배치 */ /* (제거) 헤더 order/줄바꿈 배치 규칙 — 새 헤더는 [햄버거][브랜드][navlinks][navright] 한 줄 flex 라 order 불필요 */ /* (제거) 헤더 '★ 즐겨찾기·친구 보기' 버튼과 그 위의 스와이프 힌트(‹‹). 즐겨찾기는 ☰ 드로어의 '즐겨찾기 추가'와 플로팅 툴바 [★ 즐겨찾기]·[친구]로 접근한다. 오른쪽 가장자리 드래그로 드로어를 여는 제스처는 그대로 살아 있다. */ /* ---- 스와이프 안내 코치마크(첫 실행/도움말) ---- */ .swipe-coach { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: rgba(22, 16, 10, 0.3); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); animation: coachFade 0.25s ease; } .swipe-coach[hidden] { display: none; } .swipe-coach-side { display: flex; align-items: center; gap: 8px; color: #fff; } .swipe-coach-arrow { font-size: 2.5rem; font-weight: 900; color: var(--gold); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .swipe-coach-side.left .swipe-coach-arrow { animation: coachArrowR 1.1s ease-in-out infinite; } .swipe-coach-side.right .swipe-coach-arrow { animation: coachArrowL 1.1s ease-in-out infinite; } .swipe-coach-text { font-size: 0.98rem; font-weight: 800; line-height: 1.3; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); } .swipe-coach-side.right { text-align: right; } /* 가운데 시작 안내(기존 웰컴 팝업 내용) */ .swipe-coach-center { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 2; width: min(78vw, 320px); text-align: center; padding: 18px 18px; border-radius: 16px; background: rgba(20, 14, 8, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .swipe-coach-center p { margin: 0; color: #fff; font-size: 1rem; line-height: 1.6; font-weight: 700; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } .swipe-coach-center b { color: var(--gold); } .swipe-coach-wish { margin-top: 10px !important; font-size: 1.18rem !important; } .swipe-coach-wish b { color: #ffd873; } .swipe-coach-bottom { position: absolute; left: 50%; bottom: max(92px, calc(74px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; text-align: center; } .swipe-coach-arrow.up { font-size: 2.2rem; line-height: 0.8; animation: coachArrowUp 1.1s ease-in-out infinite; } .swipe-coach-hint { position: absolute; left: 0; right: 0; bottom: max(46px, env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff; font-size: 0.82rem; font-weight: 600; opacity: 0.9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } @keyframes coachArrowR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } } @keyframes coachArrowL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-9px); } } @keyframes coachArrowUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes coachFade { from { opacity: 0; } to { opacity: 1; } } .fav-btn { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 700; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: border-color 0.14s, background 0.14s, color 0.14s; } .fav-btn:hover { border-color: var(--brand); color: var(--brand-strong); } /* 안읽은 채팅 표시: 헤더 '★ 즐겨찾기·친구 보기' 를 없앴으므로 플로팅 툴바의 [친구]가 맡는다. */ .fab-item.chat-alert { color: #fff; background: var(--save); animation: favChatBlink 1.05s ease-in-out infinite; } .fab-item.chat-alert:hover { color: #fff; background: var(--save-strong); } @keyframes favChatBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(58, 143, 131, 0.55); opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(58, 143, 131, 0); opacity: 0.7; } } /* ☰ 드로어의 '즐겨찾기 추가/삭제'. 탭 항목과 같은 리듬이되 위쪽에 따로 떼어 둔다. */ .drawer-favadd { display: flex; align-items: center; gap: 10px; margin: 6px 12px 2px; padding: 9px 13px; border: 1px solid var(--rulesel); border-radius: 13px; background: var(--rulesel-soft); color: var(--rulesel-strong); font: inherit; font-size: 0.92rem; font-weight: 700; text-align: left; cursor: pointer; transition: background 0.16s var(--ease), border-color 0.16s var(--ease); } .drawer-favadd[hidden] { display: none; } .drawer-favadd:hover { background: color-mix(in srgb, var(--rulesel) 18%, var(--surface)); } .drawer-favadd .dfa-ico { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; color: var(--gold); } .drawer-favadd.added .dfa-ico { color: var(--gold); } .drawer-favadd .dfa-label { flex: 0 0 auto; } /* 어떤 화면이 담기는지 — 길면 줄이고 한 줄 유지 */ .drawer-favadd .dfa-target { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 0.78rem; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 우측 즐겨찾기 드로어 (좌측 삼발이 드로어를 오른쪽으로 미러링) */ .fav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(56vw, 320px); z-index: 46; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.46s cubic-bezier(0.22, 0.72, 0, 1); will-change: transform; overflow: hidden; } .fav-drawer.open { transform: translateX(0); } /* 받은 친구 요청 배너: 즐겨찾기 드로어 중앙보다 살짝 아래에 떠서 수락/거절 */ .fr-req-banner { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: calc(100% - 28px); max-height: 62%; overflow-y: auto; z-index: 3; } .fr-req-card { background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; padding: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38); } .fr-req-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.95rem; margin-bottom: 10px; color: var(--gold); } .fr-req-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; } .fr-req-row + .fr-req-row { border-top: 1px solid var(--border); } .fr-req-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.9rem; } .fr-req-acts { display: flex; gap: 6px; flex: none; } /* 즐겨찾기 드로어 제목: 잘 보이도록 크고 굵게 + 골드(⭐) 톤 */ .fav-drawer-title { display: inline-flex; align-items: center; gap: 6px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--gold); } /* 좌/우 드로어 헤더: 홈 정체성(네이비+골드)에 맞춰 네이비 밴드 + 골드/화이트 텍스트(각 드로어 id 로 격리, 본문은 화이트 유지). */ #quickMenuPanel .drawer-head, #favDrawer .drawer-head { background: linear-gradient(160deg, var(--navy), var(--navy-2)); border-bottom-color: rgba(255, 255, 255, 0.1); } #quickMenuPanel .drawer-brand .logo { color: #fff; } #quickMenuPanel .drawer-brand .logo b { color: var(--gold-2); } #quickMenuPanel .drawer-brand .kr { color: oklch(0.82 0.02 258); } #favDrawer .fav-drawer-title { color: var(--gold-2); } #quickMenuPanel .drawer-close, #favDrawer .drawer-close { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.26); color: #eef1f8; } #quickMenuPanel .drawer-close:hover, #favDrawer .drawer-close:hover { color: #fff; border-color: var(--gold-2); } .fav-drawer-hint { font-size: 0.82rem; margin: 0; padding: 2px 20px 12px; } .fav-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 20px; -webkit-overflow-scrolling: touch; } /* 즐겨찾기 항목: 꾹 누르면 아래로 설정 버튼(삭제/위로/아래로)이 펼쳐짐 */ .fav-item { position: relative; border-radius: 13px; margin-bottom: 4px; } /* 꾹 눌러 노출되는 설정 버튼 줄(기본 숨김) */ .fav-actions { display: none; gap: 6px; padding: 6px 4px 2px; } .fav-item.fav-open .fav-actions { display: flex; } .fav-item.fav-open { background: var(--brand-soft); } .fav-act { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 10px; padding: 8px 6px; font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.14s var(--ease), color 0.14s var(--ease); } .fav-act:hover { background: var(--brand-soft); color: var(--brand-strong); } .fav-act:disabled { opacity: 0.4; cursor: default; } .fav-act.fav-del { color: #c93a3f; border-color: rgba(229, 72, 77, 0.4); } .fav-act.fav-del:hover { background: rgba(229, 72, 77, 0.1); color: #c93a3f; } /* 삼발이(왼쪽) 메뉴 항목과 동일한 디자인·글자크기 */ .fav-go { position: relative; z-index: 1; display: block; width: 100%; text-align: left; border: none; background: var(--surface); color: var(--text-2); border-radius: 13px; padding: 12px 14px; font-size: 0.96rem; font-weight: 650; cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); -webkit-user-select: none; user-select: none; } .fav-go:hover { background: var(--brand-soft); color: var(--brand-strong); } /* 삼발이 메뉴처럼, 지금 보고 있는 메뉴면 하이라이트 */ .fav-go.active { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px var(--brand); } /* 즐겨찾기 보기 하단 고정 안내(글씨 크게 · 색 진하게) */ .fav-drawer-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); color: var(--text-2); font-size: 0.8rem; font-weight: 700; } .fav-drawer-foot span:last-child { color: var(--muted); font-weight: 650; } /* 즐겨찾기 드로어 비로그인 안내 */ .fav-guest-note { margin: 0 20px 8px; padding: 8px 12px; border-radius: 9px; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.35); color: #c93a3f; font-size: 0.78rem; font-weight: 650; line-height: 1.4; } .fav-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } /* ===== 로그인/회원가입 ===== */ /* 로그인 버튼: 골드(브랜드) 채움. 기본 숨김 → 헤더 navright(auth-btn-nav)·드로어 상단(auth-btn-drawer) */ .auth-btn { display: none; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.95rem; font-weight: 750; padding: 9px 20px; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 16px -8px var(--brand); transition: filter 0.14s; } .auth-btn:hover { filter: brightness(1.06); } /* 역할 표시(헤더 로그인/로그아웃 버튼 왼쪽, 같은 라인): 관리자 / 부관리자 / 프리미엄 / 일반이용자 */ .auth-row { display: none; align-items: center; gap: 6px; } /* [역할배지][로그인·로그아웃] 한 줄로 묶는 래퍼 */ body.auth-ready .auth-row-nav { display: inline-flex; } /* 헤더 navright(PC·모바일 공통) */ .auth-role { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; border: 1px solid transparent; white-space: nowrap; } .auth-role[hidden] { display: none; } /* 관리자 배지: 주황(즐겨찾기 버튼)과 확실히 구분되도록 보라 계열 단색(라이트/다크 공통). */ .auth-role.role-admin { background: #6d3bd6; color: #fff; border-color: #6d3bd6; } .auth-role.role-subadmin { background: #5a3a12; color: #ffe6b8; border-color: #8a5e22; } .auth-role.role-premium { background: var(--brand); color: #fff; border-color: var(--brand); } .auth-role.role-user { background: rgba(0, 0, 0, 0.06); color: var(--muted); border-color: var(--border); } body.auth-ready .auth-btn-nav { display: inline-flex; } /* 헤더 navright 로그인(PC·모바일 공통 1벌) */ body.auth-ready .auth-btn-drawer { display: flex; } /* 삼발이 메뉴 상단(홈 위) 로그인 — PC/모바일 공통 */ .auth-btn-drawer { margin: 10px 16px 2px; padding: 11px 16px; font-size: 0.92rem; border-radius: 12px; } /* 로그인 상태에서도 메인헤더 버튼은 '로그아웃'으로 노출(아이디는 표시 안 함) → 숨기지 않는다. */ /* ===== 친구 ===== */ /* 즐겨찾기 드로어 맨 아래 친구 액션(추가/목록) — 인증 켜졌을 때만 노출 */ .fav-friends-actions { display: none; flex-direction: column; gap: 8px; flex: none; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); } body.auth-ready .fav-friends-actions { display: flex; } /* 안읽은 메시지 안내(친구 추가 위): 청록 박스, 깜박임 */ .chat-unread-banner { flex: none; margin: 0 14px 8px; padding: 9px 12px; border-radius: 10px; background: var(--save-soft); border: 1px solid var(--save); border-left: 3px solid var(--save); color: var(--save-strong); font-size: 0.82rem; font-weight: 800; text-align: center; cursor: pointer; animation: favChatBlink 1.05s ease-in-out infinite; } .chat-unread-banner:active { transform: scale(0.98); } .chat-unread-banner[hidden] { display: none; } /* 친구 진입 버튼(즐겨찾기 드로어 하단): 친구=틸 정체성으로 골드 콘텐츠와 구분 */ .friends-btn-fav { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 11px 14px; font-size: 0.92rem; font-weight: 700; border-radius: 12px; border: 1px solid var(--save); background: var(--save-soft); color: var(--save-strong); cursor: pointer; } .friends-btn-fav:hover { background: #cfe8e2; } /* 친구 목록 드로어: 즐겨찾기 드로어(46) 위로 한 번 더 겹쳐 슬라이드 */ #friendsListBackdrop { z-index: 47; } /* 친구·그룹·그룹게시판 드로어: 색상은 테마 변수(--fld-*)로. 기본=브라운, .theme-teal/orange/navy 로 전환(헤더 스와치). */ .friends-list-drawer { z-index: 48; background: var(--fld-bg); border-left: 3px solid var(--fld-accent); /* 기본 테마: 딥 틸(팔레트의 --save 계열, #2f8f7f) + 화이트 본문. 옛 네이비(#34477f)는 팔레트를 딥 틸·웜 뉴트럴로 옮긴 뒤 혼자 남아 겉돌았고, 친구 관련 UI(.friends-btn-fav·.chat-unread-banner)가 이미 --save 틸을 쓰고 있어 그쪽에 맞춘다. 네이비/브라운/오렌지는 아래 .theme-* 로 여전히 선택 가능. */ --fld-bg: #ffffff; --fld-accent: #2f8f7f; --fld-head: #2f8f7f; --fld-head-bd: rgba(0, 0, 0, 0.06); --fld-title: #ffffff; --fld-tab: rgba(255, 255, 255, 0.72); --fld-tab-active: #ffffff; --fld-close: #ffffff; --fld-close-bg: rgba(255, 255, 255, 0.2); --fld-close-bd: rgba(255, 255, 255, 0.4); --fld-close-hbg: rgba(255, 255, 255, 0.32); --fld-card: #ffffff; --fld-card-bd: #cfe6e0; --fld-hover-bg: #eef7f4; --fld-board-card: #f3faf8; --fld-text: #1f302c; --fld-muted: #6f8580; --fld-heading: #26766a; --fld-av-bg: #d6ece6; --fld-av-text: #26766a; --fld-divider: #dceae6; --fld-divider-soft: #edf5f2; } /* 청록: 오렌지와 동일한 라이트 스타일 — 헤더만 청록, 본문 화이트 */ .friends-list-drawer.theme-teal { --fld-bg: #ffffff; --fld-accent: #2f8f7f; --fld-head: #2f8f7f; --fld-head-bd: rgba(0, 0, 0, 0.06); --fld-title: #ffffff; --fld-tab: rgba(255, 255, 255, 0.72); --fld-tab-active: #ffffff; --fld-close: #ffffff; --fld-close-bg: rgba(255, 255, 255, 0.2); --fld-close-bd: rgba(255, 255, 255, 0.4); --fld-close-hbg: rgba(255, 255, 255, 0.32); --fld-card: #ffffff; --fld-card-bd: #cfe6e0; --fld-hover-bg: #eef7f4; --fld-board-card: #f3faf8; --fld-text: #1f302c; --fld-muted: #6f8580; --fld-heading: #26766a; --fld-av-bg: #d6ece6; --fld-av-text: #26766a; --fld-divider: #dceae6; --fld-divider-soft: #edf5f2; } /* 오렌지: 헤더/탭만 메인 오렌지, 본문은 화이트 */ .friends-list-drawer.theme-orange { --fld-bg: #ffffff; --fld-accent: #cf7645; --fld-head: #cf7645; --fld-head-bd: rgba(0, 0, 0, 0.06); --fld-title: #ffffff; --fld-tab: rgba(255, 255, 255, 0.72); --fld-tab-active: #ffffff; --fld-close: #ffffff; --fld-close-bg: rgba(255, 255, 255, 0.2); --fld-close-bd: rgba(255, 255, 255, 0.4); --fld-close-hbg: rgba(255, 255, 255, 0.32); --fld-card: #ffffff; --fld-card-bd: #f0d9c9; --fld-hover-bg: #fdf3ec; --fld-board-card: #fdf6f1; --fld-text: #3a2a20; --fld-muted: #8a7a6d; --fld-heading: #b45f31; --fld-av-bg: #f7e2d3; --fld-av-text: #b45f31; --fld-divider: #f0e0d4; --fld-divider-soft: #f4e8de; } /* 남색: 오렌지와 동일 스타일에서 오렌지→남색 */ .friends-list-drawer.theme-navy { --fld-bg: #ffffff; --fld-accent: #34477f; --fld-head: #34477f; --fld-head-bd: rgba(0, 0, 0, 0.06); --fld-title: #ffffff; --fld-tab: rgba(255, 255, 255, 0.72); --fld-tab-active: #ffffff; --fld-close: #ffffff; --fld-close-bg: rgba(255, 255, 255, 0.2); --fld-close-bd: rgba(255, 255, 255, 0.4); --fld-close-hbg: rgba(255, 255, 255, 0.32); --fld-card: #ffffff; --fld-card-bd: #d5ddef; --fld-hover-bg: #eef2fb; --fld-board-card: #f4f7fd; --fld-text: #1f2a44; --fld-muted: #6b7590; --fld-heading: #34477f; --fld-av-bg: #dde4f5; --fld-av-text: #34477f; --fld-divider: #e0e6f4; --fld-divider-soft: #eef1f9; } .fav-drawer.friends-list-drawer { width: min(88vw, 420px); } /* 왼쪽 드래그로 나오는 내 번호 드로어와 동일 폭 */ .friends-list-drawer .drawer-head { background: var(--fld-head); border-bottom-color: var(--fld-head-bd); } .friends-list-drawer .fav-drawer-title { color: var(--fld-title); } /* fl-panel-title/grp-setup/board-empty 은 본문(화이트)에 있으므로 title(=화이트)이 아닌 heading/text 색 사용 */ .friends-list-drawer .fl-panel-title, .friends-list-drawer .grp-sec h4, .friends-list-drawer .board-card-h { color: var(--fld-heading); } .friends-list-drawer .grp-setup { color: var(--fld-text); } .friends-list-drawer .grp-setup-sub, .friends-list-drawer .board-empty { color: var(--fld-muted); } .friends-list-drawer .fl-add-friend { background: var(--fld-hover-bg); border-color: var(--fld-accent); color: var(--fld-heading); } .friends-list-drawer .fl-add-friend:hover { background: var(--fld-board-card); } .friends-list-drawer .drawer-close { color: var(--fld-close); background: var(--fld-close-bg); border-color: var(--fld-close-bd); } .friends-list-drawer .drawer-close:hover { color: #fff; border-color: var(--fld-accent); background: var(--fld-close-hbg); } .friends-list-drawer .fl-tabs { background: var(--fld-head); border-bottom-color: var(--fld-head-bd); } .friends-list-drawer .fl-tab { color: var(--fld-tab); } /* 활성 탭 밑줄을 골드로 → 홈(남색 헤더 + 골드 강조)과 통일 */ .friends-list-drawer .fl-tab.active { color: var(--fld-tab-active); border-bottom-color: var(--gold, #e6c063); } /* 그룹게시판 새 글 표시 */ .grp-new-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: -0.01em; vertical-align: middle; line-height: 1.5; } /* '그룹게시판' 글자(즐겨찾기 버튼·친구드로어 탭)에 새 글 빨간 점 */ #groupBoardBtn.has-new, .fl-tab.has-new { position: relative; } #groupBoardBtn.has-new::after, .fl-tab.has-new::after { content: ""; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; } /* 행·카드·게시글 */ .friends-list-drawer .fr-list-row { cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .friends-list-drawer .fr-list-row, .friends-list-drawer .grp-invite, .friends-list-drawer .grp-card, .friends-list-drawer .board-post { background: var(--fld-card); border-color: var(--fld-card-bd); } .friends-list-drawer .fr-list-row:hover, .friends-list-drawer .fr-list-row.has-unread, .friends-list-drawer .grp-card.active { border-color: var(--fld-accent); background: var(--fld-hover-bg); } .friends-list-drawer .board-card { background: var(--fld-board-card); border-color: var(--fld-card-bd); } .friends-list-drawer .fr-list-av { background: var(--fld-av-bg); color: var(--fld-av-text); } .friends-list-drawer .fr-online-dot { border-color: var(--fld-card); } /* 글자색 */ .friends-list-drawer .fr-list-name, .friends-list-drawer .board-post-title, .friends-list-drawer .board-post-body, .friends-list-drawer .grp-mem-name, .friends-list-drawer .grp-invite-meta b, .friends-list-drawer .grp-card-meta b, .friends-list-drawer .grp-card-titleline b, .friends-list-drawer .board-post-who b, .friends-list-drawer .board-group-name { color: var(--fld-text); } .friends-list-drawer .fr-list-status, .friends-list-drawer .fr-list-last, .friends-list-drawer .fr-empty, .friends-list-drawer .grp-sub, .friends-list-drawer .board-card-sub, .friends-list-drawer .board-post-time, .friends-list-drawer .board-post-preview, .friends-list-drawer .grp-mem-title { color: var(--fld-muted); } .friends-list-drawer .fr-list-status.on { color: #46d09a; } .friends-list-drawer .fr-list-chat { position: relative; margin-left: auto; flex: 0 0 auto; font-size: 1rem; opacity: 0.5; transition: opacity 0.15s var(--ease); } .friends-list-drawer .fr-list-row:hover .fr-list-chat { opacity: 0.95; } .friends-list-drawer .fr-list-chat.blink { opacity: 1; color: var(--fld-accent); animation: chatBlink 1s steps(1, end) infinite; } .friends-list-drawer .fr-list-unread { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff4d4f; color: #fff; font-size: 0.66rem; font-weight: 800; line-height: 16px; text-align: center; } .friends-list-drawer .fr-list-last { margin-top: 2px; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .friends-list-drawer .fr-list-row.has-unread .fr-list-last { color: var(--fld-text); font-weight: 600; } /* 하위게시판 탭·드롭다운·구분선 */ .friends-list-drawer .board-subtab { background: var(--fld-card); border-color: var(--fld-card-bd); color: var(--fld-text); } .friends-list-drawer .board-subtab:hover { border-color: var(--fld-accent); } .friends-list-drawer .board-subtab.active { background: var(--fld-hover-bg); border-color: var(--fld-accent); color: var(--fld-text); } .friends-list-drawer .board-group-sel { background: var(--fld-card); border-color: var(--fld-accent); color: var(--fld-text); } .friends-list-drawer .grp-members-box { border-top-color: var(--fld-divider); } .friends-list-drawer .grp-mem-row { border-top-color: var(--fld-divider-soft); } .friends-list-drawer .board-post-caret { color: var(--fld-accent); } /* 그룹게시판 네모박스·버튼(QR찍기/사진인식/글쓰기)도 테마색(--fld-*)을 따르게 한다 */ .friends-list-drawer .board-compose { background: var(--fld-board-card); border-color: var(--fld-card-bd); } .friends-list-drawer .board-compose textarea, .friends-list-drawer .board-title-in { background: var(--fld-card); border-color: var(--fld-card-bd); color: var(--fld-text); } .friends-list-drawer .board-compose textarea::placeholder, .friends-list-drawer .board-title-in::placeholder { color: var(--fld-muted); } /* QR찍기/사진인식/사진 등 액션 버튼: 그룹 테마색이 보이도록 accent 계열로 */ .friends-list-drawer .board-cbtn { background: var(--fld-hover-bg); border-color: var(--fld-accent); color: var(--fld-heading); } .friends-list-drawer .board-cbtn:hover { background: var(--fld-board-card); border-color: var(--fld-accent); } .friends-list-drawer .board-card { background: var(--fld-board-card); } .friends-list-drawer .board-card.combo { border-color: var(--fld-accent); } .friends-list-drawer .board-card-get { background: var(--fld-hover-bg); border-color: var(--fld-card-bd); color: var(--fld-text); } .friends-list-drawer .board-pick { border-top-color: var(--fld-card-bd); } .friends-list-drawer .board-pick-title, .friends-list-drawer .board-pick-lbl, .friends-list-drawer .board-card-sub { color: var(--fld-muted); } .friends-list-drawer .board-pick-item:hover { background: var(--fld-hover-bg); } .friends-list-drawer .board-chip { background: var(--fld-card); border-color: var(--fld-accent); color: var(--fld-text); } .friends-list-drawer .board-rule-nm { color: var(--fld-text); } /* 새 글 작성(.fresh) 강조도 테마 accent 계열로 */ .friends-list-drawer .board-compose.fresh { background: var(--fld-hover-bg); border-color: var(--fld-accent); } .friends-list-drawer .board-compose.fresh textarea, .friends-list-drawer .board-compose.fresh .board-title-in, .friends-list-drawer .board-compose.fresh .pur-round-in, .friends-list-drawer .board-compose.fresh .pur-nums-in { background: var(--fld-card); border-color: var(--fld-card-bd); color: var(--fld-text); } .friends-list-drawer .board-compose.fresh .board-cbtn { background: var(--fld-hover-bg); border-color: var(--fld-accent); color: var(--fld-heading); } .friends-list-drawer .board-compose.fresh label, .friends-list-drawer .board-compose.fresh .board-rule-nm { color: var(--fld-text); } .friends-list-drawer .board-compose.fresh .board-pick-title, .friends-list-drawer .board-compose.fresh .pur-stage-title, .friends-list-drawer .board-compose.fresh .board-pick-lbl { color: var(--fld-muted); } .friends-list-drawer .board-compose.fresh .board-pick-item:hover { background: var(--fld-hover-bg); } .friends-list-drawer .board-compose.fresh .board-chip { background: var(--fld-card); border-color: var(--fld-accent); color: var(--fld-text); } /* 구매내역 보드: 수동입력·스테이지·회차 접이식도 테마색 적용 */ .friends-list-drawer .pur-manual, .friends-list-drawer .pur-mine, .friends-list-drawer .pur-stage { border-top-color: var(--fld-card-bd); } .friends-list-drawer .pur-manual-row label, .friends-list-drawer .pur-stage-title, .friends-list-drawer .pur-round-count, .friends-list-drawer .grp-mem-title { color: var(--fld-muted); } .friends-list-drawer .pur-round-in, .friends-list-drawer .pur-nums-in { background: var(--fld-card); border-color: var(--fld-card-bd); color: var(--fld-text); } .friends-list-drawer .pur-round-tag { background: var(--fld-card); border-color: var(--fld-card-bd); color: var(--fld-heading); } .friends-list-drawer .pur-round-sec { background: var(--fld-board-card); border-color: var(--fld-card-bd); } .friends-list-drawer .pur-round-head, .friends-list-drawer .pur-ticket-who, .friends-list-drawer .grp-card-titleline b, .friends-list-drawer .grp-mem-name { color: #111; } /* 그룹 멤버(친구 아이디) 글자는 검정으로 고정 */ .friends-list-drawer .pur-round-caret { color: var(--fld-accent); } .friends-list-drawer .pur-ticket { border-top-color: var(--fld-divider-soft); } .friends-list-drawer .grp-members-box { border-top-color: var(--fld-card-bd); } .friends-list-drawer .grp-mem-row { border-top-color: var(--fld-divider-soft); } .friends-list-drawer .board-write-toggle { background: var(--fld-hover-bg); border-color: var(--fld-accent); color: var(--fld-heading); } @keyframes chatBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.25; } } /* 드로어 헤더 색상 선택 스와치(제목과 ✕ 사이) */ .fl-theme-picker { display: flex; gap: 6px; align-items: center; margin-left: auto; margin-right: 10px; flex: 0 0 auto; } .fl-sw { width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.12s var(--ease); } .fl-sw:hover { transform: scale(1.12); } .fl-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--fld-accent), 0 1px 3px rgba(0, 0, 0, 0.3); } .fl-sw-orange { background: #cf7645; } .fl-sw-brown { background: #8a5a2b; } .fl-sw-teal { background: #2f8f7f; } .fl-sw-navy { background: #34477f; } /* ===== 친구 · 그룹 · 게시판 탭 페이저 ===== */ .fl-tabs { flex: none; display: flex; gap: 4px; padding: 6px 12px 0; background: #172220; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fl-tab { flex: 1; appearance: none; border: none; background: transparent; color: #9fb3ad; font-family: inherit; font-size: 0.92rem; font-weight: 700; padding: 10px 4px 11px; cursor: pointer; border-bottom: 2.5px solid transparent; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .fl-tab.active { color: #7fe0cf; border-bottom-color: #4fb8a8; } .fl-pager { position: relative; flex: 1; min-height: 0; overflow: hidden; } .fl-track { display: flex; height: 100%; will-change: transform; transition: transform 0.32s cubic-bezier(0.22, 0.72, 0, 1); } /* 각 패널 = 세로 플렉스(헤더 고정 + 본문 스크롤). 본문이 화면을 넘치면 위아래로 스크롤된다. */ .fl-panel { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .fl-panel > .fav-drawer-body { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* 친구 탭 헤더: '친구' + 우측 친구 추가 버튼 */ .fl-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px 6px; } .fl-panel-title { font-size: 1rem; font-weight: 800; color: #7fe0cf; } .fl-add-friend { appearance: none; border: 1px solid #4fb8a8; background: #35524b; color: #eafaf6; border-radius: 999px; padding: 6px 14px; font-family: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .fl-add-friend:hover { background: #3d6058; } /* 그룹게시판 내부 중첩 스크롤 영역도 손가락 스크롤 부드럽게 + 스크롤 격리 */ .board-pick, .pur-mine, .grp-members-box, .grp-invite-box { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } /* ===== 그룹 탭 ===== */ .grp-setup { padding: 20px 16px; color: #cfe6e0; } .grp-setup-sub { font-size: 0.84rem; color: #9fb3ad; margin-top: 6px; } .grp-setup-err { font-size: 0.74rem; color: #ffa4a4; margin-top: 10px; word-break: break-word; } .grp-new-btn { width: 100%; margin-bottom: 16px; } /* 그룹 상단 액션: 새 그룹 만들기(넓게) + 그룹 검색(좁게) */ .grp-top-actions { display: flex; gap: 8px; margin-bottom: 16px; } .grp-top-actions .grp-new-btn { flex: 1 1 auto; width: auto; margin-bottom: 0; } .grp-top-actions .grp-search-btn { flex: 0 0 auto; } /* 그룹 검색 모달(전체 순위 · 가입요청) */ /* 비밀번호/확인 입력 모달(마스킹 + 보기 토글) */ .grp-secret-modal { max-width: 380px; } .grp-secret-body { padding: 14px 20px 6px; } .grp-secret-msg { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; white-space: pre-line; color: var(--text); } .grp-secret-inrow { display: flex; gap: 8px; } .grp-secret-inrow input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.95rem; } .grp-secret-eye { flex: 0 0 auto; white-space: nowrap; } .grp-search-modal .grp-search-body { padding: 16px 20px 20px; } .grp-search-bar { display: flex; gap: 8px; margin-bottom: 12px; } .grp-search-bar input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.92rem; } .grp-search-results { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .grp-sr-item { padding: 9px 0; border-top: 1px solid var(--border); } .grp-sr-item:first-child { border-top: none; } .grp-sr-row { display: flex; align-items: center; gap: 8px; } .grp-sr-rank { flex: none; font-weight: 800; font-size: 0.82rem; color: var(--brand-strong); min-width: 34px; } .grp-sr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); cursor: pointer; } .grp-sr-badge { flex: none; font-size: 0.74rem; font-weight: 700; color: var(--muted); padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; } .grp-sr-detail { margin: 4px 0 0 42px; font-size: 0.8rem; color: var(--muted); } .grp-sr-detail[hidden] { display: none; } /* 그룹 가입요청 배너(즐겨찾기·친구 드로어, 흐름 배치) */ .grp-req-banner { margin: 2px 16px 10px; } .grp-req-banner[hidden] { display: none; } .grp-req-gname { color: var(--muted); font-weight: 600; font-size: 0.8rem; } .fr-req-acts { display: flex; gap: 4px; flex: none; } /* 새 그룹 만들기 모달(드로어 밖 일반 모달) */ .grp-create-modal .grp-create-body { padding: 16px 20px 20px; } .grp-create-modal #grpCreateInput { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 0.95rem; } .grp-create-err { color: #e05a5a; font-size: 0.82rem; margin: 10px 0 0; word-break: break-word; } .grp-create-acts { display: flex; gap: 8px; margin-top: 16px; } .grp-create-acts .btn { flex: 1; } .grp-sec { margin-bottom: 16px; } .grp-sec h4 { font-size: 0.86rem; color: #7fe0cf; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; } .grp-invite, .grp-card { background: #263531; border: 1px solid #354842; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .grp-invite { display: flex; align-items: center; gap: 10px; } .grp-ico { font-size: 1.2rem; flex: none; } .grp-invite-meta, .grp-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .grp-invite-meta b, .grp-card-meta b { color: #eef4f2; font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grp-sub { font-size: 0.76rem; color: #93aaa4; margin-top: 1px; } .grp-invite-acts { display: flex; gap: 6px; flex: none; } .grp-card.active { border-color: #4fb8a8; background: #2d3f3a; } .grp-card-main { display: flex; align-items: center; gap: 10px; cursor: pointer; } .grp-card-acts { display: flex; gap: 6px; margin-top: 8px; } .grp-card-acts .btn { flex: 1; } .grp-invite-box { margin-top: 8px; border-top: 1px dashed #3a4f49; padding-top: 8px; } .grp-inv-friend { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .grp-inv-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; color: #111; } /* ===== 게시판 탭 ===== */ .board-head { display: flex; align-items: center; margin-bottom: 10px; } .board-group-sel { flex: 1; background: #263531; border: 1px solid #4fb8a8; color: #eef4f2; border-radius: 10px; padding: 8px 10px; font-family: inherit; font-size: 0.92rem; font-weight: 700; } .board-group-name { font-size: 1rem; font-weight: 800; color: #7fe0cf; } .board-empty { text-align: center; padding: 40px 16px; color: #cfe6e0; } .board-empty p { margin: 0 0 8px; } .board-compose { background: #263531; border: 1px solid #354842; border-radius: 14px; padding: 10px; margin-bottom: 14px; } .board-compose textarea { width: 100%; resize: none; background: #1f2c29; border: 1px solid #3a4f49; color: #eef4f2; border-radius: 10px; padding: 9px 11px; font-family: inherit; font-size: 0.92rem; line-height: 1.4; box-sizing: border-box; } .board-compose-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .board-cbtn { appearance: none; border: 1px solid #3a4f49; background: #1f2c29; color: #cfe6e0; border-radius: 9px; padding: 6px 9px; font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .board-cbtn:hover { border-color: #4fb8a8; } .board-compose-sp { flex: 1; } .board-attach-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .board-chip { display: inline-flex; align-items: center; gap: 6px; background: #1f2c29; border: 1px solid #4fb8a8; border-radius: 999px; padding: 4px 8px 4px 10px; font-size: 0.82rem; color: #dcebe6; } .board-chip-img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; } .board-chip-x { appearance: none; border: none; background: transparent; color: #9fb3ad; cursor: pointer; font-size: 0.8rem; padding: 0 2px; } .board-pick { margin-top: 8px; border-top: 1px dashed #3a4f49; padding-top: 8px; max-height: 210px; overflow-y: auto; position: relative; scrollbar-width: thin; scrollbar-color: #6b8f86 transparent; } /* 스크롤 미리 보이기: 넘칠 때 스크롤바를 상시 표시하고(gutter 고정) 하단에 '▾ 더 보기' 힌트를 띄운다 */ .board-pick.scrollable { overflow-y: scroll; } .board-pick::-webkit-scrollbar { width: 8px; } .board-pick::-webkit-scrollbar-thumb { background: #6b8f86; border-radius: 8px; } .board-pick::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 8px; } .board-pick-more { position: sticky; bottom: 4px; display: block; width: max-content; margin: 4px auto 0; padding: 2px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.5); pointer-events: none; } .board-pick-title { font-size: 0.78rem; color: #93aaa4; margin-bottom: 6px; } .board-pick-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 8px; border-radius: 9px; cursor: pointer; } .board-pick-item:hover { background: #2d3f3a; } .board-pick-lbl { font-size: 0.74rem; color: #93aaa4; margin-left: auto; } .board-rule-nm { font-size: 0.88rem; color: #dcebe6; } /* 규칙 첨부 목록 항목: 규칙명 1줄 → 아래줄에 '나의 규칙 · 활성 n개'(가로) */ .board-pick-item.rule { flex-direction: column; align-items: stretch; gap: 2px; flex-wrap: nowrap; } .board-pick-item.rule .board-rule-nm { display: block; width: 100%; white-space: normal; overflow-wrap: anywhere; font-weight: 600; } .board-pick-item.rule .board-pick-lbl { margin-left: 0; white-space: nowrap; } .board-post { background: #263531; border: 1px solid #354842; border-radius: 14px; padding: 12px; margin-bottom: 10px; } .board-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .board-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; } .board-post-who b { color: #eef4f2; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-post-time { font-size: 0.72rem; color: #93aaa4; } .board-del { appearance: none; border: none; background: transparent; color: #7d938d; cursor: pointer; font-size: 0.9rem; flex: none; padding: 2px 6px; } .board-del:hover { color: #ff6b6b; } .board-post-body { color: #e8f0ed; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .board-img { display: block; max-width: 100%; border-radius: 10px; margin-top: 8px; cursor: zoom-in; } .board-card { margin-top: 8px; background: #1f2c29; border: 1px solid #3a4f49; border-radius: 12px; padding: 10px; } .board-card.combo { border-color: #4fb8a8; } .board-card-h { font-size: 0.82rem; font-weight: 800; color: #7fe0cf; margin-bottom: 8px; } .board-card-balls { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; } .board-card-sub { font-size: 0.78rem; color: #93aaa4; margin-bottom: 9px; } .board-card-get { background: #35524b; border-color: #4a6a62; color: #dff2ec; } .board-post-title { color: #eef4f2; font-size: 1rem; font-weight: 800; margin-bottom: 6px; word-break: break-word; } /* 하위게시판 탭(클릭 전용·flex-wrap → 페이저 제스처와 충돌 방지) */ .board-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; } .board-subtab { appearance: none; border: 1px solid #354842; background: #1f2c29; color: #a9c2bb; border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; touch-action: manipulation; } .board-subtab:hover { border-color: #4fb8a8; } .board-subtab.active { background: #35524b; border-color: #4fb8a8; color: #eafaf6; } /* 자유게시판 제목 입력 */ .board-title-in { width: 100%; background: #1f2c29; border: 1px solid #3a4f49; color: #eef4f2; border-radius: 10px; padding: 9px 11px; font-family: inherit; font-size: 0.95rem; font-weight: 700; box-sizing: border-box; margin-bottom: 8px; } .board-title-in::placeholder { color: #6f8882; } /* ── 구매내역 보드 ── */ .board-compose.purchase .pur-actions { display: flex; flex-wrap: wrap; gap: 6px; } .pur-manual { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #3a4f49; display: flex; flex-direction: column; gap: 7px; } .pur-manual[hidden] { display: none; } .pur-manual-row { display: flex; align-items: center; gap: 8px; } .pur-manual-row label { font-size: 0.82rem; color: #a9c2bb; } .pur-round-in { width: 92px; background: #1f2c29; border: 1px solid #3a4f49; color: #eef4f2; border-radius: 9px; padding: 7px 9px; font-family: inherit; font-size: 0.9rem; box-sizing: border-box; } .pur-nums-in { width: 100%; background: #1f2c29; border: 1px solid #3a4f49; color: #eef4f2; border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 0.9rem; box-sizing: border-box; } .pur-mine { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #3a4f49; max-height: 220px; overflow-y: auto; } .pur-stage { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #3a4f49; } .pur-stage-title { font-size: 0.78rem; color: #93aaa4; margin-bottom: 6px; } .pur-stage-item { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; padding: 5px 0; } .pur-round-tag { flex: 0 0 auto; font-size: 0.74rem; font-weight: 800; color: #7fe0cf; background: #1f2c29; border: 1px solid #3a4f49; border-radius: 7px; padding: 2px 7px; cursor: pointer; } .pur-round-tag.unknown { color: #ffd76a; border-color: #f5c451; } .pur-round-select { flex: 0 0 78px; width: 78px; max-width: 78px; box-sizing: border-box; font-size: 0.68rem; font-weight: 800; color: #1c2b28; background: #fff; border: 1px solid #b7cfc7; border-radius: 7px; padding: 3px 15px 3px 4px; appearance: auto; -webkit-appearance: menulist; } .pur-round-select.unknown { color: #7a5b00; border-color: #f5c451; } .pur-round-all-sel { flex-basis: 78px; } .pur-select-box { flex: 0 0 auto; width: 17px; height: 17px; accent-color: #4fb8a8; cursor: pointer; } .pur-select-toggle.on { background: #c94a42; border-color: #c94a42; color: #fff; } .pur-select-toggle.on:not(.has-selection) { background: #2878d7; border-color: #2878d7; color: #fff; } .pur-round-all-box { flex: 0 0 auto; width: 17px; height: 17px; margin: 0 2px 0 0; accent-color: #4fb8a8; cursor: pointer; } .pur-stage-item .board-chip-x { margin-left: auto; } /* 회차별 접이식 섹션 */ .pur-round-sec { border: 1px solid #354842; border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #263531; } .pur-round-head { width: 100%; display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: #eef4f2; padding: 11px 12px; font-family: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; text-align: left; } .pur-round-caret { display: inline-block; transition: transform 0.15s; color: #7fe0cf; } .pur-round-sec.open .pur-round-caret { transform: rotate(90deg); } .pur-round-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pur-round-count { flex: 0 0 auto; font-size: 0.76rem; color: #93aaa4; font-weight: 700; } .pur-round-body { display: none; padding: 0 12px 10px; } .pur-round-sec.open .pur-round-body { display: block; } .pur-ticket { border-top: 1px solid #33453f; padding: 9px 0; } .pur-ticket-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .pur-ticket-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; color: #cfe6e0; } .pur-ticket-balls { display: flex; flex-wrap: wrap; gap: 4px; } /* 구매내역 한 줄: 등수 배지 · 구매번호 · 삭제 버튼(번호는 좁은 화면에서 내부 줄바꿈, 배지·삭제는 양끝 고정) */ .pur-ticket-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; } .pur-ticket-row > .pur-ticket-balls { flex: 1 1 auto; min-width: 0; } .pur-ticket-row > .board-del { flex: 0 0 auto; } /* 아랫줄: 사용한 규칙명 — 아주 작은 진한 회색, 하이라이트 없음 */ .pur-ticket-rule { margin-top: 2px; font-size: 0.66rem; line-height: 1.3; color: #7f8c88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pur-number { display: inline-block; min-width: 15px; font-size: 0.88rem; font-weight: 900; text-align: center; text-shadow: 0 0 0.35px currentColor; } .pur-number.c1 { color: var(--r0); } .pur-number.c2 { color: var(--r1); } .pur-number.c3 { color: var(--r2); } .pur-number.c4 { color: var(--r3); } .pur-number.c5 { color: var(--r4); } .pur-number.dim { opacity: 0.32; } /* 당첨번호(보너스 포함)와 일치한 번호: 기존 강조(색 유지)에 더해 밑줄로 표시(중복 밑줄은 아래 dup가 우선). */ .pur-number.hit:not(.dup) { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 2px; } /* 같은 사람이 같은 회차에 여러 번 고른 중복 번호 강조(밑줄) */ .pur-number.dup { text-decoration: underline; text-decoration-color: #e8892b; text-decoration-thickness: 2px; text-underline-offset: 2px; } .pur-number-sep { width: 3px; } /* 회차 안에서 올린 사람별로 묶기(접기/펴기 가능, 기본 열림) */ .pur-author-sec + .pur-author-sec { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 6px; padding-top: 4px; } .pur-author-head { position: relative; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 44px 5px 0; background: transparent; border: none; color: inherit; font: inherit; cursor: pointer; text-align: left; } .pur-author-caret { flex: 0 0 auto; color: #9fb7b0; font-size: 0.78rem; transition: transform 0.15s var(--ease); } .pur-author-sec.open .pur-author-caret { transform: rotate(90deg); } /* 이름 줄 가장 오른쪽 '열기/닫기' 라벨(절대 위치로 첫 줄에 고정 — 당첨요약이 여러 줄 접혀도 항상 이름 줄 우측). */ .pur-author-toggle { position: absolute; right: 0; top: 6px; flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; color: #9fb7b0; } .pur-author-toggle::after { content: "열기"; } .pur-author-sec.open .pur-author-toggle::after { content: "닫기"; } .pur-author-body { display: none; } .pur-author-sec.open .pur-author-body { display: block; } .pur-author-name { font-weight: 800; font-size: 0.84rem; color: #eaf3f0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pur-author-me { font-size: 0.64rem; font-weight: 800; color: #0b1f1a; background: #7fd8c0; border-radius: 5px; padding: 1px 5px; } .pur-author-count { font-size: 0.72rem; color: #9fb7b0; flex: 0 0 auto; } .pur-author-dup { font-size: 0.72rem; font-weight: 700; color: #e8892b; margin-left: auto; flex: 0 0 auto; } /* 사람 섹션 머리의 당첨내역 요약 pill(등수별 개수). 티켓 배지와 같은 색 계열. */ .pur-author-wins { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; } .pur-author-rank { font-size: 0.66rem; font-weight: 700; border-radius: 5px; padding: 1px 6px; line-height: 1.6; white-space: nowrap; } .pur-author-rank.win { background: #2b5c2f; color: #cdf5cf; } .pur-author-rank.none { background: #3a2b2b; color: #e0bcbc; } .pur-author-rank.pending { background: #2d3f3a; color: #9fc7bf; } /* 중복(6개 번호 통째로 같은 조합이 2번 이상): 티켓에 '중복' 배지 */ .pur-badge.dup-badge { background: #e8892b; color: #fff; } /* '나의 번호' 담기: 회차 필터 드롭다운 */ .pur-mine-filter { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .pur-mine-filter label { font-size: 0.78rem; color: #9fb7b0; flex: 0 0 auto; } .pur-mine-filter .pur-round-select { flex: 0 0 auto; } /* 밝은 드로어(친구목록)에서 글자색 보정 */ .friends-list-drawer .pur-author-name { color: #111; } .friends-list-drawer .pur-author-count, .friends-list-drawer .pur-mine-filter label { color: var(--fld-muted); } .pur-stage-item > .pur-number { flex: 0 0 15px; } .pur-stage-item > .pur-number:first-of-type { margin-left: 4px; } .pur-stage-item > .pur-number-sep { flex: 0 0 3px; } .pur-badge { flex: 0 0 auto; font-size: 0.76rem; font-weight: 800; border-radius: 7px; padding: 2px 8px; } .pur-badge.win { background: #2b5c2f; color: #cdf5cf; border: 1px solid #47a04d; } .pur-badge.none { background: #3a2b2b; color: #e0bcbc; border: 1px solid #6a4a4a; } .pur-badge.pending { background: #2d3f3a; color: #9fc7bf; border: 1px solid #4a6a62; } .pur-ticket-balls .ball.dim { opacity: 0.32; } /* ===== 그룹 역할/멤버 보기 · 게시판 가기 · 즐겨찾기 · 밝은 작성영역 (추가) ===== */ .grp-card-row { display: flex; align-items: center; gap: 8px; } .grp-card-row .grp-card-main { flex: 1; min-width: 0; } .grp-card-titleline { display: flex; align-items: center; gap: 5px; min-width: 0; } .grp-card-titleline b { color: #eef4f2; font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grp-role { display: inline-block; flex: none; font-size: 0.66rem; font-weight: 800; border-radius: 6px; padding: 1px 6px; } .grp-role.owner { background: #4a3d16; color: #ffd76a; border: 1px solid #7a6320; } .grp-role.coowner { background: #2d3f3a; color: #8fd8c9; border: 1px solid #4a6a62; } .grp-pend-badge { display: inline-block; flex: none; font-size: 0.66rem; font-weight: 800; background: #3a2b2b; color: #f0b6b6; border: 1px solid #6a4a4a; border-radius: 6px; padding: 1px 6px; } .grp-board-go { flex: 0 0 auto; background: #f5c451; border: 1px solid #f5c451; color: #2a2410; font-weight: 800; border-radius: 10px; padding: 7px 12px; box-shadow: 0 1px 6px rgba(245, 196, 81, 0.35); } .grp-board-go:hover { background: #ffd76a; border-color: #ffd76a; } .grp-members-box { margin-top: 8px; border-top: 1px dashed #3a4f49; padding-top: 8px; } .grp-members-box[hidden] { display: none; } .grp-mem-title { font-size: 0.78rem; color: #93aaa4; margin-bottom: 6px; } .grp-mem-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid #33453f; } .grp-mem-row:first-of-type { border-top: none; } .grp-mem-name { font-size: 0.88rem; color: #dcebe6; } .grp-mem-st { font-size: 0.68rem; font-weight: 700; border-radius: 6px; padding: 1px 6px; } .grp-mem-st.pending { background: #3a2b2b; color: #f0b6b6; } .grp-mem-st.invited { background: #2d3f3a; color: #9fc7bf; } .grp-mem-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; } .grp-mem-acts .btn { font-size: 0.74rem; } /* 그룹 멤버: 친구요청 버튼(파랑)과 친구 표시(초록) — 색을 확실히 구분 */ .grp-friend-req { background: #3b82f6; border: 1px solid #3b82f6; color: #fff; } .grp-friend-req:hover:not(:disabled) { background: #2f6fe0; border-color: #2f6fe0; } .grp-friend-req:disabled { background: #e5e7eb; border-color: #e5e7eb; color: #6b7280; cursor: default; } .grp-friend-tag { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 800; background: #e7f6ec; color: #1f8f4e; border: 1px solid #bfe6cc; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } /* 자유게시판 글쓰기 토글 */ .board-write-toggle { display: block; width: 100%; box-sizing: border-box; background: #35524b; border: 1px solid #4fb8a8; color: #eafaf6; border-radius: 12px; padding: 11px; font-family: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; margin-bottom: 10px; } .board-write-toggle:active, .board-write-toggle.open { color: #fff; } .board-write-toggle:hover { background: #3d6058; } /* 즐겨찾기: 상단 필터(아이콘) + 글별 별표 */ .board-favbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; } .board-fav-filter { appearance: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid #3a4f49; background: #1f2c29; color: #93aaa4; font-size: 1.05rem; line-height: 1; cursor: pointer; } .board-fav-filter:hover { border-color: #f5c451; } .board-fav-filter.on { background: #4a3d16; border-color: #f5c451; color: #ffd76a; } .board-fav-star { appearance: none; border: none; background: transparent; color: #7d938d; cursor: pointer; font-size: 0.98rem; line-height: 1; padding: 2px 4px; flex: none; } .board-fav-star.on { color: #ffd76a; } .board-edit { appearance: none; border: 1px solid #3a4f49; background: #1f2c29; color: #cfe6e0; border-radius: 8px; padding: 3px 8px; font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; flex: none; } .board-edit:hover { border-color: #4fb8a8; } /* 글 아코디언(제목/글쓴이 → 클릭 시 내용 펼침) */ .board-post-head { cursor: pointer; margin-bottom: 0; } .board-post-lead { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .board-post-lead .board-post-who { flex: none; flex-direction: row; align-items: baseline; gap: 6px; } .board-post-preview { font-size: 0.82rem; color: #a9c2bb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-post-acts { display: flex; align-items: center; gap: 4px; flex: none; } .board-post-caret { display: inline-block; color: #7fe0cf; transition: transform 0.15s; } .board-post.open .board-post-caret { transform: rotate(90deg); } .board-post-detail { margin-top: 10px; } .board-post-detail[hidden] { display: none; } /* 규칙대화·팁: 처음부터 펼침(아코디언 아님) → 헤더에 포인터/캐럿 없음 */ .board-post-head.static { cursor: default; } /* 규칙 카드: 규칙보기+적용 버튼 나란히 + 붉은 적용완료 안내 */ /* 공유규칙 카드는 class="board-card rule" 라 전역 .rule(3열 grid)에 걸려 제목·개수·버튼이 겹쳤다. 블록 흐름으로 되돌려 제목 한 줄 → 활성규칙 개수 한 줄 → 버튼 줄 순서로 쌓이게 한다. */ .board-card.rule { display: block; padding: 10px; border-top: none; } .board-card-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .board-card-acts .board-card-get-right { margin-left: auto; } /* 규칙보기 및 저장 우측정렬 */ .board-card-applied { margin-top: 6px; font-size: 0.76rem; font-weight: 700; color: #e5484d; } /* 밝은색 작성 영역 */ .board-compose.fresh { background: #eaf6f2; border-color: #bfe3d9; } .board-compose.fresh textarea, .board-compose.fresh .board-title-in, .board-compose.fresh .pur-round-in, .board-compose.fresh .pur-nums-in { background: #ffffff; border-color: #cfe6dd; color: #1c2b28; } .board-compose.fresh textarea::placeholder, .board-compose.fresh .board-title-in::placeholder, .board-compose.fresh .pur-nums-in::placeholder { color: #86a89f; } .board-compose.fresh .board-cbtn { background: #ffffff; border-color: #cfe6dd; color: #2b5c50; } .board-compose.fresh .board-cbtn:hover { border-color: #4fb8a8; } .board-compose.fresh label, .board-compose.fresh .board-rule-nm { color: #2b3d38; } .board-compose.fresh .board-pick-title, .board-compose.fresh .pur-stage-title, .board-compose.fresh .board-pick-lbl { color: #5f7d76; } .board-compose.fresh .board-pick-item:hover { background: #dcefe9; } .board-compose.fresh .board-chip { background: #ffffff; color: #2b3d38; border-color: #bfe3d9; } .board-compose.fresh .board-chip-x { color: #5f7d76; } /* 1:1 채팅 드로어(친구 목록 위 4번째 레이어) */ #chatBackdrop { z-index: 49; } /* 채팅 드로어: 친구 드로어와 동일한 라이트 테마 팔레트(--fld-*)를 공유. setupFlTheme 가 theme-* 클래스를 함께 토글한다. */ /* 채팅 드로어: 친구 드로어 기본값과 동일한 딥 틸 — 친구에서 채팅으로 들어갈 때 색이 튀지 않게. */ .chat-drawer { --fld-bg: #ffffff; --fld-accent: #2f8f7f; --fld-head: #2f8f7f; --fld-head-bd: rgba(0, 0, 0, 0.06); --fld-title: #ffffff; --fld-card: #ffffff; --fld-card-bd: #cfe6e0; --fld-hover-bg: #eef7f4; --fld-board-card: #f3faf8; --fld-text: #1f302c; --fld-muted: #6f8580; } .chat-drawer.theme-teal { --fld-accent: #2f8f7f; --fld-head: #2f8f7f; --fld-card-bd: #cfe6e0; --fld-hover-bg: #e9f4f0; --fld-board-card: #f3faf8; --fld-text: #1f302c; --fld-muted: #6f8580; } .chat-drawer.theme-orange { --fld-accent: #cf7645; --fld-head: #cf7645; --fld-card-bd: #f0d9c9; --fld-hover-bg: #fbeadd; --fld-board-card: #fdf6f1; --fld-text: #3a2a20; --fld-muted: #8a7a6d; } .chat-drawer.theme-navy { --fld-accent: #34477f; --fld-head: #34477f; --fld-card-bd: #d5ddef; --fld-hover-bg: #e7ecf8; --fld-board-card: #f4f7fd; --fld-text: #1f2a44; --fld-muted: #6b7590; } .chat-drawer { z-index: 50; background: var(--fld-bg); border-left: 3px solid var(--fld-accent); display: flex; flex-direction: column; } .fav-drawer.chat-drawer { width: min(84vw, 400px); } /* 친구목록(min(88vw, 420px))보다 아주 살짝 좁게 */ .chat-drawer .drawer-head { background: var(--fld-head); border-bottom-color: var(--fld-head-bd); display: flex; align-items: center; gap: 8px; } .chat-drawer .fav-drawer-title { color: var(--fld-title); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-back { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer; } .chat-back:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.32); } .chat-back svg { width: 18px; height: 18px; } .chat-drawer .drawer-close { color: #fff; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } .chat-drawer .drawer-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.32); } .chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 7px; } .chat-empty { color: var(--fld-muted); font-size: 0.85rem; text-align: center; padding: 24px 12px; line-height: 1.6; } .chat-day { align-self: center; margin: 6px 0 2px; font-size: 0.7rem; color: var(--fld-muted); background: var(--fld-hover-bg); padding: 2px 10px; border-radius: 10px; } .chat-bubble { max-width: 78%; padding: 8px 11px; border-radius: 14px; font-size: 0.9rem; line-height: 1.42; word-break: break-word; white-space: pre-wrap; position: relative; } .chat-bubble .chat-time { display: block; margin-top: 3px; font-size: 0.64rem; opacity: 0.6; } .chat-bubble.mine { align-self: flex-end; background: var(--fld-accent); color: #fff; border-bottom-right-radius: 5px; } .chat-bubble.theirs { align-self: flex-start; background: var(--fld-hover-bg); color: var(--fld-text); border: 1px solid var(--fld-card-bd); border-bottom-left-radius: 5px; } /* 카톡식 '1'(안읽음): 내 말풍선 왼쪽 바깥. 라이트 배경이라 테마 accent 색으로. 상대가 읽으면 JS 가 제거 */ .chat-bubble .chat-unread { position: absolute; right: calc(100% + 5px); bottom: 4px; color: var(--fld-accent); font-size: 0.72rem; font-weight: 800; line-height: 1; } .chat-input { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--fld-card-bd); background: var(--fld-board-card); } .chat-input input { flex: 1 1 auto; min-width: 0; border-radius: 20px; border: 1px solid var(--fld-card-bd); background: var(--fld-card); color: var(--fld-text); padding: 9px 14px; font-size: 0.9rem; } .chat-input input:focus { outline: none; border-color: var(--fld-accent); } .chat-send { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--fld-accent); color: #fff; cursor: pointer; } .chat-send:hover { background: #2f8f7f; } .chat-send:disabled { opacity: 0.5; cursor: default; } .chat-send svg { width: 19px; height: 19px; } /* 내 번호 드로어(삼발이 위 겹침, 좌측·다크 계열) */ #myNumbersBackdrop { z-index: 47; } /* 내 번호 드로어: 색상은 테마 변수(--mnd-*). 기본=현재색상(인디고 다크), .mtheme-orange/brown/teal 은 동일한 다크 스타일에서 accent(강조색)만 바꾼다(헤더 스와치로 전환). */ .drawer.my-numbers-drawer { z-index: 48; width: min(88vw, 420px); background: var(--mnd-bg); border-right: 3px solid var(--mnd-accent); box-shadow: 10px 0 44px -8px rgba(0, 0, 0, 0.55); /* 기본 테마: 현재 팔레트의 앵커색(딥 에스프레소 --navy, hue 60)+골드 다크. 옛 네이비 블루(#141a2b, hue 258)는 팔레트를 웜 뉴트럴로 옮긴 뒤 혼자 파랗게 겉돌았다. accent 만 바꾸는 .mtheme-* 는 아래 그대로 유지. */ --mnd-bg: #1a1611; --mnd-accent: #d3a53f; --mnd-head: #221c14; --mnd-head-bd: rgba(255, 255, 255, 0.08); --mnd-title: #f4efe6; --mnd-title-b: #e6c063; --mnd-close: #e0d6c6; --mnd-close-hbg: rgba(211, 165, 63, 0.22); --mnd-group-bg: #221c14; --mnd-group-bd: #3a3022; --mnd-text: #f4efe6; --mnd-muted: #b5a894; --mnd-draw-bg: #2b2318; --mnd-lbl: #e6c063; --mnd-ticket-bg: #241d14; } .my-numbers-drawer.mtheme-orange { --mnd-bg: #1b1712; --mnd-accent: #cf7645; --mnd-head: #221a13; --mnd-title-b: #e5946a; --mnd-close-hbg: rgba(207, 118, 69, 0.22); --mnd-group-bg: #221b14; --mnd-group-bd: #3a2c20; --mnd-draw-bg: #2c2318; --mnd-lbl: #e5946a; --mnd-ticket-bg: #251d15; } .my-numbers-drawer.mtheme-brown { --mnd-bg: #1a1611; --mnd-accent: #b0824f; --mnd-head: #1f1a12; --mnd-title-b: #e6b985; --mnd-close-hbg: rgba(176, 130, 79, 0.22); --mnd-group-bg: #221d15; --mnd-group-bd: #362c1f; --mnd-draw-bg: #2c2417; --mnd-lbl: #e6b985; --mnd-ticket-bg: #241d14; } .my-numbers-drawer.mtheme-teal { --mnd-bg: #141c1a; --mnd-accent: #4fb8a8; --mnd-head: #172220; --mnd-title-b: #7fe0cf; --mnd-close-hbg: rgba(79, 184, 168, 0.22); --mnd-group-bg: #18201e; --mnd-group-bd: #26332f; --mnd-draw-bg: #1f2c29; --mnd-lbl: #7fe0cf; --mnd-ticket-bg: #1c2624; } .my-numbers-drawer .drawer-head { background: var(--mnd-head); border-bottom: 1px solid var(--mnd-head-bd); } .my-numbers-drawer .drawer-brand .logo { color: var(--mnd-title); } .my-numbers-drawer .drawer-brand .logo b { color: var(--mnd-title-b); } .my-numbers-drawer .drawer-close { color: var(--mnd-close); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .my-numbers-drawer .drawer-close:hover { color: #fff; border-color: var(--mnd-accent); background: var(--mnd-close-hbg); } .my-numbers-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 10px; } /* min-height:0 없으면 flex 자식이 내용 높이만큼 커져 overflow-y 스크롤이 동작하지 않는다(내 번호 드로어 스크롤 불가 원인). */ /* ⚠ 반대쪽 함정: 이 컨테이너가 flex-column 이라 자식(.mynd-group)이 기본 flex-shrink:1 로 컨테이너 높이에 맞춰 '찌그러진다' → 내용이 넘쳐도 scrollHeight 가 안 늘어 스크롤이 아예 생기지 않았다. (저장 번호가 한 화면을 넘어가면 손가락으로 못 내리던 원인) → 자식은 줄이지 않는다. */ .my-numbers-body > * { flex: 0 0 auto; } .mynd-empty { color: var(--mnd-muted); font-size: 0.9rem; line-height: 1.6; text-align: center; padding: 30px 10px; } .mynd-empty b { color: var(--mnd-text); } .mynd-group { border: 1px solid var(--mnd-group-bd); border-radius: 13px; background: var(--mnd-group-bg); overflow: hidden; } .mynd-sum { display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; list-style: none; } .mynd-sum::-webkit-details-marker { display: none; } .mynd-round { font-weight: 800; color: var(--mnd-text); font-size: 0.94rem; } .mynd-best { margin-left: 2px; } .mynd-count { margin-left: auto; font-size: 0.76rem; font-weight: 700; color: var(--mnd-muted); } .mynd-caret { color: var(--mnd-muted); font-size: 0.8rem; transition: transform 0.18s var(--ease); } .mynd-group[open] .mynd-caret { transform: rotate(180deg); } .mynd-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 9px; } .mynd-draw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 9px; border-radius: 10px; background: var(--mnd-draw-bg); } .mynd-draw-lbl { font-size: 0.74rem; font-weight: 800; color: var(--mnd-lbl); white-space: nowrap; } .mynd-draw.mynd-pending, .mynd-pending { color: #8b93ab; font-size: 0.8rem; } .mynd-tickets { display: flex; flex-direction: column; gap: 6px; } .mynd-ticket { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--mnd-ticket-bg); flex-wrap: wrap; } /* 저장한 6개 번호는 항상 한 줄. 좁은 폭에서는 등수·혼잡도 태그가 다음 줄로 내려가고 번호는 안 쪼개진다. */ .mynd-ticket .balls { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; flex-wrap: nowrap; justify-content: space-between; } /* 내 번호(저장 티켓): 공 모양 대신 공 색깔의 숫자만 표시 */ .mynd-ticket .ball.sm { flex: 0 0 auto; width: auto; min-width: 0; height: auto; padding: 0; background: transparent; border: none; box-shadow: none; border-radius: 0; font-size: 0.92rem; font-weight: 800; } /* 태그는 번호 자리를 뺏지 않도록 축소 */ .mynd-ticket .rank-tag { flex: 0 0 auto; font-size: 0.66rem; padding: 2px 7px; } .mynd-ticket .crowd-badge { flex: 0 0 auto; font-size: 0.64rem; padding: 2px 7px; } @media (max-width: 380px) { .mynd-ticket .ball.sm { font-size: 0.86rem; } .mynd-ticket .balls { gap: 2px; } } .mynd-ticket .ball.sm.c1 { color: #b7d6a6; } .mynd-ticket .ball.sm.c2 { color: #d2dd9f; } .mynd-ticket .ball.sm.c3 { color: #f0d79f; } .mynd-ticket .ball.sm.c4 { color: #f2c39b; } .mynd-ticket .ball.sm.c5 { color: #eeab8f; } .mynd-ticket .ball.sm.dim { opacity: 0.34; } .mynd-line { font-size: 0.76rem; color: var(--mnd-muted); } /* 내 번호 드로어 헤더 색상 선택 스와치 (친구 드로어와 동일 구조) */ .mnd-theme-picker { display: flex; gap: 6px; align-items: center; margin-left: auto; margin-right: 10px; flex: 0 0 auto; } .mnd-sw { width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.4); cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.12s var(--ease); } .mnd-sw:hover { transform: scale(1.12); } .mnd-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--mnd-accent), 0 1px 3px rgba(0, 0, 0, 0.35); } .mnd-sw-default { background: #d3a53f; } .mnd-sw-orange { background: #cf7645; } .mnd-sw-brown { background: #8a5a2b; } .mnd-sw-teal { background: #2f8f7f; } .fr-list-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin-bottom: 9px; } .fr-list-av { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 800; text-transform: uppercase; } .fr-online-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface-2); background: #9aa0a6; } .fr-online-dot.on { background: #35c759; box-shadow: 0 0 0 1px rgba(53, 199, 89, 0.35); } .fr-list-meta { flex: 1 1 auto; min-width: 0; } .fr-list-name { font-weight: 700; font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-list-status { font-size: 0.74rem; color: var(--muted); } .fr-list-status.on { color: #2a9d54; font-weight: 700; } .modal.friends-modal { width: min(480px, 100%); max-height: 92vh; overflow-y: auto; color: var(--text); } .friends-body { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 6px; } .friends-msg { margin: 0; padding: 9px 12px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-strong); font-size: 0.82rem; font-weight: 600; word-break: break-word; } .friends-msg.err { background: rgba(200, 60, 40, 0.12); color: #b23522; border: 1px solid rgba(200, 60, 40, 0.32); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; } .fr-sec h4 { margin: 0 0 8px; font-size: 0.92rem; font-weight: 800; display: flex; align-items: center; gap: 8px; } .fr-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.68rem; font-weight: 800; } .fr-profile-row, .fr-invite-row, .fr-search-row { display: flex; gap: 8px; margin-bottom: 8px; } .fr-profile-row input, .fr-invite-row input, .fr-search-row input { flex: 1 1 auto; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: 0.88rem; } .fr-invite-row input { font-size: 0.76rem; color: var(--text-2); } .fr-hint { margin: 2px 0 0; font-size: 0.74rem; color: var(--muted); line-height: 1.5; } .fr-list { display: flex; flex-direction: column; gap: 8px; } .fr-empty { margin: 2px 0; font-size: 0.8rem; color: var(--muted); } .fr-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); } .fr-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 800; text-transform: uppercase; } .fr-person-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.88rem; } .fr-person-acts { flex: 0 0 auto; display: flex; gap: 6px; } .btn.mini.ghost { background: transparent; } /* 비로그인 경고 배너(내번호·추첨결과·규칙관리 최상단) */ .guest-warn { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(207, 118, 69, 0.1); border: 1px solid rgba(207, 118, 69, 0.32); color: var(--brand-strong); font-size: 0.82rem; font-weight: 600; line-height: 1.5; } /* ===== 로그인: 원래 디자인 + 위에서 아래로 슬라이드(상단 라운드/경계선 없음) ===== */ #authModal { align-items: flex-start; justify-content: center; padding: 0; } .auth-modal { width: min(440px, 100%); max-width: none; max-height: 94vh; overflow-y: auto; border: 1px solid var(--border); border-top: none; border-radius: 0 0 20px 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); animation: authDrop 0.34s cubic-bezier(0.22, 0.72, 0, 1); } @keyframes authDrop { from { transform: translateY(-100%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } } @keyframes authRise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } .auth-modal.auth-closing { animation: authRise 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; } /* 로그인 모달: 홈 정체성(네이비 헤더 + 골드 강조)에 맞춤. 헤더 밴드를 모달 상단 전폭 네이비로. */ .auth-modal .modal-head { margin: -20px -22px 16px; padding: 18px 22px; background: linear-gradient(160deg, var(--navy), var(--navy-2)); border-radius: 0; } .auth-modal .modal-head h3 { color: #fff; letter-spacing: -0.01em; } .auth-modal .modal-x { color: rgba(255, 255, 255, 0.82); } .auth-modal .modal-x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .auth-modal .auth-note { color: var(--ink-2); } .auth-modal .auth-note b { color: var(--brand-strong); } .auth-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .auth-tab { flex: 1; padding: 9px 0; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 9px; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .auth-tab.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); } .auth-social { display: flex; flex-direction: column; gap: 8px; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; border-radius: 10px; border: 1px solid transparent; font-size: 0.92rem; font-weight: 650; cursor: pointer; transition: filter 0.14s; } .social-btn b { font-weight: 800; } .social-btn:hover { filter: brightness(0.96); } .s-kakao { background: #FEE500; color: #191600; } .s-naver { background: #03C75A; color: #fff; } .s-google { background: #fff; color: #2b231d; border-color: #dadce0; } .auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 0.78rem; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-form { display: flex; flex-direction: column; gap: 10px; } .auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-2); font-weight: 650; } .auth-field input { padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 0.95rem; } .auth-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .auth-remember { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-2); font-weight: 650; cursor: pointer; margin-top: 2px; } .auth-remember input { width: 16px; height: 16px; flex: none; accent-color: var(--brand); cursor: pointer; } .auth-submit { margin-top: 6px; } .auth-msg { margin: 2px 0 0; font-size: 0.82rem; color: var(--danger); } .auth-msg.ok { color: var(--brand-strong); } /* 동기화 안내: 경고성 포인트 박스(원래 팔레트) */ .auth-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; background: var(--brand-soft); border: 1px solid var(--brand); color: var(--brand-strong); font-size: 0.82rem; font-weight: 650; line-height: 1.45; } .auth-note b { font-weight: 800; } /* (제거) .quick-menu 래퍼 — 햄버거 버튼이 header-inner 직속이 됨 */ .quick-menu-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); font-size: 1.1rem; font-weight: 750; cursor: pointer; box-shadow: var(--shadow-sm); } .quick-menu-btn:hover { border-color: var(--brand); color: var(--brand-strong); } /* 좌측 슬라이드 드로어 (클로드 앱 스타일) — body 직속, position:fixed */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 30, 0.42); z-index: 45; opacity: 0; visibility: hidden; transition: opacity 0.42s ease, visibility 0.42s ease; } .drawer-backdrop.open { opacity: 1; visibility: visible; touch-action: none; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(56vw, 320px); z-index: 46; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); box-shadow: 10px 0 44px -8px rgba(20, 20, 30, 0.28); transform: translateX(-100%); transition: transform 0.46s cubic-bezier(0.22, 0.72, 0, 1); will-change: transform; overflow: hidden; } .drawer.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 16px; background: var(--brand-soft); border-bottom: 1px solid var(--border); } .drawer-brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; } .drawer-brand .logo, .drawer-brand .kr { white-space: nowrap; } .drawer-brand .logo { font-size: 1.18rem; font-weight: 750; letter-spacing: -0.03em; color: var(--text); } .drawer-brand .logo b { color: var(--brand); } .drawer-brand .kr { color: var(--muted); font-size: 0.8rem; } /* 삼발이 드로어 안 '현재 등급' 표시(로그인 시). 역할별 색상: 프리미엄=골드, 관리자/부관리자=골드강조, 일반=중립. */ .drawer-role { margin: 8px 12px 2px; padding: 8px 12px; border-radius: 11px; font-size: 0.82rem; font-weight: 800; text-align: center; letter-spacing: -0.01em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } .drawer-role[hidden] { display: none; } .drawer-role.role-premium { background: var(--gold-soft); color: var(--brand-strong); border-color: transparent; } .drawer-role.role-admin, .drawer-role.role-subadmin { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: var(--gold-2); border-color: transparent; } .drawer-role.role-user { background: var(--surface-2); color: var(--ink-2); } .drawer-close { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; border-radius: 50%; transition: color 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.12s var(--ease); } .drawer-close svg { width: 16px; height: 16px; } .drawer-close:hover { color: var(--brand-strong); border-color: var(--brand); } .drawer-close:active { transform: scale(0.92); } .drawer-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; } .drawer button[data-tab] { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: none; border-radius: 13px; background: transparent; color: var(--text-2); text-align: left; font: inherit; font-size: 0.96rem; font-weight: 650; cursor: pointer; position: relative; transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.1s var(--ease), box-shadow 0.16s var(--ease); } /* hidden 속성 존중: 위 display:flex 가 UA 의 [hidden]{display:none} 을 덮어써 숨겨지지 않던 문제 방지 (예: 관리자 버튼 #drawerAdminBtn — 관리자/부관리자가 아니면 admin.js 가 hidden=true 로 둠) */ .drawer button[data-tab][hidden] { display: none; } .drawer button[data-tab] .d-ic { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: color 0.16s var(--ease); } .drawer button[data-tab] .d-ic svg { width: 21px; height: 21px; } .drawer button[data-tab] .d-label { flex: 1; } .drawer button[data-tab]::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translateX(-3px); opacity: 0; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); } .drawer button[data-tab]:hover { background: var(--brand-soft); color: var(--brand-strong); } .drawer button[data-tab]:hover .d-ic { color: var(--brand-strong); } .drawer button[data-tab]:active { transform: scale(0.98); } .drawer button[data-tab].active { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px var(--brand); } .drawer button[data-tab].active .d-ic { color: #fff; } .drawer button[data-tab].active::after { opacity: 0.9; transform: rotate(45deg) translateX(0); } /* 관리자 전용 메뉴: 도움말 아래에 구분선 + 앰버 하이라이트로 별도 강조. */ .drawer button[data-tab].drawer-admin-hl { margin-top: 10px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.06)); color: #b45309; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.42); } .drawer button[data-tab].drawer-admin-hl::before { content: ""; position: absolute; left: 6px; right: 6px; top: -6px; border-top: 1px solid var(--border); } .drawer button[data-tab].drawer-admin-hl .d-ic { color: #d97706; } .drawer button[data-tab].drawer-admin-hl:hover { background: linear-gradient(135deg, rgba(245, 158, 11, 0.26), rgba(245, 158, 11, 0.12)); color: #92400e; } .drawer button[data-tab].drawer-admin-hl.active { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.85); } .drawer button[data-tab].drawer-admin-hl.active .d-ic { color: #fff; } .drawer-foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.4; } .drawer-foot b { color: var(--brand-strong); font-weight: 700; } /* 시안 .navlinks: 브랜드와 navright 사이 한 줄. 요소는 기존 nav.tabs 를 그대로 재사용해 setupTabs/activateTab/syncTabbar/스와이프 인디케이터 배선을 모두 살린다. */ nav.tabs { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; overscroll-behavior-y: none; touch-action: pan-x; position: relative; min-width: 0; --tab-indicator-x: 0px; --tab-indicator-w: 0px; } nav.tabs::-webkit-scrollbar { display: none; } nav.tabs button { position: relative; background: transparent; color: var(--ink-2); border: none; border-radius: 10px; padding: 9px 13px; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: pan-x; font-family: inherit; transition: background 0.18s var(--ease), color 0.18s var(--ease); } nav.tabs button:hover { background: var(--surface-2); color: var(--ink); } nav.tabs button.active { color: var(--navy-2); font-weight: 800; } /* 시안의 골드 밑줄 — 기존 active 마커를 재정의(새로 덧붙이면 밑줄이 겹친다) */ nav.tabs button.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2.5px; background: var(--brand); border-radius: 2px; } /* 다크: --navy-2(0.3)는 --surface(0.23) 위에서 거의 안 보인다 → 밝은 잉크로 */ :root[data-theme="dark"] nav.tabs button.active { color: var(--ink); } nav.tabs::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--tab-indicator-w); height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); opacity: 0; transform: translate3d(var(--tab-indicator-x), 0, 0); transition: transform 0.52s cubic-bezier(0.22, 0.72, 0, 1), width 0.52s cubic-bezier(0.22, 0.72, 0, 1), opacity 0.14s ease; pointer-events: none; } nav.tabs.swipe-indicator button.active::after { opacity: 0; } nav.tabs.swipe-indicator::after { opacity: 1; } nav.tabs.swipe-indicator.dragging::after { transition: opacity 0.14s ease; } /* ---------- 레이아웃 ---------- */ main { /* 시안 .wrap 규격: max-width 1240 + clamp 좌우 여백 (PC 메인 다열 그리드 기준). 좌우 여백(gutter)은 헤더(.header-inner)·하단(.note-wrap/.footer)과 같은 clamp 값을 써서 좌측 로고와 본문 글자의 왼쪽 라인이 항상 정렬된다. floor 를 키워 글자가 좌측 가장자리에 붙지 않게 함. */ max-width: 1240px; margin: 0 auto; padding: 32px clamp(28px, 4vw, 48px) 96px; display: grid; align-items: start; } /* PC(≥1025px)에서는 본문을 1440px 로 확장한다. 과거 ≥1600px 에서 1840/94vw 로 거의 풀블리드까지 늘렸더니 단일 컬럼 콘텐츠가 가로로 성기게 퍼져 오히려 가독성이 나빴다. 1440 은 다열 대시보드(홈·규칙관리 등)가 밀도 있게 읽히면서도 텍스트 한 줄이 과하게 길어지지 않는 데스크톱 표준 폭. 하단 면책(.note-wrap)·푸터(.footer .fwrap)도 같은 폭으로 맞춰 본문과 좌우 라인을 정렬한다. (≤1024 는 그대로 → 모바일/태블릿 레이아웃 불변) */ @media (min-width: 1025px) { main { max-width: 1440px; } .note-wrap { max-width: 1440px; } .footer .fwrap { max-width: 1440px; } } /* 홈 히어로는 상단 여백 없이 티커/내비에 바로 붙는다(시안) */ #home.tab-panel { margin-top: -32px; } .tab-panel { display: none; grid-area: 1 / 1; min-width: 0; } .tab-panel.active { display: block; } /* 등장 애니메이션은 클릭 전환에만 적용(rise-in). 스와이프 정리 시 재생되는 깜박임 방지 */ .tab-panel.active.rise-in { animation: rise 0.35s var(--ease); } .tab-panel.swipe-panel, .subpanel.swipe-panel, .simmode-panel.swipe-panel, #chartArea.swipe-panel { display: block; pointer-events: none; will-change: transform; backface-visibility: hidden; transition: transform 0.52s cubic-bezier(0.22, 0.72, 0, 1); } .tab-panel.swipe-panel.swipe-dragging, .subpanel.swipe-panel.swipe-dragging, .simmode-panel.swipe-panel.swipe-dragging, #chartArea.swipe-panel.swipe-dragging { transition: none; } .tab-panel.swipe-current, .subpanel.swipe-current { z-index: 2; } .tab-panel.swipe-next, .subpanel.swipe-next { z-index: 1; } /* 분석 메뉴 서브탭 스와이프: 서브탭 바(#subtabs)는 sticky 그대로 상단에 고정하고, 두 서브패널만 같은 위치에 겹쳐 좌우로 드래그한다. ※ 서브탭 바를 grid item 으로 만들면 sticky 가 풀려 아래로 떨어지므로(측정 확인), #analyze 는 일반 블록으로 두고 들어오는 패널만 absolute 로 겹친다. ※ overflow:hidden 은 sticky 를 풀어버리므로 가로만 잘라내는 overflow-x:clip 사용. */ #analyze.sub-swiping { position: relative; } #analyze.sub-swiping > .subpanel.swipe-next { position: absolute; left: 0; right: 0; top: var(--sub-next-top, 0); } /* 서브탭 스와이프 중 들어오는 패널이 position:absolute 가 되면 첫 자식의 top 마진 상쇄가 풀려 콘텐츠가 마진만큼 아래로 밀렸다가, 정착(static)하며 위로 튄다(세로 흔들림). → 서브탭 아래 여백은 .subtabs 의 margin-bottom 이 담당하므로 첫 자식 top 마진을 제거해 absolute/static 두 상태의 콘텐츠 세로 위치를 항상 일치시킨다. ※ .sim-modetabs(시뮬·차트 모드탭)는 margin-top:-24px 로 서브탭 바에 밀착되므로 제외한다. */ #analyze .subpanel > :first-child:not(.sim-modetabs) { margin-top: 0; } main.swipe-interactive { /* 좌우로 밀려난 패널을 잘라내되, overflow:hidden 은 main 을 스크롤 컨테이너로 만들어 내부 sticky(서브탭 바)를 풀어버리므로, 스크롤 컨테이너를 만들지 않는 overflow-x:clip 사용 */ overflow-x: clip; overflow-y: visible; overscroll-behavior: contain; touch-action: pan-y; } main.swipe-interactive .tab-panel.active { animation: none; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tab-panel.active, .tab-panel.swipe-panel { animation: none; transition: none; } } /* 분석 메뉴 내부 서브탭 — 메인 메뉴(헤더)와 같은 프레임으로 연결: main 상단 패딩을 상쇄해 헤더에 밀착시키고, 배경을 화면 전체 폭으로 확장해 헤더와 같은 스타일 사용 */ /* 그룹 하위 내비: 분석 서브탭(.subtabs)과 완전히 동일한 스타일 사용. 여기선 숨김만 보정. */ .group-subnav[hidden] { display: none; } /* 스택 패널과 같은 셀(1/1)에 두되 위(start)에 붙여, 상위 6탭 바로 아래에 고정한다. (전엔 그리드가 subnav 를 패널 '아래' 새 행으로 자동배치 → 콘텐츠 중간에 떠버렸다. 패널을 다른 행으로 옮기면 .page-slogan·.disclaimer 가 맨 위로 올라오므로, 패널은 1/1 유지.) */ .group-subnav { grid-area: 1 / 1; align-self: start; z-index: 20; } /* subnav 가 겹치는 그룹 패널(추천 생성·스마트 추천)은 상단 여백으로 콘텐츠를 subnav 아래로 내린다. + 블록 간 간격을 조합찾기/분석과 동일한 14px 리듬으로 통일(flex column gap). */ #recommend, #smart { padding-top: 42px; } /* ⚠ .swipe-panel 을 반드시 함께 적는다. 스와이프로 들어오는 패널은 아직 .active 가 아니라 이 규칙이 빠지면 .tab-panel.swipe-panel{display:block} 이 이겨서 flex gap 이 사라진다 → 슬라이드 중에는 박스들이 서로 붙어 있다가 정착하는 순간 간격이 벌어지며 튄다. */ #recommend.active, #smart.active, #recommend.swipe-panel, #smart.swipe-panel { display: flex; flex-direction: column; gap: 14px; } /* 설명 박스 하단 간격: flex(gap) 컨테이너에선 0(gap 이 처리), 그 외에선 14px */ .rf-intro { margin-bottom: 14px; } .rf-studio > .rf-intro, #recommend > .rf-intro, #smart > .rf-intro { margin-bottom: 0; } /* 중첩 3차 서브탭(백데이터분석 모드탭)은 상단 음수마진 제거 — 설명 박스 위로 겹치지 않게 */ .subtabs.sim-modetabs { margin-top: 0; } .subtabs { position: sticky; top: calc(var(--header-h, 96px) - 1px); z-index: 19; display: flex; gap: 6px; flex-wrap: wrap; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: none; touch-action: pan-x; margin: -32px calc(50% - 50vw) 22px; padding: 8px calc(50vw - 50%) 10px; /* 불투명 배경: 스크롤 콘텐츠가 메뉴 뒤로 비치지 않도록 반투명·블러 제거 */ background: var(--bg); --tab-indicator-x: 0px; --tab-indicator-w: 0px; } /* 2차·3차 메뉴 선택: 2222.png 톤 — 비활성은 플레인 텍스트, 활성만 연한 회색 알약 */ .subtabs button { position: relative; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; touch-action: pan-x; white-space: nowrap; transition: color 0.16s var(--ease), background 0.16s var(--ease), border-color 0.16s var(--ease); } .subtabs button:hover { color: var(--ink); background: var(--surface-2); } /* 선택 알약: --surface-3 은 배경과 명도차가 거의 없어 선택된 게 안 보였다. --ink 를 섞어 진하게 만든다 — 라이트에선 --ink 가 어두워 더 진해지고, 다크에선 --ink 가 밝아 더 밝아지므로 양쪽 모두 패널과의 대비가 커진다(토큰 하나로 자동 반전). */ .subtabs button.active { background: color-mix(in srgb, var(--ink) 16%, var(--surface)); border-color: color-mix(in srgb, var(--ink) 26%, transparent); color: var(--ink); font-weight: 800; box-shadow: none; } .subtabs button.active::after { display: none; } /* (알약 스타일에서는 스와이프 언더바 인디케이터 미사용) */ .subtabs::after { display: none; } .subpanel { display: none; } .subpanel.active { display: block; } .subpanel.active.rise-in { animation: rise 0.3s var(--ease); } /* 시뮬레이션·차트의 하위 모드 탭(반복분석/회차분석, 합계변화/재등장) — 서브탭 바로 아래에 고정하고 같은 프레임(흰색 배경 · 전체 폭)으로 연결 */ /* 3차 모드탭(과거·반복·규칙비교)은 sticky 전폭 바 대신 설명 박스 위의 작은 인라인 토글 */ .sim-modetabs { position: static; top: auto; z-index: auto; margin: 0 0 14px; padding: 0; border-bottom: none; background: transparent; gap: 4px; } .sim-modetabs button { font-size: 0.8rem; padding: 6px 12px; font-weight: 600; } /* 모드탭은 padding 이 14px 이므로 골드 밑줄 inset 도 14px 로 맞춘다. .subtabs 기본값 16px 을 그대로 두면 밑줄이 글자보다 짧아진다(헤더 탭에서 겪은 것과 같은 함정). */ .sim-modetabs button.active::after { left: 14px; right: 14px; } /* 시뮬레이션은 1차 메뉴(서브탭 바 없음) → 모드탭을 헤더 바로 아래에 고정하고 초기(스크롤 0) 위치가 붙은 위치와 같도록 음수 마진으로 main 상단 패딩을 상쇄 */ #sub-simulation .sim-modetabs { top: auto; margin-top: 0; } /* 모드 탭이 있는 패널의 컨트롤 고정 위치는 모드 탭(높이 ≈37px) 바로 아래에 붙인다. +44px 이던 시절 모드탭 하단(≈header+37)과 7px 틈이 생겨 스크롤 시 배경이 비쳤다 → +37px로 밀착. */ #sub-simulation .bt-sticky-controls { top: calc(var(--header-h, 96px) + 37px); } /* 모드탭(회차·반복)과 '반복횟수' 컨트롤 사이의 빈 간격 제거: 모드탭은 스와이프 때 고정이고 그 아래 패널만 미끄러지므로, 이 틈이 있으면 메인 배경이 비쳐 보인다. 모드탭 아래 여백(16px)과 컨트롤 기본 위 여백(.section-title 30px)을 0 으로 붙여 틈을 없앤다(고정 시 위치와도 일치). */ #sub-simulation .sim-modetabs { margin-bottom: 14px; } #sub-simulation .simmode-panel > .bt-sticky-controls { margin-top: 0; } .simmode-panel { display: none; } .simmode-panel.active { display: block; animation: rise 0.28s var(--ease); } .grid { display: grid; gap: 16px; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); } .card h3 { font-size: 1rem; } .card .big { font-size: 1.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; } /* 검증리포트 '가중 종합 상위 N번호'의 'n / 6 포함': 작게 + 주황 글씨 + 우측 정렬 */ .card .big.bt-match-count { font-size: 1rem; font-weight: 800; color: var(--orange); margin-left: auto; text-align: right; letter-spacing: 0; } .card .sub { color: var(--muted); font-size: 0.8rem; } .section-title { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; } .section-title h2 { margin: 0; font-size: 1.1rem; } .badge { font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-weight: 550; } /* 분석 실행 경과시간 배지: 상태 배지(진행 중/완료) 바로 옆. 1초마다 숫자만 바뀌므로 폭이 흔들리지 않게 tabular-nums 로 자릿수 폭을 고정한다. */ .elapsed-badge { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--gold-2); } /* 규칙찾기가 워커(병렬)로 도는지 표시. iOS 실기기는 개발자 도구로 붙을 수 없어 이 배지가 병렬 실행 여부를 확인하는 유일한 근거다. */ .worker-badge { margin-left: 6px; color: var(--gold-2); } .worker-badge.off { color: var(--muted); opacity: 0.85; } /* 규칙찾기 '탐색 진행' 헤더: 제목 없이 배지만 놓인다(모바일에서 제목까지 넣으면 줄이 넘친다). 평가 횟수·경과시간은 자릿수가 계속 늘어나므로(평가 1234회 / 12분 34초) 줄바꿈을 막고 글자 크기를 줄여 흡수한다 — 줄 수가 바뀌면 아래 목록이 통째로 밀려 눈에 거슬린다. */ .seq-live-head { flex-wrap: nowrap; justify-content: flex-end; gap: 4px; margin-bottom: 10px; min-width: 0; } .seq-live-head .badge { white-space: nowrap; margin-left: 0; } @media (max-width: 560px) { .seq-live-head .badge { font-size: 0.62rem; padding: 2px 7px; } } @media (max-width: 380px) { .seq-live-head .badge { font-size: 0.56rem; padding: 2px 5px; letter-spacing: -0.02em; } } .badge.type-number { color: var(--brand); background: var(--brand-soft); border-color: transparent; } .badge.type-combo { color: var(--gold); background: var(--gold-soft); border-color: transparent; } .selected-rule-badge { display: inline-flex; align-items: center; max-width: 260px; min-height: 24px; padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rulesel) 32%, transparent); background: var(--rulesel-soft); color: var(--rulesel-strong); font-size: 0.74rem; font-weight: 750; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .selected-rule-badge[hidden] { display: none !important; } /* ⚠ 배지는 inline-flex 라 안의 텍스트가 '익명 flex 아이템'이 된다 → 배지 자신에 건 text-overflow:ellipsis 가 먹지 않아 글자가 말줄임 없이 중간에서 뚝 잘렸다. → 이름만 별도 span(.srb-text)으로 감싸 그 안에서 말줄임 처리하고, 배지를 누르면 전체 적용 규칙을 팝업으로 보여준다(모든 메뉴 공통). */ .selected-rule-badge { gap: 4px; } /* 규칙 이름을 담은 배지만 눌러서 볼 수 있다(#seqRuleBadge 처럼 통계만 쓰는 배지는 제외) */ .selected-rule-badge[data-rule-name] { cursor: pointer; } .selected-rule-badge .srb-lbl { flex: 0 0 auto; } .selected-rule-badge .srb-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selected-rule-badge .srb-eye { flex: 0 0 auto; font-size: 0.68rem; opacity: 0.75; } .selected-rule-badge[data-rule-name]:hover { filter: brightness(0.97); } @media (max-width: 560px) { .selected-rule-badge { max-width: min(260px, 72vw); font-size: 0.7rem; } } .rule-modified-tag { color: var(--danger); font-weight: 800; margin-left: 1px; } /* 규칙찾기에서 불러온 규칙 배지: 위 '선택 규칙' 배지 바로 아래 줄에(같은 flex 줄바꿈 컨테이너에서 flex-basis 100%로 강제 줄바꿈) */ .selected-rule-badge.seq-origin-badge { flex: 1 0 100%; max-width: 100%; margin-top: 4px; white-space: normal; } /* ---------- 히어로 ---------- */ /* (구 .hero 카드 스타일 제거 — 홈 히어로는 시안 컴포넌트 블록의 .hero 가 담당한다. 구 규칙의 background:var(--brand-soft) 가 시안 히어로에 골드 배경을 덧칠하고 있었음) */ /* ---------- 대시보드(홈) ---------- */ .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .dash-title { font-size: 1.5rem; margin: 0 0 2px; } .dash-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .dash-latest { display: flex; flex-direction: column; justify-content: center; } .dash-latest-title { font-size: 1rem; font-weight: 750; color: var(--text); } .dash-latest-balls .ball { width: 32px; height: 32px; font-size: 0.8rem; } .dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); } .tile .t-label { font-size: 0.76rem; color: var(--muted); } .tile .t-val { font-size: 1.45rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-top: 3px; line-height: 1.2; } .tile .t-sub { font-size: 0.72rem; color: var(--faint); margin-top: 2px; } /* 규칙관리 전용(유일 사용처). 카드가 3개인데 2열이라 2+1 로 어긋나 있었다 → 폭에 맞춰 3/2/1열. 시안은 서브탭으로 한 번에 하나만 보여주지만, 목록이 각 10개 이하로 짧아 한눈에 놓고 보는 편이 낫다. */ .dash-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; } .card-head h3 { margin: 0; font-size: 0.98rem; } .bt-target-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .dash-reco { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .dash-reco:last-child { border-bottom: none; } .dash-reco .rank { font-weight: 750; color: var(--gold); min-width: 26px; font-size: 0.9rem; } .dash-reco .score-badge { margin-left: auto; background: var(--brand-soft); color: var(--brand-strong); border-radius: 999px; padding: 4px 11px; font-weight: 700; font-size: 0.78rem; } .dash-reco .btn.mini { flex: none; } .dash-flow-table .ball.sm { width: 24px; height: 24px; font-size: 0.68rem; } .dash-flow-table td { padding-top: 10px; padding-bottom: 10px; } .bt-target-balls .ball, .sim-target-balls .ball { width: 30px; height: 30px; font-size: 0.76rem; } /* 모바일: 기준 발표번호를 한 줄에 가득 채우고 숫자를 키운다(균등 신축) */ @media (max-width: 560px) { .bt-target-balls, .sim-target-balls { gap: 5px; flex-wrap: nowrap; } .bt-target-balls .ball, .sim-target-balls .ball { flex: 1 1 0; min-width: 0; width: auto; height: 40px; font-size: 1.05rem; } .bt-target-balls .ball.plus, .sim-target-balls .ball.plus { flex: 0 0 auto; } } /* ---------- 로또 번호 (시안: 공 스타일 금지 · 구간별 색이 들어간 숫자만) ---------- * 시안 규격: 배경·테두리·그림자 없이 굵은 컬러 숫자(tabular-nums)로만 표시. * 구간색은 --r0~--r4 (1-9 / 10s / 20s / 30s / 40+). * * ⚠ 구현 메모: 기존 마크업 전체가 .ball / .ball.sm / .ball.cN 을 쓰고, JS 도 * button.ball[data-mnum]·.sel·.dim 을 셀렉터로 잡는다. 그래서 클래스명을 갈아엎지 않고 * .ball 자체를 "컬러 숫자"로 재정의한다 → 73곳의 호출부와 JS 배선이 그대로 살아난다. * 새로 만드는 화면은 시안 이름(.num/.nums + data-r)을 쓰고, 아래에서 두 계열을 함께 정의한다. * ⚠ .cN(=colorClass) 은 이제 표시 전용 구간(1-9/10-19/…)이다. * 분석용 Analysis.rangeIndex(1-10/11-20/…)와 경계가 다르니 섞지 말 것. */ .balls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .nums { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .ball, .num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 34px; width: auto; font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--nc, var(--ink)); background: none; border: none; border-radius: 0; box-shadow: none; transition: transform 0.16s; } .ball:hover, .num:hover { transform: translateY(-3px) scale(1.08); } /* 구간색: 표시 전용(.cN 는 레거시 마크업용, [data-r] 은 시안 표준) */ .ball.c1, .num[data-r="0"] { --nc: var(--r0); } .ball.c2, .num[data-r="1"] { --nc: var(--r1); } .ball.c3, .num[data-r="2"] { --nc: var(--r2); } .ball.c4, .num[data-r="3"] { --nc: var(--r3); } .ball.c5, .num[data-r="4"] { --nc: var(--r4); } /* 네이비 카드 위에서는 밝은 변형(시안) */ .num.on-navy[data-r="0"] { --nc: oklch(0.72 0.11 258); } .num.on-navy[data-r="1"] { --nc: oklch(0.72 0.15 258); } .num.on-navy[data-r="2"] { --nc: oklch(0.78 0.13 235); } .num.on-navy[data-r="3"] { --nc: oklch(0.82 0.15 85); } .num.on-navy[data-r="4"] { --nc: oklch(0.76 0.15 55); } /* 크기 변형(시안) — .ball 기본=시안 num-sm, .ball.sm=시안 num-xs 로 대응해 기존 밀도를 유지 */ .num { min-width: 40px; height: 52px; font-size: 32px; animation: numPop 0.55s both; } .num-md { min-width: 30px; height: 44px; font-size: 27px; } .num-sm { min-width: 24px; height: 34px; font-size: 20px; animation-delay: 0s !important; } .num-xs { min-width: 20px; height: 30px; font-size: 17px; animation-delay: 0s !important; } .ball.sm { min-width: 20px; height: 30px; font-size: 17px; } /* 등장 스태거(시안): .nums 안의 큰 숫자에만 */ .nums .num:nth-child(1) { animation-delay: 0.04s; } .nums .num:nth-child(2) { animation-delay: 0.1s; } .nums .num:nth-child(3) { animation-delay: 0.16s; } .nums .num:nth-child(4) { animation-delay: 0.22s; } .nums .num:nth-child(5) { animation-delay: 0.28s; } .nums .num:nth-child(6) { animation-delay: 0.34s; } .nums .num:nth-child(7) { animation-delay: 0.42s; } .ball.plus, .plus { background: none; color: oklch(0.75 0.02 258); box-shadow: none; border: none; font-weight: 900; font-size: 22px; } .ball.plus:hover, .plus:hover { transform: none; } .ball.dim, .num.dim { opacity: 0.32; } .bonus-lbl { font-size: 10px; color: oklch(0.75 0.02 258); align-self: flex-end; margin-bottom: 5px; font-weight: 700; } /* 클릭 가능한 번호(기준 발표번호·가중종합 상위10 → 기여 지표 토글) */ button.ball, button.num { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0; } button.ball:hover, button.num:hover { filter: brightness(1.15); } button.ball.sel, button.num.sel { box-shadow: inset 0 -3px 0 0 var(--gold); } @media (max-width: 760px) { .num { min-width: 32px; height: 44px; font-size: 26px; } } .analysis-number-frequency { margin: 12px 0 2px; padding: 9px 11px; border-radius: 9px; background: var(--surface-2); font-size: 0.82rem; } /* ===================== 주기 분석 ===================== */ .cycle-section { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; } .cyc-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; user-select: none; -webkit-tap-highlight-color: transparent; } .cyc-summary::-webkit-details-marker { display: none; } .cyc-sec-title { font-size: 1rem; font-weight: 700; } .cyc-sec-caret { color: var(--muted); font-size: 0.8rem; transition: transform 0.18s ease; } .cycle-section[open] > .cyc-summary .cyc-sec-caret { transform: rotate(180deg); } .cycle-section[open] > .cyc-summary { border-bottom: 1px solid var(--border); } .cycle-section .cyc-note { font-size: 0.78rem; color: var(--muted); margin: 10px 14px 8px; } .cycle-grid { display: flex; flex-direction: column; padding: 0 10px 8px; } .cyc-row { border-bottom: 1px solid var(--border); } .cyc-row:last-child { border-bottom: none; } .cyc-item { width: 100%; font: inherit; color: inherit; text-align: left; -webkit-appearance: none; appearance: none; background: none; border: none; border-left: 3px solid transparent; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; } .cyc-item:hover:not(:disabled) { background: var(--surface-2); } .cyc-item:disabled { cursor: default; opacity: 0.55; } .cyc-item .cyc-label { font-size: 0.85rem; font-weight: 700; color: var(--brand-strong); display: flex; align-items: center; gap: 6px; min-width: 0; } .cyc-caret { font-size: 0.7rem; color: var(--muted); transition: transform 0.15s; } .cyc-item.cyc-open .cyc-caret { transform: rotate(180deg); } .cyc-meta { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; flex: 0 0 auto; } .cyc-item .cyc-value { font-size: 0.92rem; font-weight: 800; } .cyc-item .cyc-sub { font-size: 0.74rem; color: var(--muted); } .cyc-item.cyc-short { border-left-color: var(--save); padding-left: 8px; } .cyc-item.cyc-short .cyc-value { color: var(--save-strong); } .cyc-item.cyc-long { border-left-color: var(--brand-strong); padding-left: 8px; } .cyc-item.cyc-long .cyc-value { color: var(--brand-strong); } .cyc-item .cyc-tag { font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .cyc-item.cyc-short .cyc-tag { color: var(--save-strong); background: var(--save-soft); } .cyc-item.cyc-long .cyc-tag { color: var(--brand-strong); background: var(--brand-soft); } .cyc-detail { padding: 8px 10px 12px; background: var(--surface-2); } .cyc-detail-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; } .cyc-hits { display: flex; flex-wrap: wrap; gap: 5px; } .cyc-hit { font-size: 0.76rem; padding: 2px 7px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; } .cyc-hit em { font-style: normal; color: var(--muted); font-weight: 700; margin-left: 3px; } .cyc-hit.cyc-hit-short { border-color: var(--save); background: var(--save-soft); } .cyc-hit.cyc-hit-short em { color: var(--save-strong); } .cyc-hit.cyc-hit-long { border-color: var(--brand-strong); background: var(--brand-soft); } .cyc-hit.cyc-hit-long em { color: var(--brand-strong); } .cyc-hit.cyc-hit-none { border-style: dashed; background: var(--surface-2); color: var(--muted); } .cyc-hit.cyc-hit-none em { color: var(--muted); } /* 검증 최근추첨조합: 조합별 카드(번호 클릭 시 기여 지표 박스가 아래로 펼쳐짐) */ .bt-combo-card { display: flex; flex-direction: column; gap: 6px; } .bt-combo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* ---------- 컨트롤(버튼/토글/슬라이더) ---------- */ button.btn { font-size: 0.9rem; font-weight: 600; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); transition: background 0.16s var(--ease), transform 0.08s var(--ease), box-shadow 0.16s var(--ease), border-color 0.16s var(--ease); } button.btn:hover { background: var(--surface-2); border-color: var(--border-strong); } button.btn:active { transform: translateY(1px); } button.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px var(--shadow-brand); } button.btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } button.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); } button.btn.ghost:hover { background: var(--surface-2); color: var(--text); } button.btn.mini { padding: 6px 12px; font-size: 0.76rem; border-radius: var(--radius-xs); } button.btn:disabled { opacity: 0.5; cursor: not-allowed; } .control-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 0.8rem; color: var(--muted); font-weight: 550; } /* 라벨을 콤보박스 옆(가로)으로 배치 */ .field.field-inline { flex-direction: row; align-items: center; gap: 8px; } .field.field-inline label { white-space: nowrap; } .field.field-inline .range-custom { width: 92px; } .field.field-inline #simCountCustom { width: 92px; } /* '규칙적용 회차' 콤보박스 가로 축소 — 모든 메뉴 공통(.range-sel). '전체 회차'가 안 잘리는 최소폭 */ .field.field-inline .range-sel { width: 104px; box-sizing: border-box; } select, input[type="text"], input[type="number"] { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 10px 12px; font-size: 0.9rem; font-family: inherit; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } select:focus, input[type="text"]:focus, input[type="number"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* 분석 대상 회차 콤보박스·규칙선택 버튼 등 컨트롤 높이 통일 (모든 탭) */ .control-row select, .control-row input[type="text"], .control-row input[type="number"], .control-row button.btn:not(.mini) { height: 42px; box-sizing: border-box; } .control-row button.btn:not(.mini) { display: inline-flex; align-items: center; justify-content: center; } /* 최신 회차 새로고침 버튼 (콤보박스 옆 아이콘) */ button.btn.range-refresh { width: 42px; padding: 0; font-size: 1.1rem; line-height: 1; flex: 0 0 auto; } button.btn.range-refresh.spin { animation: refresh-spin 0.8s linear infinite; } @keyframes refresh-spin { to { transform: rotate(360deg); } } input[type="range"] { accent-color: var(--brand); width: 140px; } .range-stepper { display: flex; align-items: center; gap: 8px; } .range-stepper input[type="range"] { width: 160px; } .range-stepper .btn.mini { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } /* 토글 스위치 */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background 0.2s var(--ease); } .switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 0.22s var(--ease); } .switch input:checked + .slider { background: var(--brand); } .switch input:checked + .slider::before { transform: translateX(18px); } /* ---------- 규칙 패널 ---------- */ .rule-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .rule-cat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); } .rule-cat header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .rule-cat header h4 { margin: 0; font-size: 0.95rem; } .rule-cat .cat-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .group-result-wrap { margin: 8px 0 4px; } .group-result { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: 0.78rem; } .group-result.muted { color: var(--faint); } .group-meta { color: var(--muted); line-height: 1.45; } .group-line { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .group-line > span { color: var(--faint); min-width: 86px; } .group-line em { color: var(--brand); font-style: normal; font-weight: 700; } .rule { display: grid; grid-template-columns: auto 1fr minmax(220px, auto); align-items: start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); } .rule .rule-name { font-size: 0.86rem; color: var(--text-2); } .rule .rule-name small { display: block; color: var(--faint); font-size: 0.72rem; } .rule-result { margin-top: 8px; } .rule-preview { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; color: var(--muted); font-size: 0.72rem; max-width: 100%; } .rule-preview > span { color: var(--faint); flex: 0 0 auto; white-space: nowrap; } .rule-preview .balls, .group-line .balls { flex: 0 0 auto; flex-wrap: nowrap; } .rule-preview em { color: var(--brand); font-style: normal; font-weight: 700; flex: 0 0 auto; } .selected-rule-preview { margin-top: 14px; } .all-number-preview { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ranked-ball { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .ranked-ball em { min-width: 18px; color: var(--faint); font-style: normal; font-size: 0.68rem; text-align: right; } .ranked-ball b { min-width: 24px; color: var(--brand); font-size: 0.68rem; text-align: right; } .rule .weight { display: flex; align-items: center; gap: 8px; padding-top: 2px; } .rule .weight .weight-caption { color: var(--faint); font-size: 0.72rem; white-space: nowrap; } .rule .weight .wval { width: 20px; text-align: right; color: var(--brand); font-weight: 700; font-size: 0.82rem; } .rule .weight .wtext { min-width: 62px; color: var(--muted); font-size: 0.72rem; white-space: nowrap; } /* ---------- 검증 탭: 장기 경향 표 ---------- */ .bt-rule-table td { vertical-align: middle; } .bt-rule-table .bt-cat-row td { color: var(--muted); font-size: 0.78rem; font-weight: 700; background: var(--surface); padding-top: 12px; } .bt-rule-table .bt-rule-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .bt-rule-table tr.bt-off { opacity: 0.5; } .bt-wcell { display: flex; align-items: center; gap: 8px; } .bt-wcell .bt-wrange { flex: 0 0 100px; max-width: 120px; } .bt-wcell .wval { width: 18px; text-align: right; color: var(--brand); font-weight: 700; font-size: 0.82rem; } .bt-rule-table .switch { display: inline-flex; } @media (max-width: 640px) { .bt-wcell .bt-wrange { flex: 1 1 80px; } } /* ---------- 접이식 섹션(추천 조합) ---------- */ .collapse { margin-top: 20px; } .collapse-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 18px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow-sm); } .collapse-head:hover { border-color: var(--border-strong); } .collapse-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; } /* 추천 엔진 배지(콤보박스처럼 보이는 것): 주황색 */ .collapse-title .badge { background: var(--orange); color: #fff; border-color: transparent; } /* 모바일: '최근 추첨 조합 시뮬레이션' 제목+배지를 한 줄로(글자 축소, 배지는 넘치면 …) */ @media (max-width: 560px) { .collapse-head { flex-wrap: nowrap; } .collapse-title { font-size: 0.8rem; gap: 5px; flex-wrap: nowrap; min-width: 0; white-space: nowrap; overflow: hidden; } .collapse-title .badge { font-size: 0.56rem; padding: 2px 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .collapse-caret { color: var(--muted); font-size: 0.9rem; transition: transform 0.18s ease; } .collapse.open .collapse-caret { transform: rotate(180deg); } .collapse-body { display: none; margin-top: 12px; } .collapse.open .collapse-body { display: block; } /* ---------- 규칙 추가/삭제 팝업(모달) ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(30, 22, 16, 0.42); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay[hidden] { display: none; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column; padding: 20px 22px; } /* ---- 규칙 모달(반복분석·회차분석 규칙, 규칙찾기 규칙 순서): 팝업 대신 하단→위 슬라이드 바텀시트 ---- */ .modal-overlay.sheet-modal { align-items: flex-end; padding: 0; /* 배경(어둠)도 패널 슬라이드와 같은 0.46s 동안 서서히 나타나게 → 한번에 확 켜지지 않음 */ animation: sheetFadeIn 0.46s cubic-bezier(0.22, 0.72, 0, 1); } @keyframes sheetFadeIn { from { background: rgba(30, 22, 16, 0); } to { background: rgba(30, 22, 16, 0.42); } } .modal-overlay.sheet-modal .modal { width: 100%; max-width: 720px; max-height: 92vh; border-radius: 16px 16px 0 0; border-bottom: none; /* 하단 버튼(적용/취소)이 아이폰 홈 인디케이터에 가리지 않도록 */ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); /* 삼발이 드로어(0.46s)와 동일한 속도·이징으로 슬라이드 업 */ animation: sheetSlideUp 0.46s cubic-bezier(0.22, 0.72, 0, 1); } @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* 규칙 스튜디오 모달만 목업(rule-studio)에 맞춰 넓게(2열 카드가 여유롭게) */ #mainRuleModal .modal { max-width: 960px; } /* 슬라이드 다운 닫힘: .closing 을 붙였다가 애니메이션 끝나면 hidden 처리. 열림과 대칭되게 부드럽게 */ .modal-overlay.sheet-modal.closing .modal { animation: sheetSlideDown 0.42s cubic-bezier(0.22, 0.72, 0, 1) forwards; } .modal-overlay.sheet-modal.closing { background: transparent; transition: background 0.42s cubic-bezier(0.22, 0.72, 0, 1); } @keyframes sheetSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } @media (max-width: 560px) { /* 모바일: 좌우 여백 없이 화면 폭 가득 채움 */ .modal-overlay.sheet-modal .modal { max-width: 100%; border-radius: 14px 14px 0 0; } } /* 메모 시트: 화면의 절반보다 조금 더 크게 */ #memoSheet .modal { min-height: 62vh; } /* 메모 시트: '한번에 확' 뜨지 않고 더 천천히·부드럽게 열리고 닫히도록(열림·닫힘 대칭) */ #memoSheet.sheet-modal { animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.22, 0.72, 0, 1); } #memoSheet.sheet-modal .modal { animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.22, 0.72, 0, 1); } #memoSheet.sheet-modal.closing { transition-duration: 0.42s; } #memoSheet.sheet-modal.closing .modal { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.22, 0.72, 0, 1); } /* 메모 목록: 빈 곳/끝을 드래그해도 뒤 배경(메인 화면)이 스크롤·스와이프되지 않도록 스크롤 체이닝 차단 */ #memoSheet .modal-scroll { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } /* 메모 작성/편집 시트: 내용(textarea) 스크롤이 모바일에서 막히지 않도록 명시 지정(목록과 동일 처리) */ #memoEditModal .modal-scroll { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } #memoEditModal #memoBodyInput { touch-action: pan-y; -webkit-overflow-scrolling: touch; } /* 저장한 메모를 열어볼 때 내용 상자가 시트 높이를 채우고, 넘치면 상자 안에서 스크롤되게. (rows=8 고정이라 상자가 작고, 넘친 내용이 잘려 보이던 문제) */ #memoEditModal .modal { min-height: 60vh; } #memoEditModal .modal-scroll { display: flex; flex-direction: column; } #memoEditModal .modal-scroll > .field { flex: 0 0 auto; } #memoEditModal .modal-scroll > .field:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #memoEditModal #memoBodyInput { flex: 1 1 auto; min-height: 32vh; overflow-y: auto; overscroll-behavior: contain; resize: none; } /* 규칙 모달 제목 옆 '적용 규칙 수' 배지: (n개 / 총x개) */ .rule-count-inline { font-size: 0.72rem; font-weight: 700; color: var(--brand-strong); letter-spacing: -0.01em; white-space: nowrap; } /* 시트 헤더: 아래로 끌어 닫기 그립 + 세로 스크롤 대신 드래그 우선 */ .modal-overlay.sheet-modal .modal-head { position: relative; padding-top: 18px; touch-action: none; -webkit-user-select: none; user-select: none; } .modal-overlay.sheet-modal .modal-head::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--border, #d8d2ca); opacity: 0.9; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .modal-head h3 { margin: 0; } .modal-x { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-xs); } .modal-x:hover { background: var(--surface-2); color: var(--text); } /* 전체켜기/끄기 등: 잘 보이게 네모박스로 감쌈 */ .modal-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 8px 0 4px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-2); flex-wrap: wrap; } /* 규칙 모달: '적용'이 모든 메뉴에 공통 반영된다는 안내(푸터 위) */ .modal-apply-note { margin: 6px 16px 0; font-size: 0.76rem; line-height: 1.45; color: var(--muted); } /* 규칙적용 회차: 규칙 팝업 안으로 이동한 필드 */ .modal-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; } .modal-range-count { margin-left: auto; font-size: 0.8rem; white-space: nowrap; } /* x/y개 선택: 규칙적용회차 줄 우측 */ /* 규칙 모달 내부 스크롤: 전체켜기 라인만 상단 고정, 규칙적용회차·불러오기·선택규칙은 함께 스크롤 */ .modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* 종합규칙적중: 팝업 맨 아래(적용 아래)에 항상 고정 */ .modal-bottom-hit { flex: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); background: var(--surface); } .modal-range > label { font-size: 0.82rem; font-weight: 700; color: var(--text-2); white-space: nowrap; } /* 저장한 규칙 불러오기 바 — 저장 계열(청록)로 통일해 오렌지 테마와 충돌 없이 눈에 띄게 */ .modal-load { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-left: 3px solid var(--brand); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); } .modal-load-label { font-size: 0.82rem; font-weight: 700; color: var(--brand-strong); white-space: nowrap; } /* 불러오기 콤보 아래 "선택 규칙: … [취소]" 행 (상하 크기 축소) */ .modal-selected-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; padding: 3px 12px; border-radius: var(--radius-xs); background: var(--brand-soft); border: 1px solid transparent; } .modal-selected-label { font-size: 0.82rem; font-weight: 650; color: var(--text); } .modal-selected-label b { color: var(--brand-strong); } .modal-selected-row[hidden] { display: none !important; } /* 규칙변경 버튼: 선택 규칙 오른쪽에 하이라이트(밝은 보라)로 배치 */ button.btn.mini.modal-selected-change { padding: 3px 12px; background: #7c5cff; border-color: #7c5cff; color: #fff; font-weight: 800; box-shadow: 0 4px 12px -4px rgba(124, 92, 255, 0.6); } button.btn.mini.modal-selected-change:hover { background: #6a49f0; border-color: #6a49f0; } /* 취소 버튼: 잘 보이게 주황 하이라이트 */ button.btn.mini.modal-selected-cancel { margin-left: auto; padding: 3px 12px; background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 800; box-shadow: 0 4px 12px -4px var(--brand); } button.btn.mini.modal-selected-cancel:hover { background: var(--brand-strong); border-color: var(--brand-strong); } /* ---- 공유된 규칙 받기 모달(위→아래 슬라이드, 보기 전용) ---- */ .share-overlay { align-items: flex-start; } .share-modal { animation: shareSlideDown 0.3s cubic-bezier(0.22, 0.72, 0, 1); transform-origin: top center; } @keyframes shareSlideDown { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .share-title { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 1.02rem; } .share-rule-name { color: var(--brand-strong); background: var(--brand-soft); padding: 2px 11px; border-radius: 999px; font-weight: 800; } .share-rule-count { font-size: 0.82rem; font-weight: 600; } .share-login-note { margin: 4px 0 10px; font-size: 0.8rem; } .share-scroll { border-top: 1px solid var(--border); padding-top: 12px; } .share-rule-list { display: flex; flex-direction: column; gap: 12px; } .share-cat-name { font-size: 0.76rem; font-weight: 800; color: var(--brand-strong); margin-bottom: 5px; letter-spacing: -0.01em; } .share-rule-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); margin-bottom: 5px; } .share-rule-nm { font-size: 0.85rem; font-weight: 650; color: var(--text); } .share-rule-wt { font-size: 0.78rem; font-weight: 700; color: var(--brand-strong); white-space: nowrap; } .modal-load-sel { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer; } .modal-load-sel:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent); } .modal-load-sel:disabled { opacity: 0.55; cursor: default; } /* 회차/반복분석 화면의 인라인 저장규칙 선택 바 */ .saved-rule-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; } .saved-rule-bar > label { flex: none; font-size: 0.84rem; font-weight: 750; color: var(--brand-strong); } .saved-rule-sel { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--rulesel); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer; } .saved-rule-sel:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rulesel) 24%, transparent); } .saved-rule-sel:disabled { opacity: 0.55; cursor: default; } /* 저장규칙 콤보 축소형 + 최근규칙 불러오기 버튼 */ .saved-rule-sel-sm { flex: 0 1 auto; width: auto; max-width: 200px; } .recent-rule-btn { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--rulesel); background: var(--rulesel-soft); color: var(--rulesel-strong); font-weight: 700; } .recent-rule-btn:hover { background: var(--rulesel); border-color: transparent; color: var(--surface); } .recent-rule-btn-sm { padding: 5px 8px; font-size: 0.72rem; } .modal-body { padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; } .modal-section-divider { display: flex; align-items: center; gap: 10px; margin: 14px 2px 6px; font-size: 0.8rem; font-weight: 700; color: var(--brand-strong); text-transform: none; } .modal-section-divider::before, .modal-section-divider::after { content: ""; height: 1px; background: var(--border-strong); flex: 1 1 auto; } .modal-cat { min-width: 0; } .modal-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .modal-cat-head h4 { margin: 0; font-size: 0.85rem; } .modal-cat-head .cat-actions { display: flex; gap: 4px; } .modal-rule { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radius-xs); border: 1px solid transparent; } .modal-rule:hover { background: var(--surface-2); } .modal-rule.on { background: var(--brand-soft); border-color: var(--brand-soft); } /* 불러온 규칙에서 달라진 지표: 눈에 띄게 강조(#5·#6) */ .modal-rule.rule-diff { background: var(--rule-diff-bg); border-color: var(--danger); } .rule-diff-tag { flex: 0 0 auto; font-size: 0.62rem; font-weight: 800; color: #fff; background: var(--danger); border-radius: 999px; padding: 1px 6px; letter-spacing: -0.02em; align-self: center; } .rule-diff-tag[hidden] { display: none; } .modal-rule-main { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .modal-rule-main input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; accent-color: var(--brand); } .modal-rule-txt { display: flex; align-items: baseline; gap: 10px; font-size: 0.85rem; min-width: 0; line-height: 1.35; } .modal-rule-txt b { flex: 0 0 auto; font-size: 0.85rem; font-weight: 650; color: var(--text); } .modal-rule-txt small { color: var(--muted); font-size: 0.72rem; min-width: 0; } .modal-rule-w { display: flex; align-items: center; gap: 8px; padding-left: 24px; } .modal-rule-w .modal-w-label { color: var(--faint); font-size: 0.72rem; white-space: nowrap; } .modal-rule-w .bt-wrange { flex: 1 1 auto; max-width: 130px; } .modal-rule-w .wval { color: var(--brand); font-weight: 700; font-size: 0.8rem; width: 16px; text-align: center; } .modal-rule-w input[disabled] { opacity: 0.4; } .modal-rule-w .wstep { flex: 0 0 auto; min-width: 34px; min-height: 32px; padding: 4px 9px; font-weight: 700; line-height: 1; touch-action: manipulation; } .modal-rule-w .wstep:disabled { opacity: 0.4; cursor: default; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); } .validation-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--muted); font-size: 0.8rem; } .validation-inline b { color: var(--text); font-weight: 750; } .validation-inline .rule-open-toggle { margin-left: auto; } .rule-hit-help { flex: 1 0 100%; margin-top: 2px; } .rule-hit-help > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; color: var(--brand-strong); font-size: 0.76rem; font-weight: 750; } .rule-hit-help > summary::-webkit-details-marker { display: none; } .rule-hit-help > summary::before { content: "▸"; font-size: 0.68rem; } .rule-hit-help[open] > summary::before { content: "▾"; } .rule-hit-help p { margin: 7px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; } @media (max-width: 560px) { .modal-body { grid-template-columns: 1fr; } } /* ===================== 규칙 스튜디오(모달) — rule-studio 목업 ===================== */ #mainModalBody { display: block; padding: 6px 0 0; } /* 활성 규칙 요약: 접이식(기본 닫힘) — 헤더 토글 + 칩 행 */ .rs-summary { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); } .rs-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rs-merge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft, var(--muted)); white-space: nowrap; } .rs-merge select { font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; cursor: pointer; } .rs-merge select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent); } .rs-sum-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; padding: 0; } .rs-sum-toggle b { color: var(--brand-strong); font-size: 1.1rem; font-variant-numeric: tabular-nums; } .rs-sum-toggle .rs-caret { color: var(--muted); font-size: 0.78rem; transition: transform .16s var(--ease); } .rs-sum-toggle.open .rs-caret { transform: rotate(180deg); } .rs-chiprow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; } .rs-chiprow[hidden] { display: none; } .rs-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); color: var(--ink); border-radius: 999px; padding: 4px 5px 4px 11px; font-size: 0.82rem; font-weight: 600; } .rs-chip .rs-w { font-size: 0.7rem; font-weight: 700; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 6px; padding: 1px 5px; font-variant-numeric: tabular-nums; } .rs-chip .rs-x { cursor: pointer; color: var(--muted); border: 0; background: none; font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 4px; } .rs-chip .rs-x:hover { color: var(--ink); } .rs-chip-empty { color: var(--muted); background: transparent; border-style: dashed; font-weight: 500; } .rs-seg { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; margin: 0 0 14px; position: sticky; top: 0; z-index: 2; } .rs-seg button { flex: 1; font: inherit; font-size: 0.85rem; font-weight: 700; border: 0; background: none; color: var(--muted); padding: 8px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .rs-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .rs-seg .rs-n { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; } .rs-seg button[aria-selected="true"] .rs-n { color: var(--brand-strong); } .rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } @media (max-width: 620px) { .rs-grid { grid-template-columns: 1fr; } } .rs-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 12px 13px; transition: border-color .15s, background .15s, box-shadow .15s, opacity .15s; } .rs-card.on { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent) inset; } .rs-card.off { opacity: 0.66; } .rs-card.locked { opacity: 0.6; } .rs-card-top { display: flex; align-items: flex-start; gap: 10px; } .rs-card-h { min-width: 0; flex: 1; } .rs-name { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text); } .rs-info { border: 0; background: var(--surface-2); color: var(--muted); width: 18px; height: 18px; border-radius: 50%; font-size: 0.72rem; cursor: pointer; line-height: 18px; text-align: center; flex: none; font-style: italic; font-family: Georgia, "Times New Roman", serif; } .rs-info:hover { color: var(--ink); } .rs-diff { font-size: 0.64rem; font-weight: 800; color: #241a05; background: var(--brand); border-radius: 5px; padding: 1px 5px; } .rs-lock { font-size: 0.66rem; font-weight: 700; color: var(--brand-strong); } .rs-lock.soft { color: var(--muted); } .rs-kind { font-size: 0.64rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin-top: 3px; font-weight: 700; } .rs-desc { color: var(--muted); font-size: 0.8rem; margin: 8px 0 0; display: none; line-height: 1.5; } .rs-desc.show { display: block; } .rs-sw { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; } .rs-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .rs-track { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; transition: .18s; } .rs-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--muted); border-radius: 50%; transition: .18s; pointer-events: none; } .rs-sw input:checked ~ .rs-track { background: color-mix(in srgb, var(--brand) 32%, var(--surface-2)); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .rs-sw input:checked ~ .rs-knob { left: 21px; background: var(--brand); } .rs-sw input:disabled { cursor: not-allowed; } .rs-weight { margin-top: 11px; display: none; } .rs-card.on .rs-weight { display: block; } .rs-wseg { display: flex; gap: 4px; } .rs-wseg button { flex: 1; font: inherit; font-size: 0.78rem; font-weight: 700; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 8px; padding: 6px 0; cursor: pointer; } .rs-wseg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #241a05; } .rs-wrow { display: flex; align-items: center; gap: 9px; margin-top: 8px; } .rs-wrow input[type=range] { flex: 1; accent-color: var(--brand); } .rs-val { font-size: 0.78rem; font-weight: 700; color: var(--brand-strong); width: 24px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- 규칙 편집기: 카테고리 접이식 ---------- */ .modal-cat-head { cursor: pointer; user-select: none; padding: 4px 2px; border-radius: var(--radius-xs); } .modal-cat-head:hover { background: var(--surface-2); } .modal-cat-title { display: flex; align-items: center; gap: 4px; min-width: 0; } .modal-cat-caret { color: var(--muted); font-size: 0.75rem; transition: transform 0.18s ease; flex: 0 0 auto; } .modal-cat.open .modal-cat-caret { transform: rotate(180deg); } .modal-cat-count { color: var(--muted); font-size: 0.7rem; font-weight: 650; white-space: nowrap; margin-left: 4px; } .modal-cat-body { display: none; flex-direction: column; gap: 6px; margin-top: 4px; } .modal-cat.open .modal-cat-body { display: flex; } /* ---------- 나의규칙 저장 버튼(청록) / 정지 / 삭제 ---------- */ button.btn.save-rule { background: var(--save); border-color: var(--save); color: #fff; box-shadow: 0 1px 2px rgba(47, 118, 108, 0.24); } button.btn.save-rule:hover { background: var(--save-strong); border-color: var(--save-strong); } button.btn.save-rule.saved { background: var(--save-soft); border-color: var(--save); color: var(--save-strong); box-shadow: none; } button.btn.stop, button.btn.stop-btn { background: var(--danger); border-color: var(--danger); color: #fff; } button.btn.stop:hover, button.btn.stop-btn:hover { background: #c5654c; border-color: #c5654c; } /* 분석중: 분석 버튼은 비활성(정지로 바뀌지 않음), 정지는 별도 버튼 */ button.btn.running, button.btn.primary:disabled { opacity: 0.6; cursor: default; } .seq-autoreorder { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 2px; font-size: 0.82rem; line-height: 1.45; color: var(--text-2); cursor: pointer; } .seq-autoreorder input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--orange); } .seq-autoreorder b { color: var(--text); } .seq-autoreorder .muted { margin-left: 4px; } button.btn.danger-btn { background: transparent; border-color: var(--danger); color: var(--danger); } button.btn.danger-btn:hover { background: var(--danger); color: #fff; } button.btn.danger-btn:disabled { opacity: 0.4; } /* ---------- 규칙 관리 목록 ---------- */ /* 저장된 규칙 목록 = 시안 `.card.lift`(호버 시 살짝 떠오르는 카드) + 메타는 `.chip.chip-line`. 메타를 CSS 로 칩처럼 보이게 해 두 렌더러(renderRuleSetList/renderSeqRuleSetList)의 마크업을 안 건드린다. */ .ruleset-list { display: flex; flex-direction: column; gap: 10px; } /* 나의 규칙 그룹(폴더) — 섹션 헤더 + 편집(선택→이동) UI */ .myrules-group { display: flex; flex-direction: column; gap: 10px; } .myrules-grouphd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid var(--line); border-radius: var(--radius-xs) var(--radius-xs) 0 0; } .myrules-grouphd.toggle { cursor: pointer; user-select: none; } .myrules-grouphd.toggle:hover { background: var(--surface-2); } /* 그룹은 폴더 타일로: 아이콘 위 · 그룹명 아래(작게). 열림(📂)/닫힘(📁)을 아이콘으로도 구분한다. 이름은 8글자 제한이지만 좁은 화면 대비로 넘치면 …로 줄인다. */ /* 폴더 타일: 가로로 나열하고 폭이 차면 다음 줄로 넘어간다(윈도우 탐색기 느낌). */ .myrules-folders { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 10px; } .myrules-folder { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 76px; padding: 8px 4px 6px; border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; cursor: pointer; user-select: none; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); } .myrules-folder:hover { background: var(--surface-2); border-color: var(--line); } .myrules-folder.open { background: var(--surface-2); border-color: var(--line-2); } /* 폴더 아이콘은 SVG — 이모지는 색을 지정할 수 없어 윈도우풍 노란색을 낼 수 없다. */ .myrules-folder-ico { width: 40px; height: 32px; display: block; } .myrules-folder-ico .fd-back { fill: #ffb02e; } .myrules-folder-ico .fd-front { fill: #ffc850; } .myrules-folder.open .fd-front { fill: #ffd77a; } .myrules-folder-name { max-width: 100%; font-size: 0.68rem; font-weight: 750; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .myrules-folder-cnt { font-size: 0.62rem; font-weight: 700; color: var(--muted); } /* 편집 모드: 이름 아래 '이름변경' 박스, 오른쪽 위 붉은 X(그룹 삭제) */ .myrules-folder-ren { margin-top: 3px; padding: 2px 6px; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); font-size: 0.6rem; font-weight: 800; cursor: pointer; } .myrules-folder-ren:hover { background: var(--brand); color: #fff; } .myrules-folder-x { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--danger, #c0392b); color: #fff; font-size: 0.66rem; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .myrules-folder-x:hover { filter: brightness(1.12); } /* 저장규칙 불러오기 커스텀 드롭다운(그룹 접기 가능). 숨긴 로 둔다. 대신 구조가 정확히 일치하는 기존 5버튼 '분석 회차'(.rwp-btns 10/20/30/40/50)에 이 룩을 입힌다. */ .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; flex-wrap: wrap; } .seg button { padding: 9px 15px; font-size: 13px; font-weight: 700; border: none; background: var(--surface); color: var(--ink-2); cursor: pointer; font-family: inherit; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .seg button + button { border-left: 1px solid var(--line-2); } .seg button:hover { background: var(--surface-2); color: var(--ink); } .seg button.active { background: var(--navy); color: #fff; } :root[data-theme="dark"] .seg button.active { background: var(--brand); color: #fff; } /* 프리미엄 잠금(.premium-locked → disabled)은 눌러도 반응이 없다. 그런데 기존 알약 스타일엔 :disabled 규칙이 아예 없어 활성 버튼과 똑같이(cursor:pointer 까지) 보였다 → 잠긴 티를 낸다. */ .seg button:disabled { opacity: 0.4; cursor: not-allowed; } .seg button:disabled:hover { background: var(--surface); color: var(--ink-2); } /* ---------- 표 (.tbl) ---------- 시안 .tbl 의 값은 이미 위쪽 기본 table/th/td 규칙으로 앱 전역에 적용돼 있다(마크업 무수정 이관). .tbl 은 시안 마크업을 그대로 붙여도 깨지지 않게 하는 별칭 + 표 고유의 좁은 min-width 만 담당. */ .tbl { min-width: 440px; } /* ---------- 히어로 ---------- */ .hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 44px; align-items: center; /* 배경(그라데이션)을 화면 좌우 끝까지 full-bleed 로 채운다: 음수 마진으로 뷰포트 전폭까지 넓히고, 좌우 padding(calc(50vw - 50%))으로 콘텐츠(글자·카드)는 본문 열 위치 그대로 유지 → 텍스트 위치 불변. */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(48px, 7vw, 96px) calc(50vw - 50%) clamp(56px, 6vw, 84px); } .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 18%, oklch(0.85 0.05 258 / 0.5), transparent 45%), radial-gradient(circle at 88% 62%, oklch(0.86 0.06 90 / 0.4), transparent 45%); } :root[data-theme="dark"] .hero-bg { background: radial-gradient(circle at 12% 18%, oklch(0.4 0.06 258 / 0.55), transparent 45%), radial-gradient(circle at 88% 62%, oklch(0.45 0.07 90 / 0.35), transparent 45%); } /* 히어로 배경 그라데이션이 full-bleed 라 화면 좌우 끝에 옅은 남색/금색 띠로 비친다. 사용자 요청으로 전 화면에서 숨긴다(좌측 끝 그라데이션 제거). */ .hero-bg { display: none; } .hero-particles { position: absolute; inset: 0; pointer-events: none; } .particle { position: absolute; border-radius: 50%; pointer-events: none; } .hero-c { position: relative; z-index: 1; } /* ⚠ 시안은 이 pill 을 .badge 라 부르지만, 이 코드베이스엔 이미 규칙 편집기의 작은 .badge(+.type-number/.type-combo)가 있다. 덮어쓰면 규칙 목록 배지가 깨지므로 히어로 전용으로 이름을 분리한다(모양은 시안 그대로). */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); color: var(--navy-2); padding: 8px 15px; border-radius: 100px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm); } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulseGlow 1.6s ease-in-out infinite; } /* 홈 공지 배너 — '데이터 기반 패턴 분석' 배지 위. 최신 1건만. 누르면 게시판 공지로 이동. */ .hero-notice { display: flex; align-items: center; gap: 8px; max-width: 460px; width: 100%; margin: 0 0 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; text-align: left; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color 0.16s var(--ease), transform 0.16s var(--ease); } .hero-notice[hidden] { display: none; } .hero-notice:hover { border-color: var(--gold); transform: translateY(-1px); } .hero-notice .hn-tag { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--gold); color: #1a1508; } .hero-notice .hn-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; font-weight: 700; } .hero-notice .hn-date { flex: 0 0 auto; font-size: 0.74rem; color: var(--muted); } .hero-notice .hn-go { flex: 0 0 auto; color: var(--muted); font-weight: 800; } /* ⚠ 다크 대비 보정: 시안은 전경색으로 --navy-2 를 쓰는데, 다크 토큰의 --navy-2(0.2)는 --surface(0.23) 위에서 거의 안 보인다. (시안 프로토타입은 data-theme 을 :root 가 아닌 wrapper div 에 걸어 body 배경이 라이트로 남는 바람에 이 문제가 드러나지 않았다.) 토큰 값은 시안 그대로 두고, 전경으로 쓰이는 자리만 밝은 쪽으로 보정한다. */ :root[data-theme="dark"] .hero-badge { color: var(--ink-2); } :root[data-theme="dark"] a { color: var(--gold-2); } :root[data-theme="dark"] .chip-navy { color: oklch(0.82 0.05 258); background: color-mix(in srgb, var(--ink) 12%, transparent); } .hero h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.1; font-weight: 900; letter-spacing: -0.025em; margin: 20px 0 18px; color: var(--ink); } .hero h1 em { color: var(--gold); font-style: normal; } .hero p.lead { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 460px; margin: 0 0 28px; } .hero-cta { display: flex; gap: 13px; flex-wrap: wrap; } /* '추천번호 받기'·'번호 뽑기'는 주황색으로. (ID 특이도로 .btn-gold 를 덮음) */ #heroGenBtn.btn-gold, #genRollBtn.btn-gold { background: linear-gradient(135deg, var(--orange), var(--orange-strong)); color: #fff; box-shadow: var(--shadow); } #heroGenBtn.btn-gold:hover, #genRollBtn.btn-gold:hover { background: linear-gradient(135deg, var(--orange-strong), var(--orange)); } /* ── 모바일 홈: 카운트업 스탯·번호 숫자가 과하게 커서 축소(#home 한정, 타 화면 영향 없음) ── */ @media (max-width: 560px) { #home .stat .sv { font-size: 26px; } #home .stat .sv i { font-size: 13px; } #home .num { font-size: 21px; height: 36px; min-width: 26px; } #home .num-xs { font-size: 15px; height: 26px; min-width: 20px; } #home .plus { font-size: 17px; } } /* ---------- 최신 회차 카드(네이비) ---------- */ .lcard { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 392px; background: linear-gradient(160deg, var(--navy), var(--navy-2)); border-radius: 22px; padding: 18px 20px; color: #fff; box-shadow: var(--shadow); } .lcard .lc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; } .lc-round { font-size: 13px; color: oklch(0.8 0.02 258); font-weight: 600; } .lc-round b { color: var(--gold-2); font-weight: 900; } .lc-tag { font-size: 11px; background: oklch(0.99 0.005 258 / 0.12); color: oklch(0.9 0.02 258); padding: 4px 10px; border-radius: 100px; } .lc-numsrow { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: center; padding: 3px 0 2px; } .lc-meta { margin-top: 10px; font-size: 12px; color: oklch(0.78 0.02 258); text-align: center; line-height: 1.5; border-top: 1px solid oklch(0.99 0.005 258 / 0.12); padding-top: 9px; } /* ---------- 스탯 카드 ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.25s; } .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .stat .sv { font-size: 38px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .stat .sv i { font-size: 18px; color: var(--gold); font-style: normal; margin-left: 3px; } .stat .sl { margin-top: 9px; font-size: 13.5px; color: var(--muted); font-weight: 600; } /* 비율 등 애니메이션 없는 정적 스탯(홀짝/고저 비율): countUp 없이 문자열 그대로 표시 */ .sv-static .sv-n { font-variant-numeric: tabular-nums; } /* ---------- 홈 전용: 스탯 2열 고정 + 카드 아래 정보 간격 축소 ---------- */ #home .stats { grid-template-columns: 1fr 1fr; gap: 12px; } #home .stat { padding: 16px 18px; } #home .stat .sv { font-size: 30px; } #home .stat .sl { margin-top: 6px; font-size: 12.5px; } #home .section { padding: clamp(24px, 3.4vw, 40px) 0; } #home #homeStatsSec { padding-top: 10px; } /* 최신 회차 네이비 박스와 재등장 스탯 사이 간격 축소 */ #home .stack { gap: 14px; } @media (max-width: 640px) { #home .stat .sv { font-size: 25px; } #home .hero { padding-bottom: 16px; } /* 히어로(=lcard) 하단 여백 축소 */ #home #homeStatsSec { padding-top: 4px; } /* 번호 생성기 설명: 모바일 한 줄(폭 넓은 기기 기준, 아주 좁으면 자연 줄바꿈) */ #home .gen-desc { font-size: 12px; } } /* ---------- 카드(시안) ---------- ⚠ .lift / .stat 의 hover transform 은 transformed ancestor 를 만든다 → 그 안에 있는 position:sticky 자손은 hover 하는 동안에만 stickiness 를 잃는다(마우스를 올려야 재현되므로 진단이 어렵다). 현재 .card.lift 안에는 sticky 가 없어 무해하지만, sticky 컨트롤을 새로 넣을 카드에는 .lift 를 붙이지 말 것. */ .card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); } .card-h { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; margin: 0; color: var(--ink); } /* ---------- 번호 생성기 ---------- */ .gen { max-width: 820px; margin: 0 auto; text-align: center; } .gen-stage { margin: 30px auto 22px; min-height: 56px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; } .gen-rules { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; } /* ---------- 라인차트 패널 ---------- * ⚠ 시안은 이 컨테이너를 .chart 라 부르지만, 이 코드베이스의 .chart 는 이미 * "45칸 grid"(번호별 빈도 막대, .chart .bar)다. 그대로 쓰면 SVG 가 grid item 이 돼 * 1/45 폭(21px)으로 찌그러진다 → 라인차트는 .line-chart 로 이름을 분리한다. */ .chart-panel { background: var(--surface-2); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 40px); } .line-chart svg { width: 100%; height: auto; display: block; } .line-chart .cline { fill: none; stroke: var(--navy-2); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 1.6s ease; } .chart-panel.in .cline { stroke-dashoffset: 0; } .line-chart .carea { fill: oklch(0.5 0.08 258 / 0.1); stroke: none; opacity: 0; transition: opacity 0.8s ease 0.3s; } .chart-panel.in .carea { opacity: 1; } .line-chart .cdot { opacity: 0; transition: opacity 0.4s ease; } .chart-panel.in .cdot { opacity: 1; } /* ---------- 빈도 45바 ---------- */ .fchart { display: flex; align-items: flex-end; gap: 3px; height: 140px; overflow-x: auto; padding: 4px 0; } .fbar { flex: 1; min-width: 14px; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; cursor: pointer; } .fbar .track { flex: 1; width: 100%; display: flex; align-items: flex-end; } .fbar .fill { width: 100%; height: var(--h); background: var(--fc); border-radius: 6px 6px 3px 3px; transform-origin: bottom; animation: grow 0.85s both; transition: filter 0.16s; } .fbar:hover .fill { filter: brightness(1.14) saturate(1.15); } .fbar .fn { font-size: 8.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .fbar[data-r="0"] { --fc: var(--r0); } .fbar[data-r="1"] { --fc: var(--r1); } .fbar[data-r="2"] { --fc: var(--r2); } .fbar[data-r="3"] { --fc: var(--r3); } .fbar[data-r="4"] { --fc: var(--r4); } /* ---------- 도넛 / 홀짝 바 / 구간 막대 ---------- */ .donut { width: 110px; height: 110px; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(var(--gold) 0 var(--odd), var(--r1) var(--odd) 100%); flex: none; } /* 합계·홀짝 요약 애니메이션: .dist-play 토글로 재생(로고·홈 클릭·박스 터치·첫 노출). 클래스에 걸어 반복 재생 가능. */ #dashDist.dist-play .donut { animation: spinIn 0.7s ease both; } #dashDist.dist-play .oefill { animation: wx 0.9s 0.15s both; } .donut::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--surface); } .donut b { position: relative; z-index: 1; font-size: 18px; font-weight: 900; color: var(--ink); } .oebars { display: flex; flex-direction: column; gap: 10px; flex: 1; } .oetrack { height: 9px; border-radius: 100px; background: var(--surface-3); overflow: hidden; } .oefill { height: 100%; border-radius: 100px; transform-origin: left; } .rbars { display: flex; align-items: flex-end; gap: 10px; height: 118px; padding-top: 4px; } .rbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; } .rbar .track { flex: 1; width: 100%; display: flex; align-items: flex-end; } .rbar .fill { width: 100%; height: var(--h); background: var(--rc); border-radius: 8px 8px 3px 3px; transform-origin: bottom; animation: grow 0.85s both; } .rbar .rl { font-size: 10.5px; color: var(--muted); font-weight: 700; } .hcline { display: flex; flex-direction: column; gap: 9px; } .myrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; } .myrow + .myrow { border-top: 1px solid var(--line); } /* ---------- 이용 방법 ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } /* 숫자 옆에 제목(한 줄), 그 아래 설명 */ .step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .step .n { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: var(--gold-2); display: grid; place-items: center; font-weight: 900; font-size: 15px; } .step h3 { font-size: 16px; font-weight: 800; margin: 0; color: var(--ink); } .step p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; } /* ---------- 면책 note / 푸터 ---------- */ .note-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); } .note { max-width: 1000px; margin: 0 auto; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 16px; padding: 18px 22px; display: flex; gap: 13px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--ink-2); } .footer { background: var(--navy); color: oklch(0.82 0.02 258); padding: 46px clamp(28px, 4vw, 48px) 30px; margin-top: 20px; } .footer .fwrap { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; } .footer b i { color: var(--gold); font-style: normal; } /* ---------- 반응형(시안) ---------- */ @media (max-width: 1080px) { .hero { grid-template-columns: 1fr; gap: 32px; } .g3 { grid-template-columns: 1fr 1fr; } .g3 > *:first-child { grid-column: 1 / -1; } } @media (max-width: 760px) { .g2, .g3 { grid-template-columns: 1fr; } .g3 > *:first-child { grid-column: auto; } } /* ───────────── PC(≥1025px) 홈 다열 구성 ───────────── 홈은 지금까지 모든 섹션이 세로로만 쌓여 넓은 화면에서 성기게 보였다. PC 에서만 #home 을 2열 그리드로 만들어 서로 짝이 되는 카드를 나란히 배치한다. - 기본은 모든 섹션이 전폭(1/-1). 히어로·차트·대시보드·이용방법처럼 넓어야 하는 건 그대로. - '규칙 기반 번호 생성기'(입력) 와 '추천 후보 미리보기'(출력) 만 좌우로 짝지어 배치. - 상단 스탯은 모바일용 2×2 대신 4열 한 줄로 펴서 폭을 활용. ⚠ 반드시 .active 까지 붙여 특이도를 올린다. `#home.tab-panel`(1,1,0) 만으로는 display 가 항상 grid 로 고정돼 탭 전환 시 #home 이 사라지지 않는 버그가 난다. `.active` 를 붙이면 비활성일 때 base 의 `.tab-panel{display:none}` 이 그대로 먹는다. ⚠ 이 블록은 min-width:1025 안에만 있어 ≤1024(모바일/태블릿)에는 전혀 적용되지 않는다. */ @media (min-width: 1025px) { /* .swipe-panel 도 함께 — 스와이프로 들어오는 동안에도 정착 후와 같은 2열 배치를 유지한다 (빠지면 슬라이드 중에는 1열로 붙었다가 정착하며 2열로 벌어진다). */ #home.tab-panel.active, #home.tab-panel.swipe-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; } #home.tab-panel.active > *, #home.tab-panel.swipe-panel > * { grid-column: 1 / -1; } /* 기본: 전폭 */ #home.tab-panel.active > #gen, #home.tab-panel.swipe-panel > #gen { grid-column: 1 / 2; } #home.tab-panel.active > #homeRecoPreview, #home.tab-panel.swipe-panel > #homeRecoPreview { grid-column: 2 / 3; } /* 짝지은 두 섹션은 상하 여백을 맞춰 같은 줄에서 위쪽 라인이 정렬되게 한다 */ #home #gen, #home #homeRecoPreview { padding-top: clamp(24px, 3.4vw, 40px); } /* 상단 스탯 4열(모바일 2열 → PC 한 줄) */ #home .stats { grid-template-columns: repeat(4, 1fr); } /* 반폭 컬럼에서 생성기 내부 콘텐츠는 열 폭을 꽉 채우도록(기본 max-width:820 유지되 좁아지면 자동 축소) */ #home #gen .gen { max-width: 100%; } } /* ───────── PC(≥1025px) 홈 추가: 최신당첨 박스 1.5배 + 화려한 등장 + 생성기 저장버튼 ───────── */ @media (min-width: 1025px) { /* 최신 당첨 네이비 박스: 숫자·박스 약 1.5배 */ #heroLatest.lcard { max-width: 560px; padding: 26px 32px; border-radius: 26px; } #heroLatest .lc-round { font-size: 17px; } #heroLatest .lc-tag { font-size: 14px; padding: 5px 13px; } #heroLatest .lc-numsrow { gap: 12px; padding: 6px 0 4px; } #heroLatest .lc-numsrow .num { font-size: 40px; min-width: 46px; height: 66px; } #heroLatest .lc-numsrow .plus { font-size: 32px; } #heroLatest .lc-meta { font-size: 14.5px; margin-top: 14px; padding-top: 12px; } } /* 생성기: 뽑기·저장 버튼 한 줄(모바일 포함 전역 — 저장은 뽑기 후 노출, 사용자 요청 '모바일도 적용') */ .gen-btns { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; } /* 최신당첨 번호 등장: 숫자가 1부터 올라가는 카운트업(JS: countUpHeroNumbers). 굴러가는 동안 살짝 두근(PC·모바일 공통). */ .lc-numsrow .num.counting { animation: lcNumPulse 0.5s ease-in-out infinite; } @keyframes lcNumPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } /* ───────── PC(≥1025px) 검증리포트 글자 확대 + 주기분석·분석보기 2열 ───────── */ @media (min-width: 1025px) { /* 검증리포트: 기준발표번호·가중종합상위 카드의 모든 글자 확대 */ #btTargetCard .card-head h3, #btDetArea .card-head h3 { font-size: 1.28rem; } #btTargetCard .bt-target-actions .badge, #btDetArea .card-head .badge { font-size: 0.84rem; padding: 5px 11px; } #btTargetCard .round-modal-metrics { font-size: 0.98rem; gap: 7px 18px; } #btTargetCard .chart-desc, #btDetArea .card .muted { font-size: 0.96rem !important; line-height: 1.65; } #btTargetCard > details > summary, #btDetArea summary { font-size: 0.96rem; } /* 가중종합 상위 번호 볼도 확대(기준발표번호와 동일 톤) */ #btDetArea .card > .balls .ball { width: 44px; height: 44px; font-size: 1.18rem; } #btDetArea .bt-match-count { font-size: 1.6rem; } #btDetArea .rank-tag { font-size: 0.92rem; } /* 주기분석·분석보기: 한 줄에 2개씩 (컨테이너를 2열 그리드로) */ #cycleArea { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } #individualArea { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } #cycleArea > details, #individualArea > details { margin: 0; } /* 번호 출현 분석: 2열로 좁아진 블록 안에서 6개 번호가 줄바꿈되지 않게 축소해 한 줄로(사용자 요청) */ #individualArea .ab-grid .balls { flex-wrap: nowrap; gap: 5px; } #individualArea .ab-grid .balls .ball { min-width: 18px; height: 28px; font-size: 15px; } } /* ───────────── PC(≥1025px) 읽기형·성긴 콘텐츠 폭 정리 ───────────── 대시보드/분석형 화면(홈·분석·추천생성·규칙관리)은 이미 다열 그리드로 1600 폭을 채운다. 반면 아래 화면들은 콘텐츠가 얇아 1600 전폭에 걸면 좌우가 텅 비어 성기게 퍼진다. → PC 에서만 가독 폭으로 제한하고 중앙 정렬해 '적당한 사이즈'로 보이게 한다. ⚠ 전부 min-width:1025 안에만 있어 ≤1024(모바일/태블릿)에는 영향 없음. ⚠ 기존 :first-child margin-top(-22px) 규칙과는 축이 달라 공존한다(상단 여백 그대로). */ @media (min-width: 1025px) { /* 설정: 토글 스위치가 라벨에서 far-right 로 벌어지지 않게 카드 폭 제한 */ #settings > .section-title, #settings > .sub, #settings > .card { max-width: 900px; margin-left: auto; margin-right: auto; } /* 관리자: 회원표·권한 매트릭스는 데이터가 넓어 전폭이 유리 → 제한하지 않음(그대로 둠) */ /* 도움말: 아코디언 FAQ 는 한 줄이 너무 길면 읽기 나쁘다 → 가독 폭 */ #help > .sub, #help .help-list { max-width: 1000px; margin-left: auto; margin-right: auto; } /* 게시판: 포럼 글 목록 가독 폭 */ #board .board-root { max-width: 1160px; margin-left: auto; margin-right: auto; } /* 추첨결과 표: 가로를 이전(콘텐츠 폭)보다 약 1.7배 키우고 중앙 정렬(사용자 요청). 6열짜리 검증 리포트 규칙표(클래스 없는 table)는 전폭이 알맞아 건드리지 않는다. */ #results .table-wrap { width: 100%; max-width: 1050px; margin-left: auto; margin-right: auto; } #results .table-wrap > table { width: 100%; } } /* ───────── PC(≥1025px) 발표번호·회차분석 표 가독성 강화 (사용자 요청) ───────── 모바일/태블릿(≤1024)은 전혀 건드리지 않는다. */ @media (min-width: 1025px) { /* (1) 기준 발표번호가 PC 에서 유독 작았다(30px·0.76rem — 모바일만 40px 로 커졌음). 검증리포트·회차/반복/규칙찾기의 '기준(일자) 발표번호' 볼을 크게. */ .bt-target-balls .ball, .sim-target-balls .ball { width: 46px; height: 46px; font-size: 1.2rem; } /* (2) 추첨결과 표: 당첨번호 볼·글자 크게(사용자 요청 '글자크기도 더 크게') */ #results .ball.sm { min-width: 38px; height: 42px; font-size: 1.32rem; } #results .table-wrap th { font-size: 0.92rem; } #results .table-wrap td { font-size: 1.04rem; padding-top: 15px; padding-bottom: 15px; } #results .table-wrap td.mono { font-size: 1.02rem; } /* (3) 회차분석 결과표: 가로 전폭 + 3열 균등 간격 + 큰 글자 + 구간색 볼(사용자 요청 '가로 가득'). */ .table-wrap:has(> .round-result-table) { max-width: none; margin-left: 0; margin-right: 0; } /* table-layout:fixed → 3열을 동일 폭으로 나눠 열 간격을 균등하게. (draw-cell 의 width:1% 무효화) */ .round-result-table { font-size: 0.98rem; table-layout: fixed; width: 100%; } .round-result-table .round-draw-cell { width: auto; white-space: normal; } .round-result-table th { font-size: 0.86rem; } .round-result-table td { padding-top: 16px; padding-bottom: 16px; vertical-align: top; } /* 회차 번호는 진한 잉크로 또렷하게 */ .round-result-table .round-draw-round { font-size: 1.05rem; color: var(--ink); } /* 날짜·장수·당첨비율 등 보조 muted 텍스트(인라인 0.72rem)를 키움 → !important 로 인라인 이김 */ .round-result-table .muted { font-size: 0.82rem !important; } /* 당첨번호: 플레인 텍스트 숨기고 구간색 볼 노출 + 키움 */ .round-draw-numbers-box { font-size: 1rem; padding: 6px 11px; white-space: nowrap; } .round-draw-numbers-box .rdn-text { display: none; } .round-draw-numbers-box .rdn-balls { display: inline-flex; align-items: center; gap: 8px; } .round-draw-numbers-box .rdn-balls .ball.sm { min-width: 27px; height: 31px; font-size: 1.05rem; } /* 당첨횟수(등수)·지표 결과 글자를 더 크게(사용자 요청) */ .round-result-table .round-rank-cnt { font-size: 1.18rem; } .round-result-table .round-rank-list { gap: 5px 8px; margin-bottom: 6px; } .round-result-table td .muted { display: inline-block; } /* '상세보기'를 당첨비율 글자 아래로 한 줄 더 내리고, 포인트 색 배지로 눈에 띄게(사용자 요청) */ .round-result-table .round-detail-hint { display: inline-block; margin-top: 10px; padding: 4px 13px; border-radius: 999px; background: var(--gold-soft); color: var(--navy); font-size: 0.9rem; font-weight: 800; } /* 당첨번호 지표: 키우고 색을 살짝 달리해(그레이 계열) 앞 열과 구분 */ .round-metrics { font-size: 0.96rem; color: var(--muted); line-height: 1.75; } } /* ───────── PC(≥1025px) 메뉴 중앙 정렬·글자 확대 + 등수 라벨 위치 (사용자 요청) ───────── 메인메뉴(nav.tabs)·하위메뉴(.subtabs)는 자기 줄 전폭을 쓰므로 가운데 정렬해도 넘치지 않는다. 모바일/태블릿(≤1024)은 스크롤형이라 건드리지 않는다(≥1025 전용). */ @media (min-width: 1025px) { /* 메인메뉴: 가운데 정렬 + 글자 키움 */ .header-inner > nav.tabs { justify-content: center; } .header-inner > nav.tabs button { font-size: 16.5px; } /* 하위메뉴(서브탭): 가운데 정렬 + 글자 키움 */ .subtabs { justify-content: center; } .subtabs button { font-size: 16px; } /* 등수별 당첨횟수의 '1등·2등…' 라벨을 조금 더 오른쪽으로 */ .sim-rank-label { padding-left: 16px; } } /* 회차 '설명 보기'의 기준일자 문단은 PC 전용(모바일은 기준일자 카드에 그대로 두므로 숨김) */ .round-base-desc-pc { display: none; } /* 분석 전 미리보기(요약·최고적중 자리)는 PC 전용 — 모바일은 종전대로 분석 후에만 노출(사용자 요청 'PC버전만'). */ @media (max-width: 1024px) { .sim-summary-pre, .sim-best-pre { display: none !important; } } /* 최고적중 미리보기의 빈 자리 숫자(중립색) */ .ball.ball-empty { color: var(--muted); opacity: 0.5; } /* ───────── PC(≥1025px) 시뮬레이션 회차/반복 레이아웃 (사용자 요청) ───────── */ @media (min-width: 1025px) { /* 회차분석: 분석회차(왼쪽) · 기준일자(오른쪽) 한 줄. 기준일자 박스(카드)는 없애고 인라인으로. */ #simmode-round .round-ctl-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } #simmode-round .round-ctl-row #roundWindowPicker { margin: 0; } #simmode-round .round-ctl-row #roundBaseCard { margin-left: auto; } #simmode-round .round-ctl-row #roundBaseCard .card { background: none; border: none; box-shadow: none; padding: 0; margin: 0; } /* 기준일자 밑 설명은 카드에서 숨기고, 아래 '설명 보기' 안의 PC 전용 문단으로 옮긴다(사용자 요청). */ #simmode-round .round-ctl-row #roundBaseCard .card > .muted { display: none; } #simmode-round .round-base-desc-pc { display: block; } /* 반복분석: 저장규칙을 작게·우측 정렬(오른쪽에서 반복횟수 글자 절반 정도까지) */ #simmode-repeat .saved-rule-bar { justify-content: flex-end; } #simmode-repeat .saved-rule-bar > label { font-size: 0.76rem; } #simmode-repeat .saved-rule-sel { flex: 0 0 auto; width: 320px; max-width: 45%; font-size: 0.78rem; padding: 5px 9px; } /* 반복분석: 기준일자(왼쪽) · 최고적중조합(오른쪽) 한 줄. 두 박스 높이를 동일하게(사용자 요청). */ #simmode-repeat .sim-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } /* 두 카드 모두 셀 높이를 꽉 채우고, 카드 하단 margin(16px)이 셀만 부풀려 높이가 어긋나던 것을 제거 → 상하 크기 일치. */ #simmode-repeat #simBaseCard, #simmode-repeat #simBestHost { height: 100%; } #simmode-repeat #simBaseCard > .card { height: 100%; margin-bottom: 0 !important; } #simmode-repeat #simBestHost > .card { height: 100%; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0 !important; } /* 반복분석: 등수별 결과 전폭 + 1등2등 / 3등4등 / 5등미당첨 3줄(2열)(사용자 요청) */ #simmode-repeat .sim-ranks { max-width: none; margin: 0; } #simmode-repeat .sim-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #simmode-repeat .sim-rank-item { padding: 13px 18px; border: 1px solid var(--line); border-radius: 12px; } #simmode-repeat .sim-rank-label { padding-left: 0; } /* 상세는 선택 등수 바로 아래 전폭으로 인라인 펼침(사용자 요청 '상세보기 글자 아래') */ #simmode-repeat .sim-rank-detail-inline { grid-column: 1 / -1; } /* 규칙찾기: 기준일자 카드 안에서 발표번호(왼쪽)+옵션 박스(오른쪽) 한 줄. 옵션 3종(등수별 가중치·이상치·자동순서변경)을 발표번호 오른쪽 내부 박스로. */ #seqBaseCard .seq-base-main { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } #seqBaseCard .seq-base-main .sim-target-balls { flex: 0 1 auto; } #seqBaseCard .seq-base-optslot { flex: 1 1 auto; min-width: 220px; } #seqBaseCard .seq-base-optslot > #seqOptWrap { display: flex; flex-direction: column; gap: 8px; margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); } } /* 회차/반복 분석 결과의 '등수별 당첨'·'요약' 카드는 1열 스택이라 전폭에서 성기다. PC 에서 좌(등수별)·우(요약) 2열로 짝지어 폭을 활용한다. 등수 상세(round-rank-detail)는 클릭 시 아래로 전폭 펼쳐진다(평소 :empty 로 숨김). ⚠ 기존 `@media(max-width:1100px){.round-main{flex column}}` 과 겹치지 않도록 1101 부터 적용 (1025~1100 은 원래대로 세로 스택 유지 → 좁은 노트북에서 카드가 눌리지 않게). */ @media (min-width: 1101px) { .round-main { grid-template-columns: 1fr 1fr; } .round-main .sim-ranks { grid-column: 1 / 2; } .round-main .sim-summary { grid-column: 2 / 3; } .round-main .round-rank-detail { grid-column: 1 / -1; } } /* ---------- 모바일 하단 탭바(시안) ---------- **≤1024px** 에서 노출(시안 스펙은 760 이지만, 아이패드 세로 768·작은 노트북 구간이 가로 스크롤 내비로 남는 걸 피하려고 사용자 결정으로 1024 까지 모바일 취급). 상단 탭 스트립(nav.tabs)을 대체하지만 좌우 스와이프·PTR 은 그대로 살아 있다. z-index 30 = 헤더(20) 위 · 드로어 백드롭(45) 아래 → 드로어가 열리면 탭바를 덮는다. ⚠ 이 블록은 '내비' 전용이다. 숫자 크기(.num)·FAB 위치·시안 그리드(.g2/.g3)의 760 은 레이아웃 규칙이라 그대로 둔다. */ .tabbar { display: none; } :root { --tabbar-h: 0px; --ticker-h: 34px; } /* 하단 탭바 제거(0) · 상단 티커 높이(JS 실측 갱신) */ /* 모바일 하단 탭바 제거: 상단 메인메뉴가 항상 보이므로 불필요. 예약 공간(--tabbar-h)도 0이라 FAB·body 하단 패딩 자동 정리. */ .tabbar { display: none !important; } @media (max-width: 1024px) { .tabbar { display: grid; min-height: var(--tabbar-h); grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 20px -14px oklch(0.22 0.05 258 / 0.5); } .tabbar-btn { appearance: none; -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 7px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: var(--muted); font-family: inherit; transition: color 0.16s var(--ease); } .tabbar-ico { font-size: 15px; line-height: 1; } .tabbar-lb { font-size: 10.5px; font-weight: 700; letter-spacing: -0.01em; } .tabbar-btn.active { color: var(--gold); } .tabbar-btn.active .tabbar-ico { transform: translateY(-1px); } .tabbar-btn:active { color: var(--gold-2); } /* 상단 탭 스트립은 하단 탭바로 대체(시안: ≤760px 상단 링크 숨김). 햄버거는 전 폭 상시 노출이라 여기서 건드리지 않는다. */ /* 메인메뉴는 항상 표시(브랜드 아래 줄). 하단 탭바와 함께 노출된다. */ .header-inner nav.tabs { display: flex; } /* 고정 탭바에 콘텐츠가 가리지 않도록 여백 확보(body 패딩이 푸터 아래까지 밀어준다) */ body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .tabbar-btn, .tabbar-btn.active .tabbar-ico { transition: none; transform: none; } } /* 모바일 상단 메뉴 — 한 줄 헤더 요소 크기/라벨 보정 (위 레이아웃 블록의 최종 보정) */ @media (max-width: 560px) { .brand { min-width: 0; } .brand .logo { font-size: 1.05rem; } /* 즐겨찾기 라벨을 '즐겨찾기·친구'로 짧게(한 줄에 들어오도록). 실제 텍스트/aria 는 그대로 두고 표시만 교체(font-size:0 + ::after). PC 는 영향 없음(≤560 전용). */ .theme-toggle { width: 32px; height: 32px; border-radius: 9px; background: var(--surface); color: var(--navy); border-color: var(--line-2); } .theme-toggle:hover { background: var(--surface-2); color: var(--navy-2); } .auth-role { padding: 4px 6px; font-size: 0.6rem; } .auth-role.role-admin { background: #8f2428; border-color: #8f2428; color: #fff; } .auth-btn.auth-btn-nav { padding: 6px 10px; font-size: 0.66rem; background: var(--navy); } } /* ================================================================== 조합찾기(#rulefind) 재빌딩 — 111.png 목업 톤 (rf-*) ================================================================== */ .rf-studio { display: flex; flex-direction: column; gap: 14px; } .rf-studio select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); font-family: system-ui, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } .rf-studio .hint { font-size: 0.78rem; color: var(--muted); } /* 결과 히어로 */ .rf-hero { background: linear-gradient(160deg, var(--navy), color-mix(in srgb, var(--navy) 78%, #000)); color: #fff; border-radius: var(--radius-sm); padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .rf-hero .rf-hero-lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-2, #e2bd7a); font-weight: 700; } .rf-hero .rf-idle { color: #e7dcc6; font-size: 0.95rem; padding: 12px 0 2px; } .rf-hero-main { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; } .rf-prob { display: flex; flex-direction: column; } .rf-prob .big { font-family: var(--mono, ui-monospace, monospace); font-size: 2.6rem; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .rf-prob .cap { font-size: 0.76rem; color: #d8c8ac; margin-top: 4px; } .rf-hero-rules { flex: 1; min-width: 200px; } .rf-hero-rules .rk { font-size: 0.72rem; color: #d8c8ac; margin-bottom: 6px; } .rf-hero .rf-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; } .rf-hero .rf-chip .w { color: #1a1205; background: var(--gold-2, #e2bd7a); } .rf-hero-acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .rf-prog { height: 7px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; margin-top: 14px; } .rf-prog span { display: block; height: 100%; width: 0; background: var(--brand); transition: width 0.2s; } .rf-hero-sub { font-size: 0.78rem; color: #d8c8ac; margin-top: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; } /* 실행 바 */ .rf-runbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rf-runbar .rf-runbadges { display: inline-flex; gap: 6px; flex-wrap: wrap; } .rf-runbar .rf-est { margin-left: auto; } /* 과거분석 '규칙 저장'(분석 버튼과 같은 primary 톤)을 runbar 맨 오른쪽으로 */ .rf-runbar .btn-saverule { margin-left: auto; } /* 설정 패널 */ .rf-settings { padding: 4px 16px; } .rf-setrow { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--border); } .rf-setrow:first-child { border-top: 0; } .rf-setlbl { font-weight: 800; font-size: 0.95rem; color: var(--text); } .rf-setlbl small { display: block; font-weight: 400; font-size: 0.76rem; color: var(--muted); margin-top: 2px; } .rf-setctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } @media (max-width: 560px) { .rf-setrow { grid-template-columns: 1fr; gap: 8px; } } /* 규칙 선택 */ .rf-rulepick { gap: 6px; } .rf-rulesel { max-width: 200px; } .rf-selchips { display: flex; gap: 6px; flex-wrap: wrap; } .rf-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-soft); border: 1px solid var(--border); color: var(--text); border-radius: 99px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; } .rf-chip .w { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 5px; padding: 0 5px; } /* 세그먼트(목표·정밀도) */ .rf-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; } .rf-seg button { font: inherit; font-size: 0.83rem; font-weight: 600; border: 0; background: none; color: var(--muted); padding: 7px 13px; border-radius: 7px; cursor: pointer; white-space: nowrap; } .rf-seg button.active { background: var(--brand); color: #fff; } .rf-seg.rf-seg-sub button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .rf-seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* 정밀도 버튼의 반복 횟수(빠름 1회 · 보통 10회 · 정밀 50회) — 라벨 아래 작은 글씨 */ #seqPrecSeg button { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; gap: 1px; } #seqPrecSeg button small { font-size: 0.68em; font-weight: 700; opacity: 0.75; } /* 스테퍼 */ .rf-avgwrap { display: inline-flex; align-items: center; gap: 8px; } .rf-stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; } .rf-stepper button { width: 28px; height: 28px; border: 0; background: none; color: var(--text); font-size: 1.1rem; cursor: pointer; border-radius: 7px; line-height: 1; } .rf-stepper button:hover { background: var(--border); } .rf-stepper .v { min-width: 52px; text-align: center; font-family: var(--mono, monospace); font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; } .rf-preccustom { display: inline-flex; align-items: center; gap: 6px; } .rf-preccustom input { width: 64px; } /* 고급 옵션 */ details.rf-adv { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; } details.rf-adv > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; list-style: none; display: flex; align-items: center; gap: 6px; padding: 10px 0; color: var(--text); } details.rf-adv > summary::-webkit-details-marker { display: none; } details.rf-adv > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s var(--ease); } details.rf-adv[open] > summary::before { transform: rotate(90deg); } .rf-optrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); } .rf-optrow:first-of-type { border-top: 0; } .rf-opttext b { font-size: 0.9rem; color: var(--text); } .rf-opttext p { margin: 2px 0 0; font-size: 0.79rem; color: var(--muted); } .rf-pw { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .rf-pw label { font-size: 0.76rem; color: var(--text-2, var(--muted)); display: flex; flex-direction: column; gap: 3px; } .rf-pw input { width: 72px; padding: 8px 10px; font-family: var(--mono, monospace); font-size: 0.9rem; text-align: center; box-sizing: border-box; } /* 토글 스위치 */ .rf-sw { position: relative; width: 42px; height: 25px; flex: none; margin-top: 1px; } .rf-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .rf-sw .tr { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; transition: 0.18s; } .rf-sw .kn { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: var(--muted); border-radius: 50%; transition: 0.18s; } .rf-sw input:checked ~ .tr { background: color-mix(in srgb, var(--brand) 30%, var(--surface-2)); border-color: var(--brand); } .rf-sw input:checked ~ .kn { left: 22px; background: var(--brand); } .rf-sw input:focus-visible ~ .tr { outline: 2px solid var(--brand); outline-offset: 2px; } /* 기준 회차: renderSeqBaseCard 내부 카드 여백 제거(설정행 안에 들어오므로) */ .rf-basectl .card { margin: 0 !important; background: none; border: 0; box-shadow: none; padding: 0; } /* 기준 회차 스테퍼 */ .rf-base-hidden-sel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; } .rf-base-stepper { position: relative; } .rf-base-stepper .v { min-width: 62px; } .rf-base-stepper button:disabled { opacity: .35; cursor: default; } .rf-base-balls { display: inline-flex; align-items: center; gap: 3px; } .rf-base-balls .ball.sm { width: 24px; height: 24px; font-size: 0.72rem; } .rf-base-note { flex-basis: 100%; margin-top: 2px; } /* 상세 결과 접기(자세히 보기) */ details.rf-details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } details.rf-details > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; list-style: none; display: flex; align-items: center; gap: 6px; padding: 14px 16px; color: var(--text); } details.rf-details > summary::-webkit-details-marker { display: none; } details.rf-details > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s var(--ease); } details.rf-details[open] > summary::before { transform: rotate(90deg); } details.rf-details[open] > summary { border-bottom: 1px solid var(--border); } details.rf-details > #seqArea, details.rf-details > #seqAggArea { padding: 0 14px; } details.rf-details > #seqArea:first-of-type { padding-top: 14px; } /* ── 조합찾기 히어로 수정 ── */ /* (버그) .rf-avgwrap/.rf-preccustom 의 display 가 [hidden] 속성을 덮어써 안 숨겨지던 문제 */ .rf-avgwrap[hidden], .rf-preccustom[hidden] { display: none !important; } /* 히어로 액션 버튼: 목업(111.png)과 동일 — 반투명 흰색(onnavy), 저장=골드, 고스트=테두리만 */ .rf-hero-acts .btn { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; box-shadow: none; } .rf-hero-acts .btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.42); } .rf-hero-acts .btn.save-rule { background: var(--brand); border-color: var(--brand); color: #241a05; } .rf-hero-acts .btn.save-rule:hover { background: var(--brand-strong); border-color: var(--brand-strong); } .rf-hero-acts .btn.ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #e7dcc6; } .rf-hero-acts .btn.ghost:hover { background: rgba(255,255,255,.12); } /* 히어로 텍스트 글자체를 목업(system-ui)과 동일하게 — 큰 숫자(.big)는 자체 mono 유지 */ .rf-hero { font-family: system-ui, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } /* ── 골드 버튼을 목업(111.png)과 동일하게: 밝은 골드 배경 + 어두운 글자 ── 대상: 분석 시작(.btn.primary) · 목표 세그먼트 선택(특정 회차/최근 N회 평균) · 히어로 저장. 정밀도 세그먼트(.rf-seg-sub) 선택은 목업대로 흰색 유지(제외). */ .rf-studio { --rf-gold: #b0712a; --rf-gold-strong: #935e22; --rf-gold-ink: #241a05; } @media (prefers-color-scheme: dark) { .rf-studio { --rf-gold: #e0a94e; --rf-gold-strong: #c9923f; } } :root[data-theme="dark"] .rf-studio { --rf-gold: #e0a94e; --rf-gold-strong: #c9923f; } :root[data-theme="light"] .rf-studio { --rf-gold: #b0712a; --rf-gold-strong: #935e22; } .rf-studio .btn.primary, .rf-seg:not(.rf-seg-sub) button.active, .rf-hero-acts .btn.save-rule { background: var(--rf-gold); border-color: var(--rf-gold); color: var(--rf-gold-ink); } .rf-studio .btn.primary:hover, .rf-hero-acts .btn.save-rule:hover { background: var(--rf-gold-strong); border-color: var(--rf-gold-strong); color: var(--rf-gold-ink); } /* ── 번호 생성(추천/스마트) 골드 버튼도 목업과 동일하게: 밝은 골드 + 어두운 글자 ── */ #recommend, #smart { --rf-gold: #b0712a; --rf-gold-strong: #935e22; --rf-gold-ink: #241a05; } @media (prefers-color-scheme: dark) { #recommend, #smart { --rf-gold: #e0a94e; --rf-gold-strong: #c9923f; } } :root[data-theme="dark"] #recommend, :root[data-theme="dark"] #smart { --rf-gold: #e0a94e; --rf-gold-strong: #c9923f; } :root[data-theme="light"] #recommend, :root[data-theme="light"] #smart { --rf-gold: #b0712a; --rf-gold-strong: #935e22; } #recommend .btn.primary, #smart .btn.primary { background: var(--rf-gold); border-color: var(--rf-gold); color: var(--rf-gold-ink); } #recommend .btn.primary:hover, #smart .btn.primary:hover { background: var(--rf-gold-strong); border-color: var(--rf-gold-strong); color: var(--rf-gold-ink); } /* ── 분석(#analyze) 메뉴: 조합찾기와 동일한 디자인 토큰 ── */ #analyze select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); font-family: system-ui, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } #analyze { --rf-gold: #b0712a; --rf-gold-strong: #935e22; --rf-gold-ink: #241a05; } @media (prefers-color-scheme: dark) { #analyze { --rf-gold: #e0a94e; --rf-gold-strong: #c9923f; } } :root[data-theme="dark"] #analyze { --rf-gold: #e0a94e; --rf-gold-strong: #c9923f; } :root[data-theme="light"] #analyze { --rf-gold: #b0712a; --rf-gold-strong: #935e22; } #analyze .btn.primary { background: var(--rf-gold); border-color: var(--rf-gold); color: var(--rf-gold-ink); } #analyze .btn.primary:hover { background: var(--rf-gold-strong); border-color: var(--rf-gold-strong); color: var(--rf-gold-ink); } /* rf-studio(display:flex)가 .simmode-panel/.subpanel 숨김을 덮지 않도록 — 활성 항목만 표시(스와이프 중 제외) */ .simmode-panel.rf-studio:not(.active):not(.swipe-panel) { display: none; } .simmode-panel.rf-studio.active:not(.swipe-panel) { display: flex; } /* #sub-backtest 등 rf-studio 서브탭이 비활성일 때도 노출되던 문제(분석 모든 서브탭에 검증 리포트가 붙던 현상) 수정 */ .subpanel.rf-studio:not(.active):not(.swipe-panel) { display: none; } .subpanel.rf-studio.active:not(.swipe-panel) { display: flex; } /* 스와이프 중에도 정착 후와 같은 flex 레이아웃을 유지한다(위 #recommend/#smart 와 같은 이유). .swipe-panel{display:block} 보다 선택자가 길어 우선한다. */ .simmode-panel.rf-studio.swipe-panel, .subpanel.rf-studio.swipe-panel { display: flex; } /* ── 메뉴 상단 다크브라운 설명 박스(111.png 톤) — 모든 리빌딩 메뉴 공통 ── */ .rf-intro { background: linear-gradient(160deg, var(--navy), color-mix(in srgb, var(--navy) 78%, #000)); color: #fff; border-radius: var(--radius-sm); padding: 15px 20px; box-shadow: var(--shadow-sm); } .rf-intro .rf-intro-lbl { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-2, #e2bd7a); font-weight: 700; margin-bottom: 5px; } .rf-intro p { margin: 0; color: #e7dcc6; font-size: 0.9rem; line-height: 1.55; word-break: keep-all; } /* 추천 생성 flex 리듬: reco-sticky 하단 여백 제거해 옵션과의 간격을 14px 로 통일 */ #recommend .reco-sticky { padding-bottom: 0; } #recommend .reco-sticky .card { margin-bottom: 0; } /* .reco-advanced 의 상하 12px 마진이 flex gap(14px)에 합산돼 26px 이 되는 것 방지 → 마진 0, gap 만 적용 */ #recommend .reco-advanced { margin: 0; } /* 모달(규칙 스튜디오 등) 열림 시 플로팅 툴바 숨김 — 오탭·스와이프 유발 방지 */ body:has(.modal-overlay:not([hidden])) .fab-bar { display: none; } /* ═══════════ 모바일 가시성 극대화 (≤480px · 아이폰 17 Pro ≈ 402px): 한 줄 배치·축소·고밀도 ═══════════ */ @media (max-width: 480px) { main { padding: 14px 10px 92px; } /* 메인 탭(6개) 여유롭게 한 줄 */ /* 좌우 패딩은 3px 까지 줄인다. 버튼이 flex:1 로 남는 폭을 나눠 가지므로(위 ≤560 규칙) 실제 눌리는 폭은 훨씬 넓고, 이 값은 '한 줄에 몇 px 까지 들어가는지'만 결정한다. 측정: 3px → 360~430px 전 구간 한 줄(가로 가득). 4px 는 360 에서 1.6px 넘쳤다. */ .header-inner nav.tabs button { padding: 8px 3px; font-size: 15px; } .header-inner nav.tabs button.active::after { left: 3px; right: 3px; } /* 2·3차 서브탭 축소 */ .subtabs button { font-size: 13.5px; padding: 6px 11px; } .sim-modetabs button { font-size: 0.74rem; padding: 5px 10px; } /* 설명 박스 컴팩트 */ .rf-intro { padding: 10px 13px; border-radius: 12px; } .rf-intro .rf-intro-lbl { font-size: 0.62rem; margin-bottom: 2px; } .rf-intro p { font-size: 0.79rem; line-height: 1.42; } /* 설정 패널: 라벨(좌)+컨트롤(우) 한 줄 유지, 부제목 숨겨 높이 절감 */ .rf-settings { padding: 2px 13px; } .rf-setrow { grid-template-columns: auto 1fr; gap: 8px 10px; padding: 9px 0; align-items: center; } .rf-setlbl { font-size: 0.84rem; font-weight: 700; white-space: nowrap; } .rf-setlbl small { display: none; } .rf-setctl { justify-content: flex-end; gap: 6px; } /* 카드·런바·스튜디오 간격 축소 */ .card { padding: 13px 14px; } .rf-runbar { gap: 6px; padding: 11px 13px; } #recommend.active, #smart.active, #recommend.swipe-panel, #smart.swipe-panel, .rf-studio { gap: 10px; } /* 버튼 축소 */ .btn { padding: 8px 13px; font-size: 0.86rem; } .btn.primary { font-size: 0.9rem; } .btn.mini { padding: 5px 9px; font-size: 0.74rem; } /* 헤딩·섹션·카드헤더 축소 */ .section-title { margin: 16px 0 10px; } .section-title h2 { font-size: 0.98rem; } .card-h, .card-head h3 { font-size: 0.92rem; } /* 셀렉트/입력 축소 */ select, .rf-rulesel, .modal-load-sel { font-size: 0.83rem; } } /* 모바일: 규칙 스튜디오 모달 크롬 컴팩트(카드까지 스크롤 최소화) */ @media (max-width: 480px) { .modal-tools { padding: 6px 8px; gap: 5px; } .modal-tools .btn.mini { padding: 5px 8px; font-size: 0.76rem; } .modal-load { padding: 7px 11px; gap: 6px; margin: 6px 0 2px; } .modal-load-label { font-size: 0.78rem; } .guest-warn { font-size: 0.75rem; padding: 8px 11px; } .rs-summary { padding: 8px 12px; } .rs-seg button { font-size: 0.78rem; padding: 7px 5px; gap: 4px; } .rs-card { padding: 11px 12px; } .modal-apply-note { font-size: 0.74rem; } } /* 모바일: 설정 행을 되도록 한 줄로 — rf-intro 더 축소 + 컨트롤(셀렉트·버튼·세그·스테퍼·토글) 압축 */ @media (max-width: 480px) { .rf-intro { padding: 9px 12px; } .rf-intro .rf-intro-lbl { font-size: 0.6rem; margin-bottom: 2px; } .rf-intro p { font-size: 0.74rem; line-height: 1.4; } .rf-setrow { gap: 6px 8px; padding: 8px 0; } .rf-setctl { gap: 5px; } .rf-rulepick { gap: 5px; } .rf-rulesel { max-width: 150px; } .rf-rulepick .rf-rulesel { flex: 1 1 88px; min-width: 70px; } .rf-setctl select, .rf-rulesel { font-size: 0.77rem; padding: 6px 7px; } .rf-setctl .btn.mini, .rf-rulepick .btn.mini { padding: 5px 7px; font-size: 0.71rem; } .rf-seg button { font-size: 0.75rem; padding: 6px 9px; } .rf-seg-sub button { font-size: 0.71rem; padding: 5px 8px; } .rf-stepper button { width: 26px; height: 26px; font-size: 1rem; } .rf-stepper .v { min-width: 42px; font-size: 0.84rem; } .rf-base-stepper .v { min-width: 50px; } .rf-sw { width: 38px; height: 22px; } .rf-sw .kn { width: 15px; height: 15px; top: 3px; } .rf-sw input:checked ~ .kn { left: 19px; } } /* 모바일: 조합찾기 결과 히어로(대기 박스)를 rf-intro 크기로 축소 + 규칙선택 한 줄 + 힌트 숨김 */ @media (max-width: 480px) { .rf-hero { padding: 10px 12px; } .rf-hero .rf-hero-lbl { font-size: 0.6rem; } .rf-hero .rf-idle { font-size: 0.74rem; padding: 6px 0 2px; line-height: 1.4; } /* 규칙 선택: 향상된 셀렉트(.rulesel) 폭 제한 → 편집·최근규칙 버튼과 한 줄 */ .rf-rulepick .rulesel { flex: 1 1 80px; min-width: 66px; max-width: 150px; } .rf-rulepick .rulesel-btn { font-size: 0.76rem; padding: 6px 8px; } /* 설정 컨트롤의 설명 힌트 숨김(한 줄 유지) — 런바 예상소요(.rf-est)는 유지 */ .rf-setctl .hint { display: none; } }