/* ============================================================ Yunseul · Design System B (라이트/다크 · CSS 변수 기반) 기존 assets/static/app.css 를 이 파일로 교체합니다. 배경/포인트색은 :root 변수 한 줄만 바꾸면 전체가 따라옵니다. ============================================================ */ /* ── 폰트: 서울 남산체(#66) 한글 서브셋. 기존과 동일 ── 서브셋 woff2 는 단일 weight(usWeightClass 400, 비가변)다. 여기서 400 700 범위로 선언하면 700 요청이 이 단일 아웃라인에 "매칭"돼 브라우저가 합성 볼드를 안 만든다 → 굵은 한글(페이지 제목·strong 등)이 안 굵어 보인다. 단일값 400 으로 선언하면 500↑ 요청은 매칭 폰트가 없어 합성 볼드(faux-bold)로 떨어져 굵게 보인다. */ @font-face { font-family: "Seoul Namsan"; src: url("/static/fonts/seoul-namsan.subset.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF; } /* ── 디자인 토큰 (라이트 기본값) ─────────────────────────── accent = 청색 #2456E5 · 배경 = cool gray. 교체 지점은 여기. */ :root { --bg: #F5F6F8; /* 회색 캔버스 */ --surface: #FFFFFF; /* 카드/헤더 면 */ --ink: #181A1F; /* 본문 텍스트 */ --muted: #6C727C; /* 보조 텍스트 */ --faint: #99A0AA; /* 메타/플레이스홀더 */ --line: #E5E8EC; /* 기본 경계선 */ --line-strong: #D6DAE0; /* 버튼/강조 경계선 */ --accent: #2456E5; /* 포인트색(텍스트·보더·하이라이트) */ --accent-soft: #EDF1FE; /* 포인트색 연한 배경 */ --on-accent: #FFFFFF; /* 포인트색 위 텍스트 */ --danger: #D92D20; /* 위험(삭제) — 텍스트·보더 */ --danger-soft: #FCEBE9; /* 위험색 연한 배경(hover) */ /* AI 연상 스파클 아이콘(마스크). 교정 헤딩·크레딧 칩 등에서 공유(#70). */ --ic-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 6.5 6.5 2-6.5 2-2 6.5-2-6.5-6.5-2 6.5-2z'/%3E%3C/svg%3E"); --radius-card: 14px; --radius-btn: 9px; --radius-chip: 999px; --maxw: 640px; color-scheme: light dark; } /* ── 다크 토큰 ────────────────────────────────────────────── OS 다크 모드 자동 적용 + [data-theme] 로 사용자 토글 가능. base.html 에 data-theme="dark|light" 를 주면 OS 설정을 덮어쓴다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0B0C0E; --surface:#16181C; --ink:#E9EBEE; --muted:#8B919B; --faint:#61666E; --line:#23262C; --line-strong:#33373E; --accent:#6E8BFF; --accent-soft:#161D32; --on-accent:#FFFFFF; --danger:#F3675A; --danger-soft:#2A1614; } } :root[data-theme="dark"] { --bg:#0B0C0E; --surface:#16181C; --ink:#E9EBEE; --muted:#8B919B; --faint:#61666E; --line:#23262C; --line-strong:#33373E; --accent:#6E8BFF; --accent-soft:#161D32; --on-accent:#FFFFFF; --danger:#F3675A; --danger-soft:#2A1614; } /* ── 리셋 ── */ * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } html { min-height: 100%; } body { font-family: "Seoul Namsan", "Helvetica Neue", "Helvetica", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; color: var(--ink); background: var(--bg); /* 푸터를 항상 화면 아래로(#70): 본문이 짧아도 푸터가 뷰포트 바닥에 붙는다. */ display: flex; flex-direction: column; min-height: 100vh; } a { color: inherit; } /* ── 헤더 ── */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .site-header .logo { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); } /* 윤슬 로고 심볼(#74): currentColor 상속 → 라이트/다크 자동. */ .site-header .logo svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; } .profile-nav { display: flex; align-items: center; gap: 0.85rem; } .profile-nav > a { font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; } /* 로그인 상태: 원형 프로필 아바타(#70) — 클릭 시 /me. */ .header-avatar { display: inline-flex; line-height: 0; border-radius: 50%; } .header-avatar .avatar { display: inline-flex; } /* (로그인 버튼은 .btn 시스템 사용 — base.html 에서 class="btn") */ /* 잔여 교정 크레딧 — 알약 칩 */ .header-credits { display: inline-flex; align-items: center; gap: 0.3rem; /* 높이 30px(아바타·로그인과 정렬) + 세로 내부 패딩 제거. 가로만 알약 형태 유지용 여백. */ height: 30px; padding: 0 0.6rem; font-size: 0.78rem; color: var(--muted); white-space: nowrap; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-chip); } /* 교정 크레딧 = AI 스파클 아이콘(#70, 기존 🪙 이모지 대체 — 라인 아이콘 톤 통일). */ .header-credits::before { content: ""; width: 0.85rem; height: 0.85rem; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ic-sparkle) center / contain no-repeat; mask: var(--ic-sparkle) center / contain no-repeat; } /* 언어 선택기(#85): 네이티브 엔 ::after 가 렌더되지 않으므로 화살표(chevron)는 래퍼(form)에 마스크로 얹는다(색=토큰 → 다크/라이트 자동). */ .lang-switch { position: relative; display: inline-flex; margin: 0; } .lang-switch select { appearance: none; -webkit-appearance: none; /* 헤더 로그인 버튼은 `.profile-nav>a`(0.9rem)가 `.btn`(0.85rem)을 덮어써 0.9rem 로 보인다 → 셀렉트도 0.9rem 로 맞춰 높이·글자 크기를 로그인 버튼과 정확히 일치시킨다. */ font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); /* .btn 과 동일한 상하 패딩 + 우측은 화살표 자리만큼 더 비운다(높이=로그인 버튼과 정렬). */ padding: 0.5rem 1.85rem 0.5rem 0.7rem; cursor: pointer; } .lang-switch select:hover { border-color: var(--muted); background: var(--bg); } /* 키보드 포커스 가시성: 입력 필드와 동일하게 강조색 외곽선(네이티브 링 제거). */ .lang-switch select:focus-visible { outline: none; border-color: var(--accent); } .lang-switch::after { content: ""; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); width: 0.7rem; height: 0.7rem; pointer-events: none; background-color: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } /* ── 본문/푸터 ── */ /* flex:1 로 본문이 남는 높이를 채워 푸터를 바닥으로 민다(#70). width 는 변수로 유지. */ .site-main { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem; flex: 1 0 auto; } /* 푸터(#74): 좌 저작권 / 우 정책 링크. 좁은 화면에선 wrap. */ .site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.85rem; padding: 1.75rem 1rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.85rem; } .site-footer a { color: var(--faint); text-decoration: none; } .footer-links { display: flex; gap: 0.85rem; } /* 페이지 제목 */ .site-main > h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; } /* 피드 헤더 행(#70): 제목 좌측 + 글쓰기 아이콘 버튼 우측 끝. */ .feed-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; } .feed-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } /* (글쓰기 버튼은 .btn 시스템 — home.html 에서 class="btn btn--accent btn--icon ic-pen") */ /* 브레드크럼(이동 경로, #79): 흩어진 .back-link 를 대체하는 단일 컴포넌트. 밑줄 없음, muted. 가로 나열 + 항목 사이 구분자 "›"(::before). 마지막 현재 항목(span[aria-current])은 ink·비링크. */ .breadcrumb { margin: 0 0 1rem; font-size: 0.9rem; } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .breadcrumb li { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); min-width: 0; } .breadcrumb li + li::before { content: "\203A"; color: var(--muted); } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; } /* ── 버튼 시스템(#70) ───────────────────────────────────────────── 단일 .btn + 색/크기/형태 모디파이어. 모두 토큰 기반이라 다크/라이트 자동. "기본/hover" 는 .btn 한 곳에서만 정의하고, 색·크기·형태만 모디파이어로 다르게 한다. 추후 버튼은 class="btn [btn--accent|--danger|--primary] [btn--sm|--lg|--block|--icon] [ic-*]" 조합만으로 일관 적용. (리액션/스크랩/크레딧 등 알약 '칩'은 별도 시스템 — .btn 아님.) */ button { font-family: inherit; cursor: pointer; } /* 기본 폴백: 클래스 없는