/* TN Suite — 커스텀 서식 자동작성 (방식 E) */

:root {
  --bg: #f7f9ff;            /* 앱 허브 배경 미러 */
  --card: #ffffff;
  --line: #dfe3e8;
  --ink: #1f2933;
  --muted: #6b7785;
  --brand: #2e5fa7;         /* 앱 브랜드색(hub_screen.dart) */
  --brand-dark: #234e89;
  --ok: #2e7d32;
  --warn: #c62828;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

/* 링크 색 통일(기본 파랑 → 브랜드) */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* 앱 허브 상단바 미러 — 흰 배경 + 파란 브랜드 */
.topbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--brand); }
.subtitle { font-size: 13px; color: var(--muted); }
/* 비-홈 페이지 뒤로가기 — nav.js 가 상단바에 주입(앱 뒤로가기 미러) */
.home-back {
  margin-left: auto;
  font-size: 13px;
  text-decoration: none;
  color: var(--muted);
  align-self: center;
  white-space: nowrap;
}
.home-back:hover { color: var(--brand); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.lead {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

code {
  background: #eef2f6;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  color: var(--brand-dark);
}

.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.step h2 {
  margin: 0 0 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.hint { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }

.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--muted);
  transition: border-color .15s, background .15s;
  text-align: center;
  padding: 12px;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--brand); background: #f0f6ff; }
.dropzone.loaded { border-style: solid; border-color: var(--ok); color: var(--ok); background: #f1f8f2; }
.dz-text { font-size: 14px; font-weight: 500; }

.panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  background: #fafbfc;
}
.panel.hidden, .hidden { display: none; }

table.kv { width: 100%; border-collapse: collapse; }
table.kv td { padding: 4px 6px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
table.kv td.k { color: var(--muted); white-space: nowrap; width: 40%; }
table.kv td.v { font-weight: 500; }

button.primary {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(46, 95, 167, .25);
}
button.primary:hover { background: var(--brand-dark); box-shadow: 0 2px 6px rgba(46, 95, 167, .3); }
button.primary:disabled { background: #b0bac4; cursor: not-allowed; }

.text-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.text-input:focus { outline: none; border-color: var(--brand); }

.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; }
.tag.ok { background: #e3f4e4; color: var(--ok); }
.tag.warn { background: #fdecec; color: var(--warn); }

ul.tokens { margin: 6px 0 0; padding-left: 18px; }
ul.tokens li { font-family: Consolas, monospace; font-size: 12px; }

.catalog { margin-top: 22px; }
.catalog summary { cursor: pointer; font-size: 14px; color: var(--brand-dark); }
#token-catalog { margin-top: 10px; }

/* ── 토큰 빌더 (builder.html) ── */
.container.wide { max-width: 1080px; }
.builder { display: flex; gap: 16px; align-items: flex-start; }
.grid-wrap { flex: 1; overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 8px; }
table.xl { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
table.xl th { background: #eef2f6; color: var(--muted); font-weight: 600; padding: 3px 6px; border: 1px solid #e2e7ec; position: sticky; top: 0; }
table.xl tbody th { position: static; }
table.xl td { border: 1px solid #e8ebef; padding: 4px 8px; min-width: 70px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
table.xl td:hover { background: #f0f6ff; }
table.xl td.sel { outline: 2px solid var(--brand); outline-offset: -2px; }
table.xl td.tok { background: #e7f0ff; color: var(--brand-dark); font-family: Consolas, monospace; }

.palette { width: 280px; flex-shrink: 0; max-height: 70vh; overflow: auto; }
.pal-group { margin-bottom: 12px; }
.pal-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #eef2f6; border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.ghost-btn { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.ghost-btn:hover { border-color: var(--brand); color: var(--brand); }

.footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 20px;
  border-top: 1px solid var(--line);
  margin-top: 30px;
  background: #fff;
}

/* ── 도움말·FAQ (help.html) ── */
.faq-cat {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #dce6f1;
}
details.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 8px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
  overflow: hidden;
}
details.faq > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before {
  content: "Q";
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: #e7f0ff;
  color: var(--brand-dark);
  font-size: 12px; font-weight: 800;
}
details.faq > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  transition: transform .15s;
}
details.faq[open] > summary::after { transform: rotate(180deg); }
details.faq[open] > summary { border-bottom: 1px solid #eef1f4; background: #fafcff; }
details.faq:hover { border-color: var(--brand); }
.faq-a {
  padding: 12px 16px 14px 46px;
  font-size: 13px;
  color: var(--ink);
}
.faq-a ul { margin: 6px 0 0; padding-left: 18px; }
.faq-a li { margin: 3px 0; }
.qs-list { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.qs-list li { margin: 6px 0; }

/* ── 세션 검토 (review.html) ── */
.rv-summary {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 18px;
}
.rv-summary.warn { border-left-color: var(--warn); }
.rv-summary.ok { border-left-color: var(--ok); }
.rv-summary h2 { margin: 0 0 6px; font-size: 18px; }
.rv-summary .rv-meta { font-size: 13px; color: var(--muted); }
.rv-judge { font-size: 15px; font-weight: 700; }
.rv-judge.pass { color: var(--ok); }
.rv-judge.fail { color: var(--warn); }

.rv-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.rv-section {
  flex: 1 1 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 16px;
}
.rv-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
  display: flex; align-items: center; gap: 8px;
}
.rv-section h3 .cnt { font-size: 12px; font-weight: 600; color: var(--warn); }
table.rv { width: 100%; border-collapse: collapse; }
table.rv td { padding: 5px 7px; border-bottom: 1px solid #eef1f4; font-size: 13px; vertical-align: top; }
td.rv-k { color: var(--muted); width: 44%; white-space: nowrap; }
td.rv-v { font-weight: 600; }
tr.req td.rv-k::after { content: " *"; color: var(--warn); }
tr.warn    td.rv-v { color: var(--warn); }
tr.missing td.rv-v { color: var(--warn); }
tr.missing td.rv-v::before { content: "미입력"; }
tr.empty   td.rv-v { color: #b0bac4; font-weight: 400; }
.rv-note { display: block; font-size: 11px; color: var(--warn); margin-top: 1px; }
.rv-round { font-size: 12px; font-weight: 700; color: var(--brand-dark); margin: 10px 0 2px; }
.rv-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

/* 배합표 전체 내용 — 실제 배합표형 테이블 (mix_catalog 검토, raw JSON 대체) */
.mx-table { margin-top: 4px; }
.mx-head { font-size: 12px; margin: 2px 0 8px; padding: 6px 10px; background: #f4f6f8; border: 1px solid var(--line); border-radius: 6px; }
.mx-head b { color: var(--brand-dark); }
table.mx { width: 100%; border-collapse: collapse; font-size: 12px; margin: 2px 0 10px; }
table.mx caption { text-align: left; font-weight: 700; color: var(--brand-dark); padding: 2px 0; }
table.mx th, table.mx td { border: 1px solid var(--line); padding: 3px 6px; text-align: center; }
table.mx th { background: #eef2f6; color: var(--muted); font-weight: 600; white-space: nowrap; }
/* 사용 재료 표만: 재료명 첫 열을 헤더처럼 */
table.mx-mat td:first-child { white-space: nowrap; font-weight: 600; color: var(--muted); background: #fafbfc; }
/* 배합표 전체 내용 토글 — 크고 누르기 쉬운 클릭바 */
details > summary.mx-summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--brand-dark);
  background: #e8eef5; border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; list-style: none; user-select: none;
}
summary.mx-summary::-webkit-details-marker { display: none; }
summary.mx-summary::after { content: "  ▸ 펼치기"; font-size: 12px; font-weight: 600; color: var(--muted); }
details[open] > summary.mx-summary::after { content: "  ▾ 접기"; }
summary.mx-summary:hover { background: #dce6f1; border-color: var(--brand); }

/* 신뢰도 설명 — 흐릿(<0.85) 시 재검토 유도 */
.conf-note { font-size: 11px; color: var(--muted); margin: 3px 0 0; }
.conf-note.warn { color: var(--warn); font-weight: 600; background: #fff3f3; border-left: 3px solid var(--warn); padding: 4px 8px; border-radius: 4px; }

/* ── 카드형 홈 (index.html) — 실제 앱 허브(hub_screen.dart, tn_hub.png) 1:1 미러 ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 28px;
  line-height: 1;
}
.hub-lead { font-size: 20px; font-weight: 700; margin: 18px 0 16px; }

/* 큰 기본 액션 — 앱 "사진으로 자동작성"(_JustShootButton) 미러 */
.hub-primary {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--brand);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  margin-bottom: 16px;
}
.hub-primary:hover { background: var(--brand-dark); }
.hp-ic {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
}
.hp-body { flex: 1; display: flex; flex-direction: column; }
.hp-title { color: #fff; font-size: 18px; font-weight: 700; }
.hp-desc { color: rgba(255, 255, 255, 0.78); font-size: 12px; margin-top: 4px; }
.hp-chev { color: rgba(255, 255, 255, 0.7); font-size: 22px; }

/* 모듈 카드 — 앱 _ModuleCard 미러 (--mc = 모듈색, 그룹 라벨 없이 평평) */
.hub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  margin-bottom: 14px;
  color: var(--ink);
}
.hub-card:hover { border-color: var(--mc, var(--brand)); }
/* 왼쪽 파스텔 아이콘 박스 (모듈색 ~12% 배경) */
.hc-ic {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mc, var(--brand)) 12%, #fff);
  color: var(--mc, var(--brand));
}
.hc-body { flex: 1; display: flex; flex-direction: column; }
.hc-head { display: flex; align-items: center; gap: 8px; }
.hc-tag {
  flex-shrink: 0;
  background: var(--mc, var(--brand));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}
.hc-label { font-size: 15px; font-weight: 700; }
.hc-desc { font-size: 12px; color: var(--muted); margin-top: 6px; }
.hc-desc code { font-size: 11px; }
.hc-chev { color: #c7ccd2; font-size: 22px; }

/* ── 이어받기 두 갈래 (import.html · quality_import.html 공통) ────────────────
   전에 쓰던 자료는 성격이 다른 두 파일을 **각각** 올려야 한다. 한쪽은 정식 단계,
   다른 쪽은 안내문 속 링크로 두면 "하나만 올리면 되는 줄" 알게 된다 → 나란히 둔다.
   형식 가드가 엉뚱한 파일을 거부하므로, 어느 화면에 있든 갈 곳이 함께 보여야 한다. */
.co-tabs { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.co-tab {
  flex: 1 1 260px; display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  background: #fff; transition: .16s;
}
.co-tab:hover { border-color: var(--brand); background: #f7faff; color: inherit; }
.co-tab > b { display: block; font-size: 15px; color: var(--brand-dark); }
.co-tab > span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.co-tab > span b { color: var(--ink, #24292f); font-weight: 700; }   /* 설명문 안 강조는 인라인 유지 */
.co-tab.current { border-color: var(--brand); border-width: 2px; background: #eef4ff; cursor: default; }
.co-tab.current > b::after { content: " · 지금 이 화면"; font-size: 11.5px; font-weight: 600; color: var(--brand); }