/* ========================================================================== Seongwon Tistory — main stylesheet - 3-column grid layout (left category tree / center cards / right widgets) - Minimal cards, blue accent links, sticky sidebars - Responsive breakpoints: 1024px (drop right), 768px (collapse to single) ========================================================================== */ /* ========================================================================== Design tokens — layout (theme-agnostic) + LIGHT theme defaults The :root values are the LIGHT palette. Dark mode is applied via html.theme-dark { ... } below. The default html element ships with class="theme-dark" so the page is dark on first paint (FOUC-free). ========================================================================== */ :root { /* Layout — theme-agnostic */ --s3c-header-h: 56px; --s3c-grid-max: 1240px; --s3c-col-left: 240px; --s3c-col-right: 280px; --s3c-gap: 32px; --s3c-radius: 6px; --s3c-transition: 0.18s ease; /* L1 Soft White (Zinc) palette — chosen 2026-05-06 to pair with the live dark zinc base. zinc-50 base is one tone darker than pure white so the page is comfortable to read for long sessions. */ --s3c-color-base: #fafafa; /* zinc-50 */ --s3c-color-contrast: #18181b; /* zinc-900 */ --s3c-color-text: #27272a; /* zinc-800 */ --s3c-color-muted: #71717a; /* zinc-500 */ --s3c-color-link: #1d4ed8; /* blue-700 — strong on near-white */ --s3c-color-link-hover: #1e3a8a; /* blue-900 */ --s3c-color-surface: #f4f4f5; /* zinc-100 */ --s3c-color-surface-2: #e4e4e7; /* zinc-200 */ --s3c-color-border: #e4e4e7; /* zinc-200 */ --s3c-color-border-soft: #f4f4f5; --s3c-color-code-bg: #0d1117; /* dark code block, GitHub style */ --s3c-color-code-fg: #c9d1d9; --s3c-color-code-inline-bg: #f4f4f5; --s3c-color-code-inline-fg: #27272a; --s3c-color-tag-bg: #f4f4f5; --s3c-color-disclosure-bg: #fff8e1; --s3c-color-disclosure-fg: #5d4037; --s3c-color-disclosure-bar: #f9a825; --s3c-color-scheme: light; --s3c-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --s3c-shadow-md: 0 2px 6px rgba(0,0,0,0.06); } /* ========================================================================== Dark theme — applied to html.theme-dark ========================================================================== */ html.theme-dark { /* Zinc (neutral gray) palette — chosen 2026-05-06 over slate to give the blue accent more visual separation from the base. */ --s3c-color-base: #09090b; /* zinc-950 */ --s3c-color-contrast: #fafafa; /* zinc-50 */ --s3c-color-text: #d4d4d8; /* zinc-300 */ --s3c-color-muted: #a1a1aa; /* zinc-400 */ --s3c-color-link: #60a5fa; /* blue-400 */ --s3c-color-link-hover: #93c5fd; /* blue-300 */ --s3c-color-surface: #18181b; /* zinc-900 */ --s3c-color-surface-2: #0a0a0a; --s3c-color-border: #27272a; /* zinc-800 */ --s3c-color-border-soft: #18181b; --s3c-color-code-bg: #0d1117; /* GitHub dark — sits a half-step from base */ --s3c-color-code-fg: #c9d1d9; --s3c-color-code-inline-bg: #18181b; --s3c-color-code-inline-fg: #e2e8f0; --s3c-color-tag-bg: #18181b; --s3c-color-disclosure-bg: #292524; /* stone-800 — warm dark for amber bar */ --s3c-color-disclosure-fg: #fde68a; --s3c-color-disclosure-bar: #f59e0b; --s3c-color-scheme: dark; --s3c-shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --s3c-shadow-md: 0 2px 6px rgba(0,0,0,0.6); color-scheme: dark; } /* Smooth transition when toggling — but only after first paint (set by JS removing data-theme-loading from ). */ html:not([data-theme-loading]) body.s3c-theme, html:not([data-theme-loading]) body.s3c-theme * { transition: background-color var(--s3c-transition), border-color var(--s3c-transition), color var(--s3c-transition); } /* ========================================================================== Base ========================================================================== */ body.s3c-theme { background: var(--s3c-color-base); color: var(--s3c-color-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: 16px; line-height: 1.7; } body.s3c-theme a { color: var(--s3c-color-link); text-decoration: none; transition: color var(--s3c-transition); } body.s3c-theme a:hover { color: var(--s3c-color-link-hover); } body.s3c-theme img { max-width: 100%; height: auto; } /* Hide the parent theme's huge header that is no longer used — defensive, in case any classic header markup leaks through. */ body.s3c-theme > .wp-site-blocks > header.wp-block-template-part:not(.s3c-header) { display: none !important; } /* ========================================================================== Header ========================================================================== */ .s3c-header { position: sticky; top: 0; z-index: 50; background: var(--s3c-color-base); border-bottom: 1px solid var(--s3c-color-border); padding: 0; box-shadow: var(--s3c-shadow-sm); } .s3c-header__inner { max-width: var(--s3c-grid-max); margin: 0 auto; padding: 0 16px; height: var(--s3c-header-h); display: flex; align-items: center; gap: 16px; } .s3c-header__title { font-size: 1.125rem; font-weight: 700; margin: 0; } .s3c-header__title a { color: var(--s3c-color-contrast) !important; } .s3c-header__menu-toggle { display: none; flex-direction: column; justify-content: center; width: 36px; height: 36px; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 0; } .s3c-header__menu-toggle span { display: block; width: 22px; height: 2px; background: var(--s3c-color-contrast); border-radius: 1px; transition: transform var(--s3c-transition), opacity var(--s3c-transition); margin: 0 auto; } .s3c-header__nav { display: flex; align-items: center; flex: 1; justify-content: center; min-width: 0; } .s3c-header__nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; align-items: center; } .s3c-header__nav li { margin: 0; } .s3c-header__nav a { color: var(--s3c-color-contrast); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0; border-bottom: 1px solid transparent; white-space: nowrap; transition: border-color 120ms ease, color 120ms ease; } .s3c-header__nav a:hover, .s3c-header__nav a:focus { border-bottom-color: var(--s3c-color-link); color: var(--s3c-color-link); outline: none; } .s3c-header__nav-sep { width: 1px; height: 1rem; background: var(--s3c-color-border, currentColor); opacity: 0.25; } .s3c-header__search { max-width: 240px; } .s3c-header__search .wp-block-search__input { border: 1px solid var(--s3c-color-border); border-radius: var(--s3c-radius); padding: 6px 10px; font-size: 0.875rem; background: var(--s3c-color-surface); } /* ========================================================================== 3-Column Grid ========================================================================== */ .s3c-grid { display: grid; grid-template-columns: var(--s3c-col-left) 1fr var(--s3c-col-right); gap: var(--s3c-gap); max-width: var(--s3c-grid-max); margin: 0 auto; padding: 24px 16px 64px; align-items: start; } .s3c-content { min-width: 0; /* prevent grid blowout from long URLs / pre tags */ } /* Sidebars sit sticky below the header. max-height / overflow-y 는 일부러 두지 않는다 — 위젯 콘텐츠(Calendar + Visitors + Tags 등)가 viewport 보다 길어질 때 박스 내부에 스크롤이 생기는 대신, 페이지 자연 흐름대로 전체가 보이도록 한다. sticky 만으로 충분히 "본문 스크롤 시 따라오는" 동작을 유지하면서, 사이드바가 viewport 보다 길면 부드럽게 위로 사라지고 페이지를 더 내리면 끝까지 볼 수 있다. */ .s3c-sidebar { position: sticky; top: calc(var(--s3c-header-h) + 16px); padding-bottom: 16px; } /* ========================================================================== Profile (left sidebar header) ========================================================================== */ .s3c-profile { padding: 16px; background: var(--s3c-color-surface); border: 1px solid var(--s3c-color-border-soft); border-radius: var(--s3c-radius); text-align: center; margin-bottom: 20px; } .s3c-profile__logo { max-width: 72px; height: auto; border-radius: 50%; } .s3c-profile__name { display: block; font-weight: 700; color: var(--s3c-color-contrast); margin-top: 8px; font-size: 0.95rem; } .s3c-profile__name:hover { color: var(--s3c-color-link); } .s3c-profile__tagline { color: var(--s3c-color-muted); font-size: 0.8125rem; margin: 6px 0 0; line-height: 1.4; } /* ========================================================================== Widgets (both sidebars) ========================================================================== */ .s3c-widget { margin-bottom: 24px; } .s3c-widget__title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--s3c-color-muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--s3c-color-border); } .s3c-widget__list { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; } .s3c-widget__item { padding: 6px 0; border-bottom: 1px solid var(--s3c-color-border-soft); display: flex; gap: 8px; align-items: baseline; } .s3c-widget__item:last-child { border-bottom: none; } .s3c-widget__rank { flex: 0 0 18px; color: var(--s3c-color-link); font-weight: 700; font-size: 0.8125rem; } .s3c-widget__link { color: var(--s3c-color-text); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .s3c-widget__link:hover { color: var(--s3c-color-link); } .s3c-widget__date { color: var(--s3c-color-muted); font-size: 0.75rem; flex: 0 0 auto; } .s3c-widget__cloud a { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; background: var(--s3c-color-surface); border: 1px solid var(--s3c-color-border-soft); border-radius: 999px; font-size: 0.75rem !important; color: var(--s3c-color-text); } .s3c-widget__cloud a:hover { background: var(--s3c-color-link); color: #fff; border-color: var(--s3c-color-link); } .s3c-widget__empty { color: var(--s3c-color-muted); font-size: 0.8125rem; } /* ========================================================================== Series TOC (single page — 시리즈 태그가 있을 때 출력) ========================================================================== */ .s3c-series-toc { margin: 32px 0 16px; padding: 20px 22px; border: 1px solid var(--s3c-color-border); border-radius: 10px; background: var(--s3c-color-surface); } .s3c-series-toc__header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--s3c-color-border-soft); margin-bottom: 12px; } .s3c-series-toc__icon { font-size: 1.05rem; } .s3c-series-toc__name { font-weight: 700; font-size: 1rem; color: var(--s3c-color-contrast); text-decoration: none; } .s3c-series-toc__name:hover { color: var(--s3c-color-link); } .s3c-series-toc__count { margin-left: auto; font-size: 0.8125rem; color: var(--s3c-color-muted); } .s3c-series-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: none; } .s3c-series-toc__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.9375rem; line-height: 1.5; } .s3c-series-toc__item.is-current { background: var(--s3c-color-surface-strong, rgba(127, 127, 127, 0.12)); font-weight: 600; } .s3c-series-toc__item:hover:not(.is-current) { background: rgba(127, 127, 127, 0.06); } .s3c-series-toc__num { flex: 0 0 1.5em; font-variant-numeric: tabular-nums; color: var(--s3c-color-muted); font-size: 0.8125rem; text-align: right; } .s3c-series-toc__item.is-current .s3c-series-toc__num { color: var(--s3c-color-link); font-weight: 700; } .s3c-series-toc__title { flex: 1; color: var(--s3c-color-text); } .s3c-series-toc__link { display: flex; align-items: center; gap: 10px; flex: 1; color: inherit; text-decoration: none; } .s3c-series-toc__link:hover .s3c-series-toc__title { color: var(--s3c-color-link); } .s3c-series-toc__badge { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 600; color: var(--s3c-color-link); background: rgba(56, 132, 255, 0.12); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } .s3c-series-toc__next { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 14px 18px; border-radius: 8px; background: var(--s3c-color-link); color: #fff; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; } .s3c-series-toc__next:hover { transform: translateY(-1px); opacity: 0.95; color: #fff; } .s3c-series-toc__next-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; } .s3c-series-toc__next-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; } .s3c-series-toc__complete { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 18px; border-radius: 8px; background: rgba(46, 160, 67, 0.08); border: 1px dashed rgba(46, 160, 67, 0.4); color: var(--s3c-color-text); } .s3c-series-toc__complete-icon { font-size: 1.25rem; } .s3c-series-toc__complete-text { font-size: 0.9375rem; } /* ========================================================================== Series nav (single page — 이전/다음 같은 카테고리 글) ========================================================================== */ .s3c-series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 16px; } .s3c-series-nav__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--s3c-color-border); border-radius: 8px; background: var(--s3c-color-surface); color: var(--s3c-color-text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; min-height: 64px; } .s3c-series-nav__item:hover { border-color: var(--s3c-color-link); transform: translateY(-1px); } .s3c-series-nav__item--next { text-align: right; } .s3c-series-nav__item--placeholder { border: 1px dashed var(--s3c-color-border-soft); background: transparent; pointer-events: none; } .s3c-series-nav__label { font-size: 0.75rem; color: var(--s3c-color-muted); text-transform: uppercase; letter-spacing: 0.04em; } .s3c-series-nav__title { font-size: 0.9375rem; font-weight: 600; color: var(--s3c-color-contrast); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 640px) { .s3c-series-nav { grid-template-columns: 1fr; } .s3c-series-nav__item--next { text-align: left; } .s3c-series-nav__item--placeholder { display: none; } } /* ========================================================================== Visitors widget (right) ========================================================================== */ .s3c-visitors { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; } .s3c-visitors__row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--s3c-color-border-soft); } .s3c-visitors__row:last-child { border-bottom: none; } .s3c-visitors__label { color: var(--s3c-color-muted); font-size: 0.8125rem; } .s3c-visitors__value { font-weight: 700; color: var(--s3c-color-contrast); font-variant-numeric: tabular-nums; } /* ========================================================================== Calendar widget (right) ========================================================================== */ .s3c-calendar table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .s3c-calendar caption { font-weight: 700; color: var(--s3c-color-contrast); padding-bottom: 6px; text-align: left; } .s3c-calendar th, .s3c-calendar td { padding: 4px 0; text-align: center; color: var(--s3c-color-text); } .s3c-calendar th { color: var(--s3c-color-muted); font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--s3c-color-border); } .s3c-calendar td a { display: inline-block; min-width: 22px; padding: 2px 4px; color: var(--s3c-color-link); font-weight: 600; border-radius: 4px; } .s3c-calendar td a:hover { background: var(--s3c-color-link); color: #fff; } .s3c-calendar td#today { background: var(--s3c-color-surface); border-radius: 4px; font-weight: 700; } .s3c-calendar nav.wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.75rem; } .s3c-calendar nav.wp-calendar-nav a { color: var(--s3c-color-link); } /* ========================================================================== Category Tree (left) ========================================================================== */ .s3c-cat-tree { font-size: 0.875rem; } .s3c-cat-tree__list { list-style: none; margin: 0; padding: 0; } .s3c-cat-tree__list--nested { padding-left: 12px; border-left: 1px dashed var(--s3c-color-border); margin: 4px 0 4px 6px; } .s3c-cat-tree__item { position: relative; padding: 2px 0; display: flex; flex-wrap: wrap; align-items: center; } .s3c-cat-tree__link { flex: 1; display: flex; justify-content: space-between; gap: 8px; color: var(--s3c-color-text); padding: 4px 6px; border-radius: 4px; min-width: 0; } .s3c-cat-tree__link:hover { background: var(--s3c-color-surface); color: var(--s3c-color-link); } .s3c-cat-tree__item.is-current > .s3c-cat-tree__link { color: var(--s3c-color-link); font-weight: 600; } .s3c-cat-tree__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s3c-cat-tree__count { color: var(--s3c-color-muted); font-size: 0.75rem; flex: 0 0 auto; } .s3c-cat-tree__toggle { background: transparent; border: none; color: var(--s3c-color-muted); cursor: pointer; font-size: 0.75rem; padding: 4px 6px; transition: transform var(--s3c-transition); } .s3c-cat-tree__toggle[aria-expanded="true"] { transform: rotate(180deg); } .s3c-cat-tree__children { width: 100%; } /* ========================================================================== Post Card (center) ========================================================================== */ .s3c-card { padding: 20px 0 22px; border-bottom: 1px solid var(--s3c-color-border-soft); } .s3c-card:last-of-type { border-bottom: none; } .s3c-card__terms { margin-bottom: 6px; gap: 6px !important; } .s3c-card__category a { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--s3c-color-link); font-weight: 600; } .s3c-card__title { font-size: 1.375rem; line-height: 1.35; font-weight: 700; margin: 0 0 8px; } .s3c-card__title a { color: var(--s3c-color-contrast); } .s3c-card__title a:hover { color: var(--s3c-color-link); } .s3c-card__excerpt { color: var(--s3c-color-text); font-size: 0.9375rem; line-height: 1.65; margin: 0 0 10px; } .s3c-card__meta { font-size: 0.8125rem; color: var(--s3c-color-muted); gap: 12px !important; } .s3c-card__date { color: var(--s3c-color-muted); } .s3c-card__author a { color: var(--s3c-color-muted); } .s3c-card__author a:hover { color: var(--s3c-color-link); } /* ========================================================================== Pagination ========================================================================== */ .s3c-pagination { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--s3c-color-border); gap: 6px !important; } .s3c-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 4px; font-size: 0.875rem; color: var(--s3c-color-text); } .s3c-pagination .page-numbers:hover { background: var(--s3c-color-surface); color: var(--s3c-color-link); } .s3c-pagination .page-numbers.current { background: var(--s3c-color-link); color: #fff; font-weight: 600; } /* ========================================================================== Single Post Layout ========================================================================== */ .s3c-content--single .s3c-post-header { margin-bottom: 20px; } .s3c-post-categories a { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--s3c-color-link); font-weight: 600; } .s3c-post-title { font-size: 2rem; line-height: 1.25; margin: 6px 0 10px; color: var(--s3c-color-contrast); } .s3c-post-meta { font-size: 0.875rem; color: var(--s3c-color-muted); gap: 12px !important; } .s3c-post-author a { color: var(--s3c-color-text); } .s3c-post-date { color: var(--s3c-color-muted); } .s3c-post-featured { margin: 20px 0; } .s3c-post-featured img { border-radius: var(--s3c-radius); } .s3c-post-content { font-size: 1rem; line-height: 1.8; } .s3c-post-content p { margin: 0 0 1.4em; } .s3c-post-content h2 { font-size: 1.5rem; margin: 2em 0 0.6em; } .s3c-post-content h3 { font-size: 1.25rem; margin: 1.6em 0 0.5em; } .s3c-post-content blockquote { border-left: 3px solid var(--s3c-color-link); padding: 4px 16px; color: var(--s3c-color-muted); background: var(--s3c-color-surface); border-radius: 0 var(--s3c-radius) var(--s3c-radius) 0; } .s3c-post-content pre, .s3c-post-content code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; } .s3c-post-content code { background: var(--s3c-color-code-inline-bg); color: var(--s3c-color-code-inline-fg); padding: 1px 6px; border-radius: 3px; font-size: 0.875em; } .s3c-post-content pre { background: var(--s3c-color-code-bg); color: var(--s3c-color-code-fg); padding: 16px; border-radius: var(--s3c-radius); overflow-x: auto; font-size: 0.875rem; line-height: 1.55; } .s3c-post-content pre code { background: transparent; padding: 0; color: inherit; } .s3c-post-content table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9375rem; } .s3c-post-content th, .s3c-post-content td { border: 1px solid var(--s3c-color-border); padding: 8px 12px; text-align: left; } .s3c-post-content th { background: var(--s3c-color-surface); } .s3c-post-tags { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--s3c-color-border-soft); font-size: 0.8125rem; } .s3c-post-tags a { display: inline-block; margin-right: 4px; padding: 2px 8px; background: var(--s3c-color-tag-bg); border-radius: 999px; color: var(--s3c-color-text); } .s3c-post-tags a:hover { background: var(--s3c-color-link); color: #fff; } .s3c-post-nav { display: inline-block; margin: 24px 8px 0 0; padding: 8px 14px; border: 1px solid var(--s3c-color-border); border-radius: var(--s3c-radius); font-size: 0.875rem; } .s3c-post-nav:hover { border-color: var(--s3c-color-link); background: var(--s3c-color-surface); } /* ========================================================================== Archive / Search header ========================================================================== */ .s3c-archive-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--s3c-color-border); } .s3c-archive-title { font-size: 1.5rem; margin: 0 0 6px; color: var(--s3c-color-contrast); } .s3c-archive-description { color: var(--s3c-color-muted); font-size: 0.9375rem; } /* ========================================================================== 404 ========================================================================== */ .s3c-grid--404 { grid-template-columns: 1fr; min-height: calc(100vh - var(--s3c-header-h) - 200px); align-items: center; justify-content: center; } .s3c-content--404 { max-width: 480px; margin: 0 auto; text-align: center; } .s3c-404__code { font-size: 6rem; font-weight: 800; color: var(--s3c-color-link); margin: 0; line-height: 1; } .s3c-404__title { font-size: 1.5rem; margin: 8px 0 16px; } .s3c-404__message { color: var(--s3c-color-muted); margin-bottom: 20px; } .s3c-404__home a { background: var(--s3c-color-link) !important; color: #fff !important; } /* ========================================================================== Footer (minimal — no shop / themes / patterns links) ========================================================================== */ .s3c-footer { margin-top: 48px; padding: 24px 16px; border-top: 1px solid var(--s3c-color-border); background: var(--s3c-color-surface); } .s3c-footer__inner { max-width: var(--s3c-grid-max); margin: 0 auto; gap: 16px !important; } .s3c-footer__copy, .s3c-footer__credit { color: var(--s3c-color-muted); margin: 0; font-size: 0.8125rem; } .s3c-footer__top { font-size: 0.8125rem; padding: 4px 12px; border: 1px solid var(--s3c-color-border); border-radius: var(--s3c-radius); color: var(--s3c-color-text); } .s3c-footer__top:hover { border-color: var(--s3c-color-link); color: var(--s3c-color-link); } .s3c-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--s3c-color-muted); } .s3c-footer__links a { color: var(--s3c-color-muted); text-decoration: none; } .s3c-footer__links a:hover, .s3c-footer__links a:focus { color: var(--s3c-color-link); text-decoration: underline; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { :root { --s3c-col-left: 200px; --s3c-col-right: 240px; --s3c-gap: 24px; } } @media (max-width: 1024px) { .s3c-grid { grid-template-columns: var(--s3c-col-left) 1fr; } .s3c-grid > .s3c-sidebar--right { display: none; } } @media (max-width: 768px) { .s3c-header__menu-toggle { display: flex; } .s3c-header__nav { display: none; } .s3c-grid { grid-template-columns: 1fr; padding: 16px 14px 48px; } .s3c-grid > .s3c-sidebar { display: none; } body.s3c-theme.s3c-menu-open .s3c-sidebar--left { display: block; position: fixed; inset: var(--s3c-header-h) 0 0 0; background: var(--s3c-color-base); z-index: 60; max-height: none; overflow-y: auto; padding: 24px 20px; border-right: 1px solid var(--s3c-color-border); } body.s3c-theme.s3c-menu-open .s3c-header__menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.s3c-theme.s3c-menu-open .s3c-header__menu-toggle span:nth-child(2) { opacity: 0; } body.s3c-theme.s3c-menu-open .s3c-header__menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .s3c-post-title { font-size: 1.5rem; } .s3c-card__title { font-size: 1.125rem; } .s3c-header__search { max-width: 140px; } } @media (max-width: 480px) { .s3c-header__search { display: none; } .s3c-404__code { font-size: 4rem; } } /* ========================================================================== Theme toggle button (header right) — sun ↔ moon ========================================================================== */ .s3c-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-right: 4px; background: transparent; border: 1px solid var(--s3c-color-border); border-radius: var(--s3c-radius); color: var(--s3c-color-text); cursor: pointer; transition: border-color var(--s3c-transition), color var(--s3c-transition), background-color var(--s3c-transition); } .s3c-theme-toggle:hover { border-color: var(--s3c-color-link); color: var(--s3c-color-link); background: var(--s3c-color-surface); } .s3c-theme-toggle:focus-visible { outline: 2px solid var(--s3c-color-link); outline-offset: 2px; } .s3c-theme-toggle__icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Show sun (=switch-to-light) only in dark theme; show moon (=switch-to-dark) only in light theme. */ .s3c-theme-toggle__icon--sun { display: none; } .s3c-theme-toggle__icon--moon { display: block; } html.theme-dark .s3c-theme-toggle__icon--sun { display: block; } html.theme-dark .s3c-theme-toggle__icon--moon { display: none; } /* ========================================================================== Dark-theme-specific fine-tuning (most components inherit from CSS variables, these are extras) ========================================================================== */ html.theme-dark body.s3c-theme { color-scheme: dark; } /* Header search input in dark mode — keep contrast with surface */ html.theme-dark .s3c-header__search .wp-block-search__input { background: var(--s3c-color-surface-2); color: var(--s3c-color-contrast); border-color: var(--s3c-color-border); } html.theme-dark .s3c-header__search .wp-block-search__input::placeholder { color: var(--s3c-color-muted); } /* WordPress button blocks (404 home, etc.) — readable in dark */ html.theme-dark .wp-block-button__link { color: #ffffff !important; } /* Selection color in dark */ html.theme-dark ::selection { background: var(--s3c-color-link); color: var(--s3c-color-base); } /* Hero / featured image — softer in dark */ html.theme-dark .s3c-post-featured img { opacity: 0.92; } /* Avoid harsh white in WP block-styles default rendering */ html.theme-dark .wp-block-quote, html.theme-dark blockquote { background: var(--s3c-color-surface); border-left-color: var(--s3c-color-link); color: var(--s3c-color-text); } /* Disclosure/admonition box (used by docs/ad-monetization.md examples) */ .s3c-disclosure { background: var(--s3c-color-disclosure-bg); border-left: 3px solid var(--s3c-color-disclosure-bar); color: var(--s3c-color-disclosure-fg); padding: 10px 14px; margin: 0 0 24px; font-size: 0.875rem; border-radius: 4px; } .s3c-disclosure p { margin: 4px 0; } /* ========================================================================== Generic baseline — Twenty Twenty-Five 부모 dequeue 후 자립용 부모가 제공하던 generic block-level 기본값 중 접근성·기능 critical 만 흡수. 부모 활성화 / 비활성화와 무관하게 자식 테마 단독으로 동작 가능. ========================================================================== */ /* Focus ring — 모든 포커스 가능한 요소에 일관된 윤곽선 (접근성) */ :where(.wp-site-blocks *:focus) { outline-width: 2px; outline-style: solid; outline-color: var(--s3c-color-link); } /* Code block 가로 스크롤 — 모바일에서 긴 코드라인 잘리지 않도록 */ :where(pre) { overflow-x: auto; } /* Archive "더 읽기" 링크 — 블록 단위 표시 */ .more-link { display: block; } /* 링크 밑줄 두께·간격 polish */ a { text-decoration-thickness: 1px; text-underline-offset: 0.1em; } /* 텍스트 줄바꿈 polish — 마지막 줄에 외로운 단어 방지 */ h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p { text-wrap: pretty; } /* Respect users who explicitly request reduced motion: skip transitions */ @media (prefers-reduced-motion: reduce) { html:not([data-theme-loading]) body.s3c-theme, html:not([data-theme-loading]) body.s3c-theme * { transition: none !important; } }