@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

    :root {
      --bg-main: #08090d;
      --bg-panel: #0e111a;
      --bg-card: #121520;
      --border-color: #1e2436;
      --pink-primary: #ff2a6d;
      --pink-gradient: linear-gradient(135deg, #ff2a6d 0%, #ec185d 100%);
      --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
    }

    * { box-sizing: border-box; }

    body {
      font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: #08090d;
      color: #e2e8f0;
      line-height: 1.6;
      overflow-x: hidden;
    }

    .font-logo { font-family: 'Outfit', 'Pretendard', sans-serif; }

    :root { --header-h: 56px; }
    html { scroll-padding-top: var(--header-h); }
    .page { display: none; }
    .page.active { display: block; animation: fadeIn .2s ease-out both; }

    /* Compensate sticky header overlap for inner pages */
    #page-help,
    #page-contact,
    #page-terms,
    #page-privacy,
    #page-admin,
    #page-mypage,
    #page-detail {
      scroll-margin-top: var(--header-h);
    }

    .hero-glow-bg {
      background: radial-gradient(circle at 50% 35%, rgba(255, 42, 109, 0.15) 0%, rgba(20, 15, 30, 0.4) 40%, rgba(8, 9, 13, 1) 75%);
    }

    .card-hover {
      transition: all .24s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 42, 109, 0.45);
      box-shadow: 0 12px 35px rgba(255, 42, 109, 0.12), 0 4px 15px rgba(0, 0, 0, 0.6);
    }

    /* Main Category Nav Links */
    .main-cat-link {
      color: #94a3b8;
      font-size: 14px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: 9999px;
      white-space: nowrap;
      transition: all .18s ease;
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .main-cat-link:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.06);
    }
    .main-cat-link.active {
      color: #ffffff;
      border-color: #ff2a6d;
      background: rgba(255, 42, 109, 0.12);
      box-shadow: 0 0 15px rgba(255, 42, 109, 0.2);
    }

    /* 2nd Level Depth Tabs */
    .depth-tab-btn {
      color: #94a3b8;
      border-bottom: 2px solid transparent;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all .16s ease;
    }
    .depth-tab-btn:hover {
      color: #ffffff;
    }
    .depth-tab-btn.active {
      color: #ff2a6d;
      border-bottom-color: #ff2a6d;
      font-weight: 800;
    }

    /* 3rd Level Tech / Detail Pills */
    .pill-tab-btn {
      background: #141824;
      color: #94a3b8;
      border: 1px solid #1e2436;
      border-radius: 9999px;
      padding: 6px 14px;
      font-size: 12.5px;
      font-weight: 700;
      white-space: nowrap;
      transition: all .16s ease;
      cursor: pointer;
    }
    .pill-tab-btn:hover {
      color: #ffffff;
      background: #1c2236;
      border-color: #2a334d;
    }
    .pill-tab-btn.active {
      background: rgba(255, 42, 109, 0.15);
      border-color: #ff2a6d;
      color: #ff2a6d;
      font-weight: 800;
      box-shadow: 0 0 10px rgba(255, 42, 109, 0.15);
    }

    /* Filter Chips */
    .filter-btn-chip {
      background: #151926;
      color: #94a3b8;
      border: 1px solid #1e2436;
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .16s ease;
      text-align: center;
    }
    .filter-btn-chip:hover {
      color: #ffffff;
      background: #1c2236;
      border-color: #2e3752;
    }
    .filter-btn-chip.active {
      background: #ff2a6d;
      color: #ffffff;
      border-color: #ff2a6d;
      box-shadow: 0 4px 14px rgba(255, 42, 109, 0.35);
    }
    .filter-btn-chip.active-gold {
      background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
      color: #08090d;
      font-weight: 900;
      border-color: #f59e0b;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
    }

    .custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #0e111a; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #252d42; border-radius: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #374260; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    body.admin-mode::before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #ff2a6d, #38bdf8);
      content: '';
    }

    .admin-only { display: none !important; }
    body.admin-mode .admin-only { display: flex !important; }

    .admin-card-actions {
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }
    body.admin-mode .expert-card:hover .admin-card-actions {
      opacity: 1;
      pointer-events: auto;
    }

    .editable-field {
      border: 1px dashed #ff2a6d !important;
      background-color: rgba(255, 42, 109, 0.08) !important;
      border-radius: 6px !important;
      padding: 4px 8px !important;
      cursor: pointer !important;
      transition: all .2s ease !important;
    }
    .editable-field:hover {
      background-color: rgba(255, 42, 109, 0.18) !important;
    }

    .admin-edit-bar {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      background: rgba(14, 17, 26, 0.95);
      backdrop-filter: blur(12px);
      padding: 10px 24px;
      border-radius: 100px;
      border: 1px solid rgba(255, 42, 109, 0.3);
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 42, 109, 0.2);
      display: flex;
      align-items: center;
      gap: 14px;
      color: white;
    }

    .faq-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
    .faq-item.active .faq-panel { max-height: 250px; }
    .faq-item.active .faq-icon { transform: rotate(45deg); color: #ff2a6d; }

    /* =========================================================
       🔒 ADMIN / GUEST ACCESS CONTROL CSS
       ========================================================= */
    .admin-only {
      display: none !important;
    }
    body.admin-mode .admin-only {
      display: flex !important;
    }
    body.admin-mode div.admin-only.block-display,
    body.admin-mode #headerAdminBtns {
      display: block !important;
    }
    body:not(.admin-mode) .admin-only,
    body:not(.admin-mode) .admin-card-actions,
    body:not(.admin-mode) #headerAdminBtns,
    body:not(.admin-mode) #listAdminActionBar,
    body:not(.admin-mode) #listAdminBar,
    body:not(.admin-mode) #detailAdminBar,
    body:not(.admin-mode) #detailImageEditOverlay,
    body:not(.admin-mode) #detailUploadOpen,
    body:not(.admin-mode) #detailTabEditorArea,
    body:not(.admin-mode) #floatingDetailBar {
      display: none !important;
    }

    /* Floating Detail Edit Action Bar */
    #floatingDetailBar {
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }
    #floatingDetailBar * {
      white-space: nowrap !important;
    }

    /* Drag and Drop styles */
    .sub-drag-item, .pill-drag-item {
      transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
      user-select: none;
      -webkit-user-select: none;
    }
    .sub-drag-item:active, .pill-drag-item:active {
      cursor: grabbing;
    }
    .sub-drag-item.dragging, .pill-drag-item.dragging {
      opacity: 0.35;
      transform: scale(0.95);
    }
    .sub-drag-item.drag-over {
      ring: 2px solid #ff2a6d;
      background-color: rgba(255, 42, 109, 0.25);
      transform: scale(1.06);
    }