/* 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:     8px;
  --bm-radius-lg:  8px;
  --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;
  --bm-letter-snug:  0;
}

/* 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: space-between;
  gap: 14px;
  padding: 18px 24px;
  font-size: 14px;
}
.bm-nav-brand {
  min-height: var(--bm-tap);
  display: inline-flex;
  align-items: center;
  color: var(--bm-ink);
  font-weight: 800;
  text-decoration: none;
}
.bm-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 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: 960px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}
.bm-launcher-head {
  max-width: 760px;
  margin-bottom: 28px;
}
.bm-kicker {
  margin: 0 0 12px;
  color: var(--bm-accent);
  font-size: 14px;
  font-weight: 800;
}
.bm-launcher-title {
  font-family: var(--bm-font-sans);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: var(--bm-letter-tight);
  line-height: 1.12;
  margin: 0;
  color: var(--bm-ink);
}
.bm-launcher-copy {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--bm-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
.bm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.bm-primary-action,
.bm-secondary-action {
  min-height: var(--bm-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: var(--bm-radius);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.bm-primary-action {
  background: var(--bm-accent);
  color: var(--bm-accent-on);
}
.bm-secondary-action {
  background: var(--bm-card);
  color: var(--bm-ink);
  border: 1px solid var(--bm-line);
}

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

.bm-tile {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  padding: 22px;
  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;
}
.bm-tile:hover { border-color: var(--bm-ink); }
.bm-tile:active { transform: scale(0.99); }
.bm-tile-featured {
  border-color: rgba(var(--bm-accent-rgb), 0.38);
  box-shadow: 0 10px 28px rgba(var(--bm-accent-rgb), 0.10);
}
.bm-tile-status {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bm-paper-dark);
  color: var(--bm-ink-soft);
  font-size: 12px;
  font-weight: 700;
}
.bm-tile-featured .bm-tile-status {
  background: rgba(var(--bm-accent-rgb), 0.12);
  color: var(--bm-accent);
}
.bm-tile-name {
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--bm-letter-snug);
  color: var(--bm-ink);
}
.bm-tile-tag {
  margin-top: 6px;
  font-size: 14px;
  color: var(--bm-ink-soft);
  line-height: 1.5;
}
.bm-tile-action {
  margin-top: auto;
  color: var(--bm-ink);
  font-size: 14px;
  font-weight: 700;
}

.bm-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bm-card);
  border-top: 1px solid var(--bm-line);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.08);
  padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.bm-consent[hidden] { display: none !important; }
.bm-consent-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bm-consent-copy {
  margin: 0;
  color: var(--bm-ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.bm-consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.bm-consent-button {
  min-height: var(--bm-tap);
  border: 0;
  border-radius: var(--bm-radius);
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.bm-consent-button-secondary {
  background: var(--bm-paper);
  color: var(--bm-ink-soft);
}
.bm-consent-button-primary {
  background: var(--bm-ink);
  color: var(--bm-card);
  font-weight: 700;
}

@media (max-width: 639px) {
  .bm-nav { padding: 14px 16px; }
  .bm-launcher { padding: 28px 16px 96px; }
  .bm-launcher-title { font-size: 31px; }
  .bm-launcher-copy { font-size: 15px; }
  .bm-primary-action,
  .bm-secondary-action { width: 100%; }
  .bm-tile { min-height: 168px; }
  .bm-consent-inner {
    align-items: stretch;
    flex-direction: column;
  }
  .bm-consent-actions { justify-content: flex-end; }
}