/* DocPort Design System v2 — Dark Canvas × Electric Yellow (DESIGN.md 구현)
   폰트: Jetendard (JetBrainsMono + Pretendard 한글, 사용자 지정으로 Inter 대체) */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Jetendard";
  src: url("/static/fonts/Jetendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Jetendard";
  src: url("/static/fonts/Jetendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Jetendard";
  src: url("/static/fonts/Jetendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Jetendard";
  src: url("/static/fonts/Jetendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens (§2 색상 · §5 간격 · §6 형태) ---------- */
:root {
  --canvas: #0a0a0a;
  --surface-soft: #121212;
  --surface-card: #1a1a1a;
  --surface-elevated: #242424;
  --hairline: #2a2a2a;
  --hairline-strong: #3a3a3a;

  --primary: #faff69;
  --primary-active: #e6eb52;
  --primary-disabled: #3a3a1f;
  --on-primary: #0a0a0a;

  --on-dark: #ffffff;
  --body: #cccccc;
  --body-strong: #e6e6e6;
  --muted: #888888;
  --muted-soft: #5a5a5a; /* 장식 전용 — 텍스트 금지 (Principle 8) */

  --emerald: #22c55e;
  --rose: #ef4444;
  --blue: #3b82f6;

  --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 96px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 9999px;

  --font: "Jetendard", "Pretendard", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 15px/1.55 var(--font);
}
h1, h2, h3, h4, h5, h6 { color: var(--on-dark); font-weight: 700; margin: 0 0 var(--sp-sm); }
h1 { font-size: 32px; line-height: 1.2; }   /* display-sm */
h2 { font-size: 24px; line-height: 1.3; }   /* title-lg */
h3 { font-size: 18px; line-height: 1.4; font-weight: 600; }  /* title-md */
h4 { font-size: 16px; line-height: 1.4; font-weight: 600; }  /* title-sm */
p { margin: 0 0 var(--sp-sm); }
a { color: var(--primary); text-decoration: underline; }        /* text-link: 옐로우+밑줄 필수 */
strong { color: var(--body-strong); }
::selection { background: var(--primary); color: var(--on-primary); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-lg); }
.muted { color: var(--muted); font-size: 13px; }
.strong { color: var(--body-strong); }

/* ---------- Top Navigation (64px, §7) ---------- */
.top-nav {
  height: 64px;
  display: flex; align-items: center; gap: var(--sp-lg);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.top-nav .brand {
  color: var(--on-dark); font-size: 18px; font-weight: 700;
  text-decoration: none; letter-spacing: -0.3px; margin-right: var(--sp-md);
}
.top-nav .brand .accent { color: var(--primary); }
.top-nav .nav-links { display: flex; gap: var(--sp-md); flex: 1; }
.top-nav .nav-links a {
  color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none;
  padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-md);
}
.top-nav .nav-links a[aria-current="page"] { color: var(--on-dark); background: var(--surface-card); }
.top-nav .nav-links a:hover { color: var(--on-dark); }
.top-nav .nav-right { display: flex; align-items: center; gap: var(--sp-sm); }
.lang-switch { display: flex; gap: 2px; font-size: 12px; font-weight: 600; }
.lang-switch a {
  color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: var(--r-sm);
}
.lang-switch a[aria-current="true"] { color: var(--on-primary); background: var(--primary); }

/* ---------- Buttons (§7 — radius 8 고정, 그림자 금지) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 20px;
  font: 600 14px/1 var(--font);
  border-radius: var(--r-md); border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-active); }
.btn-primary:disabled { background: var(--primary-disabled); color: var(--muted); cursor: not-allowed; }
.btn-secondary {
  background: var(--surface-card); color: var(--on-dark);
  border: 1px solid var(--hairline-strong);   /* 3:1 식별성 (Principle 7) */
}
.btn-secondary:active { background: var(--surface-elevated); }
.btn-danger-text { background: none; border: 0; color: var(--rose); font: 600 14px/1 var(--font); cursor: pointer; }

/* ---------- Cards (surface-card, 그림자 없음) ---------- */
.card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-lg);   /* card↔card ≥ 24px (Principle 1) */
}
.card h4 { margin-bottom: var(--sp-xs); }
.card .title-link, .tile .title-link { color: var(--on-dark); text-decoration: none; }
.card .title-link:hover, .tile .title-link:hover { color: var(--primary); text-decoration: underline; }

/* ---------- Stat callout (옐로우 허용 용도 ③) ---------- */
.stat-card { text-align: left; }
.stat-card .stat-number {
  color: var(--primary);
  font-size: 56px; font-weight: 700; line-height: 1.0;
  display: block; margin-bottom: var(--sp-xs);
}
.stat-card .stat-label { color: var(--muted); font-size: 13px; font-weight: 500; }

/* ---------- Badges / Tag chips ---------- */
.badge {
  display: inline-flex; align-items: center;
  background: var(--surface-elevated); color: var(--muted);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 2px 10px; border-radius: var(--r-pill);
  margin-right: var(--sp-xxs); text-decoration: none;
}
a.badge { color: var(--body-strong); border: 1px solid var(--hairline-strong); } /* 클릭 가능 칩: 색+테두리 이중 신호 (Principle 9) */
a.badge:hover { color: var(--on-dark); border-color: var(--muted); }
a.badge[aria-current="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ---------- Sidebar filters (category-tab, §7) ---------- */
.layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-xl); padding: var(--sp-xl) 0; }
aside .filter-group { margin-bottom: var(--sp-lg); }        /* 그룹 간 24px */
.filter-title {
  color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;          /* caption-uppercase: 짧은 라벨만 */
  margin-bottom: var(--sp-xs);
}
aside ul { list-style: none; margin: 0; padding: 0; }
aside li { margin: 0; }
.tab {
  display: block; color: var(--muted); font-size: 14px; font-weight: 500;
  text-decoration: none; padding: 8px 14px; border-radius: var(--r-md);
}
.tab:hover { color: var(--on-dark); }
.tab[aria-current="page"] { background: var(--surface-card); color: var(--on-dark); } /* 배경+색 이중 신호 */

/* ---------- Inputs (§7 text-input) ---------- */
.input, input:not([type]), input[type="search"], input[type="text"], input[type="password"],
input[type="date"], select, textarea {
  width: 100%;
  background: var(--surface-card); color: var(--on-dark);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 10px 14px; height: 40px;
  font: 400 14px/1.4 var(--font);
}
textarea { height: auto; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--muted); } /* 대비 하한 (Principle 8) */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
input[type="date"] { color-scheme: dark; }
label { display: block; color: var(--body-strong); font-size: 13px; font-weight: 600; margin-bottom: var(--sp-md); }
label > input, label > select, label > textarea { margin-top: var(--sp-xxs); }

/* ---------- Forms / grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.toolbar { display: flex; gap: var(--sp-xs); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-md); }
.toolbar .input { flex: 1; }

/* ---------- Viewer ---------- */
.viewer-frame {
  width: 100%; height: 80vh;
  background: #ffffff;               /* 업로드 문서(대개 라이트)의 투명 배경 대비 */
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.md-body {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
  overflow-x: auto;
  line-height: 1.6;
  font-size: 14px;
  word-break: keep-all;   /* 한국어 단어 중간 줄바꿈 방지 */
}
.md-body h1, .md-body h2, .md-body h3 { margin-top: var(--sp-lg); }
.md-body h1:first-child { margin-top: 0; }
.md-body code {
  background: var(--surface-elevated); border-radius: var(--r-xs);
  padding: 1px 5px; font-size: 13px;
}
.md-body pre {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: var(--sp-md); overflow-x: auto;
}
.md-body pre code { background: none; padding: 0; }
.md-body table { border-collapse: collapse; width: 100%; margin-bottom: var(--sp-md); }
.md-body th, .md-body td {
  border: 1px solid var(--hairline-strong); padding: 8px 12px; text-align: left;
  word-break: keep-all;
}
.md-body th { white-space: nowrap; background: var(--surface-elevated); color: var(--body-strong); }
/* ID·코드류 첫 컬럼: 내용 폭에 맞춰 줄넘김 없이 (넓은 표는 컨테이너에서 가로 스크롤) */
.md-body td:first-child, .md-body th:first-child { white-space: nowrap; width: 1%; }
.md-body blockquote { border-left: 3px solid var(--hairline-strong); margin: 0 0 var(--sp-sm); padding-left: var(--sp-md); color: var(--muted); }

/* ---------- Misc ---------- */
.doc-meta { color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin: var(--sp-md) 0; }
.pager { display: flex; gap: var(--sp-md); align-items: center; padding: var(--sp-md) 0; }
.pager a { text-decoration: underline; }
details { margin-top: var(--sp-md); }
details summary {
  cursor: pointer; color: var(--body-strong); font-size: 14px; font-weight: 600;
  padding: var(--sp-xs) 0;
}
details[open] summary { margin-bottom: var(--sp-sm); }
.drop-zone {
  border: 2px dashed var(--hairline-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);
  text-align: center; cursor: pointer; color: var(--muted);
  margin-bottom: var(--sp-md);
}
.drop-zone.armed { border-color: var(--primary); color: var(--body-strong); }
.error-text { color: var(--rose); font-size: 14px; }
.error-text::before { content: "⚠ "; }          /* 색+아이콘 이중 신호 (Principle 9) */

/* ---------- Settings ---------- */
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table td { padding: 6px 8px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.settings-table tr:last-child td { border-bottom: 0; }
.settings-table input { height: 34px; padding: 6px 10px; }
.btn-mini {
  background: var(--surface-elevated); color: var(--body-strong);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  font: 600 12px/1 var(--font); padding: 8px 10px; cursor: pointer;
}
.btn-mini:active { background: var(--surface-card); }
.btn-mini.danger { color: var(--rose); }

/* ---------- Dashboard tiles ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.tile {
  background: var(--surface-card); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.tile-preview {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-elevated);
}
.tile-preview iframe {
  width: 400%; height: 400%;
  transform: scale(0.25); transform-origin: top left;
  border: 0; background: #ffffff; pointer-events: none;
}
.tile-preview img { width: 100%; height: 100%; object-fit: cover; }
.tile-preview .excerpt {
  padding: var(--sp-md); font-size: 12px; line-height: 1.6; color: var(--body);
  overflow: hidden; height: 100%;
}
.tile-preview .icon-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 40px;
}
.tile-preview .tile-open {
  position: absolute; inset: 0; z-index: 1; text-decoration: none;
}
.tile-body { padding: var(--sp-md); }
.tile-body h4 { margin-bottom: var(--sp-xxs); }
.tile-body .doc-meta { margin: 0; }
@media (max-width: 1024px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .tile-grid { grid-template-columns: 1fr; } }

/* ---------- Login ---------- */
.login-wrap { max-width: 400px; margin: 14vh auto 0; padding: 0 var(--sp-lg); }
.login-card { background: var(--surface-card); border-radius: var(--r-lg); padding: var(--sp-xl); }
.login-card .brand { display: block; text-align: center; color: var(--on-dark); font-size: 24px; font-weight: 700; margin-bottom: var(--sp-lg); text-decoration: none; }
.login-card .btn { width: 100%; margin-top: var(--sp-xs); }

/* ---------- Responsive (§10) ---------- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .top-nav { gap: var(--sp-sm); }
  .top-nav .nav-links { gap: var(--sp-xxs); }
  .stat-card .stat-number { font-size: 40px; }
}