/*
Theme Name: Nobrains
Theme URI: https://nobrains.net
Description: 노브레인스 넷 자식 테마 — 앱 허브 + 앱 상세 + 유동닉 게시판. Swiss Editorial 시스템.
Author: nobrains
Template: blocksy
Version: 2.0.0
Text Domain: nobrains
License: GPL-2.0-or-later
*/

/* ==========================================================================
   노브레인스 — Swiss Editorial / The Workshop Ledger
   --------------------------------------------------------------------------
   디자인 문법: swiss-editorial (hardlight-ui)
   ─────────────────────────────────────────────────────────────────────────
   아이디어: 이 사이트는 "앱을 모아둔 곳" 이 아니라 "작업 일지(大帳)" 다.
   넘버링된 항목이 세로 정렬선을 따라 이어지고, 규칙선이 주제를 나누며,
   비대칭이 표현을 담당한다.

   금지: 카드 그리드 + 라운드 모서리 + 그림자 + 그라디언트 + 퍼플.
   허용: 여백, 규칙선, 굵기, 크기, 정렬. (슬롭이 아니라 구조로 승부한다)

   정본 토큰 = 타이핑 게임 style.css 와 반드시 동일해야 한다.
   ========================================================================== */

/* ==========================================================================
   1. 토큰
   ========================================================================== */
:root {
	/* ── 캔버스 ────────────────────────────────────────────── */
	--nb-paper:      #F4F3EE;
	--nb-paper-2:    #EAE8E0;
	--nb-card:       #FFFFFF;

	/* ── 잉크 ──────────────────────────────────────────────── */
	--nb-ink:        #171A1D;
	--nb-ink-2:      #565B60;
	--nb-ink-3:      #676C71;

	/* ── 규칙선 ────────────────────────────────────────────── */
	--nb-rule:       #C9C7BE;
	--nb-rule-2:     #DCDAD2;
	--nb-rule-ink:   #171A1D;

	/* ── 강조 (Vermilion) ──────────────────────────────────── */
	--nb-brand:      #B62D22;
	--nb-brand-deep: #8E211A;
	--nb-brand-soft: #F4E3E0;
	--nb-on-brand:   #FFFFFF;

	/* ── 상태 ──────────────────────────────────────────────── */
	--nb-ok:         #2F6B3C;
	--nb-warn:       #8A5A12;
	--nb-lab:        #3A4E7A;
	/* 상태 칩 위에 올라가는 글자색 — 칩 배경이 어두우므로 여기선 밝은색 */
	--nb-on-ok:      #F4F3EE;
	--nb-on-warn:    #F4F3EE;
	--nb-on-lab:     #F4F3EE;

	/* ── 형상: 각진 것 ─────────────────────────────────────── */
	--nb-radius:     0;
	--nb-radius-sm:  0;
	--nb-shadow:     none;
	--nb-shadow-lg:  none;

	/* ── 서체 ──────────────────────────────────────────────── */
	--nb-font: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
	           "Malgun Gothic", "Noto Sans KR", sans-serif;
	--nb-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

	/* ── 크기 (1.25 배) ────────────────────────────────────── */
	--nb-fs-xs:   0.75rem;
	--nb-fs-sm:   0.8125rem;
	--nb-fs-base: 1rem;
	--nb-fs-md:   1.125rem;
	--nb-fs-lg:   1.375rem;
	--nb-fs-xl:   1.75rem;
	--nb-fs-2xl:  2.25rem;
	--nb-fs-3xl:  clamp(2.5rem, 5.5vw, 4.25rem);

	/* ── 간격 (8 기준) ─────────────────────────────────────── */
	--nb-s1: 4px;  --nb-s2: 8px;   --nb-s3: 12px;  --nb-s4: 16px;
	--nb-s5: 24px; --nb-s6: 32px;  --nb-s7: 48px;  --nb-s8: 64px; --nb-s9: 96px;

	--nb-wrap: 1360px;
	--nb-gutter: 24px;
}

/* 다크 모드
   - 실제 전환은 wp-dark-mode 플러그인이 html.wp-dark-mode-active 로 처리한다
   - 이 플러그인은 var() 참조를 --wp-dark-mode-{bg|text|border}--변수명 으로 자동 변환한다.
     새 토큰을 쓸 때마다 변환본도 함께 정의해야 다크에서도 값이 유지된다. */
html.wp-dark-mode-active,
html[data-theme="dark"], body.is-dark {
	--nb-paper:      #121215;
	--nb-paper-2:    #1A1A1E;
	--nb-card:       #1E1E23;

	--nb-ink:        #EDEAE3;
	--nb-ink-2:      #A09C93;
	--nb-ink-3:      #8A867D;

	--nb-rule:       #3A3A42;
	--nb-rule-2:     #2A2A31;
	--nb-rule-ink:   #EDEAE3;

	--nb-brand:      #E8604F;
	--nb-brand-deep: #F08070;
	--nb-brand-soft: #2E1714;
	--nb-on-brand:   #140F0D;

	--nb-ok:         #5FBF7A;
	--nb-warn:       #D9A441;
	--nb-lab:        #8FA6D8;
	/* 다크에서는 칩 배경이 밝으므로 글자색을 어둡게 뒤집는다 */
	--nb-on-ok:      #121215;
	--nb-on-warn:    #121215;
	--nb-on-lab:     #121215;

	/* wp-dark-mode 변환본 */
	--wp-dark-mode-bg--nb-paper:      #121215;
	--wp-dark-mode-bg--nb-paper-2:    #1A1A1E;
	--wp-dark-mode-bg--nb-card:       #1E1E23;
	--wp-dark-mode-bg--nb-rule:       #3A3A42;
	--wp-dark-mode-bg--nb-rule-2:     #2A2A31;
	--wp-dark-mode-bg--nb-brand:      #E8604F;
	--wp-dark-mode-bg--nb-brand-deep: #F08070;
	--wp-dark-mode-bg--nb-brand-soft: #2E1714;
	--wp-dark-mode-bg--nb-ok:         #5FBF7A;
	--wp-dark-mode-bg--nb-warn:       #D9A441;
	--wp-dark-mode-bg--nb-lab:        #8FA6D8;
	--wp-dark-mode-text--nb-paper:      #EDEAE3;
	--wp-dark-mode-text--nb-paper-2:    #EDEAE3;
	--wp-dark-mode-text--nb-card:       #EDEAE3;
	--wp-dark-mode-text--nb-ink:        #EDEAE3;
	--wp-dark-mode-text--nb-ink-2:      #A09C93;
	--wp-dark-mode-text--nb-ink-3:      #8A867D;
	--wp-dark-mode-text--nb-line:       #8A867D;
	--wp-dark-mode-text--nb-brand:      #F08070;
	--wp-dark-mode-text--nb-brand-deep: #F08070;
	--wp-dark-mode-text--nb-on-ok:      #121215;
	--wp-dark-mode-text--nb-on-warn:    #121215;
	--wp-dark-mode-text--nb-on-lab:     #121215;
	--wp-dark-mode-border--nb-paper:    #3A3A42;
	--wp-dark-mode-border--nb-paper-2:  #3A3A42;
	--wp-dark-mode-border--nb-card:     #3A3A42;
	--wp-dark-mode-border--nb-ink:      #3A3A42;
	--wp-dark-mode-border--nb-ink-2:    #3A3A42;
	--wp-dark-mode-border--nb-line:     #3A3A42;
	--wp-dark-mode-border--nb-brand:    #E8604F;
	--wp-dark-mode-border--nb-brand-deep: #E8604F;
}

/* ==========================================================================
   2. 기본
   ========================================================================== */
body.nb-page {
	background: var(--nb-paper);
	color: var(--nb-ink);
	font-family: var(--nb-font);
	font-size: var(--nb-fs-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.nb-wrap {
	max-width: var(--nb-wrap);
	margin: 0 auto;
	padding: 0 var(--nb-gutter);
}

.nb-mono { font-family: var(--nb-mono); font-variant-numeric: tabular-nums; }

a { color: var(--nb-brand-deep); text-underline-offset: 3px; }
html[data-theme="dark"] a { color: var(--nb-brand); }

::selection { background: var(--nb-brand); color: var(--nb-on-brand); }

:focus-visible {
	outline: 2px solid var(--nb-brand);
	outline-offset: 2px;
}

/* Blocksy 의 페이지 타이틀 영역을 우리 인트로 스트립으로 대체 */
body.nb-page .entry-header > h1,
body.nb-page .page-title { display: none; }
body.nb-page .entry-content > *:first-child { margin-top: 0; }

/* ==========================================================================
   3. 12트랙 그리드 (Swiss: 2 / 6 / 4)
   ========================================================================== */
.nb-grid12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 var(--nb-gutter);
}
.nb-grid12 > * { min-inline-size: 0; }
.nb-col-2  { grid-column: span 2; }
.nb-col-4  { grid-column: span 4; }
.nb-col-6  { grid-column: span 6; }
.nb-col-8  { grid-column: span 8; }
.nb-col-12 { grid-column: span 12; }

/* ==========================================================================
   4. 스킵 링크 / 헤더
   ========================================================================== */
.nb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--nb-ink);
	color: var(--nb-paper);
	padding: 10px 16px;
	z-index: 999;
	text-decoration: none;
}
.nb-skip:focus { left: 0; }

.nb-header {
	border-bottom: 1px solid var(--nb-rule-ink);
	background: var(--nb-paper);
}
.nb-header-inner {
	max-width: var(--nb-wrap);
	margin: 0 auto;
	padding: 0 var(--nb-gutter);
	height: 64px;
	display: flex;
	align-items: center;
	gap: var(--nb-s5);
}
.nb-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--nb-ink);
}
.nb-brand .nb-logo,
.nb-logo-fallback {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: var(--nb-brand);
	color: var(--nb-on-brand);
	font-weight: 800;
	font-size: 15px;
	border-radius: 0;
	flex: none;
}
.nb-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.nb-brand-name { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.nb-brand-sub {
	font-family: var(--nb-mono);
	font-size: 10.5px;
	color: var(--nb-ink-3);
	letter-spacing: .04em;
}

/* 번호가 붙은 인덱스 네비게이션 */
.nb-nav { margin-left: auto; }
.nb-nav-list {
	display: flex;
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nb-nav-list li { margin: 0; }
.nb-nav a {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 14px;
	text-decoration: none;
	color: var(--nb-ink-2);
	font-size: var(--nb-fs-sm);
	border-left: 1px solid var(--nb-rule-2);
	transition: color .12s linear;
}
.nb-nav-list li:last-child a { border-right: 1px solid var(--nb-rule-2); }
.nb-nav a::before {
	content: attr(data-nb-index);
	font-family: var(--nb-mono);
	font-size: 10px;
	color: var(--nb-ink-3);
	font-variant-numeric: tabular-nums;
}
.nb-nav a:hover { color: var(--nb-ink); background: var(--nb-paper-2); }
.nb-nav .current-menu-item > a { color: var(--nb-brand-deep); }
.nb-nav .current-menu-item > a::before { color: var(--nb-brand); }

.nb-burger { display: none; }

/* ==========================================================================
   5. 본문 레이아웃 / 인트로
   ========================================================================== */
.nb-main { min-height: 52vh; padding: var(--nb-s8) 0 var(--nb-s9); }

/* 인트로: 질문 + 발행 정보 한 줄 (Swiss: 큰 제목은 일부러 불균등하게) */
.nb-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--nb-s5);
	padding-bottom: var(--nb-s5);
	margin-bottom: var(--nb-s7);
	border-bottom: 1px solid var(--nb-rule-ink);
}
.nb-intro-msg {
	margin: 0;
	font-size: var(--nb-fs-xl);
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -.02em;
	/* 2026-10-30: max-width:22ch 때문에 3줄로 접혔다 → 한 줄로. */
	max-width: none;
}
/* 인트로는 2열 그리드(제목 | 기록)라서 제목+메모를 lead 로 묶어야 카운트가 세번째 칸으로 밀리지 않는다 */
.nb-intro-lead { min-width: 0; }
.nb-intro-note {
	margin: 7px 0 0;
	font-size: var(--nb-fs-sm);
	line-height: 1.5;
	color: var(--nb-ink-3);
	max-width: 52ch;
}
.nb-intro-count {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	letter-spacing: .04em;
	text-align: right;
	white-space: nowrap;
}
.nb-intro-count b { color: var(--nb-ink); font-weight: 700; }
.nb-intro-count a {
	color: var(--nb-brand-deep);
	text-decoration: none;
	/* WCAG 2.2: 24px 최소 타깃. 실측 14px 였다. */
	display: inline-block;
	padding: 5px 2px;
	margin: -5px -2px;
}

/* 게시판 안내문 — 가입 정책은 폼이 아니라 여기서 한 번만 말한다 */
.nb-board-note {
	margin: calc(var(--nb-s5) * -1 + 0px) 0 var(--nb-s5);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-2);
}

/* ==========================================================================
   6. 섹션 — 제목 위 강한 규칙선
   ========================================================================== */
.nb-section { margin: 0 0 var(--nb-s9); }
.nb-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nb-s4);
	padding-top: var(--nb-s3);
	border-top: 1px solid var(--nb-rule-ink);
	margin-bottom: var(--nb-s5);
}
.nb-section-title {
	margin: 0;
	font-size: var(--nb-fs-md);
	font-weight: 800;
	letter-spacing: -.01em;
}
.nb-section-link {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	text-decoration: none;
	letter-spacing: .03em;
	/* 24px 최소 타깃 (실측 20px) */
	display: inline-block;
	padding: 4px 0;
}
.nb-section-link:hover { color: var(--nb-brand-deep); }

/* ==========================================================================
   7. 대장(ledger) — 카드 그리드를 대체하는 이 사이트의 핵심 구조
   ========================================================================== */
.nb-ledger { border-top: 1px solid var(--nb-rule-ink); }

.nb-row {
	display: grid;
	/* 번호 | 상태칩 | 분류 | 이름+설명 | 기록
	   상태 칩은 맨 앞에 둔다. 맨 뒤(기록 컬럼)에 두면 목록을 훑을 때 안 잡힌다. */
	grid-template-columns: 40px 68px 84px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 var(--nb-s4);
	padding: var(--nb-s4) 0;
	border-bottom: 1px solid var(--nb-rule);
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: background .12s linear;
}
.nb-row::before {
	/* 시그니처: 항목 번호에서 시작하는 연속된 세로 정렬선 */
	content: "";
	position: absolute;
	left: -1px;
	top: -1px;
	bottom: -1px;
	width: 2px;
	background: var(--nb-brand);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .16s ease-out;
}
.nb-row:hover { background: var(--nb-paper-2); }
.nb-row:hover::before,
.nb-row:focus-visible::before { transform: scaleY(1); }

.nb-row-no {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-sm);
	font-variant-numeric: tabular-nums;
	color: var(--nb-ink-3);
	letter-spacing: .04em;
}
.nb-row-body { min-inline-size: 0; }
.nb-row-name {
	margin: 0;
	font-size: var(--nb-fs-lg);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.3;
}
.nb-row:hover .nb-row-name { color: var(--nb-brand-deep); }
.nb-row-desc {
	/* 2026-10-30: span 인라인이라 이름·태그 뒤에서 이어져 시작점이 흔들렸다
	   (실측 left 253~302px). block 으로 만들어 항상 같은 기준선에서 시작하게 한다. */
	display: block;
	margin: 4px 0 0;
	font-size: var(--nb-fs-sm);
	color: var(--nb-ink-2);
	line-height: 1.6;
	max-width: 62ch;
}
.nb-row-meta {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}
.nb-row-meta b { color: var(--nb-ink); font-weight: 700; }
.nb-row-tag {
	/* 고정 컬럼 안에서 좌측 정렬 — 태그 길이가 달라도 시작점이 같다 */
	display: block;
	font-family: var(--nb-mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--nb-ink-3);
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   8. 이전 카드 그리드 (레거시 호환)
   ========================================================================== */
.nb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 0 var(--nb-gutter);
}
.nb-card {
	display: block;
	padding: var(--nb-s4) 0;
	border-bottom: 1px solid var(--nb-rule);
	text-decoration: none;
	color: inherit;
}
.nb-card-shot { display: none; }
.nb-card-title {
	margin: 0;
	font-size: var(--nb-fs-md);
	font-weight: 800;
	letter-spacing: -.01em;
}
.nb-card-tag {
	font-family: var(--nb-mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--nb-ink-3);
	text-transform: uppercase;
}
.nb-card-desc {
	margin: 6px 0 0;
	font-size: var(--nb-fs-sm);
	color: var(--nb-ink-2);
	line-height: 1.6;
}
.nb-card-foot {
	margin-top: 6px;
	font-family: var(--nb-mono);
	font-size: 10.5px;
	color: var(--nb-ink-3);
}

/* ==========================================================================
   9. 배지 / 버튼
   ========================================================================== */
.nb-badge {
	display: inline-block;
	/* 라벨이 한국어('테스트중'/'개발중')이므로 모노스페이스는 글자가 부자연스럽다.
	   본문 서체를 쓰고 대소문자 변환은 뺀다. */
	font-family: var(--nb-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 3px 9px;
	border: 1px solid transparent;
	border-radius: 0;
	line-height: 1.45;
	white-space: nowrap;
}
/* 채워진 상태 칩 — 목록을 훑을 때 한눈에 들어오게 한다 */
.nb-badge-live { background: var(--nb-ok);   color: var(--nb-on-ok); }
.nb-badge-beta { background: var(--nb-warn); color: var(--nb-on-warn); }
.nb-badge-dev  { background: var(--nb-lab);  color: var(--nb-on-lab); }
/* 격리/이전된 앱은 attention 을 끌지 않도록 테두리만 */
.nb-badge-lab,
.nb-badge-spunoff {
	background: transparent;
	color: var(--nb-ink-3);
	border-color: currentColor;
}
/* 칩 크기는 옆 제목 크기에 비례한다.
   목록(12px) / 게시판 헤더 h1 22px (13px) / 앱 상세 헤더 h1 36px (15px) */
.nb-badge-md { font-size: 13px; padding: 4px 10px; }
.nb-badge-lg { font-size: 15px; padding: 6px 12px; }

.nb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid var(--nb-ink);
	background: transparent;
	color: var(--nb-ink);
	text-decoration: none;
	font-size: var(--nb-fs-sm);
	font-weight: 700;
	letter-spacing: -.01em;
	border-radius: 0;
	transition: background .12s linear, color .12s linear;
}
.nb-btn:hover { background: var(--nb-ink); color: var(--nb-paper); }
.nb-btn-primary {
	background: var(--nb-brand);
	border-color: var(--nb-brand);
	color: var(--nb-on-brand);
}
.nb-btn-primary:hover { background: var(--nb-brand-deep); border-color: var(--nb-brand-deep); color: var(--nb-on-brand); }
.nb-btn-sm { padding: 6px 12px; font-size: var(--nb-fs-xs); }

/* ==========================================================================
   10. 앱 상세
   ========================================================================== */
.nb-app-head {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--nb-s5);
	align-items: start;
	padding-bottom: var(--nb-s6);
	margin-bottom: var(--nb-s7);
	border-bottom: 1px solid var(--nb-rule-ink);
}
.nb-app-icon {
	width: 88px;
	height: 88px;
	display: grid;
	place-items: center;
	background: var(--nb-accent, var(--nb-brand));
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	border-radius: 0;
	overflow: hidden;
}
.nb-app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.nb-app-main { min-inline-size: 0; }
.nb-app-title {
	font-size: var(--nb-fs-2xl);
	font-weight: 800;
	margin: 0;
	letter-spacing: -.03em;
	line-height: 1.15;
}
.nb-app-tag {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	margin-right: 10px;
	letter-spacing: .04em;
}
.nb-app-desc {
	font-size: var(--nb-fs-md);
	line-height: 1.65;
	color: var(--nb-ink-2);
	margin: 12px 0 0;
	max-width: 62ch;
}
.nb-app-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--nb-s5); }
.nb-shot-full { margin: 0 0 var(--nb-s7); border-top: 1px solid var(--nb-rule); }
.nb-shot-full img { width: 100%; display: block; }

/* ==========================================================================
   11. 게시판
   ========================================================================== */
.nb-board { border-top: 1px solid var(--nb-rule-ink); }
.nb-item {
	padding: var(--nb-s4) 0;
	border-bottom: 1px solid var(--nb-rule);
}
.nb-item-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nb-s4);
	flex-wrap: wrap;
}
.nb-item-title {
	margin: 0;
	font-size: var(--nb-fs-md);
	font-weight: 700;
	letter-spacing: -.01em;
}
.nb-item-title a { text-decoration: none; color: inherit; }
.nb-item-title a:hover { color: var(--nb-brand-deep); }
.nb-nick {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	letter-spacing: .04em;
}
.nb-meta {
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	font-variant-numeric: tabular-nums;
}
/* 분류 링크(#공지 등) — 24px 최소 타깃 (실측 20px) */
a.nb-meta {
	display: inline-block;
	padding: 4px 0;
	min-height: 24px;
}
.nb-item-body {
	font-size: var(--nb-fs-sm);
	line-height: 1.7;
	color: var(--nb-ink);
	margin-top: var(--nb-s2);
	max-width: 68ch;
}
.nb-item-body p { margin: 0 0 8px; }
.nb-item-body p:last-child { margin-bottom: 0; }
.nb-item-body a { word-break: break-all; }
.nb-item-body pre {
	background: var(--nb-paper-2);
	padding: 12px;
	overflow: auto;
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	border-left: 2px solid var(--nb-brand);
}
.nb-item-tools { margin-top: 8px; display: flex; gap: 12px; font-size: var(--nb-fs-xs); }
.nb-replies { margin: 12px 0 0; border-left: 2px solid var(--nb-rule); padding-left: var(--nb-s4); }
.nb-reply { padding: 8px 0; border-bottom: 1px solid var(--nb-rule-2); }
.nb-reply:last-child { border-bottom: 0; }
.nb-reply-body { font-size: var(--nb-fs-xs); line-height: 1.65; }

/* ==========================================================================
   12. 폼 / 메시지 / 빈 상태
   ========================================================================== */
.nb-empty {
	padding: var(--nb-s6) 0;
	color: var(--nb-ink-3);
	font-size: var(--nb-fs-sm);
	border-bottom: 1px solid var(--nb-rule);
}
.nb-form { margin: var(--nb-s6) 0 0; }
.nb-form h2 {
	font-size: var(--nb-fs-md);
	margin: 0 0 var(--nb-s4);
	font-weight: 800;
	padding-top: var(--nb-s3);
	border-top: 1px solid var(--nb-rule-ink);
}
.nb-field { margin-bottom: var(--nb-s4); }
.nb-field label {
	display: block;
	font-size: var(--nb-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--nb-ink-2);
	margin-bottom: 6px;
}
.nb-field input[type="text"],
.nb-field input[type="password"],
.nb-field input[type="url"],
.nb-field select,
.nb-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--nb-ink-3);
	background: var(--nb-card);
	color: var(--nb-ink);
	font-family: inherit;
	font-size: var(--nb-fs-sm);
	border-radius: 0;
}
.nb-field textarea { min-height: 110px; resize: vertical; }
.nb-field input:focus, .nb-field textarea:focus, .nb-field select:focus {
	outline: 2px solid var(--nb-brand);
	outline-offset: -1px;
	border-color: var(--nb-ink);
}
.nb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-s3); }
.nb-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.nb-msg { display: none; padding: 10px 12px; font-size: var(--nb-fs-xs); margin-bottom: var(--nb-s3); }
.nb-msg.show { display: block; }
.nb-msg-ok  { background: #E4F0E6; color: #1E4A28; border-left: 2px solid var(--nb-ok); }
.nb-msg-err { background: #F6E4E2; color: #7A1D16; border-left: 2px solid var(--nb-brand); }
html[data-theme="dark"] .nb-msg-ok  { background: #14261A; color: #8FD3A3; border-left-color: var(--nb-ok); }
html[data-theme="dark"] .nb-msg-err { background: #2A1412; color: #F0A79E; border-left-color: var(--nb-brand); }
.nb-hint { font-size: var(--nb-fs-xs); color: var(--nb-ink-3); margin: 6px 0 0; line-height: 1.5; }
.nb-password { font-family: var(--nb-mono); }

/* ==========================================================================
   13. 탭 / 페이저 / 실험실
   ========================================================================== */
.nb-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--nb-rule-ink);
	margin-bottom: var(--nb-s5);
	flex-wrap: wrap;
}
.nb-tab {
	padding: 8px 14px;
	font-size: var(--nb-fs-sm);
	text-decoration: none;
	color: var(--nb-ink-2);
	border-right: 1px solid var(--nb-rule-2);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	display: inline-block;
	min-height: 24px;
}
.nb-tab:hover { color: var(--nb-ink); }
.nb-tab.on { color: var(--nb-brand-deep); border-bottom-color: var(--nb-brand); font-weight: 700; }
.nb-pager {
	display: flex;
	gap: 4px;
	margin: var(--nb-s6) 0 0;
	padding-top: var(--nb-s4);
	border-top: 1px solid var(--nb-rule);
	flex-wrap: wrap;
}
.nb-pager a, .nb-pager span {
	display: inline-block;
	min-width: 32px;
	padding: 6px 8px;
	text-align: center;
	font-family: var(--nb-mono);
	font-size: var(--nb-fs-xs);
	text-decoration: none;
	color: var(--nb-ink-2);
	border: 1px solid var(--nb-rule);
}
.nb-pager a:hover { border-color: var(--nb-ink); color: var(--nb-ink); }
.nb-pager .on { background: var(--nb-ink); border-color: var(--nb-ink); color: var(--nb-paper); }

.nb-lab { margin-top: var(--nb-s7); border-top: 1px solid var(--nb-rule-ink); padding-top: var(--nb-s3); }
.nb-lab > summary {
	cursor: pointer;
	font-size: var(--nb-fs-sm);
	font-weight: 700;
	color: var(--nb-ink-2);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
.nb-lab > summary::-webkit-details-marker { display: none; }
.nb-lab > summary::before {
	content: "▸";
	display: inline-block;
	transition: transform .15s linear;
	font-size: 11px;
	color: var(--nb-ink-3);
}
.nb-lab[open] > summary::before { transform: rotate(90deg); }

/* ==========================================================================
   14. 푸터 — 규칙선 + 한 줄 (2026-10-30 대폭 축소)
   --------------------------------------------------------------------------
   이전: 본체 231px + margin 96px = 화면의 36%. 내비 2벌, 브랜드 2벌,
   "nobrains.net" 3벌, 앱 수 2벌, 내부 스택 노출까지 있었다.
   지금: 헤더에 이미 있는 정보는 전부 빼고, 한 줄만 남긴다.
   ========================================================================== */
.nb-footer {
	border-top: 1px solid var(--nb-rule-ink);
	margin-top: var(--nb-s7);
	padding: var(--nb-s4) 0;
	background: var(--nb-paper);
}
.nb-footer-inner {
	max-width: var(--nb-wrap);
	margin: 0 auto;
	padding: 0 var(--nb-gutter);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nb-s5);
}
.nb-footer-tagline {
	margin: 0;
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nb-footer-copy {
	margin: 0;
	font-family: var(--nb-mono);
	font-size: 10.5px;
	color: var(--nb-ink-3);
	letter-spacing: .04em;
	white-space: nowrap;
}

/* ==========================================================================
   15. 앱 실행 화면 (/apps/{slug}/)
   ========================================================================== */
body.nb-app-run-body {
	display: flex;
	flex-direction: column;
	/* 워드프레스 관리자 바가 떠 있으면 html 에 margin-top:32px(모바일 46px) 가 붙는다.
	   그걸 고려하지 않고 100vh 로 잡으면 문서가 32px 넘쳐 스크롤이 생기고
	   앱 상단이 관리자 바 뒤로 숨는다.
	   워드프레스가 admin-bar.css 에서 주는 변수를 빼서, 로그인/비로그인 높이를 맞춘다.
	   (변수는 관리자 바가 안 보일 때(비로그인) 로드조차 안 되므로 0px 로 대체) */
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
body.nb-app-run-body .nb-header { flex: 0 0 auto; }
body.nb-app-run-body .nb-main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0;
}
body.nb-app-run-body .nb-footer {
	flex: 0 0 auto;
	margin-top: 0;
	padding: 12px 0 16px;
}
body.nb-app-run-body .nb-footer-tagline { font-size: 11px; }
body.nb-app-run-body .nb-footer-copy { display: none; }

.nb-app-run { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nb-app-run-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px var(--nb-gutter);
	border-bottom: 1px solid var(--nb-rule-ink);
	background: var(--nb-paper-2);
}
.nb-app-run-title {
	font-size: var(--nb-fs-xs);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nb-ink);
}
.nb-app-run-back {
	font-size: var(--nb-fs-xs);
	color: var(--nb-ink-3);
	text-decoration: none;
	font-family: var(--nb-mono);
}
.nb-app-run-back:hover { color: var(--nb-brand-deep); }

/* 높이가 확정값이어야 자식 iframe 의 height:100% 가 해석된다.
   flex:1 1 auto 만으로는 확정 높이가 아니어서 iframe 이 기본값 150px 로
   fall back 하고 게임이 화면 대부분을 차지하지 못한다. */
.nb-app-run-frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 420px;
	overflow: hidden;
}
.nb-app-run-iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--nb-paper);
}

/* ==========================================================================
   16. 반응형 — 좁은 화면은 "줄인" 게 아니라 "다시 짜는" 것
   ========================================================================== */
@media (max-width: 1000px) {
	.nb-grid12 > * { grid-column: span 12 !important; }
}

@media (max-width: 760px) {
	.nb-header-inner { height: 56px; gap: var(--nb-s3); }
	.nb-nav a { padding: 6px 10px; }
	.nb-main { padding: var(--nb-s6) 0 var(--nb-s8); }
	.nb-intro {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--nb-s3);
	}
	.nb-intro-msg { font-size: var(--nb-fs-lg); max-width: none; }
	.nb-intro-count { text-align: left; }
	.nb-row {
		/* 좁은 화면: 번호 | 내용. 상태칩·분류는 이름 위로 내려온다. */
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 0 var(--nb-s4);
	}
	/* 모바일에서도 상태 칩이 맨 위에 먼저 보이도록 */
	.nb-row-badge {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: 6px;
	}
	.nb-row-tag {
		grid-column: 2;
		grid-row: 2;
		margin-bottom: 2px;
	}
	.nb-row-body { grid-column: 2; grid-row: 3; }
	.nb-row-meta {
		grid-column: 2;
		grid-row: 4;
		text-align: left;
		margin-top: 6px;
	}
	.nb-app-head { grid-template-columns: 56px minmax(0, 1fr); gap: var(--nb-s4); }
	.nb-app-icon { width: 56px; height: 56px; font-size: 22px; }
	.nb-app-title { font-size: var(--nb-fs-xl); }
	.nb-field-row { grid-template-columns: 1fr; }
	.nb-footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
	.nb-wrap { padding: 0 16px; }
	.nb-brand-sub { display: none; }
	.nb-nav a::before { display: none; }
	.nb-nav a { padding: 6px 8px; font-size: var(--nb-fs-xs); }
}