/* ============================================================ PACE RISE : Node — v7.0 Shared Styles Font: Audiowide (Google Fonts) for English/brand Colors: Line White base, Tartan accent, Track Black text (2026-10-09 새 팔레트; --green* 변수명은 호환용, 값은 타탄) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap'); :root { --white: #ffffff; --bg: #F4F3EF; --bg-dark: #e8eaed; --bg-card: #ffffff; --green: #C24A2E; --green-light: #F6E4DF; --green-soft: #EFC9BF; --blue: #6b6b6b; --blue-light: #f5f5f5; --blue-soft: #e0e0e0; --gray: #D6D3CB; --gray-light: #f3f4f6; --gray-mid: #bfc5cd; --gray-dark: #6b7280; --text: #0E0E10; --text-light: #7A7770; /* 대비 4.0:1 (보조 글자) — 2026-09 접근성: 전 #9ca3af 2.5:1 */ --text-muted: #6D6A64; /* 대비 5.2:1 (본문 보조) — 전 #b0b6c0 1.9:1, 회색 위 회색 */ --danger: #B4232C; --danger-light: #F9E3E5; --warning: #e5a100; --warning-light: #fef6dc; --accent: #6b6b6b; --accent-light: #e8f0fa; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 1px 4px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --font-brand: 'Audiowide', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-mono: 'SF Mono','Fira Code','Cascadia Code',Monaco,Consolas,monospace; /* ── Motion tokens (UX polish v1) ────────────────────────────── 모든 트랜지션/애니메이션이 같은 ease + 시간 체계를 쓰도록 통일. --ease-out : 메인 ease (cubic-bezier — 자연스럽게 감속) --dur-fast : 작은 인터랙션 (버튼 hover/active) --dur-base : 일반 트랜지션 (모달, 탭) --dur-slow : 큰 레이아웃 변화 */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ── Reduced motion 사용자 배려 ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ LOADING SPINNER OVERLAY ============================================================ */ .pr-loading-overlay { display: none; position: fixed; top: 12px; right: 12px; z-index: 9999; pointer-events: none; } .pr-loading-overlay.show { display: flex; } .pr-loading-spinner { width: 28px; height: 28px; border: 3px solid rgba(0,0,0,.1); border-top-color: var(--green); border-radius: 50%; animation: pr-spin .7s linear infinite; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.15); } @keyframes pr-spin { to { transform: rotate(360deg); } } /* ============================================================ FONT SIZE CONTROL (A+/A-) ============================================================ */ .font-size-ctrl { display: inline-flex; align-items: center; gap: 2px; background: var(--gray-light); border-radius: 6px; padding: 2px; } .font-size-ctrl button { background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); width: 30px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background .15s; } .font-size-ctrl button:hover { background: var(--gray); } .font-size-ctrl .font-size-label { font-size: 11px; color: var(--text-muted); min-width: 32px; text-align: center; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: 'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Segoe UI','Inter',Roboto,'Helvetica Neue',Arial,sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; font-size: 14px; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* iOS Safari 관성 스크롤 + 모바일 탭 시 회색 박스 제거 */ -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; /* 모바일 입력 시 자동 줌인 방지 (font-size 16px 이상이면 줌 안 함, 14px 이라서 별도 설정 필요한 입력은 input 쪽에서 처리) */ } /* 모든 스크롤 가능한 영역에 iOS 관성 스크롤 적용 */ .modal-overlay, .result-detail-overlay, .result-detail-content, .modal, .modal-form, .result-detail-modal, .matrix-table-wrap, .data-table-wrap, .callroom-matrix-panel, .record-matrix-panel, .callroom-detail-panel, .record-detail-panel { -webkit-overflow-scrolling: touch; } /* 링크/버튼 등 인터랙티브 요소 — 모바일 탭 회색박스 제거 */ a, button, [role="button"], .btn, .tab, .nav-link, .matrix-cell, .heat-tab, .gender-tab, .round-btn, .event-name, .hero-schedule, .modal-overlay, .result-detail-overlay { -webkit-tap-highlight-color: transparent; } /* ============================================================ HEADER ============================================================ */ .header { background: var(--white); border-bottom: 1px solid var(--gray); position: sticky; top: 0; z-index: 100; } .header-inner { max-width: 1440px; margin: 0 auto; padding: 12px 28px 6px; display: flex; align-items: center; gap: 14px; } .header-title { font-family: var(--font-brand); font-size: 22px; font-weight: 400; color: var(--text); letter-spacing: 2.5px; } /* 브랜드(2026-10-09 새 로고). 화면 헤더·모바일 메뉴는 B안(2026-10-10): 타탄 심볼 24px + 'Node'(Audiowide 20px) — 심볼 최소 24px(브랜드 규칙). 홈 히어로·로그인 화면만 전체 워드마크(RISE 의 I 가 심볼인 SVG, 최소 높이 18px) + 작은 'Node' */ .header-title { display: inline-flex; align-items: center; gap: 9px; line-height: 1; } .brand-symbol { height: 24px; width: auto; display: inline-block; } .brand-wordmark { height: 20px; width: auto; display: inline-block; vertical-align: baseline; } .brand-node { font-family: var(--font-brand); font-size: 20px; letter-spacing: 2px; color: var(--text); } /* 홈 히어로(2026-10-12 "페이스라이즈를 줄이고 노드를 키워"): 워드마크 26px + Node 44px, 베이스라인 맞춤 */ .home-hero h1 { display: inline-flex; align-items: baseline; gap: 12px; } .hero-wordmark { height: 26px; } .home-hero h1 .brand-node.hero-node { font-size: 44px; letter-spacing: 2px; } /* 로그인 화면은 login.html 자체 규칙(13px) */ @media (max-width: 480px) { .hero-wordmark { height: 20px; } .home-hero h1 .brand-node.hero-node { font-size: 34px; } } .mobile-menu-header .mm-brand { display: inline-flex; align-items: center; gap: 8px; } .mobile-menu-header .mm-brand .brand-symbol { height: 24px; } .mobile-menu-header .mm-brand .brand-node { font-size: 18px; } .header-colon { color: var(--text); } .header-scope { color: var(--text); } .header-subtitle { font-size: 11px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; font-family: var(--font-brand); } /* Header login button (global) */ .header-btn-group { display: flex; align-items: center; gap: 6px; margin-left: auto; } .header-nav-btn { background: none; border: 1.5px solid var(--gray-mid); color: var(--text); font-size: 12px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; padding: 0; line-height: 1; } .header-nav-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .header-nav-btn:active { transform: scale(0.9); } .header-refresh-btn { background: none; border: 1.5px solid var(--gray-mid); color: var(--text); font-size: 15px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; padding: 0; line-height: 1; } .header-refresh-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .header-refresh-btn:active { transform: rotate(180deg); } .header-login-btn { background: none; border: 1.5px solid var(--gray-mid); color: var(--text); font-family: var(--font-brand); font-size: 12px; padding: 5px 16px; border-radius: 99px; cursor: pointer; font-weight: 400; transition: all .2s; white-space: nowrap; letter-spacing: 0.5px; } .header-login-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .header-login-btn.logged-in { background: var(--green-light); border-color: var(--green); color: var(--green); } /* ============================================================ PAGE NAV ============================================================ */ .page-nav { max-width: 1440px; margin: 0 auto; display: flex; padding: 0 28px; gap: 2px; border-top: 1px solid var(--gray-light); } .nav-link { display: inline-block; padding: 8px 20px; color: var(--text-muted); font-size: 12px; font-weight: 700; text-decoration: none; border-bottom: 2.5px solid transparent; transition: all 0.15s; letter-spacing: 0.3px; } .nav-link:hover { color: var(--text); background: var(--gray-light); } .nav-link.active { color: var(--text); border-bottom-color: var(--green); } /* ============================================================ MAIN ============================================================ */ .main-content { padding: 18px 24px; max-width: 1440px; margin: 0 auto; } /* ============================================================ PAGE TITLE BAR ============================================================ */ .page-title-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .page-title-bar h2 { font-size: 17px; font-weight: 800; } .page-title-bar .page-sub { font-size: 11px; color: var(--text-muted); font-family: var(--font-brand); } .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--gray-dark); font-size: 12px; font-weight: 600; text-decoration: none; padding: 4px 10px; border: 1px solid var(--gray); border-radius: var(--radius); transition: all 0.12s; } .back-link:hover { background: var(--gray-light); color: var(--text); } .context-badge { display: inline-block; padding: 3px 12px; background: var(--blue-light); color: var(--accent); border-radius: 99px; font-size: 12px; font-weight: 600; } /* ============================================================ DATA TABLE ============================================================ */ .data-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; } .data-table th { background: var(--gray-light); color: var(--gray-dark); padding: 9px 10px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--gray); } .data-table td { padding: 8px 10px; text-align: center; font-size: 13px; border-bottom: 1px solid #f0f2f5; white-space: nowrap; font-weight: 500; } .data-table tbody tr { transition: background 0.1s; } .data-table tbody tr:hover { background: var(--gray-light); } .data-table tbody tr:last-child td { border-bottom: none; } /* ─── Result panel tables (모달 내부 결과 표) ───────────────────────── 원칙 (UX): "스크롤 없이 한 화면" 우선 — 모바일에서는 패딩/폰트를 줄여 최대한 한 화면에 들어오게 하고, 그래도 넘치면 가로 스크롤로 폴백. ⚠️ ★ 진짜 근본 원인 (2026-06 재수정): `.data-table { width:100%; overflow:hidden }` 가 table 자체를 클립. width 는 max-content 로 덮어써도 overflow:hidden 은 .data-table 의 0,1,0 specificity 가 살아남아 셀이 table 박스 밖으로 못 나가고, 그 결과 .result-panel-body 의 scrollWidth === clientWidth 되어 가로 스크롤이 트리거되지 않음. → table.overflow 도 visible 로 명시적 복원 필요. */ .result-panel .data-table, .result-panel .field-table { width: max-content; /* 내용에 맞춰 자연스럽게 확장 */ min-width: 100%; /* 좁은 표는 모달 폭을 채워 빈공간 방지 */ table-layout: auto; overflow: visible !important; /* ★ .data-table 의 overflow:hidden 무력화 */ box-shadow: none; /* 잘림 방지 — 둥근 모서리 효과는 모달이 담당 */ border-radius: 0; } /* 결과 모달 본문: 양축 스크롤 컨테이너 */ .result-panel-body, .result-detail-content { overflow-x: auto; overflow-y: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } /* ─── 컬럼별 너비 전략 (자연스러움 + 한 화면 우선) ────────────────────── 원칙: 1. 이름/팀 같은 한글 단어는 한 줄로 유지 — 글자 단위 줄바꿈 절대 금지 2. 길면 차라리 table 이 넓어져 가로 스크롤이 일어나도록 (셀이 짤리는 것보다 자연스러움) 3. 비고(remark) 는 어절 단위로 줄바꿈 허용 (긴 문구가 보이도록) 4. .data-table 기본은 white-space:nowrap — 이를 유지하되 비고만 normal */ /* 비고/remark 컬럼: 어절 단위 자연스러운 줄바꿈 — 잘려서 안 보이는 문제 해결 */ .result-panel .data-table tbody td:last-child, .result-panel .field-table tbody td:last-child { white-space: normal; word-break: keep-all; /* 한글: 어절(공백/구두점) 단위로만 줄바꿈 */ line-height: 1.3; max-width: 110px; min-width: 50px; } /* ─── 모바일 (≤480px) — 가독성 최우선 (3차 피드백 반영) ───────────────── 사용자 요구: "글씨 너무 작음, 우측으로 스크롤 해서 보더라도 가독성 떨어지면 안됨" → 폰트 13px, 패딩 8px 로 키움. 한 화면에 안 들어오면 자연스럽게 가로 스크롤. */ @media (max-width: 480px) { .result-panel .data-table th, .result-panel .field-table th { padding: 8px 6px; font-size: 12px; letter-spacing: 0; line-height: 1.3; white-space: nowrap; /* 헤더는 무조건 한 줄 — "선/수/명" 같은 글자 분리 방지 */ } .result-panel .data-table td, .result-panel .field-table td { padding: 8px 6px; font-size: 13px; /* ★ 11 → 13 (가독성 우선) */ line-height: 1.35; } /* 이름/소속: 한글은 한 줄 유지 — 글자 단위 줄바꿈 차단. 긴 팀명(예: "대전광역시청") 은 표가 넓어져 가로 스크롤로 폴백. */ .result-panel .data-table td[style*="text-align:left"], .result-panel .field-table td[style*="text-align:left"] { font-size: 13px; white-space: nowrap; /* ★ 한글 글자 분리 방지 */ max-width: none; /* 폭 제한 제거 — nowrap 으로 자연 폭 사용 */ } .result-panel .data-table th[style*="text-align:left"], .result-panel .field-table th[style*="text-align:left"] { white-space: nowrap; } /* 시도 기록 셀: 가독성 우선 — 17m95 같은 기록이 한 줄에 들어가도록 */ .result-panel .field-table td.attempt-cell, .result-panel .field-table .att-col-first, .result-panel .field-table .att-col-odd, .result-panel .field-table .att-col-even, .result-panel .field-table .att-col-best { min-width: 50px; padding: 8px 5px; font-size: 13px; /* ★ 11 → 13 */ white-space: nowrap; } /* 비고 컬럼: 모바일에서도 어절 단위 줄바꿈 허용 — 긴 비고가 다 보이도록 */ .result-panel .data-table tbody td:last-child, .result-panel .field-table tbody td:last-child { max-width: 110px; white-space: normal; word-break: keep-all; font-size: 12px; line-height: 1.35; } } /* ─── 결과 모달 내 필드 테이블: 검은 세로선 제거 ──────────────────────── .field-table 의 .att-col-first / .att-col-best 는 기록입력 페이지에서 "시도 시작" / "기록 컬럼" 을 강조하려고 border-left: 2px solid #000 임. → 결과 모달에서는 시각적으로 거슬리고 가독성 해침. 가벼운 회색선으로 대체. */ .result-panel .field-table th.att-col-first, .result-panel .field-table td.att-col-first, .result-panel .field-table th.att-col-best, .result-panel .field-table td.att-col-best { border-left: 1px solid #e0e0e0 !important; /* 검정 2px → 옅은 회색 1px */ } /* 결과 모달 셀 경계: 기록입력 페이지의 1px solid #333 도 결과보기에선 옅게 */ .result-panel .field-table th, .result-panel .field-table td { border: 1px solid #e8e8e8 !important; } /* 단, 선수와 선수 사이 가로 구분선은 살짝 진하게 (구분 명확하게) */ .result-panel .field-table.field-2row-table .field-row2 td { border-bottom: 2px solid #bbb !important; } /* ============================================================ BUTTONS ============================================================ */ .btn { padding: 7px 18px; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.3; text-align: center; vertical-align: middle; /* 모바일에서 더블탭 줌 방지 + 텍스트 선택 방지 (UX) */ touch-action: manipulation; -webkit-user-select: none; user-select: none; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active:not(:disabled) { transform: translateY(0) scale(0.97); transition-duration: 60ms; box-shadow: none; } .btn:disabled { opacity: 0.35; cursor: not-allowed; } .btn-primary { background: var(--green); color: #fff; } .btn-primary:hover:not(:disabled) { background: #258a69; } .btn-accent { background: var(--blue); color: #fff; } .btn-accent:hover:not(:disabled) { background: #2f6ab5; } .btn-success { background: #C24A2E; color: #fff; } .btn-success:hover:not(:disabled) { background: #1d9359; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover:not(:disabled) { background: #c82333; } .btn-outline { background: var(--white); color: var(--text); border: 1px solid var(--gray); } .btn-outline:hover:not(:disabled) { background: var(--gray-light); border-color: var(--gray-mid); } .btn-outline:active:not(:disabled), .btn-outline:focus:not(:disabled) { color: var(--text); background: var(--gray-light); } .btn-ghost { background: transparent; color: var(--gray-dark); } .btn-ghost:hover:not(:disabled) { background: var(--gray-light); } .btn-sm { padding: 4px 10px; font-size: 11px; } .btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; } /* Document export buttons — semantic color coding */ .btn-excel { background: #2d5016; color: #fff; } .btn-excel:hover:not(:disabled) { background: #1f3a0f; } .btn-pdf { background: #c0392b; color: #fff; } .btn-pdf:hover:not(:disabled) { background: #962f23; } /* Soft danger — for destructive secondary actions (e.g. delete logo) */ .btn-danger-soft { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; } .btn-danger-soft:hover:not(:disabled) { background: #fecaca; border-color: #f87171; } /* ============================================================ TYPOGRAPHY UTILITIES — replaces repeated inline font-size:11px/12px patterns ============================================================ */ .t-xs { font-size: 11px; } .t-sm { font-size: 11px; } .t-md { font-size: 12px; } .t-lg { font-size: 13px; } .t-muted { color: var(--text-muted); } .t-bold { font-weight: 600; } .t-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 6px; } .t-help { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } .t-help-lg { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; } .t-checkbox-row { font-size: 12px; display: flex; align-items: center; gap: 4px; } .t-input-bare { width: 100%; font-size: 11px; border: none; background: transparent; } /* ============================================================ STATUS BADGES ============================================================ */ .status-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; text-align: center; vertical-align: middle; line-height: 1.5; } .status-registered { background: var(--warning-light); color: #7a6400; } .status-checked_in { background: var(--green-light); color: #065f46; } .status-no_show { background: var(--danger-light); color: #991b1b; } /* ============================================================ DASHBOARD — Competition Info ============================================================ */ .comp-info { background: var(--white); border-radius: var(--radius-lg); padding: 16px 24px; margin-bottom: 16px; box-shadow: var(--shadow); } .comp-info table { border-collapse: collapse; } .comp-info th { text-align: right; padding: 4px 16px 4px 0; font-size: 12px; color: var(--gray-dark); font-weight: 600; white-space: nowrap; border: none; background: none; } .comp-info td { text-align: left; padding: 4px 0; font-size: 14px; font-weight: 700; border: none; } /* ============================================================ DASHBOARD — Gender Tabs ============================================================ */ .gender-tabs { display: flex; gap: 2px; margin-bottom: 16px; } .gender-tab { padding: 8px 28px; border: none; background: var(--white); color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; border-bottom: 2.5px solid transparent; transition: all 0.15s; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-sm); letter-spacing: 0.3px; } .gender-tab:hover { color: var(--text); } .gender-tab[data-gender="M"].active { color: #1a2a5e; border-bottom-color: #1a2a5e; background: #e8eaf0; } .gender-tab[data-gender="F"].active { color: #8E2A6B; border-bottom-color: #8E2A6B; background: #F1E3EC; } .gender-tab[data-gender="X"].active { color: #1F7A6D; border-bottom-color: #1F7A6D; background: #E0F0ED; } .gender-tab.active { color: #1a2a5e; border-bottom-color: #1a2a5e; background: #e8eaf0; } /* ============================================================ DASHBOARD — Matrix ============================================================ */ .matrix-section { margin-bottom: 20px; /* overflow:hidden 을 제거 — 자식 .matrix-scroll-wrap 의 가로 스크롤이 부모에 의해 잘리는 문제를 막는다. (mobile right-cut 픽스) */ max-width: 100%; } .matrix-scroll-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* Always show scrollbar on PC */ scrollbar-width: thin; scrollbar-color: #b0b0b0 #f0f0f0; max-width: 100%; /* iOS 관성 스크롤 활성화를 위한 보조 */ touch-action: pan-x pan-y; } .matrix-scroll-wrap::-webkit-scrollbar { height: 10px; } .matrix-scroll-wrap::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 5px; } .matrix-scroll-wrap::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 5px; min-width: 40px; } .matrix-scroll-wrap::-webkit-scrollbar-thumb:hover { background: #888; } /* Force scrollbar to always be visible (not auto-hide) */ @supports (overflow: overlay) { .matrix-scroll-wrap { overflow-x: auto !important; } } .matrix-section-title { font-family: var(--font-brand); font-size: 13px; font-weight: 400; color: var(--gray-dark); letter-spacing: 1.5px; padding: 6px 12px; background: var(--gray-light); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 2px solid var(--gray); } .matrix-table { /* width:100% 가 강제되면 모바일에서 마지막 컬럼이 잘리고 가로 스크롤이 활성화되지 않음. min-width:100% 로 풀어주면 데스크톱에서는 전체 폭을 채우고, 컬럼 합계가 화면을 넘는 모바일에서는 자연스럽게 스크롤됨. */ min-width: 100%; width: max-content; border-collapse: collapse; background: var(--white); box-shadow: var(--shadow); border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-bottom: 0; } .matrix-table th { background: var(--gray-light); color: var(--gray-dark); padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--gray); text-align: center; white-space: nowrap; } .matrix-table th:first-child { text-align: left; } /* 모바일에서 마지막 컬럼이 화면 가장자리에 닿지 않도록 우측 안전 여백 확보 */ .matrix-table th:last-child, .matrix-table td:last-child { padding-right: 16px; } .matrix-table .event-name { white-space: normal; word-break: keep-all; line-height: 1.3; min-width: 60px; } .matrix-table td { padding: 10px 12px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; white-space: nowrap; } .matrix-table td:first-child { font-weight: 700; font-size: 14px; } .matrix-table tbody tr:hover { background: var(--gray-light); } .matrix-table tbody tr:last-child td { border-bottom: none; } .round-cell { text-align: center; } .round-btn { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: all 0.12s; margin: 1px; text-align: center; vertical-align: middle; line-height: 1.4; } .round-btn.status-none { background: var(--gray-light); color: var(--text-muted); cursor: default; } .round-btn.status-created { background: var(--gray-light); color: var(--gray-dark); } .round-btn.status-created:hover { background: var(--gray); } .round-btn.status-ready { background: var(--gray-light); color: var(--gray-dark); } .round-btn.status-ready:hover { background: var(--gray); } .round-btn.status-active { background: var(--blue-light); color: var(--accent); } .round-btn.status-active:hover { background: var(--blue-soft); } .round-btn.status-done { background: var(--green-light); color: var(--green); } .round-btn.status-done:hover { background: var(--green-soft); } /* ============================================================ SELECTOR ROW ============================================================ */ .selector-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .selector-row select { padding: 7px 14px; border: 1px solid var(--gray); border-radius: var(--radius); font-size: 13px; background: var(--white); color: var(--text); outline: none; cursor: pointer; } .selector-row select:focus { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); } /* ============================================================ CALLROOM ============================================================ */ .barcode-section { background: var(--white); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--shadow); border-left: 4px solid var(--green); } .barcode-input-area { display: flex; align-items: center; gap: 8px; } .barcode-input-area input { flex: 1; min-width: 200px; padding: 9px 14px; border: 1.5px solid var(--gray); border-radius: var(--radius); font-size: 15px; font-weight: 600; outline: none; transition: all 0.15s; } .barcode-input-area input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light); } .barcode-banner { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; font-weight: 600; text-align: center; animation: slideDown 0.2s ease; } .barcode-banner.success { background: var(--green-light); color: #065f46; border-left: 4px solid var(--green); } .barcode-banner.error { background: var(--danger-light); color: #991b1b; border-left: 4px solid var(--danger); } .barcode-banner.already { background: var(--warning-light); color: #7a6400; border-left: 4px solid var(--warning); } @keyframes slideDown { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} } .callroom-stats { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .stat-card { background: var(--white); border-radius: var(--radius-lg); padding: 10px 20px; box-shadow: var(--shadow); text-align: center; min-width: 88px; border-top: 3px solid var(--gray); } .stat-card .stat-number { font-size: 22px; font-weight: 800; } .stat-card .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } /* ============================================================ RECORD TABS (within record page) ============================================================ */ .record-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--gray); } .record-tab { padding: 8px 24px; border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2.5px solid transparent; transition: all 0.15s; } .record-tab:hover { color: var(--text); } .record-tab.active { color: var(--green); border-bottom-color: var(--green); } .rec-panel { display: none; } .rec-panel.active { display: block; } /* ============================================================ TRACK INLINE EDIT ============================================================ */ .track-hint { background: var(--blue-light); border: 1px solid var(--blue-soft); border-radius: var(--radius); padding: 6px 14px; margin-bottom: 10px; font-size: 12px; color: var(--accent); font-weight: 500; } .track-time-input { width: 110px; padding: 5px 8px; border: 1.5px solid var(--gray); border-radius: 4px; font-size: 14px; font-weight: 600; text-align: center; font-family: var(--font-mono); outline: none; background: var(--white); transition: all 0.15s; } .track-time-input:focus { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); } .track-time-input.saving { background: var(--green-light); border-color: var(--green); } .track-time-input.has-value { color: var(--text); } .track-time-input.error { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-light); } .track-time-display { font-weight: 700; font-family: var(--font-mono); font-size: 14px; cursor: pointer; padding: 5px 10px; border-radius: 4px; border: 1.5px solid transparent; transition: all 0.12s; display: inline-block; background: transparent; } .track-time-display:hover { background: var(--blue-light); border-color: var(--blue-soft); } .track-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .track-actions .btn-success { margin-left: auto; } /* ============================================================ QUALIFICATION PANEL ============================================================ */ .qual-panel { background: var(--white); border-radius: var(--radius-lg); padding: 18px; margin-top: 14px; box-shadow: var(--shadow); border-left: 4px solid var(--blue); } .qual-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .qual-panel-header h3 { font-size: 15px; color: var(--accent); font-weight: 700; } .qual-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; } .qual-checkbox-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--gray-light); border-radius: var(--radius); margin-bottom: 4px; transition: background 0.1s; } .qual-checkbox-item:hover { background: var(--blue-light); } .qual-checkbox-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; } .qual-rank { font-weight: 800; min-width: 26px; font-size: 12px; color: var(--accent); } .qual-name { font-weight: 600; font-size: 13px; flex: 1; } .qual-time { color: var(--gray-dark); font-size: 12px; font-family: var(--font-mono); } .qual-actions { margin-top: 12px; display: flex; gap: 8px; } /* ============================================================ FIELD ============================================================ */ .field-two-panel { display: grid; grid-template-columns: 1fr 260px; gap: 14px; } @media (max-width: 1000px) { .field-two-panel { grid-template-columns: 1fr; } } .field-input-panel { overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #b0b0b0 #f0f0f0; } .field-input-panel::-webkit-scrollbar { height: 10px; } .field-input-panel::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 5px; } .field-input-panel::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 5px; min-width: 40px; } /* 마우스 드래그 스크롤 중 (common.js) — 텍스트 선택 방지 */ .is-drag-scrolling, .is-drag-scrolling * { user-select: none !important; cursor: grabbing !important; } .field-ranking-panel { background: var(--white); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow); max-height: 480px; overflow-y: auto; border-top: 3px solid var(--green); } .field-ranking-panel h3 { font-size: 14px; margin-bottom: 8px; font-weight: 700; } .ranking-item { display: flex; align-items: center; padding: 6px 8px; border-bottom: 1px solid #f0f2f5; gap: 8px; font-size: 12px; border-radius: 3px; } .ranking-item.top8 { background: var(--green-light); } .ranking-rank { font-weight: 800; min-width: 24px; } .ranking-name { flex: 1; font-weight: 600; } .ranking-best { font-weight: 700; color: var(--green); font-family: var(--font-mono); } .field-table { border: 1px solid #333; border-collapse: collapse; width: 100%; } .field-table td { font-variant-numeric: tabular-nums; white-space: nowrap; } .field-table td.attempt-cell { min-width: 52px; font-size: 12px; font-family: var(--font-mono); cursor: pointer; transition: background 0.1s; } .field-table td.attempt-cell:hover { background: var(--gray-light); } .field-table td.attempt-cell-editing { padding: 2px; } /* Inline distance input */ .field-dist-input { width: 72px; padding: 4px 6px; border: 2px solid var(--green); border-radius: 3px; font-size: 13px; font-weight: 600; text-align: center; font-family: var(--font-mono); outline: none; background: var(--white); transition: all 0.15s; } .field-dist-input:focus { box-shadow: 0 0 0 2px var(--green-light); } .field-dist-input.error { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-light); } .top8-highlight { background-color: var(--green-light) !important; } .best-mark { font-weight: 700; color: var(--green); font-family: var(--font-mono); } .foul-mark { color: var(--danger); font-weight: 700; } .no-rank { color: var(--text-muted); } /* ============================================================ Field Distance — Line-based separation + Navy header ============================================================ */ /* Remove zebra stripes - use lines instead */ .field-table tbody tr.field-row-odd td { background: transparent; } .field-table tbody tr.field-row-odd:hover td { background: #f8f9fb; } .field-table.field-2row-table tbody tr.field-row1.field-row-odd td, .field-table.field-2row-table tbody tr.field-row2.field-row-odd td { background: transparent; } /* Navy header */ .field-table thead th { background: #1b2a4a; color: #fff; border-bottom: 2px solid #0f1d36; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; padding: 7px 6px; } /* Cell borders — black lines for ALL cells (th + td) */ .field-table th, .field-table td { border: 1px solid #333 !important; } /* 2-row mode: record↔wind 사이 (같은 선수) = 매우 얇은 선 */ .field-table.field-2row-table .field-row1 td { border-bottom: 1px solid #ccc !important; } .field-table.field-2row-table .field-row1 td[rowspan] { border-bottom: 1px solid #333 !important; } /* 2-row mode: 선수↔선수 사이 (다른 선수) = 두꺼운 검정선 */ .field-table.field-2row-table .field-row2 td { border-bottom: 2.5px solid #000 !important; } /* First attempt & best column — thicker black left border */ .field-table td.att-col-first, .field-table th.att-col-first { border-left: 2px solid #000 !important; } .field-table td.att-col-best, .field-table th.att-col-best { border-left: 2px solid #000 !important; } /* No background colors — transparent cells */ .field-table tbody td.att-col-odd:not(.attempt-cell-editing), .field-table tbody td.att-col-even:not(.attempt-cell-editing) { background: transparent; } .field-table tbody tr.field-row-odd td.att-col-odd:not(.attempt-cell-editing), .field-table tbody tr.field-row-odd td.att-col-even:not(.attempt-cell-editing) { background: transparent; } /* Wind row header */ .field-table thead th.wind-header { background: #1a2a5e; font-size: 11px; padding: 4px 6px; } .nm-mark { color: var(--danger); font-weight: 800; font-size: 12px; } .pass-mark { color: #6b6b6b; font-weight: 700; } .height-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; background: var(--white); padding: 10px 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow); flex-wrap: wrap; border-left: 4px solid var(--blue); } .height-controls label { font-size: 12px; font-weight: 700; color: var(--gray-dark); } .height-controls input { width: 80px; padding: 5px 8px; border: 1.5px solid var(--gray); border-radius: 4px; font-size: 14px; font-weight: 700; text-align: center; font-family: var(--font-mono); } .height-mark { font-weight: 700; font-size: 14px; } .height-mark.mark-O { color: var(--green); } .height-mark.mark-X { color: var(--danger); } .height-mark.mark-PASS, .height-mark.mark-\\- { color: #6b6b6b; font-weight: 700; } .height-result-btns { display: flex; gap: 4px; } .mode-toggle { display: flex; gap: 1px; background: var(--gray); border-radius: var(--radius); overflow: hidden; } .mode-btn { padding: 5px 14px; border: none; background: var(--white); font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text-muted); transition: all 0.12s; } .mode-btn.active { background: var(--green); color: #fff; } .view-mode .action-col { display: none; } /* ============================================================ COMBINED ============================================================ */ .combined-sub-events { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .combined-sub-btn { padding: 7px 14px; border: 1px solid var(--gray); border-radius: var(--radius); background: var(--white); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s; text-decoration: none; color: var(--text); display: inline-flex; align-items: center; gap: 4px; } .combined-sub-btn:hover { border-color: var(--blue); background: var(--blue-light); } .combined-sub-btn.completed { border-color: var(--green); background: var(--green-light); color: var(--green); } .combined-sub-btn .sub-order { display: inline-block; background: var(--gray-dark); color: #fff; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; margin-right: 4px; } .combined-sub-btn.completed .sub-order { background: var(--green); } .combined-total-points { font-weight: 800; font-size: 15px; color: var(--green); font-family: var(--font-mono); } /* ============================================================ COMBINED — Spreadsheet-style Tab UI ============================================================ */ .combined-spreadsheet { margin-top: 4px; } .combined-tab-bar { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gray); } .combined-tab-btn { padding: 6px 12px; border: 1px solid var(--gray); border-radius: var(--radius) var(--radius) 0 0; background: var(--white); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.12s; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; border-bottom: 2.5px solid transparent; margin-bottom: -2px; } .combined-tab-btn:hover { color: var(--text); background: var(--gray-light); } .combined-tab-btn.active { color: var(--green); border-bottom-color: var(--green); background: var(--white); font-weight: 700; } .combined-tab-btn.tab-completed { border-color: var(--green-soft); color: var(--green); } .combined-tab-btn.combined-tab-overview { font-weight: 700; color: var(--accent); } .combined-tab-btn.combined-tab-overview.active { color: var(--accent); border-bottom-color: var(--accent); } .combined-tab-order { display: inline-block; background: var(--gray-dark); color: #fff; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; } .combined-tab-btn.tab-completed .combined-tab-order { background: var(--green); } .combined-tab-btn.active .combined-tab-order { background: var(--green); } /* Combined Day Label */ .combined-day-label { display: inline-flex; align-items: center; padding: 4px 8px; font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; border-right: 2px solid var(--blue-soft); margin-right: 2px; } .combined-day-row { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; } /* Combined Overview Table */ .combined-overview-wrap { padding: 4px 0; } .combined-overview-table .combined-overview-th { font-size: 11px !important; padding: 3px 2px !important; writing-mode: vertical-lr; max-width: 26px; cursor: pointer; transition: background 0.12s; } .combined-overview-table .combined-overview-th:hover { background: var(--blue-light) !important; } .combined-overview-table .combined-overview-th.th-completed { color: var(--green) !important; } .combined-cell { padding: 2px 3px !important; line-height: 1.2; cursor: pointer; transition: background 0.1s; } .combined-cell:hover { background: var(--blue-light) !important; } .combined-cell-record { font-size: 11px; font-family: var(--font-mono); } .combined-cell-points { font-size: 11px; color: var(--green); font-weight: 700; } .combined-cell-empty { color: var(--text-muted); } .combined-rank-cell { width: 50px; } /* Combined Sub-Event Input Table */ .combined-sub-header { margin-bottom: 12px; } .combined-sub-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .combined-sub-nav h3 { font-size: 16px; font-weight: 700; } .combined-sub-unit { font-size: 12px; color: var(--text-muted); font-weight: 500; } .combined-sub-hint { background: var(--blue-light); border: 1px solid var(--blue-soft); border-radius: var(--radius); padding: 6px 14px; font-size: 12px; color: var(--accent); font-weight: 500; } .combined-record-input { width: 110px; padding: 5px 8px; border: 1.5px solid var(--gray); border-radius: 4px; font-size: 14px; font-weight: 600; text-align: center; font-family: var(--font-mono); outline: none; background: var(--white); transition: all 0.15s; } .combined-record-input:focus { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); } .combined-record-input.saving { background: var(--green-light); border-color: var(--green); } .combined-record-input.has-value { color: var(--text); } .combined-record-input.error { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-light); } .combined-wa-cell { font-family: var(--font-mono); } .combined-wa-value { font-weight: 700; color: var(--green); } .combined-wa-preview { color: var(--blue) !important; } .combined-cum-cell { font-family: var(--font-mono); } .combined-cum-prev { color: var(--text-muted); font-size: 12px; } .combined-input-table th { white-space: nowrap; } /* Combined WA Summary Panel */ .combined-wa-summary { background: var(--bg); border: 1px solid var(--gray); border-radius: var(--radius); padding: 8px; margin-bottom: 12px; max-height: 220px; overflow-y: auto; } .combined-wa-summary .data-table { margin-bottom: 0; } .combined-wa-summary td, .combined-wa-summary th { padding: 4px 8px; } .combined-cat-badge { display: inline-block; background: var(--accent); color: var(--white); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle; margin-left: 4px; } /* ============================================================ RESULTS DASHBOARD ============================================================ */ .results-dashboard { display: grid; grid-template-columns: 320px 1fr; gap: 16px; min-height: 600px; } @media (max-width: 900px) { .results-dashboard { grid-template-columns: 1fr; } } .results-matrix-panel { background: var(--white); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow); max-height: calc(100vh - 160px); overflow-y: auto; position: sticky; top: 80px; } .results-detail-panel { min-height: 400px; } .results-preview { background: var(--white); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); } .results-content { min-height: 160px; } .results-header-area { text-align: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--text); } .results-header-area h2 { font-size: 17px; font-weight: 800; } .results-header-area p { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .export-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Medal badges */ .medal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; } .medal.gold { background: linear-gradient(135deg, #f0c027, #d4a017); box-shadow: 0 1px 3px rgba(212,160,23,0.4); } .medal.silver { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); box-shadow: 0 1px 3px rgba(160,160,160,0.4); } .medal.bronze { background: linear-gradient(135deg, #cd7f32, #a86520); box-shadow: 0 1px 3px rgba(168,101,32,0.4); } .res-medal { background: var(--green-light) !important; } /* ============================================================ MODALS ============================================================ */ .modal-overlay { position: fixed; top:0;left:0;right:0;bottom:0; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); animation: overlayIn var(--dur-base) var(--ease-out); } @keyframes overlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(2px); } } .modal { background: var(--white); border-radius: var(--radius-lg); width: 420px; max-width: 95vw; box-shadow: var(--shadow-md); overflow: hidden; animation: modalIn var(--dur-base) var(--ease-out); } .modal-sm { width: 360px; } @keyframes modalIn { from{opacity:0;transform:scale(0.96) translateY(8px);} to{opacity:1;transform:scale(1) translateY(0);} } .modal-header { background: var(--gray-light); padding: 16px 20px; border-bottom: 1px solid var(--gray); } .modal-title { font-size: 15px; font-weight: 700; } .modal-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .modal-records { padding: 10px 20px; background: var(--bg); border-bottom: 1px solid #f0f2f5; font-size: 12px; } .modal-records .record-line { padding: 2px 0; display: flex; justify-content: space-between; } .modal-records .record-best { color: var(--green); font-weight: 600; } .modal-warning { padding: 8px 20px; font-size: 12px; background: var(--warning-light); color: #7a6400; font-weight: 600; } .modal-error { padding: 8px 20px; color: var(--danger); font-size: 12px; font-weight: 600; } .modal-form { padding: 16px 20px; } .modal-form .form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .modal-form label { font-size: 12px; font-weight: 600; min-width: 60px; color: var(--gray-dark); } .modal-form select, .modal-form input[type="number"] { padding: 7px 12px; border: 1.5px solid var(--gray); border-radius: var(--radius); font-size: 13px; flex: 1; outline: none; transition: all 0.15s; } .modal-form input:focus, .modal-form select:focus { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #f0f2f5; background: var(--gray-light); } /* ============================================================ PARENT LINK BAR ============================================================ */ .parent-link-bar { display: flex; align-items: center; gap: 10px; background: var(--blue-light); border: 1px solid var(--blue-soft); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px; font-size: 12px; } .sub-event-tag { display: inline-block; background: var(--blue); color: #fff; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; } /* ============================================================ FOOTER ============================================================ */ .footer { padding: 20px 24px; max-width: 1440px; margin: 0 auto; } .footer details { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px 14px; } .footer summary { cursor: pointer; font-weight: 600; font-size: 11px; color: var(--text-muted); } .audit-entry { font-size: 11px; padding: 3px 0; border-bottom: 1px solid #f0f2f5; color: var(--gray-dark); font-family: var(--font-mono); } /* ============================================================ MISC ============================================================ */ .empty-state { text-align: center; padding: 36px; color: var(--text-muted); font-size: 13px; } /* 접근성 (2026-09, 규칙집 §12): 키보드 포커스는 항상 보이게, 글자 최소 11px(배지·라벨)·13px(본문) */ :focus-visible { outline: 2px solid #C24A2E; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(194,74,46,.25); } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* 세 상태(비어 있음 · 불러오는 중 · 실패) 공통 — common.js uiStateHtml() (규칙집 §10) */ .ui-state { text-align: center; padding: 36px 16px; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ui-state .ui-state-title { font-size: 14px; font-weight: 700; color: var(--text); } .ui-state .ui-state-hint { font-size: 12px; max-width: 46ch; line-height: 1.5; } .ui-state .ui-state-action { margin-top: 8px; } .ui-state.is-error .ui-state-title { color: var(--danger, #B4232C); } .ui-state .ui-state-spinner { width: 22px; height: 22px; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--accent, #C24A2E); border-radius: 50%; animation: ui-state-spin .8s linear infinite; margin-bottom: 4px; } @keyframes ui-state-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ui-state .ui-state-spinner { animation: none; } } /* ============================================================ LOADING SPINNER ============================================================ */ .loading-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-muted); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-height: 200px; } .loading-spinner { width: 36px; height: 36px; border: 3.5px solid var(--gray); border-top-color: var(--green); border-radius: 50%; animation: spin 0.7s linear infinite; margin-bottom: 14px; } .loading-overlay p { font-size: 13px; font-weight: 500; color: var(--text-muted); } @keyframes spin { to { transform: rotate(360deg); } } /* Inline loading (inside panels) */ .loading-inline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--text-muted); font-size: 12px; } .loading-inline .loading-spinner { width: 20px; height: 20px; border-width: 2.5px; margin-bottom: 0; } /* ============================================================ SKELETON LOADER — 빈 화면 대신 회색 박스 + shimmer 애니메이션 ============================================================ 사용법:
(한 줄 짜리 텍스트)
(제목)
(카드형)
(여러 줄 자동 묶음)
*/ .skeleton { display: block; background: linear-gradient(90deg, var(--gray-light) 0%, #f8f9fb 50%, var(--gray-light) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 6px; /* 사용자가 잘못 클릭 못 하도록 */ pointer-events: none; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 12px; margin: 6px 0; } .skeleton-title { height: 18px; width: 60%; margin: 8px 0 12px; } .skeleton-card { height: 80px; margin: 10px 0; border-radius: 10px; } .skeleton-block { padding: 16px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); animation: fadeIn var(--dur-base) var(--ease-out); } .skeleton-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; } .skeleton-row .skeleton { flex: 1; height: 16px; } .skeleton-row .skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; } /* 페이드 자연스러운 전환을 위해 사용 */ .fade-in { animation: fadeIn var(--dur-base) var(--ease-out); } .fade-in-slow { animation: fadeIn var(--dur-slow) var(--ease-out); } /* ============================================================ LEFT PANEL — Fixed gender tabs + scrollable event list ============================================================ */ .record-matrix-panel, .callroom-matrix-panel { display: flex; flex-direction: column; } .record-matrix-panel .gender-tabs-fixed, .callroom-matrix-panel .gender-tabs-fixed, .admin-evt-matrix-panel .gender-tabs-fixed { flex-shrink: 0; position: sticky; top: 0; z-index: 2; background: var(--white); padding-bottom: 4px; border-bottom: 1px solid var(--gray); margin-bottom: 4px; } .record-matrix-panel .matrix-scroll-area, .callroom-matrix-panel .matrix-scroll-area, .admin-evt-matrix-panel .matrix-scroll-area { flex: 1; overflow-y: auto; min-height: 0; } .flash-success { background-color: var(--green-light) !important; transition: background-color 0.3s; } .flash-error { background-color: var(--danger-light) !important; transition: background-color 0.3s; } .confirm-overlay { display: none; } /* ============================================================ DASHBOARD-STYLE CALLROOM & RECORD ============================================================ */ /* Two-panel dashboard layout */ .callroom-dashboard, .record-dashboard { display: grid; grid-template-columns: 320px 1fr; gap: 16px; min-height: 600px; } @media (max-width: 900px) { .callroom-dashboard, .record-dashboard { grid-template-columns: 1fr; } } /* 종목 목록(왼쪽 패널) 접기 — 필드 종목처럼 입력 화면이 넓어야 할 때. 상태는 기기에 저장(rec_sidebar_collapsed) */ .record-dashboard.sb-collapsed { grid-template-columns: minmax(0, 1fr); } .record-dashboard.sb-collapsed .record-matrix-panel { display: none; } .sb-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; } .sb-toggle[aria-expanded="false"] { background: var(--primary, #C24A2E); color: #fff; border-color: var(--primary, #C24A2E); } @media (max-width: 600px) { .sb-toggle .sb-toggle-label { display: none; } } /* Matrix Panel (Left) */ .callroom-matrix-panel, .record-matrix-panel { background: var(--white); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow); max-height: calc(100vh - 160px); overflow: hidden; position: sticky; top: 80px; display: flex; flex-direction: column; } /* Detail Panel (Right) */ .callroom-detail-panel, .record-detail-panel { min-height: 400px; /* grid 1fr 자식은 기본 min-width:auto 라 내용(넓은 표)만큼 커져 페이지 전체가 넘치고, html/body overflow-x:hidden 에 잘려 "화면이 갇힘". min-width:0 으로 패널 폭을 고정해야 안쪽 .field-input-panel / .matrix-scroll-wrap 이 진짜 스크롤 상자가 된다. */ min-width: 0; max-width: 100%; } /* Matrix Section */ .cr-matrix-section { margin-bottom: 14px; } .cr-matrix-title { font-family: var(--font-brand); font-size: 11px; font-weight: 400; color: var(--gray-dark); letter-spacing: 1px; padding: 4px 8px; background: var(--gray-light); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 2px solid var(--gray); } .cr-matrix-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 4px; } .cr-event-btn { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border: 1.5px solid var(--gray); border-radius: var(--radius); background: var(--white); cursor: pointer; transition: all 0.12s; min-width: 70px; font-size: 11px; text-align: center; } .cr-event-btn:hover { border-color: var(--blue); background: var(--blue-light); } .cr-event-btn.cr-active { border-color: var(--green); background: var(--green-light); box-shadow: 0 0 0 2px var(--green-soft); } .cr-event-btn.cr-created { border-color: var(--gray); color: var(--gray-dark); } .cr-event-btn.cr-active-status { border-color: var(--blue-soft); background: var(--blue-light); } .cr-event-btn.cr-done { border-color: var(--green-soft); background: var(--green-light); } .cr-evt-name { font-weight: 800; font-size: 11px; line-height: 1.2; } .cr-evt-round { font-size: 11px; color: var(--text-muted); font-weight: 500; } /* Detail Header */ .cr-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; background: var(--white); padding: 12px 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .cr-detail-header h3 { font-size: 16px; font-weight: 800; } /* Placeholder */ .detail-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; color: var(--text-muted); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .placeholder-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; } .detail-placeholder p { font-size: 14px; font-weight: 500; } /* Progress bar for callroom */ .cr-progress-bar { height: 6px; background: var(--gray-light); border-radius: 3px; margin-bottom: 4px; overflow: hidden; } .cr-progress-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.3s ease; } .cr-progress-label { font-size: 11px; color: var(--text-muted); text-align: right; margin-bottom: 12px; font-weight: 600; } /* Row highlight for callroom status */ .row-checked-in { background-color: var(--green-light) !important; } .row-no-show { background-color: var(--danger-light) !important; } /* Heat tabs */ .heat-tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--gray); } .heat-tab { padding: 6px 16px; border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; border-bottom: 2.5px solid transparent; transition: all 0.12s; } .heat-tab:hover { color: var(--text); } .heat-tab.active { color: var(--green); border-bottom-color: var(--green); } /* ============================================================ SECTION LABEL ============================================================ */ .section-label { font-family: var(--font-brand); font-size: 13px; font-weight: 400; color: var(--gray-dark); letter-spacing: 1px; padding: 8px 0; margin-bottom: 12px; border-bottom: 2px solid var(--gray); } /* ============================================================ RECORD — Compact Matrix (left panel) ============================================================ */ .matrix-section-compact { margin-bottom: 10px; } .matrix-section-compact .matrix-section-title { font-size: 11px; padding: 4px 8px; } .matrix-table-compact th { font-size: 11px; padding: 5px 4px; } .matrix-table-compact td { padding: 5px 4px; font-size: 12px; } /* 소집실/기록실/관리 매트릭스: 종목 셀이 시간·Call Room 배지로 넓어지면 준결승·결승 라운드 버튼이 320px 패널 밖으로 밀려 잘리던 문제 → 고정 레이아웃으로 라운드 열 폭을 확보하고 종목명은 줄바꿈시켜 항상 표시. */ .matrix-table-compact { table-layout: fixed; width: 100%; min-width: 0; } .matrix-table-compact th:first-child, .matrix-table-compact td:first-child { width: auto; } .matrix-table-compact th:not(:first-child), .matrix-table-compact td:not(:first-child) { width: 58px; } .rec-matrix-event { font-weight: 600; font-size: 12px !important; text-align: left !important; white-space: normal; word-break: keep-all; line-height: 1.25; } .rec-round-btn { font-size: 12px !important; padding: 3px 8px !important; white-space: nowrap; } .rec-round-btn.rec-btn-active { background: var(--green) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--green-soft); } /* ============================================================ RESULT / CALLROOM DETAIL OVERLAY ============================================================ */ .result-detail-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(3px); animation: fadeIn var(--dur-base) var(--ease-out); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .result-detail-modal { background: var(--white); border-radius: var(--radius-lg); width: 90vw; max-width: 1100px; max-height: 90vh; box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; animation: modalIn var(--dur-base) var(--ease-out); min-width: 0; } .callroom-detail-modal { max-width: 800px; } .result-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--gray-light); border-bottom: 1px solid var(--gray); flex-shrink: 0; } .result-detail-header h3 { font-size: 15px; font-weight: 800; } .result-detail-content { flex: 1; overflow-y: auto; overflow-x: auto; padding: 16px 20px; max-height: calc(90vh - 120px); -webkit-overflow-scrolling: touch; min-width: 0; } .result-detail-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #f0f2f5; background: var(--gray-light); flex-shrink: 0; } /* ============================================================ [모바일 최적화] 결과 상세 모달 — 풀스크린 시트 + sticky 컬럼 ============================================================ */ @media (max-width: 768px) { .result-detail-overlay { align-items: stretch; justify-content: stretch; padding: 0; } .result-detail-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; animation: modalSlideUp var(--dur-base) var(--ease-out); } .result-detail-header { padding: 10px 14px; position: sticky; top: 0; z-index: 10; } .result-detail-header h3 { font-size: 14px; } .result-detail-content { padding: 10px 12px; max-height: none; } .result-detail-footer { padding: 8px 12px; } /* 모달 안의 표 — 가로 스크롤 활성화 & 모바일에서 적절한 폰트 */ .result-detail-content table { font-size: 11px; min-width: max-content; } .result-detail-content .matrix-scroll-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 0 -12px; /* 모달 padding 만큼 음수 마진으로 가로 풀폭 활용 */ padding: 0 12px; } /* 표 좌측 핵심 컬럼(순위/BIB/선수명/소속)을 가로 스크롤 시 sticky 고정 */ .result-detail-content table.sticky-leading th:nth-child(-n+4), .result-detail-content table.sticky-leading td:nth-child(-n+4) { position: sticky; background: var(--white); z-index: 2; box-shadow: 1px 0 0 0 var(--gray); } .result-detail-content table.sticky-leading th:nth-child(1), .result-detail-content table.sticky-leading td:nth-child(1) { left: 0; min-width: 30px; } .result-detail-content table.sticky-leading th:nth-child(2), .result-detail-content table.sticky-leading td:nth-child(2) { left: 30px; min-width: 38px; } .result-detail-content table.sticky-leading th:nth-child(3), .result-detail-content table.sticky-leading td:nth-child(3) { left: 68px; min-width: 64px; } .result-detail-content table.sticky-leading th:nth-child(4), .result-detail-content table.sticky-leading td:nth-child(4) { left: 132px; min-width: 56px; box-shadow: 2px 0 4px -1px rgba(0,0,0,0.08); } .result-detail-content table.sticky-leading thead th { background: var(--gray-light); } /* 신기록 배너 — 모바일에서 자연스러운 줄바꿈 */ .record-banner-mobile { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } .record-banner-mobile > .record-chips { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; } } @keyframes modalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============================================================ RESULTS — Unified Side-by-Side Table (남자부 | 여자부) ============================================================ */ .results-unified-table { border-collapse: collapse; } .results-unified-table .results-gender-header th { text-align: center; font-size: 13px; font-weight: 800; padding: 10px 8px; letter-spacing: 1px; } .results-unified-table .gender-header-male { background: #e8ecf4; color: #1a2a5e; border-bottom: 2px solid #1a2a5e; } .results-unified-table .gender-header-female { background: #F1E3EC; color: #8E2A6B; border-bottom: 2px solid #8E2A6B; } .results-unified-table .gender-divider { width: 3px; background: var(--gray); padding: 0 !important; border-left: 2px solid var(--gray-mid); border-right: 2px solid var(--gray-mid); } .results-unified-table .gender-divider-cell { width: 3px; background: var(--gray-light); padding: 0 !important; border-left: 2px solid var(--gray); border-right: 2px solid var(--gray); } .results-unified-table .results-round-header th { font-size: 11px; padding: 5px 6px; } .results-unified-table .round-col-male { background: #eef1f7; color: #1a2a5e; } .results-unified-table .round-col-female { background: #f7f0f2; color: #8E2A6B; } .results-unified-table .event-name-cell { font-weight: 700; font-size: 14px; text-align: left !important; white-space: nowrap; padding-left: 14px !important; } /* Gender-colored result buttons */ .round-btn.result-btn-male { background: #e8ecf4; color: #1a2a5e; border: 1px solid #8090b0; } .round-btn.result-btn-male:hover { background: #d0d8e8; border-color: #1a2a5e; } .round-btn.result-btn-male.status-ready { background: var(--gray-light); color: var(--gray-dark); border-color: var(--gray); } .round-btn.result-btn-male.status-done { background: #1a2a5e; color: #fff; border-color: #1a2a5e; } .round-btn.result-btn-female { background: #F1E3EC; color: #8E2A6B; border: 1px solid #b08090; } .round-btn.result-btn-female:hover { background: #e8d0d8; border-color: #8E2A6B; } .round-btn.result-btn-female.status-ready { background: var(--gray-light); color: var(--gray-dark); border-color: var(--gray); } .round-btn.result-btn-female.status-done { background: #8E2A6B; color: #fff; border-color: #8E2A6B; } /* ============================================================ ICON BADGES (Emoji-free CSS replacements) ============================================================ */ .ico { display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border-radius:4px;padding:1px 5px;line-height:1.3;letter-spacing:0.3px;vertical-align:middle; } .ico-track { background:#eef1f7;color:#1a2a5e;border:1px solid #c0c8d8; } .ico-field { background:#F6E4DF;color:#B8432A;border:1px solid #EFC9BF; } .ico-link { font-size:11px;color:#B8432A;margin-left:3px;font-weight:700;opacity:0.7; } .ico-wind { background:#eef4fa;color:#0369a1;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;border:1px solid #bae6fd; } .ico-doc { font-size:11px;font-weight:700;color:#6b7280; } .ico-callroom { background:#1a2a5e;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:8px;letter-spacing:0.5px;animation:cr-pulse 2s ease-in-out infinite; } @keyframes cr-pulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} } .ico-dot { display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle; } .ico-dot-m { background:#1a2a5e; } .ico-dot-f { background:#8E2A6B; } .ico-dot-x { background:#1F7A6D; } .ico-dot-green { background:#22c55e; } .ico-dot-yellow { background:#eab308; } .ico-dot-gray { background:#d1d5db; } /* ============================================================ ALL-GROUPS DOWNLOAD AREA ============================================================ */ .all-groups-download { display: flex; align-items: center; gap: 6px; margin-right: auto; } .result-detail-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid #f0f2f5; background: var(--gray-light); flex-wrap: wrap; } /* ============================================================ MOBILE RESPONSIVE — Smartphone optimization ============================================================ */ /* Tablets and small laptops */ @media (max-width: 1024px) { .main-content { padding: 12px 14px; } .field-two-panel { grid-template-columns: 1fr; } .combined-overview-table .combined-overview-th { font-size: 8px !important; } .combined-tab-btn { padding: 4px 8px; font-size: 11px; } } /* ============================================================ MOBILE HAMBURGER MENU ============================================================ */ /* 닫기(X) 버튼 — 모든 창·시트·팝업 공통: 연한 원 + 선 X (2026-09-26, 제각각이던 ×·빨간 원·회색 글자 통일) */ .pr-close { flex: none; width: 34px; height: 34px; min-height: 0; border-radius: 50%; border: none; background: #f0ede6; color: #555; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; transition: background .12s; } .pr-close:hover { background: #e6e1d6; } .pr-close:active { background: #ddd7c9; transform: scale(.94); } .pr-close .ui-icon { width: 16px; height: 16px; display: block; } .pr-close.pr-close-dark { background: rgba(255,255,255,.14); color: #fff; } .pr-close.pr-close-dark:hover { background: rgba(255,255,255,.24); } .hamburger-btn { display: none; /* shown only on mobile */ background: none; border: 1.5px solid var(--gray-mid); color: var(--text); font-size: 18px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; transition: all .2s; padding: 0; line-height: 1; margin-left: auto; } .hamburger-btn:active { transform: scale(0.9); } /* 폰 머리글 오른쪽 버튼 묶음(새로고침·메뉴) — 둘 다 같은 모양, 선 아이콘 */ .header-phone-actions { display: none; margin-left: auto; align-items: center; gap: 8px; } .header-phone-actions .hamburger-btn { margin-left: 0; width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0; border-radius: 11px; border: 1.5px solid #e2ddd2; background: #fff; color: #1a2a5e; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .header-phone-actions .hamburger-btn .ui-icon { display: block; } .header-phone-actions .refresh-btn.spinning .ui-icon { animation: prSpin .6s linear infinite; } .header-phone-actions .refresh-btn.done { color: #1b7f4d; border-color: #bfe3cc; background: #e6f4ec; } @keyframes prSpin { to { transform: rotate(360deg); } } .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 9998; opacity: 0; transition: opacity .25s; } .mobile-menu-overlay.open { display: block; opacity: 1; } .mobile-menu { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background: var(--white); z-index: 9999; transition: right .3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow-y: auto; } .mobile-menu.open { right: 0; } .mobile-menu-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-light); display: flex; align-items: center; justify-content: space-between; } .mobile-menu-header .mm-brand { font-family: var(--font-brand); font-size: 16px; letter-spacing: 1.5px; color: var(--text); } .mobile-menu-header .mm-brand .mm-colon { color: #B8432A; } .mobile-menu-header .mm-brand .mm-scope { color: #B8432A; } .mobile-menu-close { } /* 공통 .pr-close */ .mobile-menu-nav { padding: 8px 0; flex: 1; } .mobile-menu-nav a { display: flex; align-items: center; gap: 12px; padding: 14px 24px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; transition: background .15s; } .mobile-menu-nav a:active { background: var(--gray-light); } .mobile-menu-nav a.mm-active { color: #B8432A; font-weight: 700; background: rgba(194,74,46,0.06); } .mobile-menu-divider { height: 1px; background: var(--gray-light); margin: 4px 20px; } .mobile-menu-footer { padding: 12px 20px; border-top: 1px solid var(--gray-light); } .mobile-menu-footer .mm-action { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; background: none; border: none; width: 100%; text-align: left; } .mobile-menu-footer .mm-action:active { opacity: 0.7; } /* Phones in landscape / small tablets */ @media (max-width: 768px) { /* Show hamburger, hide desktop buttons and nav */ .hamburger-btn { display: flex; } .header-phone-actions { display: flex; } .header-btn-group { display: none !important; } .page-nav { display: none !important; } .header-inner { padding: 8px 14px; gap: 8px; } .header-title { font-size: 18px; letter-spacing: 1px; } .header-subtitle { display: none; } .main-content { padding: 10px 10px; } .comp-info { padding: 10px 14px; margin-bottom: 10px; } .comp-info th { font-size: 11px; padding: 3px 8px 3px 0; } .comp-info td { font-size: 12px; } .page-title-bar h2 { font-size: 14px; } /* Stack the dashboard layout */ .callroom-dashboard, .record-dashboard { grid-template-columns: 1fr !important; gap: 10px; } .callroom-matrix-panel, .record-matrix-panel { max-height: none; position: static; overflow: visible; } /* Hide detail placeholder on mobile (no more empty space) */ .callroom-detail-panel .detail-placeholder, .record-detail-panel .detail-placeholder { display: none; } .callroom-detail-panel, .record-detail-panel { min-height: auto; } /* Gender tabs smaller */ .gender-tab { padding: 6px 16px; font-size: 12px; } /* Matrix tables — keep readable, allow horizontal scroll */ .matrix-table th { font-size: 11px; padding: 8px 10px; } .matrix-table td { padding: 8px 10px; font-size: 13px; } .rec-matrix-event { font-size: 12px !important; } .rec-round-btn { font-size: 12px !important; padding: 3px 8px !important; } .round-btn { font-size: 11px; padding: 5px 10px; } /* Data tables — keep readable */ .data-table th { font-size: 11px; padding: 8px 8px; } .data-table td { font-size: 12px; padding: 8px 8px; } /* Track input */ .track-time-input { width: 80px; font-size: 12px; padding: 4px 6px; } .track-hint { font-size: 11px; padding: 4px 10px; } .track-actions { flex-wrap: wrap; } /* Field */ .field-dist-input { width: 56px; font-size: 11px; padding: 3px 4px; } .field-table td.attempt-cell { min-width: 40px; font-size: 11px; } .field-ranking-panel { padding: 10px; } /* Combined */ .combined-tab-bar { gap: 1px; } .combined-tab-btn { padding: 4px 6px; font-size: 11px; } .combined-tab-order { width: 14px; height: 14px; line-height: 14px; font-size: 8px; } .combined-day-label { font-size: 8px; padding: 2px 4px; } .combined-sub-nav { flex-wrap: wrap; } .combined-sub-nav h3 { font-size: 13px; } .combined-wa-summary { max-height: 160px; } .combined-total-points { font-size: 13px; } /* Callroom */ .callroom-stats { gap: 6px; } .stat-card { min-width: 70px; padding: 8px 12px; } .stat-card .stat-number { font-size: 18px; } .barcode-input-area input { min-width: 120px; font-size: 13px; padding: 7px 10px; } /* Buttons */ .btn { padding: 5px 12px; font-size: 12px; } .btn-sm { padding: 3px 8px; font-size: 11px; } /* Modals */ .modal { width: 95vw; } .result-detail-modal { width: 98vw; max-height: 95vh; } /* Heat tabs */ .heat-tab { padding: 4px 10px; font-size: 11px; } /* Height controls */ .height-controls { padding: 8px 10px; gap: 6px; } .height-controls input { width: 65px; font-size: 12px; } /* Results side-by-side table */ .results-unified-table { font-size: 11px; } .results-unified-table .event-name-cell { font-size: 11px !important; padding-left: 6px !important; } .results-unified-table .results-gender-header th { font-size: 11px; padding: 6px 4px; } .results-unified-table .results-round-header th { font-size: 11px; padding: 3px 3px; } /* Qualification panel */ .qual-checkbox-item { padding: 5px 8px; } .qual-name { font-size: 12px; } .qual-time { font-size: 11px; } /* Result footer */ .result-detail-footer { padding: 8px 12px; flex-wrap: wrap; } .all-groups-download { width: 100%; margin-bottom: 6px; } } /* Phones in portrait */ @media (max-width: 480px) { .header-inner { gap: 4px; } .header-title { font-size: 16px; } .main-content { padding: 8px 6px; } .comp-info { padding: 8px 10px; } .page-title-bar { margin-bottom: 8px; } .page-title-bar h2 { font-size: 13px; } /* Gender tabs */ .gender-tab { padding: 5px 12px; font-size: 11px; } /* Round buttons — keep readable */ .round-btn { font-size: 11px; padding: 4px 8px; } /* Track */ .track-time-input { width: 70px; font-size: 11px; } /* Field */ .field-dist-input { width: 48px; font-size: 11px; } .field-table td.attempt-cell { min-width: 34px; font-size: 11px; } .field-ranking-panel { display: none; } /* Combined */ .combined-tab-btn { padding: 3px 4px; font-size: 8px; } .combined-overview-table { font-size: 11px; } .combined-overview-table .combined-overview-th { font-size: 7px !important; max-width: 20px; } /* Callroom */ .stat-card { min-width: 60px; padding: 6px 8px; } .stat-card .stat-number { font-size: 16px; } .stat-card .stat-label { font-size: 8px; } /* Buttons */ .btn { padding: 4px 10px; font-size: 11px; } /* Results overlay */ .result-detail-modal { width: 100vw; max-height: 100vh; border-radius: 0; } .result-detail-header { padding: 10px 12px; } .result-detail-header h3 { font-size: 13px; } .result-detail-content { padding: 10px 8px; max-height: calc(100vh - 100px); } /* Height */ .height-mark { font-size: 12px; } } /* ============================================================ ADMIN PAGE ============================================================ */ .admin-login-card { background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); max-width: 400px; margin: 40px auto; } .admin-login-card h3 { font-size: 16px; font-weight: 700; } .admin-section { background: var(--white); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); } .admin-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gray); } .admin-status-grid { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================ ADMIN MODE BAR (Dashboard) ============================================================ */ .admin-mode-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; margin-bottom: 12px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray); } .admin-mode-bar.admin-active { background: linear-gradient(135deg, #fef6dc 0%, #fff 50%); border-color: var(--warning); } .admin-mode-info { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); } .live-dot-sm { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .admin-mode-bar.admin-active .live-dot-sm { background: var(--warning); } /* ============================================================ HEIGHT TOGGLE UI (Phase 3) ============================================================ */ .height-toggle-table .height-toggle-cell { padding: 3px 4px !important; } .height-attempt-row { display: flex; gap: 2px; justify-content: center; } .height-toggle-btn { width: 28px; height: 28px; border: 1.5px solid var(--gray); border-radius: 4px; background: var(--white); font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); } .height-toggle-btn:hover:not(:disabled) { background: var(--gray-light); border-color: var(--gray-mid); } .height-toggle-btn.mark-O { background: var(--green-light); border-color: var(--green); color: var(--green); } .height-toggle-btn.mark-X { background: var(--danger-light); border-color: var(--danger); color: var(--danger); } .height-toggle-btn.mark-PASS, .height-toggle-btn.mark-pass, .height-toggle-btn.mark-\\- { background: #f0f0f0; border-color: #6b6b6b; color: #6b6b6b; font-weight: 800; } .height-toggle-btn.mark-empty { color: var(--text-muted); font-size: 18px; } .height-toggle-btn:disabled { opacity: 0.3; cursor: not-allowed; } .height-toggle-btn.is-busy { opacity: 0.55; cursor: progress; animation: hbusy 0.8s ease-in-out infinite; } @keyframes hbusy { 0%,100% { transform: scale(1); } 50% { transform: scale(0.92); } } .row-eliminated { opacity: 0.6; } .row-dns { opacity: 0.45; background: #f5f5f5; } .btn-bar-delete { display:inline-block; width:16px; height:16px; line-height:14px; font-size:12px; border:none; background:#ffebee; color:var(--danger); border-radius:50%; cursor:pointer; margin-top:2px; padding:0; } .btn-bar-delete:hover { background:var(--danger); color:#fff; } /* ============================================================ FOUL NOTICE (Phase 3) ============================================================ */ .foul-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--danger); color: #fff; padding: 10px 24px; border-radius: var(--radius-lg); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-md); z-index: 9999; transition: opacity 0.3s; pointer-events: none; } .foul-inline-btn { margin-left: 4px; vertical-align: middle; } .attempt-cell-editing { display: flex; align-items: center; gap: 2px; } /* ============================================================ VIEWER MODE — hide audit log (Phase 9) ============================================================ */ body.viewer-mode .footer { display: none; } /* ============================================================ MOBILE CLOSE BUTTON for result overlay (Phase 8) ============================================================ */ .result-close-btn-mobile { display: none; position: fixed; top: 8px; right: 8px; z-index: 1002; background: var(--white); border: 2px solid var(--gray); border-radius: 50%; width: 36px; height: 36px; font-size: 18px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); } @media (max-width: 768px) { .result-close-btn-mobile { display: flex; } /* Tighter mobile spacing (Phase 8) */ .matrix-table-compact td { padding: 3px 2px; } .rec-round-btn { font-size: 8px !important; padding: 2px 4px !important; } .matrix-section-compact .matrix-section-title { font-size: 11px; padding: 3px 6px; } /* Prevent auto keyboard on callroom (Phase 8) */ .callroom-detail-panel .barcode-input-area input { font-size: 16px; } } @media (max-width: 480px) { .height-toggle-btn { width: 22px; height: 22px; font-size: 11px; } } /* ============================================================ MISSING CLASS FIXES (v7.1) ============================================================ */ .comp-info-line { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-dark); border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; flex-wrap: nowrap; } /* 대회 정보(이름·날짜·장소): 한 줄 유지, 자리 부족하면 … 로 줄임 */ .comp-info-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 액션 버튼(기록지·시간표·영상·공지): 오른쪽에 고정, 절대 줄이거나 줄바꿈 안 함 */ .comp-info-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .comp-info-actions:empty { display: none; } .comp-info-name { font-weight: 700; } .comp-info-sep { color: var(--text-muted); } .comp-info-dates, .comp-info-venue { color: var(--text-muted); } .height-col-header { font-size: 11px; min-width: 46px; } .height-mark-btn { border: none; cursor: pointer; border-radius: var(--radius); font-size: 14px; font-weight: 700; padding: 6px 16px; transition: all 0.12s; } .height-mark-btn[data-mark="O"] { background: var(--green-light); color: var(--green); } .height-mark-btn[data-mark="O"]:hover { background: var(--green); color: #fff; } .height-mark-btn[data-mark="X"] { background: var(--danger-light); color: var(--danger); } .height-mark-btn[data-mark="X"]:hover { background: var(--danger); color: #fff; } .height-mark-btn[data-mark="PASS"] { background: var(--gray-light); color: var(--gray-dark); } .height-mark-btn[data-mark="PASS"]:hover { background: var(--gray-mid); color: #fff; } /* Q/q Qualification Badges */ .qual-badge { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; font-weight: 800; font-size: 12px; cursor: pointer; transition: all 0.15s; } .qual-badge.qual-Q { background: #6b6b6b; color: #fff; } .qual-badge.qual-q { background: #ff8f00; color: #fff; } .qual-badge.qual-none { background: var(--gray-light); color: var(--text-muted); font-size: 11px; } .qual-badge:hover { transform: scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,.2); } .row-qual-selected { background: #F6E4DF !important; } .qual-panel { background: var(--card); border: 1.5px solid var(--primary); border-radius: var(--radius); padding: 16px; margin-top: 12px; } .qual-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .qual-panel-header h3 { margin: 0; font-size: 15px; } /* ============================================================ STATUS CODE BADGES & SELECT ============================================================ */ .sc-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; } .sc-DQ { background: #F9E3E5; color: #991b1b; } .sc-DNS { background: #fff3cd; color: #7a6400; } .sc-DNF { background: #f0f0f0; color: #6b6b6b; } .sc-NM { background: #F6E4DF; color: #B8432A; } .sc-select { padding: 3px 4px; border: 1px solid var(--gray); border-radius: 4px; font-size: 11px; background: var(--white); cursor: pointer; min-width: 48px; } .sc-select:focus { border-color: var(--blue); outline: none; } /* ============================================================ REMARK INPUT ============================================================ */ .remark-input { padding: 3px 6px; border: 1px solid var(--gray); border-radius: 4px; font-size: 11px; width: 80px; background: var(--white); } .remark-input:focus { border-color: var(--blue); outline: none; } /* ============================================================ SAVED ROW HIGHLIGHT ============================================================ */ .row-saved { background: #f0fdf4 !important; } .row-saved:hover { background: #F6E4DF !important; } /* ============================================================ LOADING OVERLAY (page transition spinner) ============================================================ */ .loading-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-muted); } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--gray); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ ROW STYLES FOR CALLROOM ============================================================ */ .row-checked-in { background: #f0fdf4; } .row-checked-in:hover { background: #F6E4DF !important; } .row-no-show { background: #fef2f2; } .row-no-show:hover { background: #F9E3E5 !important; } /* ============================================================ BUTTON COLOR NEUTRALIZATION (sky-blue → light-gray) Keep gender tabs coloured, keep 완료/success green. ============================================================ */ .btn-accent { background: var(--gray-light); color: var(--text); border: 1px solid var(--gray-mid); } .btn-accent:hover:not(:disabled) { background: var(--gray); color: var(--text); } /* ============================================================ TOOLTIP STYLES (native title is used, but add custom for hover) ============================================================ */ [title] { position: relative; } .btn[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(26,31,43,0.9); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 400; white-space: nowrap; z-index: 1000; pointer-events: none; margin-bottom: 4px; line-height: 1.4; } .btn[title]:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(26,31,43,0.9); z-index: 1000; pointer-events: none; } /* Wind input bar */ .wind-input-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f5f9ff; border: 1px solid #c8dff5; border-radius: var(--radius); margin-bottom: 8px; font-size: 13px; } .wind-input-bar label { font-size: 12px; white-space: nowrap; } .field-wind-input { border: 1.5px solid #c0c0c0; border-radius: 4px; font-size: 12px; padding: 4px 6px; width: 72px; text-align: center; background: #f3f8ff; } .field-wind-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(194,74,46,0.15); background: #fff; } /* Live badge */ .btn-live { animation: livePulse 2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Qual badges */ .qual-badge.qual-Q { background: #6b6b6b; color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 13px; } .qual-badge.qual-q { background: #C24A2E; color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 13px; } .qual-badge.qual-none { color: var(--text-muted); font-size: 13px; } /* Pass mark display — blue */ .pass-mark { color: #6b6b6b; font-weight: 700; font-size: 14px; } /* mark-PASS and mark- (hyphen) display — blue for pass */ .mark-PASS, .mark-- { color: #6b6b6b; } .height-toggle-btn.mark-PASS, .height-toggle-btn.mark-- { background: #f0f0f0; border-color: #6b6b6b; color: #6b6b6b; font-weight: 800; } /* Wind input - enlarged (consolidated above) */ /* ============================================================ FIELD DISTANCE 2-ROW TABLE (official style) ============================================================ */ .field-2row-table { border-collapse: collapse; } .field-2row-table thead th { background: #1a2a5e; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 8px; text-align: center; border: 1px solid #2a3a6e; } .field-2row-table thead th.wind-header { background: #243470; font-size: 11px; font-weight: 400; color: #c8d6f0; } /* Row 1: name + distance records — thin bottom border (same athlete) */ .field-2row-table .field-row1 td { border-bottom: 1px solid #ccc !important; padding: 6px 6px 2px; font-size: 13px; font-family: var(--font-mono); text-align: center; color: #222; } .field-2row-table .field-row1 td.name-cell { text-align: left; font-family: var(--font); font-size: 13px; } .field-2row-table .field-row1 td .bib-tag { font-size: 11px; color: #888; font-weight: 400; } /* Row 2: team + wind — thick bottom border (between athletes) */ .field-2row-table .field-row2 td { border-top: none; padding: 0 6px 6px; font-size: 12px; font-family: var(--font-mono); text-align: center; color: #333; border-bottom: 2.5px solid #000 !important; } .field-2row-table .field-row2 td.team-cell { text-align: left; font-family: var(--font); font-size: 11px; color: #666; } .field-2row-table .field-row2 td.wind-cell { color: #333; font-size: 12px; cursor: default; } .field-2row-table .field-row2 td.wind-cell[onclick] { cursor: pointer; } .field-2row-table .field-row2 td.wind-cell[onclick]:hover { background: #f0f7ff; } .field-2row-table .field-row2 td.wind-cell-editing { padding: 2px 4px 4px; } /* Best column */ .field-2row-table td.best-cell { text-align: center; font-weight: 700; font-size: 14px; color: #1a2a5e; vertical-align: middle; } .field-2row-table td.best-cell .best-wind { font-size: 11px; font-weight: 400; color: #555; margin-top: 1px; } /* Rowspan cells — thick bottom border (between athletes) */ .field-2row-table td[rowspan] { vertical-align: middle; border-bottom: 2.5px solid #000 !important; } /* Top 8 highlight */ .field-2row-table .field-row1.top8-highlight td, .field-2row-table .field-row2.top8-highlight td { background: #f0fff4; } /* Alternating pair background */ .field-2row-table tbody tr.field-row1:nth-of-type(4n+3) td, .field-2row-table tbody tr.field-row2:nth-of-type(4n+4) td { background: #f8fafc; } .field-2row-table .field-row1.top8-highlight td, .field-2row-table .field-row2.top8-highlight td { background: #f0fff4 !important; } /* Wind input in 2-row layout */ .field-wind-input-2row { width: 60px; font-size: 12px; padding: 3px 5px; text-align: center; border: 1.5px solid var(--primary); border-radius: 4px; font-family: var(--font-mono); background: #fff; } .field-wind-input-2row:focus { outline: none; box-shadow: 0 0 0 2px rgba(194,74,46,0.2); } /* Foul mark in 2-row */ .field-2row-table .foul-mark { color: #B4232C; font-weight: 700; } .field-2row-table .pass-mark { color: #999; } /* Sort toggle bar */ .sort-toggle-bar { padding: 4px 0; } /* Q/q result badges in results views */ .result-qual-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-weight: 700; font-size: 11px; margin-left: 4px; vertical-align: middle; } .result-qual-Q { background: #6b6b6b; color: #fff; } .result-qual-q { background: #C24A2E; color: #fff; } /* Wind input bar - larger version */ .wind-input-bar-large { padding: 10px 16px !important; background: #f3f8ff !important; border: 2px solid #d8d8d8 !important; border-radius: 8px !important; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wind-input-bar-large input { transition: border-color 0.2s; } .wind-input-bar-large input:focus { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 0 3px rgba(194,74,46,0.15); } /* Heat edit modal */ .heat-edit-group table { font-size: 12px; } .heat-edit-group .lane-edit-input:focus { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 0 2px rgba(194,74,46,0.2); } /* Manual heat edit button */ .qual-actions .btn-outline:hover { background: var(--gray-light); } /* Wind warning notice — small toast at bottom like foul-notice */ #wind-warning-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 24px; border-radius: var(--radius-lg); font-size: 14px; font-weight: 700; z-index: 9999; pointer-events: none; box-shadow: var(--shadow-md); transition: opacity 0.3s; background: #ff9800; color: #fff; } /* Relay member tags */ .relay-member-tag { display: inline-block; padding: 1px 6px; background: #f0f0f0; color: #6b6b6b; font-size: 11px; font-weight: 600; border-radius: 3px; white-space: nowrap; border: 1px solid #d8d8d8; } .relay-members-row { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; } /* Mobile text wrapping fix for team names */ @media screen and (max-width: 768px) { .matrix-table td.event-name { word-break: keep-all; white-space: normal !important; font-size: 13px; line-height: 1.3; } .data-table td { word-break: keep-all; white-space: nowrap; } .data-table td[style*="text-align:left"] { white-space: nowrap; word-break: keep-all; } } /* ============================================================ WA Wind-Aided Mark (풍속 초과 "w" 표시) WA Rule: wind > +2.0 m/s → valid performance, NOT record-eligible Display: append lowercase "w" next to performance (e.g. 11.23w) ============================================================ */ .wind-aided-mark { font-size: 0.85em; font-weight: 700; color: var(--accent, #6b6b6b); margin-left: 1px; vertical-align: baseline; } /* Wind Reference Record Badge — 참조기록 (풍속 > +2.0 m/s) */ .wind-ref-badge { display: inline-block; background: var(--accent, #6b6b6b); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.5px; } /* ============================================================ Pacing Large Mode (브라우저 줌 방식 — 고령 사용자 대응) transform: scale()로 비율 유지하며 확대 → 텍스트 잘림 없음 ============================================================ */ #tab-pacing.pacing-large { transform: scale(1.3); transform-origin: top left; width: 76.92%; /* 100% / 1.3 — 확대 후 가로 넘침 방지 */ } /* 확대 시 부모 컨테이너가 원래 높이만 잡아서 아래가 잘리는 것 방지 */ .admin-tabs-content.pacing-zoom-active { overflow: visible; } /* ============================================================ 대시보드 행(row)별 성별 표시 — 좌측 컬러 막대 + 배지 - 안쪽 매트릭스 박스는 흰색 그대로 유지 - 각 에 좌측 4px 막대 + 종목명 앞 배지로 성별을 표시 → "전체" 탭에서도, 개별 성별 탭에서도 동일하게 적용 - 남자(M): 네이비 #1a2a5e - 여자(F): 자두 #8E2A6B - 혼성(X): 청록 #1F7A6D ============================================================ */ .matrix-table tbody tr[data-row-gender] td:first-child { position: relative; padding-left: 16px; /* 4px 막대 + 8px 여백 + 기존 padding 보정 */ } .matrix-table tbody tr[data-row-gender] td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--row-gender-color, transparent); } .matrix-table tbody tr[data-row-gender="M"] { --row-gender-color: #1a2a5e; } .matrix-table tbody tr[data-row-gender="F"] { --row-gender-color: #8E2A6B; } .matrix-table tbody tr[data-row-gender="X"] { --row-gender-color: #1F7A6D; } /* 종목명 앞 성별 배지 (남/여/혼) */ .gender-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-right: 6px; vertical-align: middle; line-height: 1.4; letter-spacing: 0.5px; color: #fff; } .gender-badge[data-g="M"] { background: #1a2a5e; } .gender-badge[data-g="F"] { background: #8E2A6B; } .gender-badge[data-g="X"] { background: #1F7A6D; } /* 결과 버튼 성별색 (행의 data-row-gender 를 상속받아 결정) */ .matrix-table tbody tr[data-row-gender="M"] .round-btn.round-btn-result { background: #1a2a5e !important; border-color: #1a2a5e !important; } .matrix-table tbody tr[data-row-gender="F"] .round-btn.round-btn-result { background: #8E2A6B !important; border-color: #8E2A6B !important; } .matrix-table tbody tr[data-row-gender="X"] .round-btn.round-btn-result { background: #1F7A6D !important; border-color: #1F7A6D !important; } /* ============================================================ 시간·기록 전용 등폭 폰트 (D2Coding, self-host · 숫자/기호 서브셋 ~4KB) 원칙: 이름·문장은 Noto Sans KR, 시간·기록 값만 전광판체 ============================================================ */ @font-face { font-family: 'D2Coding'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/d2coding-subset.woff2') format('woff2'); } @font-face { font-family: 'D2Coding'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/d2coding-bold-subset.woff2') format('woff2'); } /* 시간·기록 값에 붙이는 유틸 클래스 (렌더러에서 이 클래스를 부여) */ .num-display { font-family: 'D2Coding', monospace; letter-spacing: 0.02em; } /* 여러 줄 기록표(공백 정렬) — 고정폭 오버레이용. 반응형 화면엔 table 권장 */ .pace-table { font-family: 'D2Coding', monospace; white-space: pre; line-height: 1.8; } /* 일반 폰트로 남는 숫자도 폭 고정 → 표 자릿수 세로 정렬 */ body { font-variant-numeric: tabular-nums; } /* ── 터치 기기(태블릿·폰) 조작 크기 — 2026-09 사용성 규칙 ── 손가락으로 누르는 버튼은 최소 40px, 작은 버튼도 36px. 입력칸 글자는 16px 이상(iOS 는 그보다 작으면 포커스 때 화면을 확대한다). 표 안의 촘촘한 칸(.track-time-input 등)은 행 높이가 깨지지 않게 글자 크기만 맞춘다. */ @media (pointer: coarse) { .btn { min-height: 40px; } .btn-sm, .btn-xs { min-height: 36px; padding-left: 12px; padding-right: 12px; } .admin-card select, .admin-card input[type="text"], .admin-card input[type="number"], .admin-card input[type="date"], .admin-card input[type="password"], .admin-card textarea { min-height: 40px; font-size: 16px; } input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], select, textarea { font-size: max(16px, 1em); } .track-time-input { font-size: 16px; } } @media (pointer: coarse) { #comp-doc-btn, #comp-tt-btn { min-height: 36px !important; padding-top: 6px !important; padding-bottom: 6px !important; } .header-login-btn { min-height: 36px; } .font-size-ctrl button { width: 36px; height: 36px; } .mobile-menu-close { } } /* ── 인라인 SVG 아이콘 (lib/icons.js · 이모지 대체) ── */ .ui-icon { display: inline-block; vertical-align: -0.15em; flex: none; } .ui-icon.ui-icon-top { vertical-align: middle; } /* ── 더블탭 확대 끄기 (핀치 줌은 그대로) — 빈 곳을 두 번 눌러도 화면이 튀지 않게. 스크롤 상자마다 판정이 끊기므로 전 요소에 건다 ── */ * { touch-action: manipulation; } /* ── 메달 원 — common.js medalHtml/medalTallyHtml ── */ .medal { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:800; line-height:1; font-family:var(--font-mono, monospace); font-variant-numeric:tabular-nums; flex:none; box-shadow:inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.08); vertical-align:middle; } .medal.m1 { background:linear-gradient(135deg,#f1d36a,#c7a12a); } .medal.m2 { background:linear-gradient(135deg,#e3e6ea,#9ba2ac); } .medal.m3 { background:linear-gradient(135deg,#d69b5f,#a1632c); } .medal-tally { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; } /* ── 다국어(EN/JA) 글자 길이 보정 (2026-09-30, i18n) ── 영어는 한국어보다 길고 일본어는 띄어쓰기가 없어 버튼이 한 글자씩 줄바꿈된다. 버튼·칩·탭은 한 줄로 두고 글자만 조금 줄인다 */ html[data-lang="en"] .btn, html[data-lang="en"] button, html[data-lang="ja"] .btn, html[data-lang="ja"] button { white-space: nowrap; } html[data-lang="en"] .round-btn, html[data-lang="ja"] .round-btn { font-size: 10px; padding: 4px 6px; letter-spacing: -0.01em; } html[data-lang="en"] .seg-toggle button, html[data-lang="ja"] .seg-toggle button { padding-left: 6px; padding-right: 6px; font-size: 11px; } html[data-lang="en"] .card-chip, html[data-lang="ja"] .card-chip { letter-spacing: -0.01em; } /* 기록입력·소집실 왼쪽 종목 목록의 라운드 칩: EN/JA 는 글자가 길어 3열 격자에서 잘린다 → 더 작게, 넘치면 말줄임 대신 두 줄 허용 */ html[data-lang="en"] .rec-round-btn, html[data-lang="ja"] .rec-round-btn { padding: 3px 6px !important; white-space: nowrap; } html[data-lang="en"] .matrix-table th, html[data-lang="ja"] .matrix-table th { font-size: 10px; letter-spacing: 0; padding-left: 4px; padding-right: 4px; } /* EN/JA: 10종·7종 세부종목 이름(Javelin Throw 등)이 소집실·기록입력 좌측 목록에서 잘리지 않게 줄바꿈 허용 (2026-10-09) */ html[data-lang="en"] .combined-sub-row .rec-matrix-event, html[data-lang="ja"] .combined-sub-row .rec-matrix-event { white-space: normal; word-break: normal; line-height: 1.2; }