/*!*************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
\*************************************************************************************************************************************************************************************************************************************************************/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── 모바일 가로 스크롤 방지 baseline ──────────────────────────────────────
* 한 컴포넌트라도 자기 너비를 넘기면 모바일에서 화면이 가로로 밀려나
* 모든 영역이 깨져 보인다. body 차원에서 한 번 막아두면 부분 깨짐이
* 페이지 전체로 번지지 않는다. (특정 가로 스크롤이 필요한 곳은
* 자체 .wrap { overflow-x: auto } 로 처리)
*/
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video { max-width: 100%; height: auto; }
/* iOS Safari 가 input focus 시 16px 미만 폰트에서 자동 줌하는 걸 막음 */
@media (max-width: 760px) {
input, select, textarea { font-size: 16px; }
}
/* ══════════════════════════════════════════════════════════════════════
* 디자인 토큰 — "mindBlog Redesign" 디자인 시스템
*
* 원칙 03: 네이버 친화 그린(#077A39)이 자사 키 컬러.
* 네이버 공식 그린(#03C75A)은 --naver 로 분리해 연동 배지 전용.
* → 브랜드색과 성공 상태색이 겹치던 문제를 해소.
* 원칙 04: 한글 가독성 기준 — 15px / 행간 1.65 / 자간 -1%.
*
* 하위호환: 기존 27개 .module.css 가 쓰는 --accent* / --green / --red 등
* 레거시 이름은 아래 "Legacy aliases" 에서 새 토큰으로 매핑한다.
* 새 코드는 --brand / --ok / --err 계열을 직접 쓸 것.
* ══════════════════════════════════════════════════════════════════════ */
:root {
color-scheme: light;
/* Brand — 그린 (Naver 친화). 자사 키 컬러 */
--brand: #077A39; /* 기본 액션 (흰 텍스트 대비 4.9:1) */
--brand-hover: #05622E;
--brand-weak: #E4F6EC; /* 틴트 배경 */
--brand-line: rgba(7,122,57,.28);
--on-brand: #ffffff;
/* Neutral — 클린 그레이 */
--bg: #F6F8F7;
--surface: #ffffff;
--surface-2: #EEF2F0;
--surface-3: #E3E9E6;
--border: #E4EAE7;
--border-2: #CDD6D2;
--text: #14201A;
--text-2: #4F5F58;
/* 날짜·건수·보조 라벨이 전부 이 색이다. 예전 #8A9A93 은 흰 배경에서 2.95:1 로
* 본문 크기 기준(4.5:1)에 한참 못 미쳤다 — 가장 어두운 면(--surface-3)에서도
* 4.5 를 넘도록 내렸다. */
--muted: #5B6C66;
/* Status — 전 화면 공통 작업 상태 언어 (대기·실행·일시정지·완료·실패) */
/* 상태색을 꽉 채운 배경 위에 얹는 글자색. 라이트에선 흰색이지만 다크에선
* 상태색 자체가 밝아지므로(--err #F98466 등) 어두운 글자로 뒤집어야 읽힌다. */
--on-fill: #ffffff;
/* 각 상태색은 (a) 흰 면·회색 면 위, (b) 자기 *-weak 배경 위 두 곳 모두에서
* 글자로 쓰인다(.ds-status-*, .ds-badge-*). 둘 다 4.5:1 을 넘겨야 한다.
*
* --ok 는 원래 #0E9F55 였는데 자기 틴트 위에서 2.94:1 밖에 안 나와 "완료"
* 배지 글자가 사실상 안 읽혔다. 그렇다고 그냥 어둡게만 하면 --brand(#077A39,
* hue 146) 와 색이 겹쳐 원칙 03 이 깨진다 → 청록 쪽으로 hue 165 로 밀어서
* 브랜드 그린과 구분되면서 대비도 확보했다. */
--ok: #047256; --ok-weak: #DCF3EC;
--warn: #B45309; --warn-weak: #FDF4E3;
--err: #C2321F; --err-weak: #FCE7E2;
--info: #1D4ED8; --info-weak: #DDE6FB;
/* Naver — 로그인·발행·크롤 등 "네이버 연동" 표시에만 사용.
* --naver 는 네이버 공식 그린이라 그대로 둔다(로고·칩 배경 전용).
* 다만 글자색으로 쓰면 흰 배경에서 2.25:1 이라 못 읽는다 → 텍스트는 반드시
* --naver-ink 를 쓸 것. */
--naver: #03C75A;
--naver-ink: #026B31;
--naver-weak: #E1F7EB;
/* 공감(하트) — 상태색이 아니라 행동의 색이라 별도로 둔다 */
--like: #BE185D;
--like-weak: #FCE7F0;
/* 자동 선택·자동 실행 — "내가 누른 것"과 "비서가 알아서 한 것"을 구분하는 색.
* 상태(성공/실패)도 브랜드도 아니라서 별도 축이 필요하다. */
--auto: #5B3DF0;
--auto-hover: #4A2CE3;
--auto-weak: #EAE6FE;
/* Typography */
--mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
/* Hanken Grotesk 를 뺐다 — Pretendard 가 라틴·한글을 모두 덮어서 실제로 이
* 자리까지 내려올 일이 없는데, 그 폰트 하나 때문에 실패하는 원격 요청이
* 하나 더 붙어 있었다. */
--sans: "Pretendard Variable", "Pretendard",
-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-size-base: 15px;
--line-base: 1.65;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(20,45,32,.07), 0 1px 3px rgba(20,45,32,.05);
--shadow-md: 0 2px 6px rgba(20,45,32,.06), 0 8px 24px rgba(20,45,32,.07);
--shadow-lg: 0 8px 24px rgba(20,45,32,.09), 0 24px 60px rgba(20,45,32,.10);
/* Radii */
--r-sm: 8px;
--r: 12px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 22px;
--r-pill: 999px;
}
/* ── Dark theme ──────────────────────────────────────────────────────────
* html[data-theme="dark"] 이 붙어야 활성화된다. 토글을 붙이기 전까지는
* 라이트 그대로 — 즉 이 블록만으로 기존 화면이 바뀌지는 않는다.
*/
[data-theme="dark"] {
color-scheme: dark;
--brand: #34C86E;
--brand-hover: #55D687;
--brand-weak: #10301E;
--brand-line: rgba(52,200,110,.32);
--on-brand: #08210F;
--bg: #0E1512;
--surface: #14201B;
--surface-2: #1B2A24;
--surface-3: #24352D;
--border: #24352D;
--border-2: #35493F;
--text: #EAF2EE;
--text-2: #A9BDB4;
/* 라이트와 같은 이유 — #6F847B 는 --surface-2/3 위에서 3.2~3.8:1 이었다 */
--muted: #8FA298;
--on-fill: #0B1611;
/* 라이트에서 --ok 를 청록 쪽으로 민 것과 짝 — "완료" 색이 테마를 넘나들며
* 같은 색으로 읽히고, 다크 브랜드 그린(#34C86E) 과도 구분된다. */
--ok: #3FD9A8; --ok-weak: #123028;
--warn: #FBBF24; --warn-weak: #3A2C10;
--err: #F98466; --err-weak: #3A1E17;
--info: #7CA2F7; --info-weak: #1A2340;
/* 다크에선 공식 그린이 어두운 면 위에서 7:1 이라 글자로 써도 된다 */
--naver: #03C75A; --naver-ink: #2FDE7F; --naver-weak: #0F3220;
--like: #F472B6; --like-weak: #3A1526;
--auto: #A78BFA; --auto-hover: #C4B5FD; --auto-weak: #241C46;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 8px 24px rgba(0,0,0,.45);
--shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}
/* ── Legacy aliases ──────────────────────────────────────────────────────
* 기존 .module.css 들이 참조하는 이름. 새 토큰을 가리키므로
* 라이트/다크 어느 쪽이든 자동으로 따라온다. 신규 작성 시 사용 금지.
*/
:root, [data-theme="dark"] {
--accent: var(--brand);
--accent-hover: var(--brand-hover);
--accent-light: var(--brand-weak);
--accent-bg: var(--brand-weak);
/* --accent-dark 는 실사용이 전부 "틴트 배경 위 텍스트" 라 --brand 가 맞다 */
--accent-dark: var(--brand);
--green: var(--ok);
--red: var(--err);
--red-light: var(--err-weak);
--yellow: var(--warn);
--yellow-light: var(--warn-weak);
--blue: var(--info);
--blue-light: var(--info-weak);
--danger: var(--err);
--danger-bg: var(--err-weak);
--fg: var(--text);
--fg-muted: var(--muted);
--text-1: var(--text);
--text-muted: var(--muted);
--surface-1: var(--surface);
--bg-2: var(--surface-2);
--font: var(--sans);
--font-mono: var(--mono);
--shadow: var(--shadow-md);
}
/* body 는 height 가 아니라 min-height 여야 한다.
* 둘 다 height:100% 면 body 가 뷰포트 높이에 딱 고정되고, 넘치는 본문 때문에
* *body 자신이* 스크롤 컨테이너가 된다. 그러면 뷰포트(html)는 스크롤할 게 없어서
* window.scrollY 가 영원히 0, window.scrollTo() 는 아무 일도 하지 않는다.
* 실제로 댓글 관리의 "맨 위로" 버튼(scrollY>400 에서 노출)이 절대 안 뜨고,
* 글 생성 후 window.scrollTo({top:0}) 도 먹지 않았다.
* min-height 로 두면 body 가 본문만큼 늘어나고 스크롤이 뷰포트로 돌아온다. */
html { height: 100%; }
body {
min-height: 100%;
}
html, body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: var(--font-size-base);
line-height: var(--line-base);
letter-spacing: -.01em;
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
background: var(--border-2);
border-radius: var(--r-pill);
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }
/* ── 상태 모션 — 다마고치·로그·pill·테이블 전 화면 공통 ─────────────────── */
@keyframes mb-pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.45; transform:scale(.7) } }
@keyframes mb-blink { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@keyframes mb-shimmer { 100% { background-position:-200% 0 } }
@keyframes mb-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-5px) } }
@keyframes mb-spin { to { transform:rotate(360deg) } }
@keyframes mb-jiggle { 0%,100% { transform:rotate(0) } 25% { transform:rotate(-5deg) } 75% { transform:rotate(5deg) } }
@keyframes mb-buzz { 0%,100% { transform:translateX(0) } 15% { transform:translateX(-3px) } 30% { transform:translateX(3px) } 45% { transform:translateX(-2px) } 60% { transform:translateX(2px) } 75% { transform:translateX(-1px) } }
@keyframes mb-rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes mb-blob { 0%,100% { border-radius:42% 58% 56% 44%/54% 48% 52% 46% } 50% { border-radius:56% 44% 46% 54%/44% 56% 44% 56% } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ── JetBrains Mono (자체 호스팅) ─────────────────────────────────────────
* 아이콘 폰트와 같은 이유 — Google Fonts 요청이 실패하면 로그 콘솔·수치 표시가
* 시스템 고정폭으로 조용히 대체된다. 깨져 보이진 않지만 자릿수 정렬이 흐트러진다.
*
* latin 서브셋만 받는다 (숫자·ASCII 로그 전용이라 키릴/그리스/베트남어 불필요).
*
* 웨이트는 400 하나만 선언한다. 예전엔 400/500/700 을 각각 선언했는데
* jetbrains-mono-{400,500,700}.woff2 세 파일이 바이트 단위로 동일한 사본이었다
* (셋 다 md5 570751c5…). 그래서 font-weight:700 요청이 "700 페이스 있음" 으로
* 매칭돼 합성 볼드가 꺼진 채 400 글리프가 나왔다 — 로그 콘솔·수치의 굵은 글씨가
* 조용히 안 굵어졌다. 면을 하나만 두면 브라우저가 볼드를 합성해준다.
* (진짜 500/700 파일을 받아오면 그때 다시 선언할 것.)
*/
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
/* ── Material Symbols (자체 호스팅) ────────────────────────────────────────
* 예전엔 Google Fonts CSS 를 로 불러왔는데, 그 요청이 실패하면
* .material-symbols-rounded 클래스 자체가 존재하지 않게 된다. 그러면 아이콘
* 자리에 리거처 원문("home", "dashboard", "cloud_download")이 그대로 노출됐다.
*
* 그래서 폰트를 public/fonts 로 내려받고 클래스도 여기서 정의한다.
* 네트워크 의존이 사라져서 실패 자체가 없다.
*
* 파일은 실제 사용하는 아이콘만 서브셋한 것 (5.1MB → 84KB).
* 새 아이콘을 쓰려면 scripts/icon-names.json 에 추가하고 폰트를 다시 받아야 한다.
* `npm run check:icons` 가 누락을 잡아준다.
*/
@font-face {
font-family: "Material Symbols Rounded";
font-style: normal;
font-weight: 100 700;
/* block — 폰트 로드 전에는 글자를 아예 감춘다. 로컬 파일이라 사실상 즉시지만,
* swap 이면 그 찰나에 리거처 원문이 보일 수 있어서 block 이 맞다. */
font-display: block;
src: url("/fonts/material-symbols-rounded.woff2") format("woff2");
}
.material-symbols-rounded {
font-family: "Material Symbols Rounded";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
/* 폰트가 어떤 이유로든 안 붙었을 때 옆 글자로 넘치지 않게 */
overflow: hidden;
}
/* Utility: 네이버 연동 그라데이션 — 연동 배지·버튼 전용 */
.naver-gradient {
background: linear-gradient(135deg, var(--naver) 0%, #02a94c 100%);
}
/* Glass card */
.glass-card {
background: color-mix(in srgb, var(--surface) 80%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/design-system.css ***!
\*******************************************************************************************************************************************************************************************************************************************************************/
/* ══════════════════════════════════════════════════════════════════════
* mindBlog 디자인 시스템 — 공통 컴포넌트 레이어
*
* 기존 구조는 CSS Modules 이지만, 화면마다 버튼·배지·통계타일을 따로 짜면서
* 스타일이 제각각이 된 게 리디자인의 출발점이었다. 그래서 "여러 화면에
* 반복되는 것"만 전역 유틸 클래스로 뽑는다. 레이아웃(그리드·간격·배치)은
* 계속 각 .module.css 의 몫 — 이 파일은 요소 하나의 생김새만 책임진다.
*
* 모든 클래스는 .ds- 프리픽스. CSS Modules 의 해시 클래스와 절대 충돌하지
* 않으므로