1735 lines
38 KiB
CSS
1735 lines
38 KiB
CSS
/* ==========================================================================
|
|
김낙준 포트폴리오 — EDITORIAL INDEX
|
|
밝은 종이 바탕. 배경 장식 없음. 타이포와 여백, 얇은 괘선이 화면을 만든다.
|
|
|
|
설계 원칙
|
|
· 목록은 카드 그리드가 아니라 '작품집 목차'다. 번호 → 제목 → 메타.
|
|
· 장식(그라디언트 블롭·큰 그림자)을 쓰지 않는다. 위계는 크기 대비로 만든다.
|
|
· 한글 본문은 산세리프, 숫자·라벨은 모노스페이스. 이 대비가 유일한 장식이다.
|
|
· 색은 카테고리 강조색으로만 들어온다.
|
|
|
|
명암비 (#FBF9FF 바탕 기준)
|
|
본문 --text 14.9 : 1
|
|
보조 --text-dim 7.8 : 1
|
|
흐림 --text-mute 6.6 : 1
|
|
링크 --accent 5.4 : 1
|
|
|
|
구성
|
|
1. 토큰
|
|
2. 리셋 / 기본
|
|
3. 표면(유리) 기본형
|
|
4. 내비게이션
|
|
5. 히어로 / 섹션
|
|
6. 인라인 카테고리 필터
|
|
7. 인덱스 목록 + 커서 썸네일
|
|
8. 게시물 상세
|
|
9. 마크다운 본문
|
|
10. 버튼 / 폼
|
|
11. 관리자
|
|
12. 피드백
|
|
13. 유틸리티
|
|
14. 반응형
|
|
15. 모션 최소화
|
|
========================================================================== */
|
|
|
|
/* --------------------------------------------------------------------------
|
|
1. 토큰
|
|
-------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
/* 바탕 */
|
|
--bg: #FBF9FF;
|
|
--bg-2: #F4F0FB;
|
|
--surface: #FFFFFF;
|
|
--surface-2: #F6F2FD;
|
|
|
|
/* 표면 */
|
|
--glass: rgba(255, 255, 255, 0.82);
|
|
--glass-border: rgba(124, 92, 200, 0.16);
|
|
--glass-hi: rgba(255, 255, 255, 0.95);
|
|
--blur: blur(14px) saturate(130%);
|
|
|
|
/* 괘선 — 이 디자인의 뼈대 */
|
|
--rule: rgba(42, 33, 64, 0.12);
|
|
--rule-strong: rgba(42, 33, 64, 0.26);
|
|
|
|
/* 글자 */
|
|
--text: #2A2140;
|
|
--text-dim: #584A75;
|
|
--text-mute: #635578;
|
|
|
|
/* 강조 */
|
|
--accent: #6D48F0;
|
|
--accent-2: #E85BA0;
|
|
--accent-3: #1F9E8B;
|
|
--accent-ink: #FFFFFF;
|
|
|
|
/* 그라디언트 — 아주 제한적으로만 쓴다 */
|
|
--grad-hero: linear-gradient(100deg, #8B6BFF 0%, #C56FE8 45%, #F072B8 100%);
|
|
--grad-accent: linear-gradient(135deg, #8B6BFF 0%, #E85BA0 100%);
|
|
|
|
/* 그림자 — 떠 있는 것(썸네일·모달·토스트)에만 */
|
|
--shadow:
|
|
0 1px 2px rgba(76, 46, 140, 0.05),
|
|
0 4px 14px -6px rgba(76, 46, 140, 0.14);
|
|
--shadow-lg:
|
|
0 2px 8px rgba(76, 46, 140, 0.07),
|
|
0 18px 40px -16px rgba(76, 46, 140, 0.26);
|
|
--ring:
|
|
0 0 0 2px var(--bg),
|
|
0 0 0 4px rgba(109, 72, 240, 0.6);
|
|
|
|
/* 형태 */
|
|
--radius-sm: 10px;
|
|
--radius: 14px;
|
|
--radius-lg: 20px;
|
|
|
|
/* 타이포 — 디스플레이와 본문의 낙차를 크게 둔다 */
|
|
--step--2: clamp(0.68rem, 0.66rem + 0.10vw, 0.74rem);
|
|
--step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
|
|
--step-0: clamp(0.94rem, 0.90rem + 0.20vw, 1.02rem);
|
|
--step-1: clamp(1.06rem, 0.99rem + 0.34vw, 1.26rem);
|
|
--step-2: clamp(1.24rem, 1.08rem + 0.76vw, 1.72rem);
|
|
--step-3: clamp(1.50rem, 1.20rem + 1.44vw, 2.44rem);
|
|
--step-4: clamp(1.95rem, 1.35rem + 2.90vw, 3.60rem);
|
|
--step-5: clamp(2.80rem, 1.30rem + 6.60vw, 6.40rem);
|
|
|
|
/* 간격 */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 18px;
|
|
--space-5: 26px;
|
|
--space-6: 40px;
|
|
--space-7: 64px;
|
|
--space-8: 104px;
|
|
|
|
/* 모션 */
|
|
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
--dur: 220ms;
|
|
|
|
/* 카테고리 강조색. JS 가 인라인으로 덮어쓴다. */
|
|
--card-accent: var(--accent);
|
|
|
|
/* 글꼴 */
|
|
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard,
|
|
"Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
2. 리셋 / 기본
|
|
-------------------------------------------------------------------------- */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: var(--font);
|
|
font-size: var(--step-0);
|
|
line-height: 1.75;
|
|
color: var(--text);
|
|
/* 장식 없는 종이. 위쪽만 아주 미세하게 밝다. */
|
|
background-color: var(--bg);
|
|
background-image: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 42%);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 60vh;
|
|
background-attachment: fixed;
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
img,
|
|
svg,
|
|
video {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
line-height: 1.22;
|
|
letter-spacing: -0.025em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
ol, ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
color: var(--accent-3);
|
|
font-weight: 600;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(232, 91, 160, 0.22);
|
|
color: var(--text);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--ring);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(124, 92, 200, 0.3) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: rgba(124, 92, 200, 0.24);
|
|
border-radius: 99px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(124, 92, 200, 0.42);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
3. 표면(유리) 기본형 — 소개 패널·모달·관리자 카드에만 쓴다
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.glass {
|
|
position: relative;
|
|
background-color: var(--glass);
|
|
-webkit-backdrop-filter: var(--blur);
|
|
backdrop-filter: var(--blur);
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
|
.glass {
|
|
background-color: var(--surface);
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
4. 내비게이션 — 떠 있는 알약이 아니라 얇은 괘선 한 줄
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
width: min(1080px, calc(100% - 2 * var(--space-5)));
|
|
margin: 0 auto;
|
|
padding: var(--space-4) 0;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
background: color-mix(in srgb, var(--bg) 88%, transparent);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* .nav 는 index.html 에서 .glass 도 함께 갖는다. 여기서는 그 장식을 지운다. */
|
|
.nav.glass {
|
|
border: 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.nav__brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
font-weight: 700;
|
|
font-size: var(--step-0);
|
|
letter-spacing: -0.01em;
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav__mark {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 3px;
|
|
background: var(--grad-accent);
|
|
flex: none;
|
|
}
|
|
|
|
.nav__links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-5);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nav__link {
|
|
position: relative;
|
|
padding: var(--space-1) 0;
|
|
color: var(--text-mute);
|
|
font-size: var(--step--1);
|
|
font-weight: 600;
|
|
transition: color var(--dur) var(--ease);
|
|
}
|
|
|
|
.nav__link:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav__link.is-active {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* 활성 항목에만 얇은 밑줄 */
|
|
.nav__link.is-active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -1px;
|
|
height: 2px;
|
|
background: var(--grad-accent);
|
|
}
|
|
|
|
.nav__admin {
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--text-mute);
|
|
font-size: var(--step--1);
|
|
font-weight: 600;
|
|
font-family: var(--font-mono);
|
|
cursor: pointer;
|
|
transition: color var(--dur) var(--ease);
|
|
}
|
|
|
|
.nav__admin:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
5. 히어로 / 섹션
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.shell {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(1080px, calc(100% - 2 * var(--space-5)));
|
|
margin: 0 auto;
|
|
padding: var(--space-8) 0;
|
|
display: block;
|
|
}
|
|
|
|
.hero {
|
|
padding: 0 0 var(--space-6);
|
|
}
|
|
|
|
/* 인덱스 구조에서는 쓰지 않지만, 다른 화면이 쓸 수 있어 남겨 둔다. */
|
|
.hero__eyebrow {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
letter-spacing: 0.34em;
|
|
text-transform: uppercase;
|
|
color: var(--text-mute);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
/* 화면에서 가장 큰 요소. 여기서 위계가 결정된다. */
|
|
.hero__title {
|
|
font-size: var(--step-5);
|
|
font-weight: 800;
|
|
letter-spacing: -0.05em;
|
|
line-height: 0.98;
|
|
max-width: min(100%, 12em);
|
|
word-break: keep-all;
|
|
color: var(--text);
|
|
}
|
|
|
|
.hero__grad {
|
|
color: var(--accent);
|
|
}
|
|
|
|
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
|
|
.hero__grad {
|
|
background: var(--grad-hero);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
.hero__sub {
|
|
margin-top: var(--space-5);
|
|
max-width: min(100%, 30em);
|
|
word-break: keep-all;
|
|
font-size: var(--step-1);
|
|
color: var(--text-dim);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* 통계는 배지가 아니라 모노스페이스 한 줄 */
|
|
.hero__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-5);
|
|
margin-top: var(--space-6);
|
|
padding-top: var(--space-4);
|
|
border-top: 1px solid var(--rule);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.hero__stat b {
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section {
|
|
margin-top: var(--space-7);
|
|
}
|
|
|
|
.section__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.section__title {
|
|
font-size: var(--step-2);
|
|
letter-spacing: -0.03em;
|
|
color: var(--text);
|
|
}
|
|
|
|
.section__sub {
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
7. 인덱스 목록 + 커서 썸네일
|
|
-------------------------------------------------------------------------- */
|
|
|
|
/* 이미지가 없는 글의 자리 — 카테고리 색으로 옅게 물든 판 + 제목 첫 글자 */
|
|
.idx__thumb--none {
|
|
display: grid;
|
|
place-items: center;
|
|
background-color: var(--surface-2);
|
|
background-image:
|
|
linear-gradient(140deg,
|
|
color-mix(in srgb, var(--card-accent) 18%, transparent) 0%,
|
|
transparent 62%);
|
|
color: color-mix(in srgb, var(--card-accent) 45%, var(--text-mute));
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
}
|
|
|
|
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
|
|
.idx__thumb--none {
|
|
background-image: none;
|
|
color: var(--text-mute);
|
|
}
|
|
}
|
|
|
|
/* 인덱스 행의 썸네일 */
|
|
.idx__thumb {
|
|
margin: 0;
|
|
width: 132px;
|
|
aspect-ratio: 4 / 3;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--rule);
|
|
background: var(--surface-2);
|
|
flex: none;
|
|
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
|
|
}
|
|
|
|
.idx__thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.idx:hover .idx__thumb {
|
|
transform: scale(1.05);
|
|
border-color: color-mix(in srgb, var(--card-accent) 45%, var(--rule));
|
|
}
|
|
|
|
/* 카테고리 묶음 — 분야 제목 + 그 아래 목록 */
|
|
.group {
|
|
margin-bottom: var(--space-7);
|
|
}
|
|
|
|
.group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.group__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-5);
|
|
font-size: var(--step-1);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text);
|
|
}
|
|
|
|
.group__dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--card-accent);
|
|
flex: none;
|
|
}
|
|
|
|
.group__count {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
font-weight: 700;
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.index {
|
|
list-style: none;
|
|
border-top: 1px solid var(--rule-strong);
|
|
}
|
|
|
|
.index__item {
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
/* 행 하나. 번호 / 본문 / 메타 세 칸 그리드. */
|
|
.idx {
|
|
display: grid;
|
|
/* 번호 · 썸네일 · 본문 · 날짜 */
|
|
grid-template-columns: 2.4rem auto 1fr auto;
|
|
align-items: center;
|
|
gap: var(--space-5);
|
|
/* 썸네일이 잘 보이도록 위아래를 넉넉히 둔다 */
|
|
padding: var(--space-5) 0;
|
|
color: var(--text);
|
|
transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
|
|
}
|
|
|
|
.idx:hover {
|
|
/* 행 전체가 살짝 안으로 밀려 들어온다 */
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.idx__no {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
font-weight: 700;
|
|
color: var(--text-mute);
|
|
letter-spacing: 0.02em;
|
|
align-self: center;
|
|
transition: color var(--dur) var(--ease);
|
|
}
|
|
|
|
.idx:hover .idx__no {
|
|
color: var(--card-accent);
|
|
}
|
|
|
|
.idx__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.idx__title {
|
|
font-size: var(--step-2);
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.3;
|
|
word-break: keep-all;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* 요약은 항상 보여 준다.
|
|
호버로 높이를 바꾸면 아래 행들이 커서 밑에서 밀려 목록을 훑기가 어려워진다. */
|
|
.idx__sum {
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
line-height: 1.65;
|
|
word-break: keep-all;
|
|
max-width: 46em;
|
|
transition: color var(--dur) var(--ease);
|
|
}
|
|
|
|
.idx:hover .idx__sum {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.idx__meta {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-4);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.idx__cat {
|
|
color: var(--card-accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.idx__date {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 로딩 스켈레톤 */
|
|
.index__item--skeleton .idx {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.index__item--skeleton .idx__no,
|
|
.index__item--skeleton .idx__title,
|
|
.index__item--skeleton .idx__meta {
|
|
display: block;
|
|
border-radius: 4px;
|
|
background: linear-gradient(100deg,
|
|
rgba(42, 33, 64, 0.05) 30%,
|
|
rgba(42, 33, 64, 0.10) 50%,
|
|
rgba(42, 33, 64, 0.05) 70%);
|
|
background-size: 220% 100%;
|
|
animation: shimmer 1.4s linear infinite;
|
|
color: transparent;
|
|
}
|
|
|
|
.index__item--skeleton .idx__no { height: 12px; }
|
|
.index__item--skeleton .idx__title { height: 20px; width: 58%; }
|
|
.index__item--skeleton .idx__meta { height: 12px; width: 88px; }
|
|
|
|
.index__item--skeleton .idx__thumb {
|
|
background: linear-gradient(100deg,
|
|
rgba(42, 33, 64, 0.05) 30%,
|
|
rgba(42, 33, 64, 0.10) 50%,
|
|
rgba(42, 33, 64, 0.05) 70%);
|
|
background-size: 220% 100%;
|
|
animation: shimmer 1.4s linear infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
from { background-position: 140% 0; }
|
|
to { background-position: -60% 0; }
|
|
}
|
|
|
|
#home-more {
|
|
margin-top: var(--space-6);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#home-state:not(:empty) {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
8. 게시물 상세
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.post {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* 소개 화면처럼 본문이 패널 안에 바로 들어가는 경우 */
|
|
.glass.post {
|
|
max-width: min(100%, 46em);
|
|
padding: clamp(var(--space-5), 3.5vw, var(--space-7));
|
|
}
|
|
|
|
.glass.post .post__body {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.post__head {
|
|
margin-bottom: var(--space-6);
|
|
padding-bottom: var(--space-5);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.post__cat {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--card-accent);
|
|
}
|
|
|
|
.post__title {
|
|
margin-top: var(--space-4);
|
|
font-size: var(--step-4);
|
|
letter-spacing: -0.04em;
|
|
line-height: 1.1;
|
|
max-width: min(100%, 15em);
|
|
word-break: keep-all;
|
|
color: var(--text);
|
|
}
|
|
|
|
.post__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-5);
|
|
margin-top: var(--space-5);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.post__nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-7);
|
|
padding-top: var(--space-5);
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
9. 마크다운 본문
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.post__body {
|
|
max-width: min(100%, 36em);
|
|
font-size: var(--step-0);
|
|
line-height: 1.95;
|
|
color: var(--text-dim);
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.post__body > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
|
|
color: var(--text);
|
|
margin: var(--space-7) 0 var(--space-3);
|
|
scroll-margin-top: 96px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.md-h1 { font-size: var(--step-3); }
|
|
.md-h2 { font-size: var(--step-2); }
|
|
.md-h3 { font-size: var(--step-1); }
|
|
.md-h4 { font-size: var(--step-0); }
|
|
.md-h5 { font-size: var(--step-0); color: var(--text-dim); }
|
|
|
|
.md-h6 {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
color: var(--text-mute);
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.md-p {
|
|
margin: var(--space-4) 0;
|
|
}
|
|
|
|
.md-ul,
|
|
.md-ol {
|
|
margin: var(--space-4) 0;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.md-ul { list-style: none; }
|
|
.md-ol { list-style: decimal; }
|
|
|
|
.md-li {
|
|
margin: var(--space-2) 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* 불릿은 짧은 선 하나 — 목차 디자인과 같은 어휘 */
|
|
.md-ul > .md-li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1.4em;
|
|
top: 0.92em;
|
|
width: 12px;
|
|
height: 1.5px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.md-ol::marker,
|
|
.md-ol > .md-li::marker {
|
|
color: var(--text-mute);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.md-ul .md-ul,
|
|
.md-ul .md-ol,
|
|
.md-ol .md-ul,
|
|
.md-ol .md-ol {
|
|
margin: var(--space-2) 0;
|
|
}
|
|
|
|
.md-quote {
|
|
margin: var(--space-6) 0;
|
|
padding: 0 0 0 var(--space-5);
|
|
border-left: 2px solid var(--accent-2);
|
|
color: var(--text);
|
|
font-size: var(--step-1);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.md-quote > *:first-child { margin-top: 0; }
|
|
.md-quote > *:last-child { margin-bottom: 0; }
|
|
|
|
.md-code {
|
|
margin: var(--space-5) 0;
|
|
padding: var(--space-4) var(--space-5);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--rule);
|
|
background: #FAF8FE;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
line-height: 1.7;
|
|
color: #3B2E5A;
|
|
}
|
|
|
|
.md-code code {
|
|
font: inherit;
|
|
color: inherit;
|
|
background: none;
|
|
padding: 0;
|
|
white-space: pre;
|
|
}
|
|
|
|
.md-inline-code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
padding: 0.12em 0.4em;
|
|
border-radius: 5px;
|
|
background: rgba(124, 92, 200, 0.10);
|
|
color: #5B3FC7;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
.md-hr {
|
|
margin: var(--space-7) 0;
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--rule);
|
|
}
|
|
|
|
.md-link {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
box-shadow: inset 0 -2px 0 rgba(109, 72, 240, 0.35);
|
|
transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
|
|
}
|
|
|
|
.md-link:hover {
|
|
color: var(--accent);
|
|
box-shadow: inset 0 -2px 0 var(--accent);
|
|
}
|
|
|
|
/* 이미지 — 기본은 본문 폭 100%.
|
|
alt 뒤에 크기 지시자를 붙여 조절한다: 
|
|
small 약 260px half 절반(연속 2장은 나란히)
|
|
wide 본문보다 넓게 숫자 그 픽셀 폭 (예: |320) */
|
|
.md-figure {
|
|
margin: var(--space-6) 0;
|
|
}
|
|
|
|
.md-img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--rule);
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
/* 캡션 — alt 텍스트가 있으면 이미지 아래에 붙는다 */
|
|
.md-cap {
|
|
margin-top: var(--space-2);
|
|
font-size: var(--step--2);
|
|
color: var(--text-mute);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* 유튜브 임베드 — 16:9 비율을 유지한다 */
|
|
.md-embed {
|
|
margin: var(--space-6) 0;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
border: 1px solid var(--rule);
|
|
background: #000;
|
|
}
|
|
|
|
.md-embed__frame {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.md-figure--small {
|
|
width: min(100%, 260px);
|
|
}
|
|
|
|
.md-figure--fixed {
|
|
width: min(100%, var(--md-img-w, 100%));
|
|
}
|
|
|
|
/* 연속해서 두 장을 쓰면 나란히 놓인다 (inline-block 사이 공백만큼 뺀다) */
|
|
.md-figure--half {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: min(100%, calc(50% - 5px));
|
|
}
|
|
|
|
/* 본문 단(36em)보다 넓게. 화면이 좁으면 알아서 본문 폭으로 줄어든다. */
|
|
.md-figure--wide {
|
|
width: min(calc(100vw - 2 * var(--space-5)), 46em);
|
|
max-width: none;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.post__body strong { color: var(--text); font-weight: 700; }
|
|
.post__body em { color: var(--accent-3); font-style: italic; font-weight: 600; }
|
|
.post__body del { color: var(--text-mute); }
|
|
|
|
.post__body table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: var(--space-5) 0;
|
|
font-size: var(--step--1);
|
|
}
|
|
|
|
.post__body th,
|
|
.post__body td {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-bottom: 1px solid var(--rule);
|
|
text-align: left;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
10. 버튼 / 폼
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-5);
|
|
border-radius: 99px;
|
|
border: 1px solid var(--rule-strong);
|
|
background: transparent;
|
|
color: var(--text);
|
|
font-size: var(--step--1);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
|
|
color var(--dur) var(--ease);
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: rgba(109, 72, 240, 0.06);
|
|
}
|
|
|
|
.btn--primary {
|
|
background: var(--text);
|
|
border-color: var(--text);
|
|
color: var(--accent-ink);
|
|
}
|
|
|
|
.btn--primary:hover {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-ink);
|
|
}
|
|
|
|
.btn--ghost {
|
|
border-color: var(--rule);
|
|
}
|
|
|
|
.btn--danger {
|
|
border-color: rgba(224, 74, 106, 0.4);
|
|
color: #C3324F;
|
|
}
|
|
|
|
.btn--danger:hover {
|
|
border-color: #C3324F;
|
|
background: rgba(224, 74, 106, 0.08);
|
|
color: #A9203C;
|
|
}
|
|
|
|
.btn--sm {
|
|
padding: var(--space-1) var(--space-4);
|
|
}
|
|
|
|
.btn:disabled,
|
|
.btn[disabled] {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 폼 */
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.field__label {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.field__hint {
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.field__hint.is-error {
|
|
color: #C3324F;
|
|
}
|
|
|
|
.input,
|
|
.textarea,
|
|
.select {
|
|
width: 100%;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--rule);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-size: var(--step-0);
|
|
transition: border-color var(--dur) var(--ease);
|
|
}
|
|
|
|
.input::placeholder,
|
|
.textarea::placeholder {
|
|
color: var(--text-mute);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.input:hover,
|
|
.textarea:hover,
|
|
.select:hover {
|
|
border-color: var(--rule-strong);
|
|
}
|
|
|
|
.input:focus,
|
|
.textarea:focus,
|
|
.select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: var(--ring);
|
|
}
|
|
|
|
.input[type="color"] {
|
|
padding: var(--space-1);
|
|
height: 44px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.input[type="number"] {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.textarea {
|
|
min-height: 420px;
|
|
flex: 1 1 auto;
|
|
max-height: 70vh;
|
|
resize: vertical;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
line-height: 1.75;
|
|
white-space: pre-wrap;
|
|
tab-size: 4;
|
|
}
|
|
|
|
.select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
padding-right: var(--space-6);
|
|
background-image:
|
|
linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
|
|
linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
|
|
background-position:
|
|
calc(100% - 20px) calc(50% + 2px),
|
|
calc(100% - 14px) calc(50% + 2px);
|
|
background-size: 6px 6px, 6px 6px;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select option {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.form-row > * {
|
|
flex: 1 1 140px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
11. 관리자
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.admin {
|
|
padding: var(--space-6);
|
|
max-width: 440px;
|
|
margin: var(--space-8) auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.admin__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-5);
|
|
padding-bottom: var(--space-4);
|
|
border-bottom: 1px solid var(--rule-strong);
|
|
}
|
|
|
|
.admin__title {
|
|
font-size: var(--step-2);
|
|
letter-spacing: -0.03em;
|
|
color: var(--text);
|
|
}
|
|
|
|
.editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.editor__panes {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-4);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.editor__pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.editor__preview {
|
|
min-height: 420px;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
padding: var(--space-4) var(--space-5);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--rule);
|
|
background: var(--surface);
|
|
max-width: none;
|
|
}
|
|
|
|
.dropzone {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-6) var(--space-4);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px dashed var(--rule-strong);
|
|
background: transparent;
|
|
color: var(--text-mute);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
|
|
color var(--dur) var(--ease);
|
|
}
|
|
|
|
.dropzone:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dropzone.is-over {
|
|
border-color: var(--accent);
|
|
border-style: solid;
|
|
background: rgba(109, 72, 240, 0.06);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dropzone[data-progress]::after {
|
|
content: attr(data-progress) " 업로드 중…";
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.thumbs {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.thumb {
|
|
position: relative;
|
|
margin: 0;
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
border: 1px solid var(--rule);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.thumb.is-cover {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 1px var(--accent);
|
|
}
|
|
|
|
.thumb.is-cover::before {
|
|
content: "대표";
|
|
position: absolute;
|
|
top: var(--space-2);
|
|
left: var(--space-2);
|
|
z-index: 2;
|
|
padding: 1px var(--space-3);
|
|
border-radius: 99px;
|
|
background: var(--accent);
|
|
color: var(--accent-ink);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.thumb__img {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.thumb__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-1);
|
|
padding: var(--space-2);
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
.thumb__actions .btn {
|
|
flex: 1 1 auto;
|
|
padding: 2px var(--space-2);
|
|
}
|
|
|
|
.rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
/* 관리자 목록도 같은 어휘: 카드가 아니라 괘선으로 나뉜 행 */
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
transition: padding-left var(--dur) var(--ease);
|
|
}
|
|
|
|
.row:hover {
|
|
padding-left: var(--space-3);
|
|
}
|
|
|
|
.row.glass {
|
|
padding: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.row.glass:hover {
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.row__main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.row__side {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 관리자 목록이 쓰는 카드 계열 클래스 (홈은 더 이상 쓰지 않는다) */
|
|
.card__cat {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--card-accent);
|
|
}
|
|
|
|
.card__title {
|
|
font-size: var(--step-0);
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.card__meta {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.cat__dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
flex: none;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
12. 피드백
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
z-index: 90;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 200ms linear;
|
|
}
|
|
|
|
.progress > span {
|
|
display: block;
|
|
height: 100%;
|
|
width: 40%;
|
|
background: var(--grad-accent);
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.progress.is-busy {
|
|
opacity: 1;
|
|
}
|
|
|
|
.progress.is-busy > span {
|
|
animation: progress-slide 1.1s var(--ease) infinite;
|
|
}
|
|
|
|
@keyframes progress-slide {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(350%); }
|
|
}
|
|
|
|
.toast-root {
|
|
position: fixed;
|
|
right: var(--space-5);
|
|
bottom: var(--space-5);
|
|
z-index: 80;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: var(--space-2);
|
|
pointer-events: none;
|
|
max-width: min(380px, calc(100vw - 2 * var(--space-5)));
|
|
}
|
|
|
|
.toast {
|
|
pointer-events: auto;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--rule);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-lg);
|
|
color: var(--text);
|
|
font-size: var(--step--1);
|
|
font-weight: 600;
|
|
line-height: 1.55;
|
|
border-left: 3px solid var(--text-mute);
|
|
animation: toast-in 220ms var(--ease);
|
|
}
|
|
|
|
.toast--ok {
|
|
border-left-color: var(--accent-3);
|
|
}
|
|
|
|
.toast--error {
|
|
border-left-color: #E04A6A;
|
|
}
|
|
|
|
@keyframes toast-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: var(--space-4);
|
|
background: rgba(42, 33, 64, 0.32);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
animation: fade-in 160ms var(--ease);
|
|
}
|
|
|
|
.modal__card {
|
|
width: min(420px, 100%);
|
|
padding: var(--space-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--rule);
|
|
box-shadow: var(--shadow-lg);
|
|
animation: modal-in 220ms var(--ease);
|
|
}
|
|
|
|
.modal__msg {
|
|
color: var(--text);
|
|
font-size: var(--step-0);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.modal__msg:first-child {
|
|
font-weight: 700;
|
|
font-size: var(--step-1);
|
|
}
|
|
|
|
.modal__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes modal-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-8) 0;
|
|
text-align: left;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.empty__icon {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step-1);
|
|
line-height: 1;
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 1px var(--space-3);
|
|
border-radius: 99px;
|
|
border: 1px solid var(--rule);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--step--2);
|
|
color: var(--text-mute);
|
|
}
|
|
|
|
.tagline {
|
|
font-size: var(--step--1);
|
|
color: var(--text-mute);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.foot {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(1080px, calc(100% - 2 * var(--space-5)));
|
|
margin: 0 auto var(--space-7);
|
|
padding: var(--space-5) 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
border-radius: 0;
|
|
border-top: 1px solid var(--rule);
|
|
background: none;
|
|
}
|
|
|
|
.foot.glass {
|
|
border: 0;
|
|
border-top: 1px solid var(--rule);
|
|
background: none;
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
13. 유틸리티
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
a.sr-only:focus,
|
|
a.sr-only:focus-visible {
|
|
position: fixed;
|
|
top: var(--space-3);
|
|
left: var(--space-3);
|
|
z-index: 200;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: var(--space-3) var(--space-4);
|
|
clip: auto;
|
|
clip-path: none;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
box-shadow: var(--ring);
|
|
}
|
|
|
|
.stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.row-between {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.is-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
14. 반응형
|
|
-------------------------------------------------------------------------- */
|
|
|
|
@media (max-width: 860px) {
|
|
.editor__panes {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.textarea {
|
|
min-height: 320px;
|
|
}
|
|
|
|
.editor__preview {
|
|
min-height: 220px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 719px) {
|
|
.shell {
|
|
padding: var(--space-7) 0;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.nav__links {
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.lead {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
/* 좁은 화면에서는 메타를 제목 아래로 내린다 */
|
|
.idx {
|
|
grid-template-columns: 2rem 88px 1fr;
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) 0;
|
|
}
|
|
|
|
.idx__thumb {
|
|
width: 88px;
|
|
}
|
|
|
|
.group {
|
|
margin-bottom: var(--space-7);
|
|
}
|
|
|
|
.idx__meta {
|
|
grid-column: 3;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.idx:hover {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.row {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.row__side {
|
|
width: 100%;
|
|
}
|
|
|
|
.toast-root {
|
|
left: var(--space-3);
|
|
right: var(--space-3);
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
.thumbs {
|
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
|
}
|
|
}
|
|
|
|
/* 포인터가 없는 기기(터치)에서는 요약을 항상 보여 준다 */
|
|
@media (hover: none) {
|
|
.idx:hover {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
15. 모션 최소화
|
|
-------------------------------------------------------------------------- */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.idx:hover,
|
|
.row:hover {
|
|
padding-left: 0;
|
|
}
|
|
|
|
}
|