/* ✨ 초기 로딩 시 화면 깜빡임 방지 */
      .app-container {
        opacity: 0;
        transition: opacity 0.15s ease-in;
      }
      .app-container.app-ready {
        opacity: 1;
      }

      :root {
        /* 🎨 Dark Theme Base */
        --background-color: #0F172A; /* Deep dark blue */
        --container-bg: #1E293B; /* Card background */

        /* 🎨 Brand Colors (Option 2: Hot Topic) */
        --primary-accent: #EC4899; /* Pink */
        --secondary-accent: #8B5CF6; /* Purple */

        /* 🎨 Message Bubbles */
        --sent-bubble-bg: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
        --received-bubble-bg: #334155; /* Darker gray for received messages */

        /* 🎨 Text Colors */
        --text-primary: #F8FAFC; /* Almost white */
        --text-secondary: #94A3B8; /* Light gray */

        /* 🎨 UI Elements */
        --border-color: #334155;
        --header-bg: #1E293B;

        font-size: 15px; /* 기본 폰트 사이즈 설정 (1rem = 15px) */
      }

      /* ✨ 기본 폰트 사이즈 조정 (Threads/X 참고) */
      html {
        font-size: 15px; /* 데스크탑 기본 */
      }
      @media (max-width: 768px) {
        html {
          font-size: 14.5px; /* 태블릿/중간 화면 */
        }
      }
      @media (max-width: 480px) {
        html {
          font-size: 14px; /* 모바일 화면 */
        }
      }

      body {
        font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        background-color: var(--background-color);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        min-height: -webkit-fill-available; /* iOS Safari 100vh 문제 해결 */
        color: var(--text-primary);
        overflow: hidden; /* body의 스크롤 방지 */
      }

      .container {
        width: 100%;
        max-width: 400px; /* 고정 최대 너비 */
        height: 100%; /* 부모(body)의 높이를 꽉 채움 */
        max-height: 800px; /* 고정 최대 높이 */
        background-color: var(--container-bg);
        border-radius: 1.5rem; /* rem 단위 */
        box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
          0 2px 4px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 컨테이너 내부 스크롤이 필요할 때 대비 */
        position: relative;

        /* ✨ 반응형 테두리 반경 */
        @media (max-width: 480px) {
          border-radius: 0; /* 모바일에서는 모서리 둥글기 제거 */
        }
      }

      #entry-screen {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ✨ flex-start로 변경 - center는 오버플로우 시 위쪽이 잘림 */
        align-items: center;
        padding: 2.5rem 2rem; /* rem 단위, 상하좌우 패딩 */
        text-align: center;
        flex-grow: 1; /* 남은 공간을 채우도록 */
        /* 🎨 Dark gradient background with brand colors */
        background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
        color: var(--text-primary);
        box-sizing: border-box;
        overflow-y: auto; /* 내용이 넘칠 경우 스크롤 가능 */

        /* ✨ 모바일에서 패딩 줄이기 */
        @media (max-width: 480px) {
          padding: 1.5rem 1rem;
        }
      }

      /* ✨ #version-info에 최소 높이 및 마진 추가 */
      #version-info {
        position: absolute; /* 화면에 고정 */
        top: 1rem;
        right: 1rem;
        min-height: 1.5rem; /* 버전 텍스트가 들어갈 정도의 최소 높이 확보 (약 24px) */
        margin-bottom: 1rem; /* 하단 마진 추가하여 다음 p 태그와의 간격 유지 */
        font-size: 0.9rem; /* 버전 정보 폰트 크기 조정 */
        color: rgba(255, 255, 255, 0.6); /* 색상 조절 */
        z-index: 999; /* 다른 요소 위에 위치하도록 */
        text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1); /* 그림자 추가 */
        /* 텍스트가 없을 때도 공간을 차지하게 함 */
        visibility: hidden; /* 초기에는 보이지 않게 처리 */
        pointer-events: none; /* 클릭 이벤트 방지 */

        /* 변경 : 데스크탑용 미디어 쿼리 안의 right 규칙 삭제 (position: relative 이므로 필요없음)
        @media (min-width: 400px) {
          container max-width: 400px 
          right: calc(50vw - 200px + 1rem); 
        }
        */
        @media (max-width: 480px) {
          /* 모바일에서는 여백 줄이기 */
          right: 0.5rem;
          top: 0.5rem;
        }
      }
      /* ✨ version-info에 텍스트가 들어오면 보이도록 (JS에서 클래스 추가) */
      #version-info.loaded {
        visibility: visible;
      }

      /* 삭제. #version-info가 밖으로 옮겨졌으므로 이 규칙은 필요없음 */
      /* 
        #entry-screen p:nth-of-type(2) {
        margin-top: 0;
        margin-bottom: 1.5rem;
      }
      */

      #entry-screen h1 {
        font-size: 1.75rem; /* rem 단위 */
        margin-bottom: 0.8rem;
        font-weight: 600;
        text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
      }
      #entry-screen p {
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 1.5rem; /* rem 단위 */
        line-height: 1.6;
        font-size: 0.9rem; /* rem 단위 */
      }

      /* ✨ 새로운 room-key-input-wrapper 스타일 */
      .room-key-input-wrapper {
        display: flex; /* 자식 요소들을 한 줄로 정렬 */
        gap: 0.5rem; /* rem 단위. 입력란과 버튼 사이 간격 */
        width: 100%;
        margin-bottom: 0.625rem; /* rem 단위. 아래쪽 여백 */
      }

      #room-key-input,
      #nickname-input {
        width: 100%;
        padding: 1rem; /* rem 단위 */
        border: 2px solid var(--border-color);
        border-radius: 0.75rem; /* rem 단위 */
        font-size: 1rem; /* rem 단위 */
        text-align: center;
        background-color: var(--container-bg);
        color: var(--text-primary);
        transition: all 0.2s ease;
      }
      #room-key-input::placeholder,
      #nickname-input::placeholder {
        color: var(--text-secondary);
      }
      #room-key-input:focus,
      #nickname-input:focus {
        outline: none;
        border-color: var(--primary-accent);
        background-color: var(--container-bg);
        box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
      }
      #room-key-input {
        margin-bottom: 0; /* room-key-suggestions-container와 직접 연결되므로 마진 제거 */
      }

      /* ✨ room-key-suggestions-container 스타일 */
      #room-key-suggestions-container {
        width: 100%;
        min-height: 7.5rem; /* rem 단위 (메시지와 목록이 모두 들어갈 충분한 높이 확보) */
        margin-top: 0.3rem; /* rem 단위 */
        margin-bottom: 1.25rem; /* rem 단위 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1; /* 남은 공간을 최대한 채우도록 */
      }
      /* `no-node-message`와 `node-recommendation-list`의 부모가 됨 */
      #room-key-suggestions-container #no-node-message {
        flex-grow: 1; /* 메시지가 남은 공간을 채우도록 */
        display: flex; /* 텍스트를 중앙에 정렬하기 위해 flexbox 사용 */
        align-items: center;
        justify-content: center;
      }
      #node-recommendation-list {
        flex-shrink: 0; /* 목록은 줄어들지 않도록 */
        width: 100%;
      }

      #entry-button {
        flex-shrink: 0;
        /* width: 100%; */
        padding: 1rem 1.25rem; /* rem 단위 */
        border: none;
        border-radius: 0.75rem; /* rem 단위 */
        background: var(--sent-bubble-bg); /* Pink to Purple gradient */
        color: white;
        font-size: 1rem; /* rem 단위 */
        font-weight: bold;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
        /* margin-top: auto;
        margin-bottom: 0; */
      }
      #entry-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
      }
      #entry-button:active {
        transform: translateY(0);
      }
      /* ✨ 닉네임 입력창 위에 새로운 문구 스타일 */
      #noder-intro-message {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.95rem; /* rem 단위 */
        margin-top: 1.5rem; /* 닉네임 입력창과의 간격 */
        margin-bottom: 0.8rem; /* 접속 버튼과의 간격 */
        line-height: 1.4;
        font-weight: 500;
        text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
      }

      .nickname-wrapper {
        display: flex;
        width: 100%;
        margin-bottom: 0.625rem; /* rem 단위 */
        gap: 0.5rem; /* rem 단위 */
        flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 */
      }
      #nickname-input {
        flex-grow: 1;
      }
      #regen-nickname-btn {
        flex-shrink: 0;
        width: 3.125rem; /* rem 단위 */
        border: 2px solid var(--border-color);
        border-radius: 0.75rem; /* rem 단위 */
        background-color: var(--container-bg);
        color: var(--primary-accent);
        font-size: 1.25rem; /* rem 단위 */
        cursor: pointer;
        transition: transform 0.15s ease, border-color 0.15s ease;
      }
      #regen-nickname-btn:hover {
        transform: rotate(90deg);
        border-color: var(--primary-accent);
      }

      #chat-screen {
        display: none;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
        box-sizing: border-box;
        position: relative; /* 하단 네비게이션의 기준점 */
        /* 데스크탑: 하단 네비게이션 높이만큼 패딩 */
        padding-bottom: 3.5rem;
      }

      /* 모바일에서는 충분한 패딩 확보 */
      @media (max-width: 768px) {
        #chat-screen {
          padding-bottom: 4rem; /* 모바일 내비게이션과 겹치지 않도록 */
        }
      }
      .chat-header {
        padding: 1rem 1.25rem; /* rem 단위 */
        background-color: var(--header-bg);
        border-bottom: 1px solid rgba(236, 72, 153, 0.15); /* Subtle pink accent */
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: none; /* Minimal - remove shadow */
        z-index: 10;
        flex-shrink: 0; /* 줄어들지 않도록 */
        min-height: 3.5rem; /* ✨ 최소 높이 확보하여 내용이 넘치지 않도록 */
        overflow: hidden;
      }
      .title-wrapper {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        gap: 0.1rem; /* rem 단위 */

        /* ✨ (선택 사항) 부모인 chat-header 내에서 공간을 유연하게 사용하도록 */
        flex-grow: 1; /* chat-header 내에서 남은 공간을 최대한 차지하도록 */
        overflow: hidden; /* 자식 요소에서 처리하므로 여기서는 필요 없을 수 있음 */
        min-width: 0;
        max-height: 100%; /* ✨ 부모 높이를 넘지 않도록 제한 */
        justify-content: center; /* ✨ 세로 중앙 정렬 */
      }
      /* ✨ 새로 추가: main-title-row */
      .main-title-row {
        display: flex;
        align-items: center; /* 세로 중앙 정렬 */
        gap: 0.3rem; /* #room-title과 #recommend-btn 사이 간격 */
        width: 100%; /* 부모의 너비를 최대한 사용 */
        overflow: hidden; /* 이 줄도 넘치는 텍스트를 처리할 수 있도록 */
        min-width: 0; /* flex 아이템으로 작동할 때 유연하게 줄어들도록 */

        justify-content: flex-start;
      }
      #refresh-recommendation-btn {
        background: transparent;
        border: 1px solid rgba(139, 92, 246, 0.3);
        color: var(--secondary-accent);
        font-size: 0.875rem;
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        flex-shrink: 0;
        line-height: 1;
        font-weight: 500;
      }
      #refresh-recommendation-btn:hover {
        background-color: rgba(139, 92, 246, 0.1);
        border-color: var(--secondary-accent);
        transform: rotate(180deg);
      }
      #room-title {
        font-weight: 600;
        font-size: 1.125rem; /* rem 단위 */

        /* ✨ 텍스트 오버플로우 처리 추가 시작 */
        white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
        overflow: hidden; /* 넘치는 텍스트 숨김 */
        text-overflow: ellipsis; /* 숨겨진 텍스트를 말줄임표로 표시 */
        /* ✨ 텍스트 오버플로우 처리 추가 끝 */

        /* ✨ flex 컨테이너 안에서 공간을 유연하게 사용하도록 설정 */
        /* flex-grow: 1; */ /* 남은 공간을 채우려고 시도 */
        flex-shrink: 1; /* 필요하면 줄어들 수 있도록 허용 */
        min-width: 0; /* 텍스트가 길 때 flex 아이템의 최소 너비를 0으로 설정하여 오버플로우 방지 */
      }

      .node-visit-count {
        font-size: 0.75rem;
        color: var(--text-secondary);
        flex-shrink: 0;
      }
      /* #recommend-btn {
        background: var(--secondary-accent);
        color: white;
        border: none;
        border-radius: 50%;
        width: 1.5rem; 
        height: 1.5rem; 
        font-size: 1rem; 
        font-weight: bold;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s;
        flex-shrink: 0;
         margin-left: auto; 
      }
      #recommend-btn:hover {
        transform: rotate(90deg);
      } */
      #recommendation-info-row {
        /* 현재 인라인 스타일 */
        display: none; /* JS에서 제어 */
        margin-left: 0; /* ✨ 수정: 이제 아래 줄이므로 왼쪽 마진은 필요 없음 */
        margin-top: 0.1rem; /* ✨ 추가: room-title과의 간격 */
        font-style: italic;
        color: #666;
        font-size: 0.8rem; /* ✨ 수정: 더 작게 */
        opacity: 0.8; /* ✨ 추가: 좀 더 흐리게 */

        /* ✨ 텍스트 오버플로우 처리 추가 시작 */
        white-space: nowrap; /* 텍스트를 한 줄로 유지 */
        overflow: hidden; /* 넘치는 내용을 숨김 */
        text-overflow: ellipsis; /* 숨겨진 내용을 말줄임표로 표시 */
        /* ✨ 텍스트 오버플로우 처리 추가 끝 */

        /* ✨ flex 컨테이너(.title-wrapper) 안에서 공간을 유연하게 사용하도록 설정 */
        width: 100%;
        flex-grow: 0; /* 남은 공간을 채우려고 시도 */
        flex-shrink: 1; /* 필요하면 줄어들 수 있도록 허용 */
        min-width: 0; /* 텍스트가 길 때 flex 아이템의 최소 너비를 0으로 설정하여 오버플로우 방지 */
        display: flex; /* 내부 span 정렬 위해 추가 */
        align-items: center; /* 세로 중앙 정렬 */
        gap: 0.3rem; /* "다음 노드:" 와 노드 이름 사이 간격 */
      }
      /* ✨ 추천 노드 제목 값 스타일 (클릭 가능하게) */
      #recommended-node-title-value {
        font-weight: bold; /* 약간 강조 */
        cursor: pointer;
        color: var(
          --text-primary
        ); /* ✨ 일반 텍스트 색상 사용 또는 다른 색 지정 */
        transition: opacity 0.2s;
        /* 오버플로우 처리 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 2px;
        /* flex에서 줄어들 수 있도록 설정 (이유 텍스트보다 먼저 줄어듦) */
        flex-shrink: 1;
        min-width: 0;
      }
      #recommended-node-title-value:hover {
        opacity: 0.7; /* 호버 효과 */
      }
      /* ✨ 추천 이유 스타일 */
      #recommendation-reason {
        color: var(--text-secondary);
        font-size: 0.85em;
        font-weight: normal;
        opacity: 0.8;
        white-space: nowrap;
        flex-shrink: 0;  /* 이유는 줄이지 않음 */
      }
      #back-button {
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid rgba(236, 72, 153, 0.2);
        padding: 0.375rem 0.75rem; /* rem 단위 */
        border-radius: 0.5rem; /* rem 단위 */
        cursor: pointer;
        font-size: 0.875rem; /* rem 단위 - Smaller, cleaner */
        font-weight: 500;
        transition: all 0.2s ease;
        flex-shrink: 0;
        margin-right: 0.75rem;
      }
      #back-button:hover {
        background-color: rgba(236, 72, 153, 0.1);
        border-color: var(--primary-accent);
        color: var(--primary-accent);
        transform: translateX(-2px);
      }
      /* ✨ 헤더 액션 버튼 그룹 */
      .header-actions {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
      }

      .header-actions button {
        background: transparent;
        border: 1px solid rgba(148, 163, 184, 0.25);
        font-size: 0.75rem;
        cursor: pointer;
        padding: 0.375rem 0.625rem;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        flex-shrink: 0;
        color: var(--text-secondary);
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: -0.01em;
        line-height: 1;
        min-height: 1.875rem;
      }

      .header-actions button:hover {
        background-color: rgba(236, 72, 153, 0.1);
        border-color: var(--primary-accent);
        color: var(--primary-accent);
        transform: translateY(-1px);
      }

      .header-actions button:active {
        transform: translateY(0);
      }

      /* ✨ 새 헤더 레이아웃 (v1.9.0) */
      .chat-header--new {
        padding: 0.75rem 1rem;
      }

      .header-layout {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0.75rem;
      }

      .header-left {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
        flex-shrink: 1;
      }

      .header-left .node-info {
        display: flex;
        align-items: center;
        gap: 0.375rem;
      }

      .header-left .node-title {
        font-weight: 600;
        font-size: 1.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }

      .header-left .node-visit-count {
        font-size: 0.7rem;
        color: var(--text-secondary);
        opacity: 0.8;
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex-shrink: 0;
      }

      /* 다음 노드 추천 카드 */
      .next-node-card {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
        border: 1px solid rgba(139, 92, 246, 0.25);
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        max-width: 220px;
      }

      .next-node-card:hover {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
        border-color: var(--secondary-accent);
        transform: translateX(2px);
      }

      .next-node-card:active {
        transform: translateX(4px);
      }

      .next-node-card__content {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
        text-align: left;
      }

      .next-node-card__title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .next-node-card__reason {
        font-size: 0.65rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .next-node-card__arrow {
        flex-shrink: 0;
        color: var(--secondary-accent);
        opacity: 0.8;
      }

      /* 작은 아이콘 버튼 */
      .icon-btn--small {
        padding: 0.25rem;
        border-radius: 0.375rem;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-btn--small:hover {
        color: var(--primary-accent);
        background: rgba(236, 72, 153, 0.1);
      }

      /* 모바일 반응형 - 새 헤더 */
      @media (max-width: 480px) {
        .next-node-card {
          max-width: 180px;
          padding: 0.375rem 0.5rem;
        }

        .next-node-card__title {
          font-size: 0.8rem;
        }

        .next-node-card__reason {
          font-size: 0.6rem;
        }

        .header-left .node-title {
          font-size: 1rem;
        }
      }

      /* 개별 버튼 특성 - 이제 .leave-link에서 처리됨 */

      /* 📱 모바일 반응형 개선 - 노드 제목 공간 확보 */
      @media (max-width: 768px) {
        .chat-header {
          padding: 0.75rem 1rem; /* ✨ 좌우 패딩 증가 (0.5rem → 1rem) */
          gap: 0.25rem; /* 요소 간 간격 축소 */
        }

        #back-button {
          padding: 0.15rem 0.3rem; /* 패딩 더욱 축소 */
          margin-right: 0.15rem; /* 마진 축소 */
          font-size: 0.9rem;
        }

        .header-actions {
          gap: 0.15rem;
        }

        .header-actions button {
          padding: 0.3rem 0.4rem;
          font-size: 0.95rem;
        }

        #room-title {
          font-size: 0.95rem; /* 제목 크기 약간 축소 */
          font-weight: 600; /* 가독성 유지 */
        }

        #refresh-recommendation-btn {
          font-size: 0.9rem; /* 새로고침 버튼 크기 축소 */
          padding: 0 0.15rem;
        }

        #recommendation-info-row {
          font-size: 0.7rem; /* 추천 노드 정보 크기 축소 */
        }

        .title-wrapper {
          gap: 0.05rem; /* 제목과 추천 노드 간격 축소 */
        }

        .main-title-row {
          gap: 0.2rem; /* 제목과 새로고침 버튼 간격 축소 */
        }
      }

      /* 📱 초소형 화면 (< 400px) - 더욱 공격적인 최적화 */
      @media (max-width: 400px) {
        .chat-header {
          padding: 0.5rem 0.75rem; /* ✨ 좌우 패딩 증가 (0.4rem → 0.75rem) */
        }

        #back-button {
          padding: 0.1rem 0.25rem;
          font-size: 0.85rem;
          margin-right: 0.1rem;
        }

        .header-actions {
          gap: 0.1rem;
        }

        .header-actions button {
          padding: 0.25rem 0.35rem;
          font-size: 0.9rem;
        }

        #room-title {
          font-size: 0.9rem;
        }

        #refresh-recommendation-btn {
          font-size: 0.85rem;
          padding: 0 0.1rem;
        }

        #recommendation-info-row {
          font-size: 0.65rem;
        }
      }

      /* 📱 매우 작은 화면 - 아이콘 버튼 크기 조정 */
      @media (max-width: 390px) {
        .icon-btn {
          padding: 0.4rem;
        }
        .icon-btn svg {
          width: 16px;
          height: 16px;
        }
      }

      .chat-log {
        flex-grow: 1; /* 남은 공간을 모두 차지하도록 */
        padding: 0.9375rem; /* rem 단위 */
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* rem 단위 - Compact spacing */
        background-color: var(--background-color);
      }
      .message-group {
        display: flex;
        flex-direction: column;
        max-width: 85%;
      }
      /* .message-group.sent { align-self: flex-end; align-items: flex-end; } */
      .message-group.received {
        align-self: flex-start;
        align-items: flex-start;
      }
      .sender-info {
        display: flex;
        align-items: baseline;
        gap: 0.375rem; /* rem 단위 - Tighter spacing */
        margin-bottom: 0.15rem; /* rem 단위 - Reduced margin */
      }
      .nickname {
        font-weight: 600;
        font-size: 0.8125rem; /* rem 단위 - 13px, compact */
        color: var(--text-primary);
      }
      .timestamp {
        font-size: 0.6875rem; /* rem 단위 - 11px, smaller */
        color: var(--text-secondary);
        opacity: 0.7;
      }
      .message-text {
        padding: 0.5rem 0.75rem; /* rem 단위 - Compact padding */
        border-radius: 0.75rem; /* rem 단위 - Subtle rounded */
        word-wrap: break-word;
        line-height: 1.4;
        font-size: 0.875rem; /* rem 단위 - 14px */
      }
      .message-group.sent .message-text,
      .message-group.received .message-text {
        background: none; /* Minimal - no background for all messages */
        color: var(--text-primary);
      }
      /* ✨ 채팅 메시지 내 링크 스타일 */
      .message-text a {
        color: var(--text-primary);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.4);
      }
      .message-text a:hover {
        text-decoration-color: rgba(255, 255, 255, 0.8);
      }
      .system-message {
        text-align: center;
        color: var(--text-secondary);
        font-style: italic;
        font-size: 0.8125rem; /* rem 단위 */
        padding: 0.625rem 0; /* rem 단위 */
        width: 100%;
        align-self: center;
      }

      /* ✨ 링크 미리보기 카드 */
      .link-preview-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .link-preview-card {
        display: flex;
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        overflow: hidden;
        background: var(--container-bg);
        text-decoration: none;
        transition: all 0.2s ease;
        max-width: 100%;
      }
      .link-preview-card:hover {
        border-color: var(--primary-accent);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1);
      }
      .link-preview-image {
        width: 6rem;
        height: 6rem;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        background-color: var(--background-color);
      }
      .link-preview-meta {
        padding: 0.625rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex-grow: 1;
        overflow: hidden;
      }
      .link-preview-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .link-preview-description {
        font-size: 0.75rem;
        color: var(--text-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .link-preview-url {
        font-size: 0.6875rem;
        color: var(--text-secondary);
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ✨ 이미지 갤러리 */
      .image-gallery-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .image-caption {
        font-size: 0.875rem;
        color: var(--text-primary);
        padding: 0 0.25rem;
      }
      .image-gallery {
        display: grid;
        gap: 0.375rem;
        border-radius: 0.75rem;
        overflow: hidden;
      }
      /* 1개 이미지 - 전체 너비 */
      .image-gallery:has(.image-wrapper:only-child) {
        grid-template-columns: 1fr;
      }
      /* 2개 이미지 - 2열 */
      .image-gallery:has(.image-wrapper:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
      }
      /* 3개 이미지 - 첫번째 전체, 나머지 2열 */
      .image-gallery:has(.image-wrapper:nth-child(3):last-child) {
        grid-template-columns: repeat(2, 1fr);
      }
      .image-gallery:has(.image-wrapper:nth-child(3):last-child) .image-wrapper:first-child {
        grid-column: span 2;
      }
      /* 4개 이미지 - 2x2 그리드 */
      .image-gallery:has(.image-wrapper:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
      }
      .image-wrapper {
        position: relative;
        overflow: hidden;
        background: var(--background-color);
        aspect-ratio: 1;
      }
      .gallery-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.2s ease;
      }
      .gallery-image:hover {
        transform: scale(1.05);
      }

      /* ✨ 투표 */
      .poll-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        background: var(--container-bg);
      }
      .poll-question {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      .poll-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .poll-option {
        position: relative;
        padding: 0.625rem 0.75rem;
        border-radius: 0.5rem;
        background: var(--background-color);
        overflow: hidden;
      }
      .poll-progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
        opacity: 0.15;
        transition: width 0.3s ease;
      }
      .poll-option-content {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
      }
      .poll-option-text {
        font-size: 0.875rem;
        color: var(--text-primary);
        flex-grow: 1;
      }
      .poll-option-votes {
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-weight: 500;
        white-space: nowrap;
      }
      .poll-total-votes {
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-align: right;
        padding-top: 0.25rem;
        border-top: 1px solid var(--border-color);
      }

      /* ✨ 피드용 Poll 스타일 추가 */
      .poll-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .poll-icon {
        font-size: 1rem;
      }
      .poll-type {
        font-size: 0.75rem;
        color: var(--text-secondary);
        background: rgba(138, 43, 226, 0.1);
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
      }
      .poll-time {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-left: auto;
      }
      .poll-option {
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .poll-option.votable:hover {
        background: rgba(138, 43, 226, 0.1);
        border-color: var(--primary-accent);
      }
      .poll-option.selected {
        background: rgba(138, 43, 226, 0.15);
        border: 1px solid var(--primary-accent);
      }
      .poll-option-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
        opacity: 0.2;
        transition: width 0.5s ease;
        border-radius: 0.5rem 0 0 0.5rem;
      }
      .poll-option-percentage {
        font-size: 0.75rem;
        color: var(--primary-accent);
        font-weight: 600;
        min-width: 2.5rem;
        text-align: right;
      }
      .poll-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
      }
      .poll-vote-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: white;
        background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
        border: none;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .poll-vote-btn:hover:not(:disabled) {
        transform: scale(1.02);
        box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
      }
      .poll-vote-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      /* 사용자가 투표한 옵션 스타일 */
      .poll-option.user-voted {
        border-color: var(--accent-color);
        background-color: rgba(var(--accent-color-rgb, 33, 150, 243), 0.1);
      }
      .poll-option.user-voted .poll-option-bar {
        background-color: var(--accent-color);
        opacity: 0.3;
      }
      /* 투표 완료 라벨 */
      .poll-voted-label {
        font-size: 0.75rem;
        color: var(--accent-color);
        font-weight: 500;
      }

      .chat-form {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0.75rem;
        /* 데스크탑: 최소 패딩 */
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-color);
        background-color: var(--container-bg);
        gap: 0.375rem;
        flex-shrink: 0;
        position: relative;
        box-sizing: border-box;
        max-width: 100vw;
      }

      /* 모바일에서 입력폼 패딩 조정 */
      @media (max-width: 768px) {
        .chat-form {
          padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); /* 모바일에서 더 큰 패딩 */
        }
      }

      /* ✨ 입력창 내부에 전송 버튼 배치 */
      .input-with-button {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box; /* 패딩과 보더를 포함한 크기 계산 */
        max-width: 100%; /* 부모 컨테이너를 초과하지 않도록 */
      }

      .input-with-button #message-input {
        padding-right: 3rem; /* 버튼 공간 확보 */
        width: 100%;
        box-sizing: border-box; /* 패딩과 보더를 포함한 크기 계산 */
        max-width: 100%; /* 부모 컨테이너를 초과하지 않도록 */
        min-width: 0; /* 최소 너비 제한 없음 */
      }

      /* ✨ ContentType 선택 버튼 */
      .content-type-selector {
        display: flex;
        gap: 0.25rem;
        padding: 0.25rem;
        background: var(--background-color);
        border-radius: 0.5rem;
        align-self: flex-start;
      }
      .content-type-btn {
        padding: 0.375rem 0.625rem;
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        background: transparent;
        color: var(--text-secondary);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .content-type-btn:hover {
        background: var(--container-bg);
        border-color: var(--primary-accent);
      }
      .content-type-btn.active {
        background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
        border-color: var(--primary-accent);
        color: white;
      }

      /* ✨ 입력 컨테이너 */
      .input-container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 0.5rem;
        box-sizing: border-box;
        max-width: 100%; /* 화면 너비 초과 방지 */
        overflow: hidden; /* 내용이 넘치는 것을 방지 */
      }
      .input-mode {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .input-mode.hidden {
        display: none;
      }
      .hidden {
        display: none !important;
      }

      /* ✨ 링크 입력 모드 */
      #link-url-input,
      #link-text-input {
        padding: 0.625rem 0.875rem;
        border: 1.5px solid var(--border-color);
        border-radius: 0.75rem;
        background-color: var(--background-color);
        color: var(--text-primary);
        font-size: 0.875rem;
        transition: all 0.2s ease;
      }
      #link-url-input:focus,
      #link-text-input:focus {
        outline: none;
        border-color: var(--primary-accent);
        box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
      }
      .link-preview-mini {
        padding: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background: var(--container-bg);
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      /* ✨ 이미지 입력 모드 */
      .file-select-btn {
        padding: 0.625rem 0.875rem;
        border: 1.5px dashed var(--border-color);
        border-radius: 0.75rem;
        background: var(--background-color);
        color: var(--text-secondary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .file-select-btn:hover {
        border-color: var(--primary-accent);
        background: var(--container-bg);
      }
      #image-caption-input {
        padding: 0.625rem 0.875rem;
        border: 1.5px solid var(--border-color);
        border-radius: 0.75rem;
        background-color: var(--background-color);
        color: var(--text-primary);
        font-size: 0.875rem;
      }
      .image-preview-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.375rem;
      }
      .image-preview-item {
        position: relative;
        aspect-ratio: 1;
        border-radius: 0.5rem;
        overflow: hidden;
        background: var(--background-color);
      }
      .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .image-preview-remove {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        cursor: pointer;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ===================================
         ✨ 내비게이션 & 뷰 컨테이너 (듀얼 모드)
         =================================== */

      /* 뷰 컨테이너 (피드/채팅) */
      .view-container {
        flex-grow: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }

      /* 피드 로그 (카드 목록) */
      .feed-log {
        padding: 0.9375rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      /* ✨ 함께 많이 본 노드 섹션 */
      .related-nodes-section {
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
        border-bottom: 1px solid var(--border-color);
      }

      .related-nodes-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
      }

      .related-nodes-icon {
        font-size: 0.9rem;
      }

      .related-nodes-title {
        font-weight: 500;
      }

      .related-nodes-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .related-node-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        font-size: 0.8rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .related-node-chip:hover {
        background: rgba(236, 72, 153, 0.15);
        border-color: var(--primary-accent);
        color: var(--primary-accent);
      }

      .related-node-chip .chip-count {
        font-size: 0.7rem;
        color: var(--text-secondary);
        opacity: 0.7;
      }

      /* ✨ 클러스터 관련 노드 섹션 (시스템 노드용) */
      .cluster-nodes-section {
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
        border-bottom: 1px solid var(--border-color);
      }

      .cluster-nodes-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
      }

      .cluster-nodes-icon {
        font-size: 0.9rem;
      }

      .cluster-nodes-title {
        font-weight: 500;
      }

      .cluster-nodes-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .cluster-node-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        font-size: 0.8rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .cluster-node-chip:hover {
        background: rgba(251, 146, 60, 0.15);
        border-color: #fb923c;
        color: #fb923c;
      }

      .cluster-node-chip .chip-type-icon {
        font-size: 0.75rem;
      }

      .cluster-node-chip .chip-title {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cluster-node-chip--parent {
        border-color: #fb923c;
        background: rgba(251, 146, 60, 0.1);
      }

      .cluster-node-chip--conquered {
        opacity: 0.7;
      }

      .cluster-node-chip--conquered .chip-title {
        text-decoration: line-through;
      }

      /* 하단 내비게이션 바 */
      .bottom-navigation {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3.5rem;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        display: flex;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
      }

      .nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        border: none;
        background: none;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0.4rem;
      }

      .nav-tab .nav-icon {
        width: 22px;
        height: 22px;
        transition: all 0.2s ease;
      }

      .nav-tab .label {
        font-size: 0.625rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        display: block;
        width: 100%;
        text-align: center;
      }

      .nav-tab.active {
        color: var(--text-primary);
      }

      .nav-tab.active .nav-icon {
        stroke: var(--text-primary);
        fill: rgba(255, 255, 255, 0.1);
      }

      .nav-tab:hover:not(.active) {
        color: var(--text-primary);
      }

      /* 채팅 모드에서 작성 버튼 숨김 */
      .nav-tab.hidden {
        display: none;
      }

      /* ✨ 피드/채팅 모드 전환 스타일 */
      /* 피드 탭이 활성화되어 있을 때 채팅 폼 숨김 */
      #feed-tab.active ~ .chat-form {
        display: none !important;
      }

      /* 채팅 탭이 활성화되어 있을 때만 채팅 폼 표시 */
      #chat-tab.active ~ .chat-form {
        display: block !important;
      }

      /* 인앱 브라우저에서 하단 UI를 위한 추가 여백 */
      body.in-app-browser #chat-screen {
        padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom))); /* 인앱 브라우저 여백 + Safe Area */
      }

      /* 데스크탑 인앱 브라우저에서는 패딩 최소화 */
      @media (min-width: 769px) {
        body.in-app-browser #chat-screen {
          padding-bottom: max(1rem, env(safe-area-inset-bottom)); /* 데스크탑에서는 최소 패딩 */
        }
      }
      #message-input {
        flex-grow: 1;
        padding: 0.75rem 1.125rem; /* rem 단위 */
        border: 2px solid var(--border-color);
        border-radius: 1.375rem; /* rem 단위 */
        background-color: var(--background-color);
        color: var(--text-primary);
        font-size: 0.9375rem; /* rem 단위 */
        transition: all 0.2s ease;
      }
      #message-input::placeholder {
        color: var(--text-secondary);
      }
      #message-input:focus {
        outline: none;
        border-color: var(--primary-accent);
        box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
      }
      .input-send-btn {
        position: absolute;
        right: 0.375rem;
        top: 50%; /* 입력창 중앙에 맞춤 */
        transform: translateY(-50%); /* 정확한 중앙 정렬 */
        background: var(--primary-accent);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
      }
      .input-send-btn:hover {
        transform: translateY(-50%) scale(1.05); /* 중앙 정렬 유지하면서 확대 */
        background: var(--secondary-accent);
      }

      .input-send-btn:active {
        transform: translateY(-50%) scale(0.95); /* 중앙 정렬 유지하면서 축소 */
      }

      /* ✨ 개인화 노드 추천 섹션 CSS */
      .discover-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        margin-bottom: 1.25rem;
      }

      .discover-section {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 0.875rem;
      }

      .discover-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
      }

      .discover-header .discover-icon {
        font-size: 1rem;
      }

      .discover-header h3 {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
      }

      .discover-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .discover-item {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 0.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
      }

      .discover-item:hover {
        border-color: var(--primary-accent);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(236, 72, 153, 0.15);
      }

      .discover-item-left {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
      }

      .discover-item-right {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex-shrink: 0;
      }

      .discover-item .node-title {
        font-weight: 500;
        font-size: 0.875rem;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .discover-item .node-meta {
        font-size: 0.75rem;
        color: var(--text-secondary);
        white-space: nowrap;
      }

      .discover-item .node-badge {
        background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
        color: white;
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        font-weight: 600;
        margin-left: 0.5rem;
      }

      /* ✨ System Node 스타일 */
      .discover-item--system {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(236, 72, 153, 0.08));
        border-color: rgba(139, 92, 246, 0.3);
      }

      .discover-item--system:hover {
        border-color: rgba(139, 92, 246, 0.6);
        box-shadow: 0 2px 12px rgba(139, 92, 246, 0.2);
      }

      .discover-item--unconquered {
        animation: pulse-border 2s infinite;
      }

      @keyframes pulse-border {
        0%, 100% { border-color: rgba(139, 92, 246, 0.3); }
        50% { border-color: rgba(236, 72, 153, 0.6); }
      }

      .system-node-icon {
        margin-right: 0.375rem;
        font-size: 0.875rem;
      }

      .node-badge--conquest {
        background: linear-gradient(135deg, #8b5cf6, #06b6d4);
        animation: shimmer 1.5s infinite;
      }

      /* v1.12.1: 트렌드 키워드 뱃지 */
      .node-badge--trend {
        background: linear-gradient(135deg, #f97316, #eab308);
        color: #000;
        font-weight: 600;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* v1.12.2: 소멸 위험 배지 (Loss Aversion 넛지) */
      .node-badge--extinction {
        background: linear-gradient(135deg, #ef4444, #f97316);
        color: #fff;
        font-weight: 600;
        animation: pulse-warning 2s infinite;
      }

      @keyframes pulse-warning {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
      }

      @keyframes shimmer {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
      }

      .node-meta--question {
        font-style: italic;
        color: var(--text-secondary);
      }

      /* v1.15.0: 관심 없음 버튼 */
      .disinterest-btn {
        opacity: 0;
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0.25rem;
        margin-left: 0.5rem;
        font-size: 0.875rem;
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s, background 0.2s, color 0.2s;
      }

      .discover-item:hover .disinterest-btn {
        opacity: 1;
      }

      .disinterest-btn:hover {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
      }

      /* 섹션별 강조색 */
      #for-you-section .discover-header .discover-icon { color: #f59e0b; }
      #trending-section .discover-header .discover-icon { color: #ef4444; }
      #new-nodes-section .discover-header .discover-icon { color: #22c55e; }
      #explore-section .discover-header .discover-icon { color: #8b5cf6; }

      .discover-empty {
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.75rem;
        padding: 0.5rem;
      }

      /* ✨ Cold Start Onboarding Modal */
      .onboarding-modal-content {
        max-width: 400px;
        width: 90%;
      }

      .onboarding-subtitle {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin: 0 0 1rem 0;
        text-align: center;
      }

      .onboarding-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 1.5rem;
      }

      .onboarding-category {
        background: var(--container-bg);
        border: 2px solid var(--border-color);
        border-radius: 2rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
      }

      .onboarding-category:hover {
        border-color: var(--primary-accent);
        background: rgba(236, 72, 153, 0.1);
      }

      .onboarding-category.selected {
        border-color: var(--primary-accent);
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.2));
        color: var(--primary-accent);
      }

      .onboarding-category .category-emoji {
        font-size: 1rem;
      }

      .onboarding-category .category-label {
        font-weight: 500;
      }

      .onboarding-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
      }

      .onboarding-skip-btn {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        padding: 0.625rem 1.25rem;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
        transition: all 0.2s ease;
      }

      .onboarding-skip-btn:hover {
        border-color: var(--text-secondary);
        color: var(--text-primary);
      }

      .onboarding-submit-btn {
        background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
        border: none;
        color: white;
        padding: 0.625rem 1.25rem;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.2s ease;
      }

      .onboarding-submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .onboarding-submit-btn:not(:disabled):hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
      }

      /* ✨ Hot Nodes 섹션 CSS - Dark Theme */
      .hot-nodes-section {
        width: 100%;
        margin-bottom: 1.25rem;
        color: var(--text-primary);
        text-align: left;
      }
      .hot-nodes-section h2 {
        font-size: 1.125rem;
        margin-top: 0;
        margin-bottom: 0.75rem;
        font-weight: 600;
        text-align: center;
        color: var(--text-primary);
      }
      #hot-nodes-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .hot-node-item {
        background-color: var(--container-bg);
        border: 1px solid var(--border-color);
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }
      .hot-node-item:hover {
        background-color: #334155;
        border-color: var(--primary-accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
      }
      .hot-node-item .node-key {
        font-weight: 600;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-primary);
      }
      .hot-node-item .node-stats {
        font-size: 0.75rem;
        color: var(--text-secondary);
        flex-shrink: 0;
        margin-left: 0.5rem;
      }

      /* ✨ 유사 노드 추천 UI CSS - Dark Theme */
      #node-recommendation-list {
        background-color: var(--container-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem; /* rem 단위 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        width: 100%;
        max-height: 9.375rem; /* rem 단위 */
        overflow-y: auto;
        z-index: 10;
        text-align: left;
        padding: 0.3125rem 0; /* rem 단위 */
        display: none;
        margin-top: 0.3125rem; /* rem 단위 */
      }
      .node-recommendation-item {
        padding: 0.75rem 1rem; /* rem 단위 */
        cursor: pointer;
        color: var(--text-primary);
        font-size: 0.9375rem; /* rem 단위 */
        transition: background-color 0.15s ease;
      }
      .node-recommendation-item:hover {
        background-color: var(--border-color);
      }

      /* ✨ "첫 노더가 되어주세요" 메시지 스타일 */
      #no-node-message {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.875rem; /* rem 단위 */
        margin-top: 0.625rem; /* rem 단위 */
        margin-bottom: 0;
        text-align: center;
        line-height: 1.4;
        font-style: italic;
        text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
        visibility: hidden;
        box-sizing: border-box;
        padding: 0 0.625rem; /* rem 단위 */
      }

      /* ✨ SnackBar CSS */
      .snackbar {
        position: fixed;
        /* top: 0px; left: 50%; transform: translateX(-50%); */ /* snackbar-container에서 위치 잡음 */
        background-color: #333;
        color: white;
        padding: 0.75rem 1.25rem; /* rem 단위 */
        border-radius: 0.5rem; /* rem 단위 */
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9375rem; /* rem 단위 */
        font-size: 0.9375rem; /* rem 단위 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out,
          top 0.3s ease-in-out;
        cursor: pointer;
        /* z-index: 1000; */
        max-width: 90%;
        min-width: 15.625rem; /* rem 단위 */
        width: fit-content;
        text-align: center;
        white-space: normal;
        word-break: keep-all;
      }

      .snackbar.show {
        opacity: 1;
        visibility: visible;
        /* top: 10px; */ /* snackbar-container의 padding-top으로 제어 */
      }

      .snackbar-close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 1.125rem; /* rem 단위 */
        cursor: pointer;
        margin-left: 0.625rem; /* rem 단위 */
        padding: 0 0.3125rem; /* rem 단위 */
        line-height: 1;
        opacity: 0.7;
        transition: opacity 0.2s;
      }
      .snackbar-close-btn:hover {
        opacity: 1;
      }

      /* ✨ snackbarContainer의 스타일 */
      #snackbar-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: flex-start; /* 상단 정렬 */
        padding-top: 1.25rem; /* rem 단위 */
        box-sizing: border-box;
      }
      #snackbar-container .snackbar {
        pointer-events: auto;
        top: auto;
        left: auto;
        transform: none;
      }


      /* ✨ Report Modal 스타일 */
      .modal {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        animation: fadeIn 0.2s ease-out;
      }
      .modal.show {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .modal-content {
        background-color: #fff;
        border-radius: 1rem;
        max-width: 28rem;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease-out;
      }
      @keyframes slideUp {
        from {
          transform: translateY(2rem);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #e0e0e0;
      }
      .modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        color: #333;
      }
      .modal-close-btn {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #666;
        padding: 0;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        transition: background-color 0.2s, color 0.2s;
      }
      .modal-close-btn:hover {
        background-color: #f0f0f0;
        color: #333;
      }
      .modal-body {
        padding: 1.5rem;
      }
      .modal-subtitle {
        margin: 0 0 1rem 0;
        color: #666;
        font-size: 0.9375rem;
      }
      .report-reason-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
      }
      .report-reason-option {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem;
        border: 2px solid #e0e0e0;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
      }
      .report-reason-option:hover {
        border-color: var(--primary-accent);
        background-color: rgba(76, 175, 80, 0.05);
      }
      .report-reason-option input[type="radio"] {
        margin-top: 0.25rem;
        cursor: pointer;
      }
      .report-reason-option input[type="radio"]:checked + .reason-label {
        color: var(--primary-accent);
      }
      .report-reason-option:has(input:checked) {
        border-color: var(--primary-accent);
        background-color: rgba(76, 175, 80, 0.1);
      }
      .reason-label {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .reason-label strong {
        font-size: 0.9375rem;
        color: #333;
      }
      .reason-label small {
        font-size: 0.8125rem;
        color: #666;
      }
      .report-description-group {
        margin-bottom: 1.5rem;
      }
      .report-description-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.9375rem;
        color: #333;
        font-weight: 500;
      }
      .report-description-group textarea {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e0e0e0;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s;
      }
      .report-description-group textarea:focus {
        outline: none;
        border-color: var(--primary-accent);
      }
      .modal-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
      }
      .modal-actions button {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
      }
      .btn-cancel {
        background-color: #f0f0f0;
        color: #333;
      }
      .btn-cancel:hover {
        background-color: #e0e0e0;
      }
      .btn-submit {
        background-color: var(--primary-accent);
        color: white;
      }
      .btn-submit:hover {
        background-color: #45a049;
      }
      .btn-submit:active {
        transform: scale(0.98);
      }

      /* ✨ iOS Safari 100vh 문제 해결 */
      @supports (-webkit-touch-callout: none) {
        body {
          height: -webkit-fill-available;
        }
        .container {
          height: -webkit-fill-available;
        }
      }

      /* ✨ Activity Log 스타일 */
      #activity-log-container {
        width: 100%;
        max-height: 24rem; /* ✨ 수정: 공간 더 확보 */
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.75rem; /* ✨ 수정: 위쪽 텍스트와 가깝게 */
        padding: 0.5rem;
        border-radius: 0.75rem;
        background-color: rgba(0, 0, 0, 0.1);
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
      }

      /* ✨ Activity Log 스타일 수정 */
      .log-item {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 0.6rem 1rem;
        border-radius: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        animation: fadeIn 0.5s ease-out;
      }
      /* ✨ NEW_MESSAGE 로그를 위한 특별 스타일 */
      .log-item-message {
        align-items: flex-start; /* 세로 정렬을 위로 */
      }
      .log-item.clickable {
        cursor: pointer;
        transition: background-color 0.2s;
      }
      .log-item.clickable:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .log-message {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.9);
        flex-grow: 1;
        text-align: left;
      }
      .log-message strong {
        color: white;
        font-weight: 600;
      }

      /* ✨ 메시지 미리보기 스타일 추가 */
      .log-message-main {
        margin-bottom: 0.25rem;
      }
      .log-message-preview {
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;

        /* ✨ 오버플로우 처리 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 250px; /* 최대 너비 제한 (필요에 따라 조정) */
      }

      .log-timestamp {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.7);
        flex-shrink: 0;
        white-space: nowrap;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* ✨ 1. 새 알림 화면 기본 스타일 (채팅 화면과 유사하게) */
      #notification-screen {
        display: none; /* JS로 제어하기 전까지 숨김 */
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
        box-sizing: border-box;
        background-color: var(--container-bg); /* 흰색 배경 */
      }

      /* ✨ 2. 알림 화면 헤더 스타일 (높이 조정) */
      #notification-screen .chat-header {
        min-height: auto; /* 채팅 헤더의 min-height 제거 */
        padding: 0.75rem 1rem; /* 패딩 줄이기 */
      }

      #notification-title {
        font-weight: 600;
        font-size: 1.125rem;
        padding-left: 0.5rem; /* 뒤로가기 버튼과 간격 */
      }

      /* ✨ 3. 알림 화면의 뒤로가기 버튼 (leave-button 스타일 재사용) */
      #back-to-entry-btn {
        background: transparent;
        color: var(--text-secondary);
        border: none;
        padding: 0.3125rem 0.625rem;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        transition: background-color 0.2s, color 0.2s;
        flex-shrink: 0;
      }
      #back-to-entry-btn:hover {
        background-color: #f0f0f0;
      }

      /* ✨ 4. 홈 화면에 추가한 알림 버튼 스타일 */
      #show-notifications-btn {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: none;
        border: none;
        font-size: 1.5rem; /* 아이콘 크기 */
        cursor: pointer;
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.2s, transform 0.2s;
        z-index: 10;
        padding: 0.25rem;
        line-height: 1;
      }
      #show-notifications-btn:hover {
        color: white;
        transform: scale(1.1);
      } /* --- [중요] 알림 화면 내부의 로그 스타일 덮어쓰기 --- */

      /* ✨ 5. 로그 컨테이너 (흰색 배경에 맞게 수정) */
      #notification-screen #activity-log-container {
        background-color: var(--background-color); /* 밝은 회색 배경 */
        border-radius: 0; /* 화면 전체를 쓰므로 둥근 모서리 제거 */
        padding: 0.75rem;
        gap: 0.75rem;
        margin-top: 0;
        max-height: none; /* 최대 높이 제한 제거 */
        flex-grow: 1; /* 남은 공간을 꽉 채움 */
      }

      /* ✨ 6. 로그 아이템 (흰색 카드로 변경) */
      #notification-screen .log-item {
        background-color: var(--container-bg); /* 흰색 카드 */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        animation: none; /* 홈 화면의 fadeIn 애니메이션 제거 */
      }
      #notification-screen .log-item:hover {
        background-color: #fdfdfd; /* 미세한 호버 효과 */
      }

      /* ✨ 7. 로그 텍스트 (어두운 색으로 변경) */
      #notification-screen .log-message {
        color: var(--text-primary); /* 기본 텍스트 색상 */
      }
      #notification-screen .log-message strong {
        color: var(--primary-accent); /* 강조 색상 */
      }
      #notification-screen .log-message-preview {
        color: var(--text-secondary); /* 연한 텍스트 색상 */
        font-style: normal; /* 이탤릭체 제거 (선택 사항) */
        color: rgba(0, 0, 0, 0.5);
      }
      #notification-screen .log-timestamp {
        color: var(--text-secondary); /* 연한 텍스트 색상 */
      }

      /* Share Modal Styles */
      .share-modal-content {
        max-width: 400px;
      }

      .share-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0.5rem 0;
      }

      .share-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1.5rem 1rem;
        border: 2px solid var(--border-color);
        border-radius: 12px;
        background: var(--container-bg);
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
      }

      .share-option:hover {
        border-color: var(--primary-accent);
        background: var(--secondary-accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
      }

      .share-option:active {
        transform: translateY(0);
      }

      .share-icon {
        font-size: 2rem;
      }

      .share-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-primary);
      }

      @media (max-width: 480px) {
        .share-modal-content {
          max-width: calc(100vw - 32px);
          width: calc(100% - 32px);
        }

        .share-options {
          grid-template-columns: repeat(2, 1fr);
          gap: 0.75rem;
          padding: 0.5rem;
        }

        .share-option {
          padding: 1rem 0.5rem;
        }

        .share-icon {
          font-size: 1.5rem;
        }

        .share-label {
          font-size: 0.75rem;
        }
      }

      /* ===================================
         🔍 X-Style Inline Search
         =================================== */

      /* 인라인 검색 래퍼 (헤더 내부) */
      .inline-search-wrapper {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1;
        min-width: 0;
      }

      .inline-search-back {
        background: transparent;
        border: none;
        color: #94A3B8;
        font-size: 1.25rem;
        padding: 0.5rem;
        cursor: pointer;
        transition: color 0.15s ease;
        flex-shrink: 0;
      }

      .inline-search-back:hover {
        color: #EC4899;
      }

      .inline-search-input-container {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
      }

      .inline-search-icon {
        position: absolute;
        left: 0.875rem;
        color: #64748B;
        pointer-events: none;
      }

      .inline-search-input {
        width: 100%;
        padding: 0.625rem 2.25rem 0.625rem 2.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 2rem;
        font-size: 0.9375rem;
        background: rgba(255, 255, 255, 0.05);
        color: #F8FAFC;
        transition: all 0.15s ease;
        box-sizing: border-box;
        font-family: inherit;
      }

      .inline-search-input::placeholder {
        color: #64748B;
      }

      .inline-search-input:focus {
        outline: none;
        border-color: rgba(236, 72, 153, 0.4);
        background: rgba(255, 255, 255, 0.08);
      }

      .inline-search-clear {
        position: absolute;
        right: 0.5rem;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: #94A3B8;
        font-size: 0.75rem;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
      }

      .inline-search-clear:hover {
        background: rgba(236, 72, 153, 0.2);
        color: #EC4899;
      }

      /* 아이콘 버튼 (검색, 공유) */
      .icon-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.15s ease;
        color: rgba(248, 250, 252, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-btn:hover {
        background: rgba(236, 72, 153, 0.15);
        color: #EC4899;
      }

      .icon-btn svg {
        display: block;
      }

      /* .leave-link 제거됨 - 하단 네비게이션의 홈 탭으로 대체 */

      /* 검색 결과 (콘텐츠 영역 대체) */
      .inline-search-results {
        flex: 1;
        overflow-y: auto;
        background: var(--main-bg);
        padding-bottom: 5rem;
        display: none;
        flex-direction: column;
      }

      .inline-search-results[style*="display: flex"] {
        display: flex;
      }

      /* 로딩 */
      .inline-search-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        color: #94A3B8;
        font-size: 0.875rem;
        gap: 0.75rem;
      }

      .inline-search-spinner {
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid rgba(148, 163, 184, 0.2);
        border-top-color: #EC4899;
        border-radius: 50%;
        animation: inlineSearchSpinner 0.6s linear infinite;
      }

      @keyframes inlineSearchSpinner {
        to { transform: rotate(360deg); }
      }

      /* 결과 섹션 */
      .inline-search-sections {
        padding: 0.75rem 0;
      }

      .inline-search-section {
        padding: 0 1rem;
        margin-bottom: 1rem;
      }

      .inline-search-section:last-child {
        margin-bottom: 0;
      }

      .inline-section-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748B;
        margin: 0 0 0.5rem 0;
        padding: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      /* 노드 리스트 */
      .inline-node-list {
        display: flex;
        flex-direction: column;
      }

      /* 노드 아이템 */
      .inline-node-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0.5rem;
        cursor: pointer;
        transition: background 0.1s ease;
        border-radius: 0.5rem;
        margin: 0 -0.5rem;
      }

      .inline-node-item:hover {
        background: rgba(255, 255, 255, 0.05);
      }

      .inline-node-item:active {
        background: rgba(236, 72, 153, 0.1);
      }

      .inline-node-title {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #F1F5F9;
      }

      .inline-node-meta {
        font-size: 0.8125rem;
        color: #EC4899;
        font-weight: 500;
      }

      /* 빈 메시지 */
      .inline-empty-message {
        text-align: center;
        padding: 1rem;
        color: #64748B;
        font-size: 0.875rem;
      }

      /* 노드 생성 버튼 섹션 */
      .inline-create-section {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .inline-create-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
        border: 1px solid rgba(236, 72, 153, 0.3);
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
      }

      .inline-create-btn:hover {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
        border-color: rgba(236, 72, 153, 0.5);
        transform: translateY(-1px);
      }

      .inline-create-btn:active {
        transform: translateY(0);
      }

      .inline-create-btn .create-icon {
        font-size: 1.25rem;
      }

      .inline-create-btn .create-text {
        flex: 1;
        text-align: left;
        color: #F1F5F9;
        font-size: 0.9375rem;
        font-weight: 500;
      }

      .inline-create-btn .create-text span {
        color: #EC4899;
        font-weight: 600;
      }

      .inline-create-btn .create-arrow {
        color: #94A3B8;
        font-size: 1rem;
        transition: transform 0.2s ease;
      }

      .inline-create-btn:hover .create-arrow {
        transform: translateX(3px);
        color: #EC4899;
      }

      /* 검색 활성화 시 헤더 스타일 */
      .chat-header.search-active .header-actions {
        display: none;
      }

      .chat-header.search-active #back-button {
        display: none !important;
      }

      /* chat-screen에 position relative 추가 */
      #chat-screen {
        position: relative;
      }

      /* ===================================
         🎨 Logo & Loading Animation Styles
         =================================== */

      /* Logo container */
      .noding-logo {
        width: 80px;
        height: 80px;
        margin: 0 auto 2rem;
        position: relative;
      }

      .noding-logo svg {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.3));
      }

      /* Loading overlay (첫 진입 시에만) */
      .loading-overlay {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 400px;
        height: 100%;
        max-height: 800px;
        background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 1.5rem;
        overflow: hidden;

        @media (max-width: 480px) {
          max-width: 100%;
          max-height: 100%;
          border-radius: 0;
        }
        gap: 2rem;
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.5s ease-out;
      }

      .loading-overlay.hidden {
        opacity: 0;
        pointer-events: none;
      }

      /* 로딩 진행 상황 표시 */
      .loading-progress {
        width: 200px;
        text-align: center;
      }

      .loading-progress-bar {
        width: 100%;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        overflow: hidden;
      }

      .loading-progress-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
        border-radius: 2px;
        transition: width 0.3s ease-out;
      }

      .loading-status {
        margin-top: 0.75rem;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        min-height: 1.2em;
      }

      .loading-status.fade-in {
        animation: fadeInStatus 0.4s ease-out;
      }

      @keyframes fadeInStatus {
        from { opacity: 0.3; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      /* Transition tip (노드 전환 시) */
      .transition-tip {
        text-align: center;
        max-width: 280px;
      }

      .transition-tip-text {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 400;
        line-height: 1.5;
      }

      /* Animated logo container */
      .loading-logo {
        width: 140px;
        height: 140px;
        position: relative;
      }

      /* 우주 느낌의 노드 애니메이션 */
      .cosmic-node {
        position: absolute;
        border-radius: 50%;
        will-change: transform, opacity;
      }

      /* Main node (center, large circle - outline) */
      /* SVG: cx=100, cy=100, r=40 → (50%, 50%) */
      .cosmic-node--main {
        width: 56px;  /* r=40 → diameter=80 → scaled to 140px container = 56px */
        height: 56px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.1));
        border: 3px solid rgba(236, 72, 153, 0.8);
        border-radius: 50%;
        box-shadow: 0 0 25px rgba(236, 72, 153, 0.5),
                    0 0 40px rgba(139, 92, 246, 0.3),
                    inset 0 0 20px rgba(236, 72, 153, 0.1);
        animation: nodePulse 2s ease-in-out infinite;
      }

      /* Secondary node (top-right, small circle - outline) */
      /* SVG: cx=150, cy=50, r=18 → (75%, 25%) */
      .cosmic-node--secondary {
        width: 25px;  /* r=18 → diameter=36 → scaled = 25px */
        height: 25px;
        left: 75%;
        top: 25%;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
        border: 2.5px solid rgba(139, 92, 246, 0.8);
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.4),
                    0 0 30px rgba(236, 72, 153, 0.2);
        animation: nodeFloat 3s ease-in-out infinite, nodePulse 2.5s ease-in-out 0.3s infinite;
      }

      /* Tertiary node (bottom center, solid filled dot) */
      /* SVG: cx=100, cy=170, r=10 → (50%, 85%) */
      .cosmic-node--tertiary {
        width: 14px;  /* r=10 → diameter=20 → scaled = 14px */
        height: 14px;
        left: 50%;
        top: 85%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle at 30% 30%, rgba(236, 72, 153, 1), rgba(139, 92, 246, 0.9));
        box-shadow: 0 0 18px rgba(236, 72, 153, 0.7),
                    0 0 30px rgba(139, 92, 246, 0.4);
        animation: nodePulse 2.5s ease-in-out 0.6s infinite;
      }

      /* Connection lines */
      .cosmic-line {
        position: absolute;
        background: linear-gradient(135deg,
          rgba(236, 72, 153, 0.5),
          rgba(139, 92, 246, 0.5));
        transform-origin: top center;
        will-change: transform, opacity;
        animation: lineGlow 2s ease-in-out infinite;
      }

      /* Line from main to secondary (diagonal) */
      /* SVG: from (100,100) to (150,50) → from (50%,50%) to (75%,25%) */
      /* Length: sqrt((25)^2 + (25)^2) = 35.35% → ~50px for 140px container */
      .cosmic-line--1 {
        width: 2px;
        height: 49px;  /* sqrt(35^2 + 35^2) ≈ 49.5px */
        left: 50%;
        top: 50%;
        /* Rotate -135deg to point from center to top-right (1 o'clock direction) */
        transform: translate(-50%, 0) rotate(-135deg);
        transform-origin: top center;
        animation-delay: 0.2s;
      }

      /* Line from main to tertiary (vertical) */
      /* SVG: from (100,140) to (100,170) → from (50%,70%) to (50%,85%) */
      /* Length: 30 units in SVG → 21px for 140px container */
      .cosmic-line--2 {
        width: 2px;
        height: 21px;  /* (170-140)/200 * 140 = 21px */
        left: 50%;
        top: 70%;
        transform: translateX(-50%);
        animation-delay: 0.5s;
      }

      /* ===================================
         🎬 Keyframe Animations
         =================================== */

      /* Node pulse (확대/축소 + 빛 효과) */
      /* IMPORTANT: Include translate(-50%, -50%) to maintain centering during animation */
      @keyframes nodePulse {
        0%, 100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.9;
          filter: brightness(1);
        }
        50% {
          transform: translate(-50%, -50%) scale(1.08);
          opacity: 1;
          filter: brightness(1.2);
        }
      }

      /* Node float (우주 느낌의 떠다니는 효과) */
      /* IMPORTANT: Combine centering translate with float offset */
      @keyframes nodeFloat {
        0%, 100% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        25% {
          transform: translate(calc(-50% + 2px), calc(-50% - 2px)) rotate(1deg);
        }
        50% {
          transform: translate(-50%, calc(-50% - 3px)) rotate(0deg);
        }
        75% {
          transform: translate(calc(-50% - 2px), calc(-50% - 1px)) rotate(-1deg);
        }
      }

      /* Line glow (연결선 빛) */
      @keyframes lineGlow {
        0%, 100% {
          opacity: 0.4;
          box-shadow: 0 0 5px rgba(236, 72, 153, 0.3);
        }
        50% {
          opacity: 0.8;
          box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
        }
      }

      /* ===================================
         📱 Responsive Adjustments
         =================================== */

      @media (max-width: 480px) {
        .noding-logo {
          width: 60px;
          height: 60px;
          margin-bottom: 1.5rem;
        }

        .loading-logo {
          width: 120px;
          height: 120px;
        }

        .cosmic-node--main {
          width: 48px;  /* 120px * 40% = 48px */
          height: 48px;
          border-width: 2.5px;
        }

        .cosmic-node--secondary {
          width: 24px;
          height: 24px;
          border-width: 2px;
          /* 동일한 비율 유지 (75%, 25%) */
        }

        .cosmic-node--tertiary {
          width: 12px;
          height: 12px;
          /* 동일한 비율 유지 (50%, 85%) */
        }

        .cosmic-line--1 {
          height: 42px;  /* 120px * 35% */
        }

        .cosmic-line--2 {
          height: 18px;  /* 120px * 15% */
        }

        /* 모바일 입력창 추가 최적화 */
        .chat-form {
          padding-left: 0.5rem;
          padding-right: 0.5rem;
        }

        .input-with-button {
          margin: 0;
        }

        #message-input {
          font-size: 16px; /* iOS에서 줌 방지 */
          padding: 0.75rem;
          padding-right: 3rem;
        }

        .input-send-btn {
          right: 0.5rem;
        }
      }

      /* ===================================
         ✨ 피드 포스트 스타일
         =================================== */

      /* 기존 empty-feed (호환성 유지) */
      .empty-feed {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--text-secondary);
      }

      .empty-feed .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
      }

      .empty-feed h3 {
        margin: 0 0 0.5rem 0;
        color: var(--text-primary);
      }

      /* ✨ 새로운 모던 빈 피드 스타일 */
      .empty-feed-modern {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1.5rem;
        text-align: center;
        min-height: 280px;
      }

      .empty-feed-illustration {
        width: 100px;
        height: 100px;
        margin-bottom: 1.25rem;
        animation: emptyFeedFloat 3s ease-in-out infinite;
      }

      .empty-feed-illustration svg {
        width: 100%;
        height: 100%;
      }

      .empty-feed-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.5rem 0;
        line-height: 1.4;
      }

      .empty-feed-title .gradient-text {
        color: var(--accent-pink);
        font-weight: 700;
      }

      .empty-feed-subtitle {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin: 0 0 1.5rem 0;
        line-height: 1.5;
      }

      .empty-feed-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
        color: white;
        border: none;
        border-radius: 9999px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .empty-feed-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(236, 72, 153, 0.35);
      }

      .empty-feed-cta:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
      }

      .empty-feed-cta .cta-icon {
        font-size: 1rem;
      }

      @keyframes emptyFeedFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
      }

      /* ✨ 모던 빈 채팅 스타일 */
      .empty-chat-modern {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1.5rem;
        text-align: center;
        min-height: 250px;
      }

      .empty-chat-illustration {
        width: 90px;
        height: 90px;
        margin-bottom: 1.25rem;
        animation: emptyChatFloat 3s ease-in-out infinite;
      }

      .empty-chat-illustration svg {
        width: 100%;
        height: 100%;
      }

      .empty-chat-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.5rem 0;
        line-height: 1.4;
      }

      .empty-chat-title .highlight-text {
        color: var(--accent-pink);
        font-weight: 700;
      }

      .empty-chat-subtitle {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.5;
      }

      .empty-chat-hint {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.25rem;
        padding: 0.5rem 1rem;
        background: var(--bg-tertiary);
        border-radius: 9999px;
        font-size: 0.8rem;
        color: var(--text-muted);
      }

      .empty-chat-hint .hint-icon {
        font-size: 1rem;
      }

      @keyframes emptyChatFloat {
        0%, 100% { transform: translateY(0) rotate(-2deg); }
        50% { transform: translateY(-6px) rotate(2deg); }
      }

      .feed-post {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
      }

      .post-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
      }

      .author-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .author-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--accent);
      }

      .author-details {
        display: flex;
        flex-direction: column;
      }

      .author-name {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.875rem;
      }

      .post-time {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      .content-type-badge {
        background: var(--accent);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 600;
      }

      .post-content {
        margin-bottom: 0.5rem;
        color: var(--text-primary);
        line-height: 1.5;
        font-size: 0.9375rem; /* 15px - Threads/X 참고 */
      }
      /* ✨ 포스트 본문 내 링크 스타일 */
      .post-content a {
        color: var(--text-primary);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.4);
      }
      .post-content a:hover {
        text-decoration-color: rgba(255, 255, 255, 0.8);
      }

      .post-media img,
      .post-media video {
        max-width: 100%;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
      }

      .post-link-preview {
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        overflow: hidden;
        margin-top: 0.5rem;
      }

      .post-link-preview a {
        display: block;
        color: inherit;
        text-decoration: none;
      }

      .post-link-preview img {
        width: 100%;
        height: 8rem;
        object-fit: cover;
      }

      .link-info {
        padding: 0.75rem;
      }

      .link-info h4 {
        margin: 0 0 0.25rem 0;
        font-size: 0.875rem;
        color: var(--text-primary);
      }

      .link-info p {
        margin: 0 0 0.25rem 0;
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      .link-domain {
        font-size: 0.75rem;
        color: var(--accent);
      }

      /* ✨ 피드 링크 미리보기 카드 (새 스타일) */
      .link-preview-card {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 0.75rem;
        text-decoration: none;
        color: inherit;
        background: var(--bg-secondary);
        transition: all 0.2s ease;
      }

      .link-preview-card:hover {
        border-color: var(--accent);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .link-preview-image {
        width: 100%;
        height: 180px;
        overflow: hidden;
        background: var(--bg-tertiary);
      }

      .link-preview-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .link-preview-card:hover .link-preview-image img {
        transform: scale(1.05);
      }

      .link-preview-content {
        padding: 12px 16px;
      }

      .link-preview-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
      }

      .link-preview-description {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
      }

      .link-preview-domain {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        color: var(--text-muted);
      }

      .link-preview-domain .domain-icon {
        font-size: 0.875rem;
      }

      /* 이미지 없는 링크 카드 */
      .link-preview-card:not(:has(.link-preview-image)) .link-preview-content {
        padding: 16px;
      }

      .link-preview-card:not(:has(.link-preview-image)) .link-preview-title {
        font-size: 0.9375rem;
      }

      .post-actions {
        display: flex;
        gap: 1rem;
        align-items: center;
      }

      .action-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }

      .action-btn:hover {
        background: var(--bg-primary);
        color: var(--text-primary);
      }

      .action-btn.active {
        color: var(--accent);
        background: rgba(var(--accent-rgb), 0.1);
      }

      .action-btn .count {
        font-size: 0.75rem;
      }

      /* ✨ 포스트 작성 모달 - 세련된 다크 테마 */
      .create-post-modal .modal-content {
        max-width: 28rem;
        width: 92%;
        background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
        border: 1px solid rgba(139, 92, 246, 0.15);
        border-radius: 1.25rem;
        box-shadow:
          0 25px 50px -12px rgba(0, 0, 0, 0.5),
          0 0 0 1px rgba(139, 92, 246, 0.1),
          inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
        overflow: hidden;
      }

      .create-post-modal .modal-header {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 1.25rem 1.5rem;
      }

      .create-post-modal .modal-header h3 {
        color: #F8FAFC;
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: -0.01em;
      }

      .create-post-modal .modal-close-btn {
        color: #94A3B8;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 0.5rem;
        width: 2rem;
        height: 2rem;
        font-size: 1.125rem;
        transition: all 0.2s ease;
      }

      .create-post-modal .modal-close-btn:hover {
        background: rgba(236, 72, 153, 0.15);
        color: #EC4899;
      }

      .create-post-modal .modal-body {
        padding: 1.25rem 1.5rem;
      }

      .create-post-modal textarea {
        width: 100%;
        min-height: 7rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.75rem;
        padding: 1rem;
        font-family: inherit;
        font-size: 0.9375rem;
        line-height: 1.6;
        resize: none;
        margin-bottom: 1rem;
        background: rgba(15, 23, 42, 0.5);
        color: #F8FAFC;
        transition: all 0.2s ease;
        box-sizing: border-box;
      }

      .create-post-modal textarea::placeholder {
        color: #64748B;
      }

      .create-post-modal textarea:focus {
        outline: none;
        border-color: rgba(139, 92, 246, 0.5);
        background: rgba(15, 23, 42, 0.8);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
      }

      /* 콘텐츠 타입 탭 - 글래스모피즘 스타일 */
      .post-type-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
        padding: 0.375rem;
        background: rgba(15, 23, 42, 0.5);
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .post-type-tab {
        flex: 1;
        padding: 0.75rem 1rem;
        border: none;
        background: transparent;
        color: #94A3B8;
        cursor: pointer;
        border-radius: 0.625rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      .post-type-tab svg {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        stroke: currentColor;
      }

      .post-type-tab:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #E2E8F0;
      }

      .post-type-tab.active {
        background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
        color: white;
        box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
      }

      .post-type-tab.active svg {
        stroke: white;
      }

      /* 이미지 업로드 섹션 */
      .post-image-section {
        margin-bottom: 1rem;
      }

      .image-upload-area {
        border: 2px dashed rgba(139, 92, 246, 0.3);
        border-radius: 0.875rem;
        min-height: 9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
        background: rgba(15, 23, 42, 0.3);
      }

      .image-upload-area:hover {
        border-color: rgba(236, 72, 153, 0.5);
        background: rgba(236, 72, 153, 0.05);
      }

      .image-upload-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
        color: #94A3B8;
        padding: 1.5rem;
        text-align: center;
      }

      .upload-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
        margin-bottom: 0.25rem;
      }

      .upload-icon svg {
        stroke: #A78BFA;
        transition: all 0.3s ease;
      }

      .image-upload-area:hover .upload-icon {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
        transform: scale(1.05);
      }

      .image-upload-area:hover .upload-icon svg {
        stroke: #EC4899;
      }

      .upload-text {
        font-size: 0.9375rem;
        font-weight: 500;
        color: #CBD5E1;
      }

      .upload-hint {
        font-size: 0.75rem;
        color: #64748B;
      }

      .image-preview-container {
        position: relative;
        width: 100%;
        max-height: 16rem;
      }

      .image-preview-container img {
        width: 100%;
        max-height: 16rem;
        object-fit: contain;
        border-radius: 0.625rem;
      }

      .image-remove-btn {
        position: absolute;
        top: 0.625rem;
        right: 0.625rem;
        width: 2rem;
        height: 2rem;
        border: none;
        background: rgba(15, 23, 42, 0.8);
        color: #F8FAFC;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        backdrop-filter: blur(4px);
      }

      .image-remove-btn:hover {
        background: rgba(239, 68, 68, 0.9);
      }

      /* ✨ Poll(투표) 섹션 스타일링 */
      .post-poll-section {
        margin-bottom: 1rem;
      }

      .poll-options-container {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-bottom: 0.875rem;
      }

      .poll-option-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .poll-option-input {
        flex: 1;
        padding: 0.75rem 1rem;
        background: rgba(15, 23, 42, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.625rem;
        color: #F8FAFC;
        font-size: 0.875rem;
        transition: all 0.2s ease;
        box-sizing: border-box;
      }

      .poll-option-input::placeholder {
        color: #64748B;
      }

      .poll-option-input:focus {
        outline: none;
        border-color: rgba(139, 92, 246, 0.5);
        background: rgba(15, 23, 42, 0.8);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
      }

      .poll-option-remove {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        color: #94A3B8;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
      }

      .poll-option-remove:hover:not(:disabled) {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.3);
        color: #F87171;
      }

      .poll-option-remove:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }

      .poll-option-remove svg {
        stroke: currentColor;
      }

      .poll-add-option-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem;
        background: rgba(139, 92, 246, 0.1);
        border: 1px dashed rgba(139, 92, 246, 0.3);
        border-radius: 0.625rem;
        color: #A78BFA;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 1rem;
      }

      .poll-add-option-btn:hover {
        background: rgba(139, 92, 246, 0.2);
        border-color: rgba(139, 92, 246, 0.5);
        color: #C4B5FD;
      }

      .poll-add-option-btn svg {
        stroke: currentColor;
      }

      .poll-settings {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.875rem;
        background: rgba(15, 23, 42, 0.4);
        border-radius: 0.625rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .poll-duration-setting,
      .poll-multiple-setting {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .poll-settings label {
        color: #94A3B8;
        font-size: 0.8125rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
      }

      .poll-settings select {
        padding: 0.375rem 0.625rem;
        background: rgba(15, 23, 42, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.375rem;
        color: #F8FAFC;
        font-size: 0.8125rem;
        cursor: pointer;
      }

      .poll-settings select:focus {
        outline: none;
        border-color: rgba(139, 92, 246, 0.5);
      }

      .poll-settings input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        accent-color: #8B5CF6;
        cursor: pointer;
      }

      /* 모달 액션 버튼 */
      .create-post-modal .modal-actions {
        padding: 1rem 1.5rem 1.5rem;
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: 0.5rem;
      }

      .create-post-modal .btn-cancel {
        padding: 0.75rem 1.25rem;
        background: rgba(255, 255, 255, 0.05);
        color: #94A3B8;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.625rem;
        font-weight: 500;
        transition: all 0.2s ease;
      }

      .create-post-modal .btn-cancel:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #F8FAFC;
      }

      .create-post-modal .btn-submit {
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
        color: white;
        border: none;
        border-radius: 0.625rem;
        font-weight: 600;
        transition: all 0.2s ease;
        box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
      }

      .create-post-modal .btn-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
      }

      .create-post-modal .btn-submit:active {
        transform: translateY(0);
      }

      .create-post-modal .btn-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      /* ===================================
         풀스크린 컴포저 (Threads 스타일)
         =================================== */
      .fullscreen-composer {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: 400px;
        height: 100%;
        max-height: 800px;
        background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
        z-index: 10002;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translate(-50%, calc(-50% + 100%));
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.2s ease;
        border-radius: 1.5rem;
        overflow: hidden;

        @media (max-width: 480px) {
          max-width: 100%;
          max-height: 100%;
          border-radius: 0;
        }
      }

      .fullscreen-composer.open {
        opacity: 1;
        transform: translate(-50%, -50%);
      }

      .fullscreen-composer.closing {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 100%));
      }

      /* 컴포저 헤더 */
      .composer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(15, 23, 42, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-shrink: 0;
      }

      .composer-header .cancel-btn {
        color: #94A3B8;
        background: transparent;
        border: none;
        font-size: 1rem;
        font-weight: 500;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        transition: color 0.2s ease;
        font-family: inherit;
      }

      .composer-header .cancel-btn:hover {
        color: #EC4899;
      }

      .composer-header .submit-btn {
        background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
        color: white;
        border: none;
        padding: 0.625rem 1.25rem;
        border-radius: 2rem;
        font-weight: 600;
        font-size: 0.9375rem;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
        font-family: inherit;
      }

      .composer-header .submit-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
      }

      .composer-header .submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
      }

      /* 컴포저 콘텐츠 영역 */
      .composer-content {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
        padding-bottom: 6rem;
      }

      /* 사용자 정보 */
      .composer-user-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
      }

      .composer-avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        flex-shrink: 0;
        overflow: hidden;
      }

      .composer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .composer-nickname {
        color: #F8FAFC;
        font-weight: 600;
        font-size: 0.9375rem;
      }

      /* 텍스트 입력 영역 */
      .composer-textarea {
        width: 100%;
        min-height: 8rem;
        background: transparent;
        border: none;
        color: #F8FAFC;
        font-size: 1.0625rem;
        line-height: 1.6;
        resize: none;
        font-family: inherit;
        padding: 0;
        margin-bottom: 1rem;
      }

      .composer-textarea::placeholder {
        color: #64748B;
      }

      .composer-textarea:focus {
        outline: none;
      }

      /* 미디어 타입 버튼 바 */
      .composer-media-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        margin-top: auto;
      }

      .composer-media-btn {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.875rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 2rem;
        color: #94A3B8;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
      }

      .composer-media-btn:hover {
        background: rgba(139, 92, 246, 0.15);
        border-color: rgba(139, 92, 246, 0.3);
        color: #F8FAFC;
      }

      .composer-media-btn.active {
        background: rgba(139, 92, 246, 0.2);
        border-color: rgba(139, 92, 246, 0.5);
        color: #A78BFA;
      }

      .composer-media-btn svg {
        width: 1rem;
        height: 1rem;
        stroke: currentColor;
      }

      /* 글자 수 카운터 */
      .composer-char-count {
        margin-left: auto;
        font-size: 0.75rem;
        color: #64748B;
      }

      .composer-char-count.warning {
        color: #F59E0B;
      }

      .composer-char-count.error {
        color: #EF4444;
      }

      /* 이미지 프리뷰 (컴포저용) */
      .composer-image-preview {
        position: relative;
        margin-bottom: 1rem;
        border-radius: 0.75rem;
        overflow: hidden;
        background: rgba(15, 23, 42, 0.5);
      }

      .composer-image-preview img {
        width: 100%;
        max-height: 300px;
        object-fit: contain;
        display: block;
      }

      .composer-image-remove {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: background 0.2s ease;
      }

      .composer-image-remove:hover {
        background: rgba(239, 68, 68, 0.9);
      }

      /* 투표 섹션 (컴포저용) */
      .composer-poll-section {
        background: rgba(15, 23, 42, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1rem;
      }

      .composer-poll-section .poll-option-item {
        margin-bottom: 0.5rem;
      }

      .composer-poll-section .poll-option-input {
        background: rgba(15, 23, 42, 0.6);
      }

      /* 링크 입력 섹션 (더 이상 사용 안함, 하위 호환성) */
      .post-link-section {
        margin-bottom: 1rem;
      }

      .link-input-wrapper {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        padding: 0.75rem;
        background: var(--bg-primary);
      }

      .link-input-wrapper:focus-within {
        border-color: var(--accent-color);
      }

      .link-icon {
        font-size: 1.25rem;
        flex-shrink: 0;
      }

      .link-input-wrapper input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.95rem;
        color: var(--text-primary);
        outline: none;
      }

      .link-input-wrapper input::placeholder {
        color: var(--text-secondary);
      }

      .link-preview {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background: var(--bg-primary);
      }

      .link-preview-loading {
        color: var(--text-secondary);
        font-size: 0.875rem;
        text-align: center;
      }

      /* 기존 post-options 스타일 (하위 호환성) */
      .post-options {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
      }

      .post-options label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.375rem;
        transition: background 0.2s;
      }

      .post-options label:hover {
        background: var(--bg-primary);
      }

      .post-options input[type="radio"] {
        margin: 0;
      }

      /* ✨ 피드 토스트 알림 */
      .feed-toast {
        position: fixed;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        opacity: 0;
      }

      .feed-toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }

      .feed-toast.success {
        border-color: #22c55e;
        color: #22c55e;
      }

      .feed-toast.error {
        border-color: #ef4444;
        color: #ef4444;
      }

      /* ===================================
         ✨ 마이페이지 스타일
         =================================== */

      .my-page-content {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: 100%;
        overflow-y: auto;
      }

      .my-page-header {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: 0.75rem;
        border: 1px solid var(--border-color);
      }

      .my-profile-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      /* ✨ 탐색 스타일 배지 */
      .exploration-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
      }

      .exploration-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.625rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        font-weight: 500;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
        color: var(--text-secondary);
        border: 1px solid rgba(139, 92, 246, 0.3);
      }

      .exploration-badge .badge-icon {
        font-size: 0.875rem;
      }

      .exploration-badge.badge-explorer {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
        border-color: rgba(59, 130, 246, 0.3);
      }

      .exploration-badge.badge-focused {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(244, 63, 94, 0.15) 100%);
        border-color: rgba(236, 72, 153, 0.3);
      }

      .exploration-badge.badge-active {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
        border-color: rgba(34, 197, 94, 0.3);
      }

      .exploration-badge.badge-newbie {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
        border-color: rgba(251, 191, 36, 0.3);
      }

      .my-avatar {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
      }

      .my-user-info {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
      }

      .my-nickname {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 1rem;
      }

      .my-local-id {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      /* 통계 카드 그리드 */
      .my-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
      }

      .my-stat-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
      }

      .my-stat-card .stat-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary-accent);
      }

      .my-stat-card .stat-label {
        font-size: 0.625rem;
        color: var(--text-secondary);
        text-align: center;
      }

      /* 노드맵 시각화 섹션 */
      .my-nodemap-section {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 0.75rem;
        flex-shrink: 0;
      }

      .my-nodemap-section .section-header {
        margin-bottom: 0.75rem;
      }

      .my-nodemap-section .section-header h3 {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.125rem 0;
      }

      .my-nodemap-section .section-subtitle {
        font-size: 0.625rem;
        color: var(--text-secondary);
      }

      .my-nodemap-container {
        position: relative;
        width: 100%;
        height: 280px;
        background: var(--bg-primary);
        border-radius: 0.5rem;
        overflow: hidden;
      }

      #my-nodemap-svg {
        width: 100%;
        height: 100%;
      }

      .nodemap-loading,
      .nodemap-empty {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
      }

      .nodemap-empty .empty-subtitle {
        font-size: 0.75rem;
        opacity: 0.7;
      }

      /* D3.js 노드맵 스타일 */
      .nodemap-node {
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .nodemap-node:hover {
        filter: brightness(1.2);
      }

      .nodemap-node-circle {
        fill: var(--primary-accent);
        stroke: var(--bg-primary);
        stroke-width: 2px;
      }

      .nodemap-node-label {
        font-size: 10px;
        fill: var(--text-primary);
        text-anchor: middle;
        pointer-events: none;
      }

      .nodemap-link {
        stroke: var(--border-color);
        stroke-opacity: 0.6;
        fill: none;
      }

      .nodemap-link-active {
        stroke: var(--primary-accent);
        stroke-opacity: 0.8;
      }

      /* ✨ 최근 탐색 경로 섹션 */
      .my-journey-section {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 0.75rem;
      }

      .my-journey-section .section-header {
        margin-bottom: 0.75rem;
      }

      .my-journey-section .section-header h3 {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
      }

      .journey-timeline {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        overflow-x: auto;
        padding: 0.5rem 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .journey-timeline::-webkit-scrollbar {
        display: none;
      }

      .journey-node {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
        transition: transform 0.15s ease;
        flex-shrink: 0;
      }

      .journey-node:hover {
        transform: scale(1.05);
      }

      .journey-node-circle {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        color: white;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .journey-node.current .journey-node-circle {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
        box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.3);
      }

      .journey-node-title {
        font-size: 0.625rem;
        color: var(--text-secondary);
        max-width: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }

      .journey-node.current .journey-node-title {
        color: var(--text-primary);
        font-weight: 500;
      }

      .journey-arrow {
        width: 1rem;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
        position: relative;
        flex-shrink: 0;
      }

      .journey-arrow::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border-left: 4px solid var(--secondary-accent);
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
      }

      /* 자주 방문한 노드 섹션 */
      .my-favorite-nodes {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        padding: 0.75rem;
      }

      .my-favorite-nodes .section-header h3 {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.75rem 0;
      }

      .favorite-nodes-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .favorite-node-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
        background: var(--bg-primary);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .favorite-node-item:hover {
        background: rgba(236, 72, 153, 0.1);
      }

      .favorite-node-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .favorite-node-rank {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--primary-accent);
        color: white;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .favorite-node-title {
        font-size: 0.875rem;
        color: var(--text-primary);
        font-weight: 500;
      }

      .favorite-node-visits {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      /* ✨ 모달 스타일 */
      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none; /* 기본 숨김, JS에서 flex로 변경 */
        justify-content: center;
        align-items: center;
        z-index: 10001; /* 토론 페이지(1000)보다 높게 */
      }

      .modal-content {
        background-color: var(--background-color);
        border-radius: 12px;
        padding: 0;
        max-width: 500px;
        width: calc(100% - 32px); /* 좌우 16px 여백 */
        max-height: calc(100vh - 100px); /* 상하 여백 확보 */
        max-height: calc(100dvh - 100px); /* 모바일 동적 뷰포트 */
        overflow-y: auto;
        border: 1px solid var(--border-color);
        box-sizing: border-box;
        margin: 16px;
      }

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

      .modal-header h3 {
        margin: 0;
        color: var(--text-color);
        font-size: 1.2rem;
        font-weight: 600;
      }

      .modal-close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-color-secondary);
        padding: 4px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
      }

      .modal-close-btn:hover {
        background-color: var(--highlight-color);
      }

      .modal-body {
        padding: 24px;
      }

      .modal-body textarea {
        width: 100%;
        min-height: 120px;
        padding: 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--background-color);
        color: var(--text-color);
        font-size: 0.95rem;
        resize: vertical;
        margin-bottom: 16px;
      }

      .modal-body textarea:focus {
        outline: none;
        border-color: var(--primary-color);
      }

      .post-options {
        margin-bottom: 16px;
      }

      .post-options label {
        display: inline-flex;
        align-items: center;
        margin-right: 16px;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text-color-secondary);
      }

      .post-options input[type="radio"] {
        margin-right: 8px;
      }

      .modal-footer {
        display: flex;
        gap: 12px;
        padding: 20px 24px;
        border-top: 1px solid var(--border-color);
        justify-content: flex-end;
      }

      .btn-cancel, .btn-submit {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s ease;
      }

      .btn-cancel {
        background-color: transparent;
        color: var(--text-color-secondary);
        border: 1px solid var(--border-color);
      }

      .btn-cancel:hover {
        background-color: var(--highlight-color);
      }

      .btn-submit {
        background-color: var(--primary-color);
        color: white;
      }

      .btn-submit:hover {
        background-color: var(--primary-color-dark);
      }

      /* ✨ 댓글 모달 전용 스타일 */
      .comment-modal-content {
        max-width: 36rem;
        max-height: 80vh;
        width: 90vw;
      }

      .comment-modal-body {
        display: flex;
        flex-direction: column;
        padding: 0;
        max-height: 70vh;
      }

      #comment-list-container {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        min-height: 200px;
        border-bottom: 1px solid var(--border-color);
      }

      .loading-comments {
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
      }

      .no-comments {
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
      }

      .no-comments-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
      }

      .error-comments {
        text-align: center;
        padding: 2rem;
        color: #ef4444;
      }

      .comment-item {
        margin-bottom: 1rem;
        padding: 0.75rem;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--border-color);
      }

      .comment-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        gap: 0.75rem;
      }

      .comment-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
      }

      .comment-avatar.small {
        width: 24px;
        height: 24px;
      }

      .comment-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
      }

      .comment-author {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.875rem;
      }

      .comment-time {
        color: var(--text-secondary);
        font-size: 0.75rem;
      }

      .comment-delete-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 4px;
        transition: all 0.2s ease;
        font-size: 0.875rem;
      }

      .comment-delete-btn:hover {
        background-color: rgba(239, 68, 68, 0.1);
      }

      .comment-content {
        margin-left: 2.5rem;
        color: var(--text-primary);
        line-height: 1.5;
      }

      .comment-content p {
        margin: 0;
        word-wrap: break-word;
      }

      .comment-reply {
        margin-left: 2rem;
        margin-top: 0.75rem;
        padding: 0.5rem;
        border-left: 2px solid var(--border-color);
        background-color: rgba(255, 255, 255, 0.01);
        border-radius: 6px;
      }

      .comment-write-section {
        padding: 1rem;
        background-color: rgba(255, 255, 255, 0.02);
        display: flex;
        gap: 0.75rem;
        align-items: flex-end;
      }

      .comment-write-section textarea {
        flex: 1;
        background-color: var(--container-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 0.75rem;
        color: var(--text-primary);
        resize: none;
        min-height: 60px;
        transition: border-color 0.2s ease;
      }

      .comment-write-section textarea:focus {
        outline: none;
        border-color: var(--primary-accent);
      }

      .comment-write-section textarea::placeholder {
        color: var(--text-secondary);
      }

      .comment-submit-btn {
        padding: 0.75rem 1.5rem;
        background: var(--sent-bubble-bg);
        border: none;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
      }

      .comment-submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
      }

      /* 댓글 모달 스크롤바 스타일 */
      #comment-list-container::-webkit-scrollbar {
        width: 6px;
      }

      #comment-list-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
      }

      #comment-list-container::-webkit-scrollbar-thumb {
        background: var(--primary-accent);
        border-radius: 3px;
      }

      #comment-list-container::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-accent);
      }

      /* 🎨 Comment Dropdown Styles (Instagram-style) */
      .comment-dropdown-container {
        position: relative;
        width: 100%;
        margin-top: 8px;
        border-top: 1px solid rgba(139, 92, 246, 0.2);
        background: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 100%);
        border-radius: 0 0 12px 12px;
        box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.1);
        overflow: hidden;
        transform-origin: top;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .comment-dropdown-container.expanded {
        animation: dropdownExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

      .comment-dropdown-container.collapsed {
        animation: dropdownCollapse 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

      @keyframes dropdownExpand {
        from {
          opacity: 0;
          transform: scaleY(0) translateY(-10px);
          max-height: 0;
        }
        to {
          opacity: 1;
          transform: scaleY(1) translateY(0);
          max-height: 400px;
        }
      }

      @keyframes dropdownCollapse {
        from {
          opacity: 1;
          transform: scaleY(1) translateY(0);
          max-height: 400px;
        }
        to {
          opacity: 0;
          transform: scaleY(0) translateY(-10px);
          max-height: 0;
        }
      }

      .comment-dropdown-header {
        padding: 12px 16px 8px 16px;
        border-bottom: 1px solid rgba(139, 92, 246, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
      }

      .comment-dropdown-title {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .comment-dropdown-close {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 18px;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
      }

      .comment-dropdown-close:hover {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(139, 92, 246, 0.1);
      }

      .comment-dropdown-list {
        max-height: 280px;
        overflow-y: auto;
        padding: 8px 0;
      }

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

      .comment-dropdown-list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
      }

      .comment-dropdown-list::-webkit-scrollbar-thumb {
        background: rgba(139, 92, 246, 0.3);
        border-radius: 2px;
      }

      .comment-dropdown-list::-webkit-scrollbar-thumb:hover {
        background: rgba(139, 92, 246, 0.5);
      }

      .dropdown-comment-item {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(139, 92, 246, 0.05);
        transition: background-color 0.2s ease;
      }

      .dropdown-comment-item:hover {
        background: rgba(139, 92, 246, 0.03);
      }

      .dropdown-comment-item:last-child {
        border-bottom: none;
      }

      .dropdown-comment-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
      }

      .dropdown-comment-author {
        font-size: 13px;
        font-weight: 600;
        color: rgba(139, 92, 246, 0.9);
      }

      .dropdown-comment-time {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
      }

      .dropdown-comment-content {
        font-size: 14px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.8);
        word-wrap: break-word;
      }

      .comment-dropdown-form {
        padding: 12px 16px;
        border-top: 1px solid rgba(139, 92, 246, 0.1);
        background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(42, 42, 42, 0.9) 100%);
      }

      .comment-dropdown-input-container {
        display: flex;
        gap: 8px;
        align-items: flex-end;
      }

      .comment-dropdown-input {
        flex: 1;
        background: rgba(139, 92, 246, 0.05);
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-radius: 20px;
        padding: 8px 12px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.9);
        resize: none;
        min-height: 36px;
        max-height: 100px;
        transition: all 0.2s ease;
      }

      .comment-dropdown-input:focus {
        outline: none;
        border-color: rgba(139, 92, 246, 0.5);
        background: rgba(139, 92, 246, 0.08);
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
      }

      .comment-dropdown-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
      }

      .comment-dropdown-submit {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
        border: none;
        border-radius: 18px;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 600;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        min-width: 60px;
      }

      .comment-dropdown-submit:hover {
        background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        transform: translateY(-1px);
      }

      .comment-dropdown-submit:active {
        transform: translateY(0);
      }

      .comment-dropdown-submit:disabled {
        background: rgba(139, 92, 246, 0.3);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .comment-dropdown-empty {
        padding: 24px 16px;
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
        font-style: italic;
      }

      .comment-dropdown-loading {
        padding: 20px 16px;
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
        font-size: 13px;
      }

      .comment-dropdown-error {
        padding: 16px;
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 8px;
        margin: 8px 16px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 13px;
        text-align: center;
      }

      /* 🎨 Post Item 스타일 조정 (dropdown용) */
      .post-item {
        border-radius: 12px 12px 0 0; /* 하단을 직각으로 만들어 dropdown과 연결 */
      }

      .post-item.with-dropdown {
        border-radius: 12px 12px 0 0;
        margin-bottom: 0;
      }

      .post-item:not(.with-dropdown) {
        border-radius: 12px;
        margin-bottom: 16px;
      }

      /* 🎨 반응형 디자인 */
      @media (max-width: 600px) {
        .comment-dropdown-container {
          margin-top: 4px;
        }

        .comment-dropdown-header {
          padding: 10px 12px 6px 12px;
        }

        .comment-dropdown-title {
          font-size: 13px;
        }

        .dropdown-comment-item {
          padding: 10px 12px;
        }

        .dropdown-comment-author {
          font-size: 12px;
        }

        .dropdown-comment-content {
          font-size: 13px;
        }

        .comment-dropdown-form {
          padding: 10px 12px;
        }

        .comment-dropdown-input {
          font-size: 12px;
          padding: 6px 10px;
        }

        .comment-dropdown-submit {
          font-size: 11px;
          padding: 6px 12px;
        }
      }

      /* 🎯 Reddit-style Discussion Page Styles */
      #discussion-page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: var(--container-bg);
        z-index: 1000;
        overflow-y: auto;
      }

      .discussion-header {
        position: sticky;
        top: 0;
        background: var(--header-bg);
        border-bottom: 1px solid var(--border-color);
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 10;
      }

      .discussion-back-btn {
        background: transparent;
        border: none;
        padding: 8px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: color 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .discussion-back-btn:hover {
        color: var(--text-primary);
      }

      .discussion-back-btn svg {
        width: 20px;
        height: 20px;
      }

      .discussion-header-info {
        flex: 1;
        min-width: 0;
      }

      .discussion-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .discussion-view-count {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-top: 2px;
      }

      .discussion-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 16px 12px;
        min-height: calc(100% - 60px);
      }

      /* 원본 포스트 스타일 */
      .discussion-post {
        background: transparent;
        border-bottom: 1px solid var(--border-color);
        padding: 16px 0;
        margin-bottom: 16px;
      }

      .discussion-post .post-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
      }

      .discussion-post .post-author {
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-primary);
      }

      .discussion-post .post-time {
        color: var(--text-secondary);
        font-size: 0.8125rem;
      }

      .discussion-post .post-content {
        font-size: 0.9375rem; /* 15px - Threads/X 참고 */
        line-height: 1.5;
        color: var(--text-primary);
        margin-bottom: 12px;
      }

      .discussion-post .post-stats {
        display: flex;
        gap: 16px;
        color: var(--text-secondary);
        font-size: 0.8125rem;
      }

      /* 댓글 작성 폼 */
      .discussion-comment-form {
        background: transparent;
        padding: 12px 0;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
      }

      .comment-input-container {
        position: relative;
      }

      .comment-input-container textarea {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--text-primary);
        resize: none;
        min-height: 40px;
        overflow: hidden;
        transition: border-color 0.2s ease;
        font-family: inherit;
      }

      .comment-input-container textarea:focus {
        outline: none;
        border-color: var(--primary-accent);
      }

      .comment-input-container textarea::placeholder {
        color: var(--text-secondary);
      }

      .comment-form-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
      }

      .comment-char-count {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      .comment-char-count.warning {
        color: #f59e0b;
      }

      .comment-char-count.error {
        color: #ef4444;
      }

      .comment-submit-btn {
        background: var(--primary-accent);
        border: none;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.8125rem;
        font-weight: 500;
        color: white;
        cursor: pointer;
        transition: opacity 0.2s ease;
      }

      .comment-submit-btn:hover:not(:disabled) {
        opacity: 0.9;
      }

      .comment-submit-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .comment-submit-btn.loading {
        pointer-events: none;
        opacity: 0.6;
      }

      .comment-submit-btn.loading::after {
        content: '';
        width: 10px;
        height: 10px;
        border: 2px solid transparent;
        border-top-color: white;
        border-radius: 50%;
        display: inline-block;
        margin-left: 6px;
        animation: spin 0.8s linear infinite;
        vertical-align: middle;
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      /* 댓글 섹션 */
      .discussion-comments {
        background: transparent;
      }

      .discussion-comments-header {
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .discussion-comments-header span {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
      }

      .comments-sort select {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 4px 10px;
        color: var(--text-secondary);
        font-size: 0.75rem;
        cursor: pointer;
      }

      .comments-sort select:focus {
        outline: none;
        border-color: var(--primary-accent);
      }

      .comments-list {
        /* 전체 페이지 스크롤 사용 - 별도 스크롤 영역 제거 */
      }

      /* 개별 댓글 스타일 */
      .discussion-comment-item {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
      }

      .discussion-comment-item:last-child {
        border-bottom: none;
      }

      .comment-item-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
      }

      .comment-item-author {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
      }

      .comment-item-time {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      .comment-item-content {
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--text-primary);
        margin-bottom: 6px;
      }

      .comment-item-actions {
        display: flex;
        gap: 12px;
        font-size: 0.75rem;
        color: var(--text-secondary);
      }

      .comment-action {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        transition: color 0.2s ease;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .comment-action:hover {
        color: var(--primary-accent);
      }

      /* 댓글 좋아요 버튼 */
      .comment-like-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .comment-like-btn .like-icon {
        font-size: 14px;
        transition: transform 0.15s ease;
      }

      .comment-like-btn:hover .like-icon {
        transform: scale(1.2);
      }

      .comment-like-btn.liked {
        color: #EC4899;
      }

      .comment-like-btn.liked .like-icon {
        color: #EC4899;
      }

      .comment-like-btn .like-count {
        font-size: 12px;
      }

      /* 원본 댓글 강조 (첫 번째 레벨) */
      .discussion-comment-item.parent-comment {
        background: rgba(139, 92, 246, 0.03);
        border-radius: 8px;
        margin-bottom: 4px;
      }

      .discussion-comment-item.parent-comment .comment-item-content {
        font-size: 14px;
        line-height: 1.6;
      }

      .discussion-comment-item.parent-comment .comment-item-author {
        font-weight: 600;
      }

      /* 답글 토글 버튼 (Instagram/YouTube 스타일) */
      .replies-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: rgba(139, 92, 246, 0.8);
        cursor: pointer;
        font-size: 12px;
        padding: 8px 0;
        margin-top: 4px;
        transition: color 0.2s ease;
      }

      .replies-toggle-btn:hover {
        color: rgba(139, 92, 246, 1);
      }

      .replies-toggle-btn .toggle-icon {
        font-size: 8px;
        transition: transform 0.2s ease;
      }

      .replies-toggle-btn[data-expanded="true"] .toggle-icon {
        transform: rotate(0deg);
      }

      /* 대댓글 컨테이너 */
      .replies-container {
        margin-left: 20px;
        padding-left: 12px;
        border-left: 2px solid rgba(139, 92, 246, 0.15);
        margin-top: 8px;
      }

      /* 대댓글 더보기 버튼 */
      .show-more-replies {
        padding: 8px 0;
      }

      .show-more-btn {
        background: none;
        border: none;
        color: rgba(139, 92, 246, 0.8);
        cursor: pointer;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
      }

      .show-more-btn:hover {
        background: rgba(139, 92, 246, 0.1);
        color: rgba(139, 92, 246, 1);
      }

      /* 대댓글 스타일 */
      .discussion-comment-item.reply {
        padding: 12px 0;
        border-bottom: 1px solid rgba(139, 92, 246, 0.05);
        background: transparent;
      }

      .discussion-comment-item.reply:last-of-type {
        border-bottom: none;
      }

      .discussion-comment-item.reply .comment-item-content {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.85);
      }

      .discussion-comment-item.reply .comment-item-author {
        font-size: 12px;
      }

      .discussion-comment-item.reply .comment-item-time {
        font-size: 10px;
      }

      /* 로딩 및 에러 상태 */
      .discussion-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        color: rgba(255, 255, 255, 0.6);
      }

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(139, 92, 246, 0.2);
        border-top: 3px solid rgba(139, 92, 246, 0.8);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
      }

      .discussion-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
      }

      .error-icon {
        font-size: 48px;
        margin-bottom: 16px;
      }

      .retry-btn {
        background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        color: white;
        cursor: pointer;
        margin-top: 16px;
        transition: all 0.2s ease;
      }

      .retry-btn:hover {
        background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
        transform: translateY(-1px);
      }

      /* 반응형 디자인 */
      @media (max-width: 768px) {
        .discussion-container {
          padding: 16px 12px;
        }

        .discussion-header {
          padding: 12px 16px;
        }

        .discussion-title {
          font-size: 18px;
        }

        .discussion-post,
        .discussion-comment-form {
          padding: 16px;
        }

        .discussion-comment-item {
          padding: 12px 16px;
        }

        .replies-container {
          margin-left: 16px;
          padding-left: 10px;
        }

        .discussion-comment-item.reply {
          padding: 10px 0;
        }
      }

      /* ✨ 대댓글 폼 스타일 (다크 테마) */
      .discussion-reply-form {
        background: linear-gradient(145deg, #1a1a1a 0%, #252525 100%);
        border: 1px solid rgba(139, 92, 246, 0.3);
        border-radius: 12px;
        padding: 16px;
        margin: 12px 0 16px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .comment-form-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      }

      .replying-to {
        color: rgba(139, 92, 246, 0.9);
        font-size: 13px;
        font-weight: 500;
      }

      .close-reply-btn {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .close-reply-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
      }

      .discussion-reply-form .comment-textarea {
        width: 100%;
        min-height: 80px;
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        line-height: 1.5;
        resize: vertical;
        transition: border-color 0.2s ease, background 0.2s ease;
        box-sizing: border-box;
      }

      .discussion-reply-form .comment-textarea:focus {
        outline: none;
        border-color: rgba(139, 92, 246, 0.5);
        background: rgba(255, 255, 255, 0.08);
      }

      .discussion-reply-form .comment-textarea::placeholder {
        color: rgba(255, 255, 255, 0.4);
      }

      .comment-form-actions {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        justify-content: flex-end;
      }

      .comment-submit-btn, .comment-cancel-btn {
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
      }

      .comment-submit-btn {
        background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
        color: white;
      }

      .comment-submit-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
      }

      .comment-submit-btn:disabled {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
      }

      .comment-cancel-btn {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .comment-cancel-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.9);
      }

      /* ✨ 로딩 상태 및 스켈레톤 스크린 (다크 테마) */
      .skeleton-post, .skeleton-comment {
        background: rgba(139, 92, 246, 0.08);
        border: 1px solid rgba(139, 92, 246, 0.15);
        border-radius: 12px;
        padding: 16px;
        margin: 16px 0;
      }

      .skeleton-header, .skeleton-comment-content {
        display: flex;
        gap: 12px;
      }

      .skeleton-comment-content {
        flex-direction: column;
        flex: 1;
      }

      .skeleton-avatar {
        width: 40px;
        height: 40px;
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 25%, rgba(139, 92, 246, 0.25) 50%, rgba(139, 92, 246, 0.15) 75%);
        background-size: 200% 100%;
        animation: skeletonLoading 1.5s infinite;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .skeleton-text-lines {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .skeleton-line {
        height: 16px;
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.12) 25%, rgba(139, 92, 246, 0.22) 50%, rgba(139, 92, 246, 0.12) 75%);
        background-size: 200% 100%;
        animation: skeletonLoading 1.5s infinite;
        border-radius: 4px;
      }

      .skeleton-line-xs { width: 30%; }
      .skeleton-line-short { width: 60%; }
      .skeleton-line-medium { width: 80%; }

      .skeleton-content {
        margin: 12px 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .skeleton-actions {
        display: flex;
        gap: 12px;
        margin-top: 12px;
      }

      .skeleton-action-btn {
        width: 60px;
        height: 24px;
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.12) 25%, rgba(139, 92, 246, 0.22) 50%, rgba(139, 92, 246, 0.12) 75%);
        background-size: 200% 100%;
        animation: skeletonLoading 1.5s infinite;
        border-radius: 12px;
      }

      .skeleton-action-btn-small {
        width: 40px;
        height: 20px;
      }

      @keyframes skeletonLoading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }

      /* 로딩, 에러, 빈 상태 스타일 */
      .loading-state, .error-state, .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        color: #6c757d;
      }

      .loading-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid #e9ecef;
        border-top: 3px solid #007bff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
      }

      .loading-text {
        font-size: 14px;
        color: #6c757d;
      }

      .error-icon, .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.6;
      }

      .error-text, .empty-text {
        font-size: 16px;
        color: #495057;
        margin-bottom: 8px;
      }

      .empty-subtitle {
        font-size: 14px;
        color: #6c757d;
      }

      .retry-btn {
        background: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        margin-top: 12px;
        transition: background 0.2s ease;
      }

      .retry-btn:hover {
        background: #0056b3;
      }

      /* 댓글 스켈레톤 */
      .skeleton-comments {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px 0;
      }

      .skeleton-comment {
        display: flex;
        gap: 12px;
        background: none;
        padding: 0;
        margin: 0;
      }

      /* ✨ 키보드 탐색 및 접근성 */
      .discussion-comment-item.focused {
        outline: 2px solid #007bff;
        outline-offset: 2px;
        background: rgba(0, 123, 255, 0.05);
        border-radius: 8px;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* 키보드 포커스 개선 */
      button:focus,
      textarea:focus,
      input:focus,
      select:focus {
        outline: 2px solid #007bff;
        outline-offset: 2px;
      }

      /* 고대비 모드 지원 */
      @media (prefers-contrast: high) {
        .discussion-comment-item.focused {
          outline: 3px solid;
          background: rgba(255, 255, 255, 0.1);
        }

        .skeleton-line,
        .skeleton-avatar,
        .skeleton-action-btn {
          background: #000;
        }
      }

      /* 애니메이션 감소 모드 지원 */
      @media (prefers-reduced-motion: reduce) {
        .skeleton-line,
        .skeleton-avatar,
        .skeleton-action-btn {
          animation: none;
          background: #e9ecef;
        }

        .loading-spinner {
          animation: none;
        }

        * {
          scroll-behavior: auto !important;
        }
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }