@import url('report.css');

:root {
    /* 다크 모드 기본 (조선메이트는 다크 테마 고정) */
    --bg-color: #000000;
    /* 트레드 완전 블랙 */
    --text-primary: #F3F5F7;
    --text-secondary: #9BA3A0;
    --card-bg: #101010;
    --input-bg: #1C1C1C;
    --border-color: #262626;
    --point-color: #1D9BF0;
    --thread-line-color: #262626;

    --avatar-size: 38px;
    --rail-width: 56px;
    --avatar-padding-top: 0px;
    /* 상단 여백 제거 (전체 12px 맞춤) */

    --clr-wood: #16A34A;
    --clr-fire: #FF4D4D;
    --clr-earth: #CA8A04;
    --clr-metal: #94A3B8;
    --clr-water: #2563EB;
}

/* 1. 기본 레이아웃 */
.comment-thread {
    width: 100%;
    /* 사파리 렌더링 격리 (paint 제거: WebKit에서 클릭 이벤트 차단 버그 방지) */
    contain: layout style;
    display: flex;
    flex-direction: column;
}

.thread-item {
    display: flex;
    padding: 0 8px 0 6px;
    /* 상 우 하 좌 (우 8px, 좌 6px 비대칭) */
    /* 상하 여백을 자식 요소 패딩으로 위임하여 연결선 영역 확보 */
    gap: 0px;
    background: var(--bg-color);
    position: relative;
    width: 100%;
    transition: background-color 0.3s;

    /* [Safari Fix] Flexbox 중첩 붕괴 방지 및 최상단 노출 */
    flex-shrink: 0;
    min-height: max-content;
    z-index: 10;
}


.rail {
    width: var(--rail-width);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0px;
    /* 위아래 0px 테스트 */
    padding-bottom: 0px;
    /* 기존 thread-item의 bottom padding을 내재화 */
    flex-shrink: 0;
}

/* 아바타 배지 오버레이 (프로필 배지 컬렉션 동기화용 - 텍스트 양식) */
.avatar-badge-overlay {
    position: absolute;
    top: -4px;
    /* 기존 -5px에서 1px 아래로 이동 */
    right: -10px;
    height: 14px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    z-index: 10;
    border: 1.5px solid var(--bg-color);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==================================================
 * [v20.51] 옵션 메뉴 바텀 시트 (Bottom Sheet) 
 * ================================================== */
.msg-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10005;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.msg-sheet-overlay.open {
    opacity: 1;
    visibility: visible;
}

.msg-sheet-container {
    width: 100%;
    max-width: 600px;
    background: #151515;
    border-radius: 24px 24px 0 0;
    padding: 12px 20px 30px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.msg-sheet-overlay.open .msg-sheet-container {
    transform: translateY(0);
}

.msg-sheet-handle {
    width: 40px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 0 auto 20px;
}

.msg-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 24px;
}

.msg-sheet-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg-sheet-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.msg-sheet-btn:active {
    transform: scale(0.98);
    background: #222;
}

.msg-sheet-btn .icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-sheet-btn.danger-action .icon-box {
    background: rgba(255, 75, 75, 0.1);
}

.msg-sheet-btn .btn-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msg-sheet-btn .title {
    font-size: 15px;
    font-weight: 700;
}

.msg-sheet-btn .desc {
    font-size: 13px;
    color: #888;
}

/* ================================================== */


/* 2. 오행 아바타 */
.avatar {
    position: relative;
    width: var(--avatar-size);
    height: var(--avatar-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    z-index: 10;
    flex-shrink: 0;
    transition: all 0.3s;
    cursor: pointer;
    /* Safari 클릭 이벤트 버블링 이슈 픽스 */
    -webkit-tap-highlight-color: transparent;
}

.avatar[data-element="wood"] svg {
    color: var(--clr-wood);
    stroke: var(--clr-wood);
}

.avatar[data-element="fire"] svg {
    color: var(--clr-fire);
    stroke: var(--clr-fire);
}

.avatar[data-element="earth"] svg {
    color: var(--clr-earth);
    stroke: var(--clr-earth);
}

.avatar[data-element="metal"] svg {
    color: var(--clr-metal);
    stroke: var(--clr-metal);
}

.avatar[data-element="water"] svg {
    color: var(--clr-water);
    stroke: var(--clr-water);
}

/* 오행별 호버 효과 (Premium Hover) */
.avatar[data-element="wood"]:hover {
    border-color: var(--clr-wood);
    background: rgba(52, 199, 89, 0.15);
    box-shadow: 0 0 10px rgba(52, 199, 89, 0.2);
}

.avatar[data-element="fire"]:hover {
    border-color: var(--clr-fire);
    background: rgba(255, 69, 58, 0.15);
    box-shadow: 0 0 10px rgba(255, 69, 58, 0.2);
}

.avatar[data-element="earth"]:hover {
    border-color: var(--clr-earth);
    background: rgba(255, 159, 10, 0.15);
    box-shadow: 0 0 10px rgba(255, 159, 10, 0.2);
}

.avatar[data-element="metal"]:hover {
    border-color: var(--clr-metal);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.avatar[data-element="water"]:hover {
    border-color: var(--clr-water);
    background: rgba(10, 132, 255, 0.15);
    box-shadow: 0 0 10px rgba(10, 132, 255, 0.2);
}

.avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 오행 클릭 파동 효과 */
@keyframes elementRipple {
    0% {
        box-shadow: 0 0 0 0 var(--click-color);
        transform: scale(0.85);
    }

    40% {
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
        transform: scale(1);
    }
}

.avatar.clicked-effect {
    animation: elementRipple 0.4s ease-out;
}

/* 피드 본문 영역 클릭 효과 (배경색 어두워짐) */
.thread-item.feed-clicked-effect {
    background-color: rgba(255, 255, 255, 0.05) !important;
    transition: background-color 0.15s ease;
}

/* 피드 본문 영역 마우스 호버(Hover) 효과 (텍스트 밑줄 등) - 통합 환경용 */
/* 전체 thread-item 영역 호버 시 커서 변경 */
.thread-item:not(.detail-post-section .thread-item):hover {
    cursor: pointer;
}

/* 호버 시 배경색 아주 살짝 밝아짐 (액션 버튼 아이콘 영역 호버 시에는 제외) */
.thread-item:not(.detail-post-section .thread-item):hover:not(:has(.action-btn:hover)) {
    background-color: rgba(255, 255, 255, 0.02);
    transition: background-color 0.2s ease;
}

/* 본문 텍스트 직접 호버 시에만 밑줄 효과 부여 (아이콘 호버 파급 방지) */
.thread-item:not(.detail-post-section .thread-item) .thread-text:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* 3. 계층별 선 노출 제어 (Intelligent Auto-Line Logic) */
.rail::before,
.rail::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    background-color: var(--thread-line-color);
    transform: translateX(-50%);
    z-index: 1;
    display: none;
}

/* 상향선 (Upper Line) - [v10.9] 디자인 변경으로 비활성화 */
.thread-item .rail::before {
    display: none !important;
}

/* 하향선 (Lower Line) - [v10.9] 디자인 변경으로 비활성화 */
.thread-item .rail::after {
    display: none !important;
}

/* [v10.9] 계단식 들여쓰기 스타일 (Recursive Indentation) */
.thread-item.depth-1 {
    padding-left: 6px;
}

.thread-item.depth-2 {
    padding-left: 32px;
}

.thread-item.depth-3 {
    padding-left: 58px;
}

.thread-item.depth-4 {
    padding-left: 84px;
}

.thread-item.depth-5 {
    padding-left: 110px;
}

.thread-item.depth-6 {
    padding-left: 136px;
}

/* 댓글 간 수평 분절선 강화 */
.thread-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
    opacity: 0.5;
}


/* 4. 컨텐츠 레이아웃 */
.thread-right-content {
    flex: 1;
    min-width: 0;
    padding: 0px 0px 0px 4px;
    /* 본문 우측은 부모(thread-item)에서 8px 확보했으므로 0px 유지, 좌측(아바타사이격차) 4px */
    display: flex;
    flex-direction: column;
}

.thread-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    width: 100%;
}

.author-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.thread-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #e7e9ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    cursor: pointer;
    /* Safari 픽스 */
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}

/* [v15.2] 피드 정보 배지 스타일 (매너 온도, 궁합 %) */
.author-info-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}

.feed-manner-temp {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.feed-affinity-percent {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(244, 114, 182, 0.1);
    color: #f472b6;
    border: 1px solid rgba(244, 114, 182, 0.2);
}

.thread-user-name:hover {
    text-decoration: underline;
}

/* 닉네임에도 오행 호버 색상 연동 */
.thread-item[data-element="wood"]:hover .thread-user-name {
    color: var(--clr-wood);
}

.thread-item[data-element="fire"]:hover .thread-user-name {
    color: var(--clr-fire);
}

.thread-item[data-element="earth"]:hover .thread-user-name {
    color: var(--clr-earth);
}

.thread-item[data-element="metal"]:hover .thread-user-name {
    color: var(--clr-metal);
}

.thread-item[data-element="water"]:hover .thread-user-name {
    color: var(--clr-water);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.thread-time {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.option-btn {
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 50%;
    opacity: 0.5;
    transition: all 0.2s;
}

.option-btn:hover {
    opacity: 1;
    background: var(--border-color);
}

/* 삭제됨: v20.51 바텀시트로 대체 */

/* 6. 액션 버튼 */
.thread-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    width: 100%;
}

.action-btn {
    color: var(--text-primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px 12px;
    margin: -6px -4px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.action-btn:hover {
    background: rgba(128, 128, 128, 0.1);
}

.action-btn .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
    opacity: 0.7;
    transition: inherit;
}

/* 하트 호버 - 붉은색 */
.action-btn-like:hover .material-icons {
    color: #FF4B4B;
    opacity: 1;
}

.action-btn-like:hover {
    background: rgba(255, 75, 75, 0.08);
}

.action-btn-like.liked .material-icons {
    color: #FF4B4B;
    opacity: 1;
}

/* 🧶 실타래 아이콘(SVG) 톤앤매너 스타일링 */
.yarn-icon-svg {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--text-secondary);
    opacity: 0.7;
    transition: inherit;
}

.action-btn-bookmark:hover .yarn-icon-svg {
    color: var(--point-gold);
    opacity: 1;
}

.action-btn-bookmark.active .yarn-icon-svg,
.action-btn-bookmark:active .yarn-icon-svg {
    color: var(--point-gold);
    opacity: 1;
    fill: var(--point-gold-dim);
}

.action-btn-bookmark:hover,
.action-btn-bookmark.active {
    background: rgba(255, 215, 0, 0.08);
}

/* 메시지 & 댓글 호버 - 트위터 블루 */
.action-btn-send:hover .material-icons,
.action-btn-reply:hover .material-icons {
    color: var(--point-color);
    opacity: 1;
}

.action-btn-send:hover,
.action-btn-reply:hover {
    background: rgba(29, 155, 240, 0.08);
}

/* 댓글 아이콘 활성 상태 (답글 입력 중) - 파란색 */
.action-btn-reply.replying .material-icons {
    color: var(--point-color);
    opacity: 1;
}

.action-btn-reply.replying .comment-count {
    color: var(--point-color);
}

.like-count,
.comment-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: inherit;
}

.action-btn:hover .like-count,
.action-btn:hover .comment-count {
    color: inherit;
}

/* 7. 분절선 */
.thread-divider {
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin: 16px 0;
}

/* [v18.5] 타로 선물 버튼 전용 스타일 (운명의 실타래 한정) */
.action-btn-tarot-gift {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.1) 0%, rgba(202, 138, 4, 0.2) 100%);
    border: 1px solid rgba(202, 138, 4, 0.4);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    color: var(--clr-earth);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: gold-pulse 2s infinite;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
    /* 타 요소로부터 독립시켜 우측으로 정렬 */
}

@keyframes gold-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(202, 138, 4, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0);
    }
}

.action-btn-tarot-gift:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.2) 0%, rgba(202, 138, 4, 0.3) 100%);
    border-color: var(--clr-earth);
    box-shadow: 0 4px 12px rgba(202, 138, 4, 0.2);
}

.action-btn-tarot-gift:active {
    transform: translateY(0) scale(0.95);
}

.action-btn-tarot-gift i {
    font-size: 14px;
    font-style: normal;
}

/* 유틸리티 */
.badge-chemistry {
    font-size: 10px;
    font-weight: 800;
    color: #FF4B4B;
    /* 브릿지 레드 */
    background: rgba(255, 75, 75, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

/* 중복된 .thread-item 및 .rail 제거 완료 */

.thread-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 4px 0;
    white-space: pre-wrap;
    word-break: break-all;

    /* 2줄 말줄임표 처리 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 게시글 상세 페이지에서는 내용 전체 표시 */
.detail-post-section .thread-text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* 대댓글 외부 컨테이너 (Grid Track 제어) */
.reply-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* 기본 상태: 접힘 */
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

/* 펼침 상태 */
.reply-wrapper.is-open {
    grid-template-rows: 1fr;
}

/* 대댓글 내부 콘텐츠 격리 Wrapper */
.reply-inner {
    overflow: hidden;
    /* Grid 0fr 작동 필수 */
    min-height: 0;
    /* WebKit 버그 방지 */
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 레거시 클래스 호환성 유지 (필요 시 제거 가능) */
.replies-wrapper {
    display: none;
}

@keyframes postIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: postIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 8. 댓글 입력창 (하단 고정 플로팅, GNB 겹침 방지) */
.inline-reply-box {
    width: 100%;
    max-width: 600px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);

    position: fixed;
    /* 하단 네비게이션 높이(약 64px) + 안전 영역 띄움 */
    bottom: calc(env(safe-area-inset-bottom) + 64px);
    left: 50%;
    z-index: 9999;
    pointer-events: auto !important;
    transform: translateX(-50%) translateZ(0);
    /* 상단 부드러운 그림자 */
}

/* === 가속 및 위치 대응 (입력 불가 현상 해결) === */
.reply-inner .inline-reply-box {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    border-top: none !important;
    padding: 12px 16px !important;
    margin-top: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 10 !important;
}

/* === 가로(Row) 레이아웃 래퍼 === */
.inline-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.inline-input {
    flex: 1;
    min-width: 0;
    /* flex 오버플로우 방지 */
    background: var(--input-bg);
    border-radius: 20px;
    padding: 10px 16px;
    border: 1px solid transparent;
    outline: none;
    max-height: 150px;
    resize: none;
    overflow: hidden;
    color: var(--text-primary);
    transition: all 0.2s;
    /* [Safari Fix] 포커스 및 텍스트 선택 강제 활성화 */
    -webkit-user-select: auto !important;
    user-select: auto !important;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto !important;
    font-size: 16px;
    /* iOS Safari 자동 줌 방지 */
}

.inline-input:focus {
    background: var(--bg-color);
    border-color: var(--point-color);
}

/* === 원형 파란색 게시 버튼 === */
.btn-inline-post {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    aspect-ratio: 1;
    /* 완벽한 원형 보장 */
    background: #0084ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 132, 255, 0.15);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.btn-inline-post .material-icons {
    font-size: 22px;
    line-height: 1;
}

.btn-inline-post.active {
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.4);
}

.btn-inline-post.active:active {
    transform: scale(0.9);
}

/* === 선결제 정보 알약 버튼 (Pay Pill) === */
.pay-pill {
    font-size: 11px;
    font-weight: 700;
    color: #a0a0a0 !important;
    background: rgba(160, 160, 160, 0.1) !important;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(160, 160, 160, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .pay-pill:hover {
        background: rgba(160, 160, 160, 0.2);
        border-color: rgba(160, 160, 160, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(160, 160, 160, 0.2);
    }
}

.pay-pill:active {
    transform: scale(0.95);
    background: rgba(160, 160, 160, 0.3) !important;
}

/* [v25.9.12] 금빛 시그널 전용 버튼 (은색 덮어쓰기 방지 및 사파리 대응) */
.gold-tarot-btn {
    background: linear-gradient(45deg, #d4af37, #f9d71c) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4) !important;
    opacity: 1 !important;
}

.gold-tarot-btn:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.5) !important;
}

/* === 9. 메시지 전송 옵션 바텀 시트 (Bottom Sheet) === */
.msg-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.msg-sheet-overlay.open {
    visibility: visible;
    opacity: 1;
}

.msg-sheet-container {
    width: 100%;
    background: var(--card-bg);
    border-radius: 24px 24px 0 0;
    padding: 20px 24px calc(env(safe-area-inset-bottom) + 30px);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    border-top: 1px solid var(--border-color);
}

.msg-sheet-overlay.open .msg-sheet-container {
    transform: translateY(0);
}

.msg-sheet-handle {
    width: 40px;
    height: 4px;
    background: #333;
    border-radius: 4px;
    margin: 0 auto 24px;
}

.msg-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    text-align: center;
}

.msg-sheet-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg-sheet-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--input-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

.msg-sheet-btn:active {
    transform: scale(0.97);
    background: var(--border-color);
}

.msg-sheet-btn .icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
}

.msg-sheet-btn.normal .icon-box {
    color: var(--point-color);
}

.msg-sheet-btn.tarot .icon-box {
    color: var(--clr-earth);
}

/* 금장 색상 */
.msg-sheet-btn.premium .icon-box {
    color: #A855F7;
}

/* Purple 500 */

.msg-sheet-btn .btn-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-sheet-btn .title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.msg-sheet-btn.premium .title {
    color: #C084FC;
    /* Purple 400 */
}

.msg-sheet-btn .desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.msg-sheet-btn .chevron {
    color: var(--text-secondary);
    opacity: 0.5;
}

.msg-sheet-btn .coin-price {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 193, 7, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    margin-right: 4px;
}

.msg-sheet-btn .coin-price .coin-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.msg-sheet-btn .coin-price span {
    font-size: 13px;
    font-weight: 700;
    color: #FFC107;
}

/* === 10. 독립형 답글 작성 모달 (Reply Bottom Sheet) === */
.reply-sheet-container {
    width: 100%;
    height: 90vh;
    /* 거의 전체 화면 */
    background: var(--card-bg);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    border-top: 1px solid var(--border-color);
}

.msg-sheet-overlay.open .reply-sheet-container {
    transform: translateY(0);
}

.reply-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.reply-sheet-header .btn-cancel {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.reply-sheet-header .title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.reply-sheet-header .btn-more {
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.reply-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    position: relative;
}

/* 모달 내 부모 게시글 연결선 */
.reply-parent-thread {
    display: flex;
    position: relative;
    padding-bottom: 24px;
}

.reply-parent-thread .rail::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(4px + var(--avatar-padding-top) + var(--avatar-size) + 4px);
    bottom: -16px;
    width: 2px;
    background-color: var(--thread-line-color);
    transform: translateX(-50%);
    z-index: 1;
}

/* 모달 내 입력 영역 */
.reply-input-area {
    display: flex;
    position: relative;
    margin-top: 8px;
}

.reply-sheet-input {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    resize: none;
    padding: 8px 0;
    outline: none;
    line-height: 1.5;
}

.reply-sheet-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.reply-actions-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.reply-actions-row .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
}

.reply-sheet-footer {
    padding: 12px 20px calc(env(safe-area-inset-bottom) + 12px);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-sheet-footer .desc {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.reply-sheet-footer .btn-post {
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--point-color);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.2s;
    border: none;
    cursor: pointer;
}

.reply-sheet-footer .btn-post:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 옵션 메뉴 바텀 시트 스타일 (v10.0) */
.option-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
}

.option-sheet-overlay.open {
    opacity: 1;
    visibility: visible;
}

.option-sheet-container {
    width: 100%;
    background: #1a1a1a;
    border-radius: 24px 24px 0 0;
    padding: 8px 16px 32px 16px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.option-sheet-overlay.open .option-sheet-container {
    transform: translateY(0);
}

.option-sheet-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px auto 16px auto;
}

.option-sheet-item {
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #efefef;
    font-size: 16px;
    font-weight: 500;
    border-radius: 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.option-sheet-item:active {
    background: rgba(255, 255, 255, 0.05);
}

.option-sheet-item .material-icons {
    font-size: 22px;
    opacity: 0.8;
}

.option-sheet-item.danger {
    color: #ff4b4b;
}

.option-sheet-item.danger .material-icons {
    color: #ff4b4b;
    opacity: 1;
}

.option-sheet-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

/* [v15.7] 게시글 내 태그 스타일 */
.thread-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.thread-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--point-color);
    cursor: pointer;
}

.thread-tag:hover {
    text-decoration: underline;
}

/* [v15.7] 글쓰기 모달 내 닉네임 + 태그 그룹 */
.create-nickname-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.create-nickname {
    font-size: 15px;
    font-weight: 700;
    color: var(--msg-text-primary);
}

.create-selected-tags {
    display: flex;
    gap: 4px;
}

.create-selected-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--point-color);
}

/* ── 7. 운명의 수레바퀴 (리프레시 버튼) ── */
.destiny-refresh-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 0 60px;
    width: 100%;
}

.wheel-of-destiny {
    width: 64px;
    height: 64px;
    cursor: pointer;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
    color: #ffffff;
}

.wheel-of-destiny:active {
    transform: scale(0.9);
}

.wheel-of-destiny.spinning {
    animation: wheel-rotate 1.5s cubic-bezier(0.45, 0, 0.55, 1);
}

.refresh-text {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 1px;
    opacity: 0.6;
    font-weight: 500;
}

@keyframes wheel-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1080deg);
    }

    /* 3바퀴 회전 */
}

/* [v20.1] 메시지 시스템 메시지 (퇴장 안내 등) */
.dm-system-msg {
    width: fit-content;
    max-width: 80%;
    margin: 20px auto;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #888;
    font-size: 11px;
    text-align: center;
    line-height: 1.5;
    animation: dmMsgFadeIn 0.5s ease;
}

@keyframes dmMsgFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}