/* promptshub — 터미널 방향(A). 목업 design/Main.dc.html 의 값을 그대로 옮겼다.
   폰트는 base.html 의 <link> 로 받는다 (여기서 @import 하면 렌더가 한 번 더 막힌다).

   테마: :root 가 라이트, @media (prefers-color-scheme: dark) 가 다크.
   수동 토글은 없다 — OS 설정만 따라간다. 색은 전부 토큰으로만 쓴다.
   대비는 design/contrast.py (WCAG 2.1) 로 실측했고 양쪽 다 실패 0건이다. */

:root {
  --bg: #f6f8f7;
  --panel: #ffffff;
  --panel-2: #edf1ef;   /* 상단바·푸터 */
  --line: #d3dbd7;
  --line-soft: #e4e9e7; /* 연한 구분선 + 미터 트랙 */
  --text: #1b2321;
  --text-strong: #0b1110;
  --muted: #4d5a55;     /* 보조문 — nav·tags·badge·num·stat 등 (bg 6.77) */
  --dim: #55625d;       /* 흐린문 — count·date·desc·help·label (bg 5.98) */
  --ui-line: #798b83;   /* 입력·버튼·칩 테두리. 그래픽 3:1 (bg 3.37) */
  --spark: #4a9e55;     /* 30일 추이 막대 — 카드 대비 3.33 */

  /* 브랜드 초록 #7ee787 은 흰 바탕에서 대비 1.32 라 글자로 못 쓴다.
     색상(H 125° → 124°)과 채도는 유지하고 명도만 내렸다. bg 5.26 / 흰글자 5.61. */
  --accent: #18781e;
  --accent-hover: #0f5715;
  --on-accent: #ffffff; /* accent 면 위에 얹는 글자 */

  --hover: #eef2f0;     /* 행·사이드 hover 바탕 */
  --sel: #dff0e3;       /* 선택된 칩·태그 바탕 (accent 글자 4.73) */
  --amber: #b07d1e;     /* .note 좌측선 (bg 3.40) */
  --danger: #c62a12;    /* .errors (bg 5.26) */

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light dark;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리키므로 아래 다크 블록이 그대로 따라간다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG): 라이트 --text/--panel 16.04 · --muted/--panel 7.22 · --muted/--bg 6.77 · --on-accent/--accent 5.61
                             다크   --text/--panel 13.78 · --muted/--panel 6.95 · --muted/--bg 7.13 · --on-accent/--accent 12.17 */
  --fb-bg: var(--bg);
  --fb-surface: var(--panel);
  --fb-ink: var(--text);
  --fb-muted: var(--muted);
  --fb-line: var(--line);
  --fb-accent: var(--accent);
  --fb-on-accent: var(--on-accent);
  --fb-display: "IBM Plex Sans KR", system-ui, sans-serif;  /* 한글 제목은 Plex Mono 에 글리프가 없다 — 로고만 모노 */
  --fb-max: 1232px;  /* 목록·상세는 전체 폭 레이아웃(좌우 24px)이라 1280 화면에서 본문 폭과 맞춘다 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e0d;
    --panel: #0e1211;
    --panel-2: #101413;
    --line: #1e2422;
    --line-soft: #171c1a;
    --text: #d7ded9;
    --text-strong: #eaf1ec;
    --muted: #93a09a;   /* bg 7.13 */
    --dim: #74857e;     /* #5d6a64 는 bg 3.42 로 미달, #71817a 는 푸터 4.53 으로 여유가 없었다 */
    --ui-line: #556961; /* #262d2a(1.38)·#2c3531(1.53) 은 경계가 안 보였다 */
    --spark: #3b6e4b;   /* #23402c 는 카드 바탕 대비 1.65 */

    --accent: #7ee787;
    --accent-hover: #a4f0ab;
    --on-accent: #08150c;

    --hover: #101614;
    --sel: #16201b;
    --amber: #d9a441;
    --danger: #ff8f7a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans KR", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.mono { font-family: var(--mono); }

/* ---- 상단 바 — 틀은 fb.css 의 .fb-nav. 로고 글자·검색만 이 사이트 것 ---- */
.logo { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--text-strong); letter-spacing: -0.2px; }
a.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }  /* flex 는 '>_' 뒤 공백을 지운다 — gap 으로 띄운다 */
.logo .caret { color: var(--accent); }
.bar-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fb-nav .search input[type="text"] { width: clamp(140px, 22vw, 300px); height: 40px; border-radius: 999px; }

.search { display: flex; align-items: center; gap: 8px; position: relative; }
/* ⚠️ 셀렉터를 `.search input` 으로 두면 아래쪽 작성 폼의 `input[type="text"]` 과
   특이도가 같아(0,1,1) 나중에 선언된 쪽이 이긴다. padding-left 가 30px -> 13px 로
   덮여 돋보기 아이콘이 글자 위에 겹쳤다. 타입 셀렉터를 붙여 특이도를 올린다. */
.search input[type="text"] {
  width: 300px; height: 32px; padding: 0 10px 0 30px;
  border: 1px solid var(--ui-line); background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 12px;
}
.search input::placeholder { color: var(--dim); }
.search input:focus { outline: none; border-color: var(--accent); }
/* 아이콘은 stroke="currentColor" 라 이 color 를 따라간다 (테마별 하드코딩 금지) */
.search svg { position: absolute; left: 9px; pointer-events: none; color: var(--dim); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost {
  background: transparent; border: 1px solid var(--ui-line); color: var(--muted);
}
.btn-ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* ---- 본문 골격 ---- */
.body { display: flex; min-height: calc(100vh - 56px); }
.side {
  width: 232px; flex-shrink: 0; padding: 22px 18px;
  border-right: 1px solid var(--line); background: var(--panel);
}
.side-title { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-bottom: 12px; }
.side-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.side-row {
  display: flex; justify-content: space-between; padding: 5px 8px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.side-row:hover { background: var(--hover); }
.side-row.on { background: var(--sel); color: var(--accent); }
.side-row .n { color: var(--dim); }

.main { flex: 1; padding: 24px; min-width: 0; }

/* ---- 목록 ---- */
/* 목업에는 없던 h1. 검색엔진용 제목이라 크게 키우지 않고 로그인 화면 h1(.auth h1)과 같은 결로 둔다. */
.list-title { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 0 0 14px; }
.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.chip {
  padding: 4px 11px; border: 1px solid var(--ui-line);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--sel); }
.count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); }

.grid-head, .row {
  display: grid; grid-template-columns: 1fr 210px 96px 72px 84px; gap: 16px;
}
.grid-head {
  padding: 0 12px 8px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.6px; color: var(--dim);
}
.row { align-items: center; padding: 13px 12px; border-bottom: 1px solid var(--line-soft); }
.row:hover { background: var(--hover); }
.row .title { font-size: 14px; color: var(--text-strong); font-weight: 500; }
.row .desc { font-size: 12px; color: var(--dim); margin-top: 3px; }
.row .tags { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
.row .tags a { color: var(--muted); }
.badge {
  font-family: var(--mono); font-size: 11px; padding: 2px 7px;
  border: 1px solid var(--ui-line); color: var(--muted); justify-self: start;
}
.num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.date { font-family: var(--mono); font-size: 11px; color: var(--dim); }

.empty { padding: 60px 12px; color: var(--dim); font-family: var(--mono); font-size: 13px; }
.pager { display: flex; gap: 14px; align-items: center; padding: 20px 12px; font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ---- 상세 ---- */
.detail { display: flex; gap: 28px; padding: 24px; }
.detail-main { flex: 1; min-width: 0; }
.detail-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--dim); }
h1.title { font-size: 26px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.3px; margin: 0; }
.sub { color: var(--muted); font-size: 14px; margin-top: 7px; }
.meta {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.meta a { color: var(--muted); }

/* ---- 코드면(프롬프트 본문) ----
   여기만 두 테마 공통으로 어둡다. 프롬프트가 이 사이트의 상품이고, 코드면을
   어둡게 두는 건 테마와 무관한 관례다. 덕분에 브랜드 초록 #7ee787 이 라이트
   에서도 제 색으로 살아남는 자리가 생긴다 (라이트 본문 글자로는 못 쓴다).
   테마를 타지 않으니 토큰이 아니라 리터럴로 둔다 — 값이 하나뿐이다.
   pre.src #c8d3cd / #0e1211 = 12.27, 바 라벨 #8d9a94 / #121816 = 6.15. */
.panel { margin-top: 22px; border: 1px solid #232a27; background: #0e1211; }
.panel-bar {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  border-bottom: 1px solid #232a27; background: #121816;
  font-family: var(--mono); font-size: 11px; color: #8d9a94;
}
.panel-bar .dot { width: 8px; height: 8px; border: 1px solid #2f3a35; }
.panel-bar .btn { margin-left: auto; height: 24px; padding: 0 10px; font-size: 11px; }
/* 이 버튼은 어두운 바 위에 있다. 라이트에서 --accent 가 짙어져도 여기는 밝은 초록을 쓴다. */
.panel-bar .btn { background: #7ee787; color: #08150c; }
.panel-bar .btn:hover { background: #a4f0ab; color: #08150c; }
pre.src {
  margin: 0; padding: 16px; color: #c8d3cd; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.85;
}
.note { margin-top: 20px; border-left: 2px solid var(--amber); padding: 2px 0 2px 14px; color: var(--muted); font-size: 13px; }

.card { border: 1px solid var(--line); background: var(--panel); padding: 16px; }
.card-title { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-bottom: 12px; }
.stat {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-family: var(--mono); font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line-soft);
}
.stat:last-child { border-bottom: 0; }
.stat span:last-child { color: var(--text-strong); }
.rel { display: block; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--text); }
.rel:last-child { border-bottom: 0; }
.rel small { display: block; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 2px; }

/* ---- 작성 ---- */
.editor-page { display: flex; gap: 26px; padding: 24px; align-items: flex-start; }
.editor-main { flex: 1; min-width: 0; }
.editor-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-bottom: 7px; display: block; }
.help { font-size: 12px; color: var(--dim); margin-top: 6px; line-height: 1.7; }

input[type="text"], input[type="password"], select, textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--ui-line); background: var(--panel); color: var(--text-strong);
  font-family: inherit; font-size: 15px;
}
select { font-family: var(--mono); font-size: 13px; }
textarea {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.85; resize: vertical;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.field { margin-bottom: 18px; }
.errors { color: var(--danger); font-size: 12px; font-family: var(--mono); margin-top: 6px; }

.editor-actions { display: flex; gap: 10px; align-items: center; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); padding: 8px 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.toast[hidden] { display: none !important; }
@media (max-width: 719px) { .toast { bottom: calc(var(--fb-tab-h) + 28px + env(safe-area-inset-bottom)); } }  /* 폰 탭바 위로 */

/* ---- 정적 페이지(소개·방침·약관) · 푸터 ----
   목업(design/)에는 없는 화면이다. 상세 화면의 h1.title 과 .crumb 결을 따른다. */
.page { max-width: 760px; margin: 0 auto; padding: 28px 24px 48px; }
.page h1 { font-size: 22px; font-weight: 600; color: var(--text-strong); letter-spacing: -0.3px; margin: 12px 0 0; }
.page .rev { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 6px; }
.prose { margin-top: 26px; }
.prose h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--accent); margin: 30px 0 10px; }
.prose h2::before { content: "## "; color: var(--dim); }
.prose p, .prose li { font-size: 14px; color: var(--text); }
.prose li { margin-bottom: 6px; }
.prose ul { padding-left: 20px; }
.prose strong { color: var(--text-strong); font-weight: 600; }
/* 푸터 — 틀은 fb.css 의 .fb-foot */
.fb-foot .logo { color: var(--text-strong); }

/* 히어로(홈 첫 화면)·CTA 띠는 전체 폭 레이아웃 안에 놓인다 — 본문과 같은 좌우 여백 */
.hero-wrap { padding: 0 24px; }
body > .fb-cta { margin: 48px 24px 0; }
@media (max-width: 560px) { .hero-wrap { padding: 0 16px; } body > .fb-cta { margin-inline: 16px; } }

/* ---- 로그인 ---- */
.auth { max-width: 340px; margin: 90px auto; }
.auth h1 { font-family: var(--mono); font-size: 16px; color: var(--text-strong); margin: 0 0 22px; }

/* ---- 대시보드 ---- */
.dash { padding: 24px; }
.dash-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 20px; }
.dash-tabs { display: flex; gap: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dash-tabs .on { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; }
.kpi-n { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--text-strong); }
.kpi-l { font-size: 12px; color: var(--dim); margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash-empty { font-family: var(--mono); font-size: 12px; color: var(--dim); padding: 14px 0; line-height: 1.7; }

/* ⚠️ 이름을 .bar 로 두지 말 것. 상단 바가 .bar 라 뒤에 오는 이 규칙이 덮어써서
   display:flex 가 block 이 되고 height:56px 가 8px 로 무너진다 (실제로 그랬다). */
.meter-row { display: grid; grid-template-columns: 110px 1fr 34px; gap: 10px; align-items: center; padding: 4px 0; }
.meter-label { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter { display: block; height: 8px; background: var(--line-soft); }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter-n { font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right; }

/* 30일 추이. 라이브러리 없이 flex 막대로 충분하다 — 값이 30개뿐이다. */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.spark-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.spark-col i { display: block; width: 100%; min-height: 2px; background: var(--spark); }
.spark-col:hover i { background: var(--accent); }
.spark-col em { font-family: var(--mono); font-size: 9px; font-style: normal; color: var(--dim); margin-top: 4px; }
.spark-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 6px; }

/* ---- 좁은 화면 ----
   목업이 1280px 고정이라 원래 미디어 쿼리가 없었다. 실측한 두 가지가 치명적이었다.
   1) 목록의 고정 5열은 210+96+72+84 + gap 64 + padding 24 = 550px 를 요구한다.
      본문에 남는 폭이 그보다 좁으면 1fr 이 min-content(한글 한 글자)로 접혀
      제목이 세로로 쌓이고 865px 까지 가로 스크롤이 생겼다. 865px 아래 전부 해당.
   2) 상세/작성은 side 가 width:300px + flex-shrink:0 이라 390px 화면에서
      main 이 0px 로 무너졌다 (min-width:0 때문에 스크롤도 안 생기고 그냥 무너진다).
      min-width:0 자체는 필요한 값이라 건드리지 않고 side 쪽을 푼다. */
@media (max-width: 880px) {
  /* 목록: 표를 버리고 행을 카드로 접는다 */
  .grid-head { display: none; }
  .row { display: block; padding: 14px 12px; }
  .row .title { font-size: 15px; }
  .row .tags { margin-top: 7px; font-size: 12px; }
  .badge, .num, .date { display: inline-block; margin: 8px 10px 0 0; font-size: 12px; }
  .num::after { content: " copies"; color: var(--dim); }

  /* 사이드바가 232px 를 먼저 가져가 본문에 143px 만 남겼다. 위로 접는다 */
  .body { display: block; }
  .side {
    width: auto; padding: 14px 16px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .side-list { flex-direction: row; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
  .side-row { border: 1px solid var(--ui-line); gap: 8px; padding: 9px 11px; justify-content: flex-start; }

  /* 상세·작성 */
  .detail, .editor-page { display: block; }
  .detail-side, .editor-side { width: auto; margin-top: 20px; }

  /* 대시보드: 6열 KPI 와 2열 카드는 좁은 화면에서 글자가 뭉갠다 */
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .spark-col em { display: none; } /* 30개를 세로로 세우면 읽히지 않는다 */
  .meter-row { grid-template-columns: 92px 1fr 30px; }

  /* 터치 타깃 (44px 에 못 미치던 것들) */
  .btn { height: 40px; padding: 0 16px; }
  .panel-bar .btn { height: 32px; }
  .chip { padding: 9px 13px; font-size: 12px; }
  .meta a, .row .tags a { padding: 5px 0; }
}

@media (max-width: 560px) {
  /* 고정 28px gap + 24px 좌우 여백이 375px 중 76px 을 먼저 먹어 로고와 nav 가
     세로로 쪼개졌다. 바 높이를 풀고 검색을 아랫줄 전체로 내린다. */
  /* 폰: 내비 링크는 아래 탭바로 내려가고(fb.css), 막대에는 로고 + 검색만 남는다 */
  .bar-right { flex: 1; justify-content: flex-end; }
  .search { flex: 1; min-width: 0; }
  .fb-nav .search input[type="text"] { width: 100%; }
  .main, .detail, .editor-page { padding: 18px 16px; }
}

/* 쿠팡 파트너스 칸(prompts/coupang.py) — 이 사이트 토큰만 쓴다(새 색 없음, 사진 바탕 #fff 만 리터럴). */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--text-strong); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--accent); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }
/* 상단·하단 칸은 base.html 에서 본문 골격 밖(전체 폭)에 놓인다 — 본문과 같은 좌우 여백을 준다. */
body > .cpn { margin-left: 24px; margin-right: 24px; }
@media (max-width: 560px) { body > .cpn { margin-left: 16px; margin-right: 16px; } }