/* 터랩 — 토스식 작업대 공통 층 (작업대 · 설계 내역서 · 간단 내역서 · 인허가 앱에 products.APP_HEAD 로 붙음)
   각 앱은 자기 색을 --tl-* 에 맞춰 쓰므로 여기서 토큰을 바꾸면 따라온다. 띠(#tlbar)도 토스식으로. */
:root {
  --tl-bg: #ffffff; --tl-bg-2: #f2f4f6; --tl-surface: #ffffff; --tl-surface-2: #f9fafb;
  --tl-ink: #191f28; --tl-ink-2: #333d4b; --tl-muted: #8b95a1; --tl-line: #f2f4f6; --tl-line-2: #e5e8eb;
  --tl-brand: #0891b2; --tl-brand-2: #0e7490; --tl-brand-ink: #ffffff; --tl-brand-soft: #e6f6fa;
  --tl-accent: #f59e0b; --tl-accent-soft: #fff6e5; --tl-warn: #c2410c; --tl-warn-soft: #fff4ed;
  --tl-bad: #f04452; --tl-bad-soft: #ffeef0; --tl-good: #16a34a; --tl-good-soft: #e9f8ee;
  --tl-header: rgba(255, 255, 255, .97);
}
:root[data-theme="dark"] {
  --tl-bg: #17171c; --tl-bg-2: #2c2c35; --tl-surface: #202027; --tl-surface-2: #26262e;
  --tl-ink: #f9fafb; --tl-ink-2: #d1d6db; --tl-muted: #8b95a1; --tl-line: #2c2c35; --tl-line-2: #3a3a45;
  --tl-brand: #22b8d9; --tl-brand-2: #5fd0ea; --tl-brand-ink: #04202a; --tl-brand-soft: #12313a;
  --tl-header: rgba(23, 23, 28, .97);
}
#tlbar { height: 52px; padding: 0 16px; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--tl-line); font-size: 14px; }
#tlbar a { border-radius: 10px; }
#tlbar .tl-mark { box-shadow: none; border-radius: 8px; }
#tlbar .tl-nav a.on { background: var(--tl-brand-soft); }
#tlbar .tl-theme { border: 0; background: transparent; border-radius: 10px; width: 34px; height: 34px; }
#tlbar .tl-theme:hover { background: var(--tl-bg-2); }
#tlbar .tl-site { border: 0; background: var(--tl-bg-2); border-radius: 10px; height: 34px; }
#tlbar .tl-site.empty { border: 1px dashed var(--tl-brand); background: transparent; }

/* 세부 작업대 메뉴: 회색 띠 위 흰 버튼 — 버튼인 게 한눈에 보이게, 지금 화면은 청록으로 꽉 채움 */
#tlsub { background: var(--tl-bg-2); border-bottom: 0; padding: 10px 16px; gap: 8px; }
#tlsub .tl-subname { font-size: 14px; font-weight: 800; color: var(--tl-ink); margin-right: 6px; display: inline-flex; align-items: center; gap: 6px; }
#tlsub .tl-subname::after { content: "도구"; font-size: 12px; font-weight: 600; color: var(--tl-muted); }
#tlsub a { background: var(--tl-surface); color: var(--tl-ink-2); border: 0; border-radius: 12px; padding: 8px 14px; font-size: 14px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .03); transition: background .12s, color .12s, transform .12s; }
#tlsub a:hover { color: var(--tl-brand); background: var(--tl-surface); transform: translateY(-1px); }
#tlsub a.on { background: var(--tl-brand); color: var(--tl-brand-ink); font-weight: 700; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tl-brand) 60%, transparent); }
#tlsub a.on:hover { color: var(--tl-brand-ink); transform: none; }
:root[data-theme="dark"] #tlsub a { box-shadow: none; }

/* AI 기능 줄: 눈에 덜 띄게 (보라 테두리 → 옅은 회색 면) */
.tl-ai-strip { border: 0 !important; background: var(--tl-bg-2) !important; border-radius: 16px !important; padding: 10px 16px !important; }
.tl-ai-strip b { font-size: 14px !important; }
.tl-ai-btn { border: 0 !important; background: var(--tl-surface) !important; font-size: 14px !important; min-height: 36px !important; }
.tl-ai-btn:hover { background: color-mix(in srgb, var(--ai, #a855f7) 12%, var(--tl-surface)) !important; color: var(--ai, #a855f7) !important; }