/* ============================================
   グループカード100 デザインシステム統合CSS
   B43デザインシステム準拠 + プロトタイプレイアウト

   Import order:
   1. b43-tokens.css      - @smartbank-inc/b43-design-token
   2. b43-components.css   - @smartbank-inc/b43-app-components
   3. design-system.css    - Mockup-specific (phone frames, layout)
   ============================================ */
@import url("b43-tokens.css");
@import url("b43-components.css");

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   Group Card Color Extensions
   ============================================ */
:root {
  /* Group Card brand color - Grape (Purple) for group identity */
  --gradient-group-card: linear-gradient(59.54deg, #a97ee1, #6489ff);
  --color-card-group-card-base: #a97ee1;
  --color-card-group-card-container: #efe2ff;
  --color-card-group-card-on-container: #3e275a;

  /* Senior Card brand color - Wood→Carrot for warmth */
  --gradient-senior-card: linear-gradient(59.54deg, #c6b99d, #eb923c);
  --color-card-senior-card-base: #c6b99d;
  --color-card-senior-card-container: #f2ece1;
  --color-card-senior-card-on-container: #49453c;

  /* Backward Compatibility Aliases */
  --bg-base: var(--color-background-default-base);
  --bg-accent: var(--color-background-default-accent);
  --text-high: var(--color-text-default-high);
  --text-mid: var(--color-text-default-mid);
  --text-low: var(--color-text-default-low);
  --interactive-base: var(--color-interactive-base);
  --interactive-variant: var(--color-interactive-variant);
  --interactive-container: var(--color-interactive-container);
  --border-high: var(--color-border-default-high);
  --border-mid: var(--color-border-default-mid);
  --border-low: var(--color-border-default-low);
  --positive: var(--color-impression-positive-base);
  --negative: var(--color-impression-negative-base);
  --warning: var(--color-impression-attention-base);
}

/* Group Card CTA button */
.button.-color-group-card {
  background: var(--gradient-group-card);
  color: var(--color-text-inverse-high);
}
.button.-color-group-card:active {
  opacity: 0.9;
}

/* Senior Card CTA button */
.button.-color-senior-card {
  background: var(--gradient-senior-card);
  color: var(--color-text-inverse-high);
}
.button.-color-senior-card:active {
  opacity: 0.9;
}

/* ============================================
   Mockup Presentation Layer
   ============================================ */
body {
  font-family: var(--b43-font-stack-ios);
  background: #E8E8E3;
  color: var(--color-text-default-high);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--dimension-spacing-extra-large) var(--dimension-spacing-medium);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* === Prototype Layout (Phone + Explanation side by side) === */
.prototype-layout {
  display: flex;
  gap: var(--dimension-spacing-extra-large);
  align-items: flex-start;
  max-width: 1200px;
}
@media (max-width: 900px) {
  .prototype-layout {
    flex-direction: column;
    align-items: center;
  }
}

/* === Phone Frame (iPhone 15 Pro: 390x844pt) === */
.phone {
  width: 390px;
  height: 844px;
  background: var(--color-background-default-base);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 8px #1a1a1a, 0 20px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.phone-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* === Dynamic Island === */
.dynamic-island {
  width: 126px;
  height: 36px;
  background: var(--color-reference-black);
  border-radius: 20px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

/* === Status Bar === */
.status-bar {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--dimension-spacing-large) 6px;
  font-size: 15px;
  font-weight: var(--font-weight-semi-bold);
  flex-shrink: 0;
}

/* === Scrollable Content Area === */
.content {
  flex: 1;
  overflow-y: auto;
  background: var(--color-background-default-accent);
  -webkit-overflow-scrolling: touch;
}

/* === Home Indicator === */
.home-indicator {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-background-default-base);
}
.home-indicator::after {
  content: '';
  width: 134px;
  height: 5px;
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

/* === Explanation Panel === */
.explanation-panel {
  flex: 1;
  max-width: 440px;
  padding: var(--dimension-spacing-large);
  background: var(--color-background-default-base);
  border-radius: var(--dimension-radius-extra-large);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* === Card Gradients === */
.card-gradient-pair { background: var(--gradient-pair-card); }
.card-gradient-my { background: var(--gradient-my-card); }
.card-gradient-junior { background: var(--gradient-junior-card); }
.card-gradient-group { background: var(--gradient-group-card); }
.card-gradient-senior { background: var(--gradient-senior-card); }

/* ============================================
   Proto Navigation (prev/next)
   ============================================ */
.proto-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--color-text-default-low);
  transition: color 0.2s, transform 0.2s;
  padding: 16px 8px;
}
.proto-nav:hover {
  color: var(--color-text-default-high);
}
.proto-nav.-prev {
  left: 12px;
}
.proto-nav.-next {
  right: 12px;
}
.proto-nav span:first-child {
  font-size: 32px;
  line-height: 1;
}
.proto-nav ._num {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
}