* {
    box-sizing: border-box;
}

:root {
    /* 프로필 사진이 없을 때 쓰는 기본 이미지(흰색 사람 모양). 채팅 말풍선과 참여자 목록이 함께 쓴다. */
    --avatar-silhouette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='%23ffffff'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z' fill='%23ffffff'/%3E%3C/svg%3E");
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
    background: #f5f5f7;
    color: #1c1c1e;
}

.screen {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    background: #e4f0f7;
    border-radius: 28px;
}

/* PC처럼 화면이 넓을 때는 위아래에도 여백을 두어 네 모서리가 모두 둥글게 보이게 한다. */
@media (min-width: 520px) {
    body {
        padding: 16px 0;
    }

    .screen {
        min-height: calc(100vh - 32px);
        min-height: calc(100dvh - 32px);
    }
}

.brand {
    margin-top: 48px;
    text-align: center;
}

/* 온글잎 소박체 — 채팅방 목록용. 흔히 쓰는 한글 2,350자와 영문·숫자만 담은 서브셋이라, 없는 글자는 기본 글꼴로 표시된다. */
@font-face {
    font-family: 'Ownglyph Sobak Hangul';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ownglyph-sobak-hangul.woff2') format('woff2');
}

/* Rouge Script (OFL) — "SingingRoad", "Chatting", "Community" 영문 글자만 담은 서브셋. 다른 글자는 cursive 기본 글꼴로 표시된다. */
@font-face {
    font-family: 'Rouge Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/rouge-script-title.woff2') format('woff2');
}

/* 온글잎 소박체 — 로그인 설명 문구에 쓰는 글자만 담은 서브셋. 다른 글자는 기본 글꼴로 표시된다. */
@font-face {
    font-family: 'Ownglyph Sobak';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ownglyph-sobak-desc.woff2') format('woff2');
}

.login-page .brand h1 {
    font-family: 'Rouge Script', cursive;
    font-weight: 400;
    font-size: 56px;
    margin-bottom: 30px;
}

.login-page .brand p {
    font-family: 'Ownglyph Sobak', sans-serif;
    font-size: 17px;
    color: #6e6e73;
}

/* 화면 맨 위 가운데에 고정되는 제목 바 — 스크롤해도 카드 위쪽에 붙어 있다. */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -24px -20px 0;
    padding: 24px 20px 12px;
    background: #e4f0f7;
    border-radius: 28px 28px 0 0;
}

.top-bar .back-btn {
    position: absolute;
    left: 14px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}

.top-bar .add-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.modal {
    width: min(340px, calc(100vw - 40px));
    padding: 0;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: #1c1c1e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.modal-body {
    margin: 0;
    padding: 24px 20px 20px;
}

.modal-error {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    color: #d00000;
    text-align: center;
}

.modal-error:empty {
    display: none;
}

.create-form input.invalid {
    border-color: #d00000;
    outline-color: #d00000;
}

.modal-sub {
    flex: 1 1 100%;
    margin: 0 0 4px;
    font-size: 13px;
    color: #6e6e73;
    text-align: center;
}

.modal-title {
    flex: 1 1 100%;
    margin: 0 0 8px;
    font-size: 17px;
    text-align: center;
}

.top-title {
    font-family: 'Rouge Script', cursive;
    font-weight: 400;
    font-size: 28px;
    margin: 0;
}

.login-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo {
    display: block;
    width: 161px;
    height: 161px;
    object-fit: cover;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
}

.brand h1 {
    font-size: 28px;
    margin: 0 0 8px;
}

.brand p {
    font-size: 14px;
    color: #6e6e73;
    margin: 0;
}

.spacer {
    flex: 1;
}

.btn-kakao {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: #fee500;
    color: #1c1c1e;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card h2 {
    font-size: 16px;
    margin: 0 0 8px;
}

.card .notice {
    white-space: pre-line;
    font-size: 12px;
    color: #ff3b30;
    margin: 0 0 16px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .label {
    color: #6e6e73;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.room-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.room-list li {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.room-list a {
    color: #1c1c1e;
    text-decoration: none;
    font-weight: 600;
}

.empty-notice {
    color: #6e6e73;
    font-size: 14px;
    text-align: center;
    margin-top: 32px;
}

.create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.create-form input[type="text"],
.create-form input[type="password"] {
    flex: 1 1 100%;
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font-size: 14px;
}

.create-form button {
    flex: 1 1 100%;
    padding: 12px 0;
    background: #fee500;
    border: none;
    border-radius: 10px;
    font-weight: 600;
}

.room-list .lock-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    color: #8e8e93;
}

/* 채팅방 목록 화면: 카드 높이를 화면에 맞추고, 방 목록만 안에서 스크롤한다. 제목 바와 아래 버튼은 그대로 있다. */
.list-page .screen {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

@media (min-width: 520px) {
    .list-page .screen {
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }
}

.list-page .room-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
    margin: 8px -4px;
}

/* 스크롤 바는 가는 선만 남긴다: 배경과 화살표 없이 연한 막대 하나. */
.list-page .room-list::-webkit-scrollbar {
    width: 4px;
}

.list-page .room-list::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* 크롬·엣지·사파리 외 브라우저(파이어폭스)는 표준 속성으로 같은 모양을 낸다. */
@supports not selector(::-webkit-scrollbar) {
    .list-page .room-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(60, 80, 100, 0.28) transparent;
    }
}

.list-page .room-list::-webkit-scrollbar-track {
    background: transparent;
}

.list-page .room-list::-webkit-scrollbar-thumb {
    background: rgba(60, 80, 100, 0.28);
    border-radius: 999px;
}

.room-list li.room-row {
    padding: 0;
}

.room-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 12px;
    text-align: left;
    font-family: 'Ownglyph Sobak Hangul', 'Ownglyph Sobak', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #1c1c1e;
    cursor: pointer;
}

.room-item .lock-icon {
    margin-left: 0;
}

.room-meta {
    margin-left: auto;
    padding-left: 8px;
    color: #8e8e93;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.room-list li.selected {
    background: #fffbe0;
    box-shadow: 0 0 0 2px #fee500, 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 화면 맨 아래에 붙어 있는 버튼 영역 — 목록이 길어도 스크롤과 상관없이 아래에 남는다. */
.bottom-bar {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 12px 0 0;
    background: #e4f0f7;
    border-radius: 0 0 28px 28px;
}

button.btn-kakao {
    font-family: inherit;
    cursor: pointer;
}

.btn-kakao:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.unread-by {
    font-size: 11px;
    color: #a0a0a5;
    margin-top: 4px;
}

/* ===== 캘린더 팝업 ===== */
.modal.wide {
    width: min(400px, calc(100vw - 24px));
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 8px 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.calendar-month-wrap {
    position: relative;
    display: inline-block;
}

/* 달 이름 위에 투명하게 겹쳐 둔 달 선택칸: 누르면 브라우저 달 선택창이 열린다 */
.calendar-month-pick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.calendar-today-btn {
    padding: 4px 10px;
    background: #f2f2f7;
    border: none;
    border-radius: 12px;
    color: #1c1c1e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.calendar-nav-btn {
    min-width: 44px;
    min-height: 36px;
    padding: 0 10px;
    background: none;
    border: none;
    color: #1c1c1e;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.calendar-grid th,
.calendar-grid td {
    padding: 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.calendar-grid th {
    padding: 8px 0;
    background: #fafafa;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 600;
}

.calendar-grid th.red,
.day-num.red {
    color: #d00000;
}

.calendar-grid td.today {
    background: #fff7d6;
}

.day-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0;
    background: none;
    border: none;
    color: #1c1c1e;
    font: inherit;
    cursor: pointer;
}

.day-num {
    font-size: 14px;
}

.calendar-grid td.today .day-num {
    font-weight: 700;
}

/* 일정이 있는 날: 칸 오른쪽 위에 빨간 동그라미와 일정 개수 */
.day-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
}

.section-title {
    margin: 20px 0 8px;
    font-size: 15px;
}

.empty-notice.compact {
    margin: 8px 0 0;
}

.schedule-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 100px;
    overflow-y: auto;
}

.schedule-list::-webkit-scrollbar {
    width: 4px;
}

.schedule-list::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.schedule-list::-webkit-scrollbar-track {
    background: transparent;
}

.schedule-list::-webkit-scrollbar-thumb {
    background: rgba(60, 80, 100, 0.28);
    border-radius: 999px;
}

@supports not selector(::-webkit-scrollbar) {
    .schedule-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(60, 80, 100, 0.28) transparent;
    }
}

.schedule-list li {
    margin-bottom: 6px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #eef4f8;
    color: #1c1c1e;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* 일정 제목은 첫 화면 설명글과 같은 손글씨체(온글잎 소박체) */
.schedule-title {
    min-width: 0;
    overflow: hidden;
    font-family: 'Ownglyph Sobak Hangul', 'Ownglyph Sobak', sans-serif;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-date {
    flex: none;
    color: #6e6e73;
    font-size: 12px;
}

.d-day {
    flex: none;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 8px;
    background: #fee500;
    font-size: 12px;
    font-weight: 700;
}

/* 일정 등록 팝업 */
.day-list {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-bottom: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: #eef4f8;
    color: #1c1c1e;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.day-item-title {
    min-width: 0;
    overflow: hidden;
    font-family: 'Ownglyph Sobak Hangul', 'Ownglyph Sobak', sans-serif;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-item-time {
    flex: none;
    color: #6e6e73;
    font-size: 12px;
}

.time-field {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #4a5b69;
    font-size: 14px;
}

.time-field input {
    padding: 10px 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
}

/* 일정 상세 팝업의 삭제 버튼(방장에게만 그려진다) */
.danger-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px 0;
    border: none;
    border-radius: 10px;
    background: #ffe5e5;
    color: #d00000;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.danger-btn:disabled {
    opacity: 0.5;
}

.chat-screen {
    height: 100vh;
    height: 100dvh;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: #e4f0f7;
    border-radius: 28px;
    overflow: hidden;
}

@media (min-width: 520px) {
    .chat-screen {
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }
}

/* 방 제목 바: 카드 배경(하늘색)과 같은 색. 왼쪽 뒤로, 가운데 방 이름, 오른쪽 달력 아이콘. */
.chat-header {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header .header-actions {
    display: flex;
    flex: none;
    gap: 12px;
    align-items: center;
    margin-left: auto;
}

.header-icon {
    padding: 0;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

/* 방장 메뉴 팝업 */
.owner-menu-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: #eef4f8;
    color: #1c1c1e;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.owner-menu-btn span:last-child {
    color: #8e8e93;
    font-size: 20px;
}

.owner-back {
    margin: -8px 0 4px -6px;
    padding: 6px;
    background: none;
    border: none;
    color: #5f7080;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.owner-panel .modal-title {
    margin-bottom: 4px;
}

.create-form textarea {
    flex: 1 1 100%;
    min-height: 110px;
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.back-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 6px 6px;
    margin: -8px 0 0 -6px;
    color: #1c1c1e;
    font-size: 15px;
    text-decoration: none;
    border-radius: 8px;
}

.back-btn span:first-child {
    font-size: 35px;
    line-height: 1;
}

.chat-header .back-btn {
    flex: none;
    margin: 0;
}

.chat-header h1 {
    flex: 1;
    min-width: 0;
    margin: 0 0 0 8px;
    overflow: hidden;
    font-size: 16px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 대화 영역: 카카오톡처럼 날짜 구분선, 상대방은 프로필+닉네임+흰 말풍선, 내 글은 노란 말풍선만 오른쪽에. */
.chat-day {
    align-self: center;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(60, 80, 100, 0.22);
    color: #fff;
    font-size: 12px;
}

.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.chat-row.mine {
    flex-direction: row-reverse;
}

.chat-row.cont {
    margin-top: -6px;
}

.chat-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c5d3de var(--avatar-silhouette) center / 72% no-repeat;
}

.chat-avatar {
    position: relative;
    overflow: hidden;
}

.chat-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-avatar.blank {
    visibility: hidden;
}

.chat-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 78%;
}

.chat-row.mine .chat-main {
    align-items: flex-end;
}

.chat-name {
    color: #4a5b69;
    font-size: 12px;
}

.chat-line {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.chat-row.mine .chat-line {
    flex-direction: row-reverse;
}

.chat-bubble {
    min-width: 0;
    padding: 9px 12px;
    border-radius: 4px 14px 14px 14px;
    background: #fff;
}

.chat-row.mine .chat-bubble {
    border-radius: 14px 4px 14px 14px;
    background: #fee500;
}

.chat-row.cont .chat-bubble {
    border-radius: 14px;
}

.chat-meta {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    color: #5f7080;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.chat-row.mine .chat-meta {
    align-items: flex-end;
}

.chat-unread {
    color: #c98a00;
    font-weight: 700;
}

.chat-bubble .content {
    font-size: 14px;
    word-break: break-word;
    white-space: pre-line;
}

.chat-bubble .content a {
    color: #0050d0;
    text-decoration: underline;
    word-break: break-all;
}

.chat-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #ececec;
}

.chat-input-bar input[type="text"] {
    flex: 1;
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 20px;
    font-size: 14px;
}

.chat-input-bar button {
    padding: 0 18px;
    background: #fee500;
    border: none;
    border-radius: 20px;
    font-weight: 600;
}

.post-list li {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    list-style: none;
}

.post-list a {
    color: #1c1c1e;
    text-decoration: none;
    font-weight: 600;
    display: block;
}

.post-list .meta {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.post-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.post-form input[type="text"],
.post-form textarea {
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
}

.post-form textarea {
    min-height: 140px;
    resize: vertical;
}

.post-form label {
    font-size: 13px;
    color: #6e6e73;
}

.post-form button {
    padding: 14px 0;
    background: #fee500;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
}

.post-meta {
    font-size: 13px;
    color: #6e6e73;
    margin: 4px 0 16px;
}

.post-content {
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 15px;
}

.post-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.post-images img {
    width: 100%;
    border-radius: 12px;
}

.error-box {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    margin-top: 48px;
    text-align: center;
}

.error-box h1 {
    font-size: 16px;
    margin: 0 0 12px;
}

.error-box p {
    color: #6e6e73;
    font-size: 14px;
    margin: 0 0 20px;
}

.notice-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid #f0e4a8;
    background: #fff7d6;
    color: #1c1c1e;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.notice-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-content {
    outline: none;
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px;
    border-radius: 10px;
    background: #f3f7fa;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.modal-hint {
    flex: 1 1 100%;
    margin: 0;
    color: #6e7f8c;
    font-size: 12px;
}

.form-message {
    flex: 1 1 100%;
    margin: 0;
    color: #d00000;
    font-size: 13px;
    text-align: center;
}

.form-message:empty {
    display: none;
}

.form-message.ok {
    color: #1a7f3c;
}

.owner-form input[type="text"] {
    flex: 1 1 100%;
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font-size: 14px;
}

.notice-label {
    font-weight: 700;
    color: #8a6d00;
    flex-shrink: 0;
}

.room-tools {
    background: #fff;
    border-bottom: 1px solid #ececec;
    padding: 10px 16px;
    font-size: 13px;
}

.room-tools summary {
    cursor: pointer;
    color: #6e6e73;
}

.notice-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.notice-form textarea {
    padding: 10px;
    border: 1px solid #d8d8dc;
    border-radius: 8px;
    font-size: 13px;
    min-height: 60px;
    font-family: inherit;
}

.notice-form button {
    align-self: flex-end;
    padding: 6px 14px;
    background: #fee500;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

.member-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.member-list {
    max-height: 50vh;
    overflow-y: auto;
}

.member-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.member-list li:last-child {
    border-bottom: none;
}

.member-avatar {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: #c5d3de var(--avatar-silhouette) center / 72% no-repeat;
}

.member-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-tag {
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fff1b8;
    color: #7a5b00;
    font-size: 11px;
    font-weight: 700;
}

.member-tag.me {
    background: #e3eef6;
    color: #3d5a73;
}

.member-status {
    font-size: 12px;
    color: #6e6e73;
    flex: 1;
}

.kick-btn,
.unkick-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.kick-btn {
    background: #ffe5e5;
    color: #d00000;
}

.unkick-btn {
    background: #e5f0ff;
    color: #0050d0;
}

/* 팝업 자체가 처음 포커스를 받아도 테두리를 그리지 않는다(첫 버튼에 굵은 테두리가 생기는 것을 막는다). */
.modal:focus,
.modal:focus-visible {
    outline: none;
}

/* 날짜 팝업 우측 상단 + 버튼. 누르면 일정 등록 양식이 나타난다 */
.day-body {
    position: relative;
}

.day-add-btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

.day-add-btn[hidden],
#dayForm[hidden],
#dayEmpty[hidden] {
    display: none;
}

/* 일정 참석 버튼(날짜 팝업의 각 일정 아래)과 참석자 보기 버튼(일정 상세) */
.day-list li {
    margin-bottom: 10px;
}

.day-list .day-item {
    margin-bottom: 4px;
}

.attend-btn {
    display: block;
    margin: 0 0 0 auto;
    padding: 6px 16px;
    border: none;
    border-radius: 14px;
    background: #fee500;
    color: #1c1c1e;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.attend-btn.on {
    background: #e5e5ea;
    color: #6e6e73;
}

.attend-btn:disabled {
    opacity: 0.6;
}

#attendeeEmpty[hidden] {
    display: none;
}

/* 날짜 팝업: 일정 고르기(선택 표시) + 상세 › 버튼, 하단 참석 버튼 하나 */
.day-list li {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.day-list .day-item {
    flex: 1;
    width: auto;
}

.day-item.selected {
    background: #fff4a3;
    outline: 2px solid #fee500;
}

.day-detail-btn {
    flex: none;
    width: 36px;
    margin-bottom: 4px;
    border: none;
    border-radius: 10px;
    background: #eef4f8;
    color: #6e6e73;
    font-size: 20px;
    cursor: pointer;
}

.attend-btn {
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 15px;
}

.attend-btn[hidden] {
    display: none;
}

.day-list[hidden],
#dayMessage[hidden] {
    display: none;
}

/* 글쓰기 팝업의 분류 콤보박스·파일 입력, 목록·상세의 분류 표시 */
.create-form label {
    flex: 1 1 100%;
    font-size: 13px;
    color: #6e6e73;
}

.create-form input[type="file"] {
    flex: 1 1 100%;
    font-size: 13px;
}

.post-category {
    display: inline-block;
    margin-bottom: 2px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #fff1b8;
    color: #7a5b00;
    font-size: 12px;
    font-weight: 700;
}

/* 글쓰기 팝업의 콤보박스: 그 자리에서 펼쳐지는 목록 */
.combo {
    position: relative;
    flex: 1 1 100%;
}

.create-form .combo-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.create-form .combo-btn.invalid {
    border-color: #d00000;
}

.combo-arrow {
    color: #8e8e93;
}

.combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 4px 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    list-style: none;
}

.combo-list[hidden] {
    display: none;
}

.combo-list li {
    padding: 12px;
    font-size: 15px;
    cursor: pointer;
}

.combo-list li:hover,
.combo-list li:focus {
    background: #fff4a3;
    outline: none;
}

/* 팝업 양식에서 숨긴 칸, 나의선곡 글의 링크 */
.create-form [hidden] {
    display: none;
}

.post-link {
    color: #1a5fb4;
    word-break: break-all;
}

/* Community 목록: 좌우로 꽉 차게, 작성자는 한 줄 오른쪽 끝에 */
.post-list {
    flex: 1;
    min-height: 0;
    margin: 12px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.post-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-list li .post-category {
    flex: none;
    margin: 0;
}

.post-list li a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-list li .meta {
    flex: none;
    max-width: 30%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 글쓰기 팝업의 투표 양식: 선택지 줄 */
.create-form .poll-fields {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.poll-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-row {
    display: flex;
    gap: 6px;
}

.create-form .poll-row input {
    flex: 1;
    min-width: 0;
}

.create-form .poll-remove {
    flex: none;
    width: 40px;
    padding: 0;
    background: #eef4f8;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
}

.create-form .poll-add {
    flex: none;
    background: #eef4f8;
    cursor: pointer;
}

.create-form .poll-add:disabled {
    opacity: 0.5;
}

.poll-closes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #6e6e73;
}

.poll-closes input {
    padding: 8px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font: inherit;
}

/* 투표 글 상세: 선택지 버튼 + 득표 막대 */
.poll {
    margin: 12px 0;
}

.poll-info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 0 8px;
    font-size: 13px;
    color: #6e6e73;
}

.poll-closed {
    color: #d00000;
    font-weight: 700;
}

.poll-options {
    margin: 0;
    padding: 0;
    list-style: none;
}

.poll-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
    padding: 14px 16px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #fff;
    color: #1c1c1e;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.poll-option:disabled {
    cursor: default;
}

.poll-option.mine {
    border-color: #fee500;
}

.poll-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: #fff1b8;
}

.poll-label,
.poll-count {
    position: relative;
}

.poll-count {
    flex: none;
    font-size: 13px;
    color: #6e6e73;
}

.poll-hint {
    margin: 0;
    font-size: 12px;
    color: #6e6e73;
    text-align: center;
}

/* 투표 양식이 아닐 때는 선택지·마감일 칸을 완전히 감춘다(위 flex 규칙이 hidden을 덮어쓰지 않게) */
.create-form .poll-fields[hidden] {
    display: none;
}

/* 선곡리스트 팝업: 곡마다 카드 한 줄 — 순서 | 곡 제목 | 가수 | (내 리스트면 ▲▼ 삭제) */
.song-head,
.song-item {
    display: grid;
    grid-template-columns: 28px 1.4fr 1fr;
    align-items: center;
    gap: 8px;
}

.song-list.mine .song-head,
.song-list.mine .song-item {
    grid-template-columns: 28px 1.4fr 1fr auto;
}

.song-head {
    padding: 0 12px 6px;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 700;
}

.song-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.song-item {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f5f7fa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    cursor: pointer;
}

.song-item:active {
    background: #e8eef5;
}

.song-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fee500;
    font-size: 12px;
    font-weight: 700;
}

.song-title,
.song-artist {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-title {
    font-weight: 700;
}

.song-artist {
    color: #6e6e73;
}

.song-actions {
    display: flex;
    gap: 10px;
}

.song-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.song-actions button:disabled {
    opacity: 0.3;
    cursor: default;
}

.song-empty {
    margin: 0;
    padding: 16px 0;
    color: #6e6e73;
    text-align: center;
}

.song-close {
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: #d9d9de;
    color: #1c1c1e;
    font: inherit;
    cursor: pointer;
}

/* 곡 상세 팝업 */
.song-detail dl {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px 8px;
    margin: 0;
    font-size: 14px;
}

.song-detail dt {
    color: #6e6e73;
    font-size: 12px;
    font-weight: 700;
}

.song-detail dd {
    margin: 0;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 선곡리스트 드래그앤드랍 */
.song-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    color: #6e6e73;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.song-item.dragging {
    background: #fff8cc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.song-item.dragging .song-handle {
    cursor: grabbing;
}

/* 투표 팝업: 작성자는 우측 상단, 마감은 우측 하단 */
.poll-popup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.poll-head .post-category {
    margin: 0;
}

.poll-question {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
}

.poll-author {
    min-width: 0;
    overflow: hidden;
    color: #6e6e73;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poll-desc {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f2f2f4;
    font-size: 14px;
}

.poll-popup .poll {
    margin: 0;
}

.poll-popup .poll-option {
    border: 1.5px solid #b0b0b8;
}

.poll-popup .poll-option.mine {
    border: 2px solid #f0c800;
}

.poll-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    color: #6e6e73;
    font-size: 13px;
}

.poll-deadline {
    margin-left: auto;
    text-align: right;
}

/* Community 화면과 거기서 뜨는 팝업: 첫 화면 소개 문구와 같은 온글잎 소박체. 제목(.top-title)만 Rouge Script를 그대로 쓴다. */
.post-page {
    font-family: 'Ownglyph Sobak Hangul', 'Ownglyph Sobak', sans-serif;
}

.post-page input,
.post-page textarea,
.post-page button,
.post-page select {
    font-family: inherit;
}

/* 투표 안내 문구는 아래 닫기 버튼 바로 위에 붙인다 */
.poll-popup .poll-hint {
    margin: 8px 0 -6px;
}

.post-popup .post-images {
    margin-top: 0;
}

/* 목록 위 보기 필터: 주제별(왼쪽)·작성자별(오른쪽) 작은 콤보박스 */
.post-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.post-filter {
    max-width: 45%;
    padding: 5px 26px 5px 12px;
    border: 1px solid #d8d8dc;
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #1c1c1e;
    font: inherit;
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.post-filter:focus {
    border-color: #fee500;
    outline: none;
}

.post-list li[hidden] {
    display: none;
}

.post-list li .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.post-date {
    color: #a0a0a8;
    font-size: 10px;
}

/* 이미지 확대 팝업 */
.post-popup .post-images img {
    cursor: zoom-in;
}

.image-viewer {
    width: min(94vw, 720px);
    max-width: none;
}

.image-viewer img {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: 10px;
    object-fit: contain;
}

.image-viewer-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.image-viewer-actions .song-close {
    flex: 1;
    margin-top: 0;
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* 사진 확대: 화면 가득 크게 */
.image-viewer {
    width: 96vw;
    max-width: 1100px;
}

.image-viewer img {
    max-height: 82vh;
}

/* 방장 삭제: 꾹 누르는 줄은 글자 선택·길게 누르기 메뉴가 뜨지 않게 */
.post-list > li,
.song-item {
    -webkit-touch-callout: none;
    user-select: none;
}

.delete-title {
    margin: 4px 0 14px;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}

.delete-confirm {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #d00000;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.delete-confirm + .song-close {
    margin-top: 8px;
}

/* 상대방 프로필을 누르면 뜨는 말풍선: 버튼 두 개가 위아래로 */
.profile-pop {
    position: fixed;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.profile-pop[hidden] {
    display: none;
}

.profile-pop button {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #f5f7fa;
    color: #1c1c1e;
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.profile-pop button:active {
    background: #fee500;
}

/* 피드백 팝업 */
.fb-modal {
    max-height: 90dvh;
    overflow-y: auto;
}

.fb-form {
    margin-top: 8px;
}

.fb-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 100%;
    font-size: 13px;
    color: #6e6e73;
}

.fb-field input {
    padding: 8px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font: inherit;
}

.fb-form textarea {
    flex: 1 1 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.fb-score {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 13px;
}

.fb-score legend {
    padding: 0;
    margin-bottom: 4px;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 700;
}

.fb-score-option {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.fb-saved {
    flex: 1 1 100%;
    margin: 0;
    color: #1a7f37;
    font-size: 13px;
    text-align: center;
}

.fb-sub {
    margin: 18px 0 8px;
    color: #6e6e73;
    font-size: 13px;
}

.fb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #f5f7fa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    cursor: pointer;
}

.fb-item:active {
    background: #e8eef5;
}

.fb-count {
    margin-left: auto;
    color: #6e6e73;
    font-size: 12px;
}

.fb-empty {
    margin: 8px 0;
    color: #6e6e73;
    font-size: 13px;
    text-align: center;
}

.fb-detail {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 10px 8px;
    margin: 8px 0 12px;
    font-size: 14px;
}

.fb-detail dt {
    color: #6e6e73;
    font-size: 12px;
    font-weight: 700;
}

.fb-detail dd {
    margin: 0;
    word-break: break-word;
}

.fb-text {
    white-space: pre-wrap;
}

.fb-score-value {
    font-weight: 700;
}

.fb .owner-back[hidden] {
    display: none;
}

/* ===== 피드백·프로필 팝업: 좌우로 좁게, 조금 더 귀엽게 ===== */
.fb-modal {
    width: min(310px, calc(100vw - 64px));
    border-radius: 26px;
    background: #fffdf7;
}

.profile-viewer {
    width: min(290px, calc(100vw - 64px));
    max-width: none;
    border-radius: 26px;
    background: #fffdf7;
    text-align: center;
}

.profile-viewer img {
    width: 220px;
    max-width: 100%;
    height: 220px;
    margin: 4px auto 0;
    border: 4px solid #f3e7b3;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.profile-viewer img[hidden] {
    display: none;
}

.fb .modal-title {
    margin-bottom: 10px;
    font-size: 17px;
    text-align: center;
}

.fb-form input[type="text"],
.fb-form input[type="date"],
.fb-form textarea {
    padding: 10px 14px;
    border: 1.5px solid #f3e7b3;
    border-radius: 16px;
    background: #fffef9;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.fb-form input:focus,
.fb-form textarea:focus {
    border-color: #e8d58a;
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 213, 138, 0.35);
}

.fb-score {
    justify-content: center;
    gap: 6px;
}

.fb-score legend {
    width: 100%;
    margin-bottom: 6px;
    text-align: center;
}

.fb-score-option {
    position: relative;
}

.fb-score-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.fb-score-option span {
    display: block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f1ea;
    color: #6e6e73;
    font-size: 13px;
}

.fb-score-option span::before {
    content: '⭐ ';
}

.fb-score-option input:checked + span {
    background: #fee500;
    color: #1c1c1e;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fb-form button[type="submit"] {
    border-radius: 999px;
    background: linear-gradient(180deg, #ffec3d, #fee500);
    box-shadow: 0 3px 8px rgba(254, 229, 0, 0.55);
    font-weight: 700;
}

.fb-item {
    border-left: 5px solid #f3e7b3;
    border-radius: 16px;
    background: #fff8dc;
}

.fb-item:not(.fb-target)::before {
    content: '📝';
}

.fb-sub {
    text-align: center;
}

.fb-detail dt {
    align-self: start;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff1b8;
    color: #7a5b00;
    text-align: center;
}

.fb .song-close {
    border-radius: 999px;
}

/* 프로필 말풍선: 프로필 쪽을 향한 꼬리가 달린 둥근 말풍선 */
.profile-pop {
    padding: 8px;
    border-radius: 18px;
    background: #fffdf7;
}

.profile-pop::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #fffdf7;
    transform: rotate(45deg);
}

.profile-pop button {
    position: relative;
    border-radius: 12px;
    background: #fff8dc;
    font-weight: 600;
}

/* 짧은 알림 */
.chat-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    z-index: 40;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.88);
    color: #fff;
    font-size: 13px;
    transform: translateX(-50%);
}

.chat-toast[hidden] {
    display: none;
}

/* 오늘의 점수: 라디오 버튼을 한 줄에 좌우로 */
.fb-score {
    flex-wrap: nowrap;
    gap: 4px;
}

.fb-score-option {
    flex: 1;
    min-width: 0;
}

.fb-score-option span {
    padding: 7px 0;
    font-size: 12px;
    text-align: center;
}

.fb-score-option span::before {
    content: none;
}

/* 마이크 말풍선: 버튼 아래로 열리므로 꼬리는 위쪽 오른쪽에 */
.mic-pop {
    min-width: 150px;
}

.mic-pop::before {
    top: -6px;
    left: auto;
    right: 18px;
}

.fb-field input {
    flex: 1;
    min-width: 0;
}

/* 피드백 팝업 테두리와 상세 카드 */
.fb-modal {
}

.fb .owner-back {
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff8dc;
    font-size: 16px;
    line-height: 1.2;
}

.fb-item {
    border: 1.5px solid #f3e7b3;
    border-left-width: 5px;
}

.fb-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 4px;
}

.fb-row {
    display: flex;
    gap: 8px;
}

.fb-row > .fb-card {
    flex: 1;
    min-width: 0;
}

.fb-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    border: 1.5px solid #f3e7b3;
    border-radius: 14px;
    background: #fffef9;
}

.fb-card-label {
    color: #7a5b00;
    font-size: 11px;
    font-weight: 700;
}

.fb-card-value {
    font-size: 14px;
    word-break: break-word;
}

.profile-pop {
}

.profile-pop button {
    border: 1.5px solid #f3e7b3;
}

.profile-viewer {
}

/* ===== Spot 팝업 ===== */
.spot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.spot-head .modal-title {
    margin: 0;
    text-align: left;
}

.spot-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fee500;
    color: #1c1c1e;
    cursor: pointer;
}

.spot .owner-menu-btn {
    background: #fff8dc;
}

.spot-select {
    max-width: none;
    width: 100%;
    flex: 1 1 100%;
    padding: 9px 30px 9px 14px;
    border-radius: 16px;
    border: 1.5px solid #f3e7b3;
    font-size: 14px;
}

.spot-when {
    flex: none;
    color: #7a5b00;
    font-size: 12px;
    font-weight: 700;
}

.spot-place {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-delete {
    margin-top: 10px;
    border-radius: 999px;
}

.spot .fb-item:not(.fb-target)::before {
    content: "📍";
}

/* 팝업 안 뒤로가기(‹) 버튼: 테두리·배경 없이 화살표만 */
.fb .owner-back {
    border: none;
    background: none;
    box-shadow: none;
}

/* Spot 등록: 공지 등록/수정 팝업과 같은 입력칸 모양 */
.owner-form input[type="url"] {
    flex: 1 1 100%;
    padding: 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font-size: 14px;
}

.spot-modal {
    max-height: 90dvh;
    overflow-y: auto;
}

.spot .spot-select {
    width: 100%;
    padding: 12px 30px 12px 12px;
    border: 1px solid #d8d8dc;
    border-radius: 10px;
    font-size: 14px;
}

.spot-when-row {
    display: flex;
    flex: 1 1 100%;
    gap: 6px;
}

.spot-when-row .spot-select {
    flex: 1;
    min-width: 0;
    padding-left: 10px;
}

.spot .owner-menu-btn {
    background: #eef4f8;
}

/* ===== 공통 규칙: + 버튼은 채팅방 우측 상단 아이콘(.header-icon)과 같은 모양, 뒤로가기(‹)는 어디서나 같은 크기·두께 ===== */
.plus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #1c1c1e;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
    font-weight: 600;
}

.back-btn span:first-child,
.owner-back,
.fb .owner-back {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
    font-weight: 400;
}

.owner-back,
.fb .owner-back {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px 6px 6px;
    margin: -8px 0 0 -6px;
    border: none;
    background: none;
    box-shadow: none;
    color: #1c1c1e;
    font-size: 35px;
    line-height: 1;
    cursor: pointer;
}

/* Spot 하위 팝업: ‹ 버튼과 제목을 한 줄에 두어 제목이 맨 위에 오게 */
.spot-head .owner-back {
    margin: 0 0 0 -6px;
}

.spot-head .modal-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    text-align: left;
}

/* 뒤로가기(‹): 글자 모양상 낮게 앉아 보이므로 모든 화면에서 같은 만큼 위로 올려 제목보다 조금 높게 */
.back-btn span:first-child,
.owner-back,
.fb .owner-back {
    position: relative;
    top: -4px;
}

/* 방장의 피드백 삭제 버튼 */
.fb-delete {
    margin-left: auto;
    padding: 2px 6px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
}

/* 빙그레체 — 채팅방 화면용. 흔히 쓰는 한글 2,350자와 영문·숫자·기호만 담은 서브셋이라, 없는 글자는 기본 글꼴로 표시된다. */
@font-face {
    font-family: 'Binggrae';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/binggrae.woff2') format('woff2');
}

@font-face {
    font-family: 'Binggrae';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/binggrae-bold.woff2') format('woff2');
}

.chat-screen {
    font-family: 'Binggrae', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
}

.chat-screen input,
.chat-screen textarea,
.chat-screen button,
.chat-screen select {
    font-family: inherit;
}

/* 첫 화면(로그인)의 카카오 버튼만 원래 노란색 */
.login-page .btn-kakao {
    background: #fee500;
}

/* 채팅방 공지: 테두리까지 채우지 않고 안쪽으로 띄워 둥글게, 둘레에는 화면 배경색이 보이게 */
.notice-banner {
    flex: none;
    box-sizing: border-box;
    width: calc(100% - 24px);
    margin: 8px 12px 4px;
    border: none;
    border-radius: 14px;
}

/* 참여자 팝업의 읽음 / 안읽음 */
.read-chip {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.read-chip.read {
    background: #e3f4e6;
    color: #1a7f37;
}

.read-chip.unread {
    background: #ffe4e1;
    color: #c0392b;
}

/* 메시지 입력줄: 좁은 휴대폰 화면에서는 입력칸이 줄어들고, 전송 버튼은 줄어들거나 세로로 꺾이지 않게 한다 */
.chat-input-bar {
    box-sizing: border-box;
    align-items: stretch;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.chat-input-bar input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-bar button {
    flex: none;
    min-width: 60px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

/* 새 채팅 알림 켜기·끄기 */
.push-box {
    margin: 8px 0 0;
    text-align: center;
}

.push-toggle {
    max-width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #1c1c1e;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.push-toggle:disabled {
    opacity: 0.7;
    cursor: default;
}

.push-message {
    margin: 6px 4px 0;
    color: #6e6e73;
    font-size: 12px;
    line-height: 1.4;
}

.push-message:empty {
    display: none;
}

/* ===== 피드(인스타그램형): 흰 바탕, 검정 글씨, 얇은 선, 화면 가득한 사진 ===== */
.feed-page {
    background: #fff;
}

.feed-screen {
    padding-bottom: 0;
    background: #fff;
    color: #262626;
}

.feed-screen .top-bar {
    background: #fff;
    border-bottom: 1px solid #efefef;
}

.feed-title {
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
}

.feed-screen svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feed-list {
    display: flex;
    flex-direction: column;
    margin: 0 -20px;
}

.feed-card {
    border-bottom: 1px solid #efefef;
    padding-bottom: 8px;
}

.feed-repost-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 14px 0;
    color: #737373;
    font-size: 12px;
    font-weight: 600;
}

.feed-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}

.feed-author {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #262626;
    text-decoration: none;
}

.feed-author-name {
    overflow: hidden;
    font-weight: 700;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 신고·차단 */
.safety-more {
    flex: none;
    padding: 2px 4px;
    border: none;
    background: none;
    color: #262626;
    cursor: pointer;
}

.safety-more.small {
    color: #8e8e8e;
}

.safety-link {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background: #fff;
    color: #262626;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.safety-menu,
.safety-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.safety-item {
    padding: 13px;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    background: #fff;
    color: #262626;
    font-size: 15px;
    cursor: pointer;
}

.safety-item.primary {
    flex: 1;
    border-color: #fee500;
    background: #fee500;
    font-weight: 700;
}

.safety-item.muted {
    color: #8e8e8e;
}

.safety-hint {
    margin: 10px 0 0;
    color: #8e8e8e;
    font-size: 13px;
}

.safety-reasons {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.safety-reason {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    font-size: 15px;
}

.safety-form textarea {
    padding: 10px;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    resize: none;
}

.safety-actions {
    display: flex;
    gap: 8px;
}

.safety-page-title {
    margin: 16px 16px 8px;
    font-size: 16px;
}

.safety-block-list {
    margin: 0;
    padding: 0 16px;
    list-style: none;
}

.safety-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
}

.safety-block-name {
    flex: 1;
    font-size: 15px;
}

.safety-unblock {
    padding: 6px 12px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.feed-delete {
    flex: none;
    padding: 2px 4px;
    border: none;
    background: none;
    color: #262626;
    cursor: pointer;
}

.feed-avatar {
    position: relative;
    display: inline-block;
    flex: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: #c5d3de var(--avatar-silhouette) center / 72% no-repeat;
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #e1306c;
}

.feed-avatar.big {
    width: 84px;
    height: 84px;
}

.feed-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-media {
    position: relative;
    background: #fafafa;
}

.feed-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.feed-slides::-webkit-scrollbar {
    display: none;
}

.feed-slides img {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    scroll-snap-align: center;
}

.feed-count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
}

.feed-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 4px;
}

.feed-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: #262626;
    font: inherit;
    cursor: pointer;
}

.feed-action:disabled {
    opacity: 0.5;
}

.feed-action-count {
    font-size: 13px;
    font-weight: 600;
}

.feed-share {
    margin-left: auto;
}

.feed-like.active svg {
    fill: #ed4956;
    stroke: #ed4956;
}

.feed-repost.active svg {
    stroke: #00a86b;
}

.feed-repost.active .feed-action-count {
    color: #00a86b;
}

.feed-caption {
    margin: 0;
    padding: 4px 14px 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.feed-caption-name {
    margin-right: 4px;
    font-weight: 700;
}

.feed-comments-link {
    padding: 4px 14px 0;
    border: none;
    background: none;
    color: #737373;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.feed-time {
    margin: 4px 0 0;
    padding: 0 14px;
    color: #8e8e8e;
    font-size: 11px;
}

.feed-more {
    align-self: center;
    margin: 12px 0;
    padding: 8px 20px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background: #fff;
    color: #262626;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.feed-more[hidden] {
    display: none;
}

.feed-file {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #6e6e73;
}

.feed-file-count {
    flex: 1 1 100%;
    margin: 0;
    color: #6e6e73;
    font-size: 12px;
}

/* 프로필 */
.feed-profile {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 4px;
}

.feed-profile .feed-avatar.big {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e1306c;
}

.feed-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
}

.feed-stats strong {
    font-size: 18px;
}

.feed-profile-tabs {
    display: flex;
    margin: 0 -20px;
    border-top: 1px solid #efefef;
}

.feed-profile-tabs a {
    flex: 1;
    padding: 12px 0;
    border-bottom: 1px solid transparent;
    color: #8e8e8e;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.feed-profile-tabs a.active {
    border-bottom-color: #262626;
    color: #262626;
}

.feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 0 -20px;
}

.feed-grid-item {
    position: relative;
    padding: 0;
    border: none;
    background: #fafafa;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.feed-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-multi {
    position: absolute;
    top: 4px;
    right: 6px;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.feed-view {
    width: min(380px, calc(100vw - 24px));
    max-height: 90dvh;
    overflow-y: auto;
}

.feed-view .modal-body {
    padding: 0;
}

/* 하단 탭: 선 아이콘만 */
.feed-tabs {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    margin: auto -20px 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #efefef;
    border-radius: 0 0 28px 28px;
    background: #fff;
}

.feed-tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    color: #8e8e8e;
    text-decoration: none;
}

.feed-tab.active {
    color: #262626;
}

.feed-tab.active svg {
    fill: #262626;
}

/* 댓글·공유 시트: 화면 아래에서 올라오는 모양 */
.feed-sheet {
    width: 100%;
    max-width: 420px;
    max-height: 75dvh;
    margin: auto auto 0;
    padding: 0;
    border: none;
    border-radius: 16px 16px 0 0;
    background: #fff;
    color: #262626;
    overflow: hidden;
}

.feed-sheet::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.feed-sheet-body {
    display: flex;
    flex-direction: column;
    max-height: 75dvh;
    padding: 0 16px 16px;
    overflow-y: auto;
}

.feed-sheet-title {
    margin: 0;
    padding: 14px 0 10px;
    border-bottom: 1px solid #efefef;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.feed-comments {
    display: flex;
    flex-direction: column;
    padding: 0 16px 12px;
    max-height: 75dvh;
}

.feed-comments-empty {
    margin: 24px 0;
    color: #8e8e8e;
    font-size: 13px;
    text-align: center;
}

.feed-comment-list {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    overflow-y: auto;
    list-style: none;
}

.feed-comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.feed-comment .feed-avatar {
    box-shadow: none;
}

.feed-comment-body {
    flex: 1;
    min-width: 0;
}

.feed-comment-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.feed-comment-time {
    color: #8e8e8e;
    font-size: 11px;
}

.feed-comment-delete {
    flex: none;
    padding: 2px;
    border: none;
    background: none;
    color: #8e8e8e;
    cursor: pointer;
}

.feed-comment-form {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #efefef;
}

.feed-comment-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #dbdbdb;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.feed-comment-form button {
    flex: none;
    padding: 0 6px;
    border: none;
    background: none;
    color: #0095f6;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.feed-share-actions {
    display: flex;
    gap: 8px;
    padding: 14px 0 4px;
}

.feed-share-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background: #fff;
    color: #262626;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.feed-share-btn[hidden] {
    display: none;
}

.feed-share-sub {
    margin: 14px 0 6px;
    color: #737373;
    font-size: 12px;
    font-weight: 600;
}

.feed-share-rooms {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feed-share-room {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #efefef;
    border-radius: 8px;
    background: #fafafa;
    color: #262626;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.feed-share-room:disabled {
    opacity: 0.5;
}

/* 피드 화면(홈·프로필·게시물): 화면 둘레에 얇은 테두리 */
.feed-screen {
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
}

/* 피드: 화면 크기는 그대로 두고 게시물 목록(프로필은 격자)만 안에서 스크롤한다. 위쪽 바와 아래 탭은 고정 */
.feed-screen .feed-list,
.feed-screen .feed-grid {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.feed-screen .feed-grid {
    align-content: start;
}

.feed-screen .feed-more {
    flex: none;
}

/* 피드의 스크롤 바는 보이지 않게 한다(스크롤은 그대로 된다) */
.feed-screen .feed-list,
.feed-screen .feed-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.feed-screen .feed-list::-webkit-scrollbar,
.feed-screen .feed-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.feed-profile-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 하단 탭: 오른쪽 Social 탭은 아이콘 아래에 이름을 보여준다 */
.feed-tab {
    flex-direction: column;
    gap: 2px;
}

.feed-tab-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* 모임 메인 화면: 오른쪽 위 버튼 두 개(Social, +)와 모임 정보 */
.top-actions {
    position: absolute;
    right: 14px;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(-50%);
}

.feed-group {
    padding: 14px 4px 10px;
}

.feed-group-head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.feed-group-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.feed-group-name {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-group-stats {
    display: flex;
    gap: 22px;
}

.feed-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
}

.feed-stat strong {
    font-size: 18px;
}

.feed-group-intro {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Social은 보기만 한다: 삭제 버튼을 숨긴다 */
.feed-list.read-only .feed-delete {
    display: none;
}

/* 하단 탭의 아이콘은 피드 화면 밖(채팅방 목록)에서도 같은 선 모양으로 */
.feed-tabs svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 채팅방 목록 화면의 하단 탭: 화면 맨 아래에 붙이고, 배경과 선 없이 아이콘만 보이게 한다 */
.screen:not(.feed-screen) .feed-tabs {
    position: static;
    margin: auto -20px -24px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: none;
    border-radius: 0;
    background: none;
}

.screen:not(.feed-screen) .feed-tab {
    padding: 10px 0 14px;
}

/* 홈(모임 메인 화면)의 하단 탭도 배경과 선 없이 아이콘만 */
.feed-screen .feed-tabs {
    border: none;
    border-radius: 0;
    background: none;
}

/* 모임 메인: 가입자 수 버튼, 프로필 수정 버튼 */
.feed-stat-button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.feed-edit-btn {
    width: 100%;
    margin-top: 12px;
    padding: 8px 0;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background: #efefef;
    color: #262626;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 모임 대표 이미지 테두리는 초록색 */
.feed-group .feed-avatar.big {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #34a853;
}

/* 영상: 카드에서는 사진과 같은 정사각형 칸에 맞추고, 격자 칸에서는 첫 화면 위에 재생 표시 */
.feed-slides video {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #000;
    scroll-snap-align: center;
}

.feed-grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.feed-video-mark {
    position: absolute;
    right: 6px;
    bottom: 6px;
    color: #fff;
    font-size: 16px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

/* 모든 화면·팝업에서 스크롤 막대를 보이지 않게 한다(스크롤은 그대로 된다) */
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 홈: 프로필 수정 · 가입하기 두 버튼 */
.feed-group-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.feed-group-buttons .feed-edit-btn {
    flex: 1;
    width: auto;
    margin-top: 0;
}

/* 홈·소셜 화면의 배경색은 채팅 화면과 같게 */
.feed-page {
    background: #f5f5f7;
}

.feed-screen,
.feed-screen .top-bar {
    background: #e4f0f7;
}

.feed-screen .top-bar {
    border-bottom: none;
}

.feed-card {
    background: #fff;
}

/* 가입·탈퇴 확인 팝업의 확인 버튼 */
.confirm-primary {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #fee500;
    color: #1c1c1e;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.confirm-primary.danger {
    background: #d00000;
    color: #fff;
}

.confirm-primary + .song-close {
    margin-top: 8px;
}

/* Social 카드의 모임 사진도 모임 대표 이미지처럼 초록 테두리 */
.feed-avatar.group {
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #34a853;
}

/* 홈: 회원·게시물 숫자와 글씨 크기를 같게(버튼은 기본 글꼴 크기를 따로 지정해서 달라 보였다) */
.feed-stat-button {
    font-family: inherit;
    font-size: 13px;
    line-height: inherit;
}

/* 회원 팝업: 강퇴 버튼은 줄 오른쪽 끝으로 */
.member-list > li > .kick-btn {
    margin-left: auto;
}

/* 내가 가입한 모임 팝업 */
.my-groups-empty {
    margin: 12px 0 16px;
    color: #6e6e73;
    font-size: 14px;
    text-align: center;
}

.my-groups-list {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

a.owner-menu-btn {
    box-sizing: border-box;
    text-decoration: none;
}

.start-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

/* 모임 분류: 이름 아래 경로, 수정 팝업의 콤보박스 세 개 */
.feed-group-category {
    color: #6e6e73;
    font-size: 12px;
}

.feed-category {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 6px;
}

.feed-category select[hidden] {
    display: none;
}

/* 로그인 화면의 테스트계정 버튼: 카카오 버튼 아래, 흰색 */
.login-page .btn-test {
    margin-top: 12px;
    background: #fff;
    border: 1px solid #d8d8dc;
    cursor: pointer;
}

/* ───────── 트레이너 전용 프로필 ───────── */
.trainer-screen {
    padding-bottom: 0;
}

/* 교육하기 홈은 페이지 전체가 아래로 이어지므로, 카드 높이를 내용에 맞춰 늘려 배경과 테두리가 끝까지 이어지게 한다. */
.trainer-page .trainer-screen {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-width: 520px) {
    .trainer-page .trainer-screen {
        height: auto;
        min-height: calc(100vh - 32px);
        min-height: calc(100dvh - 32px);
    }
}

.trainer-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 14px;
}

.trainer-head .feed-avatar.big {
    width: 72px;
    height: 72px;
}

.trainer-name {
    display: block;
    font-size: 20px;
}

.trainer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    font-size: 14px;
    color: #3a3a3c;
}

.trainer-star {
    color: #ffb800;
}

.trainer-star.big {
    font-size: 28px;
}

.trainer-tabs {
    display: flex;
    gap: 18px;
    margin: 0 -20px 14px;
    padding: 0 20px;
    overflow-x: auto;
    border-bottom: 1px solid #c9d8e2;
}

.trainer-tab {
    flex: none;
    padding: 12px 2px;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: #8e9aa6;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.trainer-tab.active {
    border-bottom-color: #1c1c1e;
    color: #1c1c1e;
}

.trainer-panel[hidden] {
    display: none;
}

.trainer-edit {
    margin: 0 0 12px;
}

.trainer-card {
    padding: 18px;
    border: 1px solid #cfdce6;
    border-radius: 16px;
    background: #fff;
}

.trainer-label {
    font-size: 14px;
    font-weight: 700;
}

.trainer-price {
    display: block;
    margin: 8px 0 10px;
    font-size: 22px;
}

.trainer-price.muted {
    color: #8e9aa6;
}

.trainer-clamp {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #55606b;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.trainer-clamp.tall {
    -webkit-line-clamp: 8;
}

.trainer-clamp.open {
    display: block;
    -webkit-line-clamp: unset;
}

.trainer-more {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #8e9aa6;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.trainer-event {
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f3f8fc;
    color: #2a3a48;
    font-size: 14px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.trainer-facts {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.trainer-facts li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.trainer-ico {
    display: inline-flex;
    flex: none;
}

.trainer-ico svg {
    fill: #aab4be;
}

.trainer-ico-stroke {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

.trainer-detail {
    margin-top: 24px;
}

.trainer-detail h2,
.trainer-section-head h2 {
    margin: 0;
    font-size: 18px;
}

.trainer-detail .trainer-clamp {
    margin-top: 10px;
}

.trainer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.trainer-section-head .feed-edit-btn {
    width: auto;
    margin: 0;
    padding: 6px 14px;
}

.trainer-count {
    margin-left: 4px;
    font-weight: 500;
}

.trainer-grid {
    display: grid;
    gap: 12px;
}

.trainer-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.trainer-grid.three {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.trainer-portfolio,
.trainer-media {
    position: relative;
    margin: 0;
}

.trainer-portfolio img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #cfdce6;
}

.trainer-portfolio figcaption {
    margin-top: 6px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.trainer-media img,
.trainer-media video {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #cfdce6;
    background: #000;
}

.trainer-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.trainer-del.text {
    position: static;
    width: auto;
    height: auto;
    margin: 6px 0 0 12px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #d00000;
    font: inherit;
    font-size: 13px;
}

.trainer-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 28px;
}

.trainer-rating span:last-child {
    font-size: 16px;
    color: #55606b;
}

.trainer-features-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.trainer-features-head span {
    color: #8e9aa6;
}

.trainer-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 14px 16px;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f8fc;
    font-size: 15px;
}

.trainer-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: #dcd6ff;
}

.trainer-bar-name,
.trainer-bar-count {
    position: relative;
}

.trainer-bar-count {
    color: #55606b;
}

.trainer-reviews {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.trainer-reviews li {
    padding: 14px 0;
    border-top: 1px solid #cfdce6;
}

.trainer-reviews p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.trainer-review-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.trainer-date {
    margin-left: auto;
    color: #8e9aa6;
    font-size: 12px;
}

.trainer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.trainer-chips span {
    padding: 4px 10px;
    border-radius: 999px;
    background: #e7e3ff;
    color: #4a3fc4;
    font-size: 12px;
}

.trainer-faq {
    position: relative;
    padding: 16px 0;
    border-top: 1px solid #cfdce6;
}

.trainer-faq h3 {
    margin: 0 0 8px;
    font-size: 16px;
    overflow-wrap: anywhere;
}

/* 아래 고정 영역: 채팅하기/가입하기 버튼 아래에 하단 탭(홈·채팅·소셜)이 붙는다 */
.trainer-bottom {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: auto -20px 0;
    padding: 12px 20px 0;
    background: linear-gradient(to top, #e4f0f7 75%, rgba(228, 240, 247, 0));
}

.trainer-bottom .feed-tabs {
    position: static;
    margin: 4px -20px 0;
}

.trainer-cta {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 16px;
    border-radius: 14px;
    background: #6a3df0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.trainer-form {
    max-height: 80vh;
    overflow-y: auto;
}

.trainer-form label span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #55606b;
}

.trainer-form input[type="number"],
.trainer-form input[type="time"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cfdce6;
    border-radius: 10px;
    font: inherit;
}

.trainer-form textarea {
    min-height: 90px;
}

.trainer-form textarea.tall {
    min-height: 160px;
}

.trainer-time-row {
    display: flex;
    gap: 10px;
}

.trainer-time-row label {
    flex: 1;
}

.trainer-checks {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.trainer-checks legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: 13px;
    color: #55606b;
}

.trainer-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.trainer-checks label span,
.trainer-inline span {
    display: inline;
    margin: 0;
    font-size: 14px;
    color: #1c1c1e;
}

.trainer-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 모임 홈의 트레이너 프로필 보기 버튼 */
.feed-group-buttons .trainer-open {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.trainer-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.trainer-fields[hidden] {
    display: none;
}

.trainer-fields > legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
}

.trainer-leave {
    display: block;
    margin: 8px auto 0;
    padding: 4px;
    border: none;
    background: none;
    color: #8e9aa6;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.trainer-leave {
    display: block;
    margin: 8px auto 0;
    padding: 4px;
    border: none;
    background: none;
    color: #8e9aa6;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* ───────── 트레이너 홈(숨고 고수 페이지 구조): 머리말 → 예상 금액 카드 → 고정 탭 → 내용 ───────── */
.trainer-head {
    align-items: center;
    gap: 16px;
    margin: 16px 0 18px;
}

.trainer-avatar {
    flex: none;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 50%;
    background: #c5d3de var(--avatar-silhouette) center / 72% no-repeat;
}

.trainer-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trainer-name {
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.trainer-meta {
    align-items: center;
    gap: 4px 6px;
    margin-top: 8px;
    font-size: 15px;
}

.trainer-meta-item + .trainer-meta-item::before {
    content: "·";
    margin-right: 6px;
    color: #8e9aa6;
}

.trainer-meta-sub {
    margin-left: 3px;
    color: #55606b;
}

.trainer-card {
    margin-bottom: 4px;
    padding: 20px 20px 16px;
    border-radius: 18px;
}

.trainer-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.trainer-price {
    margin: 10px 0 12px;
    font-size: 26px;
    line-height: 1.25;
}

.trainer-clamp.two {
    -webkit-line-clamp: 2;
}

.trainer-more.accent {
    display: block;
    margin-left: auto;
    color: #6a3df0;
}

.trainer-tabs {
    position: sticky;
    top: 0;
    z-index: 9;
    margin: 18px -20px 18px;
    padding-top: 2px;
    background: #e4f0f7;
}

.trainer-tab {
    padding: 14px 2px;
    font-size: 17px;
}

.trainer-event {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 22px;
    padding: 16px;
    border-radius: 12px;
    background: #f3f8fc;
}

.trainer-event-label {
    color: #1e7be0;
    font-weight: 700;
    font-size: 15px;
}

.trainer-event .trainer-clamp {
    flex: 1 1 60%;
}

.trainer-event .trainer-more {
    margin-left: auto;
}

.trainer-facts {
    margin: 0;
    gap: 20px;
}

.trainer-facts li {
    font-size: 18px;
}

.trainer-ico svg {
    width: 26px;
    height: 26px;
}

.trainer-detail h2,
.trainer-section-head h2 {
    font-size: 22px;
}

.trainer-count {
    color: #55606b;
    font-size: 20px;
}

.trainer-portfolio figcaption {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.35;
}

.trainer-rating-count {
    color: #55606b;
    font-size: 18px;
}

.trainer-bars[data-collapsed] .trainer-bar:nth-child(n + 4) {
    display: none;
}

.trainer-bars-more {
    display: block;
    margin: 6px auto 0;
    padding: 6px 12px;
    border: none;
    background: none;
    color: #55606b;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.trainer-bars-more::after {
    content: " ⌄";
}

.trainer-bar-fill {
    background: #e0daff;
}

.trainer-faq h3 {
    font-size: 18px;
}

.trainer-faq {
    padding: 20px 0;
    border-top: none;
}

/* 트레이너 목록(가로로 넘기는 카드) */
.trainer-strip {
    margin: 8px 0 0;
}

.trainer-strip-count {
    margin: 0 0 10px;
    color: #55606b;
    font-size: 15px;
}

.trainer-strip-list {
    display: flex;
    gap: 10px;
    margin: 0 -20px;
    padding: 0 20px 4px;
    overflow-x: auto;
}

.trainer-strip-card {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    width: 200px;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #cfdce6;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.trainer-strip-card.current {
    border: 2px solid #1c1c1e;
}

.trainer-strip-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: #c5d3de;
}

.trainer-strip-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trainer-strip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
    font-size: 13px;
    color: #55606b;
}

.trainer-strip-text strong {
    overflow: hidden;
    color: #1c1c1e;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 포트폴리오 카드 아래의 좋아요·조회수, 크게 보기 팝업 */
.trainer-portfolio {
    cursor: pointer;
}

.trainer-portfolio-stats {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    color: #8e9aa6;
    font-size: 15px;
}

.trainer-portfolio-stats .like.on {
    color: #6a3df0;
}

.trainer-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trainer-view img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
}

.trainer-view-actions {
    display: flex;
    gap: 8px;
}

.trainer-view-actions > * {
    flex: 1;
    margin-top: 0;
}

.trainer-view-actions .feed-edit-btn.on {
    border-color: #6a3df0;
    color: #6a3df0;
}

/* 모임장 전용 수정 버튼들 */
.trainer-mini-edit {
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px solid #b9c7d3;
    border-radius: 999px;
    background: #fff;
    color: #3a3a3c;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.trainer-item-edit {
    position: absolute;
    top: 6px;
    right: 38px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.trainer-del.text.edit {
    color: #1e7be0;
}

/* ───────── 트레이너 홈 한 화면 구조(숨고 고수 프로필): 섹션이 세로로 이어진다 ───────── */
.trainer-headline {
    margin: 4px 0 14px;
    color: #3a3a3c;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.trainer-carousel {
    display: flex;
    gap: 8px;
    margin: 0 -20px 16px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.trainer-carousel-item {
    flex: none;
    width: 46%;
    scroll-snap-align: start;
}

.trainer-carousel-item img,
.trainer-carousel-item video {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
}

.trainer-section {
    scroll-margin-top: 64px;
    margin-bottom: 34px;
}

.trainer-sub {
    margin-top: 30px;
}

.trainer-sub h2 {
    margin: 0 0 12px;
    font-size: 22px;
}

.trainer-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.trainer-sub-head h2 {
    margin: 0;
}

.trainer-sub-head .feed-edit-btn {
    width: auto;
    margin: 0;
    padding: 6px 14px;
}

.trainer-longtext {
    margin: 0;
    color: #3a3a3c;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.trainer-fact-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trainer-fact-text small {
    color: #55606b;
    font-size: 14px;
    white-space: pre-line;
}

.trainer-chips.big {
    gap: 8px;
}

.trainer-chips.big span {
    padding: 10px 16px;
    border: 1px solid #b9c7d3;
    background: #fff;
    color: #1c1c1e;
    font-size: 15px;
}

.trainer-career-total {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #6a3df0;
    font-size: 17px;
}

.trainer-ico.accent svg {
    fill: none;
    stroke: #6a3df0;
    stroke-width: 2;
}

.trainer-ico-stroke.dark {
    stroke: #6a3df0;
}

.trainer-careers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trainer-career {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
}

.trainer-career[hidden] {
    display: none;
}

.trainer-career strong {
    font-size: 16px;
}

.trainer-career-period {
    color: #8e9aa6;
    font-size: 13px;
}

.trainer-career-desc {
    margin: 0;
    color: #8e9aa6;
    font-size: 13px;
    white-space: pre-line;
}

.trainer-row-actions {
    display: flex;
    gap: 4px;
}

.trainer-list-more {
    display: block;
    margin: 8px auto 0;
    padding: 8px 14px;
    border: none;
    background: none;
    color: #6a3df0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.trainer-list-more::after {
    content: " ⌄";
}

.trainer-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 6px;
}

.trainer-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.trainer-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trainer-filter-chip {
    padding: 8px 14px;
    border: 1px solid #b9c7d3;
    border-radius: 999px;
    background: #fff;
    color: #1c1c1e;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.trainer-filter-chip.active {
    border-color: #1c1c1e;
    background: #1c1c1e;
    color: #fff;
}

.trainer-reviews .trainer-review {
    padding: 18px 0;
    border-top: 1px solid #cfdce6;
}

.trainer-review[hidden] {
    display: none;
}

.trainer-review-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trainer-review-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c5d3de var(--avatar-silhouette) center / 72% no-repeat;
}

.trainer-review-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trainer-review-who .trainer-date {
    margin: 0;
}

.trainer-review-title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: 16px;
}

.trainer-review-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
}

.trainer-review-photo {
    display: block;
    width: 96px;
    height: 96px;
    margin-top: 10px;
    object-fit: cover;
    border-radius: 10px;
}

.trainer-reply {
    margin-top: 12px;
    padding: 14px;
    border-radius: 10px;
    background: #f3f8fc;
}

.trainer-reply-top {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.trainer-reply-top .trainer-date {
    margin: 0;
}

.trainer-reply p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* 입장하기 팝업: 동호회·트레이너 모임이 둘 다 있을 때 왼쪽 활동하기 · 오른쪽 교육하기 */
.my-groups-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.my-groups-kinds {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.my-groups-kind {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 184px; /* 처음 높이(약 46px)의 4배 */
    border-radius: 12px;
    background: #f2f2f7;
    color: #1c1c1e;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

#myGroupsClub:checked ~ .my-groups-kinds label[for="myGroupsClub"],
#myGroupsTrainer:checked ~ .my-groups-kinds label[for="myGroupsTrainer"] {
    background: #fee500;
}

.my-groups-split .my-groups-panel {
    display: none;
}

#myGroupsClub:checked ~ .kind-club,
#myGroupsTrainer:checked ~ .kind-trainer {
    display: block;
}

/* 활동하기·교육하기를 누르면 버튼은 사라지고 그 목록만 보인다(팝업을 다시 열면 버튼부터) */
#myGroupsClub:checked ~ .my-groups-kinds,
#myGroupsTrainer:checked ~ .my-groups-kinds {
    display: none;
}

/* 트레이너 홈 오른쪽 위 문의하기: 작은 버튼 */
.trainer-inquire {
    padding: 6px 12px;
    border-radius: 999px;
    background: #6a3df0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* 환영합니다 화면 오른쪽 위 로그아웃 */
.home-logout-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.home-logout {
    padding: 6px 14px;
    border: 1px solid #b9c7d3;
    border-radius: 999px;
    background: #fff;
    color: #3a3a3c;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ───────── 레슨신청 팝업(채팅방 마이크 메뉴) ───────── */
.lesson-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lesson-label {
    padding-left: 6px;
    color: #55606b;
    font-size: 12px;
    font-weight: 700;
}

.fb-form input[type="number"] {
    padding: 10px 14px;
    border: 1.5px solid #f3e7b3;
    border-radius: 16px;
    background: #fffef9;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.fb-form input[type="number"]:focus {
    border-color: #e8d58a;
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 213, 138, 0.35);
}

/* 요청자 닉네임은 바꿀 수 없다: 흐린 배경으로 읽기 전용임을 보여준다. */
.lesson-field input[readonly] {
    background: #f3f1ea;
    color: #6e6e73;
    cursor: default;
}

.lesson-field textarea {
    min-height: 90px;
}

/* 팝업 폭에 맞춘다: 입력칸이 팝업보다 넓어져 좌우 스크롤이 생기지 않도록 폭을 100%로 묶는다. */
#lessonDialog .fb,
#lessonDialog .lesson-field {
    min-width: 0;
    max-width: 100%;
}

#lessonDialog .lesson-field input,
#lessonDialog .lesson-field select,
#lessonDialog .lesson-field textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

#lessonDialog .lesson-field textarea {
    resize: vertical;
}

#lessonDialog .modal-body,
#lessonDialog #lessonBody {
    overflow-x: hidden;
}

/* ───────── 입찰하기(교육하기 하단 탭): 레슨신청 목록·상세 ───────── */
.bid-star-btn {
    display: inline-flex;
    align-items: center;
    color: #b0b6bd;
}

.bid-star-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.bid-star-btn.on {
    color: #f5b50a;
}

.bid-star-btn.on svg {
    fill: currentColor;
}

.bid-heading {
    margin: 4px 0 10px;
    font-size: 18px;
}

.bid-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bid-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bid-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bid-item-title {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bid-item-star {
    color: #f5b50a;
}

.bid-item-tags,
.bid-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}

.bid-item-tags span {
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef4f8;
    color: #3c5568;
}

.bid-item-meta {
    color: #8e8e93;
}

/* 상세는 보기 전용: 입력칸처럼 보이되 흐린 배경 */
.bid-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
}

.bid-detail input,
.bid-detail textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid #dde6ec;
    border-radius: 16px;
    background: #f3f6f8;
    color: #3a3a3c;
    font: inherit;
    font-size: 14px;
}

.bid-detail textarea {
    min-height: 120px;
    resize: none;
}

.bid-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

.bid-close {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

/* ───────── 받은 레슨 제안: 채팅방 목록의 알림(🔔)과 팝업 ───────── */
.top-bar .bell-btn {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
}

.bell-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

#mineDialog button.bid-item {
    width: 100%;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mineDialog .bid-detail input,
#mineDialog .bid-detail textarea {
    min-width: 0;
}

.mine-count {
    flex: none;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef0f2;
    color: #8e8e93;
    font-size: 12px;
}

.mine-count.has {
    background: #ffe5e3;
    color: #d93025;
    font-weight: 700;
}

.mine-proposal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f3f6f8;
}

.mine-proposal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mine-proposal-message {
    margin: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.mine-proposal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mine-accept,
.mine-trainer {
    box-sizing: border-box;
    padding: 8px 14px;
    border: none;
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.mine-accept {
    background: #6a3df0;
    color: #fff;
}

.mine-accept.done {
    background: #d9d9de;
    color: #6e6e73;
    cursor: default;
}

.mine-trainer {
    background: #fff;
    color: #6a3df0;
    border: 1.5px solid #6a3df0;
}

#proposeDialog textarea {
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
}

/* 제안하기 팝업: 왼쪽 제안하기, 오른쪽 닫기를 한 줄에 */
#proposeDialog .propose-actions {
    display: flex;
    gap: 8px;
}

#proposeDialog .propose-actions button {
    flex: 1;
    margin: 0;
}

/* 입찰하기: 제안하기(빨강)·닫기(회색)는 같은 크기로 나란히 */
.bid-propose-btn {
    box-sizing: border-box;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #ff3b30;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.bid-propose-btn:disabled {
    background: #f0a39e;
    cursor: default;
}

.bid-actions {
    flex-direction: row;
    gap: 8px;
}

.bid-actions > .bid-propose-btn,
.bid-actions > .bid-close,
#proposeDialog .propose-actions > button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 제안완료: 기존 알림 숫자와 같은 빨간 표시 */
.bid-done-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bid-item-marks {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

.bid-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bid-proposed-btn {
    padding: 4px 10px;
    border: 1.5px solid #ff3b30;
    border-radius: 12px;
    background: #fff;
    color: #ff3b30;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.bid-proposed-btn.on {
    background: #ff3b30;
    color: #fff;
}

/* 매칭완료 표시(제안완료와 구분되는 초록) */
.bid-done-badge.matched {
    background: #2e9e5b;
}

.bid-propose-btn:disabled {
    cursor: default;
}

/* 알림 팝업 첫 화면: 같은 크기 버튼 두 개 */
.mine-menu {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mine-menu-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    border: none;
    border-radius: 12px;
    background: #ff3b30;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* 입장하기 팝업 > 교육하기 모임 개설 안내: 개설하기(왼쪽) · 닫기(오른쪽) 같은 크기 */
.my-groups-actions {
    display: flex;
    gap: 8px;
}

.my-groups-actions > .start-btn,
.my-groups-actions > .song-close {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 채팅방 목록: 방장·모임장에게만 보이는 삭제 버튼 */
.room-list li.room-row {
    display: flex;
    align-items: center;
}

.room-list li.room-row .room-item {
    flex: 1 1 auto;
    min-width: 0;
}

.room-delete {
    flex: none;
    margin-right: 10px;
    padding: 6px 8px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

/* 일정 상세: 채팅방에 공유 버튼 */
.spot-share {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border: none;
    border-radius: 10px;
    background: #fee500;
    color: #191919;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* 명예의전당 */
.feed-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 14px;
}

.feed-honor {
    padding: 4px 14px 0;
}

.honor-vote-open {
    min-height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: #fee500;
    color: #191919;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.honor-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f1f4;
    color: #6b6f76;
    font-size: 12px;
    font-weight: 700;
}

.honor-field {
    margin: 0 0 14px;
    padding: 0;
    border: none;
}

.honor-field legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
}

.honor-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.honor-scores label {
    cursor: pointer;
}

.honor-scores input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.honor-scores span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f1f4;
    color: #333;
    font-size: 14px;
    font-weight: 700;
}

.honor-scores input:checked + span {
    background: #111114;
    color: #fff;
}

.honor-submit {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    background: #fee500;
    color: #191919;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.honor-heading {
    margin: 16px 14px 8px;
    font-size: 20px;
    font-weight: 800;
}

.honor-list {
    margin: 0;
    padding: 0 14px 90px;
    list-style: none;
    overflow-y: auto;
}

.honor-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eceef1;
}

.honor-rank {
    flex: none;
    width: 52px;
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #8e8e93;
}

.honor-rank.top {
    color: #111114;
    font-size: 32px;
}

.honor-card {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.honor-thumb {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 10px;
    background: #111114;
}

.honor-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.honor-info {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.honor-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.honor-scores-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #6b6f76;
    font-size: 12px;
}

.honor-votes {
    color: #a0a4ab;
    font-size: 11px;
}

.honor-total {
    flex: none;
    font-size: 20px;
    font-weight: 800;
}

/* 점수 주기: 필수 표시, 1~5점 버튼은 크게 */
.honor-req {
    margin-left: 4px;
    color: #d64545;
    font-size: 12px;
    font-weight: 700;
}

.honor-scores {
    gap: 10px;
}

.honor-scores span {
    width: 46px;
    height: 46px;
    font-size: 18px;
}

/* 검색 목록(모임찾기·트레이너찾기·수강생찾기) */
.find-item {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.find-thumb {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 14px;
    background: #eceef2;
    color: #8a8f98;
    font-size: 22px;
}

.find-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.find-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.find-summary {
    display: -webkit-box;
    overflow: hidden;
    color: #4a4e57;
    font-size: 13px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.find-note {
    margin: 0 4px 10px;
    color: #6b6f76;
    font-size: 13px;
}

.bid-item.disabled {
    pointer-events: none;
}

/* 채팅방 목록: 방마다 흰 카드로 보여 배경(하늘색)과 구분한다. 선택한 방은 위의 노란 강조가 그대로 보인다. */
.room-list li.room-row:not(.selected) {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 오늘의 버스킹: Social 위쪽 전환(피드 | 오늘의 버스킹)과 기간 고르기 */
.busking-switch {
    display: flex;
    gap: 6px;
    margin: 8px 16px 4px;
    padding: 3px;
    border-radius: 12px;
    background: #eceef2;
}

.busking-switch-btn {
    flex: 1;
    padding: 7px 0;
    border-radius: 10px;
    color: #4a4e57;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.busking-switch-btn.active {
    background: #fff;
    color: #1c1c1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.busking-ranges {
    display: flex;
    gap: 8px;
    margin: 8px 16px 12px;
}

.busking-range {
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    color: #4a4e57;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.busking-range.active {
    background: #fee500;
    color: #1c1c1e;
}

.busking-when {
    color: #1c1c1e;
    font-size: 13px;
    font-weight: 600;
}

.busking-map {
    color: #3b6fe0;
    font-size: 12px;
    text-decoration: none;
}

.spot-public {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 2px;
    color: #4a4e57;
    font-size: 13px;
}

/* 빈자리 매칭: 내 파트 고르기·빈자리 올리기 상자와 목록 */
.vacancy-box {
    margin: 8px 16px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
}

.vacancy-box summary {
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.vacancy-hint {
    margin: 8px 0;
    color: #6e6e73;
    font-size: 12px;
}

.vacancy-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.vacancy-part {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eceef2;
    font-size: 13px;
}

.vacancy-select,
.vacancy-note {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid #d8dae0;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.vacancy-note {
    min-height: 60px;
}

.vacancy-submit,
.vacancy-close {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: #fee500;
    color: #1c1c1e;
    font-size: 13px;
    font-weight: 600;
}

.vacancy-close {
    margin-top: 6px;
    background: #eceef2;
}

.vacancy-part-name {
    color: #1c1c1e;
    font-size: 14px;
    font-weight: 700;
}

.vacancy-error {
    margin: 8px 16px;
    color: #d33;
    font-size: 13px;
}

/* 일회성 모임: 게스트 참가 */
.busking-guest {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.busking-guest-count,
.busking-guest-note {
    color: #6e6e73;
    font-size: 12px;
}

/* 모임 초대 링크 첫 화면 */
.invite-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px 24px 24px;
    padding: 24px 20px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.invite-image {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    overflow: hidden;
    background: #eceef2;
}

.invite-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite-name {
    color: #1c1c1e;
    font-size: 20px;
}

.invite-members {
    color: #6e6e73;
    font-size: 13px;
}

.invite-intro {
    margin: 6px 0 0;
    color: #4a4e57;
    font-size: 14px;
    white-space: pre-line;
}

/* 시즌 우승 기록 */
.honor-winner-list {
    margin: 0;
    padding: 0 16px 16px;
    list-style: none;
}

.honor-winner {
    margin-top: 14px;
}

.honor-winner-season {
    display: block;
    margin-bottom: 4px;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 600;
}

.honor-winner-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    color: #1c1c1e;
    text-decoration: none;
}

.honor-winner-medal {
    font-size: 22px;
}

.honor-winner-name {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
}

.honor-winner-score {
    color: #6e6e73;
    font-size: 12px;
}

/* 레슨비 청구·정산 */
.charge-heading {
    margin: 12px 16px 4px;
    font-size: 18px;
    color: #1c1c1e;
}

.charge-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 16px 16px;
}

.charge-form input {
    padding: 12px;
    border: 1px solid #d8dbe0;
    border-radius: 10px;
    font-size: 15px;
}

.charge-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.charge-amount {
    color: #1c1c1e;
    font-size: 18px;
    font-weight: 700;
}

.charge-account {
    color: #4a4e57;
    font-size: 13px;
    white-space: pre-line;
}

.charge-status {
    font-size: 12px;
    color: #6e6e73;
}

.charge-status.status-CONFIRMED {
    color: #1a8f3c;
}

.charge-status.status-PAID_REPORTED {
    color: #c77700;
}

.charge-status.status-CANCELED {
    color: #9a9aa0;
}

.charge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.charge-btn {
    padding: 10px 14px;
    border: 1px solid #d8dbe0;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: #1c1c1e;
}

.charge-btn.primary {
    border-color: #fee500;
    background: #fee500;
    font-weight: 700;
}

.charge-link {
    display: block;
    margin: 16px;
    text-align: center;
    color: #4a4e57;
    font-size: 14px;
}

.charge-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 16px 16px;
}

.charge-totals div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
}

.charge-totals span {
    color: #6e6e73;
    font-size: 12px;
}

.charge-pay-btn {
    border: 0;
    cursor: pointer;
}

.mic-pop-link {
    padding: 8px 14px;
    border-radius: 8px;
    background: #f5f7fa;
    color: #1c1c1e;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.mic-pop-link:active {
    background: #fee500;
}

/* 노래 분석 */
.analysis-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 16px 24px;
}

.analysis-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
}

.analysis-total strong {
    font-size: 40px;
    color: #1c1c1e;
}

.analysis-total span {
    color: #6e6e73;
    font-size: 13px;
}

.analysis-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
}

.analysis-bar-head {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #1c1c1e;
}

.analysis-bar-track {
    height: 8px;
    border-radius: 999px;
    background: #eceef2;
    overflow: hidden;
}

.analysis-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #fee500;
}

.analysis-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.analysis-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
}

.analysis-stats span {
    color: #6e6e73;
    font-size: 12px;
}

.analysis-notice {
    color: #6e6e73;
    font-size: 12px;
    line-height: 1.5;
}

.analysis-feedback {
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    white-space: pre-line;
}

.analysis-feedback strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #6e6e73;
}

.analysis-form textarea {
    width: 100%;
    min-height: 90px;
    padding: 12px;
    border: 1px solid #d8dbe0;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.analysis-link {
    display: inline-block;
    margin: 8px 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    color: #1c1c1e;
    font-size: 14px;
    text-decoration: none;
}

.withdraw-link { color: #d33; margin-left: 6px; }

.busking-map-open { display: inline-block; margin: 4px 16px 8px; padding: 6px 14px; border: 1px solid #dbdbdb; border-radius: 999px; background: #fff; color: #262626; font-size: 13px; text-decoration: none; }
.busking-map-canvas { width: 100%; height: 55vh; min-height: 280px; background: #eef1f4; }
.busking-map-list { list-style: none; margin: 0; padding: 8px 16px 24px; }
.busking-map-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid #efefef; font-size: 13px; color: #8e8e8e; }
.busking-map-list li.found { cursor: pointer; }
.busking-map-list li strong { font-size: 14px; color: #262626; }
.busking-map-list li em { font-style: normal; color: #d33; }
.busking-map-info { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; font-size: 12px; color: #555; min-width: 140px; }
.busking-map-info a, .busking-map-info strong { font-size: 13px; font-weight: 700; color: #262626; text-decoration: none; }

.card-analysis { margin: 2px 14px 6px; padding: 6px 12px; border: 1px solid #dbdbdb; font-size: 13px; }