/* ============================================================================
관리 콘솔 — /clubhouse/manage/
폰이 기본이고 데스크탑이 확장이다. 그래서 미디어쿼리는 min-width 로만 쓴다.
========================================================================== */
.sbh-console {
--con-bg: #F4F5F8;
--con-card: #FFFFFF;
--con-line: #E4E6EC;
--con-ink: #1F2430;
--con-muted: #79808F;
--con-gold: #A38856;
--con-ok: #0F7B5F;
--con-no: #C4453F;
--con-warn: #B5741A;
/* Noto 한 집안 세 벌. sbh.css 가 글꼴 파일을 불러 온다.
라틴과 한글이 한 낱말로 붙는 자리가 많아(9/12/26(토) 번개라운딩) 같은 집안이라야 한다. */
--con-body: 'Noto Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
--con-disp: 'Noto Sans', 'Noto Sans KR', sans-serif;
--con-mono: 'Noto Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-family: var(--con-body);
-webkit-font-smoothing: antialiased;
color: var(--con-ink);
-webkit-text-size-adjust: 100%;
}
.sbh-console * { box-sizing: border-box; }
.sbh-con-shell {
display: block;
/* 폰에서 아래쪽 탭바에 내용이 가리지 않도록 */
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
/* ------------------------------------------------------------------ 내비 */
.sbh-con-nav {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9990;
display: grid;
/* 탭이 몇 개든 한 줄에 고르게 — 개수를 하드코딩하면 탭을 늘릴 때마다 줄이 접힌다 */
grid-auto-flow: column;
grid-auto-columns: 1fr;
background: rgba(255, 255, 255, .96);
backdrop-filter: saturate(180%) blur(12px);
border-top: 1px solid var(--con-line);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 폰 탭바에는 다섯 개만. 나머지는 "더보기" 시트 안에서 나온다.
열두 개를 한 줄에 늘어놓으면 글자가 다 뭉개진다. */
.sbh-con-tab.is-more { display: none; }
.sbh-con-morebtn {
background: none; border: 0; font-family: inherit; cursor: pointer;
/* 더보기가 있는지 없는지 눈으로 알 수 있어야 한다 — 회색 글자 하나만 두면
옆 탭들과 구분이 안 되고, 못 찾으면 나머지 여덟 화면이 통째로 사라진다 (v4.63). */
color: var(--con-gold);
}
.sbh-con-morebtn .sbh-con-lab::after { content: " ⋯"; }
/* 테마의 「맨 위로」 떠 있는 단추가 오른쪽 끝 탭(=더보기)을 덮는다.
우리 탭바 위로 올려 준다 — 지우지는 않는다. */
@media (max-width: 781px) {
#back_to_top, .mfn-back-to-top, #Wrapper #back_to_top {
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
}
.sbh-con-nav.is-open {
display: block;
max-height: 78vh;
overflow-y: auto;
padding-top: 6px;
}
.sbh-con-nav.is-open .sbh-con-tab {
flex-direction: row;
justify-content: flex-start;
min-height: 46px;
padding: 0 18px;
font-size: 15px;
}
.sbh-con-nav.is-open .sbh-con-tab.is-more { display: flex; }
.sbh-con-nav.is-open .sbh-con-morebtn { width: 100%; color: var(--con-gold); }
.sbh-con-nav.is-open .sbh-con-badge { position: static; margin: 0 0 0 auto; }
.sbh-con-tab {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
/* 폰에서 손가락으로 정확히 누를 수 있는 최소 크기 */
min-height: 56px;
padding: 8px 4px;
font-size: 11px;
font-weight: 600;
color: var(--con-muted);
text-decoration: none;
}
.sbh-con-tab.is-active { color: var(--con-gold); }
.sbh-con-badge {
position: absolute;
top: 6px;
left: 50%;
margin-left: 6px;
min-width: 17px;
height: 17px;
padding: 0 5px;
border-radius: 9px;
background: var(--con-no);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 17px;
text-align: center;
}
/* ------------------------------------------------------------------ 본문 */
.sbh-con-main { padding: 4px 0 24px; }
.sbh-con-head { margin: 0 0 14px; }
.sbh-con-head h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.sbh-con-h2 { margin: 22px 0 10px; font-size: 15px; font-weight: 700; }
.sbh-con-count { font-size: 14px; font-weight: 600; color: var(--con-muted); }
.sbh-con-back { display: inline-block; margin-bottom: 6px; font-size: 13px; color: var(--con-muted); text-decoration: none; }
.sbh-con-stat { margin: 0 0 14px; font-size: 13.5px; color: var(--con-muted); }
.sbh-console .sbh-muted { color: var(--con-muted); }
.sbh-console .sbh-warn { color: var(--con-no); font-weight: 600; }
.sbh-con-alert {
display: block;
margin: 0 0 16px;
padding: 13px 15px;
border-radius: 12px;
background: #FFF4E6;
border: 1px solid #F0D6A8;
color: #7A4B00;
font-size: 14px;
text-decoration: none;
}
/* 목록 — 폰에서는 카드, 데스크탑에서도 같은 카드를 쓴다.
표를 좁은 화면에서 카드로 "변신"시키는 것보다 처음부터 카드인 편이 예측 가능하다. */
.sbh-con-list { display: flex; flex-direction: column; gap: 8px; }
.sbh-con-item {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 12px;
text-decoration: none;
color: inherit;
}
.sbh-con-item-main { flex: 1; min-width: 0; }
.sbh-con-date { font-size: 12px; font-weight: 700; color: var(--con-gold); }
.sbh-con-title { font-size: 15px; font-weight: 700; word-break: keep-all; }
.sbh-con-sub { margin-top: 2px; font-size: 12.5px; color: var(--con-muted); word-break: keep-all; }
.sbh-con-chev { font-size: 20px; color: #C7CCD6; }
.sbh-con-item-acts { display: flex; gap: 6px; flex: none; }
.sbh-con-pill {
display: inline-block;
margin-left: 6px;
padding: 2px 7px;
border-radius: 999px;
background: #EEF0F4;
color: var(--con-muted);
font-size: 11px;
font-weight: 700;
vertical-align: middle;
}
.sbh-con-pill.approved { background: #E7F5EF; color: var(--con-ok); }
.sbh-con-pill.pending { background: #FFF1DC; color: var(--con-warn); }
.sbh-con-pill.declined { background: #FBECEB; color: var(--con-no); }
/* ------------------------------------------------------------------ 버튼 */
.sbh-con-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
font-size: 13.5px;
font-weight: 700;
font-family: inherit;
color: var(--con-ink);
background: #F1F3F7;
border: 1px solid var(--con-line);
border-radius: 10px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.sbh-con-btn.ok { background: var(--con-ok); border-color: var(--con-ok); color: #fff; }
.sbh-con-btn.no { background: #fff; border-color: #E7C3C1; color: var(--con-no); }
.sbh-con-btn.wide { width: 100%; min-height: 46px; font-size: 15px; }
.sbh-con-btn:disabled { opacity: .5; }
.sbh-con-fab-wrap { margin: 0; }
.sbh-con-fab {
position: fixed;
right: 16px;
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
z-index: 890;
display: flex;
align-items: center;
justify-content: center;
width: 54px; height: 54px;
border-radius: 50%;
background: var(--con-gold);
color: #fff;
font-size: 26px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
/* ------------------------------------------------------------------- 폼 */
.sbh-con-form { display: flex; flex-direction: column; gap: 12px; }
.sbh-con-form label {
display: block;
font-size: 12.5px;
font-weight: 700;
color: var(--con-muted);
}
.sbh-console input[type="text"],
.sbh-console input[type="email"],
.sbh-console input[type="tel"],
.sbh-console input[type="number"],
.sbh-console input[type="search"],
.sbh-console input[type="time"],
.sbh-console input[type="url"],
.sbh-console input[type="date"],
.sbh-console input[type="datetime-local"],
.sbh-console textarea,
.sbh-console select {
display: block;
width: 100%;
margin-top: 5px;
padding: 11px 12px;
/* 16px 미만이면 iOS 사파리가 입력할 때 화면을 확대해 버린다 */
font-size: 16px;
font-family: inherit;
color: var(--con-ink);
background: #fff;
border: 1px solid var(--con-line);
border-radius: 10px;
-webkit-appearance: none;
appearance: none;
}
.sbh-console select {
background-image: linear-gradient(45deg, transparent 50%, var(--con-muted) 50%),
linear-gradient(135deg, var(--con-muted) 50%, transparent 50%);
background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 34px;
}
.sbh-con-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sbh-con-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sbh-con-filters { display: flex; gap: 8px; }
/* flex 안에서는 min-width 를 풀어 주지 않으면 input 이 줄어들지 않는다 */
.sbh-con-filters input[type="search"] { flex: 1 1 auto; min-width: 0; margin-top: 0; }
/* 화살표 자리(오른쪽 34px)까지 감안한 폭이라야 "상태 전체"가 잘리지 않는다 */
.sbh-con-filters select { width: auto; min-width: 0; flex: 0 0 130px; margin-top: 0; font-size: 15px; }
.sbh-con-picker { margin-top: 8px; }
.sbh-con-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sbh-con-row select { flex: 1 1 160px; min-width: 0; }
.sbh-con-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--con-muted); }
.sbh-con-check input { width: 18px; height: 18px; margin: 0; }
.sbh-con-box {
margin-top: 22px;
padding: 14px;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 12px;
}
.sbh-con-box .sbh-con-h2 { margin-top: 0; }
.sbh-con-mini { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.sbh-con-mini li { padding: 6px 0; border-bottom: 1px solid #F0F1F5; }
.sbh-con-mini li:last-child { border-bottom: 0; }
/* ========================================================== 조편성 드래그 */
.sbh-dnd { margin-top: 4px; padding-bottom: 64px; }
.sbh-dnd-pool,
.sbh-dnd-group {
margin-bottom: 10px;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 12px;
overflow: hidden;
}
.sbh-dnd-pool { background: #FAFBFD; }
.sbh-dnd-head {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
background: #F6F7FA;
border-bottom: 1px solid var(--con-line);
}
.sbh-dnd-name { font-size: 13.5px; font-weight: 800; }
.sbh-dnd-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--con-muted); }
/* 위 input[type="..."] 규칙보다 선택자가 약하면 그대로 밀린다.
(.sbh-console input[type="time"] 는 요소 하나를 더 짚어서 더 세다)
그래서 여기도 input 을 함께 짚어 준다. */
.sbh-console .sbh-dnd-head input.sbh-dnd-gname,
.sbh-console .sbh-dnd-head input.sbh-dnd-gtee {
display: block;
width: auto;
margin: 0;
padding: 8px 10px;
/* 조 이름/티타임은 화면 폭이 좁아 16px 를 다 쓸 수 없다.
대신 확대를 막으려고 폰트만 줄이지 않고 아래에서 폭도 함께 잡는다. */
font-size: 15px;
border-radius: 8px;
}
.sbh-console .sbh-dnd-head input.sbh-dnd-gname {
flex: 1 1 auto;
min-width: 0;
font-weight: 700;
}
/* min-width 를 풀지 않으면 input 의 기본 최소 폭(20글자)이 그대로 살아나
티타임 칸이 머리글 전체를 밀어내 버린다. */
.sbh-console .sbh-dnd-head input.sbh-dnd-gtee {
flex: 0 0 118px;
width: 118px;
min-width: 0;
/* "09:30 AM" 이 시계 아이콘에 잘리지 않을 만큼만 줄인다 */
font-size: 14px;
padding: 8px 6px 8px 8px;
}
/* 빈 조도 손가락으로 떨어뜨릴 수 있을 만큼은 높아야 한다 */
.sbh-dnd-slots {
display: flex;
flex-wrap: wrap;
gap: 7px;
min-height: 62px;
padding: 10px 12px;
}
.sbh-dnd-slots.is-over { background: #EEF6FF; box-shadow: inset 0 0 0 2px #7FB2F0; }
/* 조 카드 안은 두 칸짜리 격자다 (v5.79.1).
*
* 줄바꿈(flex-wrap)으로 두었더니 이름표 폭이 제각각이라 한 줄에 셋이 들어가는 카드와
* 둘만 들어가는 카드가 섞였다. 붙는 뱃지 수가 사람마다 달라서(핸디 · 평균 · 겹침 · 투어)
* 폭을 맞출 길이 없었다.
*
* 격자로 두면 언제나 두 칸이고, 두 칸의 폭이 같으므로 이름표 폭도 저절로 같아진다.
* 네 명이면 반드시 두 줄이다. 미배정 칸은 그대로 줄바꿈으로 둔다 — 거기는 스무 명이
* 들어올 수 있어 두 칸으로 자르면 화면이 한없이 길어진다. */
.sbh-dnd-group > .sbh-dnd-slots {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
}
/* 칸을 꽉 채우고, 안의 것들은 왼쪽에 모은다.
가운데로 모아 봤더니 이름 길이가 저마다 달라 이름의 시작 자리가 캡슐마다
들쭉날쭉했다. 왼쪽에 맞추면 이름 첫 글자가 세로로 줄을 서서 훑어 읽기 쉽다 —
남는 자리는 뱃지 뒤에 생기고, 그쪽은 눈이 따라가지 않는 자리다. */
.sbh-dnd-group > .sbh-dnd-slots > .sbh-chip-m {
width: 100%;
min-width: 0;
justify-content: flex-start;
}
.sbh-chip-m {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 12px;
background: #fff;
border: 1px solid #D9DDE6;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: grab;
user-select: none;
-webkit-user-select: none;
/* 칩을 끌 때 브라우저가 화면을 스크롤해 버리지 않게 */
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.sbh-chip-m:focus-visible { outline: 2px solid var(--con-gold); outline-offset: 2px; }
/* 이름은 절대 두 줄로 감기지 않는다 (v6.17).
*
* 카드 폭은 자바스크립트가 재서 정하지만(fitCards), 재는 시점과 실제가 어긋날 수 있다 —
* 뱃지가 늦게 붙거나 글꼴이 늦게 뜨는 경우다. 그때 이름이 「그레 / 이스」로 감기면
* 조편성 화면에서 가장 먼저 읽어야 할 것이 가장 읽기 어려워진다.
*
* 감기지 않게 못 박아 두면, 폭이 모자랄 때 이름 대신 뱃지 쪽이 줄어든다.
* 뱃지는 곁들이는 값이고 이름은 그 캡슐이 존재하는 까닭이다 — 줄어들 쪽은 뱃지다. */
.sbh-chip-name { white-space: nowrap; }
.sbh-chip-m > span:not(.sbh-chip-name) { flex: 0 1 auto; min-width: 0; }
/* 투어를 색으로 (v5.79) — LPGA 분홍 · PGA 파랑.
*
* 바탕을 옅게만 물들인다. 진하게 칠하면 글자가 안 읽히고, 조편성 화면에서 정작 중요한
* 어느 카드에 있느냐보다 색이 먼저 보인다.
*
* 색 하나에만 기대지 않는다 — 왼쪽에 굵은 띠를 함께 둔다. 색을 가려 보기 어려운 분도
* 띠가 있고 없고, 이름표 옆의 PGA/LPGA 글자로 읽을 수 있다. */
.sbh-chip-m.is-lpga { background: #FFF1F6; border-color: #F4C2D4; box-shadow: inset 3px 0 0 #E0568A; }
.sbh-chip-m.is-pga { background: #F0F6FF; border-color: #BFD4F0; box-shadow: inset 3px 0 0 #2F6FD0; }
/* PGA·LPGA 글자는 띄우지 않는다 (v5.79.2).
*
* v5.79 에서는 색과 함께 글자도 적었다 — 색만으로 뜻을 나르지 않으려던 것이다.
* 그런데 캡슐마다 뱃지가 이미 서넛(핸디·평균·겹침)이라 글자가 하나 더 붙으니
* 정작 읽어야 할 이름이 뒤로 밀렸다. 색으로 충분하다는 판단으로 뺀다.
*
* 글자는 지웠지만 읽어 주는 이름표에는 남아 있다 — 캡슐의 aria-label 이
* 「유상마님 · LPGA — 끌어서…」로 되어 있어 화면 낭독기는 그대로 말해 준다.
* 다만 눈으로는 색이 유일한 단서가 된다. */
.sbh-chip-h { font-size: 11px; font-weight: 700; color: var(--con-muted); }
/* 「이 조 안에서 가장 많이 만난 분과 몇 번 쳤나」 (v5.16.1).
빨강은 「잘못됐다」로 읽힌다 — 겹치는 것은 잘못이 아니라 참고 사항이라 주황으로
낮춘다. 무슨 숫자인지는 마우스를 올리면 말로 나온다. */
.sbh-chip-met {
font-size: 11px;
font-weight: 700;
color: #B26B00;
cursor: help;
}
.sbh-chip-m.is-picked { border-color: var(--con-gold); box-shadow: 0 0 0 2px rgba(163, 136, 86, .25); }
.sbh-chip-m.is-ghost { opacity: .35; }
/* 손가락을 따라다니는 복제본 */
.sbh-chip-drag {
position: fixed;
z-index: 1000;
margin: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(1.06);
box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
border-color: var(--con-gold);
}
.sbh-dnd-bar {
position: fixed;
left: 0; right: 0;
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
z-index: 880;
display: flex;
gap: 8px;
padding: 9px 12px;
background: rgba(255, 255, 255, .97);
border-top: 1px solid var(--con-line);
}
.sbh-dnd-bar .sbh-con-btn { flex: 1; }
/* ===================================================== 데스크탑 확장 */
@media (min-width: 782px) {
/* 메뉴를 위로 올린다 (v5.7).
예전에는 왼쪽에 176px 짜리 기둥이 서 있었다. 그 기둥 때문에 본문이 오른쪽으로
밀려 페이지 제목과 어긋나 보였고, 회원 표(칸이 열여섯이다)는 남은 폭에 눌려
한 사람이 세 줄로 접혔다. 메뉴를 가로줄로 올리면 그 폭이 통째로 표에 돌아온다. */
.sbh-con-shell {
display: block;
padding-bottom: 0;
}
.sbh-con-nav {
/* 화면을 내려도 따라온다 (v5.18).
*
* v5.7 에서는 붙이지 않았다 — 테마에도 위에 붙는 머리줄이 있어 둘이 겹치면
* 눌러야 할 칸이 가려졌기 때문이다. 그래서 이번에는 겹치지 않을 자리를
* JS 가 재서 알려 준다(--con-top). 테마 머리줄이 줄었다 늘었다 해도 그 아래에
* 정확히 선다.
*
* 붙이는 이유: 라운드 하나를 열면 화면이 길다(참가자·조편성·확인 현황·복제).
* 아래까지 내려간 뒤 다른 화면으로 가려면 맨 위까지 되올라가야 했다. */
position: sticky;
top: var(--con-top, 0px);
z-index: 40;
background: var(--con-bg);
display: flex;
flex-wrap: wrap;
justify-content: center; /* 큰 칸 넷은 언제나 가운데 (v5.9) */
gap: 2px;
margin: 0;
padding: 8px 0 6px;
backdrop-filter: none;
border-top: 0;
border-bottom: 0;
}
.sbh-con-tab {
flex: 0 0 auto;
flex-direction: row;
justify-content: flex-start;
gap: 8px;
min-height: 36px;
padding: 0 12px;
margin-bottom: 0;
border-radius: 8px;
font-size: 13.5px;
white-space: nowrap;
}
.sbh-con-tab.is-active { background: #EFEAE0; }
.sbh-con-tab.is-more { display: flex; }
.sbh-con-morebtn { display: none; }
.sbh-con-badge {
position: static;
margin: 0 0 0 auto;
}
.sbh-con-fab { position: static; width: auto; height: auto; padding: 12px 18px; border-radius: 10px; font-size: 15px; box-shadow: none; }
.sbh-con-fab-wrap { margin-top: 14px; }
.sbh-con-grid3 { grid-template-columns: repeat(3, 160px); }
.sbh-con-form { max-width: 520px; }
.sbh-con-actions { flex-direction: row; }
.sbh-con-btn.wide { width: auto; min-width: 160px; }
/* 조편성은 넓은 화면에서 조를 나란히 놓아야 옮기기 쉽다.
*
* 격자(grid)로 두었더니 화면 폭만큼 칸을 미리 만들어 놓고 앞쪽부터 채웠다.
* 조가 둘이면 왼쪽에 둘이 붙고 오른쪽이 통째로 비어, 화면이 한쪽으로 쏠려 보였다.
*
* 줄(flex)로 바꾸고 가운데로 모은다 (v5.16.1). 조가 늘면 가운데를 지키며 양옆으로
* 벌어지고, 한 줄에 다 못 들어가면 다음 줄로 접히면서 그 줄도 가운데에 선다. */
/* 자바스크립트가 한 줄에 몇 장이 들어갈지 재서 max-width 를 걸어 준다 (v5.79).
그런데 폭만 줄이면 덩어리가 왼쪽에 붙는다 — 블록은 남는 자리를 오른쪽에 두기
때문이다. 양옆 여백을 auto 로 두어 그 덩어리째 가운데에 세운다 (v5.82.1). */
.sbh-dnd-groups {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 10px;
margin-left: auto;
margin-right: auto;
}
/* 조 하나의 폭 — 네 명이 두 줄로 들어가는 크기다.
*
* 262px 로 못 박아 두었더니 (v5.16.1) 이름 길이가 제각각이라 어떤 카드는 두 줄,
* 어떤 카드는 네 줄이 되었다 (v5.79). 이제 자바스크립트가 가장 긴 이름표 둘이
* 한 줄에 들어갈 폭을 재서 --dnd-card-w 로 넘겨 준다. 재기 전이나 스크립트가 안 뜰
* 때를 위해 262px 를 기본값으로 둔다 — 예전 모습 그대로다. */
.sbh-dnd-groups > .sbh-dnd-group {
flex: 0 0 var(--dnd-card-w, 262px);
max-width: 100%;
margin-bottom: 0;
}
.sbh-dnd { padding-bottom: 0; }
.sbh-dnd-bar {
position: sticky;
bottom: 0;
border-radius: 0 0 12px 12px;
}
}
/* ============================================================== 수금 */
.sbh-collect { margin-top: 4px; padding-bottom: 76px; }
.sbh-col-fee { margin-bottom: 10px; }
.sbh-console .sbh-col-fee input.sbh-col-feeamt { max-width: 180px; }
/* 눈에 띄어야 하는 안내다 — 이 한 줄을 못 보면 멤버십 표시가 통째로 빠진다 */
.sbh-col-notice {
margin: 0 0 10px;
padding: 10px 12px;
font-size: 14.5px;
font-weight: 800;
color: #7A4B00;
background: #FFF6E0;
border: 1px solid #F0D79B;
border-left: 4px solid #E8A200;
border-radius: 10px;
line-height: 1.45;
}
.sbh-col-row {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
grid-template-areas: "no name mem" "btns btns btns" "amt amt amt";
align-items: center;
gap: 6px 8px;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 12px;
}
.sbh-col-no { grid-area: no; font-size: 12px; color: var(--con-muted); }
.sbh-col-name { grid-area: name; font-size: 15px; font-weight: 800; }
.sbh-col-mem { grid-area: mem; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sbh-console .sbh-col-mem input.sbh-col-memchk {
width: 26px; height: 26px; margin: 0; flex: none;
accent-color: var(--con-ok);
}
.sbh-col-memlab { font-size: 12.5px; font-weight: 700; color: var(--con-muted); }
.sbh-col-mem input:checked ~ .sbh-col-memlab { color: var(--con-ok); }
.sbh-col-btns { grid-area: btns; display: flex; gap: 6px; }
.sbh-col-btn {
flex: 1;
padding: 9px 0;
font-size: 14px;
font-weight: 700;
font-family: inherit;
color: var(--con-muted);
background: #F6F7FA;
border: 1px solid var(--con-line);
border-radius: 9px;
cursor: pointer;
}
.sbh-col-btn.on { color: #fff; background: var(--con-ok); border-color: var(--con-ok); }
.sbh-console .sbh-col-row input.sbh-col-amt { grid-area: amt; margin-top: 2px; }
.sbh-col-bar {
position: fixed;
left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 8px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.96);
border-top: 1px solid var(--con-line);
z-index: 30;
}
.sbh-col-prog { flex: 1; font-size: 13px; font-weight: 700; color: var(--con-muted); }
@media (min-width: 782px) {
.sbh-col-row {
grid-template-columns: 28px minmax(0, 1fr) auto auto 150px;
grid-template-areas: "no name mem btns amt";
}
.sbh-console .sbh-col-row input.sbh-col-amt { margin-top: 0; }
.sbh-col-bar { position: static; padding: 12px 0 0; background: none; }
.sbh-collect { padding-bottom: 0; }
}
/* 비공개 라운드 표시 */
.sbh-con-lock { font-size: 13px; }
.sbh-con-btn.on { background: #2B3242; border-color: #2B3242; color: #fff; }
/* input 에 display:block 을 준 규칙이 [hidden] 을 이겨 버린다 (선택자가 더 세다).
숨기라고 했으면 숨어야 한다. */
.sbh-console [hidden] { display: none !important; }
/* ------------------------------------------- 대신 신청 넣기 — 회원 거르개 */
.sbh-add-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.sbh-add-filters input[type="search"] { flex: 1 1 160px; min-width: 0; margin-top: 0; }
.sbh-add-filters select { flex: 0 1 140px; min-width: 0; margin-top: 0; font-size: 15px; }
.sbh-add-count { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
/* ------------------------------------------------------- 가입 신청 처리 */
.sbh-signup-who code {
background: #F3EFE7;
padding: 1px 5px;
border-radius: 4px;
font-size: 13px;
}
.sbh-signup-warn {
background: #FFF6D8;
border-left: 3px solid var(--con-gold, #C9A227);
padding: 10px 12px;
border-radius: 4px;
font-size: 14px;
line-height: 1.55;
}
.sbh-signup-h3 { margin: 16px 0 6px; font-size: 14px; }
.sbh-signup-cands { list-style: none; margin: 0; padding: 0; }
.sbh-signup-cands li {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #E7E1D6;
}
.sbh-signup-cand { min-width: 0; }
.sbh-signup-cand span { display: block; font-size: 12px; }
/* ----------------------------------------------------------- 수금 내역 */
.sbh-led-filters { flex-wrap: wrap; align-items: flex-end; }
.sbh-led-filters label {
display: flex;
flex-direction: column;
flex: 1 1 150px;
min-width: 0;
font-size: 12px;
color: var(--con-muted);
}
.sbh-led-filters input[type="date"] { width: 100%; min-width: 0; margin-top: 2px; }
.sbh-led-filters select { flex: 1 1 140px; min-width: 0; }
.sbh-led-filters input[type="search"] { flex: 1 1 160px; min-width: 0; }
.sbh-led-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-top: 10px;
}
.sbh-led-table th,
.sbh-led-table td {
padding: 7px 6px;
border-bottom: 1px solid #E7E1D6;
text-align: left;
}
.sbh-led-table th { font-size: 12px; color: var(--con-muted); font-weight: 600; white-space: nowrap; }
.sbh-led-table th:nth-child(n+2) { text-align: right; }
.sbh-led-table td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.sbh-led-table td:first-child { word-break: break-word; }
.sbh-led-detail { margin-top: 16px; }
.sbh-led-detail summary { cursor: pointer; font-size: 14px; color: var(--con-muted); }
.sbh-led-detail td:nth-child(-n+3) { text-align: left; white-space: normal; }
.sbh-con-more { margin-top: 20px; }
/* ------------------------------------------- 현장 수금 화면 갈아 끼우기 */
.sbh-col-takeover {
display: block;
text-align: left;
line-height: 1.55;
}
.sbh-col-takeover b { display: block; margin-bottom: 4px; }
.sbh-col-takeover span { display: block; font-size: 13px; }
.sbh-col-takeover .sbh-con-btn { margin-top: 10px; }
.sbh-con-linkbtn {
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
text-decoration: underline;
cursor: pointer;
}
/* 현장 수금 화면은 콘솔 껍데기(사이드바·탭바) 없이 혼자 선다 */
.sbh-collect-page .sbh-con-head { margin-top: 0; }
.sbh-collect-page .sbh-col-bar { position: sticky; bottom: 0; }
/* =========================================================== 표 (v4.9)
데스크탑에서는 진짜 표, 폰에서는 카드. 마크업은 한 벌이고 CSS 만 다르다. */
/* 표 머리 고정 (v4.35)
200줄이 넘는 명부를 내리다 보면 "이 칸이 핸디였나 라운드였나" 를 잊는다.
머리줄이 따라오면 그 일이 없어진다.
위에 무엇이 떠 있느냐에 따라 붙을 자리가 달라진다:
--con-stick 워드프레스 관리자 막대 (32px, 데스크탑에서만 고정)
--con-stick2 회원 합치기 막대 (골랐을 때만 나타난다 — JS 가 높이를 알려 준다) */
.sbh-console { --con-stick: 0px; }
body.admin-bar .sbh-console { --con-stick: 32px; }
@media (max-width: 782px) {
/* 좁은 화면에서는 관리자 막대가 같이 스크롤된다 — 자리를 비워 둘 이유가 없다 */
body.admin-bar .sbh-console { --con-stick: 0px; }
}
.sbh-tbl-wrap { margin: 12px 0 4px; }
/* 명부 머리(제목 + 검색칸)도 같이 따라온다 (v4.38).
붙는 순서는 위에서부터 관리자 막대 → 이 머리 → 합치기 막대 → 표 머리줄이다.
높이는 화면마다 다르므로 JS 가 재서 --con-stick1 에 넣어 준다. */
.sbh-con-stickhead {
position: sticky;
top: var(--con-stick);
z-index: 30;
margin: 0;
padding: 10px 0 8px;
background: var(--con-bg);
box-shadow: 0 1px 0 var(--con-line);
}
.sbh-tbl thead th {
position: sticky;
top: calc(var(--con-stick) + var(--con-stick1, 0px) + var(--con-stick2, 0px));
z-index: 6;
/* 밑의 줄이 비쳐 보이면 안 되므로 반드시 불투명하게 */
background: #fff;
box-shadow: 0 1px 0 var(--con-line);
}
.sbh-tbl {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.sbh-tbl th {
padding: 8px 8px;
font-size: 12px;
font-weight: 600;
color: var(--con-muted);
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--con-line);
}
.sbh-tbl td {
padding: 9px 8px;
border-bottom: 1px solid #EFEBE3;
vertical-align: top;
}
.sbh-tbl tbody tr:hover { background: #FBF9F5; }
.sbh-tbl code { font-size: 12px; word-break: break-all; }
.sbh-tbl select { margin-top: 0; font-size: 14px; }
.sbh-tbl .sbh-con-btn { padding: 5px 10px; font-size: 13px; }
.sbh-bar {
display: inline-block;
height: 8px;
min-width: 2px;
border-radius: 4px;
background: var(--con-gold, #C9A227);
vertical-align: middle;
}
/* 폰 — 각 줄이 카드가 된다. th 는 감추고 td 의 data-label 을 왼쪽에 세운다. */
@media (max-width: 767px) {
.sbh-tbl, .sbh-tbl tbody, .sbh-tbl tr, .sbh-tbl td { display: block; width: auto; }
.sbh-tbl thead { display: none; }
.sbh-tbl tr {
margin-bottom: 10px;
padding: 4px 12px 8px;
background: #fff;
border: 1px solid var(--con-line);
border-radius: 12px;
}
.sbh-tbl tbody tr:hover { background: #fff; }
.sbh-tbl td {
display: flex;
gap: 10px;
padding: 5px 0;
border-bottom: 0;
}
.sbh-tbl td::before {
content: attr(data-label);
flex: 0 0 76px;
font-size: 12px;
color: var(--con-muted);
padding-top: 1px;
}
/* 라벨이 빈 칸(버튼 자리)은 줄 전체를 쓴다 */
.sbh-tbl td[data-label=""]::before { display: none; }
.sbh-tbl td[data-label=""] { margin-top: 4px; }
}
/* ------------------------------------------------------- 라운드·설정 화면 */
.sbh-con-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbh-con-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.sbh-con-scopes { display: flex; flex-wrap: wrap; gap: 8px; }
.sbh-code code {
display: block;
padding: 10px;
background: #F3EFE7;
border-radius: 8px;
font-size: 12px;
word-break: break-all;
}
.sbh-clubs summary { cursor: pointer; font-weight: 600; }
.sbh-tpl { border-bottom: 1px solid var(--con-line); padding: 8px 0; }
.sbh-tpl summary { cursor: pointer; font-weight: 600; }
.sbh-tpl summary .sbh-muted { font-weight: 400; margin-left: 8px; font-size: 13px; }
.sbh-con-pill.admin { background: #E7F1EA; color: #1E7E40; }
@media (min-width: 768px) {
.sbh-con-grid2 { grid-template-columns: repeat(2, 240px); }
.sbh-mail-form, .sbh-con-form.sbh-wide { max-width: none; }
}
/* --------------------------------------------------------- 다듬기 (v4.9) */
/* url/date/datetime 도 다른 입력과 같은 폭이라야 한 줄이 어긋나지 않는다 */
/* 날짜·시간 입력은 브라우저가 자기 폭을 우기므로 명시적으로 눌러 준다 */
.sbh-con-form input[type="url"],
.sbh-con-form input[type="date"],
.sbh-con-form input[type="datetime-local"],
.sbh-con-form input[type="password"],
.sbh-con-form input[type="time"] { width: 100%; min-width: 0; box-sizing: border-box; }
/* 칸 밑에 붙는 한 줄 설명은 아래로 내려간다 — 옆에 붙으면 칸을 밀어 좁힌다 */
.sbh-con-form label > small { display: block; margin-top: 4px; font-weight: 400; }
/* 체크박스 줄은 옆 칸의 입력과 아래를 맞춘다 */
/* 체크박스와 짝인 숫자칸을 한 줄로 세운다 (v5.77).
*
* 예전에는 밑변에 맞추고 10px 을 띄웠다 (align-self: end + padding-bottom). 그러면
* 체크박스가 옆 입력칸의 아래쪽 모서리 근처에 앉는데, 옆 칸은 「이름표 + 입력칸」
* 두 단이라 왼쪽에는 이름표 자리만큼의 빈 공간이 생긴다. 그 빈칸 때문에 둘이 짝으로
* 읽히지 않았다 — 실제로 「전날 리마인더 사용」 스위치를 옆의 「보내는 시각」과
* 따로 있는 것으로 보고 못 찾는 일이 있었다.
*
* 이제 체크박스 칸을 옆 입력칸과 같은 높이·같은 밑변으로 세운다. 그러면 체크박스가
* 입력칸 한가운데에 서고, 둘이 한 줄로 보인다. 높이를 숫자로 적는 것이 마뜩잖지만
* (--con-input-h 로 뺐다) 입력칸 높이를 재는 다른 방법이 CSS 에는 없다. 글꼴이 바뀌어
* 어긋나더라도 예전처럼 밑변에는 맞으므로 크게 무너지지 않는다. */
:root { --con-input-h: 42px; }
.sbh-con-grid2 > .sbh-con-check {
align-self: end;
min-height: var(--con-input-h);
padding-bottom: 0;
}
@media (min-width: 768px) {
/* "+" 는 화면 폭 전체를 먹을 이유가 없다 */
.sbh-con-fab { display: inline-block; }
.sbh-con-fab-wrap { text-align: left; }
/* 이름·날짜 칸은 붙어 있어야 읽히고, 버튼 칸은 딱 필요한 만큼만 */
.sbh-tbl td:first-child, .sbh-tbl th:first-child { white-space: nowrap; }
.sbh-tbl td[data-label=""], .sbh-tbl th:empty { width: 1%; white-space: nowrap; }
}
/* ------------------------------ 현장 수금 — 직접 입력 (v4.10) */
.sbh-manual .sbh-man-list { margin-top: 10px; }
.sbh-manual .sbh-col-bar {
position: sticky;
bottom: 0;
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 12px;
padding: 10px 0;
background: var(--con-bg, #FAF8F4);
}
.sbh-manual .sbh-man-prog { font-size: 13px; color: var(--con-muted); }
.sbh-manual textarea { min-height: 84px; }
.sbh-manual-alt { margin-top: 20px; }
.sbh-manual-alt summary { cursor: pointer; font-weight: 600; }
/* ------------------------------- 표에서 바로 고치기 (v4.11) */
.sbh-tbl td.sbh-ed { cursor: text; }
.sbh-tbl td.sbh-ed:hover { background: #F6F1E6; border-radius: 6px; }
.sbh-tbl td.sbh-ed:focus-visible { outline: 2px solid var(--con-gold, #C9A227); outline-offset: -2px; }
.sbh-ed-input {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin: -4px 0;
padding: 5px 7px;
/* 16px 미만이면 iOS 사파리가 입력할 때 화면을 확대해 버린다 */
font-size: 16px;
font-family: inherit;
color: var(--con-ink);
background: #fff;
border: 1px solid var(--con-gold, #C9A227);
border-radius: 6px;
-webkit-appearance: none;
appearance: none;
}
.sbh-tbl td.is-saving { opacity: .5; }
.sbh-tbl td.is-saved { background: #E7F1EA; border-radius: 6px; }
.sbh-tbl td.is-failed { background: #FBE9E9; border-radius: 6px; }
/* 폰에서는 셀이 "라벨 : 값" 한 줄이라, 입력이 라벨 옆에 들어가야 한다 */
@media (max-width: 767px) {
.sbh-tbl td.sbh-ed { align-items: center; }
.sbh-ed-input { flex: 1 1 auto; }
}
/* --------------------------------------------- 소속 라벨(태그) (v4.12) */
.sbh-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sbh-tag {
display: inline-block;
padding: 2px 8px;
font-size: 12px;
line-height: 1.5;
white-space: nowrap;
color: #4A4335;
background: #F1EADC;
border: 1px solid #E2D8C4;
border-radius: 999px;
}
/* ------------------------------- 현장 수금 화면 — 예전 앱 모양 (v4.12) */
.sbh-collect-page {
max-width: 520px;
margin: 0 auto;
text-align: center;
}
/* 테마 배너 바로 아래에 깃발이 붙어 있어 답답했다 — 위쪽 숨통을 틔운다 */
.sbh-col-head { margin: 0 0 18px; padding-top: 20px; }
.sbh-col-flag { font-size: 40px; line-height: 1; }
.sbh-col-head h1 { margin: 8px 0 2px; font-size: 22px; }
.sbh-col-sub { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--con-muted); }
/* 수금 화면에서는 "언제·어느 라운드" 가 제목 다음으로 중요하다 */
.sbh-collect-page .sbh-con-stat {
margin: 0 0 16px;
font-size: 15px;
color: var(--con-ink);
}
.sbh-col-card {
margin: 0 0 14px;
padding: 16px;
text-align: left;
background: #fff;
border: 1px solid var(--con-line);
border-radius: 14px;
}
.sbh-col-lab {
display: block;
margin-bottom: 12px;
font-size: 13px;
font-weight: 600;
color: var(--con-ink);
}
.sbh-col-lab:last-of-type { margin-bottom: 0; }
.sbh-col-hint { margin: 8px 0 0; font-size: 12px; color: var(--con-muted); }
/* 예전 화면의 남색 START 버튼 */
.sbh-col-start {
display: block;
width: 100%;
padding: 15px;
font: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: .06em;
color: #fff;
background: #1A2E4A;
border: 0;
border-radius: 12px;
cursor: pointer;
}
.sbh-col-start:hover { background: #243D61; }
.sbh-col-start:disabled { opacity: .6; cursor: default; }
/* 찍는 줄은 왼쪽 정렬이라야 이름이 읽힌다 — 가운데 정렬은 껍데기까지만 */
.sbh-collect-page .sbh-col-list,
.sbh-collect-page .sbh-man-list,
.sbh-collect-page .sbh-col-notice,
.sbh-collect-page .sbh-col-fee { text-align: left; }
.sbh-collect-page .sbh-manual-alt { margin-top: 22px; text-align: left; }
.sbh-collect-page .sbh-manual-alt summary { cursor: pointer; font-weight: 600; }
/* 로그인하지 않은 사람에게 보이는 로그인 카드 (v4.23)
게이트 카드를 그대로 가져다 쓰되, 콘솔 CSS 가 입력칸을 덮어쓰지 않게 지켜 준다.
`.sbh-console input[type="email"]` 이 (0,2,1) 이라 클래스 하나로는 못 이긴다. */
.sbh-collect-page .sbh-collect-login { margin-top: 18px; text-align: left; }
.sbh-collect-page .sbh-collect-login .sbh-card { padding: 22px 18px; }
.sbh-console .sbh-collect-login input.sbh-input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-size: 16px; /* iOS 자동 확대 방지 */
height: auto;
text-align: left;
}
/* 카드 안의 버튼은 게이트 것이 맞다 — 콘솔 버튼 모양이 끼어들면 어색해진다 */
.sbh-console .sbh-collect-login .sbh-btn { font: inherit; }
/* ==================================================== 글꼴 (v4.14)
회원 화면과 같은 세 벌을 같은 규칙으로 쓴다 — 두 화면이 다른 얼굴이면 한 시스템으로 안 읽힌다. */
.sbh-console h1,
.sbh-con-head h1 {
font-family: var(--con-disp);
font-weight: 400;
letter-spacing: -.01em;
}
/* 표 머리·작은 라벨·숫자 뱃지.
한글 문장이 들어가는 자리(메뉴 이름, 상태 알약, 소속 태그)는 뺐다 — 모노는 라틴만 받고
한글은 딴 글꼴로 흘러가서 한 줄에 두 얼굴이 섞인다. */
.sbh-tbl th,
.sbh-tbl td::before,
.sbh-con-date,
.sbh-con-badge,
.sbh-col-sub,
.sbh-col-start {
font-family: var(--con-mono);
letter-spacing: .04em;
}
/* 숫자가 줄줄이 서는 칸은 폭이 고정이라야 눈이 편하다 */
.sbh-led-table td:nth-child(n+2),
.sbh-tbl td[data-label="핸디"],
.sbh-tbl td[data-label="라운드"],
.sbh-tbl td[data-label="정원"],
.sbh-tbl td[data-label="티타임"],
.sbh-tbl td[data-label="날짜"],
.sbh-col-no,
.sbh-chip-h { font-family: var(--con-mono); }
/* 입력·본문은 본문 글꼴 그대로 */
.sbh-console input,
.sbh-console select,
.sbh-console textarea,
.sbh-con-btn { font-family: var(--con-body); }
/* 제목 안의 강조는 본문 굵기 그대로 — 제목이 이미 굵어서 더 굵히면 뭉친다 */
.sbh-con-head h1 b,
.sbh-con-head h1 strong { font-weight: 800; }
/* ------------------------------- 소속 태그 편집기 (v4.15) */
.sbh-tagedit {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: -4px 0;
padding: 4px 5px;
background: #fff;
border: 1px solid var(--con-gold, #C9A227);
border-radius: 8px;
}
.sbh-tagedit-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding-right: 3px;
}
.sbh-tagedit-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
font: inherit;
font-size: 14px;
line-height: 1;
color: #8A7F6A;
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.sbh-tagedit-x:hover { color: #B0342E; background: rgba(176, 52, 46, .10); }
/* `.sbh-console input[type="text"]` 가 (0,2,1) 이라 클래스 하나로는 못 이긴다.
요소를 하나 더 짚어 같은 무게로 맞추고, 뒤에 오므로 이긴다. */
.sbh-console input.sbh-tagedit-in {
display: inline-block;
flex: 1 1 80px;
width: auto;
min-width: 60px;
margin: 0;
padding: 3px 4px;
/* 16px 미만이면 iOS 사파리가 입력할 때 화면을 확대해 버린다 */
font-size: 16px;
font-family: inherit;
color: var(--con-ink);
background: none;
background-image: none;
border: 0;
border-radius: 0;
outline: none;
}
/* ------------------------------- 라운드 거르개 · 정렬 (v4.18) */
.sbh-rnd-filters {
margin: 0 0 14px;
padding: 12px 14px;
background: #FBF9F5;
border: 1px solid var(--con-line);
border-radius: 12px;
}
.sbh-rnd-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 10px;
}
.sbh-rnd-row:last-child { margin-bottom: 0; }
.sbh-rnd-filters input[type="search"] { flex: 1 1 240px; min-width: 0; margin-top: 0; }
.sbh-rnd-filters select { width: auto; min-width: 0; margin-top: 0; font-size: 15px; }
.sbh-rnd-filters input[type="date"] { width: auto; min-width: 0; margin-top: 0; }
.sbh-rnd-lab {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--con-muted);
}
.sbh-rnd-range { display: flex; align-items: center; gap: 6px; }
.sbh-rnd-chk {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 14px;
background: #fff;
border: 1px solid var(--con-line);
border-radius: 999px;
cursor: pointer;
}
.sbh-rnd-chk:has(input:checked) {
color: #1E7E40;
background: #E7F1EA;
border-color: #9FC9AF;
}
.sbh-rnd-chk input { margin: 0; }
/* 표 머리의 정렬 링크 */
.sbh-tbl th a.sbh-sort {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.sbh-tbl th a.sbh-sort:hover { color: var(--con-ink); text-decoration: underline; }
.sbh-tbl th a.sbh-sort.is-on { color: var(--con-gold, #C9A227); }
.sbh-sort-mark { font-size: 11px; }
@media (max-width: 767px) {
/* 폰에서는 표가 카드로 접히므로 정렬 링크가 갈 곳이 없다 — 거르개만 남긴다 */
.sbh-rnd-filters input[type="search"] { flex: 1 1 100%; }
.sbh-rnd-range input[type="date"] { flex: 1 1 0; }
}
/* 통합/분리는 한 줄에 나란히 — 세로로 쌓이면 표가 들쭉날쭉해진다 */
@media (min-width: 768px) {
.sbh-tbl td[data-label="판단"] { white-space: nowrap; width: 1%; }
.sbh-tbl td[data-label="판단"] .sbh-con-btn { display: inline-block; }
}
.sbh-apart summary { cursor: pointer; font-weight: 600; }
/* 임시 개방 중에는 로그인 안내가 명단 입력칸 위에 온다 (v4.26) */
.sbh-collect-page .sbh-col-loginfirst { margin: 0 0 16px; }
/* ------------------------------------------ 라운드 달력 보기 (v4.26) */
.sbh-rnd-modes { display: flex; gap: 6px; margin-top: 8px; }
.sbh-cal-bar {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 10px;
flex-wrap: wrap;
}
.sbh-cal-month { font-size: 17px; font-weight: 800; text-align: center; }
/* 년/월이 한가운데 오도록, 좌우 버튼 묶음이 같은 너비를 가져간다 */
.sbh-cal-nav { display: flex; gap: 6px; flex: 1 1 0; }
.sbh-cal-nav.end { justify-content: flex-end; }
/* 폰에서는 7칸이 너무 좁다 — 가로로 밀어 보게 두고, 칸의 최소 너비를 지킨다 */
.sbh-cal {
display: grid;
grid-template-columns: repeat(7, minmax(116px, 1fr));
gap: 1px;
background: var(--con-line);
border: 1px solid var(--con-line);
border-radius: 12px;
overflow-x: auto;
}
.sbh-cal-dow {
background: #FAFBFC;
padding: 7px 8px;
font-size: 12px;
font-weight: 700;
color: var(--con-muted);
text-align: center;
}
.sbh-cal-dow.sun { color: #C4453F; }
.sbh-cal-dow.sat { color: #2F6BB5; }
.sbh-cal-cell {
min-height: 104px;
padding: 6px;
background: var(--con-card);
}
/* 이 달 바깥 칸 (v6.18).
전에는 빈칸이었으나 이제 지난달 말·다음 달 초의 일정이 들어온다. 바탕을 한 단계
어둡게 두고 안의 것을 살짝 흐리게 해서, 「있긴 있는데 이 달 것은 아니다」가 한눈에
보이게 한다. 흐리기는 0.62 까지만 — 더 흐리면 읽으라고 넣어 놓고 못 읽게 된다. */
.sbh-cal-cell.is-out { background: #F7F8FA; }
.sbh-cal-cell.is-out > * { opacity: .62; }
.sbh-cal-cell.is-out:hover > * { opacity: 1; }
.sbh-cal-cell.is-today { background: #FFFBF2; box-shadow: inset 0 0 0 2px var(--con-gold); }
.sbh-cal-head { display: flex; align-items: center; justify-content: space-between; }
.sbh-cal-day { font-size: 12.5px; font-weight: 700; color: var(--con-ink); }
.sbh-cal-day.sun { color: #C4453F; }
.sbh-cal-day.sat { color: #2F6BB5; }
/* 앞뒤 달 날짜는 「8/30」이라 한 글자 더 길다 — 숫자를 조금 줄여 ＋ 와 부딪히지 않게 */
.sbh-cal-cell.is-out .sbh-cal-day { font-size: 11.5px; font-weight: 600; }
/* ＋ 는 평소에 숨어 있다가 칸에 손을 올리면 나온다 — 달력이 기호로 시끄러워지지 않게 */
.sbh-cal-add {
opacity: 0;
font-size: 15px;
line-height: 1;
color: var(--con-gold);
text-decoration: none;
padding: 2px 4px;
}
.sbh-cal-cell:hover .sbh-cal-add,
.sbh-cal-add:focus { opacity: 1; }
.sbh-cal-ev {
display: block;
margin-top: 5px;
padding: 6px 7px;
border-radius: 8px;
background: #F1F3F7;
border-left: 3px solid #B9C0CC;
color: inherit;
text-decoration: none;
}
.sbh-cal-ev.is-open { background: #E7F5EF; border-left-color: var(--con-ok); }
.sbh-cal-ev.is-closed { background: #EEF0F4; border-left-color: #79808F; }
.sbh-cal-ev.is-cancelled { background: #FBECEB; border-left-color: var(--con-no); }
.sbh-cal-ev.is-draft { background: #FFF7E8; border-left-color: var(--con-warn); }
.sbh-cal-ev-top { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sbh-cal-ev-title { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; word-break: keep-all; }
.sbh-cal-ev-sub { display: block; font-size: 11.5px; color: var(--con-muted); }
.sbh-cal-ev-state { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--con-muted); }
/* 날씨 한 줄 (v5.51) — 라운드 정보보다 한 단 낮게.
말줄임으로 자르지 않는다: 잘리는 것이 하필 「비 0.42″」의 숫자 쪽이라, 한 줄을 지키려다
정작 읽으려던 값을 가렸다. 두 줄이 되더라도 숫자는 끝까지 보이는 편이 낫다. */
.sbh-cal-ev-wx {
display: block; margin-top: 2px; font-size: 11px; line-height: 1.5;
color: var(--con-muted);
}
/* 신청 시각·거절 사유 밑줄 (v5.51) */
.sbh-rsvp-why { display: inline-block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; }
/* 대기자 명단 (v5.51) — 마감 뒤에 「참석 가능」을 누르신 분들 */
.sbh-int-late {
margin: 10px 0 0; padding: 10px 12px; line-height: 1.7;
background: #FFF8E8; border: 1px solid #F0E0BC; border-radius: 10px;
}
.sbh-cal-lock { font-size: 10px; font-weight: 700; color: var(--con-no); }
/* ------------------------------------------ 게스트 신청 (v4.26) */
.sbh-guest-page { max-width: 520px; margin: 0 auto; text-align: center; }
.sbh-guest-page .sbh-col-card,
.sbh-guest-page .sbh-con-list,
.sbh-guest-page .sbh-con-h2 { text-align: left; }
.sbh-guest-form { margin-top: 4px; }
.sbh-guest-row .sbh-con-item-acts { flex-direction: column; gap: 6px; }
/* ------------------------------- 명부에서 골라서 합치기 (v4.27) */
.sbh-mrg-bar {
position: sticky;
top: calc(var(--con-stick) + var(--con-stick1, 0px));
z-index: 40;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 10px;
padding: 10px 12px;
background: #FFF7E8;
border: 1px solid #F0D6A8;
border-radius: 12px;
}
.sbh-mrg-count { font-weight: 800; color: #7A4B00; }
.sbh-mrg-bar label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--con-muted); }
.sbh-console .sbh-mrg-bar select { width: auto; min-width: 190px; margin-top: 0; }
.sbh-tbl .sbh-mrg-chk,
.sbh-tbl .sbh-mrg-all { width: 17px; height: 17px; cursor: pointer; }
/* 일괄 처리 (v5.73) — 「한 번에 …」 칸과, 되돌릴 수 있는 것/없는 것을 가르는 줄 */
.sbh-console .sbh-mrg-bar .sbh-blk-val {
width: auto; min-width: 170px; margin-top: 0;
}
.sbh-blk-sep {
width: 1px; align-self: stretch; min-height: 22px;
background: #E4C99B; margin: 0 2px;
}
.sbh-console .sbh-mrg-bar .sbh-con-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 좁은 화면에서는 가르는 줄이 가로로 누워 오히려 붙여 놓은 것처럼 보인다 — 감춘다 */
@media (max-width: 640px) {
.sbh-blk-sep { display: none; }
.sbh-console .sbh-mrg-bar .sbh-blk-val { min-width: 0; flex: 1 1 140px; }
}
/* 되돌릴 수 없는 자리 (v5.73) — 회원 상세 맨 아래.
빨간 테두리로 가둬 두어야 「저장」 옆의 또 하나의 단추로 읽히지 않는다. */
.sbh-con-danger {
margin: 22px auto 0;
max-width: 560px;
padding: 14px 16px;
border: 1px solid #E8BDBD;
border-radius: 12px;
background: #FFF6F6;
}
.sbh-con-danger .sbh-con-h2 { margin: 0 0 6px; color: #A32020; }
.sbh-con-danger p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; word-break: keep-all; }
/* =============================== 마이페이지 (v4.30) */
.sbh-my-page { max-width: 760px; margin: 0 auto; }
.sbh-my-head { padding-top: 0; margin-bottom: 16px; }
.sbh-my-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sbh-my-head p { margin: 0; font-size: 13px; }
/* 다음 라운드 — 이 화면에서 가장 먼저 눈에 들어와야 하는 하나 */
.sbh-my-next {
display: block;
margin: 0 0 14px;
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(135deg, #1A2E4A, #2C4A78);
color: #fff;
text-decoration: none;
}
.sbh-my-next-lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #FFD966; }
.sbh-my-next-title { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; word-break: keep-all; }
.sbh-my-next-sub { display: block; margin-top: 4px; font-size: 13px; color: #C8D4E6; }
/* 날씨 (v5.52) — 라운드 이름 옆에. 줄을 따로 내면 카드가 한 단 길어지는데,
날씨는 그만한 자리를 받을 것이 아니다. 남색 바탕이라 밝은 글씨여야 한다. */
.sbh-my-next-wx {
display: inline-block; margin-left: 8px;
font-size: 13.5px; font-weight: 600; white-space: nowrap;
color: #E6EDF7; vertical-align: baseline;
}
.sbh-my-none { margin: 0 0 14px; }
.sbh-my-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sbh-my-stat {
padding: 14px 10px;
text-align: center;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 12px;
}
.sbh-my-stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
.sbh-my-stat span { display: block; margin-top: 3px; font-size: 12px; color: var(--con-muted); }
.sbh-my-stat.is-bad b { color: var(--con-no); }
.sbh-my-partners { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.sbh-my-partners .sbh-tag b { margin-left: 3px; color: var(--con-gold); }
.sbh-tag-soft { opacity: .75; }
.sbh-my-more { margin: 8px 0 0; }
.sbh-my-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--con-muted); }
.sbh-my-form { margin-top: 4px; }
.sbh-my-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; font-size: 13.5px; }
.sbh-my-links a { color: var(--con-gold); text-decoration: none; font-weight: 600; }
/* 모임 이름 관리 (v4.31) */
.sbh-club-add { margin: 10px 0 12px; gap: 8px; }
.sbh-console .sbh-club-add input { margin-top: 0; max-width: 260px; }
/* 되돌릴 수 없는 자리는 눈에 띄게 (v4.32) */
.sbh-con-box.sbh-danger { border-color: #E7C3C1; background: #FFFAFA; }
/* 마이페이지 로그아웃 — 이름 옆, 화면 맨 위 (v4.57) */
.sbh-my-mail { margin: 0 0 2px; font-size: 12.5px; }
.sbh-my-logout.is-callout {
color: var(--con-no);
font-weight: 800;
box-shadow: 0 0 0 3px rgba(196, 69, 63, .15);
border-radius: 8px;
}
/* ------------------------------ 구글 캘린더 겹쳐 보기 (v4.36) */
/* 우리 라운드보다 한 톤 낮게 — 섞이면 무엇이 동호회 일정인지 헷갈린다 */
.sbh-cal-g {
display: block;
margin-top: 3px;
padding-left: 2px;
font-size: 11px;
line-height: 1.35;
color: var(--con-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sbh-cal-g b { font-weight: 700; margin-right: 3px; }
.sbh-cal-g-dot {
display: inline-block;
width: 7px; height: 7px;
margin-right: 4px;
border-radius: 50%;
vertical-align: middle;
}
.sbh-cal-glegend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 0; }
/* flex 안에 들어간 span 은 블록처럼 취급된다 — 그러면 테마가 문단에 주는 아래 여백(18px)이
그대로 살아나서, 가운데 정렬이 그 여백까지 포함해 계산하느라 글자만 9px 위로 뜬다.
그래서 이 줄 안의 항목은 여백을 모두 지우고 글자 크기도 맞춘다. */
.sbh-console .sbh-cal-glegend > * {
margin: 0;
font-size: 12px;
line-height: 1.35;
}
.sbh-cal-glegend .sbh-cal-g { display: inline-block; }
.sbh-gcal-row {
display: grid;
grid-template-columns: auto 150px 110px 1fr;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.sbh-console .sbh-gcal-row input,
.sbh-console .sbh-gcal-row select { margin-top: 0; }
.sbh-gcal-row .sbh-con-check { padding: 0; }
@media (max-width: 782px) {
.sbh-gcal-row { grid-template-columns: auto 1fr; }
.sbh-gcal-row input[type="url"] { grid-column: 1 / -1; }
}
/* --------------------- 마이페이지: 캘린더 연동 · 사진 동의 (v4.40) */
.sbh-my-cal,
.sbh-my-appcard,
.sbh-my-consent {
margin: 26px 0 0;
padding: 18px 18px 14px;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 14px;
}
.sbh-my-cal .sbh-con-h2,
.sbh-my-appcard .sbh-con-h2,
.sbh-my-consent .sbh-con-h2 { margin-top: 0; }
/* 앱으로 쓰기 · 알림 (v6.60) */
.sbh-app-step { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--con-bg, #f6f4ef); font-size: 14px; }
.sbh-app-step ol { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 4px; }
.sbh-app-ok { margin: 0; font-weight: 700; color: #17402F; }
.sbh-app-push .sbh-con-actions { flex-wrap: wrap; gap: 8px; }
.sbh-my-calbtns { flex-wrap: wrap; gap: 8px; }
.sbh-my-consent-now { margin: 10px 0 12px; font-size: 14px; }
/* --------------------- 구글 캘린더 연결 확인 (v4.41) */
.sbh-gcal-check { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sbh-gcal-cline {
padding: 10px 12px;
border-radius: 10px;
font-size: 13px;
line-height: 1.55;
background: #F1F3F7;
border: 1px solid var(--con-line);
}
.sbh-gcal-cline.good { background: #E7F5EF; border-color: #BFE3D5; }
.sbh-gcal-cline.bad { background: #FBECEB; border-color: #E7C3C1; }
.sbh-gcal-cline b { display: block; margin-bottom: 2px; }
/* --------------------- 달력 년·월 드롭다운 (v4.45) */
.sbh-cal-jump { display: flex; align-items: center; gap: 6px; margin: 0; }
.sbh-console .sbh-cal-jump .sbh-cal-sel {
width: auto;
margin-top: 0;
padding: 7px 26px 7px 10px;
font-size: 15px;
font-weight: 800;
letter-spacing: -.01em;
background-color: transparent;
border-color: transparent;
}
.sbh-console .sbh-cal-jump .sbh-cal-sel:hover { border-color: var(--con-line); }
/* --------------------- 마이페이지: 내 라운드는 표 안에서 구른다 (v4.53)
4.46 에서는 위쪽 덩어리(이름·다음 라운드·통계·같은 조)를 통째로 붙였다. 표 머리는 잘
따라왔지만, 그 덩어리가 500px 을 차지하는 바람에 표 아래의 「내 정보」·「캘린더 연동」까지
내려가는 데 한참 걸렸다. 화면의 절반이 늘 머리였던 셈이다.
그래서 반대로 했다. 위쪽은 평범하게 흘려보내고, 표에만 높이를 주어 그 안에서 구르게 한다.
표 머리는 그 상자 안에 붙으므로 늘 보이고, 페이지 자체는 짧아져서 아래 내용이 바로 나온다.
라운드가 148개든 5개든 페이지 길이는 거의 같다. */
.sbh-my-page .sbh-tbl-wrap {
max-height: 62vh;
min-height: 220px;
overflow: auto;
border: 1px solid var(--con-line);
border-radius: 12px;
}
/* 상자 안에서 붙으므로 기준은 화면이 아니라 상자다 — top 은 0 이어야 한다 */
.sbh-my-page .sbh-tbl thead th {
top: 0;
z-index: 6;
box-shadow: inset 0 -1px 0 var(--con-line);
}
/* 표가 상자 안에 들어갔으니 칸 사이 여백을 조금 준다 */
.sbh-my-page .sbh-tbl th:first-child,
.sbh-my-page .sbh-tbl td:first-child { padding-left: 12px; }
.sbh-my-page .sbh-tbl th:last-child,
.sbh-my-page .sbh-tbl td:last-child { padding-right: 12px; }
/* --------------------- 회원 길잡이: 타일과 바 (v4.52) */
.sbh-nav-tiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 0 0 18px;
}
@media (min-width: 700px) {
.sbh-nav-tiles { grid-template-columns: repeat(3, 1fr); }
}
.sbh-nav-tile {
display: flex;
flex-direction: column;
gap: 3px;
padding: 13px 14px;
background: var(--con-card);
border: 1px solid var(--con-line);
border-radius: 12px;
text-decoration: none;
color: inherit;
}
.sbh-nav-tile:hover { border-color: var(--con-gold); }
.sbh-nav-tile-top { display: flex; align-items: center; gap: 6px; }
.sbh-nav-tile-label { font-size: 14.5px; font-weight: 700; }
.sbh-nav-tile-desc {
font-size: 12px;
color: var(--con-muted);
line-height: 1.45;
word-break: keep-all;
}
.sbh-nav-tile.is-warn { background: #FFF7EC; border-color: #F0D6A8; }
.sbh-nav-badge {
flex: none;
padding: 1px 7px;
border-radius: 999px;
background: #E7F5EF;
color: var(--con-ok);
font-size: 11px;
font-weight: 700;
line-height: 17px;
}
.sbh-nav-tile.is-warn .sbh-nav-badge { background: #FBEBD2; color: #8A5A00; }
.sbh-nav-badge.sm { margin-left: 4px; font-size: 10.5px; padding: 0 5px; line-height: 15px; }
/* --------------------- 마이페이지: 폰 카드에서는 조·수금을 뺀다 (v4.55)
폰에서는 한 줄이 카드가 되는데, 여섯 칸을 다 세우면 카드 하나가 화면 절반을 먹는다.
게다가 조와 수금은 대개 "—" 라서, 빈 칸 두 줄이 카드마다 붙는 꼴이다.
목록에서는 언제·무엇을·어디서·내 상태만 보이면 되고, 조와 수금은 그 라운드에
들어갔을 때 보면 된다. 데스크탑 표에서는 자리가 넉넉하니 그대로 둔다. */
@media (max-width: 767px) {
.sbh-my-page .sbh-tbl td[data-label="조"],
.sbh-my-page .sbh-tbl td[data-label="수금"] { display: none; }
}
/* ------------------------------------------- 마이페이지 「내 라운드」 (v4.59) */
.sbh-my-stat.is-soon b { color: var(--con-line); }
.sbh-my-soon {
display: block;
margin-top: 4px;
font-size: 10.5px;
font-style: normal;
font-weight: 700;
letter-spacing: .04em;
color: var(--con-muted);
text-transform: uppercase;
}
.sbh-my-rounds-h {
display: flex;
align-items: center;
gap: 8px;
}
.sbh-fold {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.sbh-fold-i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid var(--con-line);
border-radius: 6px;
font-size: 13px;
line-height: 1;
color: var(--con-muted);
}
.sbh-fold:hover .sbh-fold-i { border-color: var(--con-ink); color: var(--con-ink); }
.sbh-my-rounds:not(.is-open) .sbh-my-rounds-body { display: none; }
.sbh-my-filter {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.sbh-my-q {
flex: 1 1 auto;
min-width: 0;
max-width: 320px;
padding: 8px 12px;
border: 1px solid var(--con-line);
border-radius: 999px;
font-size: 13px;
}
.sbh-my-hits { font-size: 12px; color: var(--con-muted); }
/* 머리칸을 단추로 바꿨으므로 글자 모양을 원래 머리칸과 같게 맞춘다 */
.sbh-tbl thead .sbh-sort {
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
white-space: nowrap;
}
.sbh-tbl thead .sbh-sort.is-on { color: var(--con-ink); text-decoration: underline; }
.sbh-sort-i { font-size: 9px; }
/* 「내 정보」 제목 바로 아래 안내 — 굵은 이탤릭 (v4.59) */
.sbh-my-lede {
margin: -4px 0 14px;
padding: 10px 14px;
border-left: 3px solid var(--con-gold, #A38856);
border-radius: 0 8px 8px 0;
background: #FBF7EF;
font-style: italic;
font-weight: 700;
font-size: 13.5px;
line-height: 1.5;
color: #6A5C3E;
}
/* 사진 동의는 한 줄로 (v4.59) — 묻는 자리는 갤러리, 여기는 바꾸는 자리 */
.sbh-my-photo {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 6px;
padding: 10px 14px;
border: 1px solid var(--con-line);
border-radius: 10px;
font-size: 13px;
}
.sbh-my-photo-lab { color: var(--con-muted); }
.sbh-my-photo-now { margin-right: auto; color: var(--con-ink); }
.sbh-my-photo .sbh-con-btn { min-height: 30px; padding: 0 10px; font-size: 12px; }
.sbh-my-photo-more { font-size: 12px; color: var(--con-muted); }
/* 초대 단추 (v4.61) — 보낸 뒤에는 조용한 회색으로 남아 "이미 했다"를 말해 준다 */
.sbh-invite { white-space: nowrap; }
.sbh-invite.is-sent {
background: #fff;
border-color: var(--con-line);
color: var(--con-muted);
font-weight: 600;
}
/* 초대 현황 한 줄 (v4.61.1) */
.sbh-invite-sum {
margin: 0 0 12px;
padding: 9px 14px;
border: 1px solid var(--con-line);
border-radius: 10px;
background: #F7F8FB;
font-size: 13px;
color: var(--con-ink);
}
/* ------------------------------------------- 두 나라 말 토글 (v4.62)
참가 신청 화면에는 두 부류가 온다 — 검색으로 처음 닿은 분과 이미 우리 회원인 분.
두 벌을 다 그려 두고 화면에서 고르게 한다. 주소를 바꾸지 않으므로 캐시와 싸우지 않는다. */
.sbh-guest-page.is-ko .sbh-en,
.sbh-guest-page.is-en .sbh-ko { display: none; }
.sbh-lang {
display: inline-flex;
gap: 2px;
margin: 0 0 14px;
padding: 3px;
border: 1px solid var(--con-line);
border-radius: 999px;
background: #F4F5F8;
}
.sbh-lang-btn {
min-height: 26px;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: none;
font-family: inherit;
font-size: 12px;
font-weight: 700;
color: var(--con-muted);
cursor: pointer;
}
.sbh-guest-page.is-en .sbh-lang-btn[data-lang="en"],
.sbh-guest-page.is-ko .sbh-lang-btn[data-lang="ko"] {
background: #fff;
color: var(--con-ink);
box-shadow: 0 1px 2px rgba(20, 24, 34, .12);
}
/* 로그인 전 안내 — 로그인 카드와 사이를 띄운다 (v4.62) */
.sbh-guest-intro { margin-top: 20px; }
.sbh-guest-join { margin: 14px 0 22px; }
.sbh-guest-join .sbh-col-start { display: inline-block; width: auto; padding: 12px 26px; text-decoration: none; }
/* ------------------------------------------------- 확인 현황 토글 (v4.63) */
.sbh-con-seg { display: flex; gap: 6px; margin: 10px 0 6px; }
.sbh-con-seg .sbh-con-btn { text-decoration: none; }
.sbh-con-seg .sbh-con-btn.is-on {
background: var(--con-gold);
border-color: var(--con-gold);
color: #fff;
cursor: default;
}
.sbh-rnd-read .sbh-tbl td { vertical-align: top; }
/* ---------------------------------------- 설정의 체크박스 묶음 (v4.64) */
.sbh-con-checks {
margin: 4px 0 2px;
padding: 10px 12px;
border: 1px solid var(--con-line);
border-radius: 10px;
}
.sbh-con-checks legend {
padding: 0 6px;
font-size: 13px;
font-weight: 700;
color: var(--con-muted);
}
.sbh-con-chk {
display: flex;
align-items: baseline;
gap: 8px;
margin: 6px 0;
font-size: 14px;
}
.sbh-con-chk input { width: auto; margin: 0; flex: 0 0 auto; }
.sbh-con-chk .sbh-muted, .sbh-con-chk .sbh-warn { font-size: 12px; }
/* ------------------------------------------------ 가운데 정렬 머리 (v4.67) */
.sbh-con-head.is-center { text-align: center; }
.sbh-con-h2.is-center { text-align: center; }
/* 제목 뒤 괄호 — 제목과 같은 줄이되 제목 크기를 따라가지는 않게 */
.sbh-con-who {
display: inline-block;
font-size: 14px;
font-weight: 400;
color: var(--con-muted);
white-space: nowrap;
}
@media (max-width: 600px) {
/* 폰에서는 이름+주소가 제목을 밀어내므로 아랫줄로 내린다 — 가운데 정렬은 그대로 */
.sbh-con-who { display: block; white-space: normal; margin-top: 2px; }
}
/* ------------------------------------ 라운드 표 참가자 풍선 (v4.70)
표가 가로로 굴러가는 상자 안에 있어서, 풍선을 표 안에 두면 가장자리에서 잘린다.
그래서 body 에 붙이고 fixed 로 띄운다 — 잘릴 상자가 없다. */
.sbh-whotip {
position: fixed;
z-index: 10000;
max-width: 340px;
padding: 9px 12px;
border-radius: 10px;
background: rgba(32, 30, 26, .96);
color: #F6EFE2;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
pointer-events: none; /* 풍선이 마우스를 가로채면 줄에서 벗어난 것으로 읽힌다 */
}
.sbh-whotip-head {
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(246, 239, 226, .22);
font-size: 12px;
color: #E0B84C;
}
.sbh-whotip-names { word-break: keep-all; }
/* 마우스를 올린 줄이 어느 줄인지 보이게 */
tr.sbh-rnd-line:hover > td { background: #FBF8F2; }
/* 손가락에는 호버가 없다 — 풍선을 아예 만들지 않는다 */
@media (hover: none) {
.sbh-whotip { display: none; }
}
/* 참가자에게 변경 안내 보내기 (v4.78) */
.sbh-rnd-notify textarea { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; }
.sbh-rnd-notify .sbh-con-lab { display: block; margin: 10px 0 4px; font-weight: 600; }
.sbh-rnd-notify .sbh-con-actions { margin-top: 10px; }
/* 라운드 주소 복사 줄 (v4.79) */
.sbh-con-linkbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 6px; padding: 10px 12px;
background: #FAF7F0; border: 1px solid #E7DFCE; border-radius: 8px;
}
.sbh-con-url {
flex: 1 1 240px; min-width: 0;
font-size: 13px; color: #5A5347; word-break: break-all;
background: none; padding: 0;
}
.sbh-con-linkbar .sbh-con-btn { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }
.sbh-con-linknote { margin: 0 0 14px; }
@media (max-width: 600px) {
.sbh-con-linkbar .sbh-con-btn { flex: 1 1 auto; text-align: center; }
}
/* 알림은 화면에 떠 있는다 — 눌린 자리를 잃지 않게 (v4.80) */
.sbh-console .sbh-msg {
position: fixed;
left: 50%; bottom: 24px; transform: translate(-50%, 8px);
z-index: 10000;
max-width: min(92vw, 460px);
margin: 0; padding: 11px 18px;
background: #2B3242; color: #fff;
border-radius: 999px;
font-size: 14px; line-height: 1.4; text-align: center;
box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.sbh-console .sbh-msg.is-on { opacity: 1; transform: translate(-50%, 0); }
.sbh-console .sbh-msg.ok { background: #1F6B4A; color: #fff; }
.sbh-console .sbh-msg.err { background: #A5342B; color: #fff; }
@media (max-width: 780px) {
/* 폰에서는 아래 탭바 위로 띄운다 */
.sbh-console .sbh-msg { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* 라운드 최종 안내 보내기 (v4.81) */
.sbh-rnd-notify textarea { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; }
.sbh-rnd-notify .sbh-con-lab { display: block; margin: 10px 0 4px; font-weight: 600; }
.sbh-rnd-notify .sbh-con-actions { margin: 10px 0 0; }
.sbh-con-h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 700; }
.sbh-mailpv { margin: 14px 0 4px; padding: 12px; background: #F4F5F7; border: 1px solid #E1E3E8; border-radius: 10px; }
.sbh-mailpv-subj { margin: 0 0 8px; font-size: 14px; word-break: break-all; }
.sbh-mailpv-frame { display: block; width: 100%; height: 480px; border: 1px solid #E1E3E8; border-radius: 8px; background: #fff; }
.sbh-notify-tools { gap: 8px; margin: 0 0 8px; }
.sbh-notify-list { list-style: none; margin: 0; padding: 0; border: 1px solid #E1E3E8; border-radius: 10px; overflow: hidden; }
.sbh-notify-list li + li { border-top: 1px solid #EEEFF2; }
.sbh-notify-list label {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 12px; cursor: pointer; font-size: 14px;
}
.sbh-notify-list label.is-off { cursor: default; background: #FAFAFB; }
.sbh-notify-list input { flex: 0 0 auto; width: 18px; height: 18px; }
.sbh-notify-list .sbh-muted { font-size: 13px; word-break: break-all; }
/* 조 카드 옮기기 손잡이 (v4.85) */
.sbh-dnd-grip {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 34px; margin-left: -4px;
color: #9AA0AE; font-size: 17px; line-height: 1;
cursor: grab; user-select: none; touch-action: none;
border-radius: 8px;
}
.sbh-dnd-grip:hover { color: #5A6070; background: #ECEEF3; }
.sbh-dnd-grip:active { cursor: grabbing; }
.sbh-dnd-grip:focus-visible { outline: 2px solid var(--con-ok, #1F6B4A); outline-offset: 1px; }
.sbh-dnd-group.is-moving {
opacity: .6;
box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
transform: scale(.995);
}
.sbh-dnd-group.is-moving .sbh-dnd-grip { cursor: grabbing; }
/* 스코어카드 (v4.89) */
.sbh-sc-rounds { list-style: none; margin: 12px 0 0; padding: 0; }
.sbh-sc-rounds li { border-bottom: 1px solid #EEEFF2; }
.sbh-sc-rounds a {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 13px 4px; text-decoration: none; color: inherit; font-size: 14px;
}
.sbh-sc-rounds a:hover { background: #FAFBFD; }
.sbh-sc-date { flex: 0 0 auto; font-weight: 700; }
.sbh-sc-name { flex: 0 0 auto; }
.sbh-sc-where { flex: 1 1 auto; min-width: 0; color: var(--con-muted); font-size: 13px; }
.sbh-sc-table { margin: 14px 0 0; border: 1px solid #E1E3E8; border-radius: 10px; overflow: hidden; }
.sbh-sc-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 11px 12px;
}
.sbh-sc-row + .sbh-sc-row { border-top: 1px solid #EEEFF2; }
.sbh-sc-row.is-me { background: #F4FAF6; }
.sbh-sc-who { flex: 1 1 150px; min-width: 0; font-size: 14px; }
.sbh-sc-avg { font-size: 12px; margin-left: 6px; }
.sbh-sc-over, .sbh-sc-total { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 0; }
.sbh-sc-over span, .sbh-sc-total span { font-size: 12px; color: var(--con-muted); }
.sbh-console .sbh-sc-row input { width: 74px; margin: 0; padding: 8px; text-align: center; font-size: 15px; }
.sbh-console .sbh-sc-row input.sbh-sc-sum { background: #F4F5F7; color: #5A6070; font-weight: 700; }
.sbh-console .sbh-sc-row input:disabled { background: #F4F5F7; color: #9AA0AE; }
.sbh-sc-lock { flex: 0 0 auto; font-size: 12px; }
.sbh-chip-avg { font-size: 11px; color: #7A6A45; background: #F6F1E7; padding: 1px 6px; border-radius: 999px; }
.sbh-my-stat { display: block; margin-top: 4px; font-size: 13px; }
@media (max-width: 600px) {
.sbh-sc-who { flex: 1 1 100%; }
}
/* 스코어카드 제출 상태 (v4.90) */
.sbh-sc-done {
margin: 12px 0 0; padding: 11px 14px;
background: #F0F7F2; border: 1px solid #CFE5D8; border-radius: 10px;
font-size: 14px; color: #24603F;
}
.sbh-sc-left { margin: 8px 0 0; font-size: 13px; }
.sbh-sc-left.is-ready { color: #1F6B4A; font-weight: 600; }
/* 날짜가 지나 닫힌 스코어카드 (v4.93) */
.sbh-sc-shut {
margin: 12px 0 0; padding: 11px 14px;
background: #F6F7FA; border: 1px solid #E1E3E8; border-radius: 10px;
font-size: 14px; color: #5A6070;
}
/* 신페리오 (v6.1) — 대회 날에만 서는 홀별 칸 */
.sbh-sc-peria-note {
margin: 12px 0; padding: 11px 14px;
background: #FFF8E6; border: 1px solid #F0DFA8; border-radius: 10px;
font-size: 14px; color: #5A4A1F;
}
.sbh-sc-holes {
display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 5px; margin: 8px 0 4px;
}
.sbh-sc-hole { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbh-sc-hole > span {
font-size: 10px; color: #8A90A0; text-align: center; line-height: 1.2;
}
.sbh-sc-hole > span i { display: block; font-style: normal; font-size: 9px; color: #A8AEBC; }
.sbh-sc-hole input {
width: 100%; box-sizing: border-box; padding: 6px 2px;
text-align: center; font-size: 15px;
}
.sbh-sc-hsum { font-size: 13px; color: #5A6070; margin-top: 4px; }
.sbh-sc-hsum b { color: #2B3242; }
.sbh-sc-row.is-ready .sbh-sc-hsum b { color: #1F6B4A; }
.sbh-sc-peria { margin: 22px 0 0; }
.sbh-peria-table .num { text-align: right; }
.sbh-peria-table tr.is-me { background: #F2F6FF; }
.sbh-peria-hidden {
margin-top: 8px; padding: 8px 12px;
background: #FFF8E6; border: 1px solid #F0DFA8; border-radius: 8px;
}
.sbh-peria-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0; }
.sbh-peria-opts > label { display: flex; flex-direction: column; font-size: 13px; gap: 3px; }
.sbh-peria-opts > label .sbh-muted { font-size: 11px; }
.sbh-peria-pars { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
@media (max-width: 560px) {
.sbh-sc-holes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* 기념품 대장 (v6.0) — 빈칸이 답이므로, 받은 칸보다 안 받은 칸이 읽혀야 한다 */
.sbh-gift-wrap { overflow-x: auto; }
.sbh-gift-grid th.num, .sbh-gift-grid td.num { text-align: center; white-space: nowrap; }
.sbh-gift-grid td.is-given { color: #1F6B4A; font-weight: 700; }
.sbh-gift-grid td.is-none { background: #FBFBFC; }
.sbh-gift-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbh-gift-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sbh-gift-add .sbh-gift-note { flex: 1 1 200px; }
/* 조편성 카드의 연령대·특기사항 (v6.0) */
.sbh-chip-age {
margin-left: 4px; padding: 1px 6px; border-radius: 999px;
font-size: 11px; font-weight: 700; color: #4A5163; background: #EDEFF4;
}
.sbh-chip-memo { margin-left: 3px; font-size: 12px; color: #8A90A0; cursor: help; }
/* 마이페이지의 받은 기념품 (v6.0) */
.sbh-my-gifts { margin: 22px 0 0; }
.sbh-my-giftlist { list-style: none; margin: 8px 0 0; padding: 0; }
.sbh-my-giftlist li { padding: 6px 0; border-bottom: 1px solid #EEF0F4; }
/* 동호회 장부 (v5.99) */
.sbh-book-top {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
margin: 10px 0 14px; padding: 14px 16px;
background: #F2F6FF; border: 1px solid #C9D6EC; border-radius: 12px;
}
.sbh-book-bal b { font-size: 26px; margin-left: 8px; color: #1F6B4A; }
.sbh-book-bal b.is-minus { color: #B3261E; }
.sbh-book-sums { font-size: 13px; color: #5A6070; }
.sbh-book-filter {
display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 0 0 12px;
}
.sbh-book-filter label { display: flex; flex-direction: column; font-size: 12px; color: #5A6070; gap: 3px; }
.sbh-book-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sbh-book-cat {
padding: 5px 11px; border-radius: 999px; font-size: 13px;
background: #F6F7FA; border: 1px solid #E1E3E8;
}
.sbh-book-cat .in { color: #1F6B4A; margin-left: 6px; }
.sbh-book-cat .out { color: #B3261E; margin-left: 6px; }
.sbh-book-table .num { text-align: right; white-space: nowrap; }
.sbh-book-table .in { color: #1F6B4A; }
.sbh-book-table .out { color: #B3261E; }
.sbh-book-table .num.is-minus { color: #B3261E; font-weight: 600; }
.sbh-book-act { white-space: nowrap; }
.sbh-book-form {
display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 8px 0 4px;
}
.sbh-book-form label { display: flex; flex-direction: column; font-size: 12px; color: #5A6070; gap: 3px; }
.sbh-book-form label.wide { flex: 1 1 260px; }
.sbh-book-form label.wide input { width: 100%; }
.sbh-book-hint { font-size: 12px; margin: 2px 0 0; }
.sbh-book-wholist { list-style: none; margin: 10px 0; padding: 0; }
.sbh-book-wholist li {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding: 7px 0; border-bottom: 1px solid #EEF0F4;
}
.sbh-book-whoadd { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* 장부 표 (v6.91) — 잔액 칸 없음. 「금액」 한 칸과 짧은 날짜는 휴대폰에서만 */
.sbh-book-table .bk-amt, .sbh-book-table .d-short, .sbh-book-act .bk-ic { display: none; }
.sbh-book-table .bk-amt { font-weight: 700; }
/* 휴대폰·앱 — 한 줄에 날짜 · 항목 · 적요 · ±금액 */
@media (max-width: 640px) {
.sbh-book-table thead { display: none; }
.sbh-book-table, .sbh-book-table tbody { display: block; width: 100%; }
.sbh-book-table tr[data-id] {
display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
align-items: center; gap: 0 8px; padding: 9px 2px; border-bottom: 1px solid #EEF0F4;
}
.sbh-book-table tr[data-id] td { display: block; padding: 0; border: 0; text-align: left; }
.sbh-book-table td.num.in:not(.bk-amt), .sbh-book-table td.num.out:not(.bk-amt) { display: none; }
.sbh-book-table .bk-amt { display: block; text-align: right; font-size: 14px; white-space: nowrap; order: 4; }
.sbh-book-table .bk-memo { order: 3; }
.sbh-book-table .sbh-book-act { order: 5; }
.sbh-book-table .d-long { display: none; }
.sbh-book-table .d-short { display: inline; font-size: 12.5px; color: #5A6070; font-variant-numeric: tabular-nums; }
.sbh-book-table .sbh-con-pill { font-size: 11px; padding: 2px 7px; white-space: nowrap; }
.sbh-book-table .bk-memo { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbh-book-act { display: flex !important; gap: 4px; }
.sbh-book-act .sbh-con-btn { padding: 4px 7px; min-height: 0; line-height: 1; font-size: 12px; }
.sbh-book-act .bk-tx { display: none; }
.sbh-book-act .bk-ic { display: inline; }
.sbh-book-table tr.sbh-book-editrow { display: block; }
.sbh-book-table tr.sbh-book-editrow[hidden] { display: none; }
.sbh-book-table tr.sbh-book-editrow td, .sbh-book-table .bk-empty { display: block; }
}
/* 표 머리 정렬 — 모든 data-sortable 표에 같은 표시 (v6.91). 장부 표에는 화살표도 손가락 모양도 없어서
누를 수 있는 줄 몰랐다 */
table[data-sortable] th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: background .15s, color .15s; }
table[data-sortable] th.is-sortable:hover { background: #F6F1E4; color: #8A6D2B; }
table[data-sortable] th.is-sortable::after { content: '↕'; margin-left: 4px; font-size: 10px; opacity: .35; }
table[data-sortable] th.is-sortable:hover::after { opacity: .9; }
table[data-sortable] th.is-sorted[data-dir="asc"]::after { content: '▲'; opacity: .85; }
table[data-sortable] th.is-sorted[data-dir="desc"]::after { content: '▼'; opacity: .85; }
table[data-sortable] th.is-sortable:focus-visible { outline: 2px solid #A38856; outline-offset: -2px; }
/* 설정 안의 작은 소제목과 붙여넣기용 코드 상자 (v5.99) */
.sbh-con-h4 {
margin: 18px 0 6px; font-size: 15px; font-weight: 700; color: #2B3242;
}
.sbh-con-code {
width: 100%; box-sizing: border-box; margin: 6px 0 4px; padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px; line-height: 1.5; color: #2B3242;
background: #F6F7FA; border: 1px solid #D8DBE2; border-radius: 8px;
white-space: pre; overflow-x: auto; resize: vertical;
}
/* 스코어카드 사진 (v5.98) — 숫자의 근거. 갤러리와 다른 칸에 선다. */
.sbh-sc-cards {
margin: 22px 0 0; padding: 16px 16px 14px;
background: #F9FAFC; border: 1px solid #E1E3E8; border-radius: 12px;
}
.sbh-sc-cards .sbh-con-h3 { margin: 0 0 6px; }
.sbh-sc-cardlist {
display: flex; flex-wrap: wrap; gap: 12px;
margin: 12px 0; padding: 0; list-style: none;
}
.sbh-sc-cardlist li { position: relative; width: 140px; }
.sbh-sc-cardlist img {
display: block; width: 140px; height: 140px; object-fit: cover;
border: 1px solid #D8DBE2; border-radius: 10px; background: #FFF;
}
/* 지우기는 늘 보이되 눈에 먼저 들어오지는 않게 — 실수로 누르면 되돌릴 수 없다 */
.sbh-sc-cardx {
width: 100%; margin-top: 6px; padding: 5px 0;
font-size: 12px; opacity: .75;
}
.sbh-sc-cardx:hover { opacity: 1; }
.sbh-sc-cardadd { display: inline-block; cursor: pointer; }
@media (max-width: 480px) {
.sbh-sc-cardlist li,
.sbh-sc-cardlist img { width: 104px; }
.sbh-sc-cardlist img { height: 104px; }
}
/* 회원 모드 (v4.95) */
.sbh-asmember-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 12px; padding: 10px 14px;
background: #EEF2FA; border: 1px solid #C9D6EC; border-radius: 10px;
font-size: 14px; color: #2B3242;
}
.sbh-asmember-tag {
flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
background: #2B3242; color: #fff; font-size: 12px; font-weight: 700;
}
.sbh-asmember-bar .sbh-con-btn { margin-left: auto; }
.sbh-idbtn.is-asmember { background: #2B3242; border-color: #2B3242; color: #fff; }
/* 표 머리 정렬 (v4.96) */
.sbh-tbl th .sbh-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.sbh-tbl th .sbh-sort:hover { text-decoration: underline; }
.sbh-tbl th .sbh-sort.is-on { font-weight: 800; color: #1F6B4A; }
.sbh-sort-mark { font-size: 11px; }
/* 구장 주소록 안내 (v4.97) */
.sbh-course-hint { margin: -6px 0 12px; font-size: 13px; }
/* 등록 확인 메일 고르기 (v4.98) — 한 줄이 길어 줄바꿈을 허용한다 */
.sbh-notify-mode { flex-wrap: wrap; margin: 0 0 12px; }
.sbh-notify-mode span { flex: 1 1 100%; padding-left: 24px; }
/* 구장 관리 (v4.99) — 표 안에서 바로 고친다 */
.sbh-course-find { margin: 0 0 14px; align-items: center; gap: 10px; }
.sbh-course-find input { flex: 1 1 260px; max-width: 340px; }
.sbh-cs-row input { width: 100%; min-width: 0; }
.sbh-cs-row .sbh-cs-par { width: 72px; }
.sbh-cs-row td[data-label="주소"] { min-width: 200px; }
.sbh-cs-row td[data-label="구글 지도"] { min-width: 180px; }
.sbh-con-btn.sbh-icon { padding: 6px 10px; font-size: 15px; line-height: 1; }
/* 구장 합치기 (v5.0) */
.sbh-course-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.sbh-course-chips .sbh-chip { font-size: 12px; padding: 6px 12px; text-align: left; }
.sbh-course-mergebar {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
background: #F6F1E7; border: 1px solid #E3D8BF; font-size: 13px;
}
.sbh-course-mergebar select { max-width: 280px; }
.sbh-cs-row td[data-label="고르기"] { width: 34px; }
.sbh-cs-row .sbh-cs-pick { width: 18px; height: 18px; }
/* 「승인은 됐지만 메일은 안 나갔다」 — 성공도 실패도 아닌 자리 (v5.2) */
.sbh-msg.warn { background: #FDF4E3; color: #7A5A16; border-color: #E8D3A0; }
/* 취소 — 저장 옆의 나가는 길 (v5.6).
눈에는 덜 띄되 손에는 닿아야 한다. 라서 글자색을 따로 잡아 준다. */
.sbh-con-cancel { color: var(--con-muted); text-decoration: none; }
.sbh-con-cancel:hover,
.sbh-con-cancel:focus { color: var(--con-ink); text-decoration: none; }
/* ---------------------------------------------- 회원 표 · 쪽 나누기 (v5.7) */
/* 쪽 넘김으로 지금 쪽이 아닌 줄. hidden 을 쓰지 않는 이유 —
거르개로 숨은 줄과 구분되어야 내보내기가 「거른 전부」를 담을 수 있다. */
.sbh-tbl tbody tr.is-off-page { display: none; }
.sbh-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 12px 0;
font-size: 13px;
color: var(--con-muted);
}
.sbh-pager .sbh-con-btn { min-height: 34px; padding: 0 14px; }
.sbh-pager-top { margin-top: 0; }
/* 이름 옆 단추 둘(미리보기·상세)을 한 칸에 모아 둔 자리 */
.sbh-mem-acts { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
/* 거르개 줄이 길어졌다 — 좁은 화면에서 접히게 두고, 넓은 화면에서는 한 줄로 */
.sbh-con-filters { flex-wrap: wrap; }
/* 합칠 만한 이름 칩 (v5.7) — 한 칸이 화면보다 길어져 페이지가 옆으로 밀리던 것을 막는다 */
.sbh-course-chips { max-width: 100%; overflow: hidden; }
.sbh-course-chips .sbh-chip {
max-width: 100%;
gap: 6px;
white-space: normal; /* 이름이 길면 칸 안에서 접힌다 — 밖으로 나가지 않는다 */
text-align: left;
overflow-wrap: anywhere;
}
/* 구장 관리 화면 전체가 가로로 넘치지 않게 (넘치면 메뉴와 본문이 겹쳐 보인다) */
.sbh-con-main { min-width: 0; }
/* 관리 화면의 머리줄은 모두 가운데로 (v5.8).
화면마다 제목이 왼쪽 끝에 붙어 있으니, 본문은 가운데인데 머리만 한쪽으로 쏠려
보였다. 제목·설명·거르개를 한 덩어리로 가운데에 세운다 — 「무엇을 보고 있는가」를
말하는 자리라 가운데가 맞다. 표와 본문은 건드리지 않는다. */
.sbh-con-head { text-align: center; }
.sbh-con-head .sbh-rnd-modes,
.sbh-con-head .sbh-con-filters,
.sbh-con-head .sbh-con-row { justify-content: center; }
.sbh-con-head .sbh-con-back { display: inline-block; }
/* 머리 바로 아래 딸린 한 줄들도 같이 (초대 현황·통계 요약) */
.sbh-invite-sum,
.sbh-con-main > .sbh-con-stat { text-align: center; }
/* v5.7 에서 쓰던 이름 — 이미 붙여 둔 자리를 위해 남겨 둔다 */
.sbh-con-centered { text-align: center; }
.sbh-con-centered .sbh-rnd-modes { justify-content: center; }
/* ------------------------------------------- 관리 화면을 넓게 (v5.7.2)
메뉴를 위로 올렸는데도 표가 잘렸다. 테마의 본문 기둥이 820px 남짓이라,
왼쪽 기둥을 없애 얻은 자리를 테마가 도로 가져간 것이다. 회원 표는 칸이 열넷이라
그 폭에서는 어차피 들어가지 않는다.
그래서 관리 화면만 테마 기둥 밖으로 꺼내 화면 폭을 쓴다. 1560px 에서 멈춘다 —
더 넓히면 한 줄이 너무 길어져 눈이 줄을 잃는다. */
@media (min-width: 1200px) {
.sbh-con-shell {
width: 100vw;
margin-inline: calc(50% - 50vw);
padding-inline: max(24px, calc((100vw - 1560px) / 2));
}
}
/* 이름은 접히지 않는다 — 한 사람이 한 줄이라는 약속이 여기서 깨진다 */
.sbh-tbl td[data-label="이름"] { white-space: nowrap; }
.sbh-tbl td[data-label="비고"],
.sbh-tbl td[data-label="이메일"] { max-width: 190px; }
.sbh-tbl td[data-label="마지막 접속"] { white-space: nowrap; }
/* ------------------------------------------------- 두 단 메뉴 (v5.9)
윗줄은 큰 칸 넷, 아랫줄은 그 묶음에 딸린 화면들. 아랫줄이 윗줄보다 작고 조용해야
「이것은 저것의 안쪽」이라는 관계가 눈으로 읽힌다. 같은 크기면 그냥 여덟 칸이다. */
.sbh-con-subnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px 4px;
margin: 0 0 18px;
padding: 0 0 10px;
border-bottom: 1px solid var(--con-line);
}
/* 이름이 겹쳐 있었다 (v5.40.1) — 목록 한 줄의 설명글도 .sbh-con-sub 를 쓴다.
이 규칙이 아래에 있어서 그쪽까지 「줄바꿈 없는 칩」으로 만들었고, 그래서 폰에서
게스트 신청의 안내글이 상자 밖으로 흘러나갔다. 메뉴 안쪽으로 범위를 좁힌다. */
.sbh-con-subnav .sbh-con-sub {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 0 11px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--con-muted);
text-decoration: none;
white-space: nowrap;
}
.sbh-con-subnav .sbh-con-sub:hover { background: #F3F1EC; color: var(--con-ink); }
.sbh-con-subnav .sbh-con-sub.is-active { background: #EFEAE0; color: var(--con-gold); }
.sbh-con-subnav .sbh-con-sub .sbh-con-badge {
position: static;
margin: 0;
min-width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
}
/* 폰 — 큰 칸 넷은 아래쪽 탭바 그대로, 딸린 화면은 본문 위 한 줄로 (v5.9).
접는 「더보기」를 없앴다: 칸이 넷이면 접을 이유가 없고, 접힌 메뉴는 안 열린다. */
@media (max-width: 781px) {
.sbh-con-subnav {
margin: 4px 0 14px;
padding: 0 0 10px;
overflow-x: auto;
flex-wrap: nowrap;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
}
.sbh-con-subnav .sbh-con-sub { flex: 0 0 auto; min-height: 36px; font-size: 13.5px; }
}
/* 검색칸이 화면을 가로지르지 않게 (v5.9.1).
메뉴를 위로 올리고 화면이 1560px 까지 넓어지면서, 「폭을 다 쓰라」던 옛 규칙이
글자 열 자 들어갈 칸을 1.5m 짜리 막대로 만들어 버렸다. 들어갈 만큼만 쓴다. */
.sbh-con-filters input[type="search"] { flex: 1 1 340px; max-width: 420px; }
/* 입력 폼도 가운데로 (v5.9.1).
머리줄은 가운데인데 폼만 왼쪽 끝에 붙어 있으면 화면이 한쪽으로 쏠려 보인다.
가운데로 세우는 것은 덩어리이고, 글자와 칸은 그대로 왼쪽에서 시작한다 —
입력칸 안의 글자까지 가운데로 몰면 적을 때 눈이 따라가지 못한다. */
.sbh-con-form { margin-inline: auto; }
.sbh-con-form .sbh-con-actions { justify-content: center; }
/* 눌러서 정렬하는 머리칸 (v5.10) */
/* is-clickable 은 옛 정렬기(v5.10)가 붙이던 이름이다 — v5.86 에 정렬기를 하나로
합치면서 사라졌다. 화살표(is-sorted)는 남은 정렬기도 그대로 쓰므로 여기 둔다. */
.sbh-tbl th.is-sorted::after { content: " ↑"; font-size: 11px; }
.sbh-tbl th.is-sorted[data-dir="desc"]::after { content: " ↓"; }
.sbh-con-filters .sbh-tbl-find { flex: 1 1 220px; max-width: 300px; min-width: 0; margin-top: 0; }
/* ------------------------------------------------- 관리 콘솔 문의 (v5.12) */
.sbh-chatadmin {
display: grid;
grid-template-columns: minmax(240px, 320px) 1fr;
gap: 18px;
align-items: start;
}
.sbh-chatadmin-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 560px;
overflow-y: auto;
}
.sbh-chatadmin-item {
display: block;
width: 100%;
padding: 10px 12px;
background: transparent;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 9px;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.sbh-chatadmin-item:hover { background: rgba(0, 0, 0, .04); }
.sbh-chatadmin-item.is-active { border-color: #1a2e4a; background: rgba(26, 46, 74, .06); }
.sbh-chatadmin-item.is-unread { border-left: 3px solid #c0392b; }
.sbh-chatadmin-top { display: flex; align-items: center; gap: 8px; }
.sbh-chatadmin-sub { margin-top: 2px; font-size: 12px; opacity: .65; }
/* 미리보기는 한 줄만 — 문의가 길면 목록이 통째로 대화가 된다 */
.sbh-chatadmin-pre {
margin-top: 4px;
font-size: 13px;
opacity: .8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sbh-chatadmin-pane { min-width: 0; }
.sbh-chatadmin-pane .sbh-chat-log { max-height: 460px; }
@media (max-width: 860px) {
.sbh-chatadmin { grid-template-columns: 1fr; }
.sbh-chatadmin-list { max-height: 300px; }
}
/* 문의 화면에서 「이 사람이 누구인가」 한 줄 (v5.12.1) */
.sbh-chatadmin-who {
margin-top: 4px;
font-size: 13px;
font-weight: 400;
opacity: .75;
}
.sbh-chatadmin-who a { text-decoration: underline; }
/* 머리칸 글자는 칸 가운데로 (v5.13.2).
본문은 왼쪽에 그대로 둔다 — 이름·시각·내용은 눈이 왼쪽 끝을 따라 내려가며 읽는
것이라 가운데로 모으면 읽기가 도리어 나빠진다. 머리칸은 읽는 것이 아니라
「이 칸이 무엇인가」를 가리키는 이름표이므로 가운데가 맞다. */
/* 관리 콘솔 안의 표에만 건다 — My Page 는 회원이 보는 화면이라 손대지 않는다 */
.sbh-con-main .sbh-tbl thead th { text-align: center; }
/* 칸 하나로 좁혀 보는 고르개 — 찾기 칸 옆에 나란히 (v5.13.2) */
.sbh-con-filters select.sbh-pick-mem {
flex: 0 1 200px;
min-width: 140px;
max-width: 240px;
}
/* 로그의 「누가 했나」 표 (v5.14).
이름 옆에 조그맣게 붙는다 — 이름을 밀어내지 않으면서, 회원이 직접 한 줄과
운영진이 그 회원에 대해 한 줄을 눈으로 갈라 주면 된다. */
.sbh-by {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
vertical-align: 1px;
}
.sbh-by.is-admin { background: rgba(26, 46, 74, .10); color: #1a2e4a; }
.sbh-by.is-sys { background: rgba(0, 0, 0, .06); color: #555; }
.sbh-by.is-prev { background: rgba(201, 162, 39, .18); color: #7a5f00; }
/* 스코어카드 목록 — 폰에서는 자리를 못박는다 (v5.14.1).
*
* 데스크탑은 한 줄 flex 로 「날짜 · 이름 · 구장 · 상태」가 나란히 선다. 그런데 폰에서는
* 구장 이름 길이가 제각각이라(Blue Hill 부터 Rockland Lake Championship Golf Course 까지)
* 상태 표가 어떤 줄은 첫 줄 끝, 어떤 줄은 다음 줄 왼쪽으로 떨어졌다. 눈이 「마감」을
* 찾으려면 줄마다 다른 곳을 봐야 했다.
*
* 그래서 흐르는 대로 두지 않고 칸을 짠다:
* [ 날짜 라운드 이름 ......... 상태 ]
* [ 구장 이름 ]
* 상태는 언제나 첫 줄 오른쪽 끝, 라운드 이름과 같은 줄이다.
*/
@media (max-width: 640px) {
.sbh-sc-rounds a {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"date name state"
"where where where";
align-items: center;
gap: 4px 8px;
padding: 12px 4px;
}
.sbh-sc-date { grid-area: date; }
.sbh-sc-name { grid-area: name; min-width: 0; }
.sbh-sc-state { grid-area: state; justify-self: end; white-space: nowrap; }
.sbh-sc-where { grid-area: where; }
}
/* 관리 메뉴 두 줄이 화면을 내려도 따라온다 (v5.18).
*
* 붙는 순서는 위에서부터 이렇다:
* 워드프레스 관리자 막대 → 테마 머리줄 → 큰 칸 줄 → 딸린 화면 줄 → 표 머리줄
*
* 앞의 둘은 우리 것이 아니라 높이를 알 수 없다. 그래서 JS 가 실제로 재서
* --con-top 에 넣어 준다. 우리 두 줄의 높이도 재서 --con-navh · --con-subh 로 넘긴다 —
* 글자 크기나 칸 개수가 바뀌면 높이도 바뀌므로 숫자를 박아 두면 언젠가 어긋난다.
*
* 좁은 화면은 건드리지 않는다. 거기서는 큰 칸 줄이 아래쪽 탭바라 위에 붙을 일이
* 없고, 관리자 막대도 같이 스크롤된다. */
@media (min-width: 782px) {
.sbh-con-subnav {
position: sticky;
top: calc(var(--con-top, 0px) + var(--con-navh, 0px));
z-index: 39;
background: var(--con-bg);
margin: 0 0 18px;
}
/* 표 머리줄은 이 두 줄 아래에 선다 — 안 그러면 메뉴 뒤로 숨는다 */
.sbh-console {
--con-stick: calc(var(--con-top, 0px) + var(--con-navh, 0px) + var(--con-subh, 0px));
}
body.admin-bar .sbh-console {
--con-stick: calc(var(--con-top, 0px) + var(--con-navh, 0px) + var(--con-subh, 0px));
}
/* 메뉴가 지나갈 때 밑의 글자가 비쳐 보이면 안 된다 */
.sbh-con-nav,
.sbh-con-subnav { background: var(--con-bg); }
}
/* 라운드 카드를 눌러 들어간다 (v5.19).
제목은 진짜 링크다 — 키보드로도 닿아야 하고, 새 탭으로 열 수도 있어야 한다.
카드의 나머지 빈 곳은 JS 가 같은 곳으로 보낸다. */
.sbh-con-item.is-linked { cursor: pointer; }
.sbh-con-item.is-linked:hover { background: #FAFBFD; }
.sbh-con-golink { color: inherit; text-decoration: none; }
.sbh-con-golink:hover { text-decoration: underline; }
/* 관심 조사 (v5.21) */
.sbh-int-answers { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.sbh-int-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border: 1px solid var(--con-line); border-radius: 999px; font-size: 13px;
}
.sbh-int-chip.is-yes { background: rgba(31, 107, 74, .10); border-color: rgba(31, 107, 74, .35); }
.sbh-int-chip.is-no { background: rgba(0, 0, 0, .04); opacity: .75; }
.sbh-int-yes { color: #1F6B4A; }
.sbh-int-pick { margin-top: 8px; border-top: 1px solid var(--con-line); padding-top: 12px; }
.sbh-int-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 4px; max-height: 320px; overflow-y: auto;
margin: 8px 0 12px; padding: 8px; border: 1px solid var(--con-line); border-radius: 10px;
}
.sbh-int-one {
display: flex; align-items: center; gap: 7px;
padding: 6px 8px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.sbh-int-one:hover { background: #FAFBFD; }
/* 이미 물어본 분은 흐리게 — 골라 두지 않았다는 것이 눈으로 보여야 한다 */
.sbh-int-one.is-asked { opacity: .6; }
.sbh-int-one .sbh-muted { font-size: 12px; margin-left: auto; white-space: nowrap; }
.sbh-int-memo { display: block; margin: 6px 0 10px; }
.sbh-int-memo textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; }
.sbh-int-deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sbh-int-deadline label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.sbh-int-deadline input { font-weight: 400; }
/* 관심 조사 — 거르개와 직접 찍기 (v5.22) */
.sbh-int-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px;
}
.sbh-int-filters input[type="search"] { flex: 1 1 190px; min-width: 150px; }
.sbh-int-hcp { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--con-muted); }
.sbh-int-hcp input { width: 70px; }
/* 메일이 없는 분 — 목록에서 빼지 않고 표시만 한다 */
.sbh-int-one.is-nomail b { color: var(--con-muted); }
.sbh-int-chip.is-hand { border-style: dashed; }
/* 칩 안의 대신 찍기 단추 — 작게, 마우스를 올려야 또렷해진다 */
.sbh-int-mark {
padding: 0 3px; margin-left: 2px;
background: none; border: 0; border-radius: 5px;
font-size: 12px; line-height: 1; opacity: .35; cursor: pointer;
}
.sbh-int-chip:hover .sbh-int-mark { opacity: .8; }
.sbh-int-mark:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
/* ── 발송·회신 기록 (v5.33) ────────────────────────────────────────
늘 펼쳐 둘 표가 아니다. 「누구한테 언제 보냈더라」가 궁금할 때만 연다. */
.sbh-int-log { margin: 4px 0 14px; }
.sbh-int-log > summary {
display: inline-block; cursor: pointer;
padding: 4px 2px; font-size: 13px; font-weight: 600; color: var(--con-ink);
}
.sbh-int-log > summary:hover { color: var(--con-accent, #1f6b4a); }
.sbh-int-logwrap { overflow-x: auto; margin-top: 8px; }
.sbh-int-logtbl {
width: 100%; border-collapse: collapse; font-size: 13px;
font-variant-numeric: tabular-nums;
}
.sbh-int-logtbl th,
.sbh-int-logtbl td {
padding: 6px 10px; text-align: left; white-space: nowrap;
border-bottom: 1px solid var(--con-line, rgba(0, 0, 0, .08));
}
.sbh-int-logtbl th {
font-size: 11px; font-weight: 600; letter-spacing: .04em;
color: var(--con-muted); border-bottom-width: 2px;
}
.sbh-int-logtbl tbody tr.is-answered td:nth-child(4) { font-weight: 600; }
.sbh-int-logtbl tbody tr.is-waiting { color: var(--con-muted); }
.sbh-int-logtbl tbody tr.is-unsent { opacity: .6; }
.sbh-int-logtbl tbody tr:hover { background: rgba(0, 0, 0, .025); }
/* ── 섹션 접기 · 순서 바꾸기 (v5.23) ───────────────────────────────── */
.sbh-con-stack { display: block; }
.sbh-sec > .sbh-con-h2 {
display: flex;
align-items: center;
gap: 8px;
}
.sbh-sec > .sbh-con-h2 > .sbh-con-count,
.sbh-sec > .sbh-con-h2 > .sbh-my-apps-sum { margin-left: 0; }
.sbh-sec-grip,
.sbh-sec-fold {
flex: 0 0 auto;
border: 1px solid #E3E4EA;
background: #FAFAFC;
color: #6B7280;
border-radius: 8px;
font: inherit;
line-height: 1;
padding: 5px 9px;
cursor: pointer;
}
.sbh-sec-grip { cursor: grab; touch-action: none; font-size: 15px; }
.sbh-sec-grip:active { cursor: grabbing; }
.sbh-sec-fold { margin-left: auto; min-width: 34px; font-size: 15px; }
.sbh-sec-grip:hover,
.sbh-sec-fold:hover { background: #F1F1F5; color: #23262F; }
/* 접힌 섹션은 제목줄만 남는다 */
.sbh-sec.is-closed > *:not(.sbh-con-h2) { display: none !important; }
.sbh-sec.is-closed { padding-bottom: 8px; }
/* 끄는 중 — 그림자로 판에서 들린 것처럼 */
.sbh-sec.is-dragging {
position: relative;
z-index: 5;
box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
opacity: .96;
}
.sbh-con-stack > section[data-sec] { transition: box-shadow .12s ease; }
/* ── 프로모션 — 관심 조사 / 신청 접수 (v5.23) ──────────────────────── */
.sbh-int-mode {
display: inline-flex;
margin: 0 0 10px;
border: 1px solid #E3E4EA;
border-radius: 10px;
overflow: hidden;
}
.sbh-int-modebtn {
border: 0;
background: #FAFAFC;
color: #6B7280;
font: inherit;
font-weight: 700;
padding: 8px 16px;
cursor: pointer;
}
.sbh-int-modebtn + .sbh-int-modebtn { border-left: 1px solid #E3E4EA; }
.sbh-int-modebtn.is-on { background: #1A2E4A; color: #fff; }
/* ── My Page — 내가 답한 라운드 (v5.23) ───────────────────────────── */
.sbh-my-promotbl { width: 100%; }
.sbh-my-promotbl th { text-align: center; }
.sbh-my-promotbl td { vertical-align: middle; }
.sbh-my-promotbl td:nth-child(1),
.sbh-my-promotbl td:nth-child(2) { white-space: nowrap; text-align: center; }
.sbh-my-promokind { margin-left: 6px; font-size: 12px; }
.sbh-my-promonote { margin-top: 10px; font-size: 13px; }
@media (max-width: 560px) {
.sbh-my-promokind { display: block; margin: 3px 0 0; }
}
/* 전체 접기 · 펴기 줄 (v5.24) */
.sbh-stack-bar { margin: 0 0 12px; display: flex; gap: 8px; justify-content: flex-end; }
/* 떠 있는 전체 펴기 · 접기 (v6.38) — 오른쪽 가운데. 아래 오른쪽은 채팅·만들기 단추 자리다. */
.sbh-stack-float {
position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
z-index: 880; margin: 0; flex-direction: column; gap: 6px;
padding: 6px; border-radius: 26px;
background: rgba(255, 255, 255, .92); border: 1px solid var(--con-line);
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.sbh-stack-fab {
width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--con-gold); color: #fff; cursor: pointer;
}
.sbh-stack-fab[data-act="stack-shut"], .sbh-stack-fab[data-setfold="stack-shut"] { background: #fff; color: var(--con-gold); border: 1px solid var(--con-gold); }
.sbh-stack-fab:hover { filter: brightness(1.08); }
.sbh-stack-fab:focus-visible { outline: 2px solid var(--con-ink); outline-offset: 2px; }
@media (max-width: 600px) { .sbh-stack-float { right: 6px; } .sbh-stack-fab { width: 34px; height: 34px; } }
@media print { .sbh-stack-float { display: none; } }
/* ── 문의 화면 가운데로 (v5.24.5) ──────────────────────────────────
대화를 열기 전에는 목록 한 줄뿐인데, 두 칸 짜리 판에 얹혀 있어서 목록이 왼쪽에
붙고 오른쪽이 휑하게 비어 있었다. 열기 전에는 한 칸으로, 열면 두 칸으로. */
.sbh-chatadmin {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.sbh-chatadmin:not(.is-open) {
grid-template-columns: minmax(0, 560px);
justify-content: center;
}
@media (max-width: 780px) {
.sbh-chatadmin,
.sbh-chatadmin.is-open {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
}
}
/* ── 데모 마이페이지 (v5.25) ──────────────────────────────────────
보는 사람이 「이게 진짜 내 기록인가」로 헷갈리면 안 된다. 맨 위에 못 박아 둔다. */
.sbh-demo-bar {
margin: 0 0 20px;
padding: 12px 16px;
border: 1px solid #EADFC8;
border-left: 5px solid #A38856;
border-radius: 0 10px 10px 0;
background: #FBF6EC;
color: #4A3A1C;
font-size: 14px;
line-height: 1.6;
}
.sbh-demo-cta { margin-top: 26px; text-align: center; }
.sbh-demo-cta p { margin: 0 0 12px; }
/* ── 대시보드 달력 보기 (v5.25) ───────────────────────────────────
이번 달과 다음 달을 나란히 — 「이번 달 어디가 비어 있나」는 달 하나로는 안 보인다. */
.sbh-dash-cals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px;
max-width: 1000px;
margin: 0 auto;
}
.sbh-dash-cal {
background: #fff;
border: 1px solid #E8E9EE;
border-radius: 12px;
overflow: hidden;
}
.sbh-dash-cal-h {
padding: 10px 14px;
font-weight: 700;
font-size: 14px;
border-bottom: 1px solid #E8E9EE;
background: #FAFAFC;
}
/* 일곱 칸은 언제나 같은 너비여야 한다 (v6.11).
*
* `1fr` 은 사실 `minmax(auto, 1fr)` 이다. 그 `auto` 최소값이 칸 안의 가장 긴
* 안 끊기는 글자라서, 「데모 · Rockland Lake Championship」 같은 라운드 이름이
* 들어간 날의 열만 통째로 벌어졌다. 재 보니 한 열이 199px, 나머지는 21px 이었다 —
* 라운드가 없는 달은 일곱 칸이 46px 로 고른데, 있는 달만 무너져서 여섯 판이
* 서로 다른 모양으로 섰다. 벌어진 열에 밀려 요일 머리글도 카드 밖으로 잘려 나갔다.
*
* `minmax(0, 1fr)` 로 최소값을 0 으로 내리면 일곱 칸이 늘 같다. 그래야 칸 안의
* `text-overflow: ellipsis` 도 비로소 제 일을 한다 — 열이 먼저 벌어져 버리면
* 넘칠 일이 없어서 말줄임표가 나올 자리가 없다. */
.sbh-dash-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sbh-dash-dow {
padding: 6px 0;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #8A90A0;
border-bottom: 1px solid #E8E9EE;
}
.sbh-dash-day {
/* 격자 칸도 제 내용보다 작아질 수 있어야 한다 — 위 minmax(0,1fr) 과 한 벌이다 */
min-width: 0;
min-height: 58px;
padding: 4px 4px 6px;
border-right: 1px solid #F0F0F4;
border-bottom: 1px solid #F0F0F4;
}
.sbh-dash-day:nth-child(7n + 7) { border-right: 0; }
.sbh-dash-day.is-blank { background: #FCFCFD; }
.sbh-dash-day.is-today { background: #FBF6EC; }
.sbh-dash-day.has-round { background: #F6FAF7; }
.sbh-dash-n { display: block; font-size: 11px; color: #8A90A0; text-align: right; }
.sbh-dash-ev {
display: block;
margin-top: 3px;
padding: 3px 5px;
border-radius: 5px;
background: #1F6B4A;
color: #fff;
text-decoration: none;
font-size: 10.5px;
line-height: 1.3;
}
.sbh-dash-ev { min-width: 0; max-width: 100%; overflow: hidden; }
/* 이름은 두 줄까지 감싼다 (v6.11).
*
* 한 줄로 자르면 46px 칸에서는 「데…」만 남아 라운드를 가릴 수가 없다. 두 줄이면
* 「번개라…」·「단톡라…」처럼 무슨 라운드인지는 읽힌다. 여섯 달을 한눈에 보는 판이라
* 이름을 다 보여 줄 너비는 애초에 없고, 전체 이름은 마우스를 대면 나온다. */
.sbh-dash-ev b {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: 700;
overflow: hidden;
word-break: break-all;
line-height: 1.25;
}
.sbh-dash-ev span { opacity: .85; font-variant-numeric: tabular-nums; }
.sbh-dash-ev.is-draft { background: #9AA0AC; }
.sbh-dash-ev.is-closed { background: #3A4A63; }
.sbh-dash-ev.is-cancelled { background: #B04A3E; }
.sbh-dash-ev:hover { filter: brightness(1.08); }
/* 여섯 달 판 · 한 달씩 넘기기 (v5.27) */
.sbh-dash-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 14px;
}
.sbh-dash-range { font-weight: 700; font-size: 14px; }
/* 여섯 개가 되면 한 칸이 좁아진다 — 글자와 칸 높이를 그에 맞춘다 */
.sbh-dash-cals { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sbh-dash-day { min-height: 46px; }
/* 목록 보기에도 참가자 이름 (v5.27) */
.sbh-con-who-l {
margin-top: 4px;
font-size: 12.5px;
color: #6B7280;
line-height: 1.5;
}
/* 빠진 골프장 고치기 표 (v5.32) */
.sbh-fx-tbl .sbh-fx-name {
width: 100%;
min-width: 200px;
padding: 6px 9px;
border: 1px solid #E3E4EA;
border-radius: 7px;
font: inherit;
font-size: 13.5px;
}
.sbh-fx-tbl .sbh-fx-n { text-align: center; font-variant-numeric: tabular-nums; }
.sbh-fx-acts { white-space: nowrap; }
.sbh-fx-acts .sbh-con-btn { margin: 2px 2px 2px 0; }
@media (max-width: 700px) {
.sbh-fx-tbl .sbh-fx-name { min-width: 0; }
.sbh-fx-acts { white-space: normal; }
}
/* ── 신청 관리 — 회원 / 게스트 탭 (v5.35) ─────────────────────────────
위쪽 묶음 메뉴와 같은 생김새로 두되, 밑줄로 「이 화면 안의 갈래」임을 알린다. */
.sbh-con-tabs2 {
display: flex; gap: 4px; margin: -4px 0 16px;
border-bottom: 1px solid var(--con-line, #E6E2D8);
}
.sbh-con-tab2 {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px; margin-bottom: -1px;
border-bottom: 2px solid transparent;
font-size: 13px; font-weight: 600; color: var(--con-muted);
text-decoration: none; white-space: nowrap;
}
.sbh-con-tab2:hover { color: var(--con-ink); }
.sbh-con-tab2.is-active { color: var(--con-gold); border-bottom-color: var(--con-gold); }
.sbh-con-tab2 .sbh-con-badge { position: static; margin: 0; min-width: 16px; }
/* 탭 이름이 짧으면 무슨 뜻인지 한 줄이 필요하다 (v5.74).
「미설라운드」는 우리끼리 만든 말이라 적어 두지 않으면 매번 다시 물어야 한다. */
.sbh-con-tabnote {
margin: 8px 0 14px;
padding: 9px 12px;
border-left: 3px solid var(--con-gold);
background: #FBFAF6;
border-radius: 0 8px 8px 0;
font-size: 12.5px;
line-height: 1.7;
color: var(--con-muted);
word-break: keep-all;
}
.sbh-con-tabnote b { color: var(--con-ink); }
/* 폼 안에 들어간 소속 태그 편집기 (v5.78).
표 칸 안에서는 「지금 고치는 중」이라 금색 테두리로 도드라져야 하지만, 폼에서는
위아래 입력칸들과 같은 옷을 입어야 한다 — 혼자 금색이면 오류로 읽힌다. */
.sbh-con-form .sbh-tagedit-inform {
margin: 6px 0 0;
padding: 7px 8px;
min-height: var(--con-input-h);
box-sizing: border-box;
border: 1px solid #D7DAE2;
border-radius: 8px;
background: #fff;
}
.sbh-con-form .sbh-tagedit-inform:focus-within { border-color: var(--con-gold, #C9A227); }
.sbh-con-form .sbh-tagedit-inform .sbh-tagedit-in {
flex: 1 1 90px; min-width: 90px; margin: 0; padding: 2px 0;
border: 0; outline: none; font-size: 13px; background: transparent;
}
.sbh-affil-hint { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.6; word-break: keep-all; }
/* 조 이름 목록 (v5.79) */
.sbh-team-add { gap: 8px; margin: 0 0 12px; }
.sbh-console .sbh-team-add input { width: auto; min-width: 220px; margin-top: 0; }
.sbh-team-bar {
position: sticky; top: var(--con-stick, 0px); z-index: 30;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 10px; padding: 8px 0; background: var(--con-bg, #fff);
}
.sbh-team-dirty { font-size: 12.5px; }
.sbh-team-list { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.sbh-team-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; margin: 0 0 6px;
border: 1px solid var(--con-line, #E8E9EE); border-radius: 10px;
background: #fff;
}
.sbh-team-row.is-dragging { opacity: .45; border-style: dashed; }
/* 끌 수 있다는 것은 손잡이가 말해야 한다 — 줄 전체가 끌리면 글자를 고르지 못한다 */
.sbh-team-grip { cursor: grab; color: #9AA0AC; font-size: 15px; line-height: 1; }
.sbh-team-row:active .sbh-team-grip { cursor: grabbing; }
.sbh-team-no { min-width: 26px; font-size: 12px; color: var(--con-muted); text-align: right; }
.sbh-team-name { flex: 1 1 auto; font-weight: 700; word-break: keep-all; }
.sbh-team-acts { display: flex; gap: 4px; flex: 0 0 auto; }
/* 메일이 닿지 않는 참가자 (v5.76) */
.sbh-rsvp-nomail { cursor: help; font-style: normal; }
.sbh-rsvp-mailwarn { margin: 0 0 12px; line-height: 1.7; word-break: keep-all; }
/* 19홀 시각이 자동인지 잠겼는지 (v5.75) */
.sbh-after-auto { line-height: 1.7; word-break: keep-all; }
.sbh-console .sbh-after-unlock { margin-top: 8px; display: inline-block; }
.sbh-con-head.is-sub { margin-top: 0; }
/* ── 오늘의 라운드 (v5.38) ──────────────────────────────────────────
나갈 글을 그대로 보여 준다. 등폭 글꼴로 두는 이유는 카톡에 붙였을 때의 줄바꿈을
여기서 미리 보기 위해서다. */
.sbh-recap-pre {
margin: 10px 0 12px; padding: 12px 14px; max-height: 320px; overflow: auto;
background: var(--con-code, #F6F4EF); border: 1px solid var(--con-line, #E6E2D8);
border-radius: 10px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.sbh-recap .sbh-con-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* ── 지금 할 일 (v5.39) ─────────────────────────────────────────────
대시보드의 첫 카드. 급한 것은 색으로 갈라 두되, 화면이 빨개지지 않게 점 하나로만. */
.sbh-todo { margin-bottom: 18px; }
.sbh-todo-now {
margin-left: 6px; padding: 1px 8px; border-radius: 999px;
background: #FBE9E7; color: #B23C17; font-size: 11px; font-weight: 700;
}
.sbh-todo-round { padding: 10px 0; border-top: 1px solid var(--con-line, #E6E2D8); }
.sbh-todo-round:first-of-type { border-top: 0; }
.sbh-todo-head {
display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
font-weight: 700; font-size: 14px; color: var(--con-ink, #23262F); text-decoration: none;
}
.sbh-todo-head:hover { color: var(--con-gold, #A38856); }
.sbh-todo-head .sbh-muted { font-weight: 400; font-size: 12px; }
/* 줄 앞은 네모 하나뿐이다 (v5.39.2).
테마가 ul 에 제 점을 붙이는 탓에 우리 점과 두 개로 보였다 — 점을 아예 없애고
그 자리를 체크박스에 준다. 급한 정도는 글자 색으로 말한다. */
.sbh-todo-list { list-style: none !important; margin: 6px 0 0; padding: 0; }
.sbh-todo-list li {
display: flex; align-items: flex-start; gap: 8px;
list-style: none !important; padding: 3px 0; font-size: 13px;
}
.sbh-todo-list li::before, .sbh-todo-list li::after { content: none !important; display: none !important; }
.sbh-todo-list li::marker { content: '' !important; }
.sbh-todo-chk {
flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; cursor: pointer;
accent-color: var(--con-gold, #A38856);
}
.sbh-todo-chk[disabled] { cursor: default; opacity: .5; }
.sbh-todo-list li a { color: var(--con-ink, #23262F); text-decoration: none; }
.sbh-todo-list li a:hover { text-decoration: underline; }
.sbh-todo-list li.is-now a { font-weight: 600; color: #B23C17; }
.sbh-todo-list li.is-idle a { color: var(--con-muted, #8A90A0); }
/*
* 진행 상황 줄 (v5.60) — 할 일이 아니라 상태다.
*
* 회색으로 한 단 낮춰 두면, 위의 할 일들을 먼저 읽고 나서 눈에 들어온다. 네모 자리에는
* ℹ 를 놓아 줄머리가 어긋나지 않게 한다 — 네모만 빼면 그 줄만 왼쪽으로 튀어나온다.
*/
.sbh-todo-list li.is-info { padding-top: 5px; }
.sbh-todo-list li.is-info a { color: var(--con-muted, #8A90A0); font-size: 12.5px; }
.sbh-todo-list li.is-info a:hover { color: var(--con-ink, #23262F); }
.sbh-todo-info {
flex: 0 0 auto; width: 15px; margin-top: 1px;
color: var(--con-muted, #8A90A0); font-size: 12px; text-align: center;
}
/* 할 일 한 줄 닫기 (v5.39.2) */
.sbh-todo-skipped { margin-top: 10px; border-top: 1px solid var(--con-line, #E6E2D8); padding-top: 8px; }
.sbh-todo-skipped > summary {
cursor: pointer; font-size: 12px; color: var(--con-muted, #8A90A0); list-style: none;
}
.sbh-todo-skipped > summary::-webkit-details-marker { display: none; }
.sbh-todo-skipped > summary::before { content: '▸ '; }
.sbh-todo-skipped[open] > summary::before { content: '▾ '; }
.sbh-todo-list li.is-skipped { color: var(--con-muted, #8A90A0); }
/* ------------------------------- 목록 한 줄, 좁은 화면 (v5.40.1)
설명글과 단추를 한 줄에 나란히 두면 폰에서 글에 남는 폭이 한 뼘도 안 된다.
게스트 신청의 「그 날 라운드가 없습니다 …」가 상자 밖으로 흘러나간 것이 그 경우다.
좁으면 아래로 내린다 — 글은 한 줄을 통째로 쓰고, 단추는 그 밑에 선다.
이 블록은 파일 맨 끝에 둔다: 위쪽의 .sbh-guest-row 규칙보다 뒤에 와야 세로로
세워 둔 단추를 다시 가로로 되돌릴 수 있다. */
@media (max-width: 560px) {
.sbh-con-item { flex-wrap: wrap; align-items: flex-start; }
.sbh-con-item-main { flex: 1 1 100%; min-width: 0; }
.sbh-con-item-acts { width: 100%; justify-content: flex-end; margin-top: 8px; }
.sbh-guest-row .sbh-con-item-acts { flex-direction: row; }
}
/* 목록 설명글은 어디서도 넘치지 않는다 — 긴 이름·주소가 들어와도 상자 안에서 끊긴다 */
.sbh-con-item .sbh-con-sub,
.sbh-con-item .sbh-con-title { overflow-wrap: anywhere; }
/* ------------------------------- 폼 안의 작은 묶음 (v5.41)
19홀처럼 「라운드의 일부지만 따로 떼어 보는」 칸들을 한 테두리 안에 넣는다.
같은 높이로 쭉 늘어선 칸 열넷 중에 어디까지가 19홀인지 눈으로 갈리지 않으면,
장소만 적고 주소를 빠뜨리는 일이 생긴다. */
.sbh-con-fs {
margin: 16px 0;
padding: 0 14px;
border: 1px solid var(--con-line);
border-radius: 12px;
background: var(--con-bg);
}
/* 제목 줄이 곧 손잡이다 (v5.41.2) — 접혀 있을 때는 이 줄만 남는다 */
.sbh-con-fs > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 0;
font-size: 13px;
font-weight: 700;
color: var(--con-gold);
cursor: pointer;
list-style: none;
user-select: none;
}
.sbh-con-fs > summary::-webkit-details-marker { display: none; }
.sbh-con-fs > summary::before {
content: '▸';
flex: none;
font-size: 11px;
color: var(--con-muted);
}
.sbh-con-fs[open] > summary::before { content: '▾'; }
.sbh-con-fs[open] > summary { border-bottom: 1px solid var(--con-line); margin-bottom: 10px; }
.sbh-con-fs > summary .sbh-muted { font-weight: 400; }
.sbh-con-fs > summary .sbh-con-pill { margin-left: 0; font-weight: 600; }
.sbh-con-fs > label:first-of-type { margin-top: 0; }
.sbh-con-fs > *:last-child { margin-bottom: 14px; }
/* 반송 목록 (v5.44) — 이름 · 주소 · 사유 · 지우기 한 줄 */
.sbh-con-list-plain { list-style: none !important; margin: 8px 0; padding: 0; }
.sbh-con-list-plain li {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
list-style: none !important;
padding: 8px 0; border-top: 1px solid var(--con-line); font-size: 13px;
}
.sbh-con-list-plain li::marker { content: '' !important; }
.sbh-con-list-plain li:first-child { border-top: 0; }
.sbh-con-list-plain li small { flex: 1 1 240px; min-width: 0; }
.sbh-con-list-plain li .sbh-con-btn { flex: none; margin-left: auto; }
/* 소속 고르기 목록 (v5.46.2).
표가 가로 스크롤 상자 안에 있어서 칸 안에 그리면 아래가 잘린다 — body 에 fixed 로 띄운다. */
.sbh-tagedit { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sbh-tagedit-caret {
flex: 0 0 auto; margin-left: auto; padding: 0 7px;
border: 1px solid #D7DAE2; border-radius: 6px;
background: #FFFFFF; color: #6B7280; font-size: 11px; line-height: 20px; cursor: pointer;
}
.sbh-tagedit-caret:hover { background: #F3F4F6; color: #111827; }
.sbh-tagedit-menu {
position: fixed; z-index: 9999;
max-width: 280px; max-height: 260px; overflow-y: auto;
padding: 5px; border: 1px solid #D7DAE2; border-radius: 10px;
background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 40, .16);
}
.sbh-tagedit-opt {
display: block; width: 100%; padding: 6px 9px;
border: 0; border-radius: 7px; background: transparent;
color: #111827; font-size: 13px; text-align: left; cursor: pointer;
}
.sbh-tagedit-opt:hover { background: #F3F4F6; }
/* 이미 붙어 있는 것은 체크 표시를 달고, 다시 누르면 빠진다 */
.sbh-tagedit-opt.is-on { font-weight: 700; color: #0F7B5F; }
.sbh-tagedit-opt.is-on::before { content: '✓ '; }
.sbh-tagedit-opt.is-new { margin-top: 3px; border-top: 1px solid #EEF0F4; color: #A38856; font-weight: 600; }
.sbh-tagedit-none { display: block; padding: 8px 9px; color: #8A90A0; font-size: 12.5px; }
/* 「초대 가능」 줄 · 합치기 막대 · 쪽 넘김 — 화면 머리 바로 아래 둘째 줄 (v5.47.2).
콘솔은 v4.38 부터 층층이 붙는 짜임을 갖고 있다:
관리자 막대 → 테마 머리줄 → 큰 칸 줄 → 딸린 화면 줄 → 화면 머리 → 이 줄 → 표 머리
높이는 JS 가 재서 --con-stick1 · --con-stick2 로 넘긴다. 이 덩어리는 --con-stick2 다.
앞선 판에서 이 자리를 제 나름대로 새로 만들었다가 콘솔 메뉴 뒤에 숨어 버렸다 —
테마 머리줄만 보고 그 아래 85px 에 붙였는데, 거기는 이미 콘솔의 두 줄 메뉴가 서 있는
자리였다. 이미 있는 짜임에 한 층으로 끼워 넣는 것이 맞다. */
@media (min-width: 782px) {
.sbh-con-stick {
position: sticky;
top: calc(var(--con-stick) + var(--con-stick1, 0px));
z-index: 29;
background: var(--con-bg);
box-shadow: 0 1px 0 var(--con-line);
}
}
/* 안쪽 줄의 margin 이 밖으로 새어 나가면 붙는 자리가 그만큼 어긋난다 —
padding 으로 막아 두고 margin 은 0 으로 (v5.47.2) */
.sbh-con-stick {
margin: 0;
padding: 8px 0 6px;
}
.sbh-con-stick > :first-child { margin-top: 0; }
.sbh-con-stick > :last-child { margin-bottom: 0; }
/* 참여 기록 안내 (v5.57) — 신청 표 위에 서는 한 덩이.
「거절」과 「취소」를 바꿔 누르면 패널티가 통째로 빠지므로, 누르기 전에 눈에 띄어야 한다.
경고처럼 붉게 하지는 않는다 — 늘 떠 있는 줄이라 붉으면 곧 안 보이게 된다. */
.sbh-conduct-hint {
margin: 0 0 14px;
padding: 10px 12px;
border-left: 3px solid var(--con-warn);
background: #FFFBF4;
border-radius: 0 6px 6px 0;
font-size: 13px;
line-height: 1.7;
color: #3D4450;
}
.sbh-conduct-hint b { color: #22262E; }
.sbh-conduct-hint .sbh-muted { display: block; margin: 6px 0 0; font-size: 12.5px; }
/* 「기록 없음」 단추 (v5.58) — 취소인데 참여 기록이 빠진 줄에만 선다.
경고색이되 빨갛지는 않게 — 잘못이 아니라 「채워야 할 칸」이라는 뜻이다. */
.sbh-con-btn.warn {
background: #FFF8EC;
border-color: #E3C88E;
color: var(--con-warn);
}
.sbh-con-btn.warn:hover { background: #FBEFD8; }
/* 신청 관리의 라운드 이름 — 누르면 그 라운드로 (v5.65) */
.sbh-rsvp-round { color: var(--con-ink, #23262F); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.18); }
.sbh-rsvp-round:hover { color: var(--con-gold, #A38856); border-bottom-color: currentColor; }
/* ------------------------------------------------------------------
* 표 머리를 눌러 정렬 (v5.66)
*
* 누를 수 있다는 것이 보여야 누른다. 화살표 자리는 늘 비워 두고(빈 ▲ 자리),
* 정렬 중인 칸에만 채운다 — 그러지 않으면 누를 때마다 머리글 폭이 흔들린다.
* ------------------------------------------------------------------ */
.sbh-tbl th.is-sortable,
.sbh-int-logtbl th.is-sortable {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.sbh-tbl th.is-sortable:hover,
.sbh-int-logtbl th.is-sortable:hover { color: var(--con-gold, #A38856); }
.sbh-tbl th.is-sortable:focus-visible,
.sbh-int-logtbl th.is-sortable:focus-visible { outline: 2px solid var(--con-gold, #A38856); outline-offset: -2px; }
.sbh-tbl th.is-sortable::after,
.sbh-int-logtbl th.is-sortable::after {
content: '↕';
margin-left: 4px;
font-size: 10px;
opacity: .28;
}
.sbh-tbl th.is-sorted[data-dir="asc"]::after,
.sbh-int-logtbl th.is-sorted[data-dir="asc"]::after { content: '▲'; opacity: .85; }
.sbh-tbl th.is-sorted[data-dir="desc"]::after,
.sbh-int-logtbl th.is-sorted[data-dir="desc"]::after { content: '▼'; opacity: .85; }
/* 발송·회신 기록 — 머리글을 칸 가운데로 (v5.66) */
.sbh-int-logtbl th { text-align: center; }
/* ------------------------------------------------------------------
* 폰에서는 딸린 글자를 늘 이름 아래로 (v5.71)
*
* 이 목록들은 한 줄 안에서 flex-wrap 으로 흘러간다. 그래서 주소가 짧으면 이름 옆에
* 붙고 길면 아래로 내려간다 — 같은 화면 안에서 줄마다 모양이 달라진다. 눈은 그것을
* 「어떤 줄이 다른가」로 읽으므로, 정보가 아닌 것에 눈이 한 번씩 걸린다.
*
* 그래서 폰에서는 늘 아래로 내린다. flex-basis 100% 면 반드시 줄이 바뀌고,
* 왼쪽 여백(체크박스 + 사이)만큼 들여 쓰면 이름 아래로 가지런히 선다.
* ------------------------------------------------------------------ */
@media (max-width: 767px) {
.sbh-notify-list label { align-items: flex-start; }
.sbh-notify-list .sbh-muted,
.sbh-notify-list .sbh-warn {
flex: 0 0 100%;
margin-left: 26px; /* 체크박스 18 + 사이 8 */
margin-top: 2px;
}
/* 프로모션 보낼 사람 고르기도 같은 모양이다 */
.sbh-int-one { align-items: flex-start; flex-wrap: wrap; }
.sbh-int-one .sbh-muted {
flex: 0 0 100%;
margin-left: 25px; /* 체크박스 18 + 사이 7 */
margin-top: 2px;
white-space: normal; /* 좁은 화면에서는 접히게 둔다 */
}
}
/* ============================================ 현장 사인 (v5.81)
미리 보는 것과 인쇄되는 것이 같은 그림이라야 한다. 그래서 화면에서도 종이 모양
그대로 그리고, 인쇄할 때는 그 종이만 남긴다.
종이는 가로 레터다 (11 × 8.5in). 조편성 사인은 글자가 커서 세로로는 안 들어가고,
근접·장타는 표 둘을 나란히 놓아야 한다. */
.sbh-sign-sheet { margin: 12px 0; }
.sbh-sign-page {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 920px;
aspect-ratio: 11 / 8.5;
margin: 0 auto 14px;
/* 미리보기의 여백을 종이와 같은 비율로 (v5.83.1).
인쇄는 0.3in / 0.45in 을 쓰는데 미리보기는 사방 4% 였다. 백분율 여백은 위아래도
폭을 기준으로 재므로, 위아래만 종이보다 1.5 배 두꺼웠다. 그래서 화면에서
꽉 차 보이게 줄 수를 맞추면 종이에서는 아래가 한 뼘 비었다.
0.3in / 11in = 2.73%, 0.45in / 11in = 4.09%. */
padding: 2.73% 4.09%;
background: #fff;
border: 1px solid var(--con-line, #E8E9EE);
border-radius: 8px;
overflow: hidden;
}
/* ── 조편성 사인 — 번호 · 큰 이름 · 네 분 · 로고 */
.sbh-sign-grp {
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 1.5%;
}
/* 조 번호는 왼쪽 위 구석에 (v5.82.1).
예전에는 제목과 같은 높이(26%)에 있었다. 그런데 제목을 이름줄보다 넓게 키우면서
제목이 번호 자리까지 뻗어 왔다 — 둘이 겹치지 않으려면 제목을 못 키운다.
번호를 구석으로 올리면 제목은 안쪽 폭을 다 쓰고, 번호도 멀리서 먼저 눈에 띈다. */
.sbh-sign-no {
position: absolute; left: 3%; top: 3%;
font-size: 3.6cqw; color: #111;
}
.sbh-sign-title {
margin: 0; font-weight: 900; line-height: 1.05;
/* 첫 크기일 뿐이다 — 자바스크립트가 아래 이름줄의 폭에 맞춰 다시 잡는다 (v5.82).
스크립트가 안 뜨면 이 크기 그대로 나온다. */
font-size: 12cqw; letter-spacing: -.02em; color: #111;
white-space: nowrap; text-align: center;
}
/* 조 이름과 조원 이름 사이는 떼어 둔다 (v5.83).
제목을 이름줄 폭에 맞춰 키우다 보니 글자가 커질수록 두 줄이 서로 붙어 보였다.
위쪽 여백을 따로 주어, 제목이 아무리 커져도 한 뼘은 남게 한다. */
.sbh-sign-who {
margin: 3.2% 0 0; font-size: 4.2cqw; color: #111;
word-break: keep-all; text-align: center;
}
/* 출발 시각 (v5.82.1) — 이름줄보다 한 단계 작고 연하게. 이름이 주인공이고 시각은 딸림말이다.
v5.83 에 3.2cqw 에서 30% 줄였다 — 이름과 크기가 비슷해 둘이 겨루어 보였다. */
.sbh-sign-tee {
margin: .4% 0 0; font-size: 2.24cqw; color: #444;
letter-spacing: -.01em; white-space: nowrap; text-align: center;
}
.sbh-sign-logo { max-width: 26%; max-height: 34%; object-fit: contain; margin-top: 1%; }
/* 글자 크기를 종이 폭에 맞춰 키운다 — 화면에서 줄어도 종이에서도 같은 비율로 보인다 */
.sbh-sign-page { container-type: inline-size; }
/* ── 근접 · 장타 사인 — 한 장에 두 표 */
/* 종이를 반으로 접었을 때 표가 접힌 쪽 한가운데에 오게 한다 (v5.82).
두 칸을 정확히 반반(50%)으로 나누고, 표를 그 안에서 가운데 두면 왼쪽 표의 중심이
종이의 1/4, 오른쪽 표의 중심이 3/4 에 선다. 칸 사이에 틈을 두면 그만큼 어긋난다. */
/* 좌우 여백을 두지 않는다 — 여백이 있으면 두 칸의 반이 종이의 반이 아니라
「여백 안쪽의 반」이 되어, 접었을 때 표가 한쪽으로 치우친다. 표 자체를 좁게(84%)
잡아 두었으므로 여백은 그것으로 충분하다. */
.sbh-sign-cnl { display: flex; gap: 0; align-items: flex-start; padding-left: 0; padding-right: 0; }
.sbh-sign-col { flex: 0 0 50%; max-width: 50%; min-width: 0; display: flex; flex-direction: column; }
.sbh-sign-tblwrap { width: 84%; margin: 0 auto; }
.sbh-sign-h {
margin: 0 0 2%; text-align: center; font-weight: 800;
font-size: 6cqw; letter-spacing: .1em; color: #111;
display: flex; align-items: center; justify-content: center; gap: .25em;
}
.sbh-sign-h-t { letter-spacing: .1em; }
/* 홀 번호는 동그라미 안에 (v6.22).
제목 옆에 숫자만 적으면 「장 타 17」이 한 낱말로 읽힌다. 동그라미로 감싸면 현장에서
멀리서도 홀 번호로 읽히고, 안 정한 홀은 빈 동그라미가 남아 펜으로 적을 자리가 된다.
글자 크기에 따라 같이 커지도록 em 으로 잡는다 — 인쇄 크기가 달라져도 원이 찌그러지지 않게. */
.sbh-sign-hole {
display: inline-flex; align-items: center; justify-content: center;
width: 1.5em; height: 1.5em;
border: .09em solid #111; border-radius: 50%;
font-size: .82em; line-height: 1; letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
/* 안 정한 홀 — 동그라미만 남겨 적을 자리를 준다 */
.sbh-sign-hole.is-blank { border-style: dashed; }
/* 남/여 표시는 홀 번호보다 작게 — 판을 구별하는 꼬리표이지 제목이 아니다 */
.sbh-sign-sex { font-size: .62em; letter-spacing: 0; font-weight: 700; }
/* 로고는 표 뒤로 연하게. 예전 엑셀 사인은 로고가 진해서 줄을 가렸고,
그러면 거리를 적을 자리가 안 보였다. 뒤에 깔고 흐리게 하면 둘 다 산다. */
.sbh-sign-tblwrap { position: relative; }
.sbh-sign-wm {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 78%; max-height: 80%; object-fit: contain;
opacity: .16;
pointer-events: none;
}
.sbh-sign-tbl {
position: relative; /* 워터마크 위에 줄이 오도록 */
width: 100%; border-collapse: collapse; background: transparent;
}
.sbh-sign-tbl th,
.sbh-sign-tbl td {
border: 1px solid #111; padding: 0; height: 2.6cqw;
background: transparent;
}
.sbh-sign-tbl th { font-size: 2.6cqw; font-weight: 800; color: #111; padding: .6% 0; }
/* 줄 높이를 두 배로 (v5.83.1) — 3cqw 로는 현장에서 이름을 적을 자리가 모자랐다.
손으로 쓰는 칸은 글자가 들어갈 만큼이 아니라 손이 움직일 만큼 커야 한다.
대신 줄 수를 줄인다 (SBH_Sign::ROWS) — 종이는 그대로이므로 둘 다 늘릴 수는 없다. */
.sbh-sign-tbl td { height: 6cqw; }
/* 이름 칸과 거리 칸을 엇비슷하게 — 이름은 넉 자, 거리는 숫자 몇 자라 반씩이면 넉넉하다 */
.sbh-sign-cname { width: 46%; }
.sbh-sign-note {
margin: 2% 0 0; text-align: center; font-size: 2cqw;
font-weight: 700; line-height: 1.5; color: #111; word-break: keep-all;
white-space: pre-line;
}
.sbh-sign-hint { line-height: 1.7; word-break: keep-all; }
.sbh-sign-notelab { display: block; margin: 10px 0; font-size: 12.5px; font-weight: 700; color: var(--con-muted); }
.sbh-console .sbh-sign-note-in { width: 100%; max-width: 520px; }
.sbh-club-logo { max-width: 90px; max-height: 54px; object-fit: contain; vertical-align: middle; }
.sbh-club-acts { display: inline-flex; gap: 6px; align-items: center; }
.sbh-club-acts label { cursor: pointer; margin: 0; }
/* ============================================ 인쇄 (v5.82)
자바스크립트가 인쇄할 종이를 몸통 바로 밑으로 옮겨 둔다. 그래서 여기서는
「몸통의 자식 가운데 그것만 남기고 없앤다」 한 줄이면 된다.
처음에는 옮기지 않고 자손 규칙으로 되살리려 했는데 (v5.81) 백지가 나왔다 —
display:none 은 윗대에 걸리면 아랫것을 되살릴 수 없다.
@page 여백을 0 으로 둔다. 여백이 있으면 브라우저가 그 자리에 제 머리글·바닥글
(날짜 · 문서 제목 · 주소 · 쪽번호)을 찍는다. 0 이면 찍을 자리가 없어 사라진다.
종이 안쪽 여백은 우리가 직접 준다. */
@media print {
@page { size: letter landscape; margin: 0; }
html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
body.sbh-printing > *:not(.sbh-sign-pane) { display: none !important; }
body.sbh-printing > .sbh-sign-pane { display: block !important; margin: 0; padding: 0; }
/* 종이에는 안내문·단추·문구칸이 따라가지 않는다 */
body.sbh-printing .sbh-sign-hint,
body.sbh-printing .sbh-sign-notelab,
body.sbh-printing .sbh-con-row { display: none !important; }
body.sbh-printing .sbh-sign-sheet { margin: 0; }
body.sbh-printing .sbh-sign-page {
max-width: none; width: 100%; aspect-ratio: auto;
/* @page 여백을 0 으로 두었으므로 안쪽 여백은 여기서 준다 */
height: 100vh; margin: 0; padding: 0.3in 0.45in;
box-sizing: border-box;
border: 0; border-radius: 0;
page-break-after: always; break-after: page;
overflow: hidden;
}
body.sbh-printing .sbh-sign-page:last-child { page-break-after: auto; break-after: auto; }
/* 근접·장타 사인만은 좌우 여백을 도로 뺀다 (v5.83.1).
*
* v5.82 에 「좌우 여백을 두지 않는다 — 있으면 접었을 때 표가 치우친다」고 해 놓고
* 바로 위 인쇄 규칙이 그것을 덮고 있었다. 화면에서는 표의 중심이 25% / 75% 에
* 정확히 섰는데 종이에서는 27.0% / 73.0% 였다 — 반으로 접으면 양쪽 표가
* 각각 0.2in 쯤 안쪽으로 밀린다. 접어서 세우는 사인이라 이것이 그대로 보인다.
*
* 화면 규칙이 아니라 인쇄 규칙끼리 겨루므로, 여기서 다시 0 으로 둔다. */
body.sbh-printing .sbh-sign-cnl { padding-left: 0; padding-right: 0; }
/* 연한 로고는 「색」이라 배경 인쇄를 끄면 날아간다 — 그대로 찍히게 못 박는다 */
body.sbh-printing .sbh-sign-wm,
body.sbh-printing .sbh-sign-tbl {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
}
/* ============================= 라운드 안내문 (v5.90) */
/* 상금 표는 좁게 — 항목·홀·금액뿐이라 화면 폭을 다 쓰면 칸 사이가 허전하다 */
.sbh-brief-tbl { max-width: 620px; }
.sbh-brief-tbl select,
.sbh-brief-tbl input[type="text"] { width: 100%; min-width: 0; }
.sbh-brief-tbl th:nth-child(2),
.sbh-brief-tbl th:nth-child(3) { width: 110px; }
.sbh-brief-tbl th:last-child { width: 48px; }
/* 본문은 길다 — 줄바꿈이 그대로 보여야 고칠 자리를 찾는다 */
.sbh-brief-body { font-family: var(--con-mono, ui-monospace, monospace); line-height: 1.7; white-space: pre; }
/* ============================= 설정 화면의 접는 설명 (v5.90.1) */
.sbh-con-why { margin: 2px 0 12px; }
/* 「설명」은 눌러 보는 것이지 읽는 것이 아니다 — 작고 흐리게 두어
설정 이름이 먼저 눈에 들어오게 한다. */
.sbh-con-why > summary {
display: inline-block;
cursor: pointer;
list-style: none;
font-size: 12px;
font-weight: 700;
color: var(--con-muted, #8A90A0);
padding: 2px 9px;
border: 1px solid var(--con-line, #E8E9EE);
border-radius: 999px;
user-select: none;
}
.sbh-con-why > summary::-webkit-details-marker { display: none; }
.sbh-con-why > summary::after { content: " ▾"; }
.sbh-con-why[open] > summary::after { content: " ▴"; }
.sbh-con-why > summary:hover { color: var(--con-gold, #A38856); border-color: var(--con-gold, #A38856); }
.sbh-con-why > summary:focus-visible { outline: 2px solid var(--con-gold, #A38856); outline-offset: 2px; }
/* 펼친 설명은 왼쪽에 줄을 그어 어느 설정에 딸린 말인지 보이게 */
.sbh-con-why > .sbh-con-hint {
margin: 8px 0 0;
padding-left: 10px;
border-left: 2px solid var(--con-line, #E8E9EE);
}
/* ============================= 도와주실 분들 (v5.91) */
.sbh-help { margin: 10px 0 4px; }
/* 왼쪽 명단은 줄지 않는다 — 얹는 것이지 옮기는 것이 아니다 */
.sbh-help-pool {
display: flex; flex-wrap: wrap; gap: 7px;
padding: 10px; margin-bottom: 12px;
background: var(--con-bg, #F6F7F9);
border: 1px solid var(--con-line, #E8E9EE);
border-radius: 10px;
}
.sbh-help-chip { cursor: grab; user-select: none; }
.sbh-help-chip.is-picked { outline: 2px solid var(--con-gold, #A38856); outline-offset: 1px; }
.sbh-help-chip.is-dragging { opacity: .35; }
.sbh-help-ghost {
position: fixed; z-index: 9999; pointer-events: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.sbh-help-cards { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sbh-help-card {
flex: 1 1 240px; min-width: 0;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--con-line, #E8E9EE);
border-radius: 10px;
}
/* 고른 이름이 있을 때는 놓을 자리가 어디인지 보여 준다 */
.sbh-help.is-picking .sbh-help-card { border-style: dashed; border-color: var(--con-gold, #A38856); }
.sbh-help-card.is-over { background: #FBF7EF; border-color: var(--con-gold, #A38856); }
.sbh-help-head { font-weight: 800; margin-bottom: 8px; }
.sbh-help-slots {
display: flex; flex-wrap: wrap; gap: 6px;
min-height: 38px;
padding: 6px;
border: 1px dashed var(--con-line, #E8E9EE);
border-radius: 8px;
}
.sbh-help-on { padding-right: 4px; }
.sbh-help-x {
margin-left: 4px; padding: 0 3px;
background: none; border: 0; cursor: pointer;
font-size: 13px; line-height: 1; color: var(--con-muted, #8A90A0);
}
.sbh-help-x:hover { color: #C0392B; }
/* 문구는 그 역할에 딸린 말이라 작게 — 카드에서 주인공은 이름이다 */
.sbh-help-text {
margin: 8px 0 0; font-size: 12px; line-height: 1.6;
color: var(--con-muted, #8A90A0); word-break: keep-all; white-space: pre-line;
}
/* 설정 화면의 역할 목록 (v5.91) */
.sbh-roles { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.sbh-role-row {
display: grid;
grid-template-columns: 22px minmax(120px, 200px) 1fr 40px;
gap: 8px; align-items: start;
}
.sbh-role-grip { cursor: grab; color: var(--con-muted, #8A90A0); user-select: none; padding-top: 10px; }
.sbh-role-row textarea { min-height: 52px; }
@media (max-width: 781px) {
.sbh-role-row { grid-template-columns: 22px 1fr 40px; }
.sbh-role-row textarea { grid-column: 2 / span 2; }
}
/* ============================= 설정 탭 (v5.93) */
.sbh-set-tabs {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 18px; padding-bottom: 12px;
border-bottom: 1px solid var(--con-line, #E8E9EE);
}
.sbh-set-tab {
cursor: pointer;
font-size: 13px; font-weight: 700;
color: var(--con-muted, #8A90A0);
background: var(--con-bg, #F6F7F9);
border: 1px solid var(--con-line, #E8E9EE);
border-radius: 999px;
padding: 7px 14px;
}
.sbh-set-tab:hover { color: var(--con-gold, #A38856); border-color: var(--con-gold, #A38856); }
.sbh-set-tab.is-on {
color: #fff;
background: var(--con-gold, #A38856);
border-color: var(--con-gold, #A38856);
}
.sbh-set-tab:focus-visible { outline: 2px solid var(--con-gold, #A38856); outline-offset: 2px; }
/* 저장 단추는 어느 탭에서나 아래에 남는다 — 탭마다 따로 저장하는 것이 아니다 */
.sbh-set-pane[hidden] { display: none; }
/* 할 일에서 찾아온 자리를 잠깐 밝혀 준다 (v5.94) — 긴 화면에서 어디로 왔는지 보이게 */
.is-hashed {
animation: sbh-hashed 2.2s ease-out;
scroll-margin-top: 16px;
}
@keyframes sbh-hashed {
0%, 55% { box-shadow: 0 0 0 3px var(--con-gold, #A38856); }
100% { box-shadow: 0 0 0 3px rgba(163, 134, 86, 0); }
}
/* ------------------------------------------------- 원정 기록 (v6.6) */
/* 지난 여행의 시간 × 날짜 격자.
*
* 열이 열둘까지 가므로 가로 스크롤을 허용한다 — 줄여서 다 보이게 만들면 글자가
* 읽을 수 없이 작아진다. 시각 칸만 왼쪽에 붙여 두면, 옆으로 밀어도 지금 몇 시 줄을
* 보고 있는지 놓치지 않는다. */
.sbh-trip-tabs { margin: 4px 0 14px; flex-wrap: wrap; }
.sbh-trip-warn { display: inline-block; margin: 0 0 14px; }
.sbh-trip-grid { font-size: 12px; }
.sbh-trip-grid th, .sbh-trip-grid td {
vertical-align: top;
padding: 6px 8px;
border: 1px solid var(--con-line, #E8E9EE);
}
.sbh-trip-grid thead th {
position: sticky; top: 0; z-index: 2;
background: var(--con-bg, #F6F7F9);
white-space: nowrap;
}
.sbh-trip-grid thead th .sbh-muted { display: block; font-weight: 400; font-size: 11px; }
.sbh-trip-grid .sbh-trip-t {
position: sticky; left: 0; z-index: 1;
background: var(--con-bg, #F6F7F9);
font-weight: 700; font-variant-numeric: tabular-nums;
white-space: nowrap; text-align: right;
}
.sbh-trip-grid thead .sbh-trip-t { z-index: 3; }
.sbh-trip-grid td { min-width: 108px; }
.sbh-trip-grid td.has { background: #FCFBF7; }
.sbh-trip-grid td b { display: block; font-weight: 600; }
.sbh-trip-grid td .sbh-muted { display: block; font-size: 11px; }
.sbh-trip-tbl { font-size: 13px; }
.sbh-trip-tbl td { font-variant-numeric: tabular-nums; }
/* 렌트카·숙소 메모는 엑셀 칸 하나에 줄바꿈으로 들어 있다 — 그 줄바꿈이 곧 구조라 살린다 */
.sbh-trip-note {
margin: 0 0 12px;
padding: 12px 14px;
background: var(--con-bg, #F6F7F9);
border: 1px solid var(--con-line, #E8E9EE);
border-radius: 8px;
font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: pre-wrap; word-break: break-word;
}
/* 안내문이 기본 그대로인가, 고친 것인가 (v6.16) */
.sbh-brief-mark {
margin: 10px 0 12px;
padding: 9px 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.6;
}
.sbh-brief-mark.is-default { background: #FFF6E7; border: 1px solid #F0DCB8; color: #8A6A20; }
.sbh-brief-mark.is-edited { background: #EEF6F0; border: 1px solid #CFE3D6; color: #1E6B44; }
.sbh-brief-mark .sbh-muted { color: inherit; opacity: .78; }
/* ── 후보 명단 (v6.21) ─────────────────────────────────────────────
「아직 연락은 안 했지만 불러 볼 만한 분」을 적어 두는 칸. 참가자 표와 나란히 서므로
같은 표 모양을 쓰되, 이 칸이 확정된 것이 아니라는 것이 보여야 한다 —
왼쪽에 점선 띠를 하나 두어 「아직 결정 전」을 말한다. */
.sbh-short { border-left: 3px dashed var(--con-gold); }
.sbh-short-tbl .sbh-short-note {
width: 100%;
min-width: 120px;
padding: 5px 7px;
font-size: 13px;
border: 1px solid var(--con-line);
border-radius: 7px;
}
.sbh-short-act { white-space: nowrap; }
.sbh-short-act .sbh-con-btn { margin: 2px 2px 2px 0; }
.sbh-short-none { margin: 10px 0; }
.sbh-short-add,
.sbh-short-pool-row,
.sbh-pool-new,
.sbh-pool-add,
.sbh-pool-name {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 8px;
margin-top: 12px;
}
.sbh-short-add label,
.sbh-short-pool-row label,
.sbh-pool-new label,
.sbh-pool-add label,
.sbh-pool-name label { flex: 1 1 220px; min-width: 0; }
/* 묶음 칸은 후보 칸 안에서 한 단 아래다 — 윗줄(이 라운드)과 아랫줄(다시 쓰는 묶음)을
가르는 선이 없으면 둘이 같은 일로 읽힌다. */
.sbh-short-pool {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--con-line);
}
.sbh-pool-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.sbh-pool-one {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--con-line);
}
/* ── 설정 화면 묶음 · 접기 (v6.30) ─────────────────────────────── */
.sbh-set-tabs { flex-wrap: wrap; }
.sbh-set-folds { margin-left: auto; display: inline-flex; gap: 6px; }
.sbh-set-folds .sbh-con-btn { padding: 6px 12px; font-size: 13px; }
.sbh-set-pane > .sbh-set-sec { margin: 0 0 14px; padding: 14px 16px; }
.sbh-set-sec > .sbh-con-h2 { font-size: 15px; margin: 0 0 10px; }
.sbh-set-sec.is-closed > .sbh-con-h2 { margin-bottom: 0; }
/* 묶음 안에 딸려 들어온 원래 제목(예: 「회원 문의」)은 접혔을 때 같이 숨는다 —
맨 앞 제목줄만 남긴다 */
.sbh-set-sec.is-closed > *:not(:first-child) { display: none !important; }
.sbh-set-sec > .sbh-con-h2 ~ .sbh-con-h2 { font-size: 14px; margin-top: 14px; }
/* ---------------------------------------------------------------- 라운드 투표 (v6.32) */
.sbh-pollbox { border-left: 3px solid var(--con-gold); }
.sbh-pa { border: 1px solid var(--con-line, #E4E6EC); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.sbh-pa.is-closed { background: #F7F7F9; }
.sbh-pa-q { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.sbh-pa-tbl td { vertical-align: middle; }
.sbh-pa-lab { min-width: 120px; }
.sbh-pa-n { width: 36px; text-align: right; }
.sbh-pa-bar { width: 120px; }
.sbh-pa-bar span { display: block; height: 6px; background: #EEF0F4; border-radius: 3px; overflow: hidden; }
.sbh-pa-bar i { display: block; height: 100%; background: var(--con-gold); }
.sbh-pa-who { font-size: 12px; }
.sbh-pa-miss { margin: 6px 0; font-size: 12.5px; }
.sbh-pa-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.sbh-pa-act input[type=text] { width: 140px; }
.sbh-pa-dl { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; white-space: nowrap; flex-wrap: wrap; }
.sbh-pa-dl input { width: auto; margin-top: 0; }
.sbh-pa-tbl [data-pa-dropopt] { padding: 2px 8px; font-size: 12px; }
.sbh-pa-new { margin-top: 12px; }
.sbh-pa-new summary { cursor: pointer; padding: 6px 0; }
.sbh-pa-new .sbh-con-lab { display: block; margin: 8px 0; }
.sbh-pa-new input[type=text], .sbh-pa-new textarea { width: 100%; box-sizing: border-box; }
.sbh-pa-flags { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 6px 0; }
.sbh-pa-tpl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
@media (max-width: 600px) { .sbh-pa-bar { width: 50px; } }
/* v6.33 — 투표 결과표가 사이트 표 규칙(가운데 정렬·넓은 칸)에 끌려가지 않게 */
.sbh-pa-tbl { width: 100%; table-layout: auto; }
.sbh-pa-tbl td { text-align: left !important; padding: 6px 8px; }
.sbh-pa-tbl td.sbh-pa-lab { width: 28%; }
.sbh-pa-tbl td.sbh-pa-n { width: 36px; text-align: right !important; }
.sbh-pa-tbl td.sbh-pa-bar { width: 130px; }
.sbh-pa-tbl td:last-child { width: 1%; white-space: nowrap; }
.sbh-pa-send { margin-top: 8px; }
.sbh-status-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--con-warn); font-weight: 400; }
/* ---------------------------------------------------------------- 방문 통계 펼치기 (v6.40) */
tr.sbh-vd-row { cursor: pointer; }
tr.sbh-vd-row:hover td { background: #FAF8F2; }
/* 펼침 표시는 글자가 아니라 테두리로 그린 꺾쇠다 (v6.42) — 「▸」가 테마 글꼴에서
점 하나로 찍혀, 누를 수 있는 줄인지 보이지 않았다. */
.sbh-vd-caret {
display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; vertical-align: middle;
border-right: 2px solid var(--con-gold); border-bottom: 2px solid var(--con-gold);
transform: rotate(-45deg); transition: transform .15s;
}
tr.sbh-vd-open .sbh-vd-caret { transform: rotate(45deg); }
tr.sbh-vd-row td:first-child { white-space: nowrap; }
tr.sbh-vd-open td { background: #F7F3E8; }
tr.sbh-vd-detail > td { background: #FCFBF8; padding: 12px 14px !important; text-align: left !important; }
.sbh-vd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sbh-vd-h { margin: 0 0 6px; font-weight: 700; font-size: 13px; color: var(--con-ink); }
.sbh-vd-list { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; font-size: 13px; line-height: 1.7; }
.sbh-vd-list li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sbh-vd-list li::before { content: none !important; }
.sbh-vd-list code { font-size: 12px; overflow-wrap: anywhere; }
.sbh-vd-tbl { width: 100%; font-size: 13px; border-collapse: collapse; }
.sbh-vd-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--con-line); text-align: left; }
.sbh-vd-hint { margin: 4px 0 0; }
@media (max-width: 700px) { .sbh-vd-grid { grid-template-columns: 1fr; } }
/* 로그 — 누가 한 줄인가 거르기 (v6.40) */
.sbh-log-by { display: inline-flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
/* 거르개 줄의 체크칸은 한 줄 가운데에 선다 (v6.41) — 폼용 .sbh-con-chk 의 위아래 여백과
윗선 맞춤 때문에 「이메일 있음」과 「운영진·자동·시스템」이 서로 다른 높이에 섰다. */
.sbh-con-filters { align-items: center; }
.sbh-con-filters .sbh-con-chk { margin: 0; align-items: center; white-space: nowrap; }
.sbh-con-filters .sbh-log-by { padding-left: 12px; border-left: 1px solid var(--con-line); }
/* v6.43 — 로그인 안 한 방문 IP·위치 */
.sbh-vd-ips li { font-size: 12.5px; line-height: 1.5; }
.sbh-vd-ips code { font-size: 12px; }
.sbh-vd-note { font-size: 11.5px; margin-top: 4px; }
/* v6.44 — 방문 통계 전체 접기 (떠 있는 단추) */
.sbh-stack-fab[data-vdfold] { background: #fff; color: var(--con-gold); border: 1px solid var(--con-gold); }
.sbh-stack-fab[data-vdfold]:disabled { opacity: .35; cursor: default; filter: none; }
.sbh-vd-grid > div { min-width: 0; }
.sbh-vd-ips li { white-space: normal !important; overflow-wrap: anywhere; }
.sbh-vd-ips li .sbh-muted { display: block; }
/* v6.45 — 관리자 기록 제외 */
.sbh-con-filters .sbh-log-xa { padding-left: 12px; border-left: 1px solid var(--con-line); }
.sbh-vd-filters { margin: 0 0 6px; }
/* v6.45 — 관리 화면 빠른 찾기 */
.sbh-find { position: relative; max-width: 420px; margin: 0 auto 10px; }
.sbh-find-q { width: 100%; box-sizing: border-box; height: 36px; padding: 0 34px 0 34px !important; border: 1px solid var(--con-line) !important;
border-radius: 18px !important; background: #fff; font-size: 14px; outline: none; }
.sbh-find-q:focus { border-color: var(--con-gold) !important; box-shadow: 0 0 0 3px rgba(166,137,82,.15); }
.sbh-find-q::-webkit-search-cancel-button { display: none; }
.sbh-find-ico { position: absolute; left: 12px; top: 10px; color: #8a8f99; pointer-events: none; }
.sbh-find-kbd { position: absolute; right: 12px; top: 8px; font: 11px/18px ui-monospace, monospace; color: #8a8f99;
border: 1px solid var(--con-line); border-radius: 4px; padding: 0 5px; background: #fafafa; pointer-events: none; }
.sbh-find-q:focus ~ .sbh-find-kbd { display: none; }
.sbh-find-list { position: absolute; z-index: 60; left: 0; right: 0; top: 40px; margin: 0 !important; padding: 4px 0 !important;
list-style: none !important; background: #fff; border: 1px solid var(--con-line); border-radius: 10px;
box-shadow: 0 8px 24px rgba(20,30,50,.14); max-height: 60vh; overflow-y: auto; text-align: left; }
.sbh-find-list li { list-style: none !important; margin: 0 !important; padding: 7px 14px !important; cursor: pointer;
display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sbh-find-list li::before { content: none !important; }
.sbh-find-list li.is-on, .sbh-find-list li[data-i]:hover { background: #F6F1E6; }
.sbh-find-l { font-size: 14px; color: var(--con-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbh-find-p { font-size: 12px; color: #8a8f99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.sbh-find-none { color: #8a8f99; font-size: 13px; cursor: default !important; }
.sbh-find-flash { animation: sbhFindFlash 2s ease-out; }
@keyframes sbhFindFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--con-gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 600px) { .sbh-find { margin: 0 12px 8px; } .sbh-find-kbd { display: none; } }
/* v6.46 — 19홀 간 날 */
.sbh-vn-days { display: block; min-width: 140px; max-width: 260px; line-height: 1.6; }
.sbh-vn-more { display: inline; }
.sbh-vn-more summary { display: inline; cursor: pointer; color: var(--con-gold); list-style: none; }
.sbh-vn-more summary::-webkit-details-marker { display: none; }
/* v6.47 — 19홀 모으기 알림 */
.sbh-con-note.ok { background: #EAF6F0; border: 1px solid #BFE3D0; color: #16623F; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.sbh-vn-gcal { border-bottom: 1px dotted #8a8f99; color: #5b6170; cursor: help; }
/* v6.50 — 19홀 합치기 */
#sbh-venue-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#sbh-vm-name { width: 320px !important; max-width: 100%; min-width: 200px; margin: 0 !important; }
.sbh-vn-alias { list-style: none !important; padding: 0 !important; margin: 0 0 12px !important; font-size: 13.5px; }
.sbh-vn-alias li { list-style: none !important; margin: 0 0 6px !important; padding: 0 !important; }
.sbh-vn-alias li::before { content: none !important; }
.sbh-vn-alias .sbh-con-btn { margin-left: 8px; padding: 2px 10px; font-size: 12px; }
/* v6.53 — 받을 사람 몇 명 */
.sbh-notify-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sbh-notify-count { margin-left: 6px; padding: 6px 12px; border: 1px solid var(--con-gold); border-radius: 8px; background: #FBF7EE; font-size: 13.5px; color: var(--con-ink); }
.sbh-notify-count b { color: var(--con-gold); font-size: 15px; }
/* 누가 장부를 보나 — 표 (v6.70) */
.sbh-book-whotable { margin: 10px 0; }
.sbh-book-whotable td { vertical-align: middle; }
.sbh-book-whotable select { width: auto; min-width: 120px; }
.sbh-book-who .sbh-con-row select { width: auto; flex: 0 1 320px; }
.sbh-book-whoadd select { width: auto; flex: 1 1 200px; }
.sbh-con-pill.ok { background: #DDF1E6; color: #17623E; }
/* 소식 (v6.73) */
.sbh-news-ribbon { max-width: 760px; margin: 0 auto 10px; background: #FFF4D6; color: #6B4E12; border-radius: 10px; padding: 8px 14px; font-size: 13px; text-align: center; }
.sbh-news-locked { max-width: 640px; margin: 0 auto; }
.sbh-news-teaser { background: #17402F; color: #fff; border-radius: 16px; padding: 22px; margin-bottom: 14px; }
.sbh-news-teaser .sbh-con-h2 { color: #fff; margin: 6px 0; }
.sbh-news-teaser .sbh-muted { color: #D9C38B; }
.sbh-news-teaser p { color: #DCE8E0; margin: 0; }
.sbh-news-why { font-size: 15px; }
.sbh-news-relink { background: #fff; border: 1px solid #E4E8E5; border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.sbh-news-relink input[type=email] { flex: 1 1 220px; }
.sbh-news-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.sbh-news-list a { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid #E4E8E5; border-radius: 14px; padding: 12px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.sbh-news-list a:hover { box-shadow: 0 8px 20px rgba(23,64,47,.10); transform: translateY(-1px); }
.sbh-news-list a:not(:has(img)) { grid-template-columns: 1fr; }
.sbh-news-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #EEF4F0; }
.sbh-news-thumb.is-wide { max-width: 640px; margin: 0 auto 12px; border-radius: 16px; }
.sbh-news-tx { display: grid; gap: 3px; min-width: 0; }
.sbh-news-tx b { font-size: 16px; line-height: 1.4; }
@media (max-width: 560px) { .sbh-news-list a { grid-template-columns: 1fr; gap: 10px; } }
.sbh-news-admin { max-width: 760px; margin: 0 auto 14px; }
.sbh-news-confirm { background: #FDEDEA; border-radius: 10px; padding: 10px 14px; margin-top: 10px; }
/* 내 포인트 (v6.82) */
.sbh-pts-page { max-width: 820px; margin: 0 auto; }
.sbh-pts-hero { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; background: linear-gradient(160deg,#1E5A40,#17402F 60%,#0F2C20); color: #fff; border-radius: 18px; padding: 20px 22px; margin: 6px 0 16px; }
.sbh-pts-kick { font-size: 12px; letter-spacing: .08em; color: #D9C38B; font-weight: 700; }
.sbh-pts-hero h2 { color: #fff; margin: 4px 0 2px; font-size: 20px; }
.sbh-pts-big b { font-size: 46px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sbh-pts-big span { margin-left: 4px; color: #DCE8E0; }
.sbh-pts-rank { margin: 4px 0 0; color: #DCE8E0; }
.sbh-pts-rank b { color: #F3DFA8; }
.sbh-pts-season select { border-radius: 999px; padding: 6px 12px; border: 0; }
.sbh-pts-sec { background: #fff; border: 1px solid #E4E8E5; border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.sbh-pts-sec h3 { margin: 0 0 10px; font-size: 16px; color: #17402F; }
.sbh-pts-stack { display: flex; height: 16px; border-radius: 9px; overflow: hidden; background: #EEF0EE; }
.sbh-pts-stack i { display: block; height: 100%; }
.sbh-pts-groups { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; }
.sbh-pts-groups li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sbh-pts-groups .dot { width: 10px; height: 10px; border-radius: 3px; }
.sbh-pts-groups b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sbh-pts-page .neg { color: #B23B2A; }
.sbh-pts-trend { width: 100%; height: auto; display: block; }
.sbh-pts-days { display: grid; gap: 8px; }
.sbh-pts-day { border: 1px solid #EEF0EE; border-radius: 12px; padding: 10px 12px; }
.sbh-pts-day summary { display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; }
.sbh-pts-day summary::-webkit-details-marker { display: none; }
.sbh-pts-day .d { font-size: 13px; color: #6B746F; flex: 0 0 auto; }
.sbh-pts-day .w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbh-pts-day summary b { color: #17623E; font-variant-numeric: tabular-nums; }
.sbh-pts-day ul { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed #E4E8E5; display: grid; gap: 6px; }
.sbh-pts-day li { display: flex; gap: 10px; justify-content: space-between; font-size: 14px; }
.sbh-pts-day li small { display: block; color: #6B746F; font-size: 12px; }
.sbh-pts-day li b { color: #17623E; white-space: nowrap; }
.sbh-pts-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sbh-pts-top li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; }
.sbh-pts-top li.me { background: #FFF4D6; font-weight: 700; }
.sbh-pts-top .r { width: 26px; text-align: center; color: #6B746F; font-variant-numeric: tabular-nums; }
.sbh-pts-top .n { flex: 1; }
.sbh-pts-top b { font-variant-numeric: tabular-nums; }
/* 라운드 포인트 체크 (v7.2) */
.sbh-ptbox-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.sbh-ptbox-table{min-width:720px}
.sbh-ptbox-table th{font-size:12px;line-height:1.25;text-align:center;white-space:nowrap}
.sbh-ptbox-table td{text-align:center}
.sbh-ptbox-table td:first-child,.sbh-ptbox-table th:first-child{text-align:left;white-space:nowrap;position:sticky;left:0;background:#fff;z-index:1}
.sbh-ptbox-n{width:48px;padding:4px 6px;text-align:center}
.sbh-ptbox-table input[type=checkbox]{width:18px;height:18px}