/* ============================================================
파크리그 — 통합 디자인 시스템
5개 서비스(운영사/협회/클럽 관리자 + 회원/심판 모바일웹) 공용
============================================================ */
/* ---------- 1. 디자인 토큰 ---------- */
:root {
/* 브랜드 */
--brand: #157F5C;
--brand-strong: #0E5F45;
--brand-soft: #E7F3EE;
--brand-line: #BFE0D2;
/* 상태 색상 */
--accent: #2F6FED; --accent-soft: #E8F0FE;
--ok: #16A34A; --ok-soft: #E7F6EC;
--warn: #C2760B; --warn-soft: #FCF1DF;
--danger: #DC2626; --danger-soft: #FCEBEA;
--info: #0E7490; --info-soft: #E2F4F8;
--off: #6B7A75; --off-soft: #EFF2F1;
/* 중립 */
--bg: #F3F6F5;
--card: #FFFFFF;
--line: #E2E9E6;
--line-soft: #EFF3F1;
--text: #16211D;
--text-2: #3E4B46;
--muted: #77857F;
/* 형태 */
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 20px;
--shadow: 0 2px 8px rgba(16, 42, 33, .06);
--shadow-lg: 0 12px 32px rgba(16, 42, 33, .14);
/* 레이아웃 */
--sidebar-w: 236px;
--tabbar-h: 62px;
--mheader-h: 52px;
--topbar-h: 56px;
--font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Malgun Gothic', '맑은 고딕', sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; }
/* ---------- 2. 공용 유틸 ---------- */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }
/* hidden 속성도 같은 뜻으로 받는다 — display 를 정해 둔 칸(예: .pg-loading 은 flex)에서는
브라우저 기본값이 눌려, 감췄는데도 그대로 보인다 */
[hidden] { display: none !important; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inline { display: flex; align-items: center; gap: 8px; }
.inline-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
/* ---------- 3. 배지 / 칩 ---------- */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 999px;
font-size: 12px; font-weight: 600; line-height: 1.6;
background: var(--off-soft); color: var(--off);
white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.brand { background: var(--brand-soft); color: var(--brand-strong); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--line); background: #fff;
font-size: 13px; color: var(--text-2); cursor: pointer;
}
.chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-strong); font-weight: 600; }
/* 칩 안의 건수 — 눌러 보고서야 비었다는 것을 알게 되면 빈 갈래를 몇 번씩 다시 누른다 */
.chip b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.chip.on b { color: var(--brand-strong); }
/* ---------- 4. 버튼 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius-sm);
background: var(--brand); color: #fff;
font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: filter .15s;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn:active { filter: brightness(.94); }
.btn.outline { background: #fff; border-color: var(--line); color: var(--text-2); }
.btn.outline:hover { border-color: var(--brand-line); color: var(--brand-strong); }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.accent { background: var(--accent); }
.btn.danger { background: var(--danger); }
.btn.warn { background: var(--warn); }
.btn.dark { background: var(--text); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.lg { padding: 13px 20px; font-size: 15px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn:disabled, .btn.disabled { background: #D7DEDB; color: #8E9B96; cursor: not-allowed; filter: none; border-color: transparent; }
/* ---------- 5. 카드 / 패널 ---------- */
.card, .panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.panel { padding: 0; overflow: hidden; }
.panel-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.panel-head h3 { font-size: 15px; font-weight: 700; }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }
/* 통계 카드 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid.c5 { grid-template-columns: repeat(5, 1fr); }
.stat-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.stat {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 15px 16px; box-shadow: var(--shadow);
}
.stat .label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat .value {
font-size: 25px; font-weight: 800; letter-spacing: -.8px; margin-top: 7px;
font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat .value small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.stat .delta { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.stat .delta.up { color: var(--ok); }
.stat .delta.down { color: var(--warn); }
/* 가장 중요한 지표 한 칸만 강조한다 — 여러 칸을 물들이면 강조가 사라진다 */
.stat.hi { border-color: var(--brand-line); background: linear-gradient(180deg, var(--brand-soft), #fff 62%); }
.stat.hi .value { color: var(--brand-strong); }
/* ============================================================
A. 관리자(PC) 레이아웃 — 좌측 사이드바 + 상단바 + 본문
============================================================ */
.app { display: flex; min-height: 100%; }
.sidebar {
flex: none; width: var(--sidebar-w);
background: #0F2E25; color: #C9E2D8;
padding: 0 0 22px; overflow-y: auto;
position: sticky; top: 0; height: 100vh;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 20px; }
.side-brand .logo {
width: 34px; height: 34px; flex: none; border-radius: 11px;
background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 17px;
}
/* 브랜드 마크(홀컵에 꽂힌 깃대)는 SVG 한 벌로 쓴다 — 이모지는 기기·OS마다
그림이 달라 같은 자리에서도 굵기와 색이 제각각으로 보인다 */
.side-brand .logo svg { width: 19px; height: 19px; }
.login-logo .mark svg { width: 32px; height: 32px; }
.side-brand .txt { min-width: 0; line-height: 1.35; }
.side-brand .txt b { display: block; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.side-brand .txt span { display: block; font-size: 11.5px; color: #7FB09E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group { padding: 0 10px; margin-bottom: 14px; }
.gtitle { font-size: 11px; font-weight: 700; color: #6E9887; padding: 0 8px 6px; letter-spacing: .2px; }
.nav-item {
display: flex; align-items: center; gap: 9px;
padding: 9px 10px; border-radius: 9px;
font-size: 13.5px; color: #C9E2D8;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-item.on { background: var(--brand); color: #fff; font-weight: 600; }
.nav-item .ico { width: 17px; flex: none; text-align: center; font-size: 13px; opacity: .95; }
.nav-item .cnt {
margin-left: auto; flex: none; min-width: 19px; height: 19px; padding: 0 6px;
border-radius: 999px; background: var(--danger); color: #fff;
font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.nav-item.on .cnt { background: rgba(255, 255, 255, .24); }
.side-foot { padding: 16px 18px 0; margin-top: 6px; border-top: 1px solid #1D4437; font-size: 12px; color: #7FB09E; line-height: 1.9; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
flex: none; min-height: var(--topbar-h);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 20;
}
.topbar .crumb { font-size: 13px; color: var(--muted); }
.topbar .crumb span { margin: 0 2px; color: #B7C4BF; }
.topbar .crumb b { color: var(--text); font-weight: 700; }
.topbar .me { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.icon-btn {
width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 10px;
background: #fff; color: var(--text-2); font-size: 15px; cursor: pointer; position: relative;
display: grid; place-items: center;
}
.icon-btn:hover { border-color: var(--brand-line); color: var(--brand-strong); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.avatar {
width: 30px; height: 30px; flex: none; border-radius: 50%;
background: var(--brand-soft); color: var(--brand-strong);
display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.main { flex: 1; min-width: 0; padding: 20px 24px 44px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-head h1 { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.page-head .sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.page-head .actions { flex: none; display: flex; align-items: center; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1180px) {
.grid-2, .grid-3, .grid-1-2, .grid-2-1 { grid-template-columns: 1fr; }
}
/* ---------- 표 ---------- */
.table-wrap { overflow-x: auto; }
/* 표 안에서만 굴린다 — 줄이 늘어도 화면 전체가 길어지지 않는다.
머리줄(thead)은 이미 붙어 있고, 합계(tfoot)는 바닥에 붙여 둔다 —
굴리는 동안 무엇을 보고 있는지와 총계가 함께 남아야 한다.
높이는 쓰는 쪽에서 style 로 조절한다. */
.table-wrap.scroll-y { overflow-y: auto; max-height: 360px; }
.table-wrap.scroll-y tfoot td { position: sticky; bottom: 0; z-index: 1; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table thead th {
background: #F7FAF9; color: var(--muted); font-size: 12px; font-weight: 700;
white-space: nowrap; border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 1;
}
.table tbody tr:hover { background: #FAFCFB; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td {
background: #F7FAF9; font-weight: 700; border-top: 1px solid var(--line); border-bottom: 0;
}
.table .link { color: var(--brand-strong); font-weight: 600; }
/* 눌러서 팝업이 열리는 칸 — common.js가 data-* 훅을 보고 .clickable 을 붙인다 */
.table .link.clickable { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-line); }
.table .link.clickable:hover { color: var(--brand); text-decoration-color: var(--brand); }
.table td.off, .table tr.off td { color: var(--muted); }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.empty b { display: block; color: var(--text-2); font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 14px; }
.pagination a, .pagination span {
min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--text-2); border: 1px solid transparent;
}
.pagination a:hover { background: var(--line-soft); text-decoration: none; }
.pagination .on { background: var(--brand); color: #fff; font-weight: 700; }
/* ---------- 폼 ---------- */
.filterbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.filterbar .search { flex: 1; min-width: 180px; }
.filterbar .search input { width: 100%; }
.field { display: block; }
.field + .field { margin-top: 14px; }
.field > label, .field > .label {
display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px;
}
.field .req { color: var(--danger); }
.field .help { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
/* 필수인데 비워 둔 입력칸 — 확인을 눌렀을 때만 붙는다 */
.field input.invalid, .field select.invalid, .field textarea.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}
/* 파일 교체 입력 — 지금 무엇이 올라가 있는지 먼저 보여 주고 그 옆에서 고르게 한다.
현재 파일명을 안 보여 주면 "이미 올렸는지" 확인하려고 회원 앱을 열어 봐야 한다. */
.filebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filebox .cur { font-size: 12.5px; color: var(--muted); }
.filebox .cur b { color: var(--text); font-weight: 700; }
/* ── 홀별 파 입력 (대회 개설 팝업 · 대회 수정 공용) ──────────
파크골프는 홀마다 파가 다르다. 스코어를 홀 단위로 받으려면 개설 때부터 갖고 있어야 한다.
⚠ .par-list 는 **세로 목록**이다. 여기에 9열 그리드를 주면 OUT/IN 코스 블록이
그리드 한 칸씩에 들어가 서로 겹친다. 9열 그리드는 각 코스(.par-course) 안에만 둔다. */
.par-list { display: flex; flex-direction: column; gap: 10px; }
.par-course { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px 12px; background: #FAFCFB; }
.par-course.out { border-left: 3px solid var(--brand); }
.par-course.in { border-left: 3px solid var(--info); }
.pc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pc-head .tag { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }
.pc-head .badge { margin-left: auto; }
.pc-name { width: 128px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; background: #fff; }
.pc-name:focus { border-color: var(--brand); outline: none; }
/* 9홀이 한 줄에 들어가야 스코어카드처럼 읽힌다. 좁아지면 줄을 나눈다. */
.par-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
@media (max-width: 720px) { .par-grid { grid-template-columns: repeat(5, 1fr); } }
.par-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.par-cell .no { font-size: 11px; font-weight: 700; color: var(--muted); }
.par-cell input { width: 100%; padding: 7px 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; text-align: center; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.par-cell input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px rgba(30, 120, 90, .12); }
/* 숫자 입력의 위아래 화살표는 칸을 좁게 만든다 — 값은 2~6뿐이라 직접 치는 편이 빠르다 */
.par-cell input::-webkit-outer-spin-button,
/* 숫자 칸의 업/다운 버튼은 두지 않는다 —
금액·정원처럼 자릿수가 큰 값을 1씩 올리는 버튼은 쓸모가 없고,
좁은 칸에서 잘못 눌러 값이 조용히 바뀐다. 키보드로 적는다. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* ── 대회 이미지 등록 (shared/image-upload.js · 개설 팝업 · 대회 수정 공용) ──
대표 자리를 첫 칸에 **고정**하고 라벨을 붙인다. 여러 장을 올리는 순간
"어느 게 크게 나오는 사진인지"가 안 보이면 담당자는 순서를 바꿔 보며 짐작한다. */
.imgup .imgup-input { display: none; }
.imgup.over { outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.imgup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.imgup-cell { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.imgup-cell .th { height: 88px; background-size: cover; background-position: center; background-color: #EDF0F1; }
/* 대표는 테두리와 라벨 둘 다로 표시한다 — 색만으로는 흑백 인쇄·색약에서 구분되지 않는다 */
.imgup-cell.cover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.imgup-cell .flag { position: absolute; top: 7px; left: 7px; padding: 3px 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }
.imgup-cell .meta { padding: 7px 9px 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.imgup-cell .act { display: flex; gap: 6px; padding: 6px 9px 9px; }
.imgup-cell .act button { flex: 1; padding: 5px 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.imgup-cell .act button:hover { border-color: var(--brand); color: var(--brand); }
.imgup-cell .act .rm:hover { border-color: #E62A2A; color: #E62A2A; }
.imgup-slot { height: 100%; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: #FAFCFB; cursor: pointer; color: var(--muted); }
.imgup-slot:hover { border-color: var(--brand); color: var(--brand); background: #F4FAF7; }
.imgup-slot b { font-size: 20px; font-weight: 400; line-height: 1; }
.imgup-slot span { font-size: 12px; font-weight: 700; }
/* 거부된 파일 — 조용히 사라지면 몇 장이 올라갔는지 세어 보고서야 알아챈다 */
.imgup-bad:not(:empty) { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.imgup-bad .row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border: 1px solid #F2C9C9; border-radius: 9px; background: #FDF4F4; font-size: 12px; line-height: 1.55; }
.imgup-bad .row b { flex: none; max-width: 34%; color: #A82121; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imgup-bad .row span { flex: 1; color: #7A3030; }
.imgup-bad .row .x { flex: none; border: 0; background: none; color: #A82121; font-size: 13px; cursor: pointer; padding: 0 2px; }
/* ⚠ type 을 안 적은 도 잡는다. 빠뜨리면 그 칸만 테두리 없는 맨 입력창이 되어
같은 폼 안에서 혼자 다르게 보인다 (checkbox·radio·file 은 제외) */
input:not([type]),
input[type="text"], input[type="search"], input[type="date"], input[type="time"], input[type="month"],
input[type="number"], input[type="tel"], input[type="email"], input[type="password"],
select, textarea {
width: 100%; padding: 9px 11px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: #fff; color: var(--text); font-family: inherit; font-size: 13.5px;
}
select { padding-right: 28px; cursor: pointer; }
textarea { min-height: 92px; resize: vertical; line-height: 1.7; }
/* 조회란(.filterbar) 안의 선택칸은 내용만큼만 — 위의 width:100% 를 그대로 받으면
칸마다 한 줄씩 차지해 조회란이 세로로 쌓인다. 검색칸(.search)은 남는 폭을 채운다 */
.filterbar select, .filterbar > input { width: auto; max-width: 100%; }
input:focus, select:focus, textarea:focus {
outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
input:disabled, select:disabled, textarea:disabled { background: #F5F8F7; color: var(--muted); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #A7B3AE; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .field + .field { margin-top: 0; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.form-actions .left { margin-right: auto; }
.check-row, .radio-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.check-row label, .radio-row label {
display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.check-row input, .radio-row input { width: auto; accent-color: var(--brand); }
/* ---------- 안내 상자 ---------- */
/* ⚠ display 는 **block** 이다. flex 로 두면 안쪽을 로 감싸지 않은 곳에서
글자·
· 가 각각 flex 항목이 되어 문장이 토막토막 흩어진다.
실제로 여러 화면이 감싸지 않은 채 쓰고 있었고, 글자를 키우자 눈에 띄게 깨졌다.
자식이 하나뿐인 기존 사용처는 block 이어도 보이는 결과가 같다. */
.notice-box {
display: block;
padding: 13px 15px; border-radius: var(--radius-sm);
background: var(--off-soft); border: 1px solid var(--line);
font-size: 13px; color: var(--text-2); line-height: 1.7;
}
.notice-box b { color: var(--text); font-weight: 700; }
.notice-box.small { font-size: 12.5px; padding: 11px 13px; }
.notice-box.brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-strong); }
.notice-box.brand b { color: var(--brand-strong); }
.notice-box.warn { background: var(--warn-soft); border-color: #EBD3A8; color: #7A4E08; }
.notice-box.warn b { color: #5E3C06; }
.notice-box.danger { background: var(--danger-soft); border-color: #F3C9C6; color: #932020; }
.notice-box.danger b { color: #7A1B1B; }
.notice-box.info { background: var(--info-soft); border-color: #BEE2EB; color: #0B5B70; }
.notice-box.info b { color: #084757; }
.notice-box.accent { background: var(--accent-soft); border-color: #C7D9FB; color: #1B4CB2; }
/* ---------- 진행 단계 ---------- */
.steps { display: flex; align-items: stretch; gap: 6px; }
.step {
flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px;
background: var(--off-soft); color: var(--muted);
font-size: 12px; font-weight: 600; white-space: nowrap;
}
.step.done { background: var(--brand-soft); color: var(--brand-strong); }
.step.now { background: var(--brand); color: #fff; }
/* ---------- 진행률 막대 ---------- */
.progress { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
/* ---------- 화면 안 탭 ---------- */
.tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button {
padding: 10px 14px; border: 0; background: none; cursor: pointer; position: relative;
font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.tabs button:hover { color: var(--text-2); }
.tabs button.on { color: var(--brand-strong); font-weight: 700; }
.tabs button.on::after {
content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
background: var(--brand); border-radius: 2px;
}
/* 탭 라벨 옆의 건수 — 몇 건인지 눌러 보기 전에 알 수 있게.
사이드바 배지(.nav-item .cnt)와 같은 이름이지만 여기서는 눈에 덜 띄게 둔다 */
.tabs button .cnt {
display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
background: var(--line-soft); color: var(--muted);
font-size: 11.5px; font-weight: 700; line-height: 17px; vertical-align: 1px;
}
.tabs button.on .cnt { background: var(--brand); color: #fff; }
/* ---------- 정의 목록 ---------- */
.deflist { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 0; font-size: 13px; }
.deflist dt { padding: 9px 0; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.deflist dd { padding: 9px 0; margin: 0; border-bottom: 1px solid var(--line-soft); word-break: break-word; }
.deflist dt:last-of-type, .deflist dd:last-of-type { border-bottom: 0; }
/* ---------- 조직 트리 (운영사 조직 마스터) ---------- */
.tree { padding: 6px 0; }
.node {
display: flex; align-items: center; gap: 9px;
padding: 9px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.node:last-child { border-bottom: 0; }
.node .toggle { width: 16px; flex: none; text-align: center; color: var(--muted); cursor: pointer; font-size: 11px; }
.node .code {
flex: none; font-size: 11.5px; font-family: 'Consolas', monospace;
color: var(--muted); background: var(--line-soft); padding: 2px 7px; border-radius: 6px;
}
.node.lv1 { background: #F7FAF9; font-weight: 700; }
.node.lv2 { padding-left: 34px; }
.node.lv3 { padding-left: 62px; color: var(--text-2); }
/* ---------- 조 편성 칩 막대 ---------- */
.gbar { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip {
padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.gchip b { font-weight: 700; color: var(--text); }
.gchip:hover { border-color: var(--brand-line); }
.gchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.gchip.on b { color: #fff; }
.gchip.full { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
.gchip.full.on { background: var(--brand); color: #fff; }
.gchip.over { border-color: #EBD3A8; background: var(--warn-soft); color: var(--warn); }
.gchip.over.on { background: var(--warn); border-color: var(--warn); color: #fff; }
.gchip.over.on b { color: #fff; }
/* ---------- 자동 발송 문구 카드 ----------
운영사 시스템 설정과 협회 마이페이지가 같은 패널(auto-noti-panel.js)을 쓴다 */
.noti-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .noti-cards { grid-template-columns: 1fr; } }
/* ---------- 활동 피드 ---------- */
.feed-list > li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.feed-list > li:last-child { border-bottom: 0; }
.feed-list .time { flex: none; width: 74px; color: var(--muted); font-size: 12px; }
/* 인쇄에서 빼는 요소 */
@media print { .no-print { display: none !important; } }
/* ============================================================
B. 모바일 웹 레이아웃 (회원 / 심판) — 하단 탭 고정
============================================================ */
body.mobile { background: #DEE6E3; overflow: hidden; }
.m-app {
position: fixed; inset: 0; margin: 0 auto;
width: 100%; max-width: 460px;
display: flex; flex-direction: column;
background: var(--bg); box-shadow: 0 0 40px rgba(16, 42, 33, .16);
overflow: hidden;
}
/* 상단 헤더 — 고정 */
.m-header {
flex: none; min-height: var(--mheader-h);
display: flex; align-items: center; gap: 10px;
padding: 0 14px; padding-top: env(safe-area-inset-top);
background: var(--brand); color: #fff; z-index: 10;
}
.m-header.plain { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.m-header .back { width: 32px; height: 32px; margin-left: -6px; display: grid; place-items: center; color: inherit; font-size: 20px; flex: none; }
.m-header .back:hover { text-decoration: none; }
.m-header h1 { font-size: 16.5px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-header .act { display: flex; align-items: center; gap: 12px; font-size: 13px; color: inherit; }
.m-header .act a { color: inherit; opacity: .95; }
/* 히어로 헤더(홈 화면용) */
.m-hero { flex: none; background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%); color: #fff; padding: 0 18px 20px; padding-top: calc(env(safe-area-inset-top) + 14px); }
.m-hero .top { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.m-hero .brand { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.m-hero .greet { font-size: 19px; font-weight: 700; margin-top: 10px; letter-spacing: -.4px; }
.m-hero .greet small { display: block; font-size: 13px; font-weight: 500; opacity: .85; margin-top: 4px; }
/* 스크롤 영역 */
.m-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 28px; }
.m-body.flush { padding: 0 0 28px; }
/* 하단 고정 탭바 */
.tabbar {
flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
min-height: var(--tabbar-h);
background: #fff; border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom);
z-index: 30;
}
.tabbar a {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; position: relative;
}
.tabbar a .ico { font-size: 19px; line-height: 1; }
/* 그림으로 그린 아이콘(svg)은 **크기를 정해 주지 않으면 제 크기를 모른다** —
이모지와 달리 font-size 를 따르지 않아, 비워 두면 칸에서 찌그러지거나 아예 안 보인다.
회원 앱에만 이 규칙이 있어서 심판 앱 탭은 글자만 나왔다. */
.tabbar a .ico svg { width: 23px; height: 23px; display: block; }
.tabbar a.on { color: var(--brand); }
.tabbar a .nb { position: absolute; top: 8px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; display: grid; place-items: center; }
/* 하단 고정 액션바(탭바 없는 상세/입력 화면) */
.m-actionbar {
flex: none; display: flex; gap: 8px; align-items: center;
padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
background: #fff; border-top: 1px solid var(--line); z-index: 30;
}
.m-actionbar .price { flex: none; line-height: 1.2; }
.m-actionbar .price small { display: block; font-size: 11px; color: var(--muted); }
.m-actionbar .price b { font-size: 17px; }
/* 모바일 컴포넌트 */
.m-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow); }
.m-card + .m-card { margin-top: 10px; }
.m-card .title { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; }
.m-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
/* 대회명이 곧 상세로 가는 문이다 — [대회 정보] 버튼을 따로 두지 않는다.
버튼을 두면 카드마다 버튼이 두세 개가 되어 정작 해야 할 일(결제·취소)이 묻힌다.
누를 수 있다는 표시는 **꺾쇠 하나**로 한다. 제목까지 파랗게 칠하면
카드에서 가장 큰 글자가 색을 갖게 되어 상태 배지보다 먼저 눈에 든다. */
/* 카드 안의 행동 버튼 — 카드 폭을 다 쓰지 않고 **오른쪽에 붙인다.**
전체 폭 버튼은 카드마다 큰 띠가 하나씩 생겨 목록이 버튼으로 끊겨 보인다.
내용은 왼쪽에서 읽고 행동은 오른쪽에서 누르는 흐름이 눈 움직임과 맞다. */
.card-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.card-act .btn { min-width: 50%; }
/* 버튼이 둘이면 반씩 나눠 쓴다 — 한쪽만 넓으면 무게가 기울어 보인다 */
.card-act .btn:nth-child(2) { min-width: 0; flex: 1; }
a.title { display: flex; align-items: center; gap: 4px; color: inherit; }
a.title:hover { text-decoration: none; }
a.title .go { flex: none; color: var(--muted); font-weight: 700; }
a.title:hover .go { color: var(--brand); }
.sec-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.sec-title:first-child { margin-top: 0; }
.sec-title h2 { font-size: 15px; font-weight: 700; }
.sec-title a { font-size: 12.5px; color: var(--muted); }
/* ---------- 스코어카드 ----------
홀 · 파 · 타수 세 줄이 **같은 열 너비**를 써야 홀이 세로로 맞는다.
규칙이 없으면 세 줄이 그냥 이어진 숫자 덩어리("홀123456789")로 보인다.
9홀이 한 판이라 열은 아홉 개 + 왼쪽 이름표 한 칸이다. 폭이 좁은 기기에서는
글자만 작아지고 열은 그대로 아홉 개다 — 줄이 접히면 홀이 어긋난다. */
.sc-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.sc-line { display: grid; grid-template-columns: 38px repeat(9, 1fr); }
.sc-line + .sc-line { border-top: 1px solid var(--line-soft); }
.sc-line > * {
display: grid; place-items: center; min-height: 34px;
font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.sc-line > * + * { border-left: 1px solid var(--line-soft); }
.sc-line .lb {
background: #F6F8F7; color: var(--muted); font-size: 11px; font-weight: 700;
}
.sc-line .h { background: #FAFCFB; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.sc-line .p { color: var(--muted); }
.sc-line .s { font-size: 14px; font-weight: 800; }
/* 파 대비 몇 타인지 — 색이 곧 등급이다. 숫자만으로는 잘 쳤는지 한눈에 안 보인다.
보기 이상은 테두리 없이 색만 쓴다 — 못 친 홀을 붉게 칠해 늘어놓으면
스코어카드가 성적표가 아니라 지적표로 읽힌다. */
.sc-line .s.sc-eagle { color: #7C3AED; }
.sc-line .s.sc-birdie { color: var(--brand); }
.sc-line .s.sc-birdie::after,
.sc-line .s.sc-eagle::after {
content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid currentColor;
}
.sc-line .s.sc-birdie, .sc-line .s.sc-eagle { position: relative; }
.sc-line .s.sc-par { color: var(--text); }
.sc-line .s.sc-bogey { color: #B45309; }
.sc-line .s.sc-dbogey { color: var(--danger); }
/* 합계 줄에 쓰는 같은 색 — 「+3」처럼 부호가 붙은 글자 */
.sc-eagle-tx { color: #7C3AED; font-weight: 800; }
.sc-birdie-tx { color: var(--brand); font-weight: 800; }
.sc-par-tx { color: var(--muted); font-weight: 700; }
.sc-bogey-tx { color: #B45309; font-weight: 800; }
.sc-dbogey-tx { color: var(--danger); font-weight: 800; }
/* ---------- 스코어 추이 막대 ----------
막대 높이를 px 로 적고 그 아래 이름표까지 넣으면 칸을 넘친다 —
120px 칸에 101px 막대 + 6px 여백 + 두 줄 이름표(36px) = 143px 이었다.
막대가 놓일 칸의 높이를 고정하고, 막대는 그 안에서 **비율**로 자란다. */
.sc-trend { display: flex; align-items: stretch; gap: 8px; }
.sc-trend .col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-trend .bars { height: 96px; display: flex; align-items: flex-end; }
.sc-trend .bar {
width: 100%; background: var(--brand-soft); border-radius: 5px 5px 0 0; min-height: 6px;
}
.sc-trend .lb {
margin-top: 7px; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.sc-trend .lb b { display: block; font-size: 12.5px; }
.sc-trend .col.on .bar { background: var(--brand); }
.sc-trend .col.on .lb { color: var(--brand-strong); font-weight: 700; }
/* ---------- 참가 이력 카드 ----------
대회 한 건에 상태 · 대회명 · 언제 어디서 · 내 신청 정보 · 할 수 있는 일까지
다섯 가지가 들어간다. 줄글로 쌓으면 어느 것이 대회명인지 눈에 들어오지 않아,
**왼쪽 색 띠**로 상태를 먼저 알리고 숫자는 아래 칸에 나란히 둔다. */
.hcard {
position: relative; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.hcard + .hcard { margin-top: 12px; }
/* 상태를 색으로 먼저 말한다 — 배지를 읽기 전에 훑어서 알 수 있어야 한다 */
.hcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.hcard.is-wait::before { background: var(--warn); }
.hcard.is-done::before { background: #C3CDC9; }
.hcard.is-off::before { background: #DCE3E0; }
.hcard.is-off { background: #FCFDFD; }
.hcard .hc-top { display: flex; align-items: center; gap: 7px; padding: 13px 15px 0 17px; }
/* 남은 날은 카드에서 가장 급한 정보다 — 오른쪽 끝에 두어 여러 장을 훑기 좋게 한다 */
.hcard .hc-dday { margin-left: auto; font-size: 12.5px; font-weight: 800; letter-spacing: -.2px; color: var(--brand-strong); }
.hcard .hc-dday.near { color: var(--danger); }
.hcard .hc-name {
display: block; padding: 9px 15px 0 17px; color: var(--text);
font-size: 16px; font-weight: 800; letter-spacing: -.35px; line-height: 1.34;
}
.hcard .hc-name:hover { text-decoration: none; }
.hcard .hc-name .go { color: #C3CDC9; font-weight: 700; }
.hcard .hc-meta {
padding: 6px 15px 13px 17px; font-size: 12.5px; color: var(--muted);
display: flex; flex-wrap: wrap; gap: 2px 8px;
}
/* 숫자는 나란히 놓아야 비교가 된다. 줄로 쌓으면 세 줄이 다 같은 무게로 보인다 */
.hcard .hc-facts {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--line-soft); border-top: 1px solid var(--line-soft);
}
.hcard .hc-facts.c2 { grid-template-columns: repeat(2, 1fr); }
.hcard .hc-facts > div { background: inherit; padding: 10px 6px; text-align: center; }
.hcard .hc-facts > div { background: #fff; }
.hcard.is-off .hc-facts > div { background: #FCFDFD; }
.hcard .hc-facts .k { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.hcard .hc-facts .v { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; }
.hcard .hc-facts .v.soft { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.hcard .hc-foot { padding: 11px 15px 13px 17px; border-top: 1px solid var(--line-soft); }
.hcard .hc-note { font-size: 12px; color: var(--muted); line-height: 1.62; }
.hcard .hc-foot .btn { width: 100%; }
/* 빈 칸 — 카드와 같은 폭을 유지해 화면이 무너지지 않게 한다 */
.h-empty {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 34px 20px; text-align: center;
font-size: 13px; color: var(--muted); line-height: 1.75;
}
.h-empty b { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 4px; }
.m-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.m-list > li, .m-list > a {
display: flex; align-items: center; gap: 12px; padding: 14px 15px;
border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--text);
}
.m-list > li:last-child, .m-list > a:last-child { border-bottom: 0; }
.m-list a:hover { text-decoration: none; background: #FAFCFB; }
.m-list .txt { flex: 1; min-width: 0; }
/* 제목과 설명은 각각 한 줄씩 — 둘 다 인라인으로 두면 설명이 제목 뒤에 그대로 이어 붙는다 */
.m-list .txt b { display: block; }
.m-list .txt .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.55; }
.m-list .arrow { color: #C3CDC9; font-size: 17px; flex: none; }
.m-list .lico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; font-size: 16px; }
.seg { display: flex; background: #E9EEEC; border-radius: 11px; padding: 3px; gap: 3px; }
.seg a, .seg button {
flex: 1; text-align: center; padding: 8px 6px; border: 0; background: transparent; border-radius: 9px;
font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.seg a.on, .seg button.on { background: #fff; color: var(--brand-strong); box-shadow: 0 1px 3px rgba(0,0,0,.08); text-decoration: none; }
/* 칩이 많아 한 줄에 못 들어갈 때 — **밀지 않고 접는다.**
가로 스크롤은 화면 밖 칩을 있는 줄도 모르게 만들고, PC에서는 밀 수도 없다. */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-scroll { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { flex: none; }
/* ============================================================
B-1. 회원 모바일 톤 — 흰 바탕 + 검정 타이포 + 그린 포인트
------------------------------------------------------------
회원 앱은 영화 예매 앱(CGV) 계열의 구조를 따른다.
· 흰 바탕에 검정 타이포. 색은 브랜드 그린 하나만 포인트로 쓴다
· 상단은 큰 비주얼 캐러셀 — 다음 장이 옆에 살짝 걸쳐 보인다
· '무비차트' 자리에 대회 순위 목록 — 순위 숫자와 신청률을 크게 세운다
· 밑줄형 세그먼트 탭으로 목록을 갈아 끼운다
· 중간에 검정 섹션을 넣어 대비를 준다
· 상세 화면 아래에는 '예매하기'에 해당하는 신청 버튼이 늘 붙어 있다
심판 앱(data-service="referee")은 성격이 달라 손대지 않는다.
그래서 회원 전용 규칙은 전부 [data-service="member"] 아래에 둔다.
============================================================ */
body.mobile[data-service="member"] {
--bg: #FFFFFF;
--text: #14181A;
--text-2: #47525A;
--muted: #79838A;
--line: #E9ECEE;
--line-soft: #F1F3F4;
--shadow: none;
background: #C9CDD1;
/* ---------- 회원 앱 초록 (2026-09-23) ----------
홈 시안에서 고른 **엷은 초록**이다. 회원 대부분이 60~70대라
진한 초록에 흰 글자를 크게 깔면 눈이 쉬 피로하다 —
**바탕은 엷게, 글자는 진하게** 두면 대비는 오히려 더 잘 나온다.
⚠ 그래서 초록을 둘로 나눠 쓴다.
--brand 진한 쪽. **흰 글자를 얹는 배경**과 글자색이 여기서 나온다
(.btn · .nav-item.on · .step.now …). 엷게 잡으면 흰 글자가 묻는다.
--brand-mid 엷은 쪽. 테두리·아이콘 칩처럼 **글자를 얹지 않는 자리**에만 쓴다.
운영사·협회·클럽·심판은 그대로 둔다 — 이 블록 안에서만 바뀐다. */
--brand: #2F6B54; /* 흰 글자를 얹어도 읽힌다 (대비 7:1) */
--brand-strong: #21503E; /* 엷은 바탕 위의 진한 글자 */
--brand-mid: #5B9E82; /* 테두리·장식. 글자를 얹지 않는다 */
--brand-soft: #EDF6F2; /* 머리말·배지 바탕 */
--brand-line: #CFE6DB; /* 카드 테두리 */
--page-tint: #F4FAF7; /* 목록 뒤에 까는 아주 엷은 초록 */
--row-line: #D8E4DE; /* 목록에서 줄과 줄 사이. line-soft 는 흰 판 위에서 묻힌다 */
}
[data-service="member"] .m-app { background: #fff; }
[data-service="member"] .m-body { padding: 14px 16px 30px; }
[data-service="member"] .m-body.flush { padding: 0 0 24px; }
/* 상세 화면 헤더 — 초록 띠 대신 흰 바탕 */
[data-service="member"] .m-header {
background: #fff; color: #14181A; border-bottom: 1px solid #F1F3F4; min-height: 48px;
}
[data-service="member"] .m-header h1 { font-size: 17.5px; font-weight: 900; letter-spacing: -.6px; }
[data-service="member"] .m-header .back { width: 38px; height: 38px; margin-left: -9px; font-size: 27px; font-weight: 300; }
[data-service="member"] .m-header .act { font-size: 13.5px; font-weight: 700; }
[data-service="member"] .m-header .act a { color: #47525A; }
/* 마이페이지·프로필의 히어로는 검정 섹션으로 */
[data-service="member"] .m-hero { background: #14181A; }
[data-service="member"] .m-hero .greet small { opacity: .7; }
/* 홈 상단 바 — 얇고 흰색, 로고는 왼쪽 */
.cg-top {
flex: none; display: flex; align-items: center; gap: 4px;
padding: 6px 12px; padding-top: calc(env(safe-area-inset-top) + 6px);
background: #fff;
}
.cg-top .logo { flex: 1; display: flex; align-items: center; gap: 7px;
font-size: 19px; font-weight: 900; letter-spacing: -1px; color: #14181A; padding-left: 4px; }
/* 워드마크는 **한 덩어리**로 묶는다. 글자를 flex 아이템으로 흘리면
「파크」와 「리그」 사이에 gap 이 끼어들어 「파크 리그」로 벌어진다 */
.cg-top .logo .wd { display: inline-block; white-space: nowrap; }
.cg-top .logo em { font-style: normal; color: var(--brand); }
.cg-top .logo .mk { flex: none; width: 26px; height: 26px; border-radius: 9px;
background: var(--brand); color: #fff; display: grid; place-items: center; }
.cg-top .logo .mk svg { width: 15px; height: 15px; }
.cg-top .ic { width: 46px; height: 46px; display: grid; place-items: center; color: #14181A; position: relative; }
.cg-top .ic:hover { text-decoration: none; }
.cg-top .ic svg { width: 27px; height: 27px; }
.cg-top .ic .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #E62A2A; border: 2px solid #fff; }
/* 히어로 캐러셀 — 다음 장이 옆에 걸친다 */
.cg-herowrap { position: relative; }
/* 좌우 여백을 **남는 공간의 절반(8%)** 으로 잡는다.
여백이 16px 고정이면 첫 장은 스크롤이 0에서 멈춰 영영 가운데로 오지 못하고
왼쪽에 붙는다. 여백을 절반씩 주면 스크롤 0에서 이미 가운데다.
카드 폭 100%는 이 여백을 뺀 안쪽 폭 = 화면의 84% 다. */
.cg-hero {
display: flex; gap: 10px; overflow-x: auto; padding: 2px 8% 8px;
scroll-snap-type: x mandatory;
}
.cg-slide { flex: none; width: 100%; scroll-snap-align: center; border-radius: 18px; overflow: hidden; color: #fff; position: relative; }
/* 걸 대회가 없을 때 — 자리는 지키고 다음에 무엇을 기다리면 되는지 적는다 */
.cg-empty {
aspect-ratio: 2.4; padding: 18px; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; gap: 4px;
background: #F3F5F6; color: #14181A;
}
.cg-empty .ic { font-size: 34px; opacity: .35; margin-bottom: 4px; }
.cg-empty b { font-size: 16.5px; font-weight: 900; letter-spacing: -.5px; }
.cg-empty span { font-size: 12.5px; color: #79838A; }
.cg-empty .nx { margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: #E4E8EA; color: #47525A; font-weight: 700; }
.cg-empty .nx b { font-size: 12.5px; color: #14181A; }
.cg-slide .visual { aspect-ratio: 2.4; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; color: #fff; }
.cg-slide a.visual:hover { text-decoration: none; }
.cg-slide .visual::after { content: attr(data-em); position: absolute; right: -6px; top: -14px; font-size: 66px; opacity: .18; line-height: 1; }
/* 배너 배경 — **순서가 아니라 상태**에서 나온다. 배너가 몇 장이든 규칙은 같다.
어떤 상태가 어떤 색인지는 shared/member-view.js 의 규칙표가 정한다. */
.cg-slide .s-open { background: linear-gradient(145deg, #0E5F45, #1E9C6E); } /* 접수 중 · 자리 있음 */
.cg-slide .s-mine { background: linear-gradient(145deg, #06382A, #12775A); } /* 내가 참가 확정 */
.cg-slide .s-pay { background: linear-gradient(145deg, #14314F, #2F6FED); } /* 낼 참가비가 남음 */
.cg-slide .s-full { background: linear-gradient(145deg, #4A2B12, #C2760B); } /* 정원 마감 · 대기 접수 */
.cg-slide .s-ready { background: linear-gradient(145deg, #3A4147, #6C767C); } /* 접수 시작 전 */
.cg-slide .s-going { background: linear-gradient(145deg, #1A2A3D, #33587F); } /* 접수 마감 ~ 대회 전 */
.cg-slide .s-done { background: linear-gradient(145deg, #23282B, #454D52); } /* 종료 */
/* 열람 전용(타 협회) — 배너에는 걸지 않고 상세에서만 쓴다.
ready(회색)와 비슷하지만 더 옅다. ready 는 곧 열리는 것이고 이건 끝내 안 열린다. */
.cg-slide .s-view { background: linear-gradient(145deg, #4B5560, #7C8894); }
.cg-slide .foot .go.off { background: #2C3438; color: #7E888E; cursor: default; }
/* 협회가 개설 때 올린 **대표 이미지**가 있을 때. 대회 상세 상단에서만 쓴다.
------------------------------------------------------------
상태 그라데이션(.s-*)을 지우지 않고 **그 위에 이미지를 깔고 다시 어둡게 덮는다.**
이미지가 없으면 이 클래스를 빼는 것만으로 지금 화면 그대로 돌아온다 —
협회마다 사진 유무·밝기가 제각각이라, 사진이 없거나 밝아도 흰 글씨가 읽혀야 한다. */
.cg-slide .visual.img { background-size: cover; background-position: center; }
.cg-slide .visual.img::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(9, 20, 16, .18) 0%, rgba(9, 20, 16, .52) 52%, rgba(9, 20, 16, .82) 100%);
}
.cg-slide .visual.img::after { display: none; } /* 사진 위에 이모지 워터마크까지 겹치면 지저분하다 */
.cg-slide .visual.img > * { position: relative; z-index: 1; }
/* ── 대회 사진 — 보는 자리에서 좌우로 넘긴다 (회원 대회 상세) ──
썸네일 줄을 따로 두고 눌러서 크게 여는 방식은 단계가 하나 더 있다.
사진이 3~5장뿐이라 그 단계가 값을 못 하므로, 비주얼 자체를 밀어서 넘긴다.
층이 둘이다 — 아래 .ph-swipe(사진, 가로 스크롤) 위에 .visual.over(대회 정보, 고정).
정보가 사진과 같이 밀리면 두 번째 사진에서는 제목이 사라진다. */
.ph-wrap { position: relative; }
.ph-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ph-swipe::-webkit-scrollbar { display: none; }
.ph-swipe .ph { flex: none; width: 100%; aspect-ratio: 2.4; scroll-snap-align: center; background-size: cover; background-position: center; background-color: #21282B; }
/* 정보 층 — 사진 위에 얹고, 글자가 읽히도록 아래쪽을 어둡게 덮는다 */
.cg-slide .visual.over {
position: absolute; inset: 0; height: auto; background: none;
background-image: linear-gradient(180deg, rgba(9, 20, 16, 0) 0%, rgba(9, 20, 16, 0) 55%, rgba(9, 20, 16, .14) 74%, rgba(9, 20, 16, .42) 100%);
pointer-events: none;
}
.cg-slide .visual.over::after { display: none; } /* 사진 위에 이모지 워터마크까지 겹치면 지저분하다 */
/* 덮개를 거의 걷었으므로 글자 그림자가 가독성을 혼자 책임진다.
가까운 그림자(윤곽)와 먼 그림자(번짐)를 겹쳐 흰 하늘 사진 위에서도 버티게 한다. */
.cg-slide .visual.over .dday,
.cg-slide .visual.over .nm,
.cg-slide .visual.over .sub { text-shadow: 0 1px 2px rgba(9, 20, 16, .65), 0 2px 10px rgba(9, 20, 16, .55); }
/* 홈 배너의 사진 — 상세처럼 여러 장을 밀지 않고 대표 한 장만 깐다 */
.ph-swipe .ph.one, .cg-slide .ph.one { width: 100%; aspect-ratio: 2.4; background-size: cover; background-position: center; background-color: #21282B; }
/* 상세에서는 정보 층이 사진 스와이프를 가리면 안 되어 pointer-events 를 껐지만,
홈 배너는 정보 층 전체가 상세로 가는 링크라 눌려야 한다. */
.cg-slide > .ph-wrap .visual.over { pointer-events: auto; }
.ph-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 6px; justify-content: center; }
.ph-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .40); transition: background .15s; }
.ph-dots i.on { background: #fff; }
/* 손으로 밀 수 없는 환경(PC)에서만 화살표를 준다 */
.ph-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(20, 24, 26, .48); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.ph-nav.prev { left: 8px; }
.ph-nav.next { right: 8px; }
.ph-nav:hover { background: rgba(20, 24, 26, .72); }
@media (hover: hover) and (pointer: fine) { .ph-nav { display: grid; place-items: center; } }
.cg-slide .tag { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.34); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cg-slide .dday { font-size: 34px; font-weight: 900; letter-spacing: -1.8px; line-height: 1; }
.cg-slide .nm { font-size: 21px; font-weight: 900; letter-spacing: -.9px; margin-top: 8px; }
.cg-slide .sub { font-size: 13px; opacity: .9; margin-top: 6px; }
.cg-slide .foot { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #14181A; }
.cg-slide .foot .rate { flex: 1; font-size: 13px; font-weight: 700; }
.cg-slide .foot .rate b { color: #4ADE9B; font-size: 16px; margin-right: 3px; }
.cg-slide .foot .go { flex: none; padding: 7px 16px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 800; }
.cg-slide .foot .go:hover { text-decoration: none; }
.cg-count { text-align: center; font-size: 12px; font-weight: 700; color: #98A1A6; margin-top: -4px; }
.cg-count b { color: #14181A; }
/* 가로로 넘기는 줄 — 손가락은 그냥 되지만 마우스는 잡아끌 수 있어야 한다.
drag 중에는 스냅을 꺼야 손을 따라온다. 동작은 common.js가 붙인다. */
[data-xscroll] { cursor: grab; scrollbar-width: none; }
[data-xscroll]::-webkit-scrollbar { display: none; }
[data-xscroll].dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
[data-xscroll].dragging * { user-select: none; }
/* 화살표는 마우스를 쓰는 화면에서만 보인다 */
.cg-nav {
position: absolute; top: 76px; width: 36px; height: 36px; z-index: 5;
display: none; place-items: center; cursor: pointer;
border: 0; border-radius: 50%; background: rgba(20, 24, 26, .5); color: #fff; font-size: 17px;
}
.cg-nav.prev { left: 5px; }
.cg-nav.next { right: 5px; }
.cg-nav:hover { background: rgba(20, 24, 26, .72); }
.cg-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cg-nav { display: grid; } }
/* 밑줄형 세그먼트 — 목록 화면의 .seg 도 같은 모양으로 맞춘다 */
.cg-tabs { display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid #E9ECEE; margin-top: 16px; }
.cg-tabs button { padding: 12px 0; border: 0; background: none; cursor: pointer; position: relative; font-size: 16.5px; font-weight: 800; letter-spacing: -.5px; color: #A3ABB0; }
.cg-tabs button.on { color: #14181A; }
.cg-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #14181A; border-radius: 2px; }
[data-service="member"] .seg {
background: none; border-radius: 0; padding: 0; gap: 20px;
border-bottom: 1px solid #E9ECEE; margin: 0 -16px 4px; padding: 0 16px;
overflow-x: auto; scrollbar-width: none;
}
[data-service="member"] .seg::-webkit-scrollbar { display: none; }
[data-service="member"] .seg a, [data-service="member"] .seg button {
flex: none; padding: 12px 0; border-radius: 0; font-size: 15.5px; font-weight: 800;
letter-spacing: -.5px; color: #A3ABB0; position: relative;
}
[data-service="member"] .seg a.on, [data-service="member"] .seg button.on {
background: none; box-shadow: none; color: #14181A;
}
[data-service="member"] .seg a.on::after, [data-service="member"] .seg button.on::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
background: #14181A; border-radius: 2px;
}
/* ---------- 대회 목록 한 줄 ----------
홈의 대회차트 · 대회 목록 · 검색 결과가 **같은 줄**을 쓴다
(마크업은 shared/member-view.js 의 rowHTML 한 곳에서 나온다).
예전에는 순위 숫자(1·2·3) + 상태 배지 두 줄 + 제목 + 일정 + 주최 + 게이지에,
오른쪽 칸에 「85%」「136/160」[신청] 까지 세로로 쌓였다. 한 줄에 읽을 덩어리가
다섯이라 무엇부터 봐야 할지 정해지지 않았고, 예순 넘은 회원에게는 글씨도 작았다.
지금은 셋으로만 나눈다 —
① 왼쪽 .dt 언제 (날짜를 크게)
② 가운데 .bd 무엇을 (대회명 → 주최·유형·참가비 → 상태 한 줄)
③ 오른쪽 .side 무엇을 할지 (버튼 하나, 없으면 짧은 글자)
순위 숫자는 뺐다 — 일정 순 목록이라 번호에 뜻이 없었고, 그 자리가 날짜가 됐다. */
.cg-rank > li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #F1F3F4; }
.cg-rank > li:last-child { border-bottom: 0; }
/* 줄 전체(날짜 + 대회명 + 일정)를 눌러 상세로 간다.
오른쪽 작은 버튼만 누를 수 있으면 손가락으로 찾기 어렵다.
버튼은 '신청'처럼 다른 동작이라 링크 영역 밖에 그대로 둔다. */
.cg-rank .txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; }
.cg-rank a.txt:hover { text-decoration: none; }
.cg-rank a.txt:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
/* ① 날짜 — 일(日)을 크게, 그 아래 달과 요일. 숫자는 폭이 고르게(tabular) */
.cg-rank .dt { flex: none; width: 54px; text-align: center; }
.cg-rank .dt b { display: block; font-size: 27px; font-weight: 900; line-height: 1;
letter-spacing: -1px; font-variant-numeric: tabular-nums; color: #14181A; }
.cg-rank .dt i { display: block; margin-top: 3px; font-style: normal;
font-size: 13px; font-weight: 700; color: #79838A; }
/* ② 본문 */
.cg-rank .bd { flex: 1; min-width: 0; display: block; }
.cg-rank .bd .nm { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.cg-rank > li:hover { background: #FAFBFC; }
.cg-rank > li.none { display: block; padding: 0; border-bottom: 0; }
.cg-rank > li.none:hover { background: none; }
/* 민트 섹션이 비었을 때 */
.cg-none { margin-top: 14px; padding: 26px 18px; border-radius: 15px; background: #fff; text-align: center; box-shadow: 0 1px 3px rgba(20, 24, 26, .10); }
.cg-none b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.4px; color: #14181A; }
.cg-none span { display: block; font-size: 12.5px; color: #79838A; margin-top: 6px; line-height: 1.6; }
/* 버튼은 오른쪽에 붙인다 — 읽는 순서(문구 → 행동)와 시선이 맞는다 */
.cg-none .btn { margin-top: 14px; margin-left: auto; margin-right: 0; width: fit-content; }
/* 주최·참가비, 그리고 상태 한 줄. span 이어도 줄을 나눠 준다 */
.cg-rank .bd .mt { display: block; font-size: 14px; color: #79838A; margin-top: 3px; }
/* 인원·타수처럼 **숫자가 앞에 오는 줄**은 조금 진하게 — 읽어야 할 값이다 */
.cg-rank .bd .mt.num { color: #47525A; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 신청할 수 없는 이유 — 회색으로 죽이지 않는다. 읽어야 하는 문장이다 */
.cg-rank .bd .mt.why { color: #47525A; font-weight: 700; }
/* ③ 오른쪽 — 누를 것이 있으면 버튼 하나, 없으면 짧은 글자 하나.
예전처럼 숫자·이름표·버튼을 세로로 쌓지 않는다. 쌓으면 좁은 칸에 세 덩어리가
들어가 무엇이 중요한지 가려지고, 긴 이름표가 칸을 화면 밖으로 민다. */
.cg-rank .side { flex: none; display: flex; align-items: center; }
/* [신청]·[대기]·[결제]·[스코어] — 손가락으로 겨냥하는 자리라 48px 를 지킨다 */
.cg-rank .side .go {
display: flex; align-items: center; justify-content: center;
min-width: 62px; height: 48px; padding: 0 16px; border-radius: 10px;
background: var(--brand); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.3px;
}
.cg-rank .side .go:hover { background: var(--brand-strong); text-decoration: none; }
/* 본 동작이 아닌 것(대기·스코어)은 테두리만 — 「신청」과 한눈에 갈린다 */
.cg-rank .side .go.ghost { background: #fff; border: 1px solid var(--line); color: var(--text-2); }
.cg-rank .side .go.ghost:hover { background: #F7FAF8; border-color: var(--brand-line); color: var(--brand-strong); }
/* 누를 것이 없는 줄 — 지금 어떤 상태인지만 짧게 */
.cg-rank .side .tag { min-width: 52px; text-align: center; font-size: 14px; font-weight: 700;
line-height: 1.35; color: #98A1A6; }
.cg-rank .side .tag.on { color: var(--brand); }
/* [대회 더보기] — 목록의 마지막 줄. 대회 줄과 같은 폭을 쓰되 눌러야 할 것임이 보이게 한다 */
.cg-rank .more { padding: 0; }
.cg-rank .more a { display: flex; align-items: center; justify-content: center; gap: 4px;
min-height: 48px; font-size: 13.5px; font-weight: 700; color: var(--brand-strong); }
.cg-rank .more a:hover { text-decoration: none; background: #F7FAF8; }
.cg-rank .more b { font-weight: 800; }
/* 목록 끝 — 더 있는지, 끝났는지 알려 준다. 여기가 보이면 다음 10개를 붙인다 */
.list-more { padding: 18px 16px 26px; text-align: center; font-size: 12.5px; color: #98A1A6; font-weight: 600; }
/* 상단 헤더의 아이콘 버튼 — 손가락으로 누르는 자리라 44px 표적을 지킨다.
글자 링크(⚙)로 두면 표적이 작아 옆의 것이 눌린다. */
.m-header .act .ic {
display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
border: 0; background: none; color: inherit; cursor: pointer; padding: 0;
}
.m-header .act .ic svg { width: 23px; height: 23px; }
.m-header .act .ic:hover { text-decoration: none; color: var(--brand-strong); }
/* 헤더의 글자 버튼(저장 등) — 그 화면의 본 동작이라 링크가 아니라 버튼으로 둔다.
‹ 와 높이를 맞추고 44px 표적을 지킨다.
색은 **검정**이다. 회원 앱은 흰 바탕 + 검정 타이포 + 그린 포인트로 잡혀 있어(B-1),
초록을 헤더까지 올리면 화면에서 가장 진한 색이 상단에 박혀 본문보다 먼저 눈에 든다.
초록은 목록·배너에서 **상태를 가리킬 때** 쓰는 색으로 남긴다. */
.m-header .act .btn {
padding: 8px 15px; font-size: 13.5px; font-weight: 700; margin-right: -2px;
background: var(--text); border-color: var(--text);
}
.m-header .act .btn:hover { background: #000; border-color: #000; }
.m-header .act .btn.outline { background: transparent; border-color: var(--line); color: var(--text-2); }
/* 알림 줄 끝의 유형·시각 — 거를 수는 없어도 무슨 알림인지는 알아야 한다 */
.nt-tag { font-size: 11.5px !important; color: #9AA4A0 !important; margin-top: 3px; }
/* 안 읽은 알림 — **점과 굵기 둘 다**로 표시한다.
배경색만 쓰면 색약인 사람에게는 읽은 것과 구분되지 않고,
화면 밝기를 낮춘 야외에서도 옅은 배경은 사라진다. */
/* 안 읽은 줄에 배경색을 깔지 않는다 — 목록의 절반이 초록 띠가 되면 무엇이 새것인지
오히려 흐려지고, 그 위의 배지·아이콘 색과도 부딪힌다.
표시는 **제목 앞의 작은 점**이다. 오른쪽 끝에 따로 띄우면 제목과 멀어져
무엇이 새것인지 눈이 두 번 움직여야 알 수 있다. */
.nt-row.unread .txt b { font-weight: 800; }
.nt-row .nt-new {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--danger); margin-right: 7px; vertical-align: 2px;
}
/* 알림 한 줄은 눌러서 전문을 본다 — 목록에는 첫 줄만 보인다 */
.nt-row { cursor: pointer; align-items: center; }
.nt-row:hover { background: #FAFCFB; }
/* 지우기 — 마우스를 올렸을 때만 드러낸다. 줄마다 ✕ 가 always 떠 있으면
목록이 지우는 화면처럼 보이고, 읽으러 온 사람의 눈을 끈다.
손가락으로 쓰는 기기에는 올릴 마우스가 없어 옅게 늘 둔다. */
.nt-row .nt-x {
flex: none; align-self: center; width: 28px; height: 28px; padding: 0;
display: grid; place-items: center;
border: 0; border-radius: 50%; background: none; color: #B6C0BB; cursor: pointer;
opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.nt-row .nt-x svg { width: 15px; height: 15px; }
.nt-row:hover .nt-x, .nt-row .nt-x:focus-visible { opacity: 1; }
.nt-row .nt-x:hover { background: var(--danger-soft); color: var(--danger); }
@media (hover: none) { .nt-row .nt-x { opacity: .5; } }
/* 전문 — 보낸 그대로 줄바꿈까지 살린다 */
.nt-full { white-space: pre-wrap; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
/* 「○○ 님의 대회」 섹션 ⚠ 색을 밴드로 깔지 않는다
------------------------------------------------------------
전에는 이 구간에 민트 배경을 깔아 구분했다. 그러면 그 위에 올라가는
카드와 배지가 전부 그 색에 묻혀서, 배지에 다시 진한 색을 깔아 흰 글씨로
빼내는 **보정**이 붙는다. 보정이 붙기 시작하면 상태색(파랑·초록·회색)이
무엇을 뜻하는지 화면에서 읽히지 않는다.
그래서 구분은 **여백과 제목 굵기**로 하고, 색은 **상태를 가리킬 때만** 쓴다.
카드 왼쪽 4px 바가 그 하나뿐인 색이며, 값은 shared/member-view.js 의 tone 그대로다.
(배너 · 대회 목록 · 여기가 같은 tone을 쓰므로 세 곳의 색이 어긋나지 않는다) */
/* 배너 영역(흰 배경)과 맞닿는 자리. 위 모서리를 깎아 배너 그룹이 둥글게 끝나 보이게 한다 */
.cg-my { background: #F5F7F7; padding: 22px 16px; margin-top: 22px; border-radius: 20px 20px 0 0; }
.cg-my h2 { font-size: 17px; font-weight: 900; letter-spacing: -.6px; color: #14181A; display: flex; align-items: center; justify-content: space-between; }
.cg-my h2 a { font-size: 12.5px; font-weight: 700; color: #6B7680; }
/* 배너와 같은 규칙 — 여백을 남는 공간의 절반으로 줘야 첫 장도 가운데에 선다 */
.cg-mine {
display: flex; gap: 10px; overflow-x: auto; margin: 14px -16px 0; padding: 0 8% 2px;
scroll-snap-type: x mandatory;
}
.cg-mine .it {
flex: none; width: 100%; scroll-snap-align: center;
background: #fff; border-radius: 15px; padding: 16px 16px 16px 19px;
color: inherit; box-shadow: 0 1px 3px rgba(20, 24, 26, .10);
position: relative; overflow: hidden;
}
/* 상태색이 나오는 유일한 자리 — 카드 배경까지 물들이지 않는다 */
.cg-mine .it::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone, #12775A); }
.cg-mine .it.t-pay { --tone: #2F6FED; }
.cg-mine .it.t-mine { --tone: #12775A; }
.cg-mine .it.t-going { --tone: #33587F; }
.cg-mine .it.t-done { --tone: #98A1A6; }
.cg-mine a.it:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(20, 24, 26, .14); }
/* 흰 카드 위에서는 진한 pill이 무겁다 — 옅은 바탕에 진한 글씨로 */
.cg-mine .it .st { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(18, 119, 90, .10); color: #0E5F45; }
.cg-mine .it .st.b { background: rgba(47, 111, 237, .10); color: #2258C8; }
.cg-mine .it .st.o { background: #EDF0F1; color: #6B7680; }
.cg-mine .it .nm { font-size: 15.5px; font-weight: 800; letter-spacing: -.4px; margin-top: 9px; color: #14181A; }
.cg-mine .it .mt { font-size: 12.5px; color: #79838A; margin-top: 5px; }
.cg-mine .it .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid #EDF0F1; font-size: 12.5px; color: #79838A; }
.cg-mine .it .row b { color: #14181A; font-size: 15px; }
/* 미결제는 한 줄 아래 값에서 바로 걸려야 한다 — 왼쪽 바와 같은 색으로 */
.cg-mine .it.t-pay .row b { color: #2F6FED; }
/* 섹션 제목(전체 폭) */
.cg-h2 { display: flex; align-items: center; justify-content: space-between; padding: 22px 16px 11px; }
.cg-h2 h2 { font-size: 17px; font-weight: 900; letter-spacing: -.6px; }
.cg-h2 a { font-size: 12.5px; color: #98A1A6; font-weight: 600; }
/* 2열 타일 — 아이콘은 이모지 대신 선 아이콘. 이모지는 기기마다 모양이 달라진다 */
.cg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.cg-grid a { border-radius: 14px; padding: 15px; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; color: #14181A; }
.cg-grid a:hover { text-decoration: none; }
/* 제목 1줄 · 부제 2줄에서 끊는다 — 공지 제목처럼 **길이를 예측할 수 없는 값**이
들어오는 자리라, 그냥 두면 한 칸만 늘어나 옆 칸까지 같이 커지고 격자가 어긋난다.
말줄임(…)으로 잘리므로 뒤가 있다는 것도 보인다. */
.cg-grid a .tx { min-width: 0; }
.cg-grid a .tx b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-grid a .tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; font-size: 12px; line-height: 1.45;
color: #6C767C; margin-top: 3px; word-break: break-all; }
.cg-grid a .ic { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.cg-grid a .ic svg { width: 21px; height: 21px; }
.cg-grid .e1 { background: #EAF4EF; } .cg-grid .e1 .ic { color: var(--brand); }
.cg-grid .e2 { background: #EDF2FC; } .cg-grid .e2 .ic { color: #2F6FED; }
.cg-grid .e3 { background: #FBF1E3; } .cg-grid .e3 .ic { color: #C2760B; }
.cg-grid .e4 { background: #F3F1FB; } .cg-grid .e4 .ic { color: #7A45D6; }
/* 하단 고정 바 안쪽 — 왼쪽 설명 + 오른쪽 버튼 */
.cg-cta { display: flex; align-items: center; gap: 10px; width: 100%; }
.cg-cta .l { flex: 1; line-height: 1.25; min-width: 0; }
.cg-cta .l small { display: block; font-size: 11.5px; color: #98A1A6; font-weight: 700; }
.cg-cta .l b { font-size: 15px; letter-spacing: -.4px; }
/* 기존 모바일 컴포넌트를 같은 톤으로 — 그림자를 빼고 선으로 나눈다 */
[data-service="member"] .m-card { border: 1px solid #E9ECEE; border-radius: 16px; box-shadow: none; padding: 16px; }
[data-service="member"] .m-card .title { font-size: 16.5px; font-weight: 800; letter-spacing: -.5px; }
[data-service="member"] .m-card .meta { font-size: 12.5px; }
[data-service="member"] .m-list { border: 1px solid #E9ECEE; border-radius: 16px; box-shadow: none; }
[data-service="member"] .m-list > li, [data-service="member"] .m-list > a { padding: 15px 16px; font-size: 15px; }
[data-service="member"] .m-list .txt b { font-weight: 800; letter-spacing: -.3px; }
[data-service="member"] .m-list .lico { width: 36px; height: 36px; border-radius: 11px; background: #F2F5F4; color: var(--brand); font-size: 17px; }
[data-service="member"] .m-list .lico svg { width: 19px; height: 19px; }
/* ---------- 공유 시트 — 아래에서 올라오는 창 ---------- */
[data-service="member"] .modal-backdrop.sheet { padding: 0; align-items: flex-end; }
[data-service="member"] .modal-backdrop.sheet .modal {
max-width: 460px; max-height: 86vh; border-radius: 20px 20px 0 0;
}
[data-service="member"] .modal-backdrop.sheet .modal-foot { border-radius: 0; }
/* 섹션 제목 줄에 버튼을 함께 두는 자리 */
.pick-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 9px; }
.pick-head-row h2 { font-size: 17px; font-weight: 900; letter-spacing: -.6px; }
.pick-head-row .all { font-size: 12.5px; font-weight: 700; color: var(--brand-strong); background: none; border: 0; cursor: pointer; padding: 4px 0; }
/* 공유 채널 — 채널마다 되는 범위가 달라서 한 줄 설명을 함께 둔다 */
.share-ch .lico.kko { background: #FEE500; color: #191600; }
.share-ch .lico.sms { background: var(--brand-soft); color: var(--brand-strong); }
.share-ch .lico.app { background: #E4EEFD; color: #2456B8; }
.share-ch .lico.cpy { background: #EDF0F1; color: #47525A; }
.share-ch > li { cursor: pointer; }
.share-ch > li:hover { background: #FAFCFB; }
/* 보낼 내용 미리보기 — 실제로 나가는 글자 그대로 보여 준다 */
.share-msg {
border: 1px solid var(--line); border-radius: 14px; background: #F7F9F8;
padding: 14px 15px; font-size: 13px; line-height: 1.75; color: var(--text-2);
white-space: pre-wrap; word-break: break-word;
}
[data-service="member"] .sec-title { margin: 24px 0 11px; }
[data-service="member"] .sec-title h2 { font-size: 17px; font-weight: 900; letter-spacing: -.6px; }
[data-service="member"] .sec-title a { font-size: 12.5px; font-weight: 600; color: #98A1A6; }
[data-service="member"] .btn { padding: 11px 16px; font-size: 14.5px; font-weight: 800; border-radius: 10px; }
[data-service="member"] .btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 8px; }
[data-service="member"] .btn.lg { padding: 14px 20px; font-size: 15.5px; border-radius: 12px; }
[data-service="member"] .btn.outline { border-color: #DDE2E5; color: #3A464C; }
[data-service="member"] .chip { border-color: #E4E8EA; padding: 7px 13px; font-weight: 600; }
[data-service="member"] .chip.on { background: #14181A; border-color: #14181A; color: #fff; font-weight: 700; }
[data-service="member"] .notice-box { border-radius: 12px; }
[data-service="member"] .pay-sum { border-color: #E9ECEE; border-radius: 16px; }
[data-service="member"] .m-actionbar { border-top: 1px solid #EDF0F1; }
[data-service="member"] .progress { background: #EDF0F1; }
/* 하단 탭 — 담백하게, 현재 위치만 그린으로 */
[data-service="member"] .tabbar { border-top: 1px solid #EDF0F1; box-shadow: none; }
[data-service="member"] .tabbar a.on { color: var(--brand); }
/* ============================================================
B-2. 모달 / 팝업 (관리자 · 모바일 공용)
------------------------------------------------------------
구조는 어느 화면이든 같다 — 머리(제목+닫기) / 몸통 / 발(버튼).
============================================================ */
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
display: none; align-items: center; justify-content: center;
padding: 24px; background: rgba(12, 22, 18, .48);
}
.modal-backdrop.on { display: flex; }
.modal {
width: 100%; max-width: 520px; max-height: calc(100vh - 48px);
display: flex; flex-direction: column;
background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
overflow: hidden;
}
.modal.wide { max-width: 760px; }
.modal-head {
flex: none; display: flex; align-items: flex-start; gap: 12px;
padding: 20px 22px 16px; border-bottom: 1px solid var(--line);
}
.modal-head > div:first-child { flex: 1; min-width: 0; }
.modal-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.modal-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.55; }
.modal-head .x {
flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0;
border: 0; background: none; border-radius: 8px;
font-size: 16px; color: var(--muted); cursor: pointer;
}
.modal-head .x:hover { background: var(--line-soft); color: var(--text); }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.modal-foot {
flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
padding: 15px 22px; border-top: 1px solid var(--line); background: #FBFCFC;
}
/* 왼쪽 보조 설명 — 버튼과 같은 줄에 두되 남는 자리를 다 차지하게 한다 */
.modal-foot .left { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.5; text-align: left; }
/* 팝업 위에 또 팝업이 뜨는 경우 (조 편성 위 참가자 교체 등) */
.modal-backdrop.stack-layer { z-index: 110; background: rgba(12, 22, 18, .38); }
/* ============================================================
B-3. 확인 팝업 (shared/confirm.js)
------------------------------------------------------------
저장·삭제처럼 값이 바뀌는 동작 직전에 뜬다. 다른 팝업 위에도 떠야 하므로
z-index 가 가장 높다. 아이콘 색이 곧 위험도다 — brand / warn / danger.
============================================================ */
.modal-backdrop.confirm-layer { z-index: 200; }
.modal.confirm { max-width: 380px; }
.confirm-body { padding: 26px 24px 20px; text-align: center; }
.c-icon {
width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
display: grid; place-items: center; font-size: 24px; font-weight: 800;
background: var(--brand-soft); color: var(--brand-strong);
}
.c-icon.warn { background: var(--warn-soft); color: var(--warn); }
.c-icon.danger { background: var(--danger-soft); color: var(--danger); }
.c-title { font-size: 17.5px; font-weight: 800; letter-spacing: -.5px; }
.c-msg { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin-top: 10px; }
.c-msg b { color: var(--text); }
/* 무엇을 대상으로 하는지 — 문장 안에 묻히지 않게 박스로 따로 세운다 */
.c-target {
margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
background: var(--line-soft); font-size: 12.5px; color: var(--text-2); line-height: 1.6;
}
.c-target .v { display: block; }
.c-warn { margin-top: 14px; text-align: left; }
.modal.confirm .modal-foot { justify-content: stretch; background: #fff; border-top: 1px solid var(--line-soft); }
.modal.confirm .modal-foot .btn { flex: 1; justify-content: center; }
/* ---------- 완료 토스트 ---------- */
.pg-toast-wrap {
position: fixed; left: 0; right: 0; bottom: 28px; z-index: 300;
display: flex; flex-direction: column; align-items: center; gap: 8px;
pointer-events: none; padding: 0 16px;
}
.pg-toast {
display: flex; align-items: center; gap: 9px;
max-width: 420px; padding: 12px 18px; border-radius: 999px;
background: rgba(20, 24, 26, .93); color: #fff;
font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
animation: pg-toast-in .18s ease-out;
}
.pg-toast .i {
width: 19px; height: 19px; flex: none; border-radius: 50%;
display: grid; place-items: center; font-size: 11px;
background: var(--brand); color: #fff;
}
.pg-toast.danger .i { background: var(--danger); }
.pg-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes pg-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ============================================================
B-4. 로그인 화면
------------------------------------------------------------
모바일(회원·심판)은 .login-wrap 을 앱 안에 두고,
관리자(운영사·협회·클럽)는 body.login-page 에 카드 하나를 띄운다.
============================================================ */
.login-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 22px 40px; overflow-y: auto; }
.login-logo { text-align: center; margin-bottom: 30px; }
.login-logo .mark {
width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 19px;
background: var(--brand); color: #fff; display: grid; place-items: center;
font-size: 30px; box-shadow: var(--shadow-lg);
}
.login-logo h1 { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.login-logo p { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.btn-kakao {
width: 100%; padding: 14px; border: 0; border-radius: 12px;
background: #FEE500; color: #191600; font-size: 15px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-kakao:hover { text-decoration: none; filter: brightness(.97); }
/* 관리자 로그인 화면 */
body.login-page { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(150deg, #0F2A22, #157F5C); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-lg); }
.login-card .login-logo .mark { border-radius: 18px; }
.login-card .login-wrap { padding: 0; }
/* ============================================================
B-5. 발송 문구 미리보기 (말풍선)
------------------------------------------------------------
실제로 나갈 글자를 **그대로** 보여 준다. 줄바꿈이 살아 있어야
회원 화면에서 어떻게 보일지 알 수 있으므로 white-space: pre-line.
============================================================ */
.msg-phone { max-width: 320px; }
.msg-phone .who { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.msg-bubble {
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
background: #FBFCFC; box-shadow: var(--shadow);
}
.msg-bubble .head {
padding: 9px 13px; background: #FEE500; color: #191600;
font-size: 12px; font-weight: 800; border-bottom: 1px solid rgba(0,0,0,.06);
}
.msg-bubble .body {
padding: 14px 15px; font-size: 13px; line-height: 1.75; color: var(--text-2);
white-space: pre-line; word-break: break-all;
}
.msg-bubble .foot {
display: flex; gap: 6px; padding: 10px 13px; border-top: 1px solid var(--line-soft); background: #fff;
}
.msg-bubble .foot button, .msg-bubble .foot a {
flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 9px;
background: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700;
color: var(--text-2); text-align: center; cursor: pointer;
}
/* ============================================================
B-6. 참가 불가 알리기 (회원 참가 이력)
------------------------------------------------------------
접수 마감 뒤에는 스스로 취소할 수 없다. 대신 협회에 알리는 자리다.
카드 안에 들어가는 박스라 배경을 옅게 깔아 본문과 구분한다.
============================================================ */
.ab-box { background: #FBFCFC; border-radius: var(--radius-sm); padding: 13px 14px; }
.ab-box .ab-state { font-size: 12.5px; }
.ab-box .ab-desc { font-size: 12.5px; }
.ab-box.done { background: var(--warn-soft); }
.ab-box.done .ab-desc { color: var(--warn); }
/* ============================================================
B-7. 금액 요약
============================================================ */
.pay-sum { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; }
.pay-sum li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13.5px; color: var(--text-2); }
.pay-sum li.total { margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--text); }
.pay-sum li.total b { font-size: 19px; color: var(--brand-strong); }
.pay-sum li .muted { color: var(--muted); }
/* ============================================================
B-8. UI 시안 허브 (ui/index.html)
------------------------------------------------------------
실제 서비스 화면이 아니라 **시안 목록**이다. 서비스 화면과 헷갈리지
않도록 어두운 바탕을 쓴다.
============================================================ */
body.hub { background: #0F2A22; color: #C9E2D8; padding: 40px 24px 64px; min-height: 100vh; }
.hub-wrap { max-width: 1180px; margin: 0 auto; }
.hub-wrap h1 { font-size: 30px; font-weight: 900; letter-spacing: -1.2px; color: #fff; margin-top: 10px; }
.hub-wrap > p { font-size: 13.5px; line-height: 1.8; margin-top: 12px; color: #9CC4B4; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 28px; }
.hub-card {
background: #16382E; border: 1px solid #234C3E; border-radius: 16px; padding: 20px;
display: flex; flex-direction: column;
}
.hub-card .no { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: #6E9887; }
.hub-card h3 { font-size: 18px; font-weight: 800; color: #fff; margin-top: 8px; letter-spacing: -.5px; }
.hub-card > p { font-size: 12.5px; line-height: 1.7; color: #9CC4B4; margin-top: 8px; }
.hub-card .tag {
align-self: flex-start; margin-top: 12px; padding: 5px 11px; border-radius: 999px;
background: #234C3E; color: #A8D0BF; font-size: 11.5px; font-weight: 700;
}
.hub-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #234C3E; }
.hub-links a {
padding: 7px 11px; border: 1px solid #2C6B57; border-radius: 8px;
background: #12332A; color: #C9E2D8; font-size: 12px; font-weight: 600;
}
.hub-links a:hover { background: #1C4A3C; color: #fff; text-decoration: none; }
/* ============================================================
B-9. 회원 화면 — 글자 크기 체계와 표적 크기 ⚠ 중요
------------------------------------------------------------
**회원 대부분이 60~70대다.** 기본값보다 한 단계 올린 값이다.
화면마다 조금씩 다른 크기를 쓰면 "어떤 건 크고 어떤 건 작은" 상태가
되므로 **단계를 정해 두고 그 안에서만 고른다.**
22px 브랜드 홈 상단 「파크리그」
18px 화면 제목 m-header h1
17px 섹션 제목 sec-title h2 · 내 대회 · 대회목록 탭 · 큰 버튼
16px 카드/줄 제목 · 버튼 대회명 · 목록 항목 · 카드 제목 · 버튼
15px 본문 목록 본문 · 입력값 · 하단 탭 라벨
13px 부제 · 메타 날짜·장소 · 목록 부제 · 안내문
12px 라벨 · 배지 배지 · 보조 링크 · 도움말
▸ 실제 폰에서 보니 두 단계는 과했다. **각 단계를 3px 씩 내렸고**,
내린 값이 모바일 기본보다 작아지는 자리는 기본값에서 멈췄다
(.m-card .title 16.5px · .sec-title a 12.5px).
▸ 배너(.cg-slide)만 예외다. 시각적 히어로라 D-day 33px·대회명 20px 로
한 단계 위에 둔다 — 여기까지 표에 맞추면 배너가 배너가 아니게 된다.
▸ 누르는 것은 **세로 56px 이상**. 글자만 키우면 표적은 그대로다.
▸ 이 표는 **회원 화면 전체**에 걸린다([data-service="member"]).
화면 안에서 따로