/* ========================================================================== SEATTLEKR SOCIAL NEWS Feed cards (.skr-feed-card), single-post engagement bar (.skr-engage), and social comment thread (.skr-cx__*). Depends on msw-joongang-style for --joongang-* tokens. BEM: .skr-feed-card, .skr-engage, .skr-cx ========================================================================== */ /* ------------------------------------------------------------------------- * 0. Shared reset * ---------------------------------------------------------------------- */ .skr-feed-card *, .skr-feed-card *::before, .skr-feed-card *::after, .skr-engage *, .skr-engage *::before, .skr-engage *::after, .skr-cx *, .skr-cx *::before, .skr-cx *::after { box-sizing: border-box; } /* ------------------------------------------------------------------------- * 1. Feed layout — single-column, responsive widths (NFR-2) * ---------------------------------------------------------------------- */ /* Feed wrapper produced by template-news-list.php */ .skr-feed { display: flex; flex-direction: column; gap: 16px; padding: 0; width: 100%; } /* ≤767px: full-width, 16px side padding comes from .skr-nf__wrap */ @media (min-width: 768px) { .skr-feed { max-width: 640px; margin-left: auto; margin-right: auto; } } @media (min-width: 1280px) { .skr-feed { max-width: 720px; } } /* 새 기사 divider — injected by social-infinite.js on page 1 before the * first card the visitor already saw on their previous visit. Vertical * rhythm comes from the feed's 16px column gap; no margins needed. */ .skr-feed-divider { display: flex; align-items: center; gap: 12px; } .skr-feed-divider::before, .skr-feed-divider::after { content: ''; flex: 1; height: 1px; background: var(--joongang-accent, #2563eb); opacity: 0.3; } .skr-feed-divider__chip { flex: none; padding: 4px 12px; border: 1px solid var(--joongang-accent, #2563eb); border-radius: 999px; background: var(--joongang-accent-soft, #eaf1ff); color: var(--joongang-accent, #2563eb); font-size: 0.78rem; font-weight: 700; line-height: 1.4; font-family: 'Noto Sans KR', 'Segoe UI', sans-serif; } /* ------------------------------------------------------------------------- * 2. Feed card (.skr-feed-card) * ---------------------------------------------------------------------- */ .skr-feed-card { background: var(--joongang-bg, #fff); border: 1px solid var(--joongang-border, #e3e9f2); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.18s ease, transform 0.18s ease; font-family: 'Noto Sans KR', 'Segoe UI', sans-serif; color: var(--joongang-text, #1f2937); } .skr-feed-card:hover { box-shadow: 0 4px 18px rgba(37, 99, 235, 0.10); } /* Hover lift — hover-capable fine pointers only, so touch scrolling never leaves a card stuck mid-lift. Safe with the share popover: it's appended to , outside the transformed card's stacking context. */ @media (hover: hover) and (pointer: fine) { .skr-feed-card:hover { transform: translateY(-2px); } } /* Breaking emphasis */ .skr-feed-card--breaking { border-color: #f5c2c2; background: #fff5f5; } /* Lead (first item page 1) */ .skr-feed-card--lead { border-color: var(--joongang-border-dark, #c7d2e6); } /* Category chip */ .skr-feed-card__chip { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--joongang-accent-soft, #eaf1ff); color: var(--joongang-accent, #2563eb); border: 1px solid #cfe0ff; align-self: flex-start; line-height: 1.5; } .skr-feed-card__chip.is-immig { background: #eafaf0; color: #0f8a45; border-color: #bde7cd; } .skr-feed-card__chip.is-breaking { background: var(--joongang-breaking, #dc2626); color: #fff; border-color: var(--joongang-breaking, #dc2626); } .skr-feed-card__chip.is-weather { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .skr-feed-card__chip.is-traffic, .skr-feed-card__chip.is-ferry { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; } /* Linkable topic chip → category archive. Keeps each variant's colors; the hover just deepens the fill so it reads as tappable. */ a.skr-feed-card__chip--link { text-decoration: none; transition: filter .12s ease; } a.skr-feed-card__chip--link:hover, a.skr-feed-card__chip--link:focus-visible { filter: brightness(0.94); text-decoration: none; } /* Headline */ .skr-feed-card__title { font-size: 1.1rem; font-weight: 800; line-height: 1.4; letter-spacing: -0.3px; margin: 0; color: var(--joongang-primary, #0f1f44); } .skr-feed-card__title a { color: inherit; text-decoration: none; } .skr-feed-card__title a:hover { color: var(--joongang-accent, #2563eb); } .skr-feed-card__title a:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; border-radius: 2px; } .skr-feed-card--breaking .skr-feed-card__title, .skr-feed-card--lead .skr-feed-card__title { font-size: 1.3rem; } /* 16:9 media */ .skr-feed-card__media { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--joongang-bg-section, #eef3fb); } .skr-feed-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.32s ease; } .skr-feed-card__media:hover img { transform: scale(1.04); } .skr-feed-card__media:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; } /* Skeleton cards — shimmer placeholders social-infinite.js appends while the next feed page is fetching. Spans ride the card's flex column gap; the wave stops (static tint) under prefers-reduced-motion. */ .skr-feed-card--skeleton { pointer-events: none; } .skr-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, #edf0f4 25%, #f7f9fb 45%, #edf0f4 65%); background-size: 400% 100%; animation: skr-skel-wave 1.4s ease-in-out infinite; } .skr-skel--chip { width: 64px; height: 22px; border-radius: 999px; } .skr-skel--title { height: 20px; } .skr-skel--media { aspect-ratio: 16 / 9; border-radius: 8px; } .skr-skel--line { height: 13px; } .skr-skel--byline { width: 40%; height: 13px; } .skr-skel--short { width: 62%; } @keyframes skr-skel-wave { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .skr-skel { animation: none; } } /* Excerpt — 3-line clamp */ .skr-feed-card__excerpt { font-size: 0.9rem; color: var(--joongang-text-tertiary, #6b7280); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Byline */ .skr-feed-card__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--joongang-text-tertiary, #6b7280); } .skr-feed-card__sep { color: var(--joongang-border-dark, #c7d2e6); } /* Author name links to the author archive (author.php). Inherits the byline color; underlines on hover/focus so the rest of the byline stays quiet. */ a.skr-feed-card__author { color: inherit; text-decoration: none; font-weight: 600; } a.skr-feed-card__author:hover, a.skr-feed-card__author:focus-visible { color: var(--joongang-accent, #2563eb); text-decoration: underline; } /* 읽음 (already-read) state — social-share.js §12 adds .is-read to cards whose post id is in localStorage.skrRecentViewed (written by single.php on open). Visited-link language: muted title + faded thumb + a trailing 읽음 pill, so a feed reader sees at a glance what they've been through. Purely client-side. */ .skr-feed-card.is-read .skr-feed-card__title a { color: var(--joongang-text-tertiary, #6b7280); } .skr-feed-card.is-read .skr-feed-card__title a:hover { color: var(--joongang-accent, #2563eb); } .skr-feed-card.is-read .skr-feed-card__media img { opacity: 0.62; } .skr-feed-card__readmark { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--joongang-bg-section, #eef3fb); color: var(--joongang-text-tertiary, #6b7280); font-size: 0.72rem; font-weight: 700; line-height: 1.5; } /* 내 댓글 (you-commented) state — social-share.js §13 adds .is-commented to cards whose post id is in localStorage.skrCommented (written by social-comment.js on a successful submit). A stronger participation signal than 읽음, so it takes the accent color and replaces the 읽음 pill. */ .skr-feed-card__cmtmark { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: var(--joongang-accent-soft, #eaf1ff); color: var(--joongang-accent, #2563eb); font-size: 0.72rem; font-weight: 800; line-height: 1.5; } .skr-feed-card__cmtmark svg { width: 11px; height: 11px; } /* Compact byline avatar (24px) — mirrors the comment avatar's hue language. .no-avatar (server or JS-added) swaps the img for the initial circle. */ .skr-feed-card__avatar { flex-shrink: 0; position: relative; width: 24px; height: 24px; } .skr-feed-card__avatar-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; } .skr-feed-card__initial { display: none; width: 24px; height: 24px; border-radius: 50%; background: var(--joongang-accent, #2563eb); color: #fff; font-size: 0.72rem; font-weight: 700; align-items: center; justify-content: center; position: absolute; inset: 0; } .skr-feed-card__avatar.skr-av-h1 .skr-feed-card__initial { background: #7c3aed; } .skr-feed-card__avatar.skr-av-h2 .skr-feed-card__initial { background: #0d9488; } .skr-feed-card__avatar.skr-av-h3 .skr-feed-card__initial { background: #b45309; } .skr-feed-card__avatar.skr-av-h4 .skr-feed-card__initial { background: #db2777; } .skr-feed-card__avatar.skr-av-h5 .skr-feed-card__initial { background: #059669; } .skr-feed-card__avatar.skr-av-h6 .skr-feed-card__initial { background: #4f46e5; } .skr-feed-card__avatar.skr-av-h7 .skr-feed-card__initial { background: #0891b2; } .skr-feed-card__avatar.no-avatar .skr-feed-card__avatar-img { display: none; } .skr-feed-card__avatar.no-avatar .skr-feed-card__initial { display: flex; } /* Reading-time chip never breaks mid-phrase ("3분 읽기"). */ .skr-feed-card__read { white-space: nowrap; } /* Engagement bar on card — wraps as a safety net on very narrow phones. */ .skr-feed-card__engage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--joongang-border, #e3e9f2); margin-top: 2px; } /* Like count on cards. Base rule covers both variants: the read-only span (surfaces without the like_toggle arg) and the live button (news list / bookmarks) — only the button gets cursor/hover below. */ .skr-feed-card__like { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 10px; font-size: 0.82rem; font-weight: 600; color: var(--joongang-text-tertiary, #6b7280); } /* Live 공감 toggle variant — element-qualified so the read-only span never advertises interactivity it doesn't have. */ button.skr-feed-card__like { background: none; border: none; border-radius: 8px; cursor: pointer; transition: color 0.15s, background 0.15s, transform 0.12s ease; font-family: inherit; } button.skr-feed-card__like:hover { color: var(--joongang-accent, #2563eb); background: var(--joongang-accent-soft, #eaf1ff); } button.skr-feed-card__like:active { transform: scale(0.96); } button.skr-feed-card__like:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; } .skr-feed-card__cmt, .skr-feed-card__share, .skr-feed-card__bm { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 10px; font-size: 0.82rem; font-weight: 600; color: var(--joongang-text-tertiary, #6b7280); background: none; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: color 0.15s, background 0.15s, transform 0.12s ease; font-family: inherit; } .skr-feed-card__cmt:hover, .skr-feed-card__share:hover, .skr-feed-card__bm:hover { color: var(--joongang-accent, #2563eb); background: var(--joongang-accent-soft, #eaf1ff); } .skr-feed-card__cmt:active, .skr-feed-card__share:active, .skr-feed-card__bm:active { transform: scale(0.96); } .skr-feed-card__cmt:focus-visible, .skr-feed-card__share:focus-visible, .skr-feed-card__bm:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; } /* Read-only view count, pushed to the right edge of the engage row. */ .skr-feed-card__views { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 8px 0 8px 10px; font-size: 0.82rem; font-weight: 500; color: var(--joongang-text-tertiary, #6b7280); } /* Labels never wrap inside a control — the row wraps instead. */ .skr-feed-card__like, .skr-feed-card__cmt, .skr-feed-card__share, .skr-feed-card__bm, .skr-feed-card__views { white-space: nowrap; } /* Compact card engage row on narrow phones: 공유/북마크 go icon-only (mirrors the ≤480px single-post .skr-engage pattern; aria-labels and all counts stay). */ @media (max-width: 480px) { .skr-feed-card__engage { gap: 6px; } .skr-feed-card__share span, .skr-feed-card__bm span { display: none; } } /* Card bookmark toggle (bookmarks page): active = accent + filled icon. */ .skr-feed-card__bm.is-bookmarked { color: var(--joongang-accent, #2563eb); } .skr-feed-card__bm.is-bookmarked svg { fill: currentColor; } /* Card like toggle: liked = accent + filled heart (card-flat, no chip background — mirrors the card bookmark, not the engage-bar chip). */ .skr-feed-card__like.is-liked { color: var(--joongang-accent, #2563eb); } .skr-feed-card__like.is-liked svg { fill: currentColor; } /* Un-bookmarked card dims in place — undoable until reload. */ .skr-feed-card.is-unbookmarked { opacity: 0.45; transition: opacity 0.15s; } /* ------------------------------------------------------------------------- * 3. Single-post engagement bar (.skr-engage) * ---------------------------------------------------------------------- */ .skr-engage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 14px; border-bottom: 1px solid var(--joongang-border, #e3e9f2); margin-bottom: 20px; font-family: 'Noto Sans KR', 'Segoe UI', sans-serif; } .skr-engage__like, .skr-engage__cmt, .skr-engage__share, .skr-engage__bm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 44px; padding: 8px 14px; font-size: 0.9rem; font-weight: 600; color: var(--joongang-text-secondary, #4b5563); background: var(--joongang-bg-section, #eef3fb); border: 1px solid var(--joongang-border, #e3e9f2); border-radius: 8px; cursor: pointer; text-decoration: none; transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.12s ease; font-family: inherit; } .skr-engage__like:hover, .skr-engage__cmt:hover, .skr-engage__share:hover, .skr-engage__bm:hover { color: var(--joongang-accent, #2563eb); background: var(--joongang-accent-soft, #eaf1ff); border-color: var(--joongang-accent, #2563eb); } .skr-engage__like:active, .skr-engage__cmt:active, .skr-engage__share:active, .skr-engage__bm:active { transform: scale(0.96); } .skr-engage__like:focus-visible, .skr-engage__cmt:focus-visible, .skr-engage__share:focus-visible, .skr-engage__bm:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; } /* Liked state — accent text + filled heart. */ .skr-engage__like.is-liked { color: var(--joongang-accent, #2563eb); border-color: var(--joongang-accent, #2563eb); background: var(--joongang-accent-soft, #eaf1ff); } .skr-engage__like.is-liked svg { fill: currentColor; } /* Bookmarked state — accent text + filled bookmark. */ .skr-engage__bm.is-bookmarked { color: var(--joongang-accent, #2563eb); border-color: var(--joongang-accent, #2563eb); background: var(--joongang-accent-soft, #eaf1ff); } .skr-engage__bm.is-bookmarked svg { fill: currentColor; } /* One-shot pop on like/bookmark toggle-ON. social-like.js re-adds .skr-pop (remove → force reflow → add) on every fill so the same animation instance restarts; server-rendered .is-liked/.is-bookmarked never pop on page load because the class only ever comes from that JS path. */ @keyframes skr-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .skr-engage__like.skr-pop svg, .skr-engage__bm.skr-pop svg, .skr-feed-card__bm.skr-pop svg, .skr-feed-card__like.skr-pop svg { animation: skr-pop 0.35s ease; } .skr-cx__like.skr-pop .skr-cx__like-n { display: inline-block; animation: skr-pop 0.35s ease; } /* In-flight (fetch pending) — brief, prevents double-fire. */ .skr-engage__like:disabled, .skr-engage__bm:disabled { opacity: 0.65; cursor: default; } /* Read-only view count on the single-post engage bar. */ .skr-engage__views { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-left: auto; font-size: 0.85rem; font-weight: 500; color: var(--joongang-text-tertiary, #6b7280); } /* Compact engage bar on narrow phones so all items fit on one line. */ @media (max-width: 480px) { .skr-engage { gap: 5px; } .skr-engage__like, .skr-engage__cmt, .skr-engage__share, .skr-engage__bm { gap: 5px; padding: 8px; font-size: 0.82rem; } .skr-engage__views { font-size: 0.8rem; } /* Icon + count only (Twitter-style): every control keeps its aria-label. */ .skr-engage__t, .skr-engage__views-label, .skr-engage__bm-label { display: none; } } /* Sticky floating engage bar on mobile (<768px — where .nav-bottom shows). sticky keeps the bar in flow: it floats above the bottom tab bar while the article is read, then docks into its natural spot before the comments. z-index sits below .nav-bottom (1000) and the newsletter CTA (9990). */ @media (max-width: 767px) { .skr-engage { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 10px); z-index: 90; background: var(--joongang-bg, #fff); border: 1px solid var(--joongang-border, #e3e9f2); border-radius: 14px; padding: 8px; box-shadow: 0 4px 18px rgba(15, 31, 68, 0.14); } /* While the dismissible newsletter CTA holds the same spot, keep the bar inline. It toggles via the [hidden] attribute; browsers without :has() just show the CTA overlapping the floating bar until dismissed. */ body:has(.msw-sticky-cta:not([hidden])) .skr-engage { position: static; } } /* Landscape phones — .nav-bottom compacts to 48px. */ @media (max-width: 767px) and (max-height: 600px) and (orientation: landscape) { .skr-engage { bottom: calc(48px + env(safe-area-inset-bottom, 0px) + 10px); } } /* ------------------------------------------------------------------------- * 4. Comment thread (.skr-cx) * ---------------------------------------------------------------------- */ .skr-cx { font-family: 'Noto Sans KR', 'Segoe UI', sans-serif; color: var(--joongang-text, #1f2937); margin-top: 32px; } /* Title row: h2 + logged-in 내 댓글 shortcut (iter. 53). The pending banner * inserts after this row, never inside the flex container. */ .skr-cx__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; } .skr-cx__title { font-size: 1.15rem; font-weight: 800; color: var(--joongang-primary, #0f1f44); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; } .skr-cx__head .skr-cx__title { margin-bottom: 0; } .skr-cx__count { font-size: 0.9rem; font-weight: 600; color: var(--joongang-text-tertiary, #6b7280); } /* Scoped .skr-cx .skr-cx__mine past single.php's content-link rules * (iter-17 precedent). */ .skr-cx .skr-cx__mine { flex: none; font-size: 0.85rem; font-weight: 700; color: var(--joongang-accent, #2563eb); text-decoration: none; white-space: nowrap; } .skr-cx .skr-cx__mine:hover, .skr-cx .skr-cx__mine:focus { color: #1d4ed8; text-decoration: underline; } .skr-cx .skr-cx__mine:focus-visible { outline: 2px solid var(--joongang-primary, #0f1f44); outline-offset: 2px; } /* --- 베스트 댓글 strip (iter. 55) ----------------------------------- */ .skr-cx__best { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; } /* Double-class scoping past single.php's content-link rules (iter-17 * precedent — these excerpt cards are elements inside the article). */ .skr-cx .skr-cx__best-item { display: block; padding: 11px 14px; background: var(--joongang-accent-soft, #eaf1ff); border: 1px solid transparent; border-left: 3px solid var(--joongang-accent, #2563eb); border-radius: 10px; color: inherit; text-decoration: none; } .skr-cx .skr-cx__best-item:hover, .skr-cx .skr-cx__best-item:focus { border-color: var(--joongang-accent, #2563eb); color: inherit; text-decoration: none; } .skr-cx .skr-cx__best-item:focus-visible { outline: 2px solid var(--joongang-primary, #0f1f44); outline-offset: 2px; } .skr-cx__best-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .skr-cx__best-badge { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--joongang-accent, #2563eb); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.4px; } .skr-cx__best-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; font-weight: 700; color: var(--joongang-primary, #0f1f44); } .skr-cx__best-likes { flex: none; margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--joongang-accent, #2563eb); } .skr-cx__best-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 0.9rem; line-height: 1.5; color: var(--joongang-text-secondary, #4b5563); } /* AJAX submit error box */ .skr-cx__error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; font-size: 0.87rem; color: #b91c1c; margin: 0 0 12px; } /* Own-pending banner */ .skr-cx__pending { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 14px; font-size: 0.87rem; color: #92400e; margin-bottom: 16px; } /* Comment list */ /* Sort control (JS-injected by social-comment.js when ≥2 top-level comments). */ .skr-cx__sort { display: flex; gap: 6px; margin: 0 0 12px; } .skr-cx__sort-btn { min-height: 40px; padding: 6px 16px; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--joongang-text-tertiary, #6b7280); background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .skr-cx__sort-btn:hover { color: var(--joongang-accent, #2563eb); background: none; } /* :hover/:focus/:active palette pins (here and on the other comment-UI buttons): GeneratePress's customizer inline CSS paints button:hover, button:focus and button:active white-on-black site-wide; these keep each button's own palette — hover pins must set background too, a color-only pin leaves GP's dark background showing through. The :focus-visible rules still draw the keyboard ring. */ .skr-cx__sort-btn:focus, .skr-cx__sort-btn:active { color: var(--joongang-accent, #2563eb); background: none; } .skr-cx__sort-btn:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; } .skr-cx__sort-btn.is-active { color: var(--joongang-accent, #2563eb); background: var(--joongang-accent-soft, #eaf1ff); border-color: var(--joongang-accent, #2563eb); } .skr-cx__list { list-style: none; margin: 0 0 24px; padding: 0; } /* Single comment item. flex-wrap + full-width .children: the walker nests the replies

). Top placement is * deliberate: the bottom edge already belongs to the sticky engage bar * (<768px), the share toast and the nav band. Same admin-bar offset dance * as .skr-progress above. * ---------------------------------------------------------------------- */ .skr-readpos { position: fixed; top: 14px; left: 50%; z-index: 8500; display: flex; align-items: center; gap: 6px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease; font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; } .skr-readpos.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .skr-readpos__go { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 0.84rem; font-weight: 700; line-height: 1; color: #fff; background: var(--joongang-accent, #2563eb); border: none; border-radius: 999px; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35); cursor: pointer; } /* GP's customizer paints button:hover/:focus white-on-black — pin both. */ .skr-readpos__go:hover, .skr-readpos__go:focus, .skr-readpos__go:active { color: #fff; background: #1d4ed8; } .skr-readpos__x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--joongang-text-tertiary, #6b7280); background: var(--joongang-bg, #fff); border: 1px solid var(--joongang-border-dark, #c7d2e6); border-radius: 50%; box-shadow: 0 4px 12px rgba(15, 31, 68, 0.14); cursor: pointer; } .skr-readpos__x:hover, .skr-readpos__x:focus, .skr-readpos__x:active { color: var(--joongang-primary, #0f1f44); background: var(--joongang-bg, #fff); } .skr-readpos__go:focus-visible, .skr-readpos__x:focus-visible { outline: 2px solid var(--joongang-accent, #2563eb); outline-offset: 2px; } /* Unlike .skr-progress there is NO ≤600px reset here: the pill lives only for ~12s at page load (scroll 0), where the absolute admin bar still covers the top 46px — a 14px pill would spend its whole life behind it (z 99999). */ body.admin-bar .skr-readpos { top: 46px; } @media (max-width: 782px) { body.admin-bar .skr-readpos { top: 60px; } } /* ------------------------------------------------------------------------- * Article image lightbox — unlinked .skr-art__body imgs open full-size * (social-share.js §10). Any click inside closes it. * ---------------------------------------------------------------------- */ .skr-art__body.skr-lb-ready img { cursor: zoom-in; } /* Linked images keep their link meaning (and cursor). */ .skr-art__body.skr-lb-ready a img { cursor: pointer; } html.skr-lb-lock { overflow: hidden; } .skr-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; /* above the readpos pill (8500), under the toast (9999) */ display: flex; align-items: center; justify-content: center; padding: 24px; /* 0.98, not 0.92 — at lower alphas the mobile nav band and the article headline ghosted through legibly enough to compete with the image (375 eyeball caught it twice: 0.92, then still faintly at 0.96). */ background: rgba(15, 31, 68, 0.98); opacity: 0; transition: opacity 0.2s ease; cursor: zoom-out; } .skr-lightbox.is-visible { opacity: 1; } .skr-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .skr-lightbox__x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(15, 31, 68, 0.55); color: #fff; cursor: pointer; } /* Explicit pins — GP's customizer paints button:hover/:focus white-on-black. */ .skr-lightbox__x:hover, .skr-lightbox__x:focus { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.6); } .skr-lightbox__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Admin-bar offsets mirror .skr-progress (not the .skr-readpos exception): the lightbox opens mid-article, far past the ≤600px absolute bar that scrolls away with the page, so ≤600px returns to the 16px default. */ body.admin-bar .skr-lightbox__x { top: 48px; } @media (max-width: 782px) { body.admin-bar .skr-lightbox__x { top: 62px; } } @media (max-width: 600px) { body.admin-bar .skr-lightbox__x { top: 16px; } } /* ------------------------------------------------------------------------- * 6. Reduced motion * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .skr-feed-card, .skr-feed-card__media img, .skr-engage__like, .skr-engage__cmt, .skr-engage__share, .skr-engage__bm, .skr-cx__sort-btn, .skr-cx__ta, .skr-cx__submit, .skr-share-toast, .skr-totop, .skr-readpos, .skr-lightbox { transition: none !important; } .skr-totop { transform: none !important; } /* Keep the horizontal centering, drop only the slide. */ .skr-readpos { transform: translateX(-50%) !important; } .skr-feed-card:hover, .skr-engage__like:active, .skr-engage__cmt:active, .skr-engage__share:active, .skr-engage__bm:active, .skr-feed-card__cmt:active, .skr-feed-card__share:active, .skr-feed-card__bm:active, .skr-feed-card__like:active { transform: none !important; } .skr-engage__like.skr-pop svg, .skr-engage__bm.skr-pop svg, .skr-feed-card__bm.skr-pop svg, .skr-feed-card__like.skr-pop svg, .skr-cx__like.skr-pop .skr-cx__like-n { animation: none !important; } }