/* bitemark.net 슈퍼앱 시각 토큰 정본 (SSOT)
 * 정본 노트: ~/beamonic/Projects/Bitemark-Net/Bitemark.net 슈퍼앱 시각 정본.md
 * host + 모든 engine 이 이 한 파일을 link 한다. engine 별 자체 토큰 셋 금지.
 * 변경 시 test/system/design_contract_test.rb 의 BDD 가드와 동기화.
 */

:root {
  /* Surface */
  --bm-paper:      #F5F2EA;
  --bm-paper-dark: #ECE7DC;
  --bm-card:       #FFFFFF;

  /* Ink (텍스트 위계) */
  --bm-ink:        #1C1917;
  --bm-ink-soft:   #57534E;
  --bm-ink-muted:  #A8A29E;
  --bm-line:       #E7E5E4;

  /* Accent — 단일색 정책. 다색 사극풍(청자/골드/홍) 금지. */
  --bm-accent:     #B83B16;  /* 감(柿) deep — 단단·진중 */
  --bm-accent-on:  #FFFFFF;
  --bm-accent-rgb: 184, 59, 22;  /* rgba() alpha 합성용 */

  /* Geometry */
  --bm-radius:     14px;
  --bm-radius-lg:  22px;
  --bm-tap:        44px;

  /* Type */
  --bm-font-sans:    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bm-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --bm-letter-tight: -0.035em;
  --bm-letter-snug:  -0.015em;
}

/* Host launcher (`/`) — Tailwind 대신 토큰 기반 plain css.
 * 음슴체 톤 = 장식 0, 단일 액센트, 여백 충분. 미니앱 본문은 각 engine 의 plain css.
 */
.bm-shell {
  background: var(--bm-paper);
  color: var(--bm-ink);
  font-family: var(--bm-font-sans);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

.bm-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 18px 24px;
  font-size: 14px;
}
.bm-nav-user { color: var(--bm-ink-soft); }
.bm-nav-link {
  color: var(--bm-ink);
  text-decoration: none;
  min-height: var(--bm-tap);
  display: inline-flex;
  align-items: center;
}
.bm-nav-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bm-nav-cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bm-ink);
  color: var(--bm-card);
  text-decoration: none;
  min-height: var(--bm-tap);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.bm-nav-form { margin: 0; padding: 0; display: inline; }
.bm-nav-logout {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--bm-ink-soft);
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
  min-height: var(--bm-tap);
  display: inline-flex;
  align-items: center;
}

.bm-launcher {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.bm-launcher-head {
  margin-bottom: 48px;
}
.bm-launcher-title {
  font-family: var(--bm-font-sans);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: var(--bm-letter-tight);
  line-height: 1.05;
  margin: 0;
  color: var(--bm-ink);
}

.bm-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .bm-tile-grid { grid-template-columns: 1fr 1fr; }
}

.bm-tile {
  display: block;
  padding: 24px;
  background: var(--bm-card);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  text-decoration: none;
  color: var(--bm-ink);
  transition: border-color .15s, transform .08s;
  min-height: 96px;
}
.bm-tile:hover { border-color: var(--bm-ink); }
.bm-tile:active { transform: scale(0.99); }
.bm-tile-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--bm-letter-snug);
  margin: 0;
  color: var(--bm-ink);
}
.bm-tile-tag {
  margin-top: 6px;
  font-size: 14px;
  color: var(--bm-ink-soft);
  line-height: 1.5;
}