/* Ansimssi Web App Global Styles */
:root {
  /* Colors - Dark Mode (Default) - GEMINI HIGH CONTRAST */
  --bg-primary: #000000;
  --bg-secondary: #1E1F20;
  --bg-tertiary: #2C2C2E;

  --text-primary: #ECECEC;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;

  --border-subtle: #3F3F46;
  --border-focus: #52525B;

  --accent-primary: #2CB67D;
  --accent-hover: #249A69;

  /* Shared Primary for Badges */
  --primary: #2CB67D;
  --primary-rgb: 44, 182, 125;

  --sidebar-width: 260px;
  --header-height: 60px;

  /* [FIX] 글로벌 모바일 좌/우 Edge Swipe 간섭 방지 최소 16px 안전 영역 */
  --safe-edge-left: max(16px, env(safe-area-inset-left));
  --safe-edge-right: max(16px, env(safe-area-inset-right));

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Calendar Colors - Dark Mode */
  --calendar-sunday: #ef4444;
  /* Red-500 */
  --calendar-saturday: #60a5fa;
  /* Blue-400 */

  /* Chart & Dashboard Colors */
  --chart-primary: #3b82f6;
  /* Blue-500 */
  --chart-success: #10b981;
  /* Emerald-500 */
  --chart-warning: #f59e0b;
  /* Amber-500 */
  --chart-danger: #ef4444;
  /* Red-500 */
  --chart-grid: #374151;
  /* Gray-700 */
  --card-bg: #1F2937;
  /* Gray-800 */
}
/* Light Theme Overrides */
.light-theme {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F3F4F6;
  /* Gray-100 */
  --bg-tertiary: #E5E7EB;
  /* Gray-200 */

  --text-primary: #111827;
  /* Gray-900 */
  --text-secondary: #4B5563;
  /* Gray-600 */
  --text-tertiary: #9CA3AF;
  /* Gray-400 */

  --border-subtle: #E5E7EB;
  --border-focus: #D1D5DB;

  /* Calendar Colors - Light Mode */
  --calendar-sunday: #dc2626;
  /* Red-600 */
  --calendar-saturday: #2563eb;
  /* Blue-600 */

  /* Chart & Dashboard Colors (Light) */
  --chart-primary: #2563eb;
  /* Blue-600 */
  --chart-success: #059669;
  /* Emerald-600 */
  --chart-warning: #d97706;
  /* Amber-600 */
  --chart-danger: #dc2626;
  /* Red-600 */
  --chart-grid: #e5e7eb;
  /* Gray-200 */
  --card-bg: #ffffff;
  /* White */
}
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
@font-face {
  font-family: 'PyeongChangPeace-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
html,
body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  /* Ultimate fix for iOS Safari/PWA viewport heights */
  overflow: hidden;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  overscroll-behavior-y: none;
  touch-action: none;
  /* Prevent browser-level swipe zooming/scrolling */
}
/* [NEW] PWA Specific Override: 
   -webkit-fill-available in standalone mode is calculated INCORRECTLY by iOS, 
   leaving a white gap at the bottom (size of non-existent Safari toolbar).
   By forcing 100% bounded by top/bottom 0, we fill the screen safely. */
@media all and (display-mode: standalone) {

  html,
  body {
    height: 100%;
    bottom: 0;
  }
}
#root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}/* MobileShell.module.css */
._shellContainer_1ef3p_2 {
    width: 100%;
    /* Height is set dynamically by JS via style attribute */
    /* Edge-to-Edge default */
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent body scroll, handle scroll internally */
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    /* Default background */

    /* Layout Variables */
    --keyboard-height: 0px;
    --app-height: 100vh;
}

/* Ensure children fill the shell */
._shellContainer_1ef3p_2>* {
    width: 100%;
    /* flex: 1; -> Depending on child, but usually yes */
}._overlay_i6mhk_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

._modal_i6mhk_14 {
    background-color: var(--bg-secondary);
    /* Dark Grey like Gemini */
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    font-family: var(--font-sans);
}

._header_i6mhk_26 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

._header_i6mhk_26 h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
}

._closeButton_i6mhk_39 {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

._closeButton_i6mhk_39:hover {
    background-color: var(--bg-tertiary);
}

._linkSection_i6mhk_56 {
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    padding: 8px 8px 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

._urlDisplay_i6mhk_67 {
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

._copyButton_i6mhk_76 {
    background-color: var(--accent-primary);
    /* Gemini Blue */
    color: var(--bg-primary);
    border: none;
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

._copyButton_i6mhk_76:hover {
    background-color: var(--accent-hover);
}

._copyButton_i6mhk_76._copied_i6mhk_97 {
    background-color: var(--accent-primary);
    /* Green for success */
    color: var(--bg-primary);
    opacity: 0.8;
}

._notice_i6mhk_104 {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.4;
}

._socialGrid_i6mhk_111 {
    display: flex;
    justify-content: space-around;
    padding-top: 8px;
}

._socialButton_i6mhk_117 {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary);
}

._iconCircle_i6mhk_128 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

._socialButton_i6mhk_117:hover ._iconCircle_i6mhk_128 {
    transform: scale(1.05);
}

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

@media (max-width: 480px) {
    ._modal_i6mhk_14 {
        width: 95%;
        padding: 20px;
    }

    ._socialGrid_i6mhk_111 {
        gap: 10px;
    }
}._overlay_1d66q_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

._modal_1d66q_14 {
    background-color: var(--bg-secondary, #1e1f20);
    /* Fallback to dark hex if var missing */
    width: 90%;
    max-width: 400px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    color: var(--text-primary, #e3e3e3);
    font-family: var(--font-sans, sans-serif);
    text-align: left;
}

._title_1d66q_27 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 16px 0;
    color: var(--text-primary, #e3e3e3);
}

._content_1d66q_34 {
    margin-bottom: 32px;
}

._description_1d66q_38 {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary, #a8a8a8);
    margin-bottom: 12px;
}

._subtext_1d66q_45 {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-tertiary, #767676);
}

._actions_1d66q_51 {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

._cancelButton_1d66q_57 {
    background: transparent;
    border: none;
    color: var(--accent-primary, #8ab4f8);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

._cancelButton_1d66q_57:hover {
    background: rgba(138, 180, 248, 0.1);
}

._deleteButton_1d66q_73 {
    background: transparent;
    border: none;
    color: var(--accent-primary, #8ab4f8);
    /* Gemini style uses same blue for primary actions often, or red for destuctive */
    /* User image shows "삭제" on right, looks like plain text button or slightly different. Let's stick to text button style for consistency with Gemini dialogs */
    font-weight: 500;
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

._deleteButton_1d66q_73:hover {
    background: rgba(138, 180, 248, 0.1);
    color: #f28b82;
    /* Red hover for destructive */
}/* ------------------------------------------------------------------
   SETTINGS POPUP (Gemini/Google Style)
   ------------------------------------------------------------------ */

/* CONTAINER: Generic */
._popup_6tnq3_6 {
    background: var(--bg-secondary);
    color: var(--text-primary);
    z-index: 50;
    z-index: 50;
    /* overflow: hidden; Removed to allow cascading sub-menus */
    animation: _scaleIn_6tnq3_1 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------
   DESKTOP / TABLET (> 768px) -> "Speech Bubble / Popover"
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    ._popup_6tnq3_6 {
        position: fixed;
        z-index: 2147483647;
        /* Must be higher than backdrop's 2147483646 */
        bottom: 20px;
        /* Aligned with settings icon height */
        left: 110px;
        /* Default for Collapsed Sidebar (100px) + Gap */
        width: 260px;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
        margin-bottom: 0;
        transform-origin: bottom left;
        transition: left 0.3s ease;
        /* Smooth transition if sidebar expands/collapses while open */
    }

    /* Shifted Position when Sidebar is Expanded */
    ._popup_6tnq3_6._expandedPosition_6tnq3_40 {
        left: 240px;
        /* 230px sidebar width + 10px gap */
    }

    /* "Tooltip Arrow" pointing LEFT towards Sidebar */
    ._popup_6tnq3_6::after {
        content: "";
        position: absolute;
        bottom: 24px;
        /* Approx center of Settings Icon height */
        left: -6px;
        /* Push out to left */
        width: 12px;
        height: 12px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-subtle);
        border-left: 1px solid var(--border-subtle);
        /* Left border for left pointing */
        transform: rotate(45deg);
    }
}

._mobileCloseBtn_6tnq3_63 {
    display: none;
}

@media (max-width: 767px) {
    ._popup_6tnq3_6 {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 0;
        background: var(--bg-primary);
        color: var(--text-primary);
        border: none;
        animation: _slideUp_6tnq3_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        padding-top: max(calc(env(safe-area-inset-top, 20px) + 12px), 50px);
        padding-bottom: env(safe-area-inset-bottom, 20px);
        z-index: 2147483647 !important;
    }

    ._popup_6tnq3_6::before {
        display: none;
    }

    ._section_6tnq3_91:first-child {
        padding-top: 0px;
    }

    ._mobileCloseBtn_6tnq3_63 {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        padding: 8px;
        cursor: pointer;
        border-radius: 50%;
    }
    ._mobileOnlySection_6tnq3_106 {
        display: block;
        padding: 16px 8px 32px 8px;
        margin-top: auto;
    }

    ._mobileOnlyBtn_6tnq3_112 {
        width: 100%;
        padding: 14px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

._mobileOnlySection_6tnq3_106 {
    display: none;
}

._backdrop_6tnq3_132 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483646 !important;
    pointer-events: auto;
    cursor: default;
    /* Optional: dim background on mobile */
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
    ._backdrop_6tnq3_132 {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
    }
}

._section_6tnq3_91 {
    padding: 8px;
}

._divider_6tnq3_156 {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 12px;
}

._menuItem_6tnq3_162 {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-align: left;
}

._menuItem_6tnq3_162:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

._menuItem_6tnq3_162 span {
    flex: 1;
}

._footerInfo_6tnq3_187 {
    padding: 12px 16px;
    font-size: 0.75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

._dot_6tnq3_197 {
    font-weight: bold;
}

/* ANIMATIONS */
@keyframes _scaleIn_6tnq3_1 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

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

@keyframes _slideUp_6tnq3_1 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------------
   SUB-MENU (Cascading) for Desktop
   ------------------------------------------------------------------ */
._menuItemWrapper_6tnq3_227 {
    position: relative;
    width: 100%;
}

/* Arrow Icon only visible on Desktop */
._arrowIcon_6tnq3_233 {
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-left: auto;
    /* Push to right */
}

@media (min-width: 768px) {

    ._menuItem_6tnq3_162:hover ._arrowIcon_6tnq3_233,
    ._menuItem_6tnq3_162._expanded_6tnq3_40 ._arrowIcon_6tnq3_233 {
        opacity: 1;
    }

    ._subMenu_6tnq3_247 {
        position: absolute;
        left: 100%;
        /* Right side of parent */
        bottom: 0;
        /* Anchor to bottom of parent → opens upward */
        top: auto;
        margin-left: 8px;
        /* Gap */
        width: 180px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        padding: 4px;
        z-index: 10000;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        animation: _slideLeftSlot_6tnq3_1 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Transparent bridge to prevent mouseleave when crossing the gap */
    ._subMenu_6tnq3_247::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -20px;
        width: 20px;
        background: transparent;
    }
}

/* Hide Arrow on Mobile */
@media (max-width: 767px) {
    ._arrowIcon_6tnq3_233 {
        display: none;
    }
}

@keyframes _slideLeftSlot_6tnq3_1 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

/* Active State (Selected Theme) */
._menuItem_6tnq3_162._active_6tnq3_300 {
    /* For sub-menu items */
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

._menuItem_6tnq3_162._expanded_6tnq3_40 {
    /* For parent item when sub-menu is open */
    background: var(--bg-tertiary) !important;
}._sidebar_j0m9j_1 {
    width: 100%;
    /* Absolute positioning bounds it EXACTLY to the desktopSidebarWrapper dimension */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    /* min-height: 0 / max-height 100% safety checks */
    min-height: 0;
    max-height: 100%;
    border-right: none;
    /* Border is on wrapper */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: space-between;
    transition: transform 0.3s ease;
    z-index: 50;
    /* [FIX] Lowered from 30000 to 50 to ensure Voice Overlay (2B+) covers it */
    overflow: hidden;
}

/* ... existing topSection ... */
/* Defined .navSection as it was missing */
._navSection_j0m9j_27 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Tighter gap for Rail */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scroll in rail */
    min-height: 0;
    padding: 0.5rem 0.5rem;
    /* Padding for the list */
}

._sidebarHeader_j0m9j_42 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(52px + max(env(safe-area-inset-top), 10px));
    padding: max(env(safe-area-inset-top), 10px) var(--safe-edge-right) 0 var(--safe-edge-left);
    position: sticky;
    top: 0;
    background-color: transparent;
    z-index: 10;
    box-sizing: border-box;
}

._headerLogoGroup_j0m9j_55 {
    display: flex;
    align-items: center;
    gap: 0;
}

._sidebarLogoText_j0m9j_61 {
    font-size: 1.25rem;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
    font-family: 'PyeongChangPeace-Bold', sans-serif;
    letter-spacing: -0.02em;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._headerLogoGroup_j0m9j_55 {
    gap: 0;
}

._sidebarLogoText_j0m9j_61._hidden_j0m9j_81 {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Center Hamburger in Collapsed Mode */
._sidebar_j0m9j_1._collapsed_j0m9j_77 ._sidebarHeader_j0m9j_42 {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    /* Ensure full width for centering */
}

._menuButton_j0m9j_96 {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

._menuButton_j0m9j_96:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

._iconButton_j0m9j_114 {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 6px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Circle background for interaction */
    transition: background-color 0.2s ease;
}

._iconButton_j0m9j_114:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

._headerActionGroup_j0m9j_132 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

._sidebar_j0m9j_1:not(._collapsed_j0m9j_77) ._headerActionGroup_j0m9j_132 {
    padding: 0 0.8rem; /* Tweak from 0.75rem for perfect visual alignment with navItems */
}

._headerActionGroup_j0m9j_132._centered_j0m9j_143,
._sidebar_j0m9j_1._collapsed_j0m9j_77 ._headerActionGroup_j0m9j_132 {
    justify-content: center;
}

/* ... logoArea/Text ... */

._navItem_j0m9j_150 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.1s;
    text-decoration: none;
    width: 100%;
    /* Ensure full width */
}

/* Rail Layout (Collapsed) Overrides */
._sidebar_j0m9j_1._collapsed_j0m9j_77 ._navItem_j0m9j_150 {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    height: auto;
    min-height: 56px;
    text-align: center;
    width: 100%;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._navItem_j0m9j_150 > span {
    display: none;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._navContent_j0m9j_184 {
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Ensure Search button specifically aligns if it uses navItem */

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._navItem_j0m9j_150 span {
    font-size: 10px;
    line-height: 1.2;
    display: block;
    white-space: normal;
    word-break: keep-all;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._iconWrapper_j0m9j_205 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Standardize icon wrapper width */
}

/* Gemini/Perplexity Style New Chat Button - Neutralized for Mobile Consistency */
._newChatButton_j0m9j_215 {
    background-color: transparent;
    border-radius: 6px;
    /* Match navItem */
    color: var(--text-primary);
    margin-bottom: 0;
    /* Reset margin */
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._newChatButton_j0m9j_215 {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    /* Rounded rect for rail item */
    width: 44px;
    /* Fixed width/height for icon-like feel */
    height: 44px;
    padding: 0;
    margin: 0 auto 8px auto;
    /* Center in rail */
    justify-content: center;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._newChatButton_j0m9j_215 ._navContent_j0m9j_184 {
    gap: 0;
}

/* Hiding Logic Removed - We have scroll now! */
/* @media (max-height: 750px) {
    .hidableItem {
        display: none !important;
    }
} */

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._newChatButton_j0m9j_215 span {
    display: none;
    /* Hide text for New Chat button in Rail (Icon only usually, or small text?) 
                      User asked for text below icon for MENU items.
                      For New Chat, Gemini has just a sparkle/plus. 
                      Let's stick to Icon only or Icon+Text?
                      User said "채팅 아이콘은 제미나이 새채팅 같이 만들어줘" -> Icon.
                      "그리고 첨부 그림처럼 아이콘 밑에 알맞은 사이즈로 메뉴 텍스트를 기록해줘" -> This implies for the list.
                      Let's assume "Chat" (New Chat) also follows the pattern or stands out.
                      Gemini's "New Chat" in rail is a small bubble.
                      Let's make it Icon Top / Text Bottom for consistency if "Chat" is part of the list.
                      BUT user said "채팅시작을 채팅으로 변경하고... 메뉴를 다음과 같이 구성: 채팅/공간..." 
                      So "Chat" is item #1. It should look like the others?
                      "채팅 아이콘은 제미나이 새채팅 같이 만들어줘" -> Maybe distinct style but same layout?
                      Let's keep it consistent: Icon Top, Text Bottom.
                   */
    display: block;
    font-size: 10px;
}

._sidebar_j0m9j_1._collapsed_j0m9j_77 ._newChatButton_j0m9j_215 {
    /* If it's part of the list, it effectively behaves like others but maybe slightly highlighted */
    width: auto;
    height: auto;
    border-radius: 6px;
    background-color: transparent;
    /* Blend in? Or stand out? */
}

/* Wait, user said "Chat" is the first item. 
   Gemini's "New Chat" is usually a separate pill. 
   If it's in the list "Chat, Spaces, Health...", it might just be a nav item. 
   Let's check the request "채팅시작을 채팅으로 변경하고 메뉴를 다음과 같이 구성... 채팅/공간/..."
   So "New Chat" effectively BECOMES the "Chat" menu item. 
   I will style it as a standard navItem in Rail, maybe with a special icon.
   I'll revert specific .newChatButton sizing for rail if it needs to match others.
   But let's give it a subtle background or accent if active.
*/

._newChatButton_j0m9j_215:hover {
    background-color: var(--bg-tertiary);
    box-shadow: none;
}

._newChatButton_j0m9j_215 ._iconWrapper_j0m9j_205 {
    color: var(--text-secondary);
}

._newChatButton_j0m9j_215 span {
    font-weight: 500;
}

._navContent_j0m9j_184 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

._navItem_j0m9j_150:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

._navItem_j0m9j_150._active_j0m9j_314 {
    background-color: var(--bg-tertiary);
    /* Highlight active */
    color: var(--accent-primary);
    /* Cyan tint */
    font-weight: 500;
}

._navItem_j0m9j_150._active_j0m9j_314 ._iconWrapper_j0m9j_205 {
    color: var(--accent-primary);
}

/* History List Styles */
._historyListContainer_j0m9j_327 {
    position: relative;
    border-left: 2px solid var(--border-subtle);
    margin-left: 1.25rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

._historyThreadItem_j0m9j_338 {
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    position: relative;
    /* For Menu Positioning */
}

/* Active Item Style (Menu Open) */
._historyThreadItem_j0m9j_338._activeItem_j0m9j_352 {
    background-color: var(--bg-tertiary);
}

._historyThreadItem_j0m9j_338:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Menu Trigger Button */
._menuWrapper_j0m9j_362 {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* Push to right */
    position: relative;
}

._menuTrigger_j0m9j_370 {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

._historyThreadItem_j0m9j_338:hover ._menuTrigger_j0m9j_370,
._historyThreadItem_j0m9j_338._activeItem_j0m9j_352 ._menuTrigger_j0m9j_370 {
    opacity: 1;
    /* Show on hover or active */
}

/* Make menu always visible on touch devices or smaller screens */
@media (max-width: 768px) {
    ._menuTrigger_j0m9j_370 {
        opacity: 1 !important;
    }
}

._menuTrigger_j0m9j_370:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Context Menu Dropdown */
._contextMenu_j0m9j_403 {
    position: absolute;
    top: 100%;
    /* Below trigger */
    right: 0;
    background-color: var(--bg-tertiary);
    /* Dark Grey per Gemini default */
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 4px;
    /* Tight padding */
    width: 140px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.light-theme ._contextMenu_j0m9j_403 {
    background-color: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._contextMenu_j0m9j_403 button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s;
}

._contextMenu_j0m9j_403 button:hover {
    background-color: rgba(255, 255, 255, 0.08);
    /* Slight highlight */
}

.light-theme ._contextMenu_j0m9j_403 button:hover {
    background-color: var(--bg-secondary);
}

._contextMenu_j0m9j_403 button svg {
    opacity: 0.9;
}

/* Specific styling for Delete option if needed */
/* .deleteOption:hover {
    color: #ef4444; 
    background-color: rgba(239, 68, 68, 0.1);
} */

/* Rename Input */
._renameInput_j0m9j_463 {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 2px 4px;
    border-radius: 4px;
    width: 100%;
    outline: none;
    margin-right: 8px;
}

._pinIcon_j0m9j_475 {
    margin-right: 6px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

._navItemWrapper_j0m9j_481 {
    position: relative;
    width: 100%;
}

._loginTooltip_j0m9j_486 {
    position: absolute;
    left: calc(100% + 10px);
    /* To the right of the rail */
    top: 50%;
    transform: translateY(-50%);
    background-color: #202124;
    /* Dark tooltip */
    border: 1px solid var(--border-subtle);
    color: #e8eaed;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    cursor: default;
    text-align: left;
    white-space: normal;
    /* Allow wrapping */
}

/* Arrow for tooltip */
._loginTooltip_j0m9j_486::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #202124 transparent transparent;
}

._loginLink_j0m9j_521 {
    color: var(--accent-primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
    margin-left: 4px;
}

/* Search Interface Styles */
._searchHeaderInner_j0m9j_530 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--bg-secondary);
    border-radius: 24px;
    margin-bottom: 8px;
}

._searchInput_j0m9j_542 {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    padding: 0;
    width: 100%;
}

._searchInput_j0m9j_542::placeholder {
    color: var(--text-secondary);
}

._searchResultsContainer_j0m9j_557 {
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem;
}

._searchSectionHeader_j0m9j_563 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
}

._historyDate_j0m9j_571 {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-left: auto;
    /* Push to right */
    white-space: nowrap;
}

._noResults_j0m9j_579 {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 2rem;
}

/* Footer Section Styles (Fixed Bottom) */
._bottomSection_j0m9j_587 {
    padding: 0.5rem 0.75rem 1rem 0.75rem;
    background-color: transparent;
    flex-shrink: 0;
    margin-top: auto;

    /* [CRITICAL FIX] Enforce visibility and bounds */
    min-height: 70px;
    /* Ensure it occupies space */
    width: 100%;
    /* Span full width */
    position: relative;
    /* Base for inner absolute/fixed if needed */
    z-index: 100;
    /* Bring to front */
}

._locationInfo_j0m9j_604 {
    margin-top: 12px;
    padding-left: 4px;
    /* Align with text start approximately */
}

._locationAddressRow_j0m9j_610 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

._locationDot_j0m9j_617 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9ca3af;
    /* Greyish dot */
    flex-shrink: 0;
}

._locationAddress_j0m9j_610 {
    font-size: 0.85rem;
    color: #a8c7fa;
    /* Light Blueish per image */
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._locationContextRow_j0m9j_636 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 20px;
    /* Indent to align with text above (8px dot + 12px gap) */
    font-size: 0.75rem;
    color: #9ca3af;
}

._locationDivider_j0m9j_646 {
    color: #4b5563;
    font-size: 0.6rem;
}

._locationUpdateLink_j0m9j_651 {
    background: none;
    border: none;
    padding: 0;
    color: #a8c7fa;
    /* Link blue */
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
}

._locationUpdateLink_j0m9j_651:hover {
    text-decoration: underline;
}._header_xok6h_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(52px + max(env(safe-area-inset-top), 10px));
    /* Top padding for safe area, flex will center vertically in the remaining space */
    padding: max(env(safe-area-inset-top), 10px) var(--safe-edge-right) 0 var(--safe-edge-left);
    background-color: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 3000;
    width: 100%;
    box-sizing: border-box;
}

/* Sections */
/* Sections */
._leftSection_xok6h_18 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    /* Take simplified space */
    justify-content: flex-start;
}

._centerSection_xok6h_27 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: max(env(safe-area-inset-top), 10px);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    /* Ensure clickable */
}

._rightSection_xok6h_40 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
}

._iconButton_xok6h_48 {
    background: none;
    border: none;
    padding: 12px;
    /* Increased from 6px to 12px for better touch target (approx 44px) */
    border-radius: 50%;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    /* [FIX] Ensure touch target is substantial */
    min-width: 44px;
    min-height: 44px;
    margin: -6px;
    /* Negative margin to compensate for larger hit area without affecting layout flow */
}

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

._title_xok6h_72 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'serif';
    /* Fallback if logoArea not used */
}

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

._logoIcon_xok6h_86 {
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

._logoText_xok6h_92 {
    font-size: 1.35rem;
    /* [FIX] Increased from 1.15rem to balance with Login button */
    font-weight: 700;
    /* Bolder */
    color: transparent;
    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    /* font-family: var(--font-primary); */
    font-family: 'PyeongChangPeace-Bold', sans-serif;
    letter-spacing: -0.02em;
}

/* Center Title (Unified Stream) */
._headerTitle_xok6h_109 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Auth Buttons */
._headerLoginBtn_xok6h_117 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background-color: transparent;
    /* [FIX] Remove BG */
    border: none;
    /* [FIX] Remove Border */
    border-radius: 8px;
    color: var(--text-secondary);
    /* [FIX] Theme Match */
    font-size: 0.95rem;
    /* Slightly larger text */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

._headerLoginBtn_xok6h_117:hover {
    background-color: var(--bg-hover);
    /* Minimal hover effect */
    color: var(--text-primary);
}

._avatarButton_xok6h_142 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    padding: 0;
}

._avatarImg_xok6h_156 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._avatarFallback_xok6h_162 {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Pill Container Removed */

@media (max-width: 768px) {
    ._header_xok6h_1 {
        background-color: var(--bg-primary);
        border-bottom: none;
    }
}

@media (min-width: 769px) {
    ._leftSection_xok6h_18 ._mobileMenuBtn_xok6h_177 {
        display: none;
    }
}

/* Minimal Header Mode */
._minimalHeader_xok6h_183 {
    background-color: transparent !important;
    pointer-events: none;
    /* Let clicks pass through empty spaces */
    border-bottom: none !important;
    /* Use position absolute to float over content without pushing it down */
    position: absolute;
    width: 100%;
}

._minimalHeader_xok6h_183 ._leftSection_xok6h_18 {
    pointer-events: none;
    /* Let the flexible container pass clicks through */
}

._minimalHeader_xok6h_183 ._leftSection_xok6h_18 ._iconButton_xok6h_48 {
    pointer-events: auto;
    /* Re-enable click exclusively for the hamburger menu button */
}._container_wi9a7_1 {
    display: flex;
    flex-direction: row;
    height: 100%;
    /* Revert to viewport height */
    overflow: hidden;
    background-color: var(--bg-primary);
}

._mainColumn_wi9a7_10 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    position: relative;
}

._headerWrapper_wi9a7_19 {
    flex-shrink: 0;
    z-index: 100;
}

._bodyWrapper_wi9a7_24 {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar Wrapper */
._desktopSidebarWrapper_wi9a7_31 {
    flex-shrink: 0;
    width: 230px;
    height: 100%;
    min-height: 0;
    /* Prevents flexbox infinite height expansion bug */
    border-right: 1px solid var(--border-subtle);
    background-color: var(--bg-tertiary);
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
    /* overflow: hidden; Removed to allow tooltips */
    overflow: visible;
    position: relative;
    z-index: 50000;
    display: flex;
}

._desktopSidebarWrapper_wi9a7_31._collapsed_wi9a7_47 {
    width: 68px;
}

/* Main Content */
._mainContent_wi9a7_52 {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

._contentScroll_wi9a7_60 {
    flex: 1;
    overflow-y: auto;
    position: relative;
    height: 100%;
}

._noScroll_wi9a7_67 {
    overflow: hidden;
}

/* Mobile Drawer */
._mobileDrawer_wi9a7_72 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* [Z-INDEX FIX] Must be higher than SearchBar (10000) */
    z-index: 60000;
    display: flex;
    animation: _fadeIn_wi9a7_1 0.2s ease;
}

._drawerSidebarWrapper_wi9a7_85 {
    width: 80%;
    max-width: 300px;
    /* [PWA FIX] Full Height Overlay matching PC PWA */
    top: 0 !important;
    height: 100% !important;
    max-height: 100%;
    /* Internal padding for status bar */
    padding-top: env(safe-area-inset-top);

    /* overflow: visible to allow Bleed */
    overflow: visible !important;

    background-color: var(--bg-tertiary);
    border-radius: 0 16px 16px 0;
    /* Rounded corners on right side */
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
    animation: _slideRight_wi9a7_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    position: absolute;
    /* Relative to mobileDrawer fixed */
    transition: width 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
}

._drawerSidebarWrapper_wi9a7_85._searchActive_wi9a7_110 {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
}

._drawerSidebar_wi9a7_85 {
    width: 100%;
    height: 100%;
}

/* [PWA FIX] Sidebar Bottom Bleed */
._drawerSidebarWrapper_wi9a7_85::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 300px;
    background-color: inherit;
    /* Should verify if inherited from wrapper */
    background-color: var(--bg-tertiary);
    /* Force correct color */
    z-index: -1;
}

/* Close Button (if needed inside drawer, but clicking outside closes it) */
._closeButton_wi9a7_137 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    z-index: 1001;
}

@keyframes _slideRight_wi9a7_1 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes _fadeIn_wi9a7_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    ._desktopSidebarWrapper_wi9a7_31 {
        display: none;
    }

    /* Force Dark Theme override removed to respect ThemeContext */
}/* Container */
._container_1jjlu_2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    /* Use theme bg */
    z-index: 9500;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header */
._header_1jjlu_18 {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
}

._title_1jjlu_28 {
    font-size: 16px;
    font-weight: 600;
}

._iconButton_1jjlu_33 {
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Scroll Area */
._content_1jjlu_45 {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-secondary);
    /* Often slightly off-white or gray in settings */
}

/* Profile Card */
._profileCard_1jjlu_53 {
    background-color: var(--bg-primary);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /* Spacer */
}

._profileInfo_1jjlu_63 {
    display: flex;
    align-items: center;
    gap: 15px;
}

._profileName_1jjlu_69 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

._profilePhone_1jjlu_75 {
    font-size: 14px;
    color: var(--text-secondary);
}

._manageButton_1jjlu_80 {
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    font-size: 12px;
    background-color: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

/* Settings List */
._section_1jjlu_91 {
    background-color: var(--bg-primary);
    margin-bottom: 10px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

._sectionTitle_1jjlu_98 {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 12px 20px 4px 20px;
    margin-bottom: 4px;
}

._listItem_1jjlu_105 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background-color: var(--bg-primary);
    position: relative;
}

/* Add separator line between items, but not after the last one */
._listItem_1jjlu_105:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    /* Indent separator */
    right: 0;
    height: 1px;
    background-color: var(--border-subtle);
}

._listItemContent_1jjlu_127 {
    display: flex;
    align-items: center;
    gap: 12px;
}

._listItemLabel_1jjlu_133 {
    font-size: 16px;
    font-weight: 400;
}

._listItemSub_1jjlu_138 {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

._listItemValue_1jjlu_144 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-right: 8px;
}

/* IOS Toggle Switch */
._toggleSwitch_1jjlu_151 {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
}

._toggleSwitch_1jjlu_151 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._slider_1jjlu_164 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

._slider_1jjlu_164:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+._slider_1jjlu_164 {
    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
    /* Ansimssi Blue-Purple Gradient */
}

input:checked+._slider_1jjlu_164:before {
    transform: translateX(20px);
}

/* Badge */
._badge_1jjlu_199 {
    background-color: #ff3b30;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

/* Footer */
._footer_1jjlu_210 {
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: left;
}/* --- Layout & Container --- */
._container_1oaue_2 {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent body scroll */
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* --- Header --- */
._header_1oaue_15 {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-primary);
    /* Seamless header */
    flex-shrink: 0;
    z-index: 10;
}

._headerTitle_1oaue_27 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

._headerActions_1oaue_34 {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* --- Icons & Buttons --- */
._iconButton_1oaue_41 {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

._iconButton_1oaue_41:active {
    opacity: 0.6;
}

/* --- Main Content Area --- */
._content_1oaue_58 {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-primary);
    position: relative;

    /* Hide scrollbar for clean look */
    @supports (scrollbar-width: none) {
        scrollbar-width: none;
    }
}

._content_1oaue_58::-webkit-scrollbar {
    display: none;
}

/* --- Friend List Styles --- */
._friendList_1oaue_75 {
    padding: 10px 20px 80px 20px;
    /* Bottom padding for nav */
}

._myProfileSection_1oaue_80 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

._profileInfo_1oaue_89 {
    flex: 1;
}

._profileName_1oaue_93 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

._profileStatus_1oaue_100 {
    font-size: 13px;
    color: var(--text-secondary);
}

._sectionTitle_1oaue_105 {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    font-weight: 500;
}

._friendItem_1oaue_112 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    cursor: pointer;
}

._friendItem_1oaue_112:active {
    background-color: var(--bg-secondary);
    margin: 0 -20px;
    padding: 10px 20px;
}

._friendName_1oaue_126 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

/* --- Chat List Styles --- */
._chatList_1oaue_133 {
    padding: 0 0 80px 0;
}

._chatListItem_1oaue_137 {
    display: flex;
    padding: 16px 20px;
    gap: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

._chatListItem_1oaue_137:active,
._chatListItem_1oaue_137:hover {
    background-color: var(--bg-secondary);
}

._chatListAvatar_1oaue_150 {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    /* Squircle-ish */
    overflow: hidden;
    flex-shrink: 0;
    background-color: #eee;
}

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

._chatListInfo_1oaue_166 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    /* For truncation */
}

._chatListRow_1oaue_175 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

._chatListRow_1oaue_175:last-child {
    margin-bottom: 0;
    align-items: center;
}

._chatListName_1oaue_187 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

._memberCount_1oaue_197 {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-left: 6px;
    font-weight: 400;
}

._chatListTime_1oaue_204 {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

._chatListPreview_1oaue_210 {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 85%;
}

._chatListUnread_1oaue_220 {
    background-color: #ff3b30;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

/* --- Empty States --- */
._emptyState_1oaue_232 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    color: var(--text-tertiary);
    gap: 16px;
}

/* --- Chat Room (Active) --- */
._chatRoomContainer_1oaue_243 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-secondary);
    /* Different bg for message area */
}

._chatRoomHeader_1oaue_251 {
    height: 60px;
    background-color: var(--bg-primary);
    /* Header stays primary */
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

._chatRoomTitle_1oaue_263 {
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    margin: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._messagesArea_1oaue_273 {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._messageRow_1oaue_282 {
    display: flex;
    align-items: flex-end;
    /* Align avatar at bottom */
    gap: 8px;
    max-width: 80%;
}

._messageRowMe_1oaue_290 {
    align-self: flex-end;
    flex-direction: row-reverse;
}

._messageAvatar_1oaue_295 {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    object-fit: cover;
    margin-bottom: 2px;
}

._messageContentWrapper_1oaue_303 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

._messageRowMe_1oaue_290 ._messageContentWrapper_1oaue_303 {
    align-items: flex-end;
}

._messageSender_1oaue_313 {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
    margin-left: 2px;
}

._messageMe_1oaue_320 {
    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
    color: white;
    padding: 10px 14px;
    border-radius: 18px;
    border-top-right-radius: 4px;
    /* Distinctive shape */
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

._messageOther_1oaue_333 {
    background-color: var(--bg-primary);
    /* Standard white/dark bubble */
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 18px;
    border-top-left-radius: 4px;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._messageTime_1oaue_346 {
    font-size: 10px;
    color: var(--text-tertiary);
    margin: 0 4px;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 4px;
}

._systemMessage_1oaue_355 {
    align-self: center;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 99px;
    margin: 10px 0;
    max-width: 90%;
}

._systemContent_1oaue_364 {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Input Bar --- */
._inputBar_1oaue_373 {
    background-color: var(--bg-primary);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    /* iPhone Safe Area */
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border-subtle);
}

._inputField_1oaue_384 {
    background-color: var(--bg-secondary);
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 15px;
    width: 100%;
    color: var(--text-primary);
}

._inputField_1oaue_384:focus {
    outline: none;
}

._sendButton_1oaue_398 {
    background: var(--accent-primary);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Bottom Nav --- */
._bottomNav_1oaue_413 {
    height: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--bg-primary);
    /* or --bg-secondary */
    border-top: 1px solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom);
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 20;
}

._navItem_1oaue_427 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
}

._navItem_1oaue_427._active_1oaue_437 {
    color: var(--text-primary);
    /* Or Accent */
}

._navItem_1oaue_427._active_1oaue_437 svg {
    /* Maybe fill icon for active state */
    fill: currentColor;
    fill-opacity: 0.1;
}

/* --- Overlays --- */
._overlay_1oaue_449 {
    background-color: var(--bg-primary);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    display: flex;
    flex-direction: column;
}

._searchBar_1oaue_461 {
    padding: 10px 16px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
}

._drawerBackdrop_1oaue_467 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30;
}

._drawer_1oaue_467 {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background-color: var(--bg-primary);
    z-index: 31;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}

._drawerHeader_1oaue_491 {
    height: 60px;
    padding: 20px;
    font-weight: 700;
    font-size: 18px;
    border-bottom: 1px solid var(--border-subtle);
}

._drawerContent_1oaue_499 {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

._drawerSection_1oaue_505 {
    margin-bottom: 30px;
}

._drawerSection_1oaue_505 h4 {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

._drawerUser_1oaue_515 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
}

._drawerInviteBtn_1oaue_523 {
    width: 100%;
    padding: 12px;
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    cursor: pointer;
}

._drawerFooter_1oaue_539 {
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-secondary);
}

._drawerExitBtn_1oaue_545 {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    padding: 10px 0;
}

/* Toast */
._toast_1oaue_560 {
    position: absolute;
    top: 70px;
    /* Below header */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(30, 30, 30, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 99px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: _slideDown_1oaue_1 0.3s ease-out;
}

@keyframes _slideDown_1oaue_1 {
    from {
        transform: translate(-50%, -20px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}._container_tra6f_1 {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-primary);
    position: relative;
    /* Ensure it fits within the MainLayout content area */
}

/* Main Area (The App Dashboard) */
._mainArea_tra6f_12 {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: flex 0.3s ease, margin-right 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background-color: var(--bg-primary);
}

._header_tra6f_24 {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--bg-primary);
}

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

._backButton_tra6f_40 {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

._backButton_tra6f_40:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}


._title_tra6f_58 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

._content_tra6f_65 {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}._container_1jfjw_1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Kakao background color */
    background-color: #9bbbd4;
    padding-bottom: 20px;
}

._messageList_1jfjw_10 {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._messageWrapper_1jfjw_19 {
    display: flex;
    gap: 8px;
    max-width: 90%;
}

._wrapperLeft_1jfjw_25 {
    align-self: flex-start;
}

._wrapperRight_1jfjw_29 {
    align-self: flex-end;
    flex-direction: row-reverse;
}

._agentAvatar_1jfjw_34 {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

._messageContentBlock_1jfjw_50 {
    display: flex;
    flex-direction: column;
}

._senderName_1jfjw_55 {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    margin-left: 4px;
}

._bubble_1jfjw_62 {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

._bubble_1jfjw_62 p {
    margin: 0 0 8px 0;
}

._bubble_1jfjw_62 p:last-child {
    margin: 0;
}

._bubble_1jfjw_62 pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
}

._bubble_1jfjw_62 code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
}

._bubbleUser_1jfjw_94 {
    background-color: #fef01b;
    /* Kakao yellow */
    color: #111;
    border-top-right-radius: 4px;
}

._bubbleAgent_1jfjw_101 {
    background-color: #ffffff;
    color: #111;
    border-top-left-radius: 4px;
}

._approvalButtons_1jfjw_107 {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding-top: 12px;
}

._btnApprove_1jfjw_115,
._btnReject_1jfjw_116 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

._btnApprove_1jfjw_115 {
    background-color: #e0f2fe;
    color: #0284c7;
}

._btnApprove_1jfjw_115:hover {
    background-color: #bae6fd;
}

._btnReject_1jfjw_116 {
    background-color: #fee2e2;
    color: #dc2626;
}

._btnReject_1jfjw_116:hover {
    background-color: #fca5a5;
}

._statusLabel_1jfjw_149 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    color: #0284c7;
    font-weight: 500;
}

._statusLabelRejected_1jfjw_159 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
}

._inputArea_1jfjw_169 {
    display: flex;
    padding: 12px;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    gap: 8px;
    align-items: center;
}

._input_1jfjw_169 {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    background: #f8fafc;
}

._input_1jfjw_169:focus {
    border-color: #fef01b;
    background: #ffffff;
}

._sendButton_1jfjw_194 {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fef01b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    cursor: pointer;
    transition: filter 0.2s;
    flex-shrink: 0;
}

._sendButton_1jfjw_194:disabled {
    background-color: #e2e8f0;
    color: #a0aec0;
    cursor: not-allowed;
}

._sendButton_1jfjw_194:not(:disabled):hover {
    filter: brightness(0.95);
}/* Gemini Ansimssi 2.0 Theme Scoped */
._container_10rmp_2 {
    --gemini-bg: var(--bg-primary);
    --gemini-surface: var(--bg-secondary);
    --gemini-text-primary: var(--text-primary);
    --gemini-text-secondary: var(--text-secondary);
    --gemini-accent: #A8C7FA;
    --gemini-purple: #D0BCFF;
    --gemini-font: 'Google Sans', 'Inter', -apple-system, sans-serif;

    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* [FIX] Use dvh to account for mobile browser UI */
    /* [FIX] Use dvh to account for mobile browser UI */
    height: 100vh;
    height: 100dvh;
    /* Fallback */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--gemini-text-primary);
    font-family: var(--gemini-font);
}

._contentArea_10rmp_27 {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    /* Remove padding here, managing in blocks */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* [FIX] Safari Momentum Scroll */
    background-color: var(--gemini-bg);
    padding-bottom: env(safe-area-inset-bottom);
    /* [FIX] iPhone Home Indicator */
}

/* Gemini Header */
._geminiHeader_10rmp_42 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

._sparkleArea_10rmp_50 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

._sparkleIcon_10rmp_56 {
    width: 24px;
    height: 24px;
    /* Gradient or color fill handled in SVG */
}

._modeBadge_10rmp_62 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #1A73E8, #8AB4F8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

/* Answer Area */
._unifiedStream_10rmp_74 {
    padding: 2rem 3rem;
    max-width: 800px;
    /* Optimal reading width */
    margin: 0 auto;
}

._queryDisplay_10rmp_81 {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 2rem;
    margin-top: 2rem;
    color: #fff;
    line-height: 1.5;

    /* Bubble Style */
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 12px 18px;
    border-radius: 20px 0 20px 20px;
    /* Top-Right sharp (connected to tail) */

    /* Right Alignment */
    margin-left: auto;
    width: fit-content;
    max-width: 80%;

    /* Shadow handled via filter to include tail */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));

    /* Positioning for Tail */
    position: relative;
    /* Ensure space for tail if it were sticking out side, but here it sticks up. */
    /* We need some top margin buffer? margin-top handles it. */

    /* [AUTO SCROLL ANCHOR] */
    scroll-margin-top: 100px;
}

/* User Bubble Tail (Flipped Ansimssi Symbol: Top-Right Vertical Tail) */
._queryDisplay_10rmp_81::after {
    content: '';
    position: absolute;
    top: -10px;
    /* Height of tail */
    right: 0;
    /* Flush with right edge */
    width: 0;
    height: 0;
    /* Shape: Vertical Right, Diagonal Left, Flat Bottom */
    border-left: 12px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 10px solid var(--bg-tertiary);
}

._queryDisplay_10rmp_81:first-child {
    margin-top: 2rem;
}

/* Section Blocks */
._sectionBlock_10rmp_134 {
    margin-bottom: 3rem;
    animation: _fadeIn_10rmp_1 0.5s ease-out;
}

/* Clean up legacy */
._divider_10rmp_140 {
    display: none;
}

/* Sticky Search */
._stickySearchWrapper_10rmp_145 {
    /* [FIX] Edge-to-Edge Search Bar */
    flex-shrink: 0;
    width: 100%;
    background: var(--gemini-bg);
    padding: 1rem 0 0 0;
    /* [FIX] Prevent this wrapper from blocking clicks in empty areas, but allow children */
    pointer-events: none;
    /* Padding top only */
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); -> Handled by SearchBar itself */
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 100;
}

@media (max-width: 800px) {
    ._stickySearchWrapper_10rmp_145 {
        /* On mobile, SearchBar handles its own fixed positioning. 
           Remove wrapper background/padding to prevent black gaps. */
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    ._contentArea_10rmp_27 {
        padding: 0;
    }

    ._unifiedStream_10rmp_74 {
        padding: 1.5rem 1.5rem;
    }

    ._geminiHeader_10rmp_42 {
        padding: 1rem 1.5rem;
    }

    ._queryDisplay_10rmp_81 {
        font-size: 1.2rem;
    }
}

/* Loading State for Gemini */
._loadingState_10rmp_191 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    gap: 1.5rem;
}

._loadingSpinner_10rmp_200 {
    width: 48px;
    height: 48px;
    background: conic-gradient(from 0deg, #4285F4, #9B72CB, #D96570, #4285F4);
    border-radius: 50%;
    animation: _spin_10rmp_1 1.5s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff 0);
}

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

@keyframes _fadeIn_10rmp_1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- Responsive Source Viewer (Bottom Sheet / Side Panel) --- */

._bottomSheetBackdrop_10rmp_230 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100vw;
    /* [FIX] Use dvh for mobile UI */
    height: 100vh;
    height: 100dvh;
    /* Fallback */
    background: rgba(0, 0, 0, 0.5);
    z-index: 90000;
    /* High z-index to cover sidebar (50000) and other UI elements */
    display: flex;
    /* Mobile Default: Align Bottom */
    align-items: flex-end;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    /* [FIX] Safari Support */
    backdrop-filter: blur(4px);
    animation: _fadeIn_10rmp_1 0.3s ease-out;
}

._bottomSheetContent_10rmp_253 {
    background: var(--bg-secondary);
    color: var(--text-primary);

    /* Mobile: Full Screen Bottom-Up */
    width: 100%;
    height: 100%;
    /* User requested full screen coverage */
    max-height: 100%;
    border-radius: 0;

    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    animation: _slideUp_10rmp_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* [FIX] Allow children to scroll */
    overflow: visible;
}

/* Header within the sheet (for List View) */
._bottomSheetHeader_10rmp_273 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    /* [FIX] Safe Area */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    flex-shrink: 0;
    /* Prevent shrinking */
}

._bottomSheetHeader_10rmp_273 button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Desktop: Full Screen - Removed Perplexity-style Right-Side Panel per user request */

@keyframes _slideUp_10rmp_1 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes _slideLeft_10rmp_1 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}/* WeatherCard.module.css */

/* ── 카드 컨테이너 ─────────────────────────────────── */
._card_1v0yc_4 {
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* 라이트 기본 */
    background: linear-gradient(135deg,
            rgba(248, 248, 250, 0.98) 0%,
            rgba(242, 242, 245, 0.98) 100%);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

._card_1v0yc_4:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* 다크 테마 */
[data-theme='dark'] ._card_1v0yc_4 {
    background: linear-gradient(135deg,
            rgba(40, 40, 45, 0.98) 0%,
            rgba(30, 30, 35, 0.98) 100%);
    color: #e8e8e8;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme='dark'] ._card_1v0yc_4:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* ── 헤더 (요일 · 위치) ───────────────────────────── */
._header_1v0yc_42 {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    font-weight: 400;
}

[data-theme='dark'] ._header_1v0yc_42 {
    color: #b0b0b0;
}

/* ── 메인 날씨 영역 ──────────────────────────────── */
._main_1v0yc_54 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 12px;
}

._iconWrapper_1v0yc_61 {
    opacity: 0.95;
    margin-top: -8px;
}

/* ── 온도 ────────────────────────────────────────── */
._tempRow_1v0yc_67 {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

._temp_1v0yc_67 {
    font-size: 52px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 8px;
}

._unitToggle_1v0yc_80 {
    font-size: 14px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s;
    font-family: inherit;
}

._unitToggle_1v0yc_80:hover {
    background: rgba(0, 0, 0, 0.07);
}

[data-theme='dark'] ._unitToggle_1v0yc_80 {
    color: #aaa;
}

[data-theme='dark'] ._unitToggle_1v0yc_80:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ── 날씨 상태 텍스트 ────────────────────────────── */
._conditionText_1v0yc_105 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px;
}

/* ── 상세 정보 + 탭 행 ───────────────────────────── */
._detailRow_1v0yc_112 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

._details_1v0yc_121 {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    flex: 1 1 auto;
}

[data-theme='dark'] ._details_1v0yc_121 {
    color: #b0b0b0;
}

/* ── 탭 바 ───────────────────────────────────────── */
._tabBar_1v0yc_133 {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

._tab_1v0yc_133 {
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

._tabActive_1v0yc_153 {
    background: #3b82f6;
    color: #fff;
}

[data-theme='dark'] ._tab_1v0yc_133 {
    background: rgba(255, 255, 255, 0.08);
    color: #b0b0b0;
}

[data-theme='dark'] ._tabActive_1v0yc_153 {
    background: #3b82f6;
    color: #fff;
}

/* ── 시간별 스크롤 ───────────────────────────────── */
._hourlyScroll_1v0yc_169 {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 16px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

[data-theme='dark'] ._hourlyScroll_1v0yc_169 {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

._hourlyItem_1v0yc_186 {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    gap: 8px;
}

._hourlyTime_1v0yc_194 {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    white-space: nowrap;
}

[data-theme='dark'] ._hourlyTime_1v0yc_194 {
    color: #b0b0b0;
}

._hourlyIcon_1v0yc_205 {
    opacity: 0.9;
}

._hourlySecondary_1v0yc_209 {
    font-size: 12px;
    color: #888;
}

[data-theme='dark'] ._hourlySecondary_1v0yc_209 {
    color: #999;
}

._hourlyPrimary_1v0yc_218 {
    font-size: 15px;
    font-weight: 500;
}

/* ── 데이터 출처 ─────────────────────────────────── */
._source_1v0yc_224 {
    font-size: 11px;
    color: #999;
    text-align: left;
    margin-top: 8px;
}

[data-theme='dark'] ._source_1v0yc_224 {
    color: #555;
}

/* ── 주간예보 섹션 ───────────────────────────────── */
._weeklySection_1v0yc_236 {
    margin-top: 4px;
    margin-bottom: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 12px;
}

[data-theme='dark'] ._weeklySection_1v0yc_236 {
    border-color: rgba(255, 255, 255, 0.08);
}

._weeklyHeader_1v0yc_247 {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

[data-theme='dark'] ._weeklyHeader_1v0yc_247 {
    color: #999;
}

._weeklyRow_1v0yc_259 {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    gap: 8px;
}

._weeklyRow_1v0yc_259:last-child {
    border-bottom: none;
}

[data-theme='dark'] ._weeklyRow_1v0yc_259 {
    border-color: rgba(255, 255, 255, 0.04);
}

._weeklyRowToday_1v0yc_275 {
    font-weight: 500;
}

._weeklyDay_1v0yc_279 {
    display: flex;
    flex-direction: column;
    width: 44px;
    flex-shrink: 0;
}

._weeklyDayName_1v0yc_286 {
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

[data-theme='dark'] ._weeklyDayName_1v0yc_286 {
    color: #ddd;
}

._weeklyDayName_1v0yc_286._today_1v0yc_296 {
    color: #3b82f6;
}

._weeklyDayName_1v0yc_286._tomorrow_1v0yc_300 {
    color: #10b981;
}

._weeklyDate_1v0yc_304 {
    font-size: 11px;
    color: #aaa;
    margin-top: 1px;
}

[data-theme='dark'] ._weeklyDate_1v0yc_304 {
    color: #666;
}

._weeklyRain_1v0yc_314 {
    width: 48px;
    text-align: center;
    flex-shrink: 0;
}

._rainProb_1v0yc_320 {
    font-size: 12px;
    color: #60a5fa;
    font-weight: 500;
}

._weeklyIcon_1v0yc_326 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}

._weeklyTemps_1v0yc_334 {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 80px;
    justify-content: flex-end;
}

._weeklyMin_1v0yc_343 {
    font-size: 14px;
    color: #60a5fa;
    font-weight: 400;
}

._weeklyTempDivider_1v0yc_349 {
    font-size: 12px;
    color: #ccc;
}

._weeklyMax_1v0yc_354 {
    font-size: 14px;
    color: #f97316;
    font-weight: 600;
}

[data-theme='dark'] ._weeklyMin_1v0yc_343 {
    color: #93c5fd;
}

[data-theme='dark'] ._weeklyMax_1v0yc_354 {
    color: #fb923c;
}

[data-theme='dark'] ._weeklyTempDivider_1v0yc_349 {
    color: #555;
}

/* ── 주간/시간별 토글 버튼 ───────────────────────── */
._weeklyToggle_1v0yc_373 {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    margin-bottom: 4px;
    text-align: center;
}

._weeklyToggle_1v0yc_373:hover {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme='dark'] ._weeklyToggle_1v0yc_373 {
    background: rgba(255, 255, 255, 0.07);
    color: #aaa;
}

[data-theme='dark'] ._weeklyToggle_1v0yc_373:hover {
    background: rgba(255, 255, 255, 0.12);
}._stockCard_1armu_1 {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    width: 100%;
    /* Remove inline styles, use CSS properly */
    text-decoration: none;
    color: inherit;
    display: block;
}

._stockCard_1armu_1:hover {
    background: var(--bg-secondary);
    border-color: var(--border-focus);
}

._header_1armu_21 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
}

._stockName_1armu_29 {
    font-weight: 500;
    color: var(--text-primary);
}

._separator_1armu_34 {
    color: var(--text-tertiary);
}

._label_1armu_38 {
    color: var(--text-secondary);
}

._priceSection_1armu_42 {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

._price_1armu_42 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

._currencyUnit_1armu_57 {
    font-size: 14px;
    font-weight: 600;
    vertical-align: super;
    margin-left: 2px;
    color: var(--text-secondary);
    letter-spacing: -0.02em;
}

._change_1armu_66 {
    font-size: 18px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

._ticker_1armu_75 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

._footer_1armu_81 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

._dot_1armu_90 {
    color: var(--text-tertiary);
}

._footer_1armu_81 a,
._disclaimerLink_1armu_95 {
    color: var(--accent-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

._footer_1armu_81 a:hover,
._disclaimerLink_1armu_95:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    ._stockCard_1armu_1 {
        padding: 16px;
    }

    ._price_1armu_42 {
        font-size: 28px;
    }

    ._change_1armu_66 {
        font-size: 16px;
    }

    ._priceSection_1armu_42 {
        gap: 12px;
    }
}._container_9nlsq_1 {
    margin: 20px 0;
}

._header_9nlsq_5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

._headerIcon_9nlsq_12 {
    color: #4CAF50;
}

._headerTitle_9nlsq_16 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #e8eaed;
}

._grid_9nlsq_23 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

._productCard_9nlsq_29 {
    position: relative;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
}

._productCard_9nlsq_29:hover {
    background: #222;
    border-color: #4CAF50;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

._imageWrapper_9nlsq_48 {
    width: 100%;
    aspect-ratio: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

._productImage_9nlsq_57 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

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

._title_9nlsq_70 {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #e8eaed;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

._price_9nlsq_83 {
    font-size: 18px;
    font-weight: 700;
    color: #4CAF50;
    margin: 4px 0;
}

._rating_9nlsq_90 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

._ratingValue_9nlsq_97 {
    color: #fbbf24;
    font-weight: 600;
}

._reviewCount_9nlsq_102 {
    color: #9aa0a6;
    font-size: 12px;
    margin-left: 2px;
}

._footer_9nlsq_108 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9aa0a6;
    margin-top: 4px;
}

._source_9nlsq_117 {
    color: #8ab4f8;
    font-weight: 500;
}

._separator_9nlsq_122 {
    color: #5f6368;
}

._delivery_9nlsq_126 {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9aa0a6;
}

._externalIcon_9nlsq_133 {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #9aa0a6;
    opacity: 0;
    transition: opacity 0.2s ease;
}

._productCard_9nlsq_29:hover ._externalIcon_9nlsq_133 {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    ._grid_9nlsq_23 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    ._productCard_9nlsq_29 {
        padding: 10px;
    }

    ._title_9nlsq_70 {
        font-size: 13px;
    }

    ._price_9nlsq_83 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    ._grid_9nlsq_23 {
        grid-template-columns: 1fr;
    }
}._container_g7qmx_1 {
    margin: 20px 0;
}

._header_g7qmx_5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

._headerIcon_g7qmx_12 {
    color: #ff0000;
}

._headerTitle_g7qmx_16 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #e8eaed;
}

._grid_g7qmx_23 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

._videoCard_g7qmx_29 {
    position: relative;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
}

._videoCard_g7qmx_29:hover {
    border-color: #ff0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
}

._thumbnailWrapper_g7qmx_47 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

._thumbnail_g7qmx_47 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._duration_g7qmx_61 {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

._playOverlay_g7qmx_73 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

._videoCard_g7qmx_29:hover ._playOverlay_g7qmx_73 {
    opacity: 0.9;
}

._info_g7qmx_87 {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._title_g7qmx_94 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #e8eaed;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

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

._channel_g7qmx_113 {
    font-size: 13px;
    color: #9aa0a6;
    font-weight: 500;
}

._stats_g7qmx_119 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9aa0a6;
}

._views_g7qmx_127,
._date_g7qmx_128 {
    display: flex;
    align-items: center;
    gap: 4px;
}

._separator_g7qmx_134 {
    color: #5f6368;
}

._externalIcon_g7qmx_138 {
    position: absolute;
    top: 12px;
    right: 12px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

._videoCard_g7qmx_29:hover ._externalIcon_g7qmx_138 {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    ._grid_g7qmx_23 {
        grid-template-columns: 1fr;
    }

    ._title_g7qmx_94 {
        font-size: 13px;
    }
}._container_156ey_1 {
    margin: 20px 0;
}

._header_156ey_5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

._headerIcon_156ey_12 {
    color: #1976d2;
}

._headerTitle_156ey_16 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #e8eaed;
}

._grid_156ey_23 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

._newsCard_156ey_29 {
    position: relative;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    gap: 12px;
}

._newsCard_156ey_29:hover {
    background: #222;
    border-color: #1976d2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
}

._thumbnailWrapper_156ey_50 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #2a2a2a;
}

._thumbnail_156ey_50 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

._title_156ey_73 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #e8eaed;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

._meta_156ey_86 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9aa0a6;
    margin-top: auto;
}

._source_156ey_95 {
    color: #8ab4f8;
    font-weight: 500;
}

._separator_156ey_100 {
    color: #5f6368;
}

._date_156ey_104 {
    display: flex;
    align-items: center;
    gap: 4px;
}

._externalIcon_156ey_110 {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #9aa0a6;
    opacity: 0;
    transition: opacity 0.2s ease;
}

._newsCard_156ey_29:hover ._externalIcon_156ey_110 {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    ._grid_156ey_23 {
        grid-template-columns: 1fr;
    }

    ._newsCard_156ey_29 {
        flex-direction: column;
    }

    ._thumbnailWrapper_156ey_50 {
        width: 100%;
        height: 150px;
    }

    ._title_156ey_73 {
        font-size: 13px;
    }
}/* RestaurantCard.module.css */

/* ── 카드 컨테이너 ───────────────────────────────── */
._container_11b4u_4 {
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1.2rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ── 헤더 ────────────────────────────────────────── */
._header_11b4u_15 {
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    display: flex;
    align-items: center;
    gap: 8px;
}

._headerIcon_11b4u_23 {
    color: #19C37D;
    flex-shrink: 0;
}

._headerTitle_11b4u_28 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e8e8e8);
    flex: 1;
    margin: 0;
}

._headerBadge_11b4u_36 {
    font-size: 12px;
    color: var(--text-secondary, #888);
    display: flex;
    align-items: center;
    gap: 4px;
}

._headerBadgeImg_11b4u_44 {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

/* ── 장소 행 ─────────────────────────────────────── */
._item_11b4u_51 {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
    cursor: pointer;
}

._item_11b4u_51:last-child {
    border-bottom: none;
}

/* 썸네일 */
._thumbnailLink_11b4u_63 {
    flex-shrink: 0;
    display: block;
}

._thumbnail_11b4u_63 {
    width: 68px;
    height: 100%;
    min-height: 72px;
    object-fit: cover;
    display: block;
}

/* 텍스트 블록 */
._textLink_11b4u_77 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 11px 14px;
    text-decoration: none;
    color: inherit;
    gap: 4px;
    transition: background 0.15s;
}

._textLink_11b4u_77:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
}

/* 이름 행: 번호 + 이름 + 카테고리 + 화살표 */
._nameRow_11b4u_93 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._index_11b4u_99 {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
    color: var(--text-secondary, #888);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._indexFirst_11b4u_113 {
    background: #19C37D;
    color: #fff;
}

._name_11b4u_93 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e8e8e8);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._categoryBadge_11b4u_128 {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(25, 195, 125, 0.12);
    color: #19C37D;
    flex-shrink: 0;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._chevron_11b4u_141 {
    color: var(--text-secondary, #666);
    flex-shrink: 0;
}

/* 주소 + 전화 행 */
._metaRow_11b4u_147 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 30px;
}

._address_11b4u_154 {
    font-size: 12px;
    color: var(--text-secondary, #888);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._phone_11b4u_163 {
    font-size: 12px;
    color: #19C37D;
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── 풋터 ────────────────────────────────────────── */
._footer_11b4u_174 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    font-size: 13px;
    font-weight: 500;
    color: #19C37D;
    text-decoration: none;
    transition: background 0.15s;
}

._footer_11b4u_174:hover {
    background: rgba(25, 195, 125, 0.06);
}/*
 * RouteCard.module.css
 * 테마: CSS 변수 기반 (variables.css 공유 토큰 사용)
 * --card-bg / --text-primary / --text-secondary / --text-tertiary
 * --border-subtle / --bg-secondary / --bg-tertiary
 * 다크(기본) + .light-theme 자동 대응
 */

/* ── 카드 컨테이너 ── */
._card_txhph_10 {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    margin: 12px 0;
    font-family: var(--font-sans, -apple-system, sans-serif);
    color: var(--text-primary);
}

/* ── 헤더 (출발/도착) ── */
._header_txhph_21 {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

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

._endpointGroup_txhph_32 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

._endpointText_txhph_40 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._pinGreen_txhph_49 {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #03C75A;
    flex-shrink: 0;
}

._pinRed_txhph_57 {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF4800;
    flex-shrink: 0;
}

._swap_txhph_65 {
    font-size: 14px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ── 모드 탭 ── */
._modeTabs_txhph_72 {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
}

._modeTab_txhph_72 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0 7px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-size: 13px;
}

._modeTabActive_txhph_93 {
    color: #03C75A;
    border-bottom-color: #03C75A;
}

._modeLabel_txhph_98 {
    font-size: 11px;
    font-weight: 600;
}

/* ── 경로 목록 공통 ── */
._routeList_txhph_104 {
    padding: 0;
}

._empty_txhph_108 {
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ── 자동차 경로 행 (클릭 가능) ── */
._carRow_txhph_116 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.1s;
}

._carRow_txhph_116:hover {
    background: var(--bg-secondary);
}

._carRow_txhph_116:last-child {
    border-bottom: none;
}

._routeNum_txhph_136 {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #03C75A;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

._carBody_txhph_151 {
    flex: 1;
    min-width: 0;
}

._carName_txhph_156 {
    font-size: 12px;
    font-weight: 600;
    color: #03C75A;
    margin-bottom: 2px;
}

._carTime_txhph_163 {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

._bigTime_txhph_169 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

._dist_txhph_175 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0.75;
}

._carFees_txhph_182 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

._carFees_txhph_182 span::before {
    content: '·';
    margin-right: 4px;
    color: var(--border-focus);
}

._carFees_txhph_182 span:first-child::before {
    content: '';
    margin-right: 0;
}

._arrowRight_txhph_202 {
    font-size: 18px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    align-self: center;
    transition: color 0.15s;
}

._carRow_txhph_116:hover ._arrowRight_txhph_202 {
    color: #03C75A;
}

/* ── 대중교통 노선 뱃지 ── */
._legRow_txhph_215 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
}

._legBadge_txhph_223 {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

._legArrow_txhph_233 {
    font-size: 13px;
    color: var(--text-tertiary);
}

._transferBadge_txhph_238 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    padding: 2px 7px;
    border-radius: 4px;
}

/* ── 대중교통 로딩 ── */
._transitLoading_txhph_249 {
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
    animation: _pulse_txhph_1 1.4s ease-in-out infinite;
}

@keyframes _pulse_txhph_1 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── 대중교통 직링크 박스 ── */
._transitLinkBox_txhph_270 {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
}

._transitLinkDesc_txhph_279 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

._transitLinkBtn_txhph_287 {
    display: inline-block;
    padding: 10px 28px;
    background: #03C75A;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

._transitLinkBtn_txhph_287:hover {
    background: #02a94e;
    transform: translateY(-1px);
}

/* ── 하단 링크 ── */
._footer_txhph_305 {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: #03C75A;
    text-decoration: none;
    border-top: 1px solid var(--border-subtle);
    transition: background 0.1s;
}

._footer_txhph_305:hover {
    background: var(--bg-secondary);
}

/* ── ODsay 출처 명시 ── */
._transitDisclaimer_txhph_321 {
    padding: 10px 14px;
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
    border-top: 1px dotted var(--border-subtle);
    background: var(--bg-secondary);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* ── 흐르는 카운트다운 위젯 애니메이션 ── */
._flowingBarContainer_txhph_333 {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    margin-top: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

._flowingBar_txhph_333 {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #03C75A, transparent);
    border-radius: 3px;
    animation: _flowRight_txhph_1 2s infinite linear;
}

@keyframes _flowRight_txhph_1 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

._activeArrival_txhph_357 {
    font-size: 12px;
    color: #03C75A;
    font-weight: 700;
    margin-left: auto;
    animation: _glowPulse_txhph_1 1.5s infinite alternate;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes _glowPulse_txhph_1 {
    0% { opacity: 0.6; }
    100% { opacity: 1; text-shadow: 0 0 8px rgba(3,199,90,0.4); }
}._widgetContainer_1o8gd_1 {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08),
                0 4px 12px rgba(46, 196, 182, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

._widgetContainer_1o8gd_1._appear_1o8gd_18 {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
._header_1o8gd_24 {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

._iconPulse_1o8gd_30 {
    position: relative;
    width: 36px;
    height: 36px;
    background: #e6f9f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

._pulseRing_1o8gd_42 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: #2EC4B6;
    border-radius: 50%;
    z-index: -1;
    animation: _medicalPulse_1o8gd_1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

._headerIcon_1o8gd_55 {
    font-size: 1.25rem;
    color: #2EC4B6;
}

._headerText_1o8gd_60 {
    display: flex;
    flex-direction: column;
}

._title_1o8gd_65 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

._subtitle_1o8gd_72 {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.125rem;
}

/* List Container */
._listContainer_1o8gd_79 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual Card */
._card_1o8gd_86 {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    border: 1px solid rgba(0,0,0,0.03);
}

._cardInfo_1o8gd_96 {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

._cardTitleLine_1o8gd_102 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

._cardName_1o8gd_108 {
    font-size: 1rem;
    font-weight: 700;
    color: #2d3748;
}

._category_1o8gd_114 {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: rgba(46, 196, 182, 0.1);
    color: #2EC4B6;
}

._cardAddress_1o8gd_123 {
    font-size: 0.8rem;
    color: #718096;
    line-height: 1.3;
}

/* Actions */
._cardActions_1o8gd_130 {
    display: flex;
    gap: 0.5rem;
}

._actionButton_1o8gd_135 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border-radius: 8px;
    background: #2EC4B6;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

._actionButton_1o8gd_135:active {
    transform: scale(0.97);
}

._actionMap_1o8gd_155 {
    background: white;
    color: #2EC4B6;
    border: 1px solid #2EC4B6;
}

/* Footer */
._footer_1o8gd_162 {
    text-align: center;
    font-size: 0.8rem;
    color: #a0aec0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.04);
}

._footer_1o8gd_162 span {
    font-weight: 700;
    color: #e53e3e;
}

@keyframes _medicalPulse_1o8gd_1 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}
._container_1f3nv_1 {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a0505 0%, #3a0a0a 100%);
    border: 2px solid #ea4335;
    border-radius: 24px;
    padding: 24px;
    color: white;
    box-shadow: 0 10px 40px rgba(234, 67, 53, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    position: relative;
    overflow: hidden;
    animation: _emergencyPulse_1f3nv_1 2s infinite ease-in-out;
}

@keyframes _emergencyPulse_1f3nv_1 {
    0% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.4); border-color: #ea4335; }
    70% { box-shadow: 0 0 0 15px rgba(234, 67, 53, 0); border-color: #ff6b6b; }
    100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0); border-color: #ea4335; }
}

._header_1f3nv_25 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

._alertIcon_1f3nv_33 {
    color: #ff6b6b;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6));
}

._title_1f3nv_39 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #ff6b6b;
    letter-spacing: -0.5px;
}

._subtitle_1f3nv_47 {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.4;
}

._locationCard_1f3nv_54 {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

._locationHeader_1f3nv_62 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #ffb4a9;
    font-weight: 600;
    margin-bottom: 8px;
}

._pinIcon_1f3nv_72 {
    color: #ffb4a9;
}

._addressBox_1f3nv_76 {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
}

._addressText_1f3nv_82 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: white;
    word-break: keep-all;
}

._coords_1f3nv_90 {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-family: monospace;
}

._actionGrid_1f3nv_97 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

._callBtn_1f3nv_104 {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

._callBtn_1f3nv_104:active {
    transform: scale(0.98);
}

._primaryBtn_1f3nv_121 {
    background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4);
}

._secondaryBtn_1f3nv_127 {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

._secondaryBtn_1f3nv_127:hover {
    background: rgba(255, 255, 255, 0.15);
}

._btnIcon_1f3nv_137 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
}

._btnText_1f3nv_147 {
    display: flex;
    flex-direction: column;
}

._btnTitle_1f3nv_152 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

._btnDesc_1f3nv_158 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

._footer_1f3nv_163 {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* Compact layout for mobile */
@media (max-width: 480px) {
    ._container_1f3nv_1 {
        padding: 16px;
    }
    ._header_1f3nv_25 {
        margin-bottom: 16px;
    }
    ._alertIcon_1f3nv_33 {
        margin-bottom: 8px;
    }
    ._title_1f3nv_39 {
        font-size: 20px;
    }
    ._subtitle_1f3nv_47 {
        font-size: 13px;
    }
    ._locationCard_1f3nv_54 {
        padding: 12px;
        margin-bottom: 16px;
    }
    ._actionGrid_1f3nv_97 {
        gap: 8px;
        margin-bottom: 16px;
    }
    ._callBtn_1f3nv_104 {
        padding: 12px;
    }
    ._btnIcon_1f3nv_137 {
        width: 40px;
        height: 40px;
    }
    ._btnTitle_1f3nv_152 {
        font-size: 16px;
    }
    ._btnDesc_1f3nv_158 {
        font-size: 12px;
    }
}
/* Gemini Ansimssi 2.0 - Internal Component Styles */
/* Typography Override for Markdown */
/* .sectionContainer - fadeIn animation disabled to prevent white flash at answer action bar */

/* Header (Thinking Process etc) */
._sectionHeader_1hake_6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

._thinkingProcess_1hake_13 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    /* Subtle pills */
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--gemini-text-secondary);
    /* From ThreadView */
    cursor: pointer;
    transition: all 0.2s;
}

._thinkingProcess_1hake_13:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gemini-text-primary);
}

/* MARKDOWN STYLES (The Core) */
._answerContent_1hake_34 {
    font-size: 1rem;
    /* Standardized body size */
    line-height: 1.7;
    /* Optimal readability */
    color: var(--text-primary);
}

._answerContent_1hake_34 hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1.5rem 0;
}

._answerContent_1hake_34 strong {
    font-weight: 600;
    /* Balanced bold */
    color: var(--text-primary);
}

/* Lists - Key Gemini Trait */
._answerContent_1hake_34 ul,
._answerContent_1hake_34 ol {
    margin: 1rem 0;
    padding-left: 0;
    list-style: none;
}

._answerContent_1hake_34 li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.6;
}

/* Custom Bullet used in Gemini */
._answerContent_1hake_34 ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--gemini-text-secondary);
    font-weight: bold;
}

/* Numbered List - Bold Numbers */
._answerContent_1hake_34 ol {
    counter-reset: item;
}

._answerContent_1hake_34 ol li {
    padding-left: 0;
}

._answerContent_1hake_34 ol li strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
    /* Slightly larger than body */
    color: var(--text-primary);
    font-weight: 700;
}

/* Headings - Adjusted for professional hierarchy (No more huge text) */
._answerContent_1hake_34 h1 {
    font-size: 1.3rem;
    /* Reduced from default */
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

._answerContent_1hake_34 h2 {
    font-size: 1.2rem;
    /* Subtle section header */
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary);
}

._answerContent_1hake_34 h3 {
    font-size: 1.1rem;
    /* Just above body size */
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid #60A5FA;
    /* Refined Blue Accent */
    padding-left: 0.8rem;
}

/* Note / Callout Block */
/* Note / Callout Block - Gemini Style (Text focused, no box) */
._doctorCallout_1hake_128,
blockquote {
    background: transparent;
    border: none;
    padding: 1rem 0;
    margin: 2rem 0;
    position: relative;
}

/* Add an icon via pseudo-element */
._doctorCallout_1hake_128::before {
    content: '✨';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.2rem;
    color: var(--gemini-text-primary);
    /* Removed absolute positioning */
    position: static;
    background: transparent;
}

._answerContent_1hake_34 code {
    background: #2C2C2E;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
    color: #A8C7FA;
}

/* Process Timeline (Hidden details) */
._processTimeline_1hake_159 {
    background: #1E1F20;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    animation: _fadeIn_1hake_1 0.3s;
}

._stepHeader_1hake_167 {
    color: var(--gemini-text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

._sourceGrid_1hake_173 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

._sourceChip_1hake_179 {
    background: #2C2C2E;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--gemini-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

._sourceChip_1hake_179 img {
    width: 14px;
    height: 14px;
    border-radius: 2px;
}

/* Gemini Action Row */
._answerActions_1hake_198 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    /* Subtle separator */
}

._iconBtn_1hake_208 {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

._iconBtn_1hake_208:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #F0F4F8;
}

/* =========================================
   Gemini Ansimssi Persona Styles (2026-01-10)
   ========================================= */

/* 1. Top Disclaimer Banner (Gray Box) */
._disclaimerBanner_1hake_231 {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background-color: var(--bg-secondary);
    /* Theme Adapted */
    color: var(--text-secondary);
    /* Theme Adapted */
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    /* Explicitly smaller than body */
    line-height: 1.5;
}

._disclaimerIcon_1hake_248 {
    flex-shrink: 0;
    margin-top: 2px;
}

/* 2. Answer Header Icon (Ansimssi Bubble) */
._answerHeader_1hake_254 {
    margin-bottom: 0.5rem;
    /* Reduced margin */
}

._mainIcon_1hake_259 {
    width: 32px;
    height: 32px;
    /* No border radius needed for PNG with transparency, or circle if needed */
    object-fit: contain;
    animation: _bounceIn_1hake_1 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes _bounceIn_1hake_1 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 3. Bottom Medical Caution (Custom Shield) */
._medicalCaution_1hake_280 {
    margin-top: 2rem;
    padding: 1.2rem;
    background: transparent;
    /* Clean look */
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

._cautionHeader_1hake_291 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    color: #F59E0B;
    /* Warning Amber */
    font-weight: 700;
    font-size: 1.05rem;
}

._cautionBody_1hake_302 {
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding-left: 2rem;
    /* Indent to align with text */
    line-height: 1.6;
}

._cautionBody_1hake_302 ul {
    margin: 0.5rem 0;
}

._cautionBody_1hake_302 li {
    margin-bottom: 0.4rem;
}._container_qugff_1 {
    margin: 4px 0 8px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

._label_qugff_6 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 4px 6px;
    margin: 0;
}

._list_qugff_16 {
    display: flex;
    flex-direction: column;
}

._item_qugff_21 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    border-radius: 0;
}

._item_qugff_21:last-child {
    border-bottom: none;
}

._item_qugff_21:hover {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

._item_qugff_21:hover ._arrow_qugff_46 {
    transform: translateX(2px);
    opacity: 1;
}

._text_qugff_51 {
    font-size: 15px;
    color: var(--text-primary, #e5e7eb);
    line-height: 1.4;
    flex: 1;
}

._arrow_qugff_46 {
    flex-shrink: 0;
    color: var(--text-tertiary, #6b7280);
    opacity: 0.6;
    transition: transform 0.15s, opacity 0.15s;
}/* CompactSourceList.module.css */
/* Conforms to Ansimssi Design System Variables */

._sourceList_ktu3t_4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

._sourceItem_ktu3t_12 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.5rem 1.25rem 1rem 1.25rem;
    transition: opacity 0.2s, background-color 0.2s;
}

._sourceItem_ktu3t_12:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

._sourceItem_ktu3t_12:hover {
    opacity: 0.8;
}

/* Row 1: Icon + Domain */
._sourceHeader_ktu3t_33 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

._sourceFavicon_ktu3t_39 {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}

._sourceDomain_ktu3t_46 {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Row 2: Title */
._sourceTitle_ktu3t_53 {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;

    /* Multi-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row 3: Snippet */
._sourceSnippet_ktu3t_68 {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    line-height: 1.5;

    /* Multi-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark Mode Support - Reinforced */
.dark-theme ._sourceList_ktu3t_4,
[data-theme='dark'] ._sourceList_ktu3t_4 {
    background: transparent;
}

.dark-theme ._sourceItem_ktu3t_12,
[data-theme='dark'] ._sourceItem_ktu3t_12 {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-theme ._sourceTitle_ktu3t_53,
[data-theme='dark'] ._sourceTitle_ktu3t_53 {
    color: #f3f4f6;
    /* White text for dark mode */
}

.dark-theme ._sourceDomain_ktu3t_46,
[data-theme='dark'] ._sourceDomain_ktu3t_46 {
    color: #9ca3af;
    /* Light gray for domain */
}

.dark-theme ._sourceSnippet_ktu3t_68,
[data-theme='dark'] ._sourceSnippet_ktu3t_68 {
    color: #9ca3af;
    /* Light gray for snippet */
}/* [PWA FIX] Root Wrapper for SearchBar + Disclaimer vertical stacking */
._searchBarRoot_1c5b6_2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

/* [PWA FIX] Wrapper to hold SearchBox + Text */
._outerWrapper_1c5b6_12 {
    width: 100%;
    max-width: 750px;
    /* [Plan AL] 네이티브 앱 대응 퍼블렉시티 스타일 플로팅 박스를 위한 여백 부여 */
    padding: 0 16px;
    padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
    display: flex;
    flex-direction: column !important;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 100;
    pointer-events: none;
}

._searchContainer_1c5b6_28 {
    width: 100%;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 151;
    pointer-events: auto;
}

/* 새로 추가된 더블 윙 레이아웃의 최상단 컨테이너 */
._outerSearchRow_1c5b6_39 {
    display: flex;
    flex-direction: row;
    align-items: center; /* 수평 중앙 정렬 (요청사항 반영) */
    gap: 8px;
    width: 100%;
}

._leftWing_1c5b6_47, ._rightWing_1c5b6_47 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수평 중앙 정렬과 균형을 맞춤 */
    flex-shrink: 0;
    padding-bottom: 0px; /* 불필요한 하단 패딩 제거 */
}

/* 중앙 알약(Pill) 컨테이너 (이전의 전체 검색바 역할 대체) */
._inputWrapper_1c5b6_56 {
    flex-grow: 1; /* 가로 공간 모두 차지 */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 36px;
    padding: 8px 12px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: row; /* 핵심: 가로 배치 */
    align-items: center; /* 수평 중앙 정렬 (요청사항 반영) */
    gap: 8px;
    transition: all 0.2s ease;
}

/* 
 * [LEGACY REMOVED]
 * The old rules that removed border-radii on .inputWrapper when suggestions were active
 * have been removed because the "Double Wing" layout requires the search pill 
 * to remain completely separate from the new "Floating Card" suggestion menu.
 */

/* 중앙 입력 영역 컨테이너 (텍스트 영역이 차지하는 비율 극대화) */
._centerInput_1c5b6_78 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* flex 자식 요소 말림 방지 */
}

/* Disclaimer Text - below search bar */
._disclaimerText_1c5b6_87 {
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin-top: 8px;
    line-height: 1.4;
    pointer-events: auto;
}

._disclaimerText_1c5b6_87 a {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.2s;
}

._disclaimerText_1c5b6_87 a:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* Tablet/PC: Larger font */
@media (min-width: 801px) {
    ._disclaimerText_1c5b6_87 {
        font-size: 0.8rem;
        margin-top: 12px;
    }
}

._textarea_1c5b6_116 {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-family: var(--font-sans);
    resize: none;
    outline: none;
    max-height: 200px;
    min-height: 28px;
    line-height: 1.5;
    padding: 6px 4px; /* 약간 여백 제공 */
}

/* Perplexity-style Focus Pill */
._triggerButton_1c5b6_132,
._focusButton_1c5b6_133 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    /* Subtle background */
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0 0.6rem 0 0.5rem;
    height: 38px; /* 다른 모바일 원형 버튼(38px) 혹은 데스크탑(40px)과 높이를 완벽 일치시키기 위해 고정 높이 사용 (데스크탑/모바일 미디어쿼리에서 조정) */
    border-radius: 19px; /* 높이의 절반으로 완벽한 알약 형태 유지 */
    transition: all 0.2s ease;
}

._triggerButton_1c5b6_132:hover,
._triggerButton_1c5b6_132._active_1c5b6_151,
._focusButton_1c5b6_133:hover,
._focusButton_1c5b6_133._active_1c5b6_151 {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

._modeLabel_1c5b6_159 {
    display: none;
    /* Hidden on Mobile */
}

@media (min-width: 600px) {
    ._modeLabel_1c5b6_159 {
        display: block;
        font-size: 0.85rem;
        white-space: nowrap;
        color: var(--text-primary);
        font-weight: 500;
    }
}

/* Perplexity-Style Integrated Suggestions (Now Floating Card - Plan BA) */
._suggestionMenu_1c5b6_175 {
    position: absolute;
    top: calc(100% + 8px); /* Gap instead of overlap */
    left: 0;
    right: 0;

    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 24px !important; /* Always fully rounded */

    padding: 0.8rem 0.5rem;
    z-index: 110;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.15); /* Adds depth to the floating card */

    /* Viewport-based height to prevent overflow */
    max-height: 40vh;
    overflow-y: auto;
}



._suggestionItem_1c5b6_196 {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* Space between icon and text */
    transition: background-color 0.15s ease;
}

._suggestionItem_1c5b6_196:hover {
    background-color: var(--bg-tertiary);
}

._headerIcon_1c5b6_213 {
    color: var(--text-tertiary);
    min-width: 18px;
    /* Consistent width */
    stroke-width: 2px;
}

._suggestionHighlight_1c5b6_220 {
    color: var(--text-primary);
    font-weight: 600;
}

/* Focus Menu (Clean) */
._focusOverlay_1c5b6_226 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    z-index: 2147483646 !important;
    /* Click-through when no popup, clickable when popup open */
    pointer-events: auto;
    /* iOS WebKit 강제 터치 인식용 트릭 (Plan AO) */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

._focusMenu_1c5b6_241 {
    position: absolute;
    top: 120%;
    left: 0;
    width: 320px;
    /* Wider for comfortable reading */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 0.8rem;
    z-index: 101;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._focusHeader_1c5b6_258 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.8rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

._divider_1c5b6_270 {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 4px 8px 8px 8px;
    opacity: 0.5;
}

._focusItem_1c5b6_277 {
    padding: 0.8rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

._focusItem_1c5b6_277:hover {
    background-color: var(--bg-tertiary);
}

._itemMain_1c5b6_288 {
    display: flex;
    align-items: flex-start;
    /* Align top for multi-line text */
    gap: 12px;
}

._textContainer_1c5b6_295 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    /* Take remaining space */
}

._itemLabel_1c5b6_303 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

._itemSub_1c5b6_310 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: keep-all;
    /* Prevent awkward Korean breaks */
}

._checkIcon_1c5b6_318 {
    color: var(--accent-primary);
    flex-shrink: 0;
}

._plusButton_1c5b6_323,
._voiceChatButton_1c5b6_324,
._micButton_1c5b6_325,
._submitButton_1c5b6_326 {
    position: relative; /* 자식 SVG 및 가상 요소(Hitbox)의 포지셔닝 기준점 */
    width: 40px; /* 데스크탑에서 모든 아이콘 40px로 고정 크기 통일 */
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* iOS 300ms 딜레이 제거 및 터치 반응성 극대화 */
}

/* [iOS 터치 불량 해결] 보이지 않는 가상의 터치 영역(Hitbox) 확장 */
._voiceChatButton_1c5b6_324::before,
._micButton_1c5b6_325::before,
._submitButton_1c5b6_326::before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    background: transparent;
    border-radius: 50%;
    z-index: 1; /* SVG 아이콘과 버튼 표면 위/아래 사이 어딘가이나 터치 인터셉트용 */
}

/* Removed pointer-events: none for SVGs to restore natural click targets */

/* 우측 윙 전용 불투명 코팅 (투명도 버그 방지) - 구조는 좌측 윙(.actionButton)의 표준 크기(36px) 유지 */
._liveStandardButton_1c5b6_362 {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Active Listening State for Mic */
._listening_1c5b6_370 {
    background-color: var(--accent-error, #ef4444) !important;
    color: white !important;
    animation: _pulseMic_1c5b6_1 1.5s infinite ease-in-out;
}

/* Active Submit Button (Green - User Requested) */
._submitButton_1c5b6_326._active_1c5b6_151 {
    background-color: var(--accent-success, #10b981) !important;
    /* Green */
    color: white !important;
}


._plusButton_1c5b6_323:hover,
._voiceChatButton_1c5b6_324:hover,
._micButton_1c5b6_325:hover,
._submitButton_1c5b6_326:hover {
    background-color: var(--bg-tertiary-hover);
    filter: brightness(1.1);
}

/* [GLOBAL LAYOUT] Action Bar & Button Groups */
/* .actionBar was removed. .leftActions and .rightActions are nested in inputWrapper directly now */
._leftActions_1c5b6_393 {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 좀 더 타이트하게 */
    flex-shrink: 0;
}

._rightActions_1c5b6_393 {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 좀 더 타이트하게 */
    flex-shrink: 0;
}

/* Mobile Tweaks */
@media (max-width: 500px) {
    ._searchContainer_1c5b6_28 {
        border-radius: 28px;
        padding: 0;
    }

    ._outerWrapper_1c5b6_12 {
        max-width: 98%;
        padding: 0 8px;
        /* [Round 6 FIX] 안드로이드 엣지-투-엣지 네이티브 앱 환경에서 하단 OS 제스처(스와이프 바) 영역과의 터치 충돌(Intercept)을 피하기 위해 리프트 업 */
        padding-bottom: max(env(safe-area-inset-bottom, 28px), 28px) !important;
    }

    ._outerSearchRow_1c5b6_39 {
        gap: 6px; /* 모바일에서 날개와 알약 사이의 간격 축소 */
    }

    ._inputWrapper_1c5b6_56 {
        padding: 6px 8px; /* 모바일 폭 확장을 위한 타이트한 패딩 */
        gap: 4px;
    }

    ._micButton_1c5b6_325,
    ._submitButton_1c5b6_326,
    ._plusButton_1c5b6_323 {
        width: 36px; /* 일반 액션 버튼 */
        height: 36px;
    }


    ._focusButton_1c5b6_133 {
        height: 36px;
        border-radius: 18px;
    }

    ._leftWing_1c5b6_47, ._rightWing_1c5b6_47 {
        padding-bottom: 0px;
        display: flex;
        align-items: center;
    }
}

._plusButton_1c5b6_323:hover,
._plusButton_1c5b6_323._active_1c5b6_151 {
    background-color: var(--bg-tertiary-hover);
    /* darken slightly */
}

/* Rotate ONLY the icon, not the button (fixes tooltip rotation) */
/* [USER REQUEST] Removed 90deg rotation on click */
/* .plusButton:hover svg,
.plusButton.active svg {
    transform: rotate(90deg);
    transition: transform 0.2s;
} */

._spin360_1c5b6_465 svg {
    animation: _spin_1c5b6_465 2s linear infinite;
    color: var(--accent-primary) !important;
}

@keyframes _spin_1c5b6_465 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* [FIX] Tooltip Alignment for Leftmost Button */
/* Removed specific override as general tooltip is now left-aligned */
/* .plusButton.hasTooltip::after {
    left: 0;
    transform: none;
} */

/* Attach Menu Wrapper */
._attachWrapper_1c5b6_488 {
    position: relative;
    display: inline-block;
    z-index: 105;
}

/* Attach Menu Dropdown */
._attachMenu_1c5b6_495 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    /* Reduced width for 3 concise items */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 0.8rem;
    z-index: 2005;
    /* High z-index to stay above search bar */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: _slideDown_1c5b6_1 0.2s ease-out;
}

._attachMenuDropUp_1c5b6_515 {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Specific subclass for Camera Menu (Left Aligned now) */
/* Specific subclass for Camera Menu (Left Aligned now) - Desktop Only Override */
@media (min-width: 1025px) {
    ._cameraMenu_1c5b6_525 {
        left: 0 !important;
        right: auto !important;
        transform-origin: top left;
        width: 200px !important;
    }
}


/* [FIX] Mobile Attach Menu: Force upward expansion */
/* [FIX] Mobile Attach Menu: Block removed to allow specific Bottom Sheet styles (lines 88+) to take precedence. */

@keyframes _slideDown_1c5b6_1 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes _slideUp_1c5b6_1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

._attachItem_1c5b6_561 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-primary);
    /* Dynamic Theme Support */
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

._attachItem_1c5b6_561:hover {
    background-color: var(--bg-tertiary);
    /* Dynamic Theme Support */
}

._attachIcon_1c5b6_579 {
    color: var(--text-secondary);
    opacity: 0.8;
}

/* File Preview */
._filePreview_1c5b6_585 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-tertiary);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-subtle);
}

._fileInfo_1c5b6_596 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    overflow: hidden;
}

._fileIcon_1c5b6_605 {
    color: var(--accent-primary);
    flex-shrink: 0;
}

._fileName_1c5b6_610 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-weight: 500;
}

._fileSize_1c5b6_618 {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

._removeFileButton_1c5b6_624 {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

._removeFileButton_1c5b6_624:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--text-error);
}

._spin_1c5b6_465 {
    animation: _spin_1c5b6_465 1s linear infinite;
}

@keyframes _spin_1c5b6_465 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mobile Backdrop for Dismissal */
._backdrop_1c5b6_657 {
    display: none;
}

@media (max-width: 600px) {
    ._backdrop_1c5b6_657 {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        /* Dim background */
        z-index: 999;
        /* Below SearchBar (1000) */
        touch-action: none;
        /* Prevent scroll */
    }
}

/* -------------------------------------------------------------------------- */
/* Mobile Gemini Style Redesign (Fixed Bottom)                                */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Mobile Gemini Style Redesign (Two-Row Sheet Layout) -> Refactored to One Line! */
/* -------------------------------------------------------------------------- */
@media (max-width: 800px) {
    ._searchContainer_1c5b6_28 {
        /* [GEMINI STYLE REVERTED] Flush to bottom edge */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        z-index: 1000 !important;
        
        /* [CRITICAL FIX] width 100% 초과분(오버플로우)을 방지하는 박스 전역 통제 */
        box-sizing: border-box !important;

        /* Container itself should be transparent to let the wings float */
        border-radius: 0 !important;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        
        /* Padding: add safe-area inset to the bottom padding to push text up */
        /* [FIX] 우측 Edge Swipe 무시 존(20px) 탈출을 위해 8px의 우측 이탈거리를 추가 확보합니다. */
        padding: 0.5rem calc(var(--safe-edge-right) + 8px) 0.5rem var(--safe-edge-left) !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 12px)) !important;
    }

    /* Remove the bleed pseudo-element */
    ._searchContainer_1c5b6_28::after {
        display: none;
    }

    /* [KEYBOARD FIX] When keyboard opens, keep floating but maybe tighter */
    body.keyboard-open ._searchContainer_1c5b6_28 {
        margin-bottom: 4px !important;
        padding-bottom: 8px !important;
    }

    /* The inputWrapper (Center Pill) gets the styling on mobile to isolate it from the wings */
    ._inputWrapper_1c5b6_56 {
        flex-grow: 1;
        width: auto;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 28px !important;
        padding: 6px 12px !important;
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center; /* 수평 중앙 정렬 */
        gap: 6px; /* Mobile spacing */
        background-color: var(--bg-secondary) !important;
    }

    ._inputWrapper_1c5b6_56:focus-within {
        border-color: var(--accent-primary) !important;
    }

    ._textarea_1c5b6_116 {
        font-size: 0.95rem;
        /* Optimized for mobile density */
        padding: 4px 0;
        color: var(--text-primary);
        min-height: 24px;
        line-height: 1.4;
        /* [SCROLL FIX] Allow vertical scrolling of text despite parent lock */
        touch-action: pan-y;
    }

    ._textarea_1c5b6_116::placeholder {
        color: var(--text-tertiary);
        font-size: 0.95rem;
    }

    /* Button Styling to match Dark Theme */
    ._plusButton_1c5b6_323 {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--bg-tertiary);
        /* Circle background for buttons */
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ._actionButton_1c5b6_361 {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ._actionButton_1c5b6_361:hover {
        background-color: var(--bg-tertiary);
        filter: brightness(1.2);
    }

    ._submitButton_1c5b6_326 {
        width: 36px;
        height: 36px;
    }

    /* voiceChatButton rules overridden by line 421 block above */

    /* Show Focus/Search button on Mobile now (User requested "Our Icons") */
    ._focusWrapper_1c5b6_797 {
        display: inline-block;
        /* Restore Focus button */
    }

    ._actionText_1c5b6_802 {
        display: none;
        /* Icon only */
    }

    /* Legacy attachMenu block removed to allow Unified Bottom Sheet styles */

    /* Suggestion Menu - Mobile Integration (Floating Card) */
    ._suggestionMenu_1c5b6_175 {
        top: auto;
        bottom: calc(100% + 8px); /* Float above the search bar */
        left: 0;
        width: 100%;
        border-radius: 24px !important; /* Fully rounded floating card */
        border: 1px solid var(--border-subtle);
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.15); /* Shadow for popup effect */
        padding: 0.8rem 0.5rem;
    }
}

@keyframes _slideUpSheet_1c5b6_1 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* -------------------------------------------------------------------------- */
/* Camera Action Sheet (iOS Style)                                            */
/* -------------------------------------------------------------------------- */

/* Sub-menu Styling for Accordion Effect */
._attachSubMenu_1c5b6_839 {
    background-color: rgba(0, 0, 0, 0.03);
    /* Slight contrast */
    border-radius: 8px;
    margin: 4px 12px;
    overflow: hidden;
    animation: _slideDown_1c5b6_1 0.2s ease-out;
}

._attachSubItem_1c5b6_848 {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    color: #4b5563;
    /* Gray-600 */
    cursor: pointer;
    transition: background-color 0.2s;
    padding-left: 42px;
    /* Indent to align with text above */
    position: relative;
}

._attachSubItem_1c5b6_848:hover {
    background-color: rgba(0, 0, 0, 0.05);
    /* Gray-100 equivalent */
}

/* Light Theme overrides */
body.light-theme ._attachSubItem_1c5b6_848 {
    color: #374151;
}

body.light-theme ._attachSubItem_1c5b6_848:hover {
    background-color: #f3f4f6;
}

@keyframes _slideDown_1c5b6_1 {
    from {
        opacity: 0;
        transform: translateY(-5px);
        max-height: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 150px;
    }
}

/* [CRITICAL FIX] Mobile Bottom Sheet for Camera/Attach Menu ONLY */
/* Suggestion menu uses drop-up instead of bottom sheet */
@media (max-width: 800px) {

    /* Bottom sheet ONLY for camera and focus menus */
    ._attachMenu_1c5b6_495,
    ._attachMenu_1c5b6_495._attachMenuDropUp_1c5b6_515,
    ._focusMenu_1c5b6_241 {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;

        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;

        border-radius: 24px 24px 0 0 !important;
        background-color: var(--bg-tertiary) !important;
        /* No shadow per user feedback */

        transform: translateY(100%);
        /* Start hidden below screen */
        animation: _slideUpSheet_1c5b6_1 0.25s cubic-bezier(0.2, 0, 0, 1) forwards !important;

        z-index: 2147483647 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        border-bottom: none !important;
    }

    /* Suggestion menu: Seamlessly attached above search bar (drop-up) */
    ._suggestionMenu_1c5b6_175 {
        position: absolute !important;
        bottom: calc(100% - 1px) !important;
        /* -1px overlap for seamless connection like tablet */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;

        /* Match parent search bar width */
        width: 100% !important;
        max-width: 100% !important;

        /* Rounded top for visual polish, flat bottom for seamless connection with search bar */
        border-radius: 8px 8px 0px 0px !important;
        /* Perplexity-style: Slightly darker than search bar */
        background-color: var(--bg-tertiary) !important;
        border-top: none !important;
        /* Remove top border for seamless connection */

        /* Drop-up animation */
        animation: _menuFadeIn_1c5b6_1 0.2s ease-out forwards !important;
        transform: none !important;

        z-index: 9999 !important;
        max-height: min(300px, 40vh) !important;
        overflow-y: auto !important;

        /* Reset bottom sheet properties */
        display: block !important;
        flex-direction: column !important;
        gap: 0;
        padding: 0.5rem;
    }

    /* Re-Ensure Drag Handle is visible on top of this enforced sheet */
    ._attachMenu_1c5b6_495::before,
    ._focusMenu_1c5b6_241::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        display: block !important;
        z-index: 2147483647 !important;
    }
}

/* Pulsing Animation for Mic */
@keyframes _pulseMic_1c5b6_1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

._pulsingIcon_1c5b6_993 {
    animation: _pulseMic_1c5b6_1 1.5s infinite ease-in-out;
}

/* [DESKTOP FIX] Force Drop-up and constrained height for popups on large screens */
/* [DESKTOP FIX] Context-Aware Popup Positioning (Drop-Down by default, Drop-Up if requested) */
/* [DESKTOP/TABLET FIX] Context-Aware Popup Positioning (Covering > 600px) */
@media (min-width: 601px) {

    ._attachMenu_1c5b6_495,
    ._focusMenu_1c5b6_241,
    ._suggestionMenu_1c5b6_175 {
        position: absolute !important;
        left: 0 !important;
        min-width: 240px;
        min-width: 240px;
        max-height: min(300px, 40vh) !important;
        /* Cap height to fit small screens */
        overflow-y: auto !important;

        border-radius: 24px !important; /* Fully rounded floating card */
        box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.15); /* Re-enable shadow for floating effect */

        /* Ensure it appears above other elements */
        z-index: 9999 !important;

        /* DEFAULT: DROP DOWN (For Home/Center View) */
        top: calc(100% + 8px) !important; /* Gap instead of overlap */
        bottom: auto !important;

        /* Reset transform for slide animation */
        transform: none !important;
        animation: _menuFadeIn_1c5b6_1 0.2s ease-out forwards !important;
    }

    /* OVERRIDE: DROP UP (For Bottom/Chat View) */
    ._attachMenu_1c5b6_495._attachMenuDropUp_1c5b6_515,
    ._focusMenu_1c5b6_241._focusMenuDropUp_1c5b6_1030,
    ._suggestionMenu_1c5b6_175._suggestionMenuDropUp_1c5b6_1031 {
        top: auto !important;
        bottom: calc(100% + 8px) !important; /* Gap instead of overlap */
        border: 1px solid var(--border-subtle) !important; /* Standard border */
        border-radius: 24px !important; /* Always fully rounded */
        padding: 0.8rem 0.5rem !important;
    }

    @keyframes _menuFadeIn_1c5b6_1 {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

/* Mode Selector Pill */
._modeSelectorContainer_1c5b6_1053 {
    position: relative;
    display: flex;
    align-items: center;
}

._modeBadge_1c5b6_1059 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

._modeBadge_1c5b6_1059:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

._modeBadge_1c5b6_1059._active_1c5b6_151 {
    background: rgba(168, 199, 250, 0.15);
    /* Light Blue Tint */
    color: #A8C7FA;
    border-color: rgba(168, 199, 250, 0.3);
}

._modeBadge_1c5b6_1059._pro_1c5b6_1086 {
    background: rgba(208, 188, 255, 0.15);
    /* Purple Tint */
    color: #D0BCFF;
    border-color: rgba(208, 188, 255, 0.3);
}

._modeDropdown_1c5b6_1093 {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
    animation: _fadeIn_1c5b6_1 0.2s ease-out;
}

._modeOption_1c5b6_1111 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
}

._modeOption_1c5b6_1111:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

._modeOption_1c5b6_1111._selected_1c5b6_1132 {
    background: rgba(168, 199, 250, 0.1);
    color: #A8C7FA;
    font-weight: 600;
}._container_1gopb_1 {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--text-primary);
}

._header_1gopb_8 {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

._title_1gopb_15 {
    font-size: 2rem;
    font-weight: 600;
}

._briefingSection_1gopb_20 {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-subtle);
}

._briefingTitle_1gopb_28 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary);
}

._grid_1gopb_38 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    ._grid_1gopb_38 {
        grid-template-columns: 1fr;
    }
}

._card_1gopb_50 {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-subtle);
}

._cardTitle_1gopb_57 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

._alertItem_1gopb_65 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

._alertItem_1gopb_65:last-child {
    border-bottom: none;
}

._alertBadges_1gopb_77 {
    display: flex;
    gap: 0.5rem;
}

._badge_1gopb_82 {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

._badge_1gopb_82._orange_1gopb_89 {
    background-color: rgba(255, 165, 0, 0.2);
    color: orange;
}

._badge_1gopb_82._red_1gopb_94 {
    background-color: rgba(255, 0, 0, 0.2);
    color: red;
}

._badge_1gopb_82._blue_1gopb_99 {
    background-color: rgba(0, 0, 255, 0.2);
    color: #4DA6FF;
}

._newsItem_1gopb_104 {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-subtle);
}

._newsItem_1gopb_104:last-child {
    border-bottom: none;
}

._newsTitle_1gopb_116 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

._newsMeta_1gopb_121 {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}._container_c9rx9_1 {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 2rem;
}

._roomSection_c9rx9_7 {
    margin-bottom: 2.5rem;
}

._roomTitle_c9rx9_11 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

._deviceGrid_c9rx9_21 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

._deviceCard_c9rx9_27 {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

._deviceCard_c9rx9_27:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--border-default);
}

._deviceCard_c9rx9_27._active_c9rx9_48 {
    background-color: white;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
    border-color: var(--accent-primary);
}

._iconWrapper_c9rx9_54 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

._active_c9rx9_48 ._iconWrapper_c9rx9_54 {
    background-color: var(--accent-primary);
    color: white;
}

._deviceInfo_c9rx9_71 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

._deviceStatus_c9rx9_83 {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

._active_c9rx9_48 ._deviceStatus_c9rx9_83 {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Specific styling overrides for dark mode if needed (handled by vars generally) */
@media (prefers-color-scheme: dark) {
    ._deviceCard_c9rx9_27._active_c9rx9_48 {
        background-color: rgba(37, 99, 235, 0.1);
    }
}._overlay_tv48i_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

._modal_tv48i_16 {
    background-color: #1a1a1a;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

._title_tv48i_30 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

._closeButton_tv48i_37 {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s;
}

._closeButton_tv48i_37:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

._videoWrapper_tv48i_55 {
    width: 100%;
    aspect-ratio: 4/3;
    /* Standard webcam ratio */
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

._video_tv48i_55 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._mirrored_tv48i_75 {
    transform: scaleX(-1);
}

._errorMsg_tv48i_79 {
    color: #ef4444;
    text-align: center;
    padding: 20px;
}

._controls_tv48i_85 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

._switchButton_tv48i_93 {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

._switchButton_tv48i_93:hover {
    background: rgba(255, 255, 255, 0.2);
}

._captureButton_tv48i_111 {
    background-color: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

._captureButton_tv48i_111:active {
    transform: scale(0.95);
}

._innerCircle_tv48i_129 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: white;
    border: 4px solid #1a1a1a;
    /* Visual separation ring */
}

@media (max-width: 600px) {
    ._modal_tv48i_16 {
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
        justify-content: center;
    }

    ._videoWrapper_tv48i_55 {
        flex: 1;
        max-height: 70vh;
    }
}._card_162cf_1 {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
    position: relative;
    --widget-accent: var(--text-primary);
    /* Default accent */
}

._clickable_162cf_16:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--widget-accent);
    cursor: pointer;
}

._header_162cf_23 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

._icon_162cf_35 {
    color: var(--widget-accent);
}

._title_162cf_29 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

._content_162cf_46 {
    flex: 1;
}._dashboardGrid_1so1c_1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Make SOS and CCTV span logic tailored */
._sosCard_1so1c_10 {
    grid-column: span 1;
}

._cctvCard_1so1c_14 {
    grid-column: span 1;
    grid-row: span 2;
    /* Taller */
}

._iotCard_1so1c_20 {
    grid-column: span 2;
    /* Full width bottom */
}

@media (max-width: 768px) {
    ._dashboardGrid_1so1c_1 {
        grid-template-columns: 1fr;
    }

    ._sosCard_1so1c_10,
    ._cctvCard_1so1c_14,
    ._iotCard_1so1c_20 {
        grid-column: span 1;
        grid-row: auto;
    }
}

/* SOS Section */
._sosContent_1so1c_39 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

._sosContent_1so1c_39 p {
    color: var(--text-secondary);
    margin: 0;
}

._sosButton_1so1c_52 {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: rgba(239, 68, 68, 0.1);
    border: 4px solid #ef4444;
    color: #ef4444;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    animation: _pulse_1so1c_1 2s infinite;
}

._sosButton_1so1c_52:active {
    background-color: #ef4444;
    color: white;
    transform: scale(0.95);
}

@keyframes _pulse_1so1c_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

._sosContacts_1so1c_91 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

._divider_1so1c_99 {
    width: 1px;
    height: 12px;
    background-color: var(--border-subtle);
}

/* CCTV Section */
._cctvGrid_1so1c_106 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

._cctvFeed_1so1c_113 {
    flex: 1;
    background-color: #000;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 150px;
}

._placeholderPattern_1so1c_122 {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
}

._liveBadge_1so1c_130 {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}

._feedLabel_1so1c_142 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* IoT Section */
._iotGrid_1so1c_154 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

._iotButton_1so1c_160 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem;
    background-color: var(--bg-tertiary);
    /* Darker than card */
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

._iotButton_1so1c_160:hover {
    background-color: var(--bg-primary);
}

._iotButton_1so1c_160._active_1so1c_180 {
    background-color: rgba(34, 211, 238, 0.15);
    /* Primary Accent Light */
    color: #22d3ee;
    border-color: #22d3ee;
}

._iotButton_1so1c_160._warning_1so1c_187 {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: #ef4444;
}._grid_1iqrp_1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    /* Explicit rows */
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    ._grid_1iqrp_1 {
        grid-template-columns: 1fr;
    }
}

/* 1. Telemedicine (Full Width) */
._teleCard_1iqrp_18 {
    grid-column: 1 / -1;
    /* Ensure title area inherits color for SVG "currentColor" */
    color: var(--text-primary);
}

/* Ensure the widget header aligns the SVG correctly */
._teleCard_1iqrp_18 h2 {
    /* Assuming WidgetCard uses h2 for title */
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

/* 2. Vitals Card (Half Width) */
._vitalsCard_1iqrp_33 {
    /* Auto grid placement */
}

._vitalsGrid_1iqrp_37 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

._vitalItem_1iqrp_43 {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    align-items: flex-start;
}

._vitalLabel_1iqrp_52 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

._vitalValue_1iqrp_58 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

._vitalUnit_1iqrp_65 {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-top: 0.2rem;
}

._vitalStatus_1iqrp_71 {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    padding: 2px 8px;
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 12px;
    font-weight: 500;
}

._vitalAction_1iqrp_81 {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

._updateButton_1iqrp_87 {
    background: transparent;
    border: 1px solid var(--border-focus);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

._updateButton_1iqrp_87:hover {
    background-color: var(--bg-tertiary);
}

/* 2. Telemedicine & Meds (Half Width) */
/* .teleCard styles moved up */

._medCard_1iqrp_105 {
    /* Auto grid placement */
}

/* Menu List Style */
._menuList_1iqrp_110 {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

._menuItem_1iqrp_116 {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: transparent;
    border: 1px solid var(--border-subtle);
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
}

._menuItem_1iqrp_116:hover {
    background-color: var(--bg-tertiary);
}

._menuIconBg_1iqrp_133 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

._menuText_1iqrp_143 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

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

._menuDesc_1iqrp_155 {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Medication Timeline */
._medTimeline_1iqrp_161 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding-left: 1rem;
    border-left: 2px solid var(--border-subtle);
}

._medItem_1iqrp_170 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

._medItem_1iqrp_170::before {
    content: '';
    position: absolute;
    left: -1rem;
    /* Adjust based on padding above */
    margin-left: -5px;
    /* Center on line (2px width) -> -1px + (-4px radius) */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--border-subtle);
    border: 2px solid var(--bg-secondary);
}

._medItem_1iqrp_170._done_1iqrp_191::before {
    background-color: #10b981;
}

._medItem_1iqrp_170._active_1iqrp_195::before {
    background-color: #f59e0b;
    width: 14px;
    height: 14px;
    margin-left: -7px;
}

._medTime_1iqrp_161 {
    font-family: monospace;
    font-weight: 600;
    color: var(--text-primary);
    width: 50px;
}

._medName_1iqrp_209 {
    flex: 1;
    color: var(--text-primary);
}

._medCheck_1iqrp_214 {
    font-size: 0.8rem;
    color: #10b981;
}

._takePillBtn_1iqrp_219 {
    background-color: #3b82f6;
    border: none;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}._grid_1bk2u_1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    ._grid_1bk2u_1 {
        grid-template-columns: 1fr;
    }
}

._noticeList_1bk2u_15 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

._noticeItem_1bk2u_24 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

._noticeItem_1bk2u_24:last-child {
    border-bottom: none;
}

._noticeHeader_1bk2u_36 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

._badge_1bk2u_43 {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

._noticeTitle_1bk2u_52 {
    color: var(--text-primary);
    font-weight: 500;
}

._noticeDate_1bk2u_57 {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

._moreBtn_1bk2u_62 {
    width: 100%;
    padding: 0.8rem;
    margin-top: 1rem;
    background-color: var(--bg-tertiary);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

._quickGrid_1bk2u_73 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

._quickBtn_1bk2u_79 {
    background-color: var(--bg-tertiary);
    border: none;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

._quickBtn_1bk2u_79:hover {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-focus);
}._container_1sxqu_1 {
    max-width: 1000px;
    margin: 0 auto;
}

._fullCard_1sxqu_6 {
    min-height: 400px;
}

._appGrid_1sxqu_10 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

._appIconBtn_1sxqu_17 {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s;
}

._appIconBtn_1sxqu_17:hover {
    transform: translateY(-5px);
}

._iconBox_1sxqu_32 {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

._addBtn_1sxqu_42 {
    background-color: var(--bg-tertiary);
    border: 2px dashed var(--border-focus);
    color: var(--text-tertiary);
    font-size: 2rem;
}

._appName_1sxqu_49 {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1rem;
}._container_1rn68_1 {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-primary);
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

._header_1rn68_11 {
    margin-bottom: 2rem;
    text-align: center;
}

._header_1rn68_11 h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

._header_1rn68_11 p {
    color: var(--text-secondary);
}

._grid_1rn68_26 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

._card_1rn68_32 {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

._card_1rn68_32:hover {
    transform: translateY(-2px);
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._iconWrapper_1rn68_52 {
    width: 48px;
    height: 48px;
    background-color: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--primary-color, #3b82f6);
}

._textWrapper_1rn68_64 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

._label_1rn68_70 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

._desc_1rn68_76 {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

._footer_1rn68_81 {
    margin-top: 3rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}/* AdminGovernanceView.css */
.governance-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--text-primary, #333);
    padding-bottom: 80px;
    height: 100%;
    overflow-y: auto;
}

.governance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.gov-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #666);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.gov-icon-btn:hover {
    background-color: var(--surface-hover, #f0f0f0);
}

.governance-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.governance-header-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.gov-title-icon {
    color: #eab308;
}

.gov-hero-section {
    background: linear-gradient(135deg, var(--primary-color, #2563eb) 0%, var(--primary-dark, #1e40af) 100%);
    color: white;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gov-hero-section h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.gov-hero-section p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.gov-tags-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.gov-tag-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-color, #fff);
    color: var(--text-secondary, #666);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.gov-tag-btn:hover {
    background: var(--surface-hover, #f9fafb);
}

.gov-tag-btn.active {
    background: var(--primary-color, #2563eb);
    color: white;
    border-color: var(--primary-color, #2563eb);
}

.gov-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.gov-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 19px;
    width: 2px;
    background: var(--border-color, #e5e7eb);
    z-index: 0;
}

.gov-timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.gov-timeline-marker {
    width: 40px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border-color, #ccc);
    border: 3px solid var(--bg-color, #fff);
    box-shadow: 0 0 0 1px var(--border-color, #e5e7eb);
}

.status-dot.resolved {
    background: #22c55e;
}

.status-dot.investigating {
    background: #eab308;
}

.gov-timeline-content {
    flex: 1;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.gov-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

.gov-status-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.gov-status-badge.resolved {
    background: #dcfce7;
    color: #166534;
}

.gov-status-badge.investigating {
    background: #fef9c3;
    color: #854d0e;
}

.gov-incident-title {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.gov-detail-block {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-hover, #f9fafb);
    border-left: 3px solid var(--border-color, #cbd5e1);
}

.gov-detail-block.root-cause {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.gov-detail-block.resolution {
    border-left-color: #22c55e;
    background: #f0fdf4;
}

.gov-detail-block h5 {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gov-detail-block p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary, #334155);
}

.gov-modules {
    margin: 16px 0;
}

.gov-modules h5 {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin: 0 0 8px 0;
}

.gov-module-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gov-module-chip {
    background: var(--border-color, #e2e8f0);
    color: var(--text-primary, #334155);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: monospace;
}

.gov-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.gov-small-tag {
    font-size: 0.75rem;
    color: var(--primary-color, #2563eb);
    font-weight: 500;
}

.gov-loading, .gov-error, .gov-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary, #64748b);
    background: var(--surface-color, #fff);
    border-radius: 12px;
    border: 1px dashed var(--border-color, #cbd5e1);
}

.gov-loading .spin {
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
    color: var(--primary-color, #2563eb);
}

.gov-error {
    color: #ef4444;
}

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

/* Dark mode tweaks based on Ansimssi vars */
@media (prefers-color-scheme: dark) {
    .gov-detail-block {
        background: rgba(255,255,255,0.05);
    }
    .gov-detail-block.root-cause { background: rgba(239, 68, 68, 0.1); }
    .gov-detail-block.resolution { background: rgba(34, 197, 94, 0.1); }
    .governance-header-title h2 { color: #f1f5f9; }
    .gov-tag-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
    .gov-timeline-content { background: #1e293b; border-color: #334155; }
    .gov-meta { color: #94a3b8; }
    .status-dot { background: #475569; border-color: #0f172a; box-shadow: 0 0 0 1px #334155; }
    .gov-timeline::before { background: #334155; }
    .gov-loading, .gov-error, .gov-empty { background: transparent; border-color: #334155; }
    .gov-detail-block p { color: #e2e8f0; }
    .gov-module-chip { background: #334155; color: #cbd5e1; }
    .gov-item-tags { border-top-color: #334155; }
}
._container_dapb9_1 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-primary, #f9fafb);
    color: var(--text-primary, #111);
    overflow-y: auto;
    /* -webkit-overflow-scrolling: touch; Removed to clear legacy browser support warning */
}

._header_dapb9_15 {
    text-align: center;
    margin-bottom: 3rem;
}

._logoBadge_dapb9_20 {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    color: var(--accent-primary, #0ea5e9);
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.15);
}

._header_dapb9_15 h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

._header_dapb9_15 p {
    color: var(--text-secondary, #666);
    font-size: 1.1rem;
    margin: 0;
}

._grid_dapb9_46 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

._card_dapb9_53 {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-subtle, #f0f0f0);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

._card_dapb9_53:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

._cardHeader_dapb9_73 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    width: 100%;
}

._iconWrapper_dapb9_81 {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

._cardTitle_dapb9_91 h2 {
    font-size: 1.35rem;
    margin: 0 0 0.25rem;
    font-weight: 700;
}

._cardTitle_dapb9_91 span {
    font-size: 0.95rem;
    color: var(--text-secondary, #666);
}

._cardFooter_dapb9_102 {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._subtext_dapb9_110 {
    font-size: 0.8rem;
    color: var(--text-tertiary, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f8f9fa);
    padding: 4px 8px;
    border-radius: 6px;
    width: fit-content;
    margin: 0 auto;
}

._downloadBtn_dapb9_123 {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._downloadBtn_dapb9_123:active {
    transform: scale(0.98);
}

._footer_dapb9_140 {
    margin-top: 4rem;
    text-align: center;
    color: var(--text-tertiary, #999);
    font-size: 0.9rem;
    line-height: 1.6;
}

._versionInfo_dapb9_148 {
    margin-top: 0.5rem;
    font-family: monospace;
    opacity: 0.7;
}

@media (max-width: 600px) {
    ._grid_dapb9_46 {
        grid-template-columns: 1fr;
    }
}
/* Modal Styles */
._modalOverlay_dapb9_160 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(5px);
    animation: _fadeIn_dapb9_1 0.2s ease-out;
}

._modalContent_dapb9_176 {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: _slideUp_dapb9_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._closeBtn_dapb9_187 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

._closeBtn_dapb9_187:hover {
    background-color: #f3f4f6;
    color: #333;
}

._modalTitle_dapb9_208 {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: #111;
}

._modalBody_dapb9_216 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

._step_dapb9_223 {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 12px;
}

._stepNum_dapb9_232 {
    background-color: #111;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

._step_dapb9_223 p {
    margin: 0;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
    text-align: left;
}

._modalFooter_dapb9_255 {
    display: flex;
    justify-content: center;
}

._confirmBtn_dapb9_260 {
    background-color: #111;
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
    width: 100%;
}

._confirmBtn_dapb9_260:active {
    transform: scale(0.98);
}

@keyframes _fadeIn_dapb9_1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes _slideUp_dapb9_1 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* HomeView.module.css */

._homeContainer_1hagd_3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Default to space-between for mobile structure (top content, bottom search) */
    justify-content: space-between;
    height: 100%;
    /* [CRITICAL FIX] Use 100% instead of 100dvh. `dvh` ignores keyboard on iOS. `100%` respects resized viewport. */
    width: 100%;
    padding: 0;
    /* EDGE-TO-EDGE: No horizontal padding on container */
    padding-top: 1rem;
    padding-bottom: 0;
    /* ZERO PADDING: Controlled by JS for keyboard flush alignment */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    transition: height 0.1s ease-out;
    /* Smooth resize for keyboard */
}

/* Scrollable Content Area (Greeting + Chips) */
._contentWrapper_1hagd_25 {
    flex: 1;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    /* Allow internal scrolling if content overflows */
    margin-bottom: 1rem;
    padding-bottom: 0;
    /* Removed fixed padding */
    width: 100%;
    max-width: 800px;
    /* Align with chip container width */
    padding: 0 1rem;
    /* Restore padding for Content Area interactions */

}

._searchWrapper_1hagd_46 {
    width: 100%;
    max-width: 750px;
    flex-shrink: 0;
    /* Prevent search bar from shrinking */
}

/* Visibility Helpers */
._desktopOnly_1hagd_54 {
    display: none !important;
}

._mobileOnly_1hagd_58 {
    display: flex !important;
}

/* Breakpoint Sync: Match MainLayout (768px) so Tablets get Centered View */
@media (min-width: 769px) {
    ._desktopOnly_1hagd_54 {
        display: flex !important;
    }

    ._mobileOnly_1hagd_58 {
        display: none !important;
    }

    ._homeContainer_1hagd_3 {
        justify-content: center;
        /* Center everything vertically */
        padding-bottom: 10vh;
        /* Optical centering: Lift slightly up (10vh) */
        overflow: visible;
        /* Allow search dropdown to extend outside */
    }

    ._contentWrapper_1hagd_25 {
        flex: 0 1 auto !important;
        /* Shrink to fit content (Override inline flex:1) */
        margin-bottom: 0;
        /* Remove extra margin */
        justify-content: center;
        overflow: visible;
        /* Allow search dropdown to extend freely */
    }
}

/* Mobile specific overrides */
@media (max-width: 768px) {

    ._homeContainer_1hagd_3 {
        justify-content: flex-start;
        /* Top align for mobile if needed, or center if desired */
        padding-top: calc(52px + env(safe-area-inset-top) + 1.5rem) !important;
    }

    ._contentWrapper_1hagd_25 {
        justify-content: flex-start;
        margin-top: 1rem;
        padding-bottom: 2rem;
        transition: none;
        width: 100%;
    }

    ._searchWrapper_1hagd_46 {
        /* Flush to bottom safe area - no floating gap */
        margin-top: auto;
        margin-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* [KEYBOARD OPEN FIX] Extra safety for very short screens */
@media (max-height: 500px) {
    ._homeContainer_1hagd_3 {
        /* Even tighter padding if needed, but keeping header safe is priority */
        padding-top: calc(52px + env(safe-area-inset-top));
    }

    ._contentWrapper_1hagd_25 {
        margin-top: 0.5rem;
    }
}/* ── Container ── */
._container_1tk03_2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Pull Indicator (for Bottom Sheet) ── */
._pullIndicatorWrapper_1tk03_12 {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    flex-shrink: 0;
}

._pullIndicatorWrapper_1tk03_12:active {
    cursor: grabbing;
}

._pullIndicator_1tk03_12 {
    width: 36px;
    height: 5px;
    background: var(--text-tertiary, #6b7280);
    border-radius: 3px;
    opacity: 0.5;
}

/* ── Top Bar ── */
._topBar_1tk03_35 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
}

._backBtn_1tk03_48 {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #9ca3af);
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
}

._backBtn_1tk03_48:hover {
    background: var(--bg-tertiary);
}

._topSource_1tk03_65 {
    flex: 1;
    font-size: 13px;
    color: var(--text-tertiary, #6b7280);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

._externalBtn_1tk03_74 {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

._externalBtn_1tk03_74:hover {
    background: var(--bg-tertiary);
}

/* ── Body Image (Perplexity 스타일: 본문 안에 자연스럽게) ── */
._bodyImage_1tk03_94 {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-tertiary);
    min-height: 120px;
}

._bodyImage_1tk03_94 img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

._bodyImageSkeleton_1tk03_112 {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            var(--bg-secondary) 25%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 75%);
    background-size: 800px 100%;
    animation: _shimmer_1tk03_1 1.4s infinite;
}

/* 우하단 언론사 워터마크 (Perplexity첫럼) */
._imageCredit_1tk03_124 {
    position: absolute;
    bottom: 7px;
    right: 9px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 7px;
    border-radius: 4px;
    pointer-events: none;
}

/* ── Content ── */
._content_1tk03_137 {
    padding: 20px 18px 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Headline ── */
._headline_1tk03_145 {
    font-size: 26px;
    /* Larger title */
    font-weight: 800;
    color: var(--text-primary, #f9fafb);
    line-height: 1.35;
    letter-spacing: -0.4px;
    margin: 0;
}

/* ── Lead Text ── */
._leadText_1tk03_156 {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 4px 0 16px;
}

/* ── Meta Row ── */
._metaRow_1tk03_164 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

._metaAuthor_1tk03_171 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

._metaDate_1tk03_178 {
    color: var(--text-tertiary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Source Cards ── */
._sourceCardsWrapper_1tk03_187 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 24px;
    scrollbar-width: none;
}

._sourceCardsWrapper_1tk03_187::-webkit-scrollbar {
    display: none;
}

._sourceCard_1tk03_187 {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: background 0.15s;
}

._sourceCard_1tk03_187:hover {
    background: var(--bg-tertiary);
}

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

._sourceCardFavicon_1tk03_223 {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: white;
}

._sourceCardName_1tk03_230 {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

._sourceCardTitle_1tk03_236 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

._sourceCardMore_1tk03_248 {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

._faviconStackSmall_1tk03_265 {
    display: flex;
}

._faviconImgSmall_1tk03_269 {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-left: -4px;
    z-index: 1;
    border: 1px solid var(--bg-secondary);
}

._faviconImgSmall_1tk03_269:first-child {
    margin-left: 0;
    z-index: 3;
}

._faviconImgSmall_1tk03_269:nth-child(2) {
    z-index: 2;
}

/* ── Citation Pill ── */
._citationPillInline_1tk03_288 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--bg-tertiary, #374151);
    color: var(--text-primary, #f9fafb);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
    vertical-align: super;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

._citationPillInline_1tk03_288:hover {
    background: var(--accent, #818cf8);
    color: #ffffff;
}

._citationPill_1tk03_288 {
    display: inline-flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Skeleton ── */
@keyframes _shimmer_1tk03_1 {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

._skeleton_1tk03_336 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

._skeletonBlock_1tk03_343 {
    border-radius: 8px;
    background: linear-gradient(90deg,
            var(--bg-secondary) 25%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 75%);
    background-size: 800px 100%;
    animation: _shimmer_1tk03_1 1.4s infinite;
}

/* ── Body Sections ── */
._body_1tk03_94 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

._section_1tk03_360 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._sectionHeading_1tk03_366 {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent, #818cf8);
    margin: 0;
    letter-spacing: 0.01em;
}

._sectionContent_1tk03_374 {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-primary, #e5e7eb);
    margin: 0;
}

/* ── Related Questions ── */
._relatedSection_1tk03_382 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

._relatedLabel_1tk03_390 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

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

._relatedCard_1tk03_404 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary, #d1d5db);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    line-height: 1.5;
    opacity: 0;
    animation: _fadeInDelay_1tk03_1 0.5s ease forwards;
}

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

    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

._relatedCard_1tk03_404:hover {
    background: rgba(129, 140, 248, 0.1);
    border-color: rgba(129, 140, 248, 0.3);
    color: #c7d2fe;
    transform: translateX(4px);
}

._relatedActionIcon_1tk03_442 {
    flex-shrink: 0;
    color: var(--accent, #818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(129, 140, 248, 0.15);
    border-radius: 50%;
    padding: 4px;
}

/* ── Follow-Up ── */
._followUp_1tk03_454 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px 28px;
    background: linear-gradient(to bottom, transparent, var(--bg-primary) 40%);
    z-index: 30;
}

._followUpInner_1tk03_464 {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 4px 4px 4px 16px;
    backdrop-filter: blur(12px);
}

._followUpInput_1tk03_475 {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-primary);
    padding: 8px 0;
}

._followUpInput_1tk03_475::placeholder {
    color: var(--text-tertiary, #6b7280);
}

._followUpSend_1tk03_489 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent, #818cf8);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.1s;
}

._followUpSend_1tk03_489:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

._followUpSend_1tk03_489:not(:disabled):hover {
    opacity: 0.85;
    transform: scale(1.05);
}

/* ── More Discover Section (Related) ── */
._moreDiscoverSection_1tk03_515 {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

._moreDiscoverTitle_1tk03_521 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
}

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

._moreDiscoverCard_1tk03_534 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

._moreDiscoverCard_1tk03_534:hover {
    background: var(--bg-tertiary);
}

._moreDiscoverInfo_1tk03_550 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._moreDiscoverSource_1tk03_557 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

._moreDiscoverSource_1tk03_557 img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: white;
}

._moreDiscoverHeading_1tk03_572 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Section Source Bar ── */
._sectionSourceBar_1tk03_586 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

._sectionSourceFavicons_1tk03_597 {
    display: flex;
    align-items: center;
}

._sectionSourceFavicons_1tk03_597 img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-left: -5px;
    border: 1px solid var(--bg-secondary);
    background: white;
}

._sectionSourceFavicons_1tk03_597 img:first-child {
    margin-left: 0;
}

._sectionSourceCount_1tk03_615 {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

._sectionActionBtn_1tk03_621 {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

._sectionActionBtn_1tk03_621:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── Follow-Up additions ── */
._followUpPlusBtn_1tk03_639 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

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

._followUpModelBtn_1tk03_659 {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

._followUpModelBtn_1tk03_659:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}._card_1f8o7_1 {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: inherit;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

._card_1f8o7_1:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

._header_1f8o7_19 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

._titleArea_1f8o7_25 {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

._companyName_1f8o7_31 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

._ticker_1f8o7_38 {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}

._externalLink_1f8o7_44 {
    color: var(--text-tertiary);
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 4px;
}

._externalLink_1f8o7_44:hover {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

._priceArea_1f8o7_58 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

._mainPrice_1f8o7_65 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

._currency_1f8o7_72 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 2px;
}

._changeArea_1f8o7_79 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
}

/* 동적 색상 처리 */
._positive_1f8o7_90 {
    color: #ef4444;
    /* 한국식 주식 붉은색 상승 */
    background-color: rgba(239, 68, 68, 0.1);
}

._negative_1f8o7_96 {
    color: #3b82f6;
    /* 한국식 주식 파란색 하락 */
    background-color: rgba(59, 130, 246, 0.1);
}

/* 해외 모드일 땐 반대일 수 있으나 기본 한국식 유지 */

._metaRow_1f8o7_104 {
    display: flex;
    gap: 16px;
    align-items: center;
    border-top: 1px dashed var(--border-color);
    padding-top: 12px;
}

._metaItem_1f8o7_112 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._metaLabel_1f8o7_118 {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

._metaValue_1f8o7_124 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ────────────────────────────────────────────────────────
 * 관련된 구글 파이낸스 최신 뉴스
 * ──────────────────────────────────────────────────────── */

._newsDivider_1f8o7_134 {
    height: 1px;
    background: var(--border-color);
    margin: 16px -16px;
    /* 풀Bleed 가능하면 */
}

._newsHeading_1f8o7_141 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

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

._newsItem_1f8o7_154 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 0.2s;
}

._newsItem_1f8o7_154:hover {
    background: var(--bg-tertiary);
}

._newsInfo_1f8o7_169 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

._newsSource_1f8o7_177 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
}

._newsSource_1f8o7_177 img {
    border-radius: 2px;
}

._newsDate_1f8o7_189 {
    opacity: 0.8;
}

._newsTitle_1f8o7_193 {
    margin: 0;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._newsThumb_1f8o7_206 {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-left: 12px;
    flex-shrink: 0;
}

._newsThumb_1f8o7_206 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}/* ═══════════════════════════════════════════
   SmartImage skeleton states & Error
═══════════════════════════════════════════ */
@keyframes _shimmer_1051w_1 {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

._imgSkeleton_1051w_14 {
    background: linear-gradient(90deg,
            var(--bg-secondary, #1e1e2e) 25%,
            var(--bg-tertiary, #2d2d44) 50%,
            var(--bg-secondary, #1e1e2e) 75%);
    background-size: 900px 100%;
    animation: _shimmer_1051w_1 1.4s infinite;
}

._imgError_1051w_23 {
    background: var(--bg-tertiary, #2a2a3e);
}

/* ═══════════════════════════════════════════
   Source Meta — 파비콘 오버랩 + 출처수 + 액션 버튼
═══════════════════════════════════════════ */
._sourceMetaWrap_1051w_30 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

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

._sourceActions_1051w_43 {
    display: flex;
    align-items: center;
    gap: 4px;
}

._actionBtnIcon_1051w_49 {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

._actionBtnIcon_1051w_49:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

._faviconStack_1051w_67 {
    display: flex;
    align-items: center;
}

._faviconImg_1051w_72 {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--bg-primary, #ffffff);
    object-fit: contain;
    background: white;
    margin-left: -5px;
    flex-shrink: 0;
    z-index: 1;
}

._faviconImg_1051w_72:first-child {
    margin-left: 0;
    z-index: 3;
}

._faviconImg_1051w_72:nth-child(2) {
    z-index: 2;
}

._sourceText_1051w_93 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

._dot_1051w_99 {
    font-size: 10px;
    color: var(--text-tertiary);
}

._time_1051w_104 {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════
   HERO CARD
═══════════════════════════════════════════ */
._heroCard_1051w_113 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    padding: 16px;
    overflow: hidden;
}

._heroCard_1051w_113:hover,
._heroCard_1051w_113:active {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
}

._heroCard_1051w_113:hover ._heroImg_1051w_134 img {
    transform: scale(1.05);
}

._heroReverse_1051w_138 {
    flex-direction: row-reverse;
}

._heroBody_1051w_142 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

._heroTitle_1051w_150 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 4px 0 0;
    letter-spacing: -0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._heroSummary_1051w_164 {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
}

._heroImg_1051w_134 {
    width: 45%;
    flex-shrink: 0;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    align-self: stretch;
    border: 1px solid var(--border-subtle);
}

._heroImg_1051w_134 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 599px) {
    ._heroCard_1051w_113 {
        flex-direction: column;
        padding: 0;
        gap: 0;
        background: transparent;
        border: none;
    }

    ._heroCard_1051w_113:hover,
    ._heroCard_1051w_113:active {
        background: transparent;
        border-color: transparent;
    }

    ._heroReverse_1051w_138 {
        flex-direction: column;
    }

    ._heroImg_1051w_134 {
        width: 100%;
        border-radius: 12px;
        aspect-ratio: 16 / 9;
        align-self: auto;
    }

    ._heroBody_1051w_142 {
        padding: 16px 4px;
    }

    ._heroTitle_1051w_150 {
        font-size: 20px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    ._heroSummary_1051w_164 {
        display: none;
    }
}

/* ═══════════════════════════════════════════
   GRID CARD
═══════════════════════════════════════════ */
._gridCard_1051w_239 {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    padding-bottom: 8px;
}

._gridCard_1051w_239:hover,
._gridCard_1051w_239:active {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
}

._gridCard_1051w_239:hover ._gridImg_1051w_258 img {
    transform: scale(1.05);
}

._gridImg_1051w_258 {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

._gridImg_1051w_258 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

._gridBody_1051w_279 {
    padding: 12px 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

._gridTitle_1051w_287 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 599px) {
    ._gridTitle_1051w_287 {
        font-size: 12px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* ═══════════════════════════════════════════
   LEAD ARTICLE CARD (Hero Layer - Magazine Style)
═══════════════════════════════════════════ */
._leadCard_1051w_311 {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    /* Cinematic ultra-wide */
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

._leadCard_1051w_311:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
}

._leadImgWrap_1051w_328 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

._leadImg_1051w_328 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

._leadCard_1051w_311:hover ._leadImg_1051w_328 {
    transform: scale(1.03);
}

._leadOverlay_1051w_348 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            rgba(0, 0, 0, 0.85) 100%);
    z-index: 2;
}

._leadContent_1051w_361 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
}

._leadTopMeta_1051w_374 {
    display: flex;
    justify-content: flex-end;
}

._leadBottomMeta_1051w_379 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 80%;
}

._leadTitle_1051w_386 {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._leadSummary_1051w_401 {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

._leadSourceRow_1051w_414 {
    margin-top: 8px;
    /* Invert colors or ensure visibility on dark bg */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

._leadSourceRow_1051w_414 ._sourceText_1051w_93,
._leadSourceRow_1051w_414 ._time_1051w_104,
._leadSourceRow_1051w_414 ._actionBtnIcon_1051w_49 {
    color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 800px) {
    ._leadCard_1051w_311 {
        aspect-ratio: 16 / 9;
    }

    ._leadTitle_1051w_386 {
        font-size: 26px;
    }

    ._leadBottomMeta_1051w_379 {
        max-width: 90%;
    }
}

@media (max-width: 599px) {
    ._leadCard_1051w_311 {
        aspect-ratio: 1 / 1;
        border-radius: 0;
        /* Full width edge-to-edge on mobile */
        box-shadow: none;
    }

    ._leadCard_1051w_311:hover {
        transform: none;
        box-shadow: none;
    }

    ._leadContent_1051w_361 {
        padding: 24px 16px;
    }

    ._leadTitle_1051w_386 {
        font-size: 22px;
    }

    ._leadSummary_1051w_401 {
        display: none;
        /* Hide summary on small screens for cleaner look */
    }

    ._leadBottomMeta_1051w_379 {
        max-width: 100%;
    }
}
/* ═══════════════════════════════════════════
   Hero Search Container
═══════════════════════════════════════════ */
._heroContainer_1qw8r_4 {
    width: 100%;
    background: var(--bg-primary);
    padding: 16px 24px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
}

._heroContent_1qw8r_14 {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}


._heroSubGreeting_1qw8r_24 {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    text-align: center;
}

/* ═══════════════════════════════════════════
   Search Box (Perplexity style)
═══════════════════════════════════════════ */
._searchForm_1qw8r_34 {
    width: 100%;
    max-width: 700px;
    height: 56px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 28px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 20px;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

._searchForm_1qw8r_34:focus-within {
    border-color: var(--accent-primary, #6366f1);
    background: var(--bg-primary);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
}

._searchIconWrap_1qw8r_55 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

._searchIcon_1qw8r_55 {
    margin-top: 1px;
}

._inputWrapper_1qw8r_66 {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 12px;
}

._searchInput_1qw8r_75 {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

._placeholderText_1qw8r_89 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    font-size: 16px;
    color: var(--text-tertiary);
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

._fadeIn_1qw8r_105 {
    opacity: 1;
    transform: translateY(-50%) translateY(0);
}

._fadeOut_1qw8r_110 {
    opacity: 0;
    transform: translateY(-50%) translateY(-10px);
}

._submitBtn_1qw8r_115 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    margin-left: 12px;
}

._submitBtnActive_1qw8r_130 {
    background: var(--accent-primary, #6366f1);
    color: white;
    cursor: pointer;
}

._submitBtnActive_1qw8r_130:hover {
    transform: scale(1.05);
    background: var(--accent-hover, #4f46e5);
}

._submitBtnActive_1qw8r_130:active {
    transform: scale(0.95);
}

/* ═══════════════════════════════════════════
   Mobile Responsive
═══════════════════════════════════════════ */
@media (max-width: 599px) {
    ._heroContainer_1qw8r_4 {
        padding: 16px 16px 24px;
    }

    ._heroSubGreeting_1qw8r_24 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    ._searchForm_1qw8r_34 {
        height: 52px;
        padding: 0 6px 0 16px;
    }

    ._searchInput_1qw8r_75,
    ._placeholderText_1qw8r_89 {
        font-size: 15px;
    }

    ._submitBtn_1qw8r_115 {
        width: 38px;
        height: 38px;
    }
}/* ═══════════════════════════════════════════
   Container
═══════════════════════════════════════════ */
._container_2t373_4 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 20px);
}



/* ═══════════════════════════════════════════
   Category Tabs
═══════════════════════════════════════════ */
._tabsWrapper_2t373_19 {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 19;
}

._tabs_2t373_19 {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 8px;
    align-items: center;
}

._tabs_2t373_19::-webkit-scrollbar {
    display: none;
}

._tab_2t373_19 {
    flex-shrink: 0;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

._tab_2t373_19:hover {
    color: var(--text-secondary);
}

._activeTab_2t373_61 {
    color: var(--text-primary) !important;
    border-bottom-color: var(--accent-primary, #6366f1) !important;
    font-weight: 700;
}

/* 주제 드롭다운 */
._topicDropdownWrap_2t373_68 {
    position: relative;
}

._topicBtn_2t373_72 {
    gap: 4px;
}

._chevronUp_2t373_76 {
    transform: rotate(180deg);
    transition: transform 0.15s;
}

._topicDropdown_2t373_68 {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}

._topicItem_2t373_94 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

._topicItem_2t373_94:hover {
    background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════
   Update Info / Error
═══════════════════════════════════════════ */
._updateInfo_2t373_117 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px;
    font-size: 10px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

._errorBox_2t373_127 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px;
    padding: 14px 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #ef4444;
    font-size: 14px;
}

/* ═══════════════════════════════════════════
   Feed
═══════════════════════════════════════════ */
._feed_2t373_143 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 12px 80px;
    gap: 12px;
    /* 섹션 간 vertical spacing */
}

/* ═══════════════════════════════════════════
   Source Meta — 파비콘 오버랩 + 출처수 + 액션 버튼
═══════════════════════════════════════════ */
._sourceMetaWrap_2t373_155 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

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

._sourceActions_2t373_168 {
    display: flex;
    align-items: center;
    gap: 4px;
}

._actionBtnIcon_2t373_174 {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

._actionBtnIcon_2t373_174:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 파비콘 3개 겹치기 (Perplexity 스타일) */
._faviconStack_2t373_193 {
    display: flex;
    align-items: center;
}

._faviconImg_2t373_198 {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    /* Perplexity uses rounded squares, not full circles */
    border: 1.5px solid var(--bg-primary, #ffffff);
    object-fit: contain;
    /* Prevent cropping on square logos */
    background: white;
    /* Perplexity often puts a white background behind favicons */
    margin-left: -5px;
    /* Slightly tighter overlap */
    flex-shrink: 0;
    z-index: 1;
    /* Ensure stacking order is visible */
}

._faviconImg_2t373_198:first-child {
    margin-left: 0;
    z-index: 3;
}

._faviconImg_2t373_198:nth-child(2) {
    z-index: 2;
}

._sourceText_2t373_224 {
    font-size: 12px;
    /* Slightly larger, more legible */
    font-weight: 500;
    color: var(--text-secondary);
    /* Darker than tertiary for better contrast */
}

._dot_2t373_232 {
    font-size: 10px;
    color: var(--text-tertiary);
}

._time_2t373_237 {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════
   SmartImage skeleton states
═══════════════════════════════════════════ */
@keyframes _shimmer_2t373_1 {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

._imgSkeleton_2t373_256 {
    background: linear-gradient(90deg,
            var(--bg-secondary, #1e1e2e) 25%,
            var(--bg-tertiary, #2d2d44) 50%,
            var(--bg-secondary, #1e1e2e) 75%);
    background-size: 900px 100%;
    animation: _shimmer_2t373_1 1.4s infinite;
}

._imgError_2t373_265 {
    background: var(--bg-tertiary, #2a2a3e);
}

/* ═══════════════════════════════════════════
   HERO CARD — 퍼플렉시티 정밀 스펙
   텍스트 좌/이미지 우, 교번 reverse
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   HERO CARD — 퍼플렉시티 정밀 스펙
   텍스트 좌/이미지 우, 교번 reverse
═══════════════════════════════════════════ */
._heroCard_2t373_277 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    border-radius: 12px;
    background: transparent;
    /* No background by default */
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    padding: 16px;
    overflow: hidden;
}

._heroCard_2t373_277:hover,
._heroCard_2t373_277:active {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
}

/* 이미지에만 hover zoom 적용 */
._heroCard_2t373_277:hover ._heroImg_2t373_300 img {
    transform: scale(1.05);
}

._heroReverse_2t373_304 {
    flex-direction: row-reverse;
}

._heroBody_2t373_308 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* slightly more breathing room */
    min-width: 0;
}

/* 퍼플렉시티: 28px 타이틀 */
._heroTitle_2t373_318 {
    font-size: 24px;
    /* Closer to Perplexity's large typography */
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 4px 0 0;
    letter-spacing: -0.4px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._heroSummary_2t373_333 {
    font-size: 15px;
    /* Slightly larger summary */
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 히어로 이미지: 3:2 비율, 오른쪽 */
._heroImg_2t373_300 {
    width: 45%;
    /* slightly wider image */
    flex-shrink: 0;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    /* slightly rounder */
    overflow: hidden;
    align-self: stretch;
    border: 1px solid var(--border-subtle);
    /* border around image */
}

._heroImg_2t373_300 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile: 이미지 상단, 텍스트 하단 */
@media (max-width: 599px) {
    ._heroCard_2t373_277 {
        flex-direction: column;
        padding: 0;
        gap: 0;
        background: transparent;
        border: none;
    }

    ._heroCard_2t373_277:hover,
    ._heroCard_2t373_277:active {
        background: transparent;
        border-color: transparent;
    }

    ._heroReverse_2t373_304 {
        flex-direction: column;
    }

    ._heroImg_2t373_300 {
        width: 100%;
        border-radius: 12px;
        aspect-ratio: 16 / 9;
        /* Widescreen on mobile */
        align-self: auto;
    }

    ._heroBody_2t373_308 {
        padding: 16px 4px;
        /* minimal horizontal padding on mobile */
    }

    ._heroTitle_2t373_318 {
        font-size: 20px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    ._heroSummary_2t373_333 {
        display: none;
    }
}

/* ═══════════════════════════════════════════
   3-COL GRID — 퍼플렉시티 정밀 스펙
═══════════════════════════════════════════ */
._grid3_2t373_415 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* 퍼플렉시티 정확값 16px */
}

._gridCard_2t373_422 {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    padding-bottom: 8px;
}

._gridCard_2t373_422:hover,
._gridCard_2t373_422:active {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
}

/* 이미지에만 zoom */
._gridCard_2t373_422:hover ._gridImg_2t373_442 img {
    transform: scale(1.05);
}

/* 이미지: 3:2 비율 */
._gridImg_2t373_442 {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

._gridImg_2t373_442 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

._gridBody_2t373_464 {
    padding: 12px 4px 8px;
    /* minimal horizontal padding */
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

._gridTitle_2t373_473 {
    font-size: 15px;
    /* Larger grid title */
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: 2열 */
@media (max-width: 599px) {
    ._grid3_2t373_415 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    ._gridTitle_2t373_473 {
        font-size: 12px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* ═══════════════════════════════════════════
   Skeleton loaders (Phase 4: UX Polish)
═══════════════════════════════════════════ */
._skeletonLead_2t373_504 {
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: 16px;
    background: linear-gradient(90deg,
            var(--bg-secondary) 25%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 75%);
    background-size: 900px 100%;
    animation: _shimmer_2t373_1 1.4s infinite;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    ._skeletonLead_2t373_504 {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 599px) {
    ._skeletonLead_2t373_504 {
        aspect-ratio: 1 / 1;
        border-radius: 0;
    }
}

._skeletonCard_2t373_530 {
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(90deg,
            var(--bg-secondary) 25%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 75%);
    background-size: 900px 100%;
    animation: _shimmer_2t373_1 1.4s infinite;
}

/* Empty */
._empty_2t373_542 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-tertiary);
    padding: 80px 0;
}

._empty_2t373_542 p {
    font-size: 15px;
}

/* Legacy */
._noImgPlaceholder_2t373_558 {
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════
   Masonry Grid (CSS Columns)
═══════════════════════════════════════════ */
._masonryGrid_2t373_567 {
    column-count: 3;
    column-gap: 16px;
    width: 100%;
}

._masonryItem_2t373_573 {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 16px;
    display: block;
    /* Ensure it behaves as a block element for break-inside */
}

/* Tablet */
@media (max-width: 900px) {
    ._masonryGrid_2t373_567 {
        column-count: 2;
    }
}

/* Mobile */
@media (max-width: 599px) {
    ._masonryGrid_2t373_567 {
        column-count: 1;
        column-gap: 0;
    }

    ._masonryItem_2t373_573 {
        margin-bottom: 12px;
    }
}._container_192em_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center Vertically */
    width: 100%;
    max-width: 600px;
    min-height: 100dvh;
    /* Full viewport height */
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 80px;
}

._header_192em_16 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

._difficultySelector_192em_24 {
    display: flex;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
    overflow-x: auto;
    /* Prevent overflow on small screens */
}

._difficultyBtn_192em_34 {
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    /* Responsive font */
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
}

._difficultyBtn_192em_34._active_192em_48 {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-weight: 700;
}

._stats_192em_55 {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Board */
._boardWrapper_192em_65 {
    width: 100%;
    max-width: 90vmin;
    /* Ensure it fits on screen */
    aspect-ratio: 1;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

._board_192em_65 {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    background: var(--border-subtle);
    gap: 1px;
    border: 2px solid var(--text-primary);
    border-radius: 8px;
    overflow: hidden;
}

._cell_192em_90 {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 5vmin, 1.8rem);
    /* Responsive font based on viewport min dimension */
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: #2563eb;
    /* Blue for user input */
    position: relative;
}

/* Thicker borders for 3x3 grids */
._cell_192em_90:nth-child(3n) {
    border-right: 2px solid var(--text-primary);
}

._cell_192em_90:nth-child(9n) {
    border-right: none;
}

._cell_192em_90:nth-child(n+19):nth-child(-n+27),
._cell_192em_90:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 2px solid var(--text-primary);
}

/* Cell States */
._cell_192em_90._initial_192em_121 {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    /* Dark for fixed numbers */
    font-weight: 700;
}

._cell_192em_90._selected_192em_128 {
    background: #bfdbfe;
    /* blue-200 */
}

._cell_192em_90._highlighted_192em_133 {
    background: #eff6ff;
    /* blue-50 */
}

._cell_192em_90._error_192em_138 {
    color: #ef4444;
    background: #fee2e2;
}

._cell_192em_90._sameNumber_192em_143 {
    background: #dbeafe;
    /* blue-100 */
}

/* Numpad */
._numpad_192em_149 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 90vmin;
    margin-top: 0.5rem;
}

._numBtn_192em_158 {
    aspect-ratio: 1.5;
    /* Keeping slightly rectangular */
    border: 1px solid var(--border-subtle);
    background: white;
    border-radius: 12px;
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.1s, background 0.2s;
}

._numBtn_192em_158:active {
    transform: scale(0.95);
    background: var(--bg-secondary);
}

._actionBtn_192em_180 {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 1rem;
    flex-direction: column;
    gap: 2px;
}

._btnLabel_192em_188 {
    font-size: 0.7rem;
    font-weight: 500;
}

._footerActions_192em_193 {
    width: 100%;
    max-width: 90vmin;
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    /* Allow wrapping on very small screens */
}

._newGameBtn_192em_203 {
    flex: 2;
    padding: 12px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: clamp(0.9rem, 4vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    white-space: nowrap;
}

._actionBtnSecondary_192em_217 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    font-size: clamp(0.8rem, 3.5vw, 0.9rem);
    white-space: nowrap;
}

/* Modal */
._modalOverlay_192em_235 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
    animation: _fadeIn_192em_1 0.2s ease-out;
}

._modalContent_192em_250 {
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: _scaleIn_192em_1 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

._modalHeader_192em_260 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.5rem;
}

._modalHeader_192em_260 h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

._closeBtn_192em_276 {
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

._modalBody_192em_290 p {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

._modalBody_192em_290 strong {
    color: var(--primary);
    display: block;
    margin-bottom: 2px;
}

._modalCloseBtn_192em_302 {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1rem;
    cursor: pointer;
}

@keyframes _fadeIn_192em_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes _scaleIn_192em_1 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 400px) {
    ._container_192em_1 {
        padding: 0.5rem;
    }

    ._difficultyBtn_192em_34 {
        padding: 6px 8px;
    }

    ._footerActions_192em_193 {
        gap: 0.25rem;
    }
}

/* Animations */
@keyframes _popIn_192em_1 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

._cell_192em_90 span {
    animation: _popIn_192em_1 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}/* Shared container for all brain games */
._gameContainer_1u3ld_2 {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Header area with Timer and Score */
._statsHeader_1u3ld_14 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    font-weight: 700;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

._timer_1u3ld_28 {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

._timer_1u3ld_28._warning_1u3ld_35 {
    color: #ef4444;
    animation: _pulse_1u3ld_1 1s infinite;
}

._score_1u3ld_40 {
    color: #3b82f6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Main Game Area (Visuals) */
._gameArea_1u3ld_48 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
    /* Ensure it doesn't overflow on small screens */
    width: 100%;
}

/* Standard large instruction text */
._instructionText_1u3ld_61 {
    font-size: 1.5rem;
    color: #334155;
    margin-bottom: 2rem;
    line-height: 1.4;
    word-break: keep-all;
}

._highlight_1u3ld_69 {
    color: #4f46e5;
    font-weight: 800;
    font-size: 1.2em;
}

/* Responsive Grid for Memory/Word Search */
._gridContainer_1u3ld_76 {
    display: grid;
    gap: 8px;
    background: #f1f5f9;
    padding: 12px;
    border-radius: 16px;
    width: 100%;
    aspect-ratio: 1;
    max-width: 400px;
    /* Limit max size on desktop */
    margin: 0 auto;
}

._gridItem_1u3ld_89 {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 #cbd5e1;
    transition: all 0.1s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

._gridItem_1u3ld_89:active {
    transform: translateY(2px);
    box-shadow: none;
}

._gridItem_1u3ld_89._correct_1u3ld_112 {
    background: #22c55e;
    border-color: #15803d;
    box-shadow: 0 2px 0 #15803d;
    color: white;
}

._gridItem_1u3ld_89._wrong_1u3ld_119 {
    background: #ef4444;
    border-color: #b91c1c;
    box-shadow: 0 2px 0 #b91c1c;
    color: white;
    animation: _shake_1u3ld_1 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

/* Premium Button Styles */
._primaryBtn_1u3ld_128,
._secondaryBtn_1u3ld_129,
._optionBtn_1u3ld_130 {
    border: none;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

._primaryBtn_1u3ld_128 {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

._primaryBtn_1u3ld_128:active {
    transform: scale(0.98);
}

._secondaryBtn_1u3ld_129 {
    background: #f1f5f9;
    color: #64748b;
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Big Game Options (O/X, Colors) */
._optionsRow_1u3ld_165 {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-top: auto;
    /* Push to bottom if space allows */
    padding-top: 2rem;
}

._optionBtn_1u3ld_130 {
    flex: 1;
    padding: 1.5rem;
    font-size: 1.5rem;
    background: white;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 0 #e2e8f0;
    color: #334155;
}

._optionBtn_1u3ld_130:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Animations */
@keyframes _pulse_1u3ld_1 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes _popIn_1u3ld_1 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes _shake_1u3ld_1 {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Pattern Matrix Specifics */
._matrixGrid_1u3ld_241 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #f1f5f9;
    padding: 1.5rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    max-width: 340px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

._matrixItem_1u3ld_255 {
    aspect-ratio: 1;
    background: white;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #4f46e5;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

._matrixArrow_1u3ld_272 {
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    background: white;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

._matrixOptionRow_1u3ld_284 {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

._matrixOptionBtn_1u3ld_292 {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: white;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 #cbd5e1;
    transition: all 0.1s;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

._matrixOptionBtn_1u3ld_292:active {
    transform: translateY(4px);
    box-shadow: none;
}


/* Intro/Outro Screens */
._introContainer_1u3ld_316,
._outroContainer_1u3ld_317 {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

._introIcon_1u3ld_326 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: _float_1u3ld_1 3s ease-in-out infinite;
}

@keyframes _float_1u3ld_1 {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

._title_1u3ld_346 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

._description_1u3ld_356 {
    color: #64748b;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Mobile Tweaks */
@media (max-width: 480px) {
    ._gameContainer_1u3ld_2 {
        padding: 0.5rem;
    }

    ._gridContainer_1u3ld_76 {
        gap: 4px;
        padding: 8px;
    }

    ._gridItem_1u3ld_89 {
        font-size: 1.2rem;
        border-radius: 8px;
    }

    ._optionsRow_1u3ld_165 {
        flex-direction: column;
        gap: 0.5rem;
    }

    ._optionBtn_1u3ld_130 {
        padding: 1rem;
        font-size: 1.25rem;
    }
}

/* Brain Training Portal Responsive Layout */
._portalLayout_1u3ld_391 {
    display: flex;
    gap: 2rem;
    flex-direction: row;
    align-items: flex-start;
}

._portalSidebar_1u3ld_398 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

._gameGrid_1u3ld_409 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    ._portalLayout_1u3ld_391 {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        /* Center Items */
    }

    ._portalSidebar_1u3ld_398 {
        width: 100%;
        max-width: 450px;
        /* Match standard mobile card width if desired */
        min-width: unset;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.5rem;
        -ms-overflow-style: none;
        /* IE and Edge */
        justify-content: flex-start;
        /* Scroll from start */
    }

    ._gameGrid_1u3ld_409 {
        width: 100%;
        max-width: 450px;
        /* Constrain width to match sidebar if user wants equality */
        grid-template-columns: 1fr;
        /* Single column on mobile */
        justify-items: center;
        /* Center items if they are smaller than grid area? No, stretch */
    }

    @supports (scrollbar-width: none) {
        ._portalSidebar_1u3ld_398 {
            scrollbar-width: none;
            /* Firefox */
        }
    }

    ._portalSidebar_1u3ld_398::-webkit-scrollbar {
        display: none;
    }
}

._gameCard_1u3ld_459 {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    /* Force full width in grid cell */
    height: 100%;
    /* Stretch to fill grid row height if grid-auto-rows is used */
    transition: transform 0.2s, box-shadow 0.2s;
}

._gameCard_1u3ld_459:active {
    transform: scale(0.98);
}._container_35c84_1 {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

._header_35c84_12 {
    margin-bottom: 24px;
}

._title_35c84_16 {
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

._searchBarContainer_35c84_23 {
    margin-bottom: 32px;
}

._searchBar_35c84_23 {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 0 16px;
    height: 56px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

._searchBar_35c84_23:focus-within {
    background-color: var(--bg-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

._searchIcon_35c84_44 {
    color: var(--text-secondary);
    margin-right: 12px;
}

._searchInput_35c84_49 {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-primary);
    outline: none;
    height: 100%;
}

._searchInput_35c84_49::placeholder {
    color: var(--text-tertiary);
}

._clearButton_35c84_63 {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

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

._content_35c84_81 {
    flex: 1;
}

._sectionTitle_35c84_85 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

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

._historyItem_35c84_100 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}

._historyItem_35c84_100:hover {
    background-color: var(--bg-tertiary);
}

._historyTitle_35c84_115 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px;
}

._historyDate_35c84_123 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

._emptyState_35c84_129 {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.95rem;
}
._overlay_1u3z9_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    padding: 1rem;
    animation: _fadeIn_1u3z9_1 0.2s ease-out;
}

._modal_1u3z9_16 {
    background-color: #1A1A1A;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: _slideUp_1u3z9_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._closeButton_1u3z9_29 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

._closeButton_1u3z9_29:hover {
    background-color: #333;
    color: white;
}

._content_1u3z9_49 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
}

._iconArea_1u3z9_57 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

._logo_1u3z9_62 {
    color: var(--text-secondary);
}

._title_1u3z9_66 {
    font-size: 1.75rem;
    font-weight: 500;
    margin: 0;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: white;
    font-family: var(--font-sans);
}

._subtitle_1u3z9_76 {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    margin-bottom: 2rem;
}

._buttonGroup_1u3z9_83 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

._btn_1u3z9_90 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
}

._btn_1u3z9_90:active {
    transform: scale(0.98);
}

._btnApple_1u3z9_109 {
    background-color: white;
    color: black;
}

._btnGoogle_1u3z9_114 {
    background-color: #333;
    color: white;
}

._btnKakao_1u3z9_119 {
    background-color: #FEE500;
    color: #191919;
}

._btnNaver_1u3z9_124 {
    background-color: #03C75A;
    color: white;
}

._btnEmail_1u3z9_129 {
    background-color: #333;
    color: white;
}

._btnIcon_1u3z9_134 {
    /* Sizing handled in JSX or defaults */
}

._footer_1u3z9_138 {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

._footer_1u3z9_138 a {
    text-decoration: none;
    color: var(--text-secondary);
}

._footer_1u3z9_138 a:hover {
    text-decoration: underline;
}

._bottomTerms_1u3z9_153 {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

._bottomTerms_1u3z9_153 a {
    text-decoration: none;
    color: var(--text-tertiary);
}

@keyframes _fadeIn_1u3z9_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes _slideUp_1u3z9_1 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}/* ══════════════════════════════════════════════════════
   Perplexity 스타일 전체화면 설정 페이지
   ══════════════════════════════════════════════════════ */

/* ── 전체화면 래퍼 ──────────────────────────────────── */
._fullscreenPage_xrei5_6 {
    position: fixed;
    /* PWA: push below iOS Dynamic Island / Status Bar */
    top: env(safe-area-inset-top);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    display: flex;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, 'Inter', BlinkMacSystemFont, sans-serif;
}

/* ── 사이드바 ───────────────────────────────────────── */
._sidebar_xrei5_21 {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-secondary, #f5f5f3);
    border-right: 1px solid var(--border-subtle, #e5e5e3);
    display: flex;
    flex-direction: column;
    padding: 12px 0 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 홈 버튼 */
._homeBtn_xrei5_34 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    margin: 0 8px 12px;
    transition: background 0.15s, color 0.15s;
}

._homeBtn_xrei5_34:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 내비게이션 그룹 */
._navGroups_xrei5_57 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
}

._navGroup_xrei5_57 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 8px;
}

._navGroupLabel_xrei5_71 {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 10px 4px;
}

._navItem_xrei5_80 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 450;
    text-align: left;
    width: 100%;
    transition: background 0.12s, color 0.12s;
}

._navItem_xrei5_80:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

._navItemActive_xrei5_102 {
    background: var(--bg-tertiary);
    color: var(--accent-primary, #2CB67D);
    font-weight: 600;
}

._navIcon_xrei5_108 {
    display: flex;
    align-items: center;
    opacity: 0.7;
    flex-shrink: 0;
    transition: color 0.15s, opacity 0.15s;
}

._navItemActive_xrei5_102 ._navIcon_xrei5_108 {
    opacity: 1;
    color: var(--accent-primary, #2CB67D);
}

/* ── 메인 콘텐츠 영역 ───────────────────────────────── */
._mainContent_xrei5_122 {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* 데스크탑 헤더 (섹션명 + 닫기) */
._contentHeader_xrei5_131 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 0;
    flex-shrink: 0;
}

._contentTitle_xrei5_139 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

._closeBtn_xrei5_146 {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

._closeBtn_xrei5_146:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* 스크롤 가능한 본문 */
._contentBody_xrei5_164 {
    flex: 1;
    overflow-y: auto;
    padding: 20px 32px 40px;
    -webkit-overflow-scrolling: touch;
}

/* ── 모바일 헤더 (뒤로가기) ─────────────────────────── */
._mobileHeader_xrei5_172 {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

._mobileBackBtn_xrei5_181 {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 4px;
}

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

/* ── 반응형 (모바일) ────────────────────────────────── */
@media (max-width: 768px) {
    ._sidebar_xrei5_21 {
        width: 100%;
        height: 100%;
        border-right: none;
        padding: 12px 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    ._sidebarHiddenMobile_xrei5_210 {
        display: none;
    }

    ._mainContent_xrei5_122 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

    ._mainContentVisibleMobile_xrei5_223 {
        display: flex;
    }

    ._mobileHeader_xrei5_172 {
        display: flex;
    }

    ._contentHeader_xrei5_131 {
        display: none;
    }

    ._contentBody_xrei5_164 {
        padding: 16px 20px 32px;
    }
}

/* ══════════════════════════════════════════════════════
   Perplexity 콘텐츠 컴포넌트 (px* 네임스페이스)
   ══════════════════════════════════════════════════════ */

/* 섹션 래퍼 */
._pxSection_xrei5_245 {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 680px;
}

/* 그룹 */
._pxGroup_xrei5_253 {
    margin-bottom: 28px;
}

/* 그룹 타이틀 */
._pxGroupTitle_xrei5_258 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: none;
}

/* 개별 행 */
._pxRow_xrei5_268 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.12));
    gap: 16px;
}

._pxRow_xrei5_268:last-child {
    border-bottom: none;
}

._pxRowLeft_xrei5_281 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

._pxRowLabel_xrei5_289 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

._pxRowValue_xrei5_298 {
    font-size: 0.83rem;
    color: var(--text-secondary);
}

._pxRowValueEmpty_xrei5_303 {
    color: var(--text-tertiary);
    font-style: italic;
}

._pxRowHint_xrei5_308 {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* 변경 버튼 */
._pxEditBtn_xrei5_314 {
    flex-shrink: 0;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

._pxEditBtn_xrei5_314:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-tertiary);
}

/* 편집 영역 */
._pxEditArea_xrei5_334 {
    padding: 12px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._pxEditActions_xrei5_341 {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

/* 취소/저장 미니 버튼 */
._pxCancelBtn_xrei5_349 {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.83rem;
    cursor: pointer;
    transition: all 0.15s;
}

._pxCancelBtn_xrei5_349:hover {
    background: var(--bg-secondary);
}

._pxSaveMiniBtn_xrei5_364 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

._pxSaveMiniBtn_xrei5_364:hover {
    opacity: 0.85;
}

._pxSaveMiniBtn_xrei5_364:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 인풋 */
._pxInput_xrei5_390 {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

._pxInput_xrei5_390:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

/* 텍스트에어리어 */
._pxTextarea_xrei5_409 {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

._pxTextarea_xrei5_409:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

/* 칩 (선택형 버튼) */
._pxChipRow_xrei5_431 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

._pxChip_xrei5_431 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.83rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

._pxChip_xrei5_431:hover {
    border-color: #6366f1;
    color: #6366f1;
}

._pxChipOn_xrei5_457 {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 600;
}

._pxChipGreen_xrei5_464 {
    border-color: var(--border-subtle);
}

._pxChipGreenOn_xrei5_468 {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-weight: 600;
}

/* 토글 스위치 */
._pxToggleRow_xrei5_476 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
}

._pxToggleLabel_xrei5_485 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

._pxToggleSub_xrei5_492 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

._pxSwitch_xrei5_498 {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

._pxSwitch_xrei5_498 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._pxSwitchTrack_xrei5_513 {
    position: absolute;
    inset: 0;
    background: var(--border-subtle, #d1d5db);
    border-radius: 12px;
    transition: background 0.2s;
}

._pxSwitchTrack_xrei5_513::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

._pxSwitch_xrei5_498 input:checked+._pxSwitchTrack_xrei5_513 {
    background: #1d1d1f;
}

[data-theme="dark"] ._pxSwitch_xrei5_498 input:checked+._pxSwitchTrack_xrei5_513,
[data-scheme="dark"] ._pxSwitch_xrei5_498 input:checked+._pxSwitchTrack_xrei5_513 {
    background: #f5f5f5;
}

._pxSwitch_xrei5_498 input:checked+._pxSwitchTrack_xrei5_513::before {
    transform: translateX(18px);
}

/* 저장 버튼 (전체 너비) */
._pxSaveBtn_xrei5_548 {
    width: 100%;
    margin: 16px 0 8px;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

._pxSaveBtn_xrei5_548:hover {
    opacity: 0.85;
}

._pxSaveBtn_xrei5_548:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 위험 행 */
._pxDangerRow_xrei5_572 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
}

._pxDangerLabel_xrei5_581 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

/* 외곽선 버튼 */
._pxOutlineBtn_xrei5_589 {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

._pxOutlineBtn_xrei5_589:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background: var(--bg-secondary);
}

._pxOutlineBtn_xrei5_589:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 링크 버튼 */
._pxLinkBtn_xrei5_617 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 2px 0;
    margin-top: 4px;
}

._pxLinkBtn_xrei5_617:hover {
    text-decoration: underline;
}

/* 법적 링크 */
._pxLegal_xrei5_635 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0 8px;
}

._pxLegalBtn_xrei5_642 {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
}

._pxLegalDot_xrei5_651 {
    color: var(--text-tertiary);
}

/* 설명 텍스트 */
._pxDesc_xrei5_656 {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 16px;
}

/* 빈 상태 */
._pxEmptyState_xrei5_664 {
    text-align: center;
    color: var(--text-tertiary);
    padding: 32px;
    background: var(--bg-secondary);
    border-radius: 10px;
    font-size: 0.88rem;
}

/* 주소 검색 결과 */
._pxAddressResults_xrei5_674 {
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

._pxAddressItem_xrei5_681 {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--text-primary);
    line-height: 1.5;
    transition: background 0.1s;
}

._pxAddressItem_xrei5_681:last-child {
    border-bottom: none;
}

._pxAddressItem_xrei5_681:hover {
    background: var(--bg-secondary);
}

._pxAddressItem_xrei5_681 span {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* 뱃지 */
._pxBadge_xrei5_712 {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 6px;
}

/* 카운터 */
._pxCounterRow_xrei5_722 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

._pxCounterLabel_xrei5_729 {
    font-size: 0.83rem;
    color: var(--text-secondary);
    flex: 1;
}

._pxCounterBtn_xrei5_735 {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

._pxCounterBtn_xrei5_735:hover {
    border-color: #6366f1;
    color: #6366f1;
}

._pxCounterVal_xrei5_756 {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}

/* 테마 행 */
._pxThemeRow_xrei5_764 {
    display: flex;
    gap: 8px;
}

/* ── 도움말 ─────────────────────────────────────────── */
._helpHero_xrei5_770 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0 28px;
    gap: 12px;
}

._helpHeroIcon_xrei5_778 {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f0f9ff, #ede9fe);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

._helpHero_xrei5_770 h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

._helpSearch_xrei5_795 {
    position: relative;
    margin-bottom: 24px;
}

._helpSearchIcon_xrei5_800 {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
}

._helpSearchInput_xrei5_808 {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

._helpSearchInput_xrei5_808:focus {
    border-color: #6366f1;
}

._pxFaqItem_xrei5_825 {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-subtle);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}

._pxFaqItem_xrei5_825:last-child {
    border-bottom: none;
}

._pxFaqItem_xrei5_825:hover {
    color: #6366f1;
}

/* ── 앱 설치 ─────────────────────────────────────────── */
._installHero_xrei5_852 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 32px;
    gap: 12px;
    color: var(--text-primary);
}

._installHero_xrei5_852 h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

._installHero_xrei5_852 p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── 프로필 헤더 (AccountTab) ───────────────────────── */
._pxPage_xrei5_876 {
    display: flex;
    flex-direction: column;
    padding: 0;
}

._pxProfileHeader_xrei5_882 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

._pxAvatar_xrei5_891 {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

._pxProfileName_xrei5_906 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

._pxProfileEmail_xrei5_912 {
    font-size: 0.83rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════
   기타 레거시 (VoiceSettings 등 하위 컴포넌트 호환)
   ══════════════════════════════════════════════════════ */
._section_xrei5_921 h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 12px;
}

._description_xrei5_927 {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

._settingItem_xrei5_934 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

._settingTitle_xrei5_942 {
    font-weight: 500;
    color: var(--text-primary);
}

._settingDesc_xrei5_947 {
    font-size: 0.84rem;
    color: var(--text-secondary);
}

._divider_xrei5_952 {
    border: none;
    border-top: 1px solid var(--border-subtle);
}

._inputGroup_xrei5_957 {
    display: flex;
    gap: 8px;
}

._inputGroup_xrei5_957 input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

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

._contactItem_xrei5_979 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

._contactInfo_xrei5_988 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._contactName_xrei5_994 {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

._contactNumber_xrei5_1000 {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

._deleteButton_xrei5_1005 {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}

._deleteButton_xrei5_1005:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

._emptyState_xrei5_1019 {
    text-align: center;
    color: var(--text-tertiary);
    padding: 32px;
    background: var(--bg-secondary);
    border-radius: 10px;
    font-size: 0.88rem;
}

._addContactForm_xrei5_1028 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 20px;
}

._hero_xrei5_1038 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}

._heroIcon_xrei5_1045 {
    margin-bottom: 12px;
}

._heroTitle_xrei5_1049 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

/* 토글 스위치 (레거시 - VoiceSettings 등에서 사용) */
._toggle_xrei5_1057 {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

._toggle_xrei5_1057 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._toggleSlider_xrei5_1071 {
    position: absolute;
    inset: 0;
    background: var(--border-subtle, #d1d5db);
    border-radius: 12px;
    transition: background 0.2s;
    cursor: pointer;
}

._toggleSlider_xrei5_1071::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

._toggle_xrei5_1057 input:checked+._toggleSlider_xrei5_1071 {
    background: #1d1d1f;
}

._toggle_xrei5_1057 input:checked+._toggleSlider_xrei5_1071::before {
    transform: translateX(18px);
}

._toggleRow_xrei5_1101 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}

._toggleLabel_xrei5_1109 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

._toggleDesc_xrei5_1115 {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* 버튼 레거시 */
._saveButton_xrei5_1122 {
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 11px;
    border-radius: 8px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.15s;
}

._saveButton_xrei5_1122:hover {
    opacity: 0.85;
}

._saveButton_xrei5_1122:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._smallActionBtn_xrei5_1143 {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

._dangerButtonLink_xrei5_1154 {
    background: none;
    border: none;
    color: #ef4444;
    text-decoration: underline;
    cursor: pointer;
}

._helperText_xrei5_1162 {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ══════════════════════════════════════════
   새 탭 컴포넌트용 추가 클래스
   ══════════════════════════════════════════ */

/* select 드롭다운 */
._pxSelect_xrei5_1173 {
    padding: 6px 28px 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    appearance: auto;
    flex-shrink: 0;
}

._pxSelect_xrei5_1173:focus {
    border-color: #6366f1;
}

/* 퍼플렉시티 스타일 컴팩트 pill 드롭다운 */
._pxSelectPill_xrei5_1191 {
    padding: 5px 24px 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    appearance: auto;
    flex-shrink: 0;
    width: auto;
    max-width: 120px;
}

._pxSelectPill_xrei5_1191:focus {
    border-color: #6366f1;
}


/* 배너 (앱 다운로드 등) */
._pxBanner_xrei5_1213 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin-bottom: 24px;
}

._pxBannerTitle_xrei5_1225 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

._pxBannerDesc_xrei5_1232 {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* 알림 작업 입력 행 */
._pxTaskInputRow_xrei5_1238 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    margin-bottom: 16px;
}

/* 추천 카드 그리드 */
._pxSuggestGrid_xrei5_1250 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

._pxSuggestCard_xrei5_1257 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

._pxSuggestCard_xrei5_1257:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

._pxSuggestIcon_xrei5_1276 {
    font-size: 1.4rem;
}

._pxSuggestLabel_xrei5_1280 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

._pxSuggestDesc_xrei5_1286 {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.3;
}

/* 연결자 헤더 */
._pxConnectorHeader_xrei5_1293 {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* 아이콘 컨테이너 (연결자·관심목록에서 이모지 대신 사용) */
._pxConnectorIcon_xrei5_1301 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface-secondary, rgba(128, 128, 128, 0.1));
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* 알림 작업 카드 아이콘 */
._pxSuggestIcon_xrei5_1276 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface-secondary, rgba(128, 128, 128, 0.08));
    color: var(--color-primary, #3b82f6);
    margin-bottom: 6px;
}

@media (max-width: 640px) {
    ._pxSuggestGrid_xrei5_1250 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._pxConnectorHeader_xrei5_1293 {
        flex-direction: column;
    }

    ._pxThemeRow_xrei5_764 {
        flex-wrap: wrap;
    }

    ._pxBanner_xrei5_1213 {
        flex-direction: column;
        align-items: flex-start;
    }

    ._pxRowStackMobile_xrei5_1344 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    ._pxRowStackMobile_xrei5_1344 ._pxSelect_xrei5_1173 {
        width: 100%;
        max-width: none;
    }
}/* Modal Overlay and Container */
._overlay_b4uq1_2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: _fadeIn_b4uq1_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

._modal_b4uq1_18 {
    background: #f1f2f3;
    /* Slightly darker than white for contrast with cards */
    width: 90%;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 85vh;
    animation: _slideUp_b4uq1_1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1c1c1e;
}

/* Header */
._header_b4uq1_35 {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #f1f2f3;
    /* blended with modal bg */
}

._closeButton_b4uq1_45 {
    position: absolute;
    right: 1rem;
    left: auto;
    /* Move to right like standard modals, or keep left? Standard iOS is often right or left. Let's keep right for ease */
    top: 50%;
    transform: translateY(-50%);
    background: #e5e5ea;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8e8e93;
    transition: all 0.2s;
}

._closeButton_b4uq1_45:hover {
    background: #d1d1d6;
    color: #1c1c1e;
}

._title_b4uq1_70 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

/* Content Scroll Area */
._content_b4uq1_77 {
    padding: 0 1.25rem 2rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Section */
._sectionTitle_b4uq1_86 {
    font-size: 0.85rem;
    color: #6c6c70;
    margin-bottom: 0.5rem;
    font-weight: 400;
    padding-left: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Style for Items */
._card_b4uq1_97 {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Toggle Row */
._toggleRow_b4uq1_105 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    min-height: 3.5rem;
}

._labelGroup_b4uq1_113 {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

._mainLabel_b4uq1_119 {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

._subLabel_b4uq1_125 {
    font-size: 0.8rem;
    color: #8e8e93;
}

._divider_b4uq1_130 {
    height: 1px;
    background: #e5e5ea;
    margin: 0 1.2rem;
}

/* Toggle Switch (iOS Style) */
._switch_b4uq1_137 {
    width: 51px;
    height: 31px;
    background: #e9e9ea;
    border-radius: 31px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

._switch_b4uq1_137._active_b4uq1_147 {
    background: #34c759;
}

._knob_b4uq1_151 {
    width: 27px;
    height: 27px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

._switch_b4uq1_137._active_b4uq1_147 ._knob_b4uq1_151 {
    transform: translateX(20px);
}

/* Mode Selector */
._modeSelector_b4uq1_168 {
    display: flex;
    padding: 0.5rem;
    gap: 0.5rem;
    background: white;
}

._modeBtn_b4uq1_175 {
    flex: 1;
    padding: 0.8rem;
    border: 2px solid #f2f4f6;
    background: white;
    border-radius: 10px;
    color: #8e8e93;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

._modeBtn_b4uq1_175._active_b4uq1_147 {
    border-color: #007aff;
    /* Apple Blue */
    background: #f0f9ff;
    color: #007aff;
    font-weight: 600;
}

._modeLabel_b4uq1_196 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

._sparkleIcon_b4uq1_203 {
    color: #ffbf00;
    /* Gold */
}

/* Voice List Container */
._voiceListContainer_b4uq1_209 {
    max-height: 350px;
    overflow-y: auto;
}

._voiceGroupHeader_b4uq1_214 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #f2f4f6);
}


/* Voice List Item */
._voiceItem_b4uq1_228 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
    cursor: pointer;
    background: var(--bg-surface, white);
    border-bottom: 1px solid var(--border-color, #f2f4f6);
    transition: background 0.2s;
}

._voiceItem_b4uq1_228:last-child {
    border-bottom: none;
}

._voiceItem_b4uq1_228:hover {
    background: var(--bg-hover, #f9f9f9);
}

._voiceItem_b4uq1_228._selected_b4uq1_247 {
    background: var(--bg-selected, #f2f9ff);
    /* Very subtle blue tint */
}

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

._voiceTextGroup_b4uq1_259 {
    display: flex;
    flex-direction: column;
}

._voiceName_b4uq1_264 {
    font-size: 1rem;
    color: var(--text-primary, #1c1c1e);
    font-weight: 500;
}

._voiceDesc_b4uq1_270 {
    font-size: 0.8rem;
    color: var(--text-secondary, #8e8e93);
}

._checkIcon_b4uq1_275 {
    color: #007aff;
    margin-left: 0.5rem;
}

/* Play Button */
._playButton_b4uq1_281 {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-tertiary, #f2f4f6);
    border: none;
    color: var(--primary-color, #007aff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

._playButton_b4uq1_281:hover {
    background: var(--bg-hover, #e5e5ea);
    transform: scale(1.05);
}

._playButton_b4uq1_281._playing_b4uq1_301 {
    background: var(--primary-color, #007aff);
    color: white;
}

._playButton_b4uq1_281._playing_b4uq1_301 svg {
    fill: white;
}


/* Slider Section */
._sliderCard_b4uq1_312 {
    background: var(--bg-surface, white);
    padding: 1.5rem;
    border-radius: 12px;
}

._sliderContainer_b4uq1_318 {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

._customSliderWrapper_b4uq1_324 {
    position: relative;
    height: 36px;
    background: var(--bg-tertiary, #f2f4f6);
    border-radius: 18px;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

._fillBar_b4uq1_336 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--primary-color, #007aff);
    border-radius: 18px 0 0 18px;
    z-index: 1;
    transition: width 0.1s linear;
}

._sliderInput_b4uq1_347 {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3;
    cursor: pointer;
}

._thumbDisplay_b4uq1_356 {
    position: absolute;
    width: 32px;
    height: 32px;
    background: var(--bg-surface, white);
    border: 2px solid var(--primary-color, #007aff);
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-color, #007aff);
    pointer-events: none;
    top: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: left 0.1s linear;
}


@keyframes _fadeIn_b4uq1_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes _slideUp_b4uq1_1 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}/* GeminiLiveUI.module.css */

/* 1. Container: Full Screen Immersive */
._container_1cotr_4 {
    /* [CRITICAL OMNI-CHANNEL FIX] 
       Force Dark Theme CSS Variables locally!
       Prevents global .light-theme (which sets text-primary to black) from 
       rendering invisible dark text on top of our dark modal background. */
    --bg-primary: #000000;
    --bg-secondary: #1E1F20;
    --bg-tertiary: #2C2C2E;
  
    --text-primary: #ECECEC;
    --text-secondary: #A1A1AA;
    --text-tertiary: #71717A;
  
    --border-subtle: #3F3F46;
    --border-focus: #52525B;

    /* [FIX] Force widget & card colors to Dark Mode (e.g. StockCard) */
    --card-bg: #1F2937;
    --chart-primary: #3b82f6;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
    --chart-grid: #374151;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: transparent;
    color: var(--text-primary);
    z-index: 9999;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none;
}

/* Solid Background for Voice Mode */
._container_1cotr_4._voiceMode_1cotr_44 {
    /* [RESTORED] Authentic Deep Blue Gradient. 
       Provides elegant contrast against the pure black bottom action bar. */
    background: linear-gradient(180deg, #0F172A 0%, #172554 100%);
    background-color: #0F172A; /* Fallback */
}

._container_1cotr_4._visionMode_1cotr_51 {
    background-color: transparent;
}

/* Ambient Edge Effect */
._ambientEdge_1cotr_56 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 15;
    /* Above camera, below UI */
    /* Ansimssi brand gradient as inward shadow */
    box-shadow: inset 0 0 60px 15px rgba(156, 39, 176, 0.4), inset 0 0 120px 30px rgba(66, 133, 244, 0.2);
    transition: opacity 0.1s ease-out;
}

/* --- STAGE AREA (Flex Grow) --- */
._stageArea_1cotr_71 {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Boundary for elements not to leak into Deck */
    overflow: hidden;
    z-index: 10;
    /* [UPDATED] UI Layer Base (Above Video: 0) */
}

/* 2. Top Bar */
._cameraFeed_1cotr_83 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Behind TopBar and Content */
    opacity: 0;
    /* transition handled inline for zoom performance */
    animation: _fadeInFeed_1cotr_1 0.5s ease-out forwards;
}

@keyframes _fadeInFeed_1cotr_1 {
    to {
        opacity: 1;
    }
}

/* 2. Top Bar */
/* 2. Top Bar */
._topBar_1cotr_105 {
    position: absolute;
    /* [FIX] Overlay on top of everything */
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));

    box-sizing: border-box;
    /* [FIX] Essential for padding to be included in width */
    z-index: 20;
    height: auto;
    min-height: 80px;
    /* Ensure touch target size */
    pointer-events: none;
}

/* Icon Button (e.g. Transcript Toggle) */
._iconButtonGhost_1cotr_130 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    pointer-events: auto;
    /* Required as topBar is pointer-events: none */
}

._iconButtonGhost_1cotr_130:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

._iconButtonGhost_1cotr_130:active {
    transform: scale(0.95);
}

/* [NEW] Flexbox container for center items */
._topBarCenter_1cotr_157 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Centered Live Status Pill */
/* Centered Live Status (Clean, No Pill) */
._liveIndicator_1cotr_166 {
    /* [FIX] Removed absolute positioning to respect topBar's safe-area padding */
    display: flex;
    align-items: center;
    gap: 10px;

    /* Clean Text Only */
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, white);
    /* Clean White Text */
    letter-spacing: 0.5px;
    opacity: 0.9;
    /* Subtle text shadow for readability over backgrounds */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    /* [FIX] Enable clicks on status if needed */
}

/* --- LIVE TABS (Voice / Vision) --- */
._liveTabs_1cotr_186 {
    /* [FIX] Removed absolute positioning to align properly in Flexbox */
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 6px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 25;
    pointer-events: auto;
}

._tabButton_1cotr_199 {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

._tabButton_1cotr_199._active_1cotr_214 {
    background: white;
    color: #111827;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* --- STATUS MODIFIERS --- */

._statusConnecting_1cotr_222 ._liveText_1cotr_222 {
    color: rgba(255, 255, 255, 0.8);
}

._statusError_1cotr_226 ._liveText_1cotr_222 {
    color: #94a3b8;
    /* Slate-400 (Gray text, NOT Red) */
}

/* 3. Live State: Primary Color Text & Waveform */
._statusLive_1cotr_232 ._liveText_1cotr_222 {
    /* [FIX] Red color when communicating per user request */
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    animation: _pulseRed_1cotr_1 2s infinite;
}

@keyframes _pulseRed_1cotr_1 {

    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    }

    50% {
        opacity: 0.8;
        text-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
    }
}

/* --- WAVEFORM INDICATOR --- */
._waveformContainer_1cotr_254 {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 14px;
    /* Ensure waveformContainer appears even in Vision mode */
    z-index: 20;
}

._waveBar_1cotr_263 {
    width: 3px;
    /* [FIX] Use exact Ansimssi brand 3-color gradient instead of a solid color */
    background: linear-gradient(180deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    animation: _waveAnimation_1cotr_1 1.2s ease-in-out infinite;
}

._waveBar_1cotr_263:nth-child(1) {
    height: 60%;
    animation-delay: -1.2s;
}

._waveBar_1cotr_263:nth-child(2) {
    height: 100%;
    animation-delay: -1.0s;
}

._waveBar_1cotr_263:nth-child(3) {
    height: 80%;
    animation-delay: -0.8s;
}

@keyframes _waveAnimation_1cotr_1 {

    0%,
    100% {
        transform: scaleY(0.4);
    }

    50% {
        transform: scaleY(1);
    }
}

._iconButtonGhost_1cotr_130 {
    /* Standard relative button for Flexbox Space-Between */
    position: relative;
    background: transparent;
    border: none;
    color: var(--text-primary, white);
    padding: 8px;
    cursor: pointer;
    opacity: 0.8;
    z-index: 20;
    /* Ensure clickable */
    pointer-events: auto;
    /* [FIX] Enable clicks on buttons */
}

/* Content Display (Flex Container) */
._contentDisplay_1cotr_315 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Push content to bottom */
    padding: 0 5%;
    padding-bottom: 120px; /* Space for Bottom Deck */
    position: relative;
    z-index: 5;
    width: 100%;
}

/* --- FLOATING ACTION BUTTONS --- */
._floatingFlipBtn_1cotr_329 {
    position: absolute;
    top: calc(15px + env(safe-area-inset-top));
    /* Avoid notch / dynamic island */
    right: 15px;
    /* Match left padding of chat bubble icon */
    width: 40px;
    /* Resize to match iconButtonGhost */
    height: 40px;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 15;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
}

._floatingFlipBtn_1cotr_329 svg {
    flex-shrink: 0;
}

._floatingFlipBtn_1cotr_329:active {
    transform: scale(0.95);
    background: rgba(50, 50, 50, 0.8);
}

/* --- WIDGET AREA (Scrollable Middle) --- */
._widgetArea_1cotr_362 {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px; /* Gap above transcript */
    max-height: 50vh; /* Prevents overflow into top bar */
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    z-index: 50;
    pointer-events: none; /* Let background clicks pass through */
    overscroll-behavior: contain;
}
._widgetArea_1cotr_362::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* --- UNIFIED TRANSCRIPT & WIDGET AREA (Bottom Anchored) --- */
._transcriptArea_1cotr_382 {
    width: 100%;
    max-width: 600px;
    text-align: center;
    z-index: 50;
    color: white;
    pointer-events: none; /* Let background clicks pass through */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Keep text at the bottom */
    transition: all 0.3s ease;
    max-height: 70vh; /* Prevent overflowing the top safe area */
    overflow-y: auto; /* Allow scrolling if many widgets/text */
    scrollbar-width: none;
    overscroll-behavior: contain;
}
._transcriptArea_1cotr_382::-webkit-scrollbar {
    display: none;
}

/* Legacy class kept for compatibility with visionMode */
._transcript_1cotr_382 {
    width: 100%;
    position: relative; /* [FIX] Remove any absolute positioning that forced center expansion */


    /* Glassmorphism Capsule */
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 16px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Vision Mode Style: Slightly adjusted for camera */
._transcript_1cotr_382._visionMode_1cotr_51 {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

._transcript_1cotr_382._visionMode_1cotr_51 ._userText_1cotr_425 {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

._transcript_1cotr_382._visionMode_1cotr_51 ._aiText_1cotr_431 {
    font-size: 1rem;
    /* [FIX - QA #3] Matches the new base font size */
    color: white;
    background: none;
    -webkit-text-fill-color: initial;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    /* Add subtle shadow for camera legibility */
}

._userText_1cotr_425 {
    font-size: 0.9rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    margin-bottom: 0.5rem;
    text-align: left;
}

._aiText_1cotr_431 {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    /* [FIX - Autopilot] 폰트 글리프 상하단 잘림 방지용 여유 줄간격 격상 */
    padding-top: 8px; 
    padding-bottom: 2px;
    /* [FIX - Autopilot] 상단 렌더링(Ascender bounds) 넉넉한 방어 공간 확보 */
    /* Exactly 3 lines (4.8em) plus padding */
    height: calc(1.6em * 3 + 10px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: none;
    letter-spacing: -0.01em;
    z-index: 10;
    /* [PLAN AP-5] 백그라운드 코어 애니메이션 위로 오도록 명시적 Z-Index */

    /* [RESTORED UI POLISH] Zero-Smudge Hard Mask 
       The top 8px (padding-top) must be completely transparent to erase the 
       descenders of the scrolled-up 4th line. A soft gradient causes an ugly "smudge".
       We use a hard transition from transparent to fully opaque. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0px, transparent 8px, rgba(0,0,0,1) 12px, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(180deg, transparent 0px, transparent 8px, rgba(0,0,0,1) 12px, rgba(0,0,0,1) 100%);
}

/* Screen Broadcast Status */
._broadcastStatus_1cotr_481 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: _fadeIn_1cotr_1 0.5s ease-out;
}

._broadcastIcon_1cotr_490 {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(255, 59, 48, 0.1);
    border-radius: 50%;
    animation: _broadcastPulse_1cotr_1 2s infinite;
}

._broadcastText_1cotr_498 {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

._broadcastSubtext_1cotr_505 {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

@keyframes _broadcastPulse_1cotr_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 59, 48, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }
}

@keyframes _fadeIn_1cotr_1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* 3. Main Visual (Aurora Glow) */
._mainVisual_1cotr_537 {
    position: absolute;
    bottom: 0;
    /* Anchored to bottom of STAGE, not Screen */
    left: 0;
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    z-index: 1;
}

._auroraGlow_1cotr_551 {
    width: 120%;
    height: 100%;
    /* The Gemini Blue/Purple Aurora Gradient */
    background: radial-gradient(ellipse at center bottom,
            rgba(66, 133, 244, 0.6) 0%,
            /* Google Blue */
            rgba(156, 39, 176, 0.4) 40%,
            /* Deep Purple */
            rgba(0, 0, 0, 0) 70%
            /* Fade to Black */
        );
    filter: blur(40px);
    border-radius: 50% 50% 0 0;
    transition: all 0.2s ease-out;
    /* Smooth audio reaction */
}

/* Camera Flip Button */
._flipBtn_1cotr_570 {
    position: absolute;
    bottom: 30px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    /* [UPDATED] High Priority Interactive Layer */
    transition: transform 0.2s ease;
}

._flipBtn_1cotr_570:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.7);
}

/* --- CONTROL DECK (Fixed Height) --- */
/* --- CONTROL DECK (Fixed Height, Top Rounded) --- */
._controlDeck_1cotr_597 {
    height: auto;
    min-height: 80px;
    /* [FIX] Further reduced from 96px */
    flex-shrink: 0;
    /* [FIX] PWA: controlDeck가 절대 축소되지 않도록 — 버튼 항상 표시 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    /* [FIX] Reduced padding */
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    /* [FIX] PWA에서 safe-area 0 반환 시 최소 20px 보장 */

    /* Inverse Rounding: Top Corners Only */
    border-radius: 20px 20px 0 0;

    /* Distinct Background with Blur (Glassy) */
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    /* Subtle Top Shadow for depth */
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    z-index: 50;
    position: relative;
    /* Ensure it sits on top */
}

/* Base Button Style */
._controlBtn_1cotr_630 {
    width: 48px;
    /* [FIX] Reduced from 50px */
    height: 48px;
    /* [FIX] Reduced from 50px */
    border-radius: 50%;
    border: none;
    /* User Request: "A little bit our color" */
    background: rgba(66, 133, 244, 0.12);
    /* Slightly more subtle */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

._controlBtn_1cotr_630 svg {
    flex-shrink: 0;
    /* [FIX] Prevent icon squashing */
}

._controlBtn_1cotr_630:active {
    transform: scale(0.92);
}

/* 1. Camera Button (Left) */
._camBtn_1cotr_661._active_1cotr_214 {
    background: white;
    color: #FF3B30;
    /* Red Icon when Active */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* 2. Screen Share Button (Left Inner) */
._screenBtn_1cotr_669._active_1cotr_214 {
    background: white;
    color: #FF3B30;
    /* Red Icon when Active */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* 3. Mic Button (Center) */
._micBtn_1cotr_677 {
    position: relative;
    overflow: hidden;
    z-index: 5;
    /* Default: Blue Tint (Inherited) */
}

/* User Request: Active (Live) -> White BG, Red Icon */
._micBtn_1cotr_677._active_1cotr_214 {
    background: white;
    color: #FF3B30;
    /* Icon Red */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

._micBtn_1cotr_677._muted_1cotr_692 {
    /* If muted is meant to be the 'Inactive' state, it uses default tint */
    opacity: 0.8;
}

/* 4. End Button (Right) */
._endBtn_1cotr_698 {
    /* User Request: "Like Gemini Red" */
    background: #FF3B30;
    /* Solid Red */
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
}

._endBtn_1cotr_698:hover {
    background: #D32F2F;
}

/* Pulse Animation for Mic */
@keyframes _pulse_1cotr_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(66, 133, 244, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
}

._micBtn_1cotr_677:not(._muted_1cotr_692)::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    animation: _pulse_1cotr_1 2s infinite;
    z-index: -1;
}

/* Stray lines removed */

._endBtn_1cotr_698:hover {
    background: #D32F2F;
}

/* --- BROADCAST MODAL (iOS Style) --- */
._broadcastModalOverlay_1cotr_745 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    /* Highest Priority */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: _fadeIn_1cotr_1 0.3s ease-out;
}

._broadcastWarning_1cotr_763 {
    position: absolute;
    top: 10%;
    width: 80%;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 320px;
}

._broadcastModal_1cotr_745 {
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 36px;
    padding: 32px 24px;
    width: 85%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: _scaleUp_1cotr_1 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

._modalHeader_1cotr_791 {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.5px;
}

._appList_1cotr_798 {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

._appItem_1cotr_805 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    color: white;
    font-size: 1rem;
    font-weight: 500;
}

._appInfo_1cotr_815 {
    display: flex;
    align-items: center;
    gap: 12px;
}

._appIcon_1cotr_821 {
    width: 32px;
    height: 32px;
    /* Gradient Placeholder for Ansimssi Icon */
    background: linear-gradient(135deg, #4285F4, #9C27B0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

._checkIcon_1cotr_832 {
    color: #4285F4;
    /* Blue Check */
}

._broadcastActionBtn_1cotr_837 {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

._broadcastActionBtn_1cotr_837._start_1cotr_852 {
    background: rgba(60, 60, 60, 1);
    color: white;
}

._broadcastActionBtn_1cotr_837._stop_1cotr_857 {
    background: rgba(60, 60, 60, 1);
    color: #FF3B30;
    /* Red Text */
}

._broadcastActionBtn_1cotr_837:active {
    transform: scale(0.98);
    opacity: 0.8;
}

._timerText_1cotr_868 {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

._recordingIndicator_1cotr_874 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

._recordingDot_1cotr_885 {
    width: 24px;
    height: 24px;
    background: #FF3B30;
    /* Red */
    border-radius: 50%;
    transition: all 0.3s;
}

._recordingDot_1cotr_885._active_1cotr_214 {
    background: #FF3B30;
    border-radius: 4px;
    /* Square stop icon style? No, user screenshot shows circle */
    /* Wait, stop usually shows a square. But user screenshot shows red dot blink? */
    /* Screenshot 2 shows: Red blinking icon. */
    animation: _blink_1cotr_1 1s infinite alternate;
}

._recordingDot_1cotr_885._square_1cotr_903 {
    border-radius: 4px;
    width: 20px;
    height: 20px;
}

._swipeGuidance_1cotr_909 {
    margin-top: 16px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 20px;
    animation: _fadeIn_1cotr_1 1s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes _scaleUp_1cotr_1 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes _blink_1cotr_1 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.4;
    }
}

/* --- VISUAL GAZE (Mock Object Detection) --- */
._gazeOverlay_1cotr_944 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* Above video, below UI */
    overflow: hidden;
}

._gazeDot_1cotr_956 {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
    transition: top 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), left 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    animation: _pulseDot_1cotr_1 2s infinite;
}

._focusRing_1cotr_968 {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
    opacity: 0;
}

._focusRing_1cotr_968._active_1cotr_214 {
    opacity: 1;
    animation: _scanRing_1cotr_1 2s infinite;
}

@keyframes _pulseDot_1cotr_1 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

@keyframes _scanRing_1cotr_1 {
    0% {
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        border-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) scale(1);
    }
}

/* --- VOICE SETTINGS OVERLAY (Full Screen, Dark) --- */
._voiceSettingsOverlay_1cotr_1023 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    animation: _fadeIn_1cotr_1 0.3s ease-out;
}

._voiceHeader_1cotr_1036 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    padding-top: max(20px, env(safe-area-inset-top));
    height: 60px;
    z-index: 20;
}

._headerTitle_1cotr_1046 {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.5px;
}

._headerBtn_1cotr_1053 {
    background: none;
    border: none;
    color: #4285F4;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px;
}

._headerBtn_1cotr_1053:active {
    opacity: 0.7;
}

._voiceContent_1cotr_1067 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 80px;
    /* Space for footer */
}

/* Sample Bubble */
._sampleBubbleContainer_1cotr_1081 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: auto;
    /* Push to top section */
    padding-top: 40px;
}

._sampleBubble_1cotr_1081 {
    background: #1C1C1E;
    /* iOS Dark Gray */
    color: #E5E5EA;
    padding: 24px;
    border-radius: 20px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    max-width: 320px;
    width: 85%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: _slideUpFade_1cotr_1 0.4s ease-out;
}

@keyframes _slideUpFade_1cotr_1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Voice Carousel Info */
._voiceInfoContainer_1cotr_1118 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
    /* Space above footer */
    width: 100%;
}

._voiceName_1cotr_1127 {
    font-size: 2.2rem;
    /* Reduced from 2.8rem */
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

._voiceTag_1cotr_1136 {
    font-size: 1rem;
    color: #9CA3AF;
    margin-bottom: 24px;
}

/* Dots Indicator */
._voiceDots_1cotr_1143 {
    display: flex;
    gap: 8px;
}

._dot_1cotr_1148 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4B5563;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

._dot_1cotr_1148._active_1cotr_214 {
    background: #E5E7EB;
    width: 24px;
    /* Expanding dot */
    border-radius: 4px;
    /* Pill shape */
}

/* Navigation Touch Areas (Invisible) */
._navArea_1cotr_1165 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    /* [FIX] Wider touch area */
    height: 200px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    background: rgba(255, 255, 255, 0.05);
    /* Hidden by default but... */
}

._navArea_1cotr_1165:active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    /* Visual feedback */
}

._navArea_1cotr_1165._left_1cotr_1189 {
    left: 0;
}

._navArea_1cotr_1165._right_1cotr_1193 {
    right: 0;
}

._navArrow_1cotr_1197 {
    color: white;
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

/* --- 7. Bottom Deck (Controls) --- */
._bottomDeck_1cotr_1205 {
    /* [NEW] Transparent to blend with gradient */
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.05);

    /* SafeArea for dynamic Island */
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 30;
    backdrop-filter: blur(10px);

    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
}

/* Footer Toggle */
._voiceFooter_1cotr_1225 {
    position: absolute;
    bottom: 40px;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
}

._subtitleToggleBtn_1cotr_1235 {
    background: #1C1C1E;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    color: #E5E5EA;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

._subtitleToggleBtn_1cotr_1235:active {
    transform: scale(0.95);
    background: #2C2C2E;
}

/* --- DYNAMIC ACTION CHIP --- */
._actionChipContainer_1cotr_1257 {
    position: absolute;
    bottom: 95px;
    /* 조정: 120px -> 95px 컨트롤 덱 바로 위 안착 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    pointer-events: auto;
    /* 칩 컨테이너 내부는 클릭 가능 */
    animation: _floatUpCentered_1cotr_1 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

._transcript_1cotr_382 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 조정: 정중앙 배치 */
    width: 90%;
    max-width: 600px;
    text-align: center;
    z-index: 50;
    /* Base UI below action chips */
    color: white;
    pointer-events: none;
    /* Ignore clicks to let them fall through to the map */
}

._actionChip_1cotr_1257 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: white;
}

._actionChipIcon_1cotr_1299 {
    font-size: 1.2rem;
    animation: _subtleBounce_1cotr_1 2s infinite ease-in-out;
}

._actionChipText_1cotr_1304 {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.3px;
    white-space: nowrap;
    background: linear-gradient(90deg, #fff 0%, #ccc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: _shimmerText_1cotr_1 2s infinite linear;
}

@keyframes _floatUp_1cotr_1 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

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

@keyframes _floatUpCentered_1cotr_1 {
    from {
        opacity: 0;
        /* Maintain the X-axis centering while translating Y */
        transform: translate(-50%, 20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes _subtleBounce_1cotr_1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes _shimmerText_1cotr_1 {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* --- PLAN AA: QR Detection Popup (Bottom Sheet) --- */
._qrPopupOverlay_1cotr_1364 {
    position: fixed; /* [FIX] PWA/Native 에서 하단 바를 밀어올리지 않도록 absolute 대신 fixed 적용 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2147483647; /* 최상단 강제 */
    display: flex;
    align-items: flex-end; /* Align to bottom */
    justify-content: center;
    animation: _fadeIn_1cotr_1 0.2s ease-out forwards;
}

._qrPopupContainer_1cotr_1382 {
    width: 100%;
    /* [UI/UX REFLECT] 첨부 메뉴와 동일한 다크 그레이 배경 */
    background: var(--bg-secondary, #1C1C1E); 
    border-radius: 20px 20px 0 0;
    padding: 24px 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    animation: _slideUp_1cotr_1 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative; /* For Grabber positioning */
}

/* 첨부 메뉴 스타일의 상단 그랩 인디케이터 */
._qrPopupGrabber_1cotr_1396 {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

._qrPopupHeader_1cotr_1407 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.3rem 0.5rem;
    margin-bottom: 2px;
    margin-top: 4px;
}

._qrPopupTitle_1cotr_1416 {
    color: var(--text-secondary, #E5E5EA);
    font-size: 0.85rem;
    font-weight: 600;
}

._qrPopupDivider_1cotr_1422 {
    height: 1px;
    background-color: var(--border-subtle, rgba(255, 255, 255, 0.1));
    margin: 4px 8px 12px 8px;
    opacity: 0.5;
}

._qrPopupBody_1cotr_1429 {
    margin-bottom: 12px;
    padding: 0 8px;
}

._qrPopupUrl_1cotr_1434 {
    color: var(--accent-primary, #0A84FF);
    font-size: 0.95rem;
    word-break: break-all;
    margin: 0 0 8px 0;
    background: rgba(10, 132, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(10, 132, 255, 0.2);
}

._qrPopupDesc_1cotr_1445 {
    color: var(--text-tertiary, #9CA3AF);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* 첨부 메뉴 스타일의 리스트 액션 */
._qrPopupActionList_1cotr_1453 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._qrPopupActionItem_1cotr_1459 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-primary, #E5E5EA);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

._qrPopupActionItem_1cotr_1459:active,
._qrPopupActionItem_1cotr_1459:hover {
    background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
}

._qrPopupActionIcon_1cotr_1477 {
    flex-shrink: 0;
}

/* --- QR Popup Light Theme Support --- */
body.light-theme ._qrPopupOverlay_1cotr_1364 {
    background-color: rgba(0, 0, 0, 0.3);
}

body.light-theme ._qrPopupContainer_1cotr_1382 {
    background: #FFFFFF; /* 고대비 깔끔한 화이트 시트 */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

body.light-theme ._qrPopupGrabber_1cotr_1396 {
    background-color: rgba(0, 0, 0, 0.15);
}

body.light-theme ._qrPopupTitle_1cotr_1416 {
    color: #111827; /* Gray-900 */
}

body.light-theme ._qrPopupDivider_1cotr_1422 {
    background-color: rgba(0, 0, 0, 0.1);
}

body.light-theme ._qrPopupDesc_1cotr_1445 {
    color: #4B5563; /* Gray-600 */
}

body.light-theme ._qrPopupActionItem_1cotr_1459 {
    color: #111827; /* Gray-900 */
}

body.light-theme ._qrPopupActionItem_1cotr_1459:active,
body.light-theme ._qrPopupActionItem_1cotr_1459:hover {
    background-color: #F3F4F6; /* Gray-100 */
}

@keyframes _fadeIn_1cotr_1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes _slideUp_1cotr_1 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* --- PC/TABLET RESPONSIVE --- */
/* (Media queries specific to larger screens can be added here) */._snackbarWrapper_jflaz_1 {
    position: fixed;
    /* Center it horizontally */
    left: 50%;
    transform: translateX(-50%);
    /* Position above the fixed SearchBar area. This needs coordination with SearchBar. */
    bottom: 80px;
    z-index: 2147483647;
    /* Ensure it floats above almost everything */
    padding: 0;
    margin: 0;
    /* Default is hidden but we animate it in via React CSSTransition or simple state */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
}

._snackbarWrapper_jflaz_1._open_jflaz_19 {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

._snackbarContainer_jflaz_25 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gemini-bg-secondary, #2A2A2A);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--gemini-border, #333);
    border-radius: 24px;
    padding: 10px 16px;
    min-width: 250px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    /* Suggests it's clickable for the modal */
    gap: 12px;
}

._snackbarContent_jflaz_43 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

._snackbarIcon_jflaz_51 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gemini-primary, #4A90E2);
    flex-shrink: 0;
}

._snackbarMessage_jflaz_59 {
    color: var(--gemini-text-primary, #E3E3E3);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._closeButton_jflaz_68 {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    margin-right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gemini-text-secondary, #808080);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s;
}

._closeButton_jflaz_68:hover,
._closeButton_jflaz_68:active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--gemini-text-primary, #E3E3E3);
}

/* Adjustments for Desktop where SearchBar might be different height or position */
@media (min-width: 768px) {
    ._snackbarWrapper_jflaz_1 {
        bottom: 120px;
    }
}._overlay_14exz_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 220000;
    /* Higher than snackbar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    animation: _fadeIn_14exz_1 0.2s forwards ease-out;
}

@keyframes _fadeIn_14exz_1 {
    to {
        opacity: 1;
    }
}

._modal_14exz_26 {
    background: var(--bg-primary, #1e1e1e);
    border: 1px solid var(--border-subtle, #333);
    border-radius: 24px;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(20px) scale(0.95);
    animation: _slideUp_14exz_1 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes _slideUp_14exz_1 {
    to {
        transform: translateY(0) scale(1);
    }
}

._header_14exz_44 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
}

._title_14exz_51 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
}

._closeBtn_14exz_58 {
    background: none;
    border: none;
    color: var(--text-tertiary, #888);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

._closeBtn_14exz_58:hover {
    background: var(--bg-secondary, #2a2a2a);
    color: var(--text-primary, #fff);
}

._content_14exz_76 {
    padding: 0 24px 24px;
    font-size: 0.95rem;
    color: var(--text-secondary, #b3b3b3);
    line-height: 1.5;
}

._footer_14exz_83 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
    border-top: 1px solid var(--border-subtle, #333);
}

._cancelBtn_14exz_93 {
    background: transparent;
    color: var(--text-primary, #fff);
    border: none;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

._cancelBtn_14exz_93:hover {
    background: rgba(255, 255, 255, 0.1);
}

._confirmBtn_14exz_109 {
    background: var(--gemini-primary, #4A90E2);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
}

._confirmBtn_14exz_109:hover {
    background: #3A7BC8;
}

._confirmBtn_14exz_109:active {
    transform: scale(0.96);
}._overlay_1ahvk_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: _fadeIn_1ahvk_1 0.3s ease-out;
}

._modal_1ahvk_18 {
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: _slideUp_1ahvk_1 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

._content_1ahvk_31 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

._title_1ahvk_38 {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin: 0 0 0.5rem;
}

._subtitle_1ahvk_45 {
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.4;
    margin: 0 0 2rem;
}

._featureList_1ahvk_52 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2.5rem;
}

._featureItem_1ahvk_60 {
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

._iconWrap_1ahvk_71 {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._featureText_1ahvk_83 h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: white;
    font-weight: 500;
}

._featureText_1ahvk_83 p {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.3;
}

._allowBtn_1ahvk_97 {
    background: linear-gradient(135deg, var(--accent-primary, #007AFF) 0%, rgba(0, 122, 255, 0.8) 100%);
    color: white;
    border: none;
    border-radius: 20px;
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transition: transform 0.1s, opacity 0.2s;
    margin-bottom: 0.75rem;
}

._allowBtn_1ahvk_97:active {
    transform: scale(0.98);
}

._allowBtn_1ahvk_97:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

._skipBtn_1ahvk_121 {
    background: transparent;
    color: #888;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
}

._skipBtn_1ahvk_121:hover {
    color: white;
}

@keyframes _fadeIn_1ahvk_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes _slideUp_1ahvk_1 {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

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