/* ========================================================= Jetdemo — SaaS console style UI Pretendard + Bootstrap 5 override ========================================================= */ :root { /* ==== Color tokens (override per-theme via [data-theme="…"]) ==== */ --jd-bg: #f7f8fa; --jd-surface: #ffffff; --jd-surface-2: #f1f3f6; --jd-border: #e4e7ec; --jd-border-strong: #d3d7df; --jd-text: #111827; --jd-text-muted: #5b6472; --jd-text-subtle: #8a93a2; --jd-accent: #3b5bdb; /* indigo-ish, single accent */ --jd-accent-soft: #eef1ff; --jd-warn: #b76e00; --jd-warn-soft: #fff7e6; --jd-success: #1f7a4d; /* "Strong" inverted fill — used for the logo mark, active chips/pager, and the secondary purchase button. Defaults to near-black on light themes and flips to near-white in dark mode so the elements remain legible. */ --jd-strong-bg: #111827; --jd-strong-text: #ffffff; /* placeholder thumb stripe */ --jd-thumb-a: #e9ecf1; --jd-thumb-b: #eef0f4; --jd-radius: 10px; --jd-radius-sm: 6px; --jd-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 1px rgba(16, 24, 40, .03); --jd-shadow-md: 0 4px 12px rgba(16, 24, 40, .06); --jd-header-h: 56px; --jd-sidebar-w: 240px; --jd-demo-h: 32px; color-scheme: light; } /* ============================================================ Themes (data-theme on ) Add a new theme by writing a new block here — JS picks it up automatically via setAttribute('data-theme', ''). ============================================================ */ [data-theme="dark"] { --jd-bg: #0f1115; --jd-surface: #181b22; --jd-surface-2: #232831; --jd-border: #2d323d; --jd-border-strong: #3a4050; --jd-text: #e7e9ee; --jd-text-muted: #a0a7b4; --jd-text-subtle: #6e7686; --jd-accent: #7c95ff; --jd-accent-soft: #1d2440; --jd-warn: #f4a72b; --jd-warn-soft: #2a210a; --jd-success: #4ade80; --jd-strong-bg: #e7e9ee; /* near-white pill so it stays visible on dark surface */ --jd-strong-text: #0f1115; --jd-thumb-a: #232831; --jd-thumb-b: #2b313c; --jd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .25); --jd-shadow-md: 0 6px 18px rgba(0, 0, 0, .45); color-scheme: dark; } /* ── Example future theme — blue (kept commented as a template) ── [data-theme="blue"] { --jd-accent: #1d4ed8; --jd-accent-soft: #dbeafe; … } */ html, body { background: var(--jd-bg); color: var(--jd-text); font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-feature-settings: 'ss06' on, 'cv11' on; -webkit-font-smoothing: antialiased; overflow-x: clip; margin: 0; } body { max-width: 100vw; } a { color: var(--jd-text); text-decoration: none; } a:hover { color: var(--jd-accent); } /* ---------- Top bar wrapper (banner + header) ---------- */ .jd-topbar { position: sticky; top: 0; z-index: 1031; transition: transform .28s cubic-bezier(.2, .7, .3, 1); will-change: transform; background: var(--jd-surface); } .jd-topbar.is-hidden { transform: translateY(-100%); } @media (min-width: 992px) { /* PC: always pinned, never hide */ .jd-topbar { position: fixed; left: 0; right: 0; top: 0; } .jd-topbar.is-hidden { transform: none; } /* Only reserve top padding on pages that actually contain a fixed topbar — login (and any standalone page) doesn't, so it stays flush at the top. */ body:has(.jd-topbar) { padding-top: calc(var(--jd-header-h) + var(--jd-demo-h)); } .jd-sidebar-desktop { top: calc(var(--jd-header-h) + var(--jd-demo-h)); } } /* ---------- Demo banner ---------- */ .jd-demo-banner { height: var(--jd-demo-h); background: var(--jd-warn-soft); color: var(--jd-warn); border-bottom: 1px solid #ffe6b8; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: -0.01em; } .jd-demo-banner .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jd-warn); display: inline-block; } /* ---------- Top header ---------- */ .jd-header { height: var(--jd-header-h); background: var(--jd-surface); border-bottom: 1px solid var(--jd-border); display: grid; /* Center column expands up to 640px; left/right split the rest equally. */ grid-template-columns: 1fr minmax(0, 640px) 1fr; grid-template-areas: "left center right"; align-items: center; padding: 0 12px; gap: 8px; position: relative; /* anchor for .jd-mobile-search overlay */ } /* PC: align logo mark with the sidebar's first icon (sidebar padding-left 8 + nav-item padding-left 10 = 18px). */ @media (min-width: 992px) { .jd-header { padding-left: 18px; } } .jd-header-left { grid-area: left; display: flex; align-items: center; gap: 8px; min-width: max-content; /* never shrink below logo+menu width */ } .jd-header .menu-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: transparent; color: var(--jd-text); } .jd-header .menu-btn:hover { background: var(--jd-surface-2); } .jd-logo { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; color: var(--jd-text); display: inline-flex; align-items: center; gap: 8px; } .jd-logo-accent { color: var(--jd-accent); } .jd-logo .badge-demo { font-size: 10px; font-weight: 700; background: var(--jd-accent-soft); color: var(--jd-accent); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.04em; } .jd-logo .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--jd-strong-bg); color: var(--jd-strong-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } /* search */ .jd-search { grid-area: center; width: 100%; margin: 0 8px; position: relative; display: flex; align-items: center; } .jd-search input { flex: 1; height: 38px; min-width: 0; border-radius: 8px 0 0 8px; border: 1px solid var(--jd-border); border-right: 0; background: var(--jd-surface-2); padding: 0 36px 0 14px; font-size: 14px; color: var(--jd-text); transition: border-color .12s, background .12s, box-shadow .12s; } .jd-search input:focus { outline: 0; background: var(--jd-surface); border-color: var(--jd-accent); box-shadow: 0 0 0 3px rgba(59, 91, 219, .12); z-index: 1; } .jd-search:focus-within .jd-search-btn { border-color: var(--jd-accent); } .jd-search-btn { flex-shrink: 0; width: 52px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jd-border); border-radius: 0 8px 8px 0; background: var(--jd-surface-2); color: var(--jd-text-muted); font-size: 16px; cursor: pointer; transition: background .12s, color .12s; } .jd-search-btn:hover { background: var(--jd-surface); color: var(--jd-text); } .jd-header-actions { grid-area: right; display: flex; align-items: center; gap: 4px; justify-self: end; min-width: max-content; /* never shrink below action buttons width */ } .jd-icon-btn { width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--jd-text-muted); position: relative; } .jd-icon-btn:hover { background: var(--jd-surface-2); color: var(--jd-text); } .jd-icon-btn .dot-red { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #d92d20; border: 2px solid #fff; } .jd-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #c7d2fe, #93c5fd); color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; margin-left: 4px; border: 1px solid var(--jd-border); } /* ---------- Layout shell ---------- */ .jd-shell { display: flex; min-height: calc(100vh - var(--jd-header-h) - var(--jd-demo-h)); } .jd-main { flex: 1; min-width: 0; max-width: 100%; padding: 20px 16px 64px; overflow-x: clip; } @media (min-width: 992px) { .jd-main { margin-left: var(--jd-sidebar-w); padding: 24px 28px 80px; } } /* ---------- Sidebar (desktop fixed) ---------- */ .jd-sidebar-desktop { display: none; position: fixed; top: calc(var(--jd-header-h) + var(--jd-demo-h)); bottom: 0; left: 0; width: var(--jd-sidebar-w); background: var(--jd-surface); border-right: 1px solid var(--jd-border); overflow-y: auto; padding: 12px 8px 24px; z-index: 1020; /* Reserve scrollbar gutter ALWAYS so content never shifts horizontally when the scrollbar appears on hover. Both engines need an always-present track. */ scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; /* thumb / track */ transition: scrollbar-color .15s ease; } .jd-sidebar-desktop::-webkit-scrollbar { width: 8px; background: transparent; } .jd-sidebar-desktop::-webkit-scrollbar-track { background: transparent; } .jd-sidebar-desktop::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } /* On hover: only the THUMB color changes — width/gutter stays identical so the nav items don't reflow horizontally. */ .jd-sidebar-desktop:hover { scrollbar-color: var(--jd-border-strong) transparent; } .jd-sidebar-desktop:hover::-webkit-scrollbar-thumb { background: var(--jd-border-strong); } .jd-sidebar-desktop:hover::-webkit-scrollbar-thumb:hover { background: var(--jd-text-muted); } @media (min-width: 992px) { .jd-sidebar-desktop { display: block; } } /* shared nav styling */ .jd-nav-section { padding: 10px 8px 6px; } .jd-nav-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jd-text-subtle); padding: 8px 10px 6px; } .jd-nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--jd-text); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; user-select: none; } .jd-nav-item .ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--jd-text-muted); flex-shrink: 0; } .jd-nav-item:hover { background: var(--jd-surface-2); } .jd-nav-item.active { background: var(--jd-accent-soft); color: var(--jd-accent); font-weight: 600; } .jd-nav-item.active .ico { color: var(--jd-accent); } .jd-nav-item .count { margin-left: auto; font-size: 11px; color: var(--jd-text-subtle); font-weight: 500; } .jd-nav-item .chev { margin-left: auto; color: var(--jd-text-subtle); transition: transform .15s; } .jd-nav-item[aria-expanded="true"] .chev { transform: rotate(90deg); } /* sub-menu (2차) */ .jd-subnav { margin: 2px 0 6px 8px; padding-left: 18px; border-left: 1px solid var(--jd-border); } .jd-subnav .jd-nav-item { padding: 6px 10px; font-size: 13px; font-weight: 400; color: var(--jd-text-muted); } .jd-subnav .jd-nav-item.active { background: transparent; color: var(--jd-accent); font-weight: 600; } .jd-sidebar-foot { margin-top: 12px; padding: 12px 14px; font-size: 11.5px; color: var(--jd-text-subtle); border-top: 1px solid var(--jd-border); } .jd-sidebar-foot a { color: var(--jd-text-muted); } /* offcanvas tweaks */ .offcanvas.jd-offcanvas { width: 280px; } .jd-offcanvas .offcanvas-header { border-bottom: 1px solid var(--jd-border); padding: 12px 14px; } .jd-offcanvas .offcanvas-body { padding: 8px; } /* ---------- Filter chips ---------- */ .jd-chips { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ -webkit-overflow-scrolling: touch; /* iOS momentum scroll */ } .jd-chips::-webkit-scrollbar { display: none; width: 0; height: 0; } .jd-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--jd-border); background: var(--jd-surface); font-size: 13px; font-weight: 500; color: var(--jd-text); cursor: pointer; white-space: nowrap; } .jd-chip:hover { background: var(--jd-surface-2); } .jd-chip.active { background: var(--jd-strong-bg); color: var(--jd-strong-text); border-color: var(--jd-strong-bg); } /* ---------- Page header ---------- */ .jd-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .jd-page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; } .jd-page-head .sub { font-size: 13px; color: var(--jd-text-muted); } .jd-toolbar { display: flex; gap: 8px; align-items: center; } /* ---------- Chips row (chips + view-toggle on PC) ---------- */ /* ---------- Page title row (variant: title + view-toggle on PC) ---------- Same horizontal alignment + sticky behavior as .jd-chips-row so callers can swap one for the other while keeping the grid+main untouched. */ .jd-page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 22px; } .jd-page-title { flex: 1; min-width: 0; } .jd-page-title h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; margin: 0 0 4px; color: var(--jd-text); display: inline-flex; align-items: center; gap: 10px; } .jd-page-title h1 i.bi { color: var(--jd-accent); font-size: 22px; } .jd-page-title .sub { font-size: 13px; color: var(--jd-text-muted); letter-spacing: -0.01em; } .jd-page-title .sub strong { color: var(--jd-text); font-weight: 700; } .jd-page-title-row .jd-view-toggle { flex-shrink: 0; align-self: flex-end; } /* Mobile: title row sticks below the topbar just like chips-row. */ @media (max-width: 991.98px) { .jd-page-title-row { position: sticky; top: calc(var(--jd-header-h) + var(--jd-demo-h)); z-index: 1028; background: var(--jd-bg); margin: -20px -16px 10px; padding: 10px 14px; transition: transform .28s cubic-bezier(.2, .7, .3, 1); } .jd-topbar.is-hidden ~ .jd-shell .jd-page-title-row { transform: translateY(calc(-100% - var(--jd-header-h) - var(--jd-demo-h))); } .jd-page-title h1 { font-size: 18px; } .jd-page-title h1 i.bi { font-size: 18px; } .jd-page-title .sub { font-size: 12px; } } .jd-chips-row { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 22px; } .jd-chips-row .jd-chips { flex: 1; min-width: 0; } .jd-chips-row .jd-view-toggle { flex-shrink: 0; } /* ── Chips wrap + nav arrows (PC only) ── */ .jd-chips-wrap { position: relative; flex: 1; min-width: 0; } .jd-chips-row > .jd-chips { /* fallback if no wrap is used */ flex: 1; min-width: 0; } .jd-chip-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--jd-surface); border: 1px solid var(--jd-border); color: var(--jd-text); display: none; /* shown via .is-visible */ align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 2; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); transition: background .12s, box-shadow .12s, opacity .15s; } .jd-chip-nav:hover { background: var(--jd-surface-2); box-shadow: 0 2px 6px rgba(16, 24, 40, .1); } .jd-chip-nav.is-visible { display: inline-flex; } .jd-chip-nav-prev { left: -4px; } .jd-chip-nav-next { right: -4px; } /* For rail wrappers, the arrow should sit at the vertical center of the THUMB (not the whole card with its title/sub text). Cards are 240px wide with a 16:9 thumb → thumb height = 135px → center at 67.5px from top. */ .jd-rail-wrap .jd-chip-nav { top: calc(240px * 9 / 32); transform: translateY(-50%); } /* Fade gradient on the edge being scrolled — only visible when nav button is. */ .jd-chips-wrap::before, .jd-chips-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .15s; } .jd-chips-wrap::before { left: 0; background: linear-gradient(to right, var(--jd-bg), transparent); } .jd-chips-wrap::after { right: 0; background: linear-gradient(to left, var(--jd-bg), transparent); } .jd-chips-wrap.has-prev::before { opacity: 1; } .jd-chips-wrap.has-next::after { opacity: 1; } /* Hide nav arrows on mobile — chips already scroll by swipe. */ @media (max-width: 991.98px) { .jd-chip-nav { display: none !important; } .jd-chips-wrap::before, .jd-chips-wrap::after { display: none; } } /* PC: keep desktop tidy (no special offset; .jd-main padding-top already aligns the chips with the sidebar's first item now that the empty .jd-page-head is gone). */ /* ── Mobile: chips-row sticks below the topbar and slides up with it on hide. ── */ @media (max-width: 991.98px) { .jd-chips-row { position: sticky; top: calc(var(--jd-header-h) + var(--jd-demo-h)); z-index: 1028; background: var(--jd-bg); /* Collapse .jd-main top padding (20px) and reach viewport edges. */ margin: -20px -16px 10px; padding: 8px 14px; transition: transform .28s cubic-bezier(.2, .7, .3, 1); } /* When topbar auto-hides, slide chips off-screen above with it. */ .jd-topbar.is-hidden ~ .jd-shell .jd-chips-row { transform: translateY(calc(-100% - var(--jd-header-h) - var(--jd-demo-h))); } } /* ---------- View toggle (grid / list) ---------- */ .jd-view-toggle { display: inline-flex; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 8px; overflow: hidden; } .jd-view-toggle button { background: transparent; border: 0; padding: 7px 11px; color: var(--jd-text-muted); display: inline-flex; align-items: center; font-size: 14px; line-height: 1; } .jd-view-toggle button:hover { background: var(--jd-surface-2); color: var(--jd-text); } .jd-view-toggle button.active { background: var(--jd-strong-bg); color: var(--jd-strong-text); } .jd-view-toggle button + button { border-left: 1px solid var(--jd-border); } /* ---------- Card grid ---------- */ .jd-grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media (min-width: 1400px) { .jd-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* Mobile: force 2 columns down to very narrow widths. Single column only kicks in below ~340px. */ @media (max-width: 575.98px) { .jd-grid { /* minmax(0, 1fr) lets grid items shrink below their content width — without this, an unbreakable CJK title can push the column past the viewport. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } /* And every card must opt into shrinking too. */ .jd-grid > .jd-card { min-width: 0; } /* Long Korean titles often have no spaces — allow breaking anywhere so the text wraps inside the narrow column instead of forcing its width. */ .jd-grid .jd-card-title { overflow-wrap: anywhere; word-break: break-word; } /* List view shouldn't be 2 columns — restore default flex stack on mobile. */ .jd-grid.is-list { grid-template-columns: 1fr; } } @media (max-width: 339.98px) { .jd-grid { grid-template-columns: 1fr; } } /* Mobile: force card layout regardless of stored .is-list — the toggle is hidden anyway. */ @media (max-width: 991.98px) { .jd-grid.is-list { display: grid; flex-direction: initial; background: transparent; border: 0; border-radius: 0; gap: 18px 14px; } } .jd-card { display: flex; flex-direction: column; cursor: pointer; border-radius: var(--jd-radius); overflow: visible; background: transparent; transition: transform .22s cubic-bezier(.2, .8, .3, 1); } .jd-card:hover { transform: translateY(-4px); } /* ===== YouTube-style hover preview on the thumbnail ===== - Card lifts up; thumb gets a stronger shadow + accent ring - The diagonal stripe pattern slides to simulate playback - A progress bar grows along the bottom edge - Time badge fades; a "재생중" pill + mute/CC controls fade in - All disabled in list view (.jd-grid.is-list) */ .jd-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--jd-radius); background: repeating-linear-gradient(135deg, var(--jd-thumb-a) 0 12px, var(--jd-thumb-b) 12px 24px); background-size: 34px 34px; border: 1px solid var(--jd-border); overflow: hidden; transition: box-shadow .22s ease, border-color .22s ease; } .jd-card:hover .jd-thumb { box-shadow: 0 16px 32px -10px rgba(16, 24, 40, .22); border-color: var(--jd-accent); animation: jd-playback-stripe 1.6s linear infinite; } @keyframes jd-playback-stripe { from { background-position: 0 0; } to { background-position: 34px 0; } } /* On hover: hide the time badge — no replacement label, only the stripe animation plays */ .jd-card .jd-thumb .badge-time { transition: opacity .15s; } .jd-card:hover .jd-thumb .badge-time { opacity: 0; } /* hover-only fake controls (mute / CC) — pure CSS, no markup change */ .jd-card .jd-thumb .ph-label { transition: opacity .15s; } .jd-card:hover .jd-thumb .ph-label { opacity: 0; } /* slight title color shift on hover */ .jd-card .jd-card-title { transition: color .15s; } .jd-card:hover .jd-card-title { color: var(--jd-accent); } /* List view: disable all hover-preview effects */ .jd-grid.is-list .jd-card { transition: background .12s; } .jd-grid.is-list .jd-card:hover { transform: none; } .jd-grid.is-list .jd-card:hover .jd-thumb { box-shadow: none; border-color: var(--jd-border); animation: none; } .jd-grid.is-list .jd-card:hover .jd-card-title { color: var(--jd-text); } .jd-grid.is-list .jd-card:hover .badge-time { opacity: 1; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .jd-card, .jd-thumb { transition: none; } .jd-card:hover { transform: none; } .jd-card:hover .jd-thumb { animation: none; } } .jd-thumb .badge-time { position: absolute; bottom: 8px; right: 8px; background: rgba(17, 24, 39, .85); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; } .jd-thumb .badge-hd { position: absolute; top: 8px; left: 8px; background: rgba(17, 24, 39, .85); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.05em; } .jd-thumb .ph-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--jd-text-subtle); letter-spacing: 0.04em; } .jd-card-body { padding: 10px 2px 0; } .jd-card-meta { min-width: 0; flex: 1; } .jd-card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--jd-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } .jd-card-sub { font-size: 12.5px; color: var(--jd-text-muted); line-height: 1.4; } .jd-card-sub .sep { margin: 0 4px; color: var(--jd-text-subtle); } /* ---------- New list-view-only card pieces (hidden in card view by default) ---------- */ .jd-card-cat, .jd-card-status, .jd-card-mark, .jd-card-adult, .jd-card-new, .jd-card-comments, .jd-card-size, .jd-card-uploader { display: none; } .jd-card-thumb-wrap { display: block; } /* card view: keep the thumb wrap visible */ /* ---------- List view (toggle target on .jd-grid) ---------- */ .jd-grid.is-list { display: flex; flex-direction: column; gap: 0; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 10px; overflow: hidden; font-size: 13px; } /* Sticky header row */ .jd-grid-header { display: none; } .jd-grid.is-list .jd-grid-header { display: grid; grid-template-columns: var(--jd-list-cols); align-items: center; gap: 12px; padding: 10px 16px; background: var(--jd-surface-2); border-bottom: 1px solid var(--jd-border); font-size: 12px; font-weight: 700; color: var(--jd-text); letter-spacing: -0.01em; } .jd-grid.is-list .jd-grid-header span { text-align: center; } .jd-grid.is-list .jd-grid-header span:first-child { text-align: center; } /* Column template (shared by header + each row). 제목 | 용량 | 분류 | 닉네임 */ .jd-grid.is-list { --jd-list-cols: minmax(0, 1fr) 88px 110px 140px; } .jd-grid.is-list .jd-card { display: grid; grid-template-columns: var(--jd-list-cols); align-items: center; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--jd-border); border-radius: 0; background: transparent; font-size: 13px; cursor: pointer; transition: background .12s; } .jd-grid.is-list .jd-card:last-child { border-bottom: 0; } .jd-grid.is-list .jd-card:nth-of-type(even) { background: var(--jd-surface-2); } .jd-grid.is-list .jd-card:hover { background: var(--jd-accent-soft); } /* hide card-view-only pieces */ .jd-grid.is-list .jd-card-thumb-wrap, .jd-grid.is-list .jd-card-sub { display: none; } /* Title cell — flex row with status icons + title + inline badges */ .jd-grid.is-list .jd-card-body { display: contents; } .jd-grid.is-list .jd-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; } /* status / cc / 19 icons inline before title */ .jd-grid.is-list .jd-card-status, .jd-grid.is-list .jd-card-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 14px; flex-shrink: 0; } .jd-grid.is-list .jd-card-status { color: var(--jd-accent); } .jd-grid.is-list .jd-card-status.is-off { color: var(--jd-text-subtle); } .jd-grid.is-list .jd-card-mark { color: var(--jd-text-muted); } .jd-grid.is-list .jd-card-adult { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; flex-shrink: 0; line-height: 1; } .jd-grid.is-list .jd-card-title { display: inline-block; font-size: 13.5px; font-weight: 500; color: var(--jd-text); letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; margin: 0; } .jd-grid.is-list .jd-card-title.is-premium { color: #e11d48; } .jd-grid.is-list .jd-card-new { display: inline-flex; width: 16px; height: 16px; background: var(--jd-warn); color: #fff; border-radius: 3px; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } .jd-grid.is-list .jd-card-comments { display: inline-block; color: #e11d48; font-size: 12px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Right-side cells */ .jd-grid.is-list .jd-card-size { display: inline-block; font-size: 12.5px; color: var(--jd-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; } .jd-grid.is-list .jd-card-cat { display: inline-block; font-size: 12.5px; color: var(--jd-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jd-grid.is-list .jd-card-uploader { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 12.5px; color: var(--jd-text); white-space: nowrap; overflow: hidden; padding-left: 4px; } .jd-grid.is-list .jd-card-uploader .lvl { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; flex-shrink: 0; font-size: 12px; } .jd-grid.is-list .jd-card-uploader .lvl-1 { color: var(--jd-accent); } .jd-grid.is-list .jd-card-uploader .lvl-2 { color: #f59e0b; } .jd-grid.is-list .jd-card-uploader .lvl-3 { color: #ea580c; letter-spacing: -1px; } .jd-grid.is-list .jd-card-uploader .lvl-4 { color: #16a34a; } .jd-grid.is-list .jd-card-uploader .lvl-5 { color: #d97706; letter-spacing: -1px; } .jd-grid.is-list .jd-card-uploader .name { overflow: hidden; text-overflow: ellipsis; } /* Mobile list-view: header hidden + tighter padding. We keep all 4 columns visible — cat/uploader stay shown so the layout matches the reference image. */ @media (max-width: 991.98px) { .jd-grid.is-list .jd-grid-header { display: none; } .jd-grid.is-list { --jd-list-cols: minmax(0, 1fr) 72px 80px 90px; } .jd-grid.is-list .jd-card { padding: 8px 10px; gap: 8px; font-size: 12px; } .jd-grid.is-list .jd-card-title { font-size: 12.5px; } .jd-grid.is-list .jd-card-size, .jd-grid.is-list .jd-card-cat, .jd-grid.is-list .jd-card-uploader { font-size: 11.5px; } .jd-grid.is-list .jd-card-uploader .name { max-width: 60px; } } /* Phone < 576px: hide uploader column (size + cat stay) */ @media (max-width: 575.98px) { .jd-grid.is-list { --jd-list-cols: minmax(0, 1fr) 64px 70px; } .jd-grid.is-list .jd-card-uploader { display: none; } } /* ---------- Detail page ---------- */ .jd-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .jd-detail-main, .jd-aside { min-width: 0; } @media (min-width: 1200px) { .jd-detail { grid-template-columns: minmax(0, 1fr) 380px; } } .jd-player { aspect-ratio: 16 / 9; background: #0e1118; border-radius: var(--jd-radius); position: relative; overflow: hidden; } /* ── Mobile: pin the player below the topbar so it's always visible while scrolling. ── `position: fixed` (not sticky) keeps the player at the top all the way to the end of the page, regardless of which container's bottom edge passes the viewport top. A matching `.jd-player-spacer` reserves layout space where the player would have been. */ @media (max-width: 991.98px) { .jd-detail-main > .jd-player { position: fixed; top: calc(var(--jd-header-h) + var(--jd-demo-h)); left: 0; right: 0; margin: 0; z-index: 1029; border-radius: 0; transition: top .28s cubic-bezier(.2, .7, .3, 1); } /* When the topbar auto-hides, the player slides up to fill the very top. */ .jd-topbar.is-hidden ~ .jd-shell .jd-detail-main > .jd-player { top: 0; } /* Spacer occupies the player's layout space so the title/content sits directly below the fixed player. The negative top/side margins extend the spacer into .jd-main's surrounding padding, aligning content right under the player. */ .jd-detail-main > .jd-player-spacer { height: var(--jd-player-h, 56.25vw); margin: -20px -16px 0; } /* Tighten the gap between player and title to match section-spacing elsewhere. */ .jd-detail-main > .jd-title-row { margin-top: 12px; } } /* Desktop: no fixed-player and no spacer needed. */ @media (min-width: 992px) { .jd-detail-main > .jd-player-spacer { display: none; } } /* ---------- YouTube-style filter tabs ---------- */ /* shared chip-bar appearance for both placements */ .jd-tabbar { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .jd-tabbar::-webkit-scrollbar { display: none; } /* aside-position tabs: above the up-next list */ .jd-aside-tabs { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--jd-border); } /* Mobile: once the user scrolls down to the aside tabs, pin them right below the (fixed) player so they stay attached and visible while scrolling through up-next. */ @media (max-width: 991.98px) { .jd-aside-tabs { position: sticky; top: calc(var(--jd-header-h) + var(--jd-demo-h) + var(--jd-player-h, 56.25vw)); z-index: 1028; margin: 0 -16px 14px; padding: 8px 16px; background: var(--jd-surface); transition: top .28s cubic-bezier(.2, .7, .3, 1); } /* When the topbar auto-hides, shift the pinned tabs up alongside the player. */ .jd-topbar.is-hidden ~ .jd-shell .jd-aside-tabs { top: var(--jd-player-h, 56.25vw); } } .jd-player .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .jd-player .play .btn-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; } .jd-player .stripe { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 14px, rgba(255, 255, 255, .04) 14px 28px); } .jd-player .ph-label { position: absolute; top: 12px; left: 14px; font-family: ui-monospace, monospace; font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: 0.04em; } /* "1분 미리보기" label — pinned to player top-left. Removed once .is-purchased. */ .jd-preview-label { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; background: rgba(17, 24, 39, .85); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px); } body.is-purchased .jd-preview-label { display: none; } /* ----- Buy actions (다운로드 / 바로보기) ----- */ .jd-buy-actions { display: flex; gap: 8px; margin: 14px 0 0; z-index: 1028; } .jd-buy-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 0; white-space: nowrap; } .jd-buy-btn .price { font-size: 12px; font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; } .jd-buy-btn.jd-buy-watch { background: var(--jd-accent); color: #fff; } .jd-buy-btn.jd-buy-watch:hover { background: #2c47b3; } .jd-buy-btn.jd-buy-download { background: var(--jd-strong-bg); color: var(--jd-strong-text); } .jd-buy-btn.jd-buy-download:hover { background: #000; } /* once purchased, watch becomes a plain "재생" entry — no price */ body.is-purchased .jd-buy-watch .price, body.is-purchased .jd-buy-download .price { display: none; } /* Mobile: stick the buy actions right below the fixed player. They naturally release when .jd-detail-main ends (i.e. before .jd-aside / 다음으로 볼만한 콘텐츠). */ @media (max-width: 991.98px) { .jd-buy-actions { position: sticky; top: calc(var(--jd-header-h) + var(--jd-demo-h) + var(--jd-player-h, 56.25vw)); z-index: 1028; margin: 0 -16px; padding: 8px 12px; background: var(--jd-surface); border-bottom: 1px solid var(--jd-border); gap: 6px; transition: top .28s cubic-bezier(.2, .7, .3, 1); } .jd-buy-actions .jd-buy-btn { padding: 9px 12px; font-size: 13.5px; border-radius: 6px; } /* When the topbar auto-hides, the buy actions slide up alongside the player. */ .jd-topbar.is-hidden ~ .jd-shell .jd-buy-actions { top: var(--jd-player-h, 56.25vw); } } .jd-title-row { margin-top: 14px; } .jd-title-row h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; margin: 0 0 10px; } .jd-meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .jd-uploader { display: flex; align-items: center; gap: 10px; } .jd-uploader .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #c7d2fe, #93c5fd); display: inline-flex; align-items: center; justify-content: center; color: #1e3a8a; font-weight: 700; font-size: 14px; } .jd-uploader .name { font-size: 14px; font-weight: 600; } .jd-uploader .sub { font-size: 12px; color: var(--jd-text-subtle); } .jd-action-group { display: inline-flex; align-items: stretch; background: var(--jd-surface-2); border: 1px solid var(--jd-border); border-radius: 999px; overflow: hidden; } .jd-action-group .btn { border-radius: 0; border: 0; background: transparent; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--jd-text); display: inline-flex; align-items: center; gap: 6px; border-right: 1px solid var(--jd-border); } .jd-action-group .btn:last-child { border-right: 0; } .jd-action-group .btn:hover { background: #e9ecf1; } .jd-btn-primary { background: var(--jd-accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .jd-btn-primary:hover { background: #2c47b3; color: #fff; } .jd-btn-ghost { background: var(--jd-surface); color: var(--jd-text); border: 1px solid var(--jd-border); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500; } .jd-btn-ghost:hover { background: var(--jd-surface-2); } /* description box */ .jd-desc { margin-top: 14px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 14px 16px; font-size: 13.5px; color: var(--jd-text); line-height: 1.55; } .jd-desc .stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--jd-text-muted); margin-bottom: 8px; font-variant-numeric: tabular-nums; } .jd-desc .stats strong { color: var(--jd-text); font-weight: 700; } .jd-desc .tag { display: inline-block; font-size: 12px; color: var(--jd-accent); margin-right: 8px; } /* file table */ .jd-files { margin-top: 14px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); overflow: hidden; } .jd-files header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--jd-border); font-size: 13px; font-weight: 600; } .jd-files header .meta { font-weight: 400; color: var(--jd-text-muted); font-size: 12.5px; } /* Collapse all but the first 3 file rows; expand via .jd-files-more button. */ .jd-files.is-collapsed .jd-file-row:nth-child(n+4) { display: none; } /* "더보기 / 접기" footer button */ .jd-files-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--jd-text-muted); background: var(--jd-surface); border: 0; border-top: 1px solid var(--jd-border); cursor: pointer; } .jd-files-more:hover { background: var(--jd-surface-2); color: var(--jd-text); } .jd-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--jd-border); font-size: 13px; } .jd-file-row:last-child { border-bottom: 0; } .jd-file-row .name { display: flex; align-items: center; gap: 10px; min-width: 0; } .jd-file-row .name .ico { width: 28px; height: 28px; border-radius: 6px; background: var(--jd-surface-2); color: var(--jd-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .jd-file-row .name .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jd-file-row .size { color: var(--jd-text-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; } .jd-file-row .btn-dl { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; } .jd-file-row .btn-dl:hover { background: var(--jd-accent-soft); color: var(--jd-accent); border-color: var(--jd-accent); } /* ---------- Recommendation rails (Netflix-style strips) ---------- */ .jd-rail { margin-top: 28px; } .jd-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .jd-rail-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin: 0; } .jd-rail-head .sub { font-size: 12px; color: var(--jd-text-subtle); } .jd-rail-scroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ -webkit-overflow-scrolling: touch; /* iOS momentum */ } .jd-rail-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } .jd-rail-card { flex: 0 0 auto; width: 240px; scroll-snap-align: start; } .jd-rail-card .jd-thumb { aspect-ratio: 16 / 9; border-radius: 8px; } .jd-rail-card .name { font-size: 13px; font-weight: 600; margin-top: 8px; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jd-rail-card .sub { font-size: 11.5px; color: var(--jd-text-muted); margin-top: 2px; } .jd-rail-card .match { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--jd-success); } /* people rail */ .jd-people-rail { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 6px; } .jd-people-card { flex: 0 0 auto; text-align: center; width: 84px; } .jd-people-card .face { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #e9ecf1, #d3d7df); border: 1px solid var(--jd-border); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; color: var(--jd-text-muted); font-weight: 700; font-size: 18px; } .jd-people-card .pname { font-size: 12px; font-weight: 600; line-height: 1.25; } .jd-people-card .psub { font-size: 11px; color: var(--jd-text-subtle); margin-top: 2px; } /* ---------- Comments ---------- */ .jd-comments { margin-top: 28px; } .jd-comments h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 14px; } .jd-comment-form { display: flex; gap: 10px; margin-bottom: 18px; } .jd-comment-form .av { width: 36px; height: 36px; border-radius: 50%; background: var(--jd-surface-2); color: var(--jd-text-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .jd-comment-form .write { flex: 1; display: flex; flex-direction: column; gap: 8px; } .jd-comment-form input { border: 0; border-bottom: 1px solid var(--jd-border); background: transparent; padding: 6px 0; font-size: 14px; outline: none; } .jd-comment-form input:focus { border-bottom-color: var(--jd-accent); } .jd-comment-form .actions { display: flex; justify-content: flex-end; gap: 8px; } .jd-comment { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--jd-border); } .jd-comment .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #c7d2fe, #93c5fd); color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .jd-comment .body { min-width: 0; flex: 1; } .jd-comment .head { font-size: 12.5px; color: var(--jd-text-muted); margin-bottom: 2px; } .jd-comment .head strong { color: var(--jd-text); font-weight: 600; margin-right: 6px; } .jd-comment .text { font-size: 13.5px; line-height: 1.5; } .jd-comment .reacts { margin-top: 6px; display: flex; gap: 12px; font-size: 12px; color: var(--jd-text-muted); } .jd-comment .reacts span { cursor: pointer; } /* ---------- Right column on detail ---------- */ .jd-aside h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; } .jd-aside-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; cursor: pointer; } .jd-aside-card .jd-thumb { aspect-ratio: 16/9; border-radius: 8px; } .jd-aside-card .name { font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jd-aside-card .sub { font-size: 12px; color: var(--jd-text-muted); line-height: 1.4; } /* ---------- Form page ---------- */ .jd-form-card { max-width: 760px; margin: 0 auto; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 24px; box-shadow: var(--jd-shadow-sm); } .jd-form-card h1 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; } .jd-form-card .sub { font-size: 13px; color: var(--jd-text-muted); margin-bottom: 20px; } .jd-field { margin-bottom: 18px; } .jd-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--jd-text); } .jd-field label .req { color: #d92d20; margin-left: 2px; } .jd-field .help { font-size: 12px; color: var(--jd-text-subtle); margin-top: 6px; } .jd-input, .jd-select, .jd-textarea { width: 100%; border: 1px solid var(--jd-border); background: #fff; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--jd-text); font-family: inherit; } .jd-input:focus, .jd-select:focus, .jd-textarea:focus { outline: 0; border-color: var(--jd-accent); box-shadow: 0 0 0 3px rgba(59, 91, 219, .12); } .jd-textarea { resize: vertical; min-height: 140px; line-height: 1.55; } .jd-dropzone { border: 1.5px dashed var(--jd-border-strong); border-radius: 10px; padding: 26px 16px; text-align: center; background: var(--jd-surface-2); cursor: pointer; } .jd-dropzone:hover { border-color: var(--jd-accent); background: var(--jd-accent-soft); } .jd-dropzone .big { font-size: 14px; font-weight: 600; margin-bottom: 2px; } .jd-dropzone .sm { font-size: 12px; color: var(--jd-text-muted); } .jd-row-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--jd-border); padding-top: 16px; margin-top: 8px; } /* pagination */ .jd-pager { display: flex; justify-content: center; gap: 4px; margin-top: 32px; } .jd-pager a, .jd-pager span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jd-border); background: var(--jd-surface); border-radius: 6px; font-size: 13px; color: var(--jd-text); padding: 0 8px; font-variant-numeric: tabular-nums; } .jd-pager .active { background: var(--jd-strong-bg); color: var(--jd-strong-text); border-color: var(--jd-strong-bg); } .jd-pager a:hover { background: var(--jd-surface-2); } /* ---------- More menu (dropdown) ---------- */ .jd-menu.dropdown-menu { min-width: 220px; padding: 6px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04); font-size: 13px; color: var(--jd-text); } .jd-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--jd-text); white-space: nowrap; } .jd-menu .dropdown-item i { width: 16px; color: var(--jd-text-muted); font-size: 14px; flex-shrink: 0; text-align: center; } .jd-menu .dropdown-item:hover, .jd-menu .dropdown-item:focus { background: var(--jd-surface-2); color: var(--jd-text); } .jd-menu .dropdown-item:hover i, .jd-menu .dropdown-item:focus i { color: var(--jd-text); } .jd-menu .dropdown-item.danger { color: #d92d20; } .jd-menu .dropdown-item.danger i { color: #d92d20; } .jd-menu .dropdown-item.danger:hover { background: #fef3f2; color: #b42318; } .jd-menu .dropdown-divider { margin: 4px 4px; border-top: 1px solid var(--jd-border); } .jd-menu .menu-section { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jd-text-subtle); padding: 8px 10px 4px; } .jd-menu .menu-meta { font-size: 11px; color: var(--jd-text-subtle); margin-left: auto; } /* User menu (avatar dropdown) — extends .jd-menu */ .jd-avatar { cursor: pointer; } .jd-user-menu.dropdown-menu { min-width: 260px; padding: 0; margin-top: 6px; } .jd-user-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--jd-border); } .jd-user-head .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #c7d2fe, #93c5fd); color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .jd-user-head .info { min-width: 0; flex: 1; } .jd-user-head .name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } .jd-user-head .sub { font-size: 11.5px; color: var(--jd-text-muted); overflow: hidden; text-overflow: ellipsis; } .jd-user-points { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--jd-border); background: var(--jd-surface-2); } .jd-user-points .label { color: var(--jd-text-muted); display: inline-flex; align-items: center; gap: 6px; } .jd-user-points .value { font-weight: 700; font-variant-numeric: tabular-nums; } .jd-user-points .charge { font-size: 11.5px; font-weight: 600; color: var(--jd-accent); background: var(--jd-accent-soft); border-radius: 4px; padding: 3px 8px; border: 0; margin-left: 8px; } .jd-user-menu .items { padding: 6px; } /* ---------- Mobile search overlay ---------- */ .jd-mobile-search { position: absolute; inset: 0; background: var(--jd-surface); display: none; align-items: center; padding: 0 6px; gap: 4px; z-index: 2; } .jd-header.is-searching .jd-mobile-search { display: flex; } .jd-header.is-searching > .jd-header-left, .jd-header.is-searching > .jd-search, .jd-header.is-searching > .jd-header-actions { visibility: hidden; } .jd-mobile-search input { flex: 1; height: 40px; border: 0; outline: 0; font-size: 15px; background: transparent; color: var(--jd-text); padding: 0 4px; min-width: 0; } .jd-mobile-search input::placeholder { color: var(--jd-text-subtle); } .jd-mobile-search button { width: 40px; height: 40px; background: transparent; border: 0; color: var(--jd-text-muted); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } .jd-mobile-search button:hover { color: var(--jd-text); background: var(--jd-surface-2); } .jd-mobile-search button[data-jd-search-clear] { visibility: hidden; } .jd-mobile-search.has-text button[data-jd-search-clear] { visibility: visible; } /* ---------- .not_use — disabled link overlay (Demo only) ---------- Marks an as visually disabled. On hover the ::after pseudo covers the whole link and applies `backdrop-filter: blur()` so the underlying element is blurred WITHOUT touching the badge text — the "DEMO" label sits inside the same pseudo, on top of the blur, so it stays sharp. */ .not_use { position: relative; cursor: not-allowed; isolation: isolate; } .not_use::after { content: 'DEMO'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: rgba(17, 24, 39, .28); /* lighter dim than before */ backdrop-filter: blur(1.5px); /* blurs ONLY what's behind */ -webkit-backdrop-filter: blur(1.5px); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 2; } .not_use:hover::after, .not_use:focus-visible::after { opacity: 1; } /* Prevent any inner element from intercepting clicks AND let the pseudo overlay cover the full link area cleanly. */ .not_use > * { pointer-events: none; } /* misc */ .jd-tag-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--jd-accent-soft); color: var(--jd-accent); letter-spacing: 0.02em; } .jd-tag-pill.warn { background: var(--jd-warn-soft); color: var(--jd-warn); } .jd-tag-pill.muted { background: var(--jd-surface-2); color: var(--jd-text-muted); } /* =========================================================== Auth (login) page =========================================================== */ .jd-auth-bg { min-height: 100vh; display: flex; flex-direction: column; background: var(--jd-bg); } .jd-auth-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px 64px; } .jd-auth-card { width: 100%; max-width: 380px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 12px; padding: 28px; box-shadow: var(--jd-shadow-sm); } .jd-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; } .jd-auth-brand .mark { width: 44px; height: 44px; border-radius: 12px; background: var(--jd-strong-bg); color: var(--jd-strong-text); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; } .jd-auth-brand .name { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; display: inline-flex; align-items: center; gap: 8px; } .jd-auth-brand .name .badge-demo { font-size: 10px; font-weight: 700; background: var(--jd-accent-soft); color: var(--jd-accent); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.04em; } .jd-auth-card h1 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin: 0 0 4px; } .jd-auth-card .sub { text-align: center; font-size: 12.5px; color: var(--jd-text-muted); margin-bottom: 20px; } .jd-auth-card .jd-field { margin-bottom: 14px; } .jd-auth-card .jd-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--jd-text); } .jd-auth-alert { display: flex; gap: 8px; align-items: flex-start; background: #fef3f2; border: 1px solid #fecdca; color: #b42318; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 16px; line-height: 1.4; } .jd-auth-alert i { margin-top: 1px; } .jd-auth-submit { width: 100%; background: var(--jd-accent); color: #fff; border: 0; border-radius: 8px; padding: 11px 16px; font-size: 14px; font-weight: 600; margin-top: 6px; cursor: pointer; } .jd-auth-submit:hover { background: #2c47b3; } .jd-auth-submit:disabled { background: var(--jd-border-strong); cursor: not-allowed; } .jd-auth-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 4px; font-size: 12.5px; } .jd-auth-row .form-check { margin: 0; padding-left: 22px; min-height: 0; } .jd-auth-row .form-check label { font-weight: 400; color: var(--jd-text-muted); } .jd-auth-row a { color: var(--jd-text-muted); } .jd-auth-row a:hover { color: var(--jd-accent); } .jd-auth-demo { margin-top: 22px; padding: 14px 16px; border-radius: 8px; background: var(--jd-warn-soft); border: 1px solid #ffe6b8; color: var(--jd-warn); font-size: 12px; line-height: 1.55; } .jd-auth-demo h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; } .jd-auth-demo-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; } .jd-auth-demo-list button { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, .6); border: 1px solid #ffe6b8; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-family: ui-monospace, monospace; color: var(--jd-warn); cursor: pointer; text-align: left; } .jd-auth-demo-list button:hover { background: #fff; } .jd-auth-demo-list button .role { font-family: 'Pretendard', sans-serif; font-size: 10.5px; font-weight: 600; background: var(--jd-warn); color: #fff; padding: 1px 6px; border-radius: 3px; } .jd-auth-foot { text-align: center; font-size: 11.5px; color: var(--jd-text-subtle); padding: 16px; } .jd-auth-foot a { color: var(--jd-text-muted); }