/* SBH Rounds — 클럽하우스 게이트
   Betheme 컨테이너 안에서 동작. 글꼴은 테마를 상속하지 않고 여기서 정한다
   (Noto 한 집안 세 벌: Noto Sans · Noto Sans Mono · Noto Sans KR).
   테마 설정이 바뀌어도 회원 화면은 늘 같은 얼굴이라야 하기 때문이다. */

.sbh-gate {
    /* 라틴은 Noto Sans, 한글은 Noto Sans KR — 같은 뼈대라 한 낱말에 섞여도 어긋나지 않는다 */
    --sbh-body: 'Noto Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
    --sbh-disp: 'Noto Sans', 'Noto Sans KR', sans-serif;
    /* 시각·금액·자릿수. 폭이 고정이라 표에서 숫자가 흔들리지 않는다 */
    --sbh-mono: 'Noto Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sbh-gold: #A38856;
    --sbh-lav: #E6E6FA;
    --sbh-blue: #0089F7;
    --sbh-green: #2E9E5B;
    --sbh-amber: #E0A32E;
    --sbh-grey: #B4B4B4;
    --sbh-ink: #1F2430;
    --sbh-muted: #7A8090;
    --sbh-line: #E4E6EC;
    --sbh-bg: #FFFFFF;

    max-width: 760px;
    margin: 0 auto;
    color: var(--sbh-ink);
    font-family: var(--sbh-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.sbh-gate input,
.sbh-gate select,
.sbh-gate textarea,
.sbh-gate button { font-family: var(--sbh-body); }

.sbh-card {
    background: var(--sbh-bg);
    border: 1px solid var(--sbh-line);
    border-radius: 14px;
    padding: 26px 22px;
    box-shadow: 0 1px 3px rgba(31, 36, 48, .05);
}

.sbh-card-title {
    margin: 0 0 6px;
    font-family: var(--sbh-disp);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;      /* 제목의 무게는 굵기로 낸다 */
    letter-spacing: -.01em;
    color: var(--sbh-ink);
}

.sbh-muted { color: var(--sbh-muted); font-size: 14px; margin: 0 0 18px; }
.sbh-center { text-align: center; }

/* ------------------------------------------------------------- 폼 요소 */

.sbh-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sbh-muted);
    margin: 0 0 6px;
}

.sbh-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;              /* iOS 자동 확대 방지 */
    line-height: 1.4;
    color: var(--sbh-ink);
    background: #fff;
    border: 1px solid var(--sbh-line);
    border-radius: 9px;
    margin: 0 0 12px;
}
.sbh-input:focus {
    outline: none;
    border-color: var(--sbh-gold);
    box-shadow: 0 0 0 3px rgba(163, 136, 86, .15);
}

/* 테마(Betheme)가 input 에 큰 min-width·padding 을 걸어 두기 때문에
   1fr(= minmax(auto,1fr)) 로는 칸이 내용 최소폭 아래로 줄지 않아 카드를 뚫고 나간다.
   minmax(0,1fr) 로 바닥을 열어 주고, 칸 자체의 폭·여백도 여기서 다시 못 박는다. */
.sbh-gate .sbh-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0 0 18px;
}

.sbh-gate .sbh-otp-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1.18;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--sbh-ink);
    background: #FBFBFD;
    border: 1.5px solid var(--sbh-line);
    border-radius: 11px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    -moz-appearance: textfield;
}
.sbh-gate .sbh-otp-box::-webkit-outer-spin-button,
.sbh-gate .sbh-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@supports not (aspect-ratio: 1 / 1) {
    .sbh-gate .sbh-otp-box { height: 56px !important; }
}

.sbh-gate .sbh-otp-box:focus {
    outline: none;
    background: #fff;
    border-color: var(--sbh-gold);
    box-shadow: 0 0 0 3px rgba(163, 136, 86, .18);
}
.sbh-gate .sbh-otp-box:not(:placeholder-shown),
.sbh-gate .sbh-otp-box:valid { background: #fff; }

.sbh-btn {
    display: inline-block;
    width: 100%;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
}
.sbh-btn:disabled { opacity: .45; cursor: default; }

.sbh-btn-primary { background: var(--sbh-gold); color: #fff; }
.sbh-btn-primary:hover:not(:disabled) { background: #92794b; }

.sbh-btn-ghost {
    background: #fff;
    color: var(--sbh-muted);
    border-color: var(--sbh-line);
}
.sbh-btn-ghost:hover:not(:disabled) { border-color: var(--sbh-grey); color: var(--sbh-ink); }

.sbh-btn-link {
    width: auto;
    background: none;
    border: none;
    padding: 8px 0;
    color: var(--sbh-muted);
    font-weight: 500;
    text-decoration: underline;
}

.sbh-msg { min-height: 20px; margin: 12px 0 0; font-size: 14px; }
.sbh-msg.ok { color: var(--sbh-green); }
.sbh-msg.err { color: #C0392B; }

.sbh-consent {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sbh-line);
    font-size: 12px;
    color: var(--sbh-muted);
}
.sbh-consent a { color: var(--sbh-gold); }

/* ------------------------------------------------------------- 캘린더 */

.sbh-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
}
/* 제목 자체가 연·월 선택기다. 테마가 select 에 거는 폭·높이·배경을 모두 눌러 둔다. */
.sbh-gate .sbh-cal-jump {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.sbh-gate select.sbh-cal-title {
    margin: 0 !important;
    padding: 4px 26px 4px 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    font-size: 19px !important;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--sbh-ink);
    background-color: transparent !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--sbh-muted) 50%),
                      linear-gradient(135deg, var(--sbh-muted) 50%, transparent 50%);
    background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid transparent !important;
    border-radius: 9px;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    text-align-last: center;
}

.sbh-gate select.sbh-cal-title:hover  { background-color: #F7F8FA !important; }
.sbh-gate select.sbh-cal-title:focus  { outline: none; border-color: var(--sbh-gold) !important; }

.sbh-gate .sbh-cal-go {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--sbh-ink);
    background: #F7F8FA;
    border: 1px solid var(--sbh-line);
    border-radius: 8px;
    cursor: pointer;
}

.sbh-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--sbh-muted);
    text-decoration: none;
    background: #F7F8FA;
}
.sbh-nav:hover { background: var(--sbh-lav); color: var(--sbh-ink); }

.sbh-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.sbh-dow {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--sbh-muted);
    padding: 4px 0 8px;
}
.sbh-dow.sun { color: #D05A5A; }
.sbh-dow.sat { color: #5A7AD0; }

.sbh-cell {
    position: relative;
    min-height: 80px;
    border-radius: 12px;
    background: #FCFCFD;
    border: 1px solid #EEEFF3;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.sbh-cell.empty { background: none; border-color: transparent; }

/* 이 달 바깥 칸 (v6.20).
   전에는 앞줄이 통째로 빈칸이었고 뒷줄은 아예 없었다. 이제 지난달 말·다음 달 초가
   제자리에 들어온다. 살짝 흐리게 해서 「이 달 것은 아니다」가 보이게 하되, 0.62 까지만 —
   더 흐리면 읽으라고 넣어 놓고 못 읽게 된다. 손을 올리면 또렷해진다. */
.sbh-cell.is-out > *       { opacity: .62; }
.sbh-cell.is-out:hover > * { opacity: 1; }
/* 「8/30」은 한 글자 더 길다 — 좁은 칸에서 넘치지 않게 조금 줄인다 */
.sbh-cell.is-out .sbh-daynum { font-size: .82em; }

/* 라운드가 있는 날은 왼쪽에 상태색 띠 */
.sbh-cell.has-round::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--sbh-grey);
}
.sbh-cell.green::before { background: var(--sbh-green); }
.sbh-cell.amber::before { background: var(--sbh-amber); }

.sbh-cell.green { background: linear-gradient(180deg, rgba(46,158,91,.07), rgba(46,158,91,.02)); border-color: rgba(46,158,91,.22); }
.sbh-cell.amber { background: linear-gradient(180deg, rgba(224,163,46,.09), rgba(224,163,46,.03)); border-color: rgba(224,163,46,.26); }
.sbh-cell.grey  { background: #F6F6F8; }

.sbh-cell.today { border-color: var(--sbh-gold); box-shadow: inset 0 0 0 1px var(--sbh-gold); }
.sbh-cell.has-round:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31,36,48,.10); }

.sbh-day {
    display: block;
    height: 100%;
    padding: 7px 7px 8px 9px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.sbh-daynum {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sbh-muted);
    letter-spacing: .01em;
}
.sbh-cell.today .sbh-daynum { color: var(--sbh-gold); }
.sbh-cell.has-round .sbh-daynum { color: var(--sbh-ink); }

/* 토요일은 파랑, 일요일과 미국 공휴일은 빨강.
   요일 머리글(.sbh-dow)과 같은 색을 써서 한 화면에서 규칙이 하나로 읽히게 한다.
   has-round / today 보다 뒤에 두어야 라운드가 있는 날에도 색이 유지된다. */
.sbh-cell .sbh-daynum.sat,
.sbh-cell.has-round .sbh-daynum.sat { color: #2F6FD0; }

.sbh-cell .sbh-daynum.sun,
.sbh-cell.has-round .sbh-daynum.sun { color: #D7443E; }

.sbh-cell.today .sbh-daynum.sat,
.sbh-cell.today .sbh-daynum.sun { color: var(--sbh-gold); }

.sbh-holi {
    display: block;
    margin-top: 1px;
    font-size: 9.5px;
    line-height: 1.25;
    font-weight: 600;
    color: #D7443E;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbh-ev { display: block; margin-top: 4px; }

.sbh-ev-name {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--sbh-ink);
    word-break: keep-all;      /* 한글은 어절 단위로 끊는다 */
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sbh-cell.grey .sbh-ev-name { color: var(--sbh-muted); font-weight: 600; }

.sbh-ev-meta {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    line-height: 1.3;
    color: var(--sbh-muted);
    font-variant-numeric: tabular-nums;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sbh-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    background: #EDEDF0;
    color: var(--sbh-muted);
    white-space: nowrap;
}
.sbh-chip.green { background: rgba(46,158,91,.16); color: #1B6B3B; }
.sbh-chip.amber { background: rgba(224,163,46,.20); color: #8A6210; }

.sbh-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--sbh-line);
    font-size: 12px;
    color: var(--sbh-muted);
}
.sbh-legend li { display: flex; align-items: center; gap: 6px; }
.sbh-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sbh-legend i.green { background: var(--sbh-green); }
.sbh-legend i.amber { background: var(--sbh-amber); }
.sbh-legend i.grey  { background: var(--sbh-grey); }

.sbh-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--sbh-line);
    font-size: 13px;
    color: var(--sbh-muted);
}
.sbh-who { font-weight: 600; color: var(--sbh-ink); }

/* --------------------------------------------------------------- 상세 */

.sbh-meta {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 8px 14px;
    margin: 18px 0;
    padding: 16px 0;
    border-top: 1px solid var(--sbh-line);
    border-bottom: 1px solid var(--sbh-line);
    font-size: 14px;
}
.sbh-meta dt { color: var(--sbh-muted); font-weight: 600; margin: 0; }
.sbh-meta dd { margin: 0; }
.sbh-maplink { display: inline-block; margin-left: 8px; color: var(--sbh-blue); font-size: 13px; }

.sbh-notes { font-size: 14px; }
.sbh-body { margin: 20px 0; }
.sbh-body h2, .sbh-body h3 { margin: 22px 0 10px; font-size: 17px; font-weight: 700; }
.sbh-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.sbh-body th, .sbh-body td { padding: 9px 10px; border-bottom: 1px solid var(--sbh-line); text-align: left; }
.sbh-body th { background: #FAFAFC; font-weight: 600; color: var(--sbh-muted); }

.sbh-notice {
    margin: 16px 0;
    padding: 13px 15px;
    border-radius: 9px;
    background: #F7F8FA;
    border-left: 3px solid var(--sbh-grey);
    font-size: 14px;
}
.sbh-notice.warn { background: rgba(224, 163, 46, .10); border-left-color: var(--sbh-amber); }

.sbh-actions { margin: 20px 0 0; }
.sbh-pill {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    background: #F2F2F4;
    color: var(--sbh-muted);
}

.sbh-back { margin: 22px 0 0; font-size: 14px; }
/* 맨 위로 올린 자리 (v5.5) — 제목 위에 붙으므로 여백을 뒤집는다 */
.sbh-back.is-top { margin: 0 0 14px; }
.sbh-back a { color: var(--sbh-muted); text-decoration: none; }
.sbh-back a:hover { color: var(--sbh-gold); }

/* --------------------------------------------------------- 열람 불가 안내 */

.sbh-denied { text-align: center; padding: 46px 22px; }
.sbh-denied-main {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--sbh-ink);
}
.sbh-denied .sbh-muted { margin-bottom: 0; }

/* ------------------------------------------------------------- 반응형 */

@media (max-width: 560px) {
    /* 조 편성 같은 표는 줄바꿈으로 뭉개지 말고 가로 스크롤 */
    .sbh-body table { display: block; overflow-x: auto; white-space: nowrap; }
    .sbh-card { padding: 20px 14px; border-radius: 12px; }
    .sbh-cal-grid { gap: 4px; }
    .sbh-cell { min-height: 60px; border-radius: 10px; }
    .sbh-day { padding: 5px 4px 6px 7px; }
    .sbh-ev-name { font-size: 9.5px; -webkit-line-clamp: 1; }
    .sbh-ev-meta, .sbh-chip { display: none; }
    .sbh-otp { gap: 6px; }
    .sbh-otp-box { font-size: 21px; border-radius: 9px; }
    .sbh-meta { grid-template-columns: 72px 1fr; }
}

/* ------------------------------------------------------ v3.1 내 조 (승인자) */

.sbh-mygroup {
    margin: 18px 0 22px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #F2FBF7 0%, #EAF6FF 100%);
    border: 1px solid #CBE7DC;
}

.sbh-mygroup-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* 「내 조」라는 이름표 — 옆의 조 이름이 값처럼 읽히게 (v5.89) */
.sbh-mygroup-lab {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #4A6B60;
    background: rgba(255, 255, 255, .8);
    border-radius: 999px;
    padding: 3px 9px;
}

.sbh-mygroup-no {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F7B5F;
}

.sbh-mygroup-tee,
.sbh-mygroup-cart {
    font-size: 13px;
    font-weight: 600;
    color: #3B4A57;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 3px 10px;
}

.sbh-mygroup-with {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #24303B;
    word-break: keep-all;
}

.sbh-mygroup-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: #5B6B78;
    word-break: keep-all;
}

/* ------------------------------------------ v3.2 로그인 유지 · 게스트 등록 */

.sbh-gate .sbh-remember {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    cursor: pointer;
    user-select: none;
}

.sbh-gate .sbh-remember input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    flex: none;
    accent-color: var(--sbh-gold);
    cursor: pointer;
}

.sbh-gate .sbh-remember span {
    font-size: 14px;
    line-height: 1.45;
    color: var(--sbh-ink);
    word-break: keep-all;
}

.sbh-gate .sbh-remember em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--sbh-muted);
}

.sbh-gate .sbh-signup-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--sbh-ink);
    word-break: keep-all;
}

.sbh-gate .sbh-signup-done {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #F2FBF7;
    border: 1px solid #CBE7DC;
}

.sbh-gate .sbh-signup-check {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0F7B5F;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.sbh-gate .sbh-signup-done p {
    margin: 2px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #24303B;
    word-break: keep-all;
}

/* ==================================================== 글꼴 (v4.14)
   Noto 한 집안 세 벌. 역할을 나눠 쓴다:

     Noto Sans      — 라틴 글자·숫자. 크게 세우는 자리도 이것으로 굵기만 올려 쓴다.
     Noto Sans Mono — 시각·금액·자릿수·작은 라벨. 폭이 고정이라 표에서 숫자가 흔들리지 않는다.
     Noto Sans KR   — 한글 전부.

   테마 글꼴을 상속하던 것을 여기서 끊는다 — Betheme 설정이 바뀌어도 회원 화면은
   늘 같은 얼굴이라야 한다. */

/* 날짜 숫자·큰 수 */
.sbh-daynum,
.sbh-cal-title,
.sbh-otp-box,
.sbh-mygroup-no {
    font-family: var(--sbh-disp);
    font-weight: 800;      /* Anton 대신 Noto Sans 를 쓰므로 굵기로 무게를 낸다 */
    letter-spacing: -.01em;
}

/* 라벨·시각·자릿수.
   한글 문장이 들어가는 자리(지도에서 열기·돌아가기·상태 알약)에는 쓰지 않는다 —
   모노는 라틴만 받고 한글은 어차피 딴 글꼴로 흘러가서 한 줄에 두 얼굴이 섞인다. */
.sbh-meta dt,
.sbh-dow,
.sbh-mygroup-tee,
.sbh-mygroup-cart,
.sbh-body th {
    font-family: var(--sbh-mono);
    font-weight: 700;
    letter-spacing: .04em;
}

/* 시각은 라벨보다 크게 잡히므로 자간을 조금 풀어 준다 */
.sbh-mygroup-tee,
.sbh-mygroup-cart { letter-spacing: .02em; }

/* 참가자·안내문은 읽는 글이라 본문 글꼴 그대로 */
.sbh-people,
.sbh-notes { font-family: var(--sbh-body); }

/* 표 안의 숫자 칸 */
.sbh-body td.n,
.sbh-body .num { font-family: var(--sbh-mono); }

/* ================================ 로그인 카드는 어디서나 가운데 (v4.29)

   달력·수금·게스트 신청 — 이 카드가 뜨는 자리가 여럿인데 페이지마다 정렬이 달랐다.
   로그인은 그 화면에서 할 일이 그것 하나뿐인 순간이라, 어느 페이지에서 만나든
   눈 한가운데 있어야 한다. */

.sbh-gate .sbh-login {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sbh-gate .sbh-login .sbh-label { text-align: center; }

/* 입력칸은 카드 폭을 꽉 채우고, 단추는 그 절반.
   테마(Betheme)가 input 에 자기 폭을 걸어 두기 때문에 !important 로 눌러야 한다. */
.sbh-gate .sbh-login .sbh-input {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center;
}

.sbh-gate .sbh-login .sbh-btn-primary {
    display: block;
    width: 50%;
    min-width: 160px;
    /* 동의 문구 바로 아래에 버튼이 붙어 있으면 읽던 눈이 그대로 버튼을 누른다.
       한 숨 쉬어 가도록 20px 띄운다 (v4.45.1). */
    margin: 20px auto 0;
}

/* 체크박스 줄만은 가운데 정렬에서 뺀다 — 글이 두 줄이라 가운데로 맞추면 읽기 나쁘다 */
.sbh-gate .sbh-login .sbh-remember { text-align: left; }

/* ==================================== 달력 페이지의 테마 제목 감추기 (v4.31.1)

   /clubhouse/calendar/ 위쪽의 "Club Calendar" 한 줄은 플러그인이 아니라 Betheme 빌더가
   그리는 것이다. 페이지 배너에 이미 "Calendar" 가 크게 있어 같은 말이 두 번 나온다.

   여기서 감추는 것은 임시 조치다 — 진짜로 지우려면 그 페이지를 Betheme 빌더로 열어
   그 Heading 요소를 삭제하면 된다. 빌더에서 지우면 이 줄은 아무 일도 하지 않는다.
   (mcb-item-… 는 빌더가 그 요소에 한 번 붙여 두는 고유 이름이다.) */
.mcb-item-4bbebeded { display: none !important; }

/* 로그인한 사람의 이메일 — 이름보다 한 톤 낮게 (v4.34) */
.sbh-who-mail { font-style: normal; font-weight: 400; color: var(--sbh-muted); }

/* 헤더에 덧붙인 로그인 칸 — 테마 메뉴와 딱 붙지 않게 한 칸 띄운다 (v4.34.1) */
.sbh-menu-auth > a { padding-left: 14px; }

/* ------------------------------- 로그인 동의 체크 (v4.40) */

.sbh-agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    text-align: left;
}
.sbh-agree input { margin-top: 3px; flex: none; }
.sbh-agree em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12.5px;
    opacity: .7;
}
.sbh-agree-req { color: #A3312B; }
.sbh-agree-opt { opacity: .6; font-weight: 600; }

/* ------------------------------- 달력 풍선말 안내 (v4.47) */

.sbh-tiphint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #F3F8F5;
    border: 1px solid #CFE6DA;
    color: #24614B;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}
.sbh-tiphint b { font-weight: 700; }

/* 명단이 붙은 날은 손가락 커서로 "여기 뭔가 더 있다"를 알린다 */
.sbh-cal .sbh-day.has-tip { cursor: help; }

/* ------------------------------- 내 캘린더에 담기 (v4.48) */

.sbh-addcal {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--sbh-line);
    border-radius: 12px;
    background: #FAFBFC;
    text-align: center;
}
/* 제목은 읽히라고 있는 것이다 (v5.8.1) — 회색 작은 글씨는 있으나 마나였다 */
.sbh-addcal-lab {
    display: block;
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sbh-ink, #23262F);
}
.sbh-addcal-what {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--sbh-muted);
}
.sbh-addcal-what b { color: var(--sbh-ink, #23262F); }
.sbh-addcal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
}
.sbh-addcal-links a {
    font-size: 14px;
    font-weight: 700;
    color: var(--sbh-gold);
    text-decoration: none;
}
.sbh-addcal-links a:hover { text-decoration: underline; }
.sbh-addcal-note {
    display: block;
    margin-top: 9px;
    font-style: normal;
    font-size: 12px;
    color: var(--sbh-muted);
}

/* ------------------------------- 취소 기한이 지난 뒤 (v4.49) */

.sbh-cancel-closed {
    padding: 14px 16px;
    border: 1px solid #EBD9B7;
    border-radius: 12px;
    background: #FDF9F0;
    text-align: left;
}
.sbh-cancel-closed p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.6; }
.sbh-cancel-closed p:last-child { margin-bottom: 0; }
.sbh-cancel-closed-head { font-size: 14.5px !important; color: #6E5417; }
.sbh-cancel-closed-why  { color: var(--sbh-muted); }
.sbh-cancel-closed-how a { color: var(--sbh-gold); font-weight: 700; }

/* ---------------------------------------------------------------- 갤러리 (v4.59)

   사진은 라운드 화면 안에서만 산다. 그래서 카드 안쪽에 들어가되, 위와는 선 하나로
   확실히 끊는다 — 신청·취소를 하러 온 사람이 사진 더미에 눈이 먼저 가면 안 된다. */

.sbh-gal {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--sbh-line);
}

.sbh-gal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sbh-gal-title {
    margin: 0;
    font-family: var(--sbh-disp);
    font-size: 16px;
    font-weight: 700;
    color: var(--sbh-ink);
}

.sbh-gal-n {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sbh-muted);
}

.sbh-gal-add { cursor: pointer; }
.sbh-gal-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.sbh-gal-add-btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--sbh-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--sbh-ink);
}
.sbh-gal-add:hover .sbh-gal-add-btn { border-color: var(--sbh-gold); color: var(--sbh-gold); }
.sbh-gal-add input:focus-visible + .sbh-gal-add-btn { outline: 2px solid var(--sbh-blue); outline-offset: 2px; }

.sbh-gal-who {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--sbh-muted);
}

/* 동의 물음 — 갤러리를 막지 않는 카드 한 장 */
.sbh-gal-ask {
    margin: 14px 0 4px;
    padding: 14px 16px;
    border: 1px solid #EADFC6;
    border-radius: 12px;
    background: #FCF8F0;
}
.sbh-gal-ask-q { margin: 0 0 6px; font-weight: 700; color: var(--sbh-ink); }
.sbh-gal-ask-d { margin: 0 0 10px; font-size: 13px; color: #6A6455; line-height: 1.55; }
.sbh-gal-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sbh-gal-ask-note { margin: 10px 0 0; font-size: 12px; color: var(--sbh-muted); }

.sbh-gal-btn {
    padding: 8px 14px;
    border: 1px solid var(--sbh-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--sbh-ink);
    cursor: pointer;
}
.sbh-gal-btn.primary { background: var(--sbh-gold); border-color: var(--sbh-gold); color: #fff; }
.sbh-gal-btn.ghost   { border-color: transparent; color: var(--sbh-muted); }
.sbh-gal-btn:disabled { opacity: .5; cursor: default; }

/* 격자 — 폰에서 두 칸, 넓어지면 세 칸. 한 칸을 정사각으로 잘라 두면
   세로 사진과 가로 사진이 섞여도 줄이 들쭉날쭉해지지 않는다. */
.sbh-gal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 560px) { .sbh-gal-grid { grid-template-columns: repeat(3, 1fr); } }

.sbh-gal-item { margin: 0; }

.sbh-gal-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #F2F3F6;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
}
.sbh-gal-open img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sbh-gal-item figcaption { margin-top: 5px; }
.sbh-gal-cap { display: block; font-size: 12px; color: var(--sbh-ink); }

.sbh-gal-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sbh-gal-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    color: var(--sbh-muted);
    text-decoration: underline;
    cursor: pointer;
}
.sbh-gal-link.danger { color: #B4483F; }
.sbh-gal-link:disabled { opacity: .5; }

.sbh-gal-empty { margin-top: 14px; font-size: 13px; color: var(--sbh-muted); }
.sbh-gal-msg { margin: 10px 0 0; font-size: 13px; min-height: 1em; }
.sbh-gal-msg.ok  { color: var(--sbh-green); }
.sbh-gal-msg.err { color: #B4483F; }

/* 크게 보기 */
.sbh-gal-box {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(16, 18, 24, .92);
}
.sbh-gal-box.is-on { display: flex; }
.sbh-gal-box img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.sbh-gal-box-x {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}


/* ==================================================================
   회원 머리줄 (v4.59) — 로그인한 모든 화면에 같은 것 하나

   달력·마이페이지·게스트·수금이 저마다 다른 자리에 다른 모양으로 들고 있던
   「메뉴 + 내 이름 + 로그아웃」을 한 벌로 합쳤다. 규칙도 한 곳에만 둔다 —
   sbh.css 는 콘솔 화면에도 실리므로(콘솔 CSS 가 이것에 기댄다) 여기 한 번이면 된다.

   낮게 만든다. 스크롤을 따라다니는 줄이라 두꺼우면 폰에서 화면을 잡아먹는다.
   ================================================================== */

.sbh-topbar {
    --tb-ink:   #1F2430;
    --tb-muted: #79808F;
    --tb-line:  #E4E6EC;
    --tb-gold:  #A38856;

    position: sticky;
    /* 테마 헤더가 위에 떠 있으면 그 높이만큼 내려 붙는다 (sbh.js 가 재어 넣는다) */
    top: var(--sbh-sticky-top, 0px);
    z-index: 30;
    /* 머리줄은 회원 화면 폭을 그대로 채운다 (v4.60.4).
       폭을 맞추는 일은 이제 아래의 .sbh-memberwrap 이 한다 — 머리줄과 카드가 같은 칸
       안에 있으면 둘의 좌우가 저절로 맞는다. 여기서 또 폭을 정하면 다시 어긋난다. */
    display: block;
    margin: 0 0 16px;

    /* 테마가 가운데 정렬을 물려주는 페이지가 있다(게스트). 글은 늘 왼쪽에서 시작한다. */
    text-align: left;
    background: var(--sbh-page-bg, #fff);
    box-shadow: 0 1px 0 var(--tb-line), 0 6px 12px -10px rgba(20, 24, 34, .35);
    font-family: 'Noto Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sbh-topbar-in { padding: 6px 4px 8px; }

/* ① 길잡이 — 가운데 */
.sbh-topbar .sbh-nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 16px;
    margin: 0;
    padding: 2px 0 6px;
    font-size: 13px;
}
.sbh-topbar .sbh-nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--tb-muted);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.sbh-topbar .sbh-nav-link:hover { color: var(--tb-gold); }
.sbh-topbar .sbh-nav-link.is-here { color: var(--tb-ink); cursor: default; }

/* 마이페이지 아래 한 단 (v5.46.1).
   윗줄보다 작고 연하게, 그리고 <b>알약 모양</b>으로 — 같은 굵기로 두 줄을 쌓으면 어느 쪽이
   위인지 눈이 못 가른다. 켜진 칸만 색을 채워 「지금 여기」를 한 번에 보이게 한다. */
.sbh-topbar .sbh-nav-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
    margin: 0 0 6px;
    padding: 0;
}
.sbh-topbar .sbh-nav-sublink {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    color: var(--tb-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sbh-topbar .sbh-nav-sublink:hover { color: var(--tb-gold); }
.sbh-topbar .sbh-nav-sublink.is-here {
    background: var(--sbh-gold, #A38856);
    color: #FFFFFF;
    cursor: default;
}
.sbh-topbar .sbh-nav-sublink.is-here .sbh-nav-badge { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.sbh-topbar .sbh-nav-badge,
.sbh-topbar .sbh-nav-badge.sm {
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: #E7F5EF;
    color: #0F7B5F;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 15px;
}

/* ② 누구로 들어와 있는가 — 예전 마이페이지 머리와 같은 짜임 (v4.60.1)
      이름은 왼쪽 끝에 큼직하게, 단추는 오른쪽 끝에 작게, 이메일은 그 아래 한 줄. */
.sbh-idline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--tb-line);
}
.sbh-idname {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--tb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 핸디 · 소속 — 이름 옆 같은 줄 */
.sbh-idmeta {
    flex: none;
    font-size: 12px;
    color: var(--tb-muted);
    white-space: nowrap;
}
.sbh-idmail {
    margin: 1px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 단추는 오른쪽 끝으로 — margin-left:auto 가 그 자리를 만든다 */
.sbh-idbtns { flex: none; margin-left: auto; display: flex; gap: 6px; }
.sbh-idbtn {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tb-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sbh-idbtn:hover { border-color: var(--tb-gold); color: var(--tb-gold); }

/* 등록 화면의 이름 안내 (v4.59) — 명부와 이름이 어긋나면 기록을 못 찾는다 */
.sbh-gate .sbh-name-hint {
    margin: 4px 0 8px;
    padding: 9px 12px;
    border-left: 3px solid var(--sbh-gold);
    border-radius: 0 8px 8px 0;
    background: #FBF7EF;
    font-size: 12.5px;
    line-height: 1.55;
    color: #6A5C3E;
}


/* ==================================================================
   회원 화면의 칸 (v4.60.4)

   테마가 페이지마다 다른 폭을 준다 — 마이페이지 760px, 게스트 520px. 그래서 같은
   코드가 페이지마다 다른 크기로 나왔다. 칸의 <b>가운데</b>는 세 화면이 모두 같으므로,
   가운데를 기준으로 같은 폭을 펴 두면 테마 설정과 무관하게 셋이 같아진다.
   머리줄도 카드도 이 칸 안에 들어가므로 좌우가 저절로 맞는다.

   sbh-gate 가 콘솔 화면 안에 로그인 카드로 들어가는 자리가 있어(마이페이지·게스트의
   비로그인 화면) 그때는 적용하지 않는다 — 칸 안의 칸이 되면 두 번 밀린다.
   ================================================================== */

/* 회원 화면이 놓인 테마 섹션 (sbh.js 가 표시를 붙인다).
   여기서 두 가지를 한다 —

   ① 배경을 흰색 한 가지로. 달력만 회색이고 나머지는 흰색이라 같은 카드가 다르게 보였다.
      회색으로 맞춰 봤더니 이번에는 히어로와 본문 사이에 회색 띠가 눈에 띄어서, 아무것도
      드러나지 않는 흰색으로 통일했다.
   ② 테마가 페이지마다 다르게 준 칸을 같게. 마이페이지는 760px, 게스트는 520px 칸을
      받고 있었다. 우리 화면을 억지로 늘리는 대신(그렇게 하다 가운데가 어긋났다)
      테마의 칸 자체를 꽉 채우게 두고, 폭은 우리 화면이 정한다. */

/* 선택자를 한 칸 더 좁힌 이유 (v4.61.1) —
   테마는 페이지마다 css 파일을 따로 만들어 `section.mcb-section-<해시> { background: … }`
   를 넣는다. 우리 규칙과 무게가 같은데 <b>나중에 실려서</b> 늘 그쪽이 이겼다. 그래서 배경이
   흰색으로 안 바뀌고 히어로 아래 회색 띠가 남아 있었다. !important 로 찍어 누르는 대신
   section.section 을 겹쳐 한 칸 무겁게 만든다 — 나중에 이유를 읽을 수 있는 쪽이 낫다. */

section.section.sbh-memberpage { background: #FFFFFF; }

section.section.sbh-memberpage .column,
section.section.sbh-memberpage .mcb-column-inner,
section.section.sbh-memberpage .column_attr {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* 회원 화면은 어디서나 같은 폭, 가운데 */
.sbh-console,
.sbh-gate:not(.sbh-collect-login) {
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ---------------------------------------------- 미리보기 띠 (v4.69)

   미리보기인지 아닌지 헷갈리는 순간이 가장 위험하다. 화면 맨 위에서 따라다니게 하고,
   회원 화면 어디에도 없는 색을 쓴다 — 한눈에 "지금 평소와 다르다"가 읽혀야 한다. */

/* 아래 가운데에 떠 있는다 (v5.8).
   예전에는 화면 맨 위에 붙어 따라다녔다(sticky). 그래서 스크롤을 조금만 내려도
   바로 아래의 이름줄을 덮었고, 덮인 자리의 글자는 읽히지 않고 단추는 눌리지 않았다.

   자리를 아래로 옮기고 반투명하게 둔다 — 뒤가 비쳐 보이면 「가려졌다」가 아니라
   「위에 떠 있다」로 읽힌다. 폭도 내용만큼만 차지하게 해 덮는 넓이를 줄인다.
   그래도 항상 보이는 것은 그대로다 — 미리보기인지 헷갈리는 순간이 가장 위험하다. */
.sbh-preview-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    width: max-content;
    max-width: min(680px, calc(100vw - 24px));
    margin: 0;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(46, 42, 34, .82);
    backdrop-filter: saturate(160%) blur(8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    color: #F6EFE2;
    font-size: 14px;
    line-height: 1.5;
}
.sbh-preview-tag {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #E0B84C;
    color: #2E2A22;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.sbh-preview-txt { flex: 0 1 auto; }
.sbh-preview-txt b { color: #FFFFFF; }
.sbh-preview-out {
    flex: 0 0 auto;
    margin-left: 0;   /* 폭이 내용만큼이라 오른쪽으로 밀어낼 여백이 없다 (v5.8) */
    padding: 6px 12px;
    border: 1px solid rgba(246, 239, 226, .45);
    border-radius: 8px;
    background: none;
    color: #F6EFE2;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.sbh-preview-out:hover { background: rgba(246, 239, 226, .12); }
.sbh-preview-out[disabled] { opacity: .5; cursor: default; }

@media (max-width: 781px) {
    /* 폰에서는 관리 화면의 아래쪽 탭바가 같은 자리에 있다 — 그 위로 올려 둔다 */
    .sbh-preview-bar {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        font-size: 13px;
        padding: 8px 14px;
        border-radius: 14px;
    }
    .sbh-preview-out { margin-left: 0; }
}

/* ------------------------------------------- 신청 현황 (v4.73)

   신청하고 며칠 뒤에 "그거 어떻게 됐지?" 하고 열어 보는 자리.
   상태만 적으면 "그래서 뭘 해야 하나"가 안 보이므로, 줄마다 다음에 일어날 일을 한 줄 붙인다. */

.sbh-my-apps { margin: 22px 0 8px; }
.sbh-my-apps-sum { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--sbh-muted, #6E7480); }
.sbh-my-apps-sum b { color: inherit; }

.sbh-my-applist { list-style: none; margin: 10px 0 0; padding: 0; }
.sbh-console ul.sbh-my-applist, ul.sbh-my-applist { margin-left: 0; }  /* 테마의 ul 들여쓰기(30px) 끊기 (v6.63) */

.sbh-my-app {
    border: 1px solid var(--sbh-line, #E4E6EC);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
}
.sbh-my-app.is-pending  { border-color: #E6D3A3; background: #FFFCF5; }
.sbh-my-app.is-declined { opacity: .8; }

.sbh-my-app-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
}
.sbh-my-app-main:hover { background: rgba(0, 0, 0, .02); }

.sbh-my-app-when { flex: 0 0 auto; min-width: 96px; line-height: 1.35; }
.sbh-my-app-when b { display: block; font-size: 15px; }
.sbh-my-app-d { font-size: 12px; color: var(--sbh-muted, #6E7480); }

.sbh-my-app-what { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.sbh-my-app-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--sbh-muted, #6E7480);
}

/* 날씨 (v5.51) — 구장 줄 아래 한 조각. 흐린 글씨보다 살짝 진하게 두는 것은,
   이것이 「참고」가 아니라 그날 챙길 것을 정하는 값이기 때문이다. */
/* 날씨는 라운드 이름 <b>옆</b>에 붙는다 (v5.52) — 줄을 따로 내지 않는다.
   nowrap 을 두는 것은, 자리가 모자랄 때 「68° /」에서 끊기느니 조각째 다음 줄로
   내려가는 편이 읽히기 때문이다. */
.sbh-my-app-wx {
    display: inline-block;
    margin-left: 7px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sbh-ink, #23262F);
    vertical-align: baseline;
}

.sbh-my-app .sbh-con-pill { flex: 0 0 auto; }

.sbh-my-app-note {
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--sbh-line, #E4E6EC);
    background: #FAFAFB;
    font-size: 13px;
    color: var(--sbh-muted, #6E7480);
}
.sbh-my-app.is-pending .sbh-my-app-note { background: #FDF7E9; color: #7A6320; }

.sbh-my-apps-foot { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 520px) {
    .sbh-my-app-main { flex-wrap: wrap; gap: 6px 10px; }
    .sbh-my-app-when { min-width: 0; }
    .sbh-my-app-what { flex: 1 1 100%; order: 3; }
}

/* ------------------------------------------- 로그인한 기기 (v4.77)

   코드 하나로 들어오는 시스템이라, 그 코드가 새면 남이 들어와 앉는다.
   저절로 닫히기를 기다릴 수 없으므로 본인이 보고 끊을 수 있어야 한다. */

.sbh-my-devices { margin: 26px 0 8px; }

.sbh-my-devlist { list-style: none; margin: 10px 0 0; padding: 0; }

.sbh-my-dev {
    padding: 11px 14px;
    border: 1px solid var(--sbh-line, #E4E6EC);
    border-radius: 10px;
    margin-bottom: 6px;
    background: #fff;
    line-height: 1.45;
}
.sbh-my-dev.is-here { border-color: #A38856; background: #FCFAF6; }

.sbh-my-dev-main b { font-size: 15px; }

.sbh-my-dev-now {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #A38856;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 2px;
}

.sbh-my-dev-sub {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--sbh-muted, #6E7480);
}

.sbh-my-devacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sbh-my-devfoot { margin: 10px 0 0; font-size: 13px; line-height: 1.6; }

@media (max-width: 520px) {
    .sbh-my-devacts .sbh-btn { width: 100%; }
}

/* 안내문 안의 링크 (v4.78) */
.sbh-notes a { color: #b8860b; text-decoration: underline; word-break: break-all; }
.sbh-notes a:hover { color: #8a6508; }


/* --------------------------------------------------------- 문의 (v5.12.1)

   화면 오른쪽 아래에 늘 떠 있는 단추. 로그인한 회원에게만 나온다.

   폭 계산을 flex 에 맡기지 않는다 (v5.12.1). 처음에는 「글칸 : 보내기」를 한 줄
   flex 로 두었는데, 테마가 button 에 width 를 걸어 두어서 단추가 줄을 다 먹고
   글칸이 세로 한 글자 폭으로 짜부라졌다. 남의 테마 위에 얹히는 화면에서는
   폭을 스스로 못박아 두는 편이 언제나 안전하다.                                */

.sbh-chatfab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99000;                 /* 테마 헤더(보통 9xx)와 쿠키 띠 위로 */
    font-size: 15px;
    line-height: 1.5;
}

.sbh-chatfab-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: #1a2e4a;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: transform .15s ease;
}

.sbh-chatfab-btn:hover { transform: scale(1.06); }
.sbh-chatfab-ico { font-size: 24px; line-height: 1; }

/* 안 읽은 답이 있으면 찍히는 점 */
.sbh-chatfab-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background: #e74c3c;
    border: 2px solid #fff;
    border-radius: 50%;
}

.sbh-chatfab-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: 340px;
    max-width: calc(100vw - 36px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    padding: 12px 14px 14px;
    color: #2e2a22;

    /* 높이는 창 전체에 한 번만 건다 (v5.13.1).
       처음에는 대화 칸에 46vh 를 박아 두었는데, 거기에 머리말·탭·안내문·입력칸이
       차례로 얹히면서 폰에서는 화면을 거의 다 덮었다. 이제 창에 한도를 두고
       안쪽 대화 칸이 남는 만큼만 쓰게 한다 — 무엇을 더 넣어도 창은 안 커진다. */
    display: flex;
    flex-direction: column;
    max-height: min(520px, calc(100vh - 140px));

    /* 폭도 여기서 못박는다. 좁은 화면 규칙이 무슨 이유로든 안 걸려도
       (확대해서 보는 중이라거나) 창이 화면 밖으로 삐져나가지 않게 한다. */
    width: min(340px, calc(100vw - 24px));
}

/*
 * 닫혀 있을 때는 반드시 사라진다 (v5.13.3).
 *
 * 위에서 창을 세로 flex 로 바꾸면서 display 를 직접 적었는데, HTML 의 hidden 속성은
 * 브라우저 기본 스타일(display:none)이라 <b>내가 쓴 display 에 밀린다</b>. 그래서
 * JS 가 hidden 을 걸어도 창이 그대로 떠 있었고, ✕ 를 눌러도 닫히지 않았다.
 * 페이지를 열자마자 창이 열려 있던 것도 같은 이유다.
 *
 * display 를 직접 쓰는 요소에 hidden 을 함께 쓸 때는 이 한 줄이 반드시 따라와야 한다.
 */
.sbh-chatfab-panel[hidden] { display: none !important; }

.sbh-chatfab-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sbh-chatfab-x {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}

.sbh-chatfab-x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.sbh-chatfab-tabs { flex: 0 0 auto; display: flex; gap: 6px; margin-bottom: 8px; }
/* 라운드 화면이 아니면 고르개를 숨긴다 (v6.90) — display:flex 가 hidden 을 이겨서, 소식 같은 화면에 글자 없는 남색 단추가 떠 있었다 */
.sbh-chatfab-tabs[hidden] { display: none !important; }

.sbh-chatfab-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbh-chatfab-tab.is-active { background: #1a2e4a; border-color: #1a2e4a; color: #fff; }

.sbh-chat-note { flex: 0 0 auto; margin: 0 0 8px; font-size: 12.5px; }

.sbh-chat-log {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
    min-height: 110px;      /* 이보다 얕으면 두 줄도 안 보인다 */
    overflow-y: auto;
    padding: 2px 2px 8px;
}

.sbh-chat-empty { margin: 4px 0; font-size: 13.5px; }

.sbh-chat-row { display: flex; flex-direction: column; max-width: 88%; }
.sbh-chat-row.is-me   { align-self: flex-end;   align-items: flex-end; }
.sbh-chat-row.is-them { align-self: flex-start; align-items: flex-start; }

.sbh-chat-bub {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;      /* 회원이 넣은 줄바꿈을 그대로 */
    overflow-wrap: anywhere;    /* 긴 주소 한 줄이 칸을 밀어내지 않게 */
}

.sbh-chat-row.is-me   .sbh-chat-bub { background: #1a2e4a; color: #fff; border-bottom-right-radius: 4px; }
.sbh-chat-row.is-them .sbh-chat-bub { background: rgba(0, 0, 0, .07); border-bottom-left-radius: 4px; }

.sbh-chat-when { margin-top: 2px; font-size: 11px; opacity: .6; }

/* 글칸은 한 줄을 통째로 쓰고, 보내기는 그 아래 오른쪽 — 테마가 단추 폭에
   무슨 짓을 하든 글칸이 짜부라지지 않는다 */
.sbh-chat-form { flex: 0 0 auto; display: block; margin-top: 8px; }

.sbh-chat-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    resize: vertical;
    margin: 0;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
}

.sbh-chat-send { display: flex; justify-content: flex-end; margin-top: 8px; }

.sbh-chat-go {
    width: auto;
    min-width: 84px;
    padding: 8px 18px;
    background: #1a2e4a;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

.sbh-chat-go:hover:not(:disabled) { background: #24406a; }
.sbh-chat-go:disabled { opacity: .55; cursor: default; }

/* 폰에서는 거의 화면 폭을 다 쓴다 — 340px 창이 작은 화면에서는 답답하다 */
@media (max-width: 480px) {
    .sbh-chatfab { right: 14px; bottom: 14px; }
    .sbh-chatfab-btn { width: 52px; height: 52px; }

    .sbh-chatfab-panel {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 74px;
        width: auto;
        max-width: none;
        padding: 10px 12px 12px;
        /* 화면의 절반을 넘지 않는다. 폰에서 창이 화면을 덮으면 「뒤에 뭐가 있었는지」를
           잊게 되고, 그러면 문의를 쓰다 말고 닫는다. */
        max-height: min(52vh, calc(100vh - 150px));
    }

    /* 안내문 한 줄은 접는다 — 머리말에 이미 「운영진에게 문의」라고 적혀 있고,
       그 두 줄이 폰에서는 대화가 보일 자리를 그대로 먹는다 */
    .sbh-chatfab-panel .sbh-chat-note { display: none; }

    .sbh-chat-log { min-height: 92px; }
    .sbh-chat-form textarea { min-height: 46px; }
    .sbh-chat-bub { font-size: 13.5px; padding: 7px 11px; }
}

/* 눕힌 폰 — 세로가 통째로 얕다.
   여기서는 「최대 높이」만으로는 부족하다. 안쪽 칸들의 최소 높이가 더해지면 상자가
   그 한도를 뚫고 자라, 창 위쪽이 화면 밖으로 나간다 (실제로 740×380 에서 위로
   18px 잘려 나갔다). 그래서 위아래를 <b>화면에 못박고</b> 안쪽이 0 까지 줄어들 수
   있게 푼다 — 대화가 두 줄만 보여도 쓰는 데는 지장이 없다. */
@media (max-height: 520px) {
    .sbh-chatfab-panel {
        position: fixed;
        top: 10px;
        bottom: 10px;
        right: 12px;
        left: auto;
        width: 320px;
        max-width: calc(100vw - 24px);
        max-height: none;
        padding: 10px 12px;
    }
    .sbh-chatfab-panel .sbh-chat-note { display: none; }
    .sbh-chat-log { min-height: 0; }
    .sbh-chat-form textarea { min-height: 38px; }
    .sbh-chat-send { margin-top: 6px; }
}

/* 인쇄물에 떠 있는 단추가 찍힐 이유가 없다 */
@media print { .sbh-chatfab { display: none !important; } }

/* ── KR | EN 캡슐 (v5.25) ─────────────────────────────────────────
   로그인 화면에만 뜬다. 로그인한 뒤에는 회원 정보의 언어 설정을 따르므로 필요 없다. */
.sbh-langpill {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto 16px;
    width: max-content;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.sbh-langpill-b {
    padding: 7px 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #6B7280;
    text-decoration: none;
    line-height: 1.2;
}

.sbh-langpill-b + .sbh-langpill-b { border-left: 1px solid rgba(0, 0, 0, .12); }
.sbh-langpill-b:hover  { background: rgba(0, 0, 0, .04); color: #23262F; }
.sbh-langpill-b.is-on  { background: #1A2E4A; color: #fff; }

.sbh-onlymembers { text-align: center; margin: 0 0 18px; }

/* ── Footprints — 공개 라운드 기록 (v5.25) ────────────────────────
   로그인 없이 누구나 보는 화면이다. 테마 안에 얹히므로 제 색을 스스로 다 칠한다. */
.sbh-fp {
    /* 위에 숨 쉴 자리 — 지도나 앞 블록에 제목이 바로 붙어 있었다 */
    padding-top: 20px;

    --fp-ink: #23262F;
    --fp-mute: #7A8089;
    --fp-rule: #E4E1D8;
    --fp-gold: #A38856;
    --fp-sand: #F7F4EC;

    max-width: 900px;
    margin: 0 auto;
    color: var(--fp-ink);
    text-align: left;
}

.sbh-fp-head { margin: 0 0 18px; }
.sbh-fp-title { margin: 0 0 6px; font-size: 26px; line-height: 1.25; }
.sbh-fp-lede { margin: 0; color: var(--fp-mute); font-size: 15px; }

.sbh-fp-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 16px 20px;
    margin: 0 0 18px;
    background: var(--fp-sand);
    border-radius: 10px;
}
.sbh-fp-sum div { display: flex; flex-direction: column; }
.sbh-fp-sum b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sbh-fp-sum span {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-mute);
}

.sbh-fp-tabs { display: flex; gap: 6px; margin: 0 0 4px; flex-wrap: wrap; }
.sbh-fp-tab {
    padding: 8px 16px;
    border: 1px solid var(--fp-rule);
    border-radius: 999px;
    background: #fff;
    color: var(--fp-mute);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.sbh-fp-tab:hover  { color: var(--fp-ink); }
.sbh-fp-tab.is-on  { background: #1A2E4A; border-color: #1A2E4A; color: #fff; }

.sbh-fp-panel { border-top: 1px solid var(--fp-rule); margin-top: 14px; }

.sbh-fp-year {
    padding: 16px 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--fp-gold);
    border-bottom: 1px solid var(--fp-rule);
}

.sbh-fp-row {
    display: grid;
    grid-template-columns: 128px 44px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--fp-rule);
}
.sbh-fp-dt  { font-size: 14px; color: var(--fp-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbh-fp-dow { font-size: 12.5px; color: var(--fp-mute); }
.sbh-fp-cr  { font-size: 16px; }

.sbh-fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
}
/* 골프장 하나가 카드 한 장 — 예순 곳이 줄로만 늘어서면 어디가 어디인지 안 잡힌다 */
.sbh-fp-grid { gap: 10px; }

.sbh-fp-course {
    padding: 13px 15px;
    border: 1px solid var(--fp-rule);
    border-radius: 10px;
    background: #fff;
}
.sbh-fp-course b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sbh-fp-course span {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fp-sand);
    font-size: 12px;
    color: var(--fp-mute);
    font-variant-numeric: tabular-nums;
}

/* 연도 고르개 */
.sbh-fp-years { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 4px; }
.sbh-fp-year-b {
    padding: 5px 13px;
    border: 1px solid var(--fp-rule);
    border-radius: 999px;
    background: #fff;
    color: var(--fp-mute);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.sbh-fp-year-b:hover { color: var(--fp-ink); }
.sbh-fp-year-b.is-on { background: var(--fp-gold); border-color: var(--fp-gold); color: #fff; }

/* 쪽 넘김 — 열 줄씩 */
.sbh-fp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--fp-rule);
}
.sbh-fp-pg {
    padding: 7px 16px;
    border: 1px solid var(--fp-rule);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fp-ink);
    text-decoration: none;
}
.sbh-fp-pg:hover { background: var(--fp-sand); }
.sbh-fp-pg.is-off { color: var(--fp-rule); background: transparent; border-color: transparent; }
.sbh-fp-pgnow { font-size: 13px; color: var(--fp-mute); font-variant-numeric: tabular-nums; }

/* 연도 칩도 이제 링크다 */
a.sbh-fp-year-b { text-decoration: none; display: inline-block; }

.sbh-fp-note { margin: 16px 0 0; font-size: 14.5px; color: var(--fp-mute); }

@media (max-width: 560px) {
    .sbh-fp-row { grid-template-columns: 108px 36px 1fr; gap: 8px; }
    .sbh-fp-cr { font-size: 15px; }
    .sbh-fp-title { font-size: 22px; }
}

/* hidden 은 UA 스타일이라 테마의 display 규칙 하나에도 진다 — 못 박아 둔다 (v5.13 과 같은 이유) */
.sbh-fp-panel[hidden] { display: none !important; }

/* 손님에게 보이는 문의 안내 (v5.26) */
.sbh-chat-guest { padding: 14px 16px 16px; }
.sbh-chat-guest p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; }
.sbh-chat-guest-go { margin: 14px 0 10px; }
.sbh-chat-guest-go .sbh-btn { display: block; text-align: center; }
.sbh-chat-guest-alt { font-size: 12.5px; margin-bottom: 0; }

/* ── 내 기록 (v5.37) ────────────────────────────────────────────────
   평균 한 줄이던 자리를 흐름·베스트·구장별 셋으로 키운다. 그림은 인라인 SVG 라
   따로 받아 오는 것이 없다. */
.sbh-my-rec { margin: 18px 0 24px; }
.sbh-my-rec.is-empty p { margin: 4px 0 0; }
.sbh-rec-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
    padding: 14px 16px; border: 1px solid var(--sbh-line, #E6E2D8); border-radius: 12px;
    background: var(--sbh-soft, #FBFAF7);
}
.sbh-rec-nums { display: flex; flex-wrap: wrap; gap: 14px 26px; flex: 1 1 260px; }
.sbh-rec-num { min-width: 82px; }
.sbh-rec-num b {
    display: block; font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums;
    color: var(--sbh-ink, #23262F);
}
.sbh-rec-num span { display: block; font-size: 12px; color: var(--sbh-muted, #8A90A0); }
.sbh-rec-num em {
    display: block; margin-top: 2px; font-size: 11px; font-style: normal;
    color: var(--sbh-muted, #8A90A0);
}
.sbh-rec-num.is-best b { color: var(--sbh-gold, #A38856); }

.sbh-rec-spark { margin: 0; flex: 0 1 220px; min-width: 170px; color: var(--sbh-gold, #A38856); }
.sbh-rec-spark figcaption {
    font-size: 11px; color: var(--sbh-muted, #8A90A0); margin-bottom: 2px;
}
.sbh-rec-spark svg { display: block; width: 100%; height: auto; overflow: visible; }
.sbh-rec-spark circle.is-last { paint-order: stroke; stroke: #FFFFFF; stroke-width: 1.4; }

.sbh-rec-tbl { width: 100%; font-variant-numeric: tabular-nums; }
.sbh-rec-tbl td:not(:first-child), .sbh-rec-tbl th:not(:first-child) { text-align: right; width: 68px; }
.sbh-tblwrap { overflow-x: auto; }
@media (max-width: 480px) {
    .sbh-rec-num b { font-size: 22px; }
    .sbh-rec-spark { flex-basis: 100%; }
}

/* 19홀 (v5.41) — 구장 정보와 같은 표를 한 덩이 더 세운다.
   위 표와 붙어 보이지 않게 제목을 하나 얹고, 그 아래 표는 위 테두리를 지운다. */
.sbh-meta-h {
    margin: 20px 0 -10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--sbh-muted);
}
.sbh-meta-h + .sbh-meta { border-top: 0; padding-top: 10px; }

/* SBH Handy (v5.45) — 숫자 옆에 늘 「무엇인지」가 붙어 있어야 한다 */
.sbh-rec-num.is-handy b { color: var(--sbh-blue, #2C5AA0); }
.sbh-handy-how { margin-top: 10px; }
.sbh-handy-how p { margin: 8px 0; font-size: 13.5px; line-height: 1.7; }
.sbh-handy-f {
    margin: 10px 0; padding: 10px 12px; border-radius: 8px;
    background: var(--sbh-soft, #F4F5F8); font-size: 13px; text-align: center;
}
.sbh-handy-note {
    margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--sbh-line, #E4E6EC);
    font-size: 12.5px; color: var(--sbh-muted, #8A90A0);
}
.sbh-handy-wait { margin-top: 10px; font-size: 13px; }

/* 근거 표 — 골프장 이름이 한 글자씩 접히지 않게 (v5.45) */
.sbh-handy-how .sbh-rec-tbl { table-layout: auto; width: 100%; }
.sbh-handy-how .sbh-rec-tbl th,
.sbh-handy-how .sbh-rec-tbl td { text-align: left; padding: 6px 8px; vertical-align: top; }
.sbh-handy-how .sbh-rec-tbl td:first-child,
.sbh-handy-how .sbh-rec-tbl th:first-child { white-space: nowrap; width: 1%; }
.sbh-handy-how .sbh-rec-tbl td:nth-child(3),
.sbh-handy-how .sbh-rec-tbl th:nth-child(3) { white-space: nowrap; width: 1%; }
.sbh-handy-how .sbh-rec-tbl td:nth-child(4),
.sbh-handy-how .sbh-rec-tbl th:nth-child(4),
.sbh-handy-how .sbh-rec-tbl td:nth-child(5),
.sbh-handy-how .sbh-rec-tbl th:nth-child(5) { text-align: right; white-space: nowrap; width: 1%; }

/* 내 기록 페이지 (v5.46) */
.sbh-rec-page h1 { margin-bottom: 4px; }
.sbh-rec-nums.is-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.sbh-rec-sec { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--sbh-line, #E4E6EC); }
.sbh-rec-sec > h2 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.sbh-rec-sec > h2 .sbh-muted { font-weight: 400; font-size: 13px; }
.sbh-rec-sec > p.sbh-muted { font-size: 12.5px; line-height: 1.7; margin: 6px 0 12px; }

.sbh-rec-trend { margin: 14px 0 6px; color: var(--sbh-blue, #2C5AA0); }
.sbh-rec-trend svg { display: block; width: 100%; height: 120px; padding: 0 7px; box-sizing: border-box; overflow: visible; }  /* 양끝 점이 잘리지 않게 (v6.63) */
/* 전체 라운드 — 골프장 이름이 세 줄로 접히지 않게 폭을 제 몫대로 나눈다 (v5.46) */
.sbh-rec-tbl th { white-space: nowrap; }
.sbh-rec-all td:first-child, .sbh-rec-all th:first-child { white-space: nowrap; width: 1%; }
.sbh-rec-all td:nth-child(2), .sbh-rec-all th:nth-child(2) { text-align: left; width: auto; }
.sbh-rec-all td:nth-child(n+3), .sbh-rec-all th:nth-child(n+3) { white-space: nowrap; width: 1%; }
.sbh-rec-all td, .sbh-rec-all th { padding-left: 10px; }
.sbh-rec-tbl td, .sbh-rec-tbl th { padding-left: 12px; }
.sbh-rec-tbl td:first-child, .sbh-rec-tbl th:first-child { padding-left: 0; }

/* 좁은 화면에서는 표를 옆으로 밀지 않고 줄줄이 편다 (v5.46).
   여섯 칸짜리 표를 손가락으로 밀어 보게 하면 오른쪽 두 칸은 아무도 못 본다.
   머리글은 data-label 로 각 줄 앞에 다시 붙인다. */
@media (max-width: 560px) {
    .sbh-rec-stack thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .sbh-rec-stack, .sbh-rec-stack tbody, .sbh-rec-stack tr { display: block; width: 100%; }
    .sbh-rec-stack tr {
        padding: 9px 0; border-bottom: 1px solid var(--sbh-line, #E4E6EC);
    }
    .sbh-rec-stack tr:last-child { border-bottom: 0; }
    .sbh-rec-stack td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
        width: auto !important; padding: 2px 0; border: 0;
        text-align: right; white-space: normal;
    }
    .sbh-rec-stack td::before {
        content: attr(data-label); flex: 0 0 auto;
        color: var(--sbh-muted, #8A90A0); font-size: 12.5px; font-weight: 400; text-align: left;
    }
    .sbh-rec-stack td:first-child { font-weight: 700; }
}
.sbh-rec-trend figcaption {
    margin-top: 6px; font-size: 12.5px; color: var(--sbh-muted, #8A90A0);
}
.is-down { color: #1F7A4D; }
.is-up   { color: #B23C17; }

/* 전체 라운드 표는 길다 — 머리를 붙여 둔다 */
.sbh-rec-all thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

.sbh-rec-mates { list-style: none; margin: 10px 0; padding: 0; }
.sbh-rec-mates li {
    display: grid; grid-template-columns: minmax(80px, 130px) 1fr auto;
    align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px;
}
.sbh-rec-mate-n { font-weight: 600; overflow-wrap: anywhere; }
.sbh-rec-mate-bar {
    height: 8px; border-radius: 999px; background: var(--sbh-soft, #F0F1F5); overflow: hidden;
}
.sbh-rec-mate-bar i { display: block; height: 100%; background: var(--sbh-gold, #A38856); }
.sbh-rec-mate-c { color: var(--sbh-muted, #8A90A0); font-size: 12.5px; white-space: nowrap; }

.sbh-rec-more { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sbh-rec-more .sbh-muted { font-size: 12.5px; }
.sbh-rec-foot { margin-top: 24px; font-size: 12.5px; }
.sbh-rec-gap {
    margin: 4px 0 14px; padding: 9px 12px; border-radius: 8px;
    background: var(--sbh-soft, #F6F7F9); font-size: 12.5px; line-height: 1.7;
}

/* 날씨 · 해 뜨고 짐 (v5.50).
   숫자만 늘어놓으면 무엇이 무엇인지 모른다 — 아이콘으로 갈래를 가르고, 덧붙는 값은
   작은 알약으로 띄워 온도와 섞이지 않게 한다. */
.sbh-wx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sbh-wx-ic { font-size: 17px; line-height: 1; }
.sbh-wx-t { color: var(--sbh-muted); }
.sbh-wx-b {
    padding: 1px 8px; border-radius: 999px;
    background: var(--sbh-soft, #F4F5F7); color: var(--sbh-ink, #1A1A1A);
    font-size: 12.5px; white-space: nowrap;
}
.sbh-wx-b.is-warn { background: #FDECEC; color: #B4332E; font-weight: 600; }
/* 「예보」인지 「그날 실제」인지 — 숫자만 보여 주면 어느 쪽인지 알 수 없다 */
.sbh-wx-k { color: var(--sbh-muted); font-size: 12px; }
.sbh-sun { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }

/* 캘린더 칸의 날씨 — 칸이 좁으니 아이콘과 최고기온만 */
.sbh-ev-wx { display: block; margin-top: 2px; font-size: 11.5px; color: var(--sbh-muted); }

/* 취소 단추 아래 한 줄 (v5.57) — 일찍 알려 주시라는 부탁.
   점수는 적지 않는다 (운영진만 보는 기록이다). */
.sbh-cancel-note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }

/* ------------------------------------------------------------------
 * 문의 단추 말풍선 (v5.59)
 *
 * 단추 왼쪽에서 미끄러져 나온다. 위로 띄우지 않는 이유는, 위쪽은 대화창이
 * 열리는 자리라 둘이 같은 자리를 쓰면 겹치는 순간이 생기기 때문이다.
 * ------------------------------------------------------------------ */
.sbh-chatfab-tip {
    position: absolute;
    right: 68px;                    /* 단추(56) + 여백 */
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 2px;

    /*
     * 폭을 <b>내용으로</b> 정한다 (v5.64.1).
     *
     * 이게 없으면 글자가 세로로 한 자씩 쌓인다. 감싸는 .sbh-chatfab 은 단추만 한
     * 폭(56px)인데, 그 안에서 right:68px 로 띄우면 브라우저가 쓸 수 있는 폭을
     * 56 − 68 = 음수로 잡고 0 으로 깎는다. 그러면 「가장 좁게 줄인 폭」이 글자 하나가
     * 되고, 한글은 글자 단위로 줄바꿈되므로 한 자씩 세로로 늘어선다.
     *
     * max-width 로는 못 고친다 — 이미 0 으로 깎인 뒤라 더 좁힐 것이 없다.
     * max-content 로 「내용만큼」을 먼저 잡고, 그다음에 화면 폭으로 한도를 건다.
     */
    width: max-content;
    max-width: min(260px, calc(100vw - 110px));

    /* 한글은 낱말째로 넘긴다 — 한 자씩 끊기면 읽는 속도가 눈에 띄게 떨어진다 */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;

    padding: 8px 6px 8px 12px;
    background: #1a2e4a;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);

    /* 나오기 전 자리 — is-on 이 붙으면 제자리로 온다 */
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .25s ease, transform .25s ease;
}

.sbh-chatfab-tip.is-on { opacity: 1; transform: translateX(0); }

/* 꼬리 — 단추 쪽을 가리킨다 */
.sbh-chatfab-tip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: #1a2e4a;
    transform: rotate(45deg);
    border-radius: 2px;
}

.sbh-chatfab-tipgo {
    /* 줄이지 않는다 — 줄일 수 있게 두면 위에서 막은 세로 한 줄이 여기서 다시 생긴다 */
    flex: 0 1 auto;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.sbh-chatfab-tipx {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.sbh-chatfab-tipx:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* 말풍선이 나올 때 단추도 한 번 흔든다 — 눈이 그쪽으로 가게 */
@keyframes sbh-nudge {
    0%, 60%, 100% { transform: translateY(0) rotate(0); }
    12%           { transform: translateY(-4px) rotate(-7deg); }
    24%           { transform: translateY(0)    rotate(6deg); }
    36%           { transform: translateY(-2px) rotate(-4deg); }
    48%           { transform: translateY(0)    rotate(0); }
}

.sbh-chatfab-btn.is-nudge { animation: sbh-nudge 1.6s ease-in-out 2; }

/*
 * 움직임을 줄여 둔 분께는 흔들지 않는다.
 *
 * 이 설정을 켜는 데에는 취향 말고 다른 이유가 있는 경우가 많다 — 어지럼증이 그렇다.
 * 말풍선 자체는 그대로 뜬다. 알리는 일은 움직임 없이도 된다.
 */
@media (prefers-reduced-motion: reduce) {
    .sbh-chatfab-btn.is-nudge { animation: none; }
    .sbh-chatfab-tip { transition: opacity .25s ease; transform: none; }
    .sbh-chatfab-tip.is-on { transform: none; }
}

/* 좁은 화면에서는 단추 위로 올린다 — 옆으로는 자리가 없다 */
/*
 * 좁은 화면에서는 단추 <b>위로</b> 올린다.
 *
 * 기준을 420 → 600 으로 넓혔다 (v5.64.1). 요즘 폰은 430px 도 흔해서 420 에서 끊으면
 * 정작 제일 좁은 기기들이 옆자리 배치에 걸린다 — 풍선(260) + 단추(56) + 여백이
 * 화면을 꽉 채워 읽기가 불편하다.
 */
@media (max-width: 600px) {
    .sbh-chatfab-tip {
        right: 0;
        bottom: 68px;
        max-width: calc(100vw - 36px);
    }
    .sbh-chatfab-tip::after { right: 20px; top: auto; bottom: -5px; margin-top: 0; }
}

/* ------------------------------------------------------------------
 * 리더보드 (v5.59)
 * ------------------------------------------------------------------ */
.sbh-lb-pickers { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }

.sbh-lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.sbh-lb-tab {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
}

.sbh-lb-tab:hover { background: rgba(0, 0, 0, .04); }
.sbh-lb-tab.on    { background: #1a2e4a; border-color: #1a2e4a; color: #fff; }

.sbh-lb-clubs .sbh-lb-tab { font-size: 12.5px; padding: 4px 10px; }

.sbh-lb-rule {
    margin: 0 0 12px;
    padding: 9px 12px;
    background: rgba(0, 201, 167, .10);
    border-left: 3px solid #00c9a7;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.6;
}

.sbh-lb-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.sbh-lb-table th {
    padding: 6px 8px;
    border-bottom: 2px solid rgba(0, 0, 0, .14);
    font-size: 12.5px;
    font-weight: 600;
    opacity: .7;
    text-align: left;
}

.sbh-lb-table td { padding: 8px; border-bottom: 1px solid rgba(0, 0, 0, .07); }

.sbh-lb-rank { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.sbh-lb-num  { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.sbh-lb-pts  { font-weight: 700; }

.sbh-lb-table th.sbh-lb-num, .sbh-lb-table th.sbh-lb-rank { text-align: center; }
.sbh-lb-table th.sbh-lb-num { text-align: right; }

/* 내 줄 — 표에서 눈이 가장 먼저 닿아야 하는 자리 */
.sbh-lb-table tr.me td { background: rgba(255, 217, 102, .22); font-weight: 600; }

.sbh-lb-me {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: #1a2e4a;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.sbh-lb-mine {
    margin: 10px 0 0;
    padding: 9px 12px;
    background: rgba(255, 217, 102, .22);
    border-radius: 8px;
    font-size: 14px;
}

.sbh-lb-open { margin: 12px 0 0; text-align: center; }
.sbh-lb-foot { margin-top: 14px; font-size: 12.5px; line-height: 1.7; }

@media (max-width: 480px) {
    .sbh-lb-table { font-size: 13.5px; }
    .sbh-lb-table td, .sbh-lb-table th { padding: 7px 5px; }
    .sbh-lb-num { width: 52px; }
}

/* 연말 시상 안내 (v5.63) — 규칙 상자 위에, 눈이 먼저 닿는 자리 */
.sbh-lb-award {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 217, 102, .22), rgba(255, 217, 102, .08));
    border: 1px solid rgba(163, 136, 86, .35);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.65;
}
.sbh-lb-award-h { font-size: 15px; margin-bottom: 6px; }
.sbh-lb-award p { margin: 0 0 6px; }
.sbh-lb-award p:last-child { margin-bottom: 0; }
.sbh-lb-award-cta { font-weight: 600; }
.sbh-lb-sub { margin: -6px 0 12px; font-size: 13px; }

/* v6.94 — 시상 안내 + 셈법을 한 줄로 접는다. 첫 화면에 표가 보이게 */
.sbh-lb-fold {
    margin: 0 0 12px;
    background: linear-gradient(135deg, rgba(255, 217, 102, .22), rgba(255, 217, 102, .08));
    border: 1px solid rgba(163, 136, 86, .35);
    border-radius: 10px;
}
.sbh-lb-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 14.5px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.sbh-lb-fold > summary::-webkit-details-marker { display: none; }
.sbh-lb-fold > summary::after {
    content: "";
    width: 8px; height: 8px;
    margin-left: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .55;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
    flex: none;
}
.sbh-lb-fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.sbh-lb-fold-sub { margin: 0 0 0 auto; font-size: 12.5px; white-space: nowrap; }
.sbh-lb-fold-body { padding: 0 12px 12px; }
.sbh-lb-fold .sbh-lb-award { margin: 0 0 10px; padding: 0 2px; background: none; border: 0; }
.sbh-lb-fold .sbh-lb-rule { margin: 0; }


/* ------------------------------------------ v5.89 참가자 줄의 조편성 */

/* 라운드 전날부터는 이름을 늘어놓지 않고 <b>조로 묶어</b> 보여 준다.
   한 줄에 한 조씩 서게 두어, 내 조를 눈으로 한 번에 찾을 수 있게 한다. */
.sbh-people-g { display: flex; flex-direction: column; gap: 8px; }

.sbh-pg {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    background: #F6F7F9;
    border: 1px solid #E8E9EE;
    line-height: 1.5;
}

/* 내 조는 한눈에 — 열여섯 이름에서 제 이름을 찾게 두지 않는다 */
.sbh-pg.is-mine { background: #F2FBF7; border-color: #CBE7DC; }

.sbh-pg-name { font-weight: 800; color: #0F7B5F; margin-right: 8px; }
.sbh-pg.is-mine .sbh-pg-name { color: #0B6A51; }

.sbh-pg-tee,
.sbh-pg-me {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    margin-right: 6px;
    background: rgba(255, 255, 255, .9);
    color: #3B4A57;
    border: 1px solid #E2E5EA;
}
.sbh-pg-me { background: #0F7B5F; color: #fff; border-color: #0F7B5F; }

.sbh-pg-who { display: block; margin-top: 4px; word-break: keep-all; }

/* ------------------------------------------ v5.90 라운드 안내문 (회원 화면) */

/* 메일의 「라운드 안내」 상자와 같은 뜻의 자리 — 그날만의 한마디(sbh-notes)보다 앞에 선다. */
.sbh-brief-box { margin: 18px 0 4px; }
.sbh-brief-box .sbh-notes { word-break: keep-all; }

/* 달력 아래 날씨 주석 (v6.6) — 그 숫자가 하루치가 아니라는 사실을 한 번만 적는다 */
.sbh-wx-note {
    margin: 12px 0 0;
    font-size: 12px;
    text-align: center;
}

/* ---------------------------------------------------------------- 라운드 투표 (v6.32) */
.sbh-polls { margin: 18px 0; }
.sbh-polls-h { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--sbh-ink); }
.sbh-poll {
    border: 1px solid var(--sbh-line); border-radius: 12px; padding: 14px 14px 12px;
    margin: 0 0 10px; background: var(--sbh-bg);
}
.sbh-poll.is-closed { background: #F7F7F9; }
.sbh-poll-q { font-weight: 700; font-size: 15px; margin: 0 0 2px; color: var(--sbh-ink); }
.sbh-poll-meta { font-size: 12.5px; color: var(--sbh-muted); margin: 0 0 10px; }
.sbh-poll-opts { list-style: none; margin: 0; padding: 0; }
.sbh-poll-opt { margin: 0 0 9px; }
.sbh-poll-opt label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14.5px; }
.sbh-poll-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--sbh-gold); flex: 0 0 auto; }
.sbh-poll-lab { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sbh-poll-n { font-weight: 700; color: var(--sbh-ink); min-width: 1.5em; text-align: right; }
.sbh-poll-opt.is-mine .sbh-poll-lab { font-weight: 700; }
.sbh-poll-bar { display: block; height: 6px; border-radius: 3px; background: #EEF0F4; margin: 4px 0 0; overflow: hidden; }
.sbh-poll-bar i { display: block; height: 100%; background: var(--sbh-grey); border-radius: 3px; }
.sbh-poll-opt.is-mine .sbh-poll-bar i { background: var(--sbh-gold); }
.sbh-poll-who { display: block; font-size: 12px; color: var(--sbh-muted); margin-top: 3px; }
.sbh-poll-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sbh-poll-add { display: flex; gap: 8px; margin-top: 10px; }
.sbh-poll-add input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--sbh-line); border-radius: 8px; font-size: 14px; }
.sbh-poll-note { font-size: 12px; color: var(--sbh-muted); margin: 8px 0 0; }
.sbh-poll-msg { font-size: 13px; color: var(--sbh-green); margin: 8px 0 0; }
.sbh-poll-msg.is-bad { color: #C0392B; }

/* 내 기록 탭 (v6.83) */
.sbh-rec-tabs { display: flex; gap: 6px; margin: 4px 0 14px; padding: 4px; background: #F1F3EF; border-radius: 999px; width: max-content; max-width: 100%; }
.sbh-rec-tabs a { padding: 8px 18px; border-radius: 999px; text-decoration: none !important; font-weight: 700; color: #4A554F !important; font-size: 15px; }
.sbh-rec-tabs a.on { background: #17402F; color: #fff !important; }
.sbh-rec-page .sbh-pts-page { max-width: none; }

/* 아이폰은 16px 보다 작은 글칸을 누르면 화면을 확대한다 (v6.90).
   문의 창이 열리자마자 확대돼 다시 줄여야 했다 — 손가락 화면에서는 글칸을 16px 로 */
@media (pointer: coarse) {
    .sbh-chat-form textarea, .sbh-chat-form input { font-size: 16px !important; }
}