https://changpop.wiki/%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:%EB%8C%80%EB%AC%B8.css/+/history?feed=atom 2026-10-26T09:58:00Z 이 문서의 편집 역사 MediaWiki 1.46.2 https://changpop.wiki/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:%EB%8C%80%EB%AC%B8.css&diff=2991&oldid=prev 2026-10-04T15:53:00Z

<p>새 문서: .chp--mainpage-nav { display: flex; align-items: center; justify-content: space-between; } .chp--mainpage-nav-sitelabel { display: flex; align-items: center; } .chp--mainpage-siteicon { width: 32px; display: inline-block; margin-right: var(--space-md, 1rem); } .chp--mainpage-nav-links { display: flex; } @media (max-width: 639px) { .chp--mainpage-nav-links { display: none; } } .chp--mainpage-nav-links a { padding-inline: var(--space-sm, 0.75rem); fo...</p> <p><b>새 문서</b></p><div>.chp--mainpage-nav {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .chp--mainpage-nav-sitelabel {<br /> display: flex;<br /> align-items: center;<br /> }<br /> <br /> .chp--mainpage-siteicon {<br /> width: 32px;<br /> display: inline-block;<br /> margin-right: var(--space-md, 1rem);<br /> }<br /> <br /> .chp--mainpage-nav-links {<br /> display: flex;<br /> }<br /> <br /> @media (max-width: 639px) {<br /> .chp--mainpage-nav-links {<br /> display: none;<br /> }<br /> }<br /> <br /> .chp--mainpage-nav-links a {<br /> padding-inline: var(--space-sm, 0.75rem);<br /> font-size: var(--font-size-small, 0.875rem);<br /> font-weight: var(--font-weight-medium);<br /> color: var(--color-base);<br /> }<br /> <br /> .chp--mainpage-tagline {<br /> font-size: var(--font-size-xxx-large, 1.75rem);<br /> letter-spacing: -0.05rem;<br /> font-weight: var(--font-weight-medium, 500);<br /> line-height: var(--line-height-xxx-large);<br /> }<br /> <br /> .chp--mainpage-tagline-sitename {<br /> font-weight: var(--font-weight-semi-bold, 600);<br /> color: var(--color-progressive);<br /> }<br /> <br /> .chp--mainpage-hero {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> min-height: 240px;<br /> height: 240px;<br /> }<br /> <br /> .chp--mainpage-content {<br /> height: 100%;<br /> display: flex;<br /> align-self: baseline;<br /> align-items: center;<br /> }<br /> <br /> .chp--mainpage-cta {<br /> height: 100%;<br /> width: 240px;<br /> display: flex;<br /> flex-direction: column;<br /> gap: 2px;<br /> }<br /> <br /> @media (max-width: 639px) {<br /> .chp--mainpage-hero {<br /> flex-direction: column;<br /> height: 360px;<br /> }<br /> <br /> .chp--mainpage-cta {<br /> width: 100%;<br /> height: 120px;<br /> flex-direction: row;<br /> }<br /> }<br /> <br /> .chp--mainpage-cta-box {<br /> position: relative;<br /> flex: 1;<br /> padding-inline: var(--space-unit, 1rem);<br /> background-color: var(--color-surface-1);<br /> cursor: pointer;<br /> transition-property: background-color, box-shadow;<br /> transition-duration: .15s;<br /> <br /> display: flex;<br /> flex-direction: column;<br /> justify-content: space-between;<br /> }<br /> <br /> /* Citizen 스킨에서는 [[특수:검색]]으로 연결 대신 내장 검색 트리거 사용 */<br /> .skin-citizen .chp--mainpage-cta-box.citizen-search-trigger .chp--mainpage-cta-link-container {<br /> display: none;<br /> } <br /> <br /> .chp--mainpage-cta-box:hover {<br /> box-shadow: var(--color-progressive--hover, #a14ceb) 0 0 0 var(--border-width-thick, 2px);<br /> background-color: var(--color-surface-3);<br /> }<br /> <br /> .chp--mainpage-cta-box:active {<br /> box-shadow: var(--color-progressive--active, #a14ceb) 0 0 0 var(--border-width-thick, 2px);<br /> background-color: var(--color-surface-4);<br /> }<br /> <br /> .chp--mainpage-cta-header {<br /> font-size: var(--font-size-large, 1.125rem);<br /> font-weight: var(--font-weight-semi-bold, 600);<br /> padding-block: var(--space-unit, 1rem);<br /> }<br /> <br /> .chp--mainpage-cta-label {<br /> padding-block: var(--space-content-unit, 1rem);<br /> font-size: var(--font-size-small, 0.875rem);<br /> color: var(--color-subtle);<br /> letter-spacing: 0.05rem;<br /> }<br /> <br /> .chp--mainpage-cta-arrow {<br /> position: absolute;<br /> right: 0;<br /> padding-inline: var(--space-content-unit);<br /> transition-property: padding-inline;<br /> transition-duration: .15s;<br /> }<br /> <br /> .chp--mainpage-cta-box:hover .chp--mainpage-cta-arrow {<br /> padding-inline: var(--space-sm);<br /> }<br /> <br /> .chp--mainpage-cta-link-container {<br /> position: absolute;<br /> inset: 0;<br /> width: 100%;<br /> height: 100%;<br /> }<br /> <br /> .chp--mainpage-cta-link-container &gt; a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> color: transparent;<br /> }<br /> <br /> .chp--mainpage-subjects-nav {<br /> display: grid;<br /> gap: 0.5rem;<br /> grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));<br /> grid-auto-rows: 3rem;<br /> }<br /> <br /> .chp--mainpage-subject-item {<br /> position: relative;<br /> align-items: center;<br /> display: flex;<br /> align-self: center;<br /> background-color: var(--color-surface-3);<br /> height: 100%;<br /> border-radius: var(--border-radius-medium, 8px);<br /> border: var(--border-base);<br /> overflow: hidden;<br /> transition: background-color 0.3s ease;<br /> }<br /> <br /> .chp--mainpage-subject-item:has(&gt; a:hover) {<br /> background-color: var(--color-surface-4);<br /> }<br /> <br /> .chp--mainpage-subject-item &gt; a {<br /> width: 100%;<br /> height: 100%;<br /> display: flex;<br /> align-items: center;<br /> padding-left: 3rem;<br /> color: var(--color-base);<br /> font-weight: 300;<br /> font-size: var(--font-size-large);<br /> letter-spacing: -0.03rem;<br /> text-decoration: none;<br /> }<br /> <br /> .chp--mainpage-subject-item &gt; a:hover {<br /> font-weight: 500;<br /> }<br /> <br /> .chp--mainpage-subject-item &gt; a::after {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> left: 0;<br /> bottom: 0;<br /> width: 3rem;<br /> height: 3px;<br /> transition: width 0.3s ease;<br /> background-color: var(--color-progressive);<br /> }<br /> <br /> .chp--mainpage-subject-item &gt; a:hover::after {<br /> width: 100%;<br /> background-color: var(--color-progressive--hover);<br /> }<br /> <br /> .chp--mainpage-subject-item &gt; a:active::after {<br /> width: 100%;<br /> background-color: var(--color-progressive--active);<br /> }<br /> <br /> .chp--mainpage-subject-symbol {<br /> position: absolute;<br /> padding: var(--space-md);<br /> pointer-events: none;<br /> display: flex;<br /> }<br /> <br /> .chp--mainpage-subject-symbol &gt; img {<br /> width: 24px;<br /> }<br /> <br /> /*카드 나열 본문*/<br /> <br /> .chp--mainpage-grid {<br /> display: grid;<br /> grid-template-columns: repeat(3, 1fr);<br /> gap: var(--space-xs, 0.5rem);<br /> }<br /> <br /> .chp--mainpage-grid-main {<br /> grid-column: 1 / 3;<br /> }<br /> <br /> .chp--mainpage-grid-side {<br /> grid-column: 3 / 4;<br /> }<br /> <br /> .chp--mainpage-cards-container {<br /> columns: 3 320px;<br /> column-gap: var(--space-xs, 0.5rem);<br /> }<br /> <br /> .chp--mainpage-card {<br /> break-inside: avoid; <br /> }<br /> <br /> .chp--mainpage-card .mw--card {<br /> margin-block: 0;<br /> margin-bottom: var(--space-md, 1rem);<br /> }<br /> <br /> .chp--mainpage-cards-container.chp--mainpage-2cols {<br /> columns: 2 320px;<br /> }</div>

창팝위키