/* ==========================================================================
   mirurunn-brand.css  —  みるるん ブランドトークン（単一の真実の源）
   このファイル以外で色・角丸・影を直接指定しないこと。
   ========================================================================== */

:root{
  /* --- グラデーション（この順序を絶対に変えない） --- */
  --mint:      #36D0B7;
  --aqua:      #41BDE5;
  --blue:      #6FA4EA;
  --lavender:  #A486E8;
  --grad: linear-gradient(90deg, #36D0B7 0%, #41BDE5 42%, #6FA4EA 72%, #A486E8 100%);
  --grad-soft: linear-gradient(135deg, #F1FCFA 0%, #F3FAFE 50%, #F7F4FF 100%);

  /* --- テキスト（純黒 #000 は使用禁止） --- */
  --text-dark:  #263D52;
  --text-body:  #244D70;
  --text-gray:  #8E8E8E;
  --text-white: #FFFFFF;

  /* --- 背景 --- */
  --bg:          #FFFFFF;
  --bg-mint:     #F1FCFA;
  --bg-blue:     #F3FAFE;
  --bg-lavender: #F7F4FF;
  --bg-section:  #F8FBFD;

  /* --- 線・影 --- */
  --line:   #E6F0F5;
  --line-2: #D9E5EF;
  --shadow:      0 4px 20px rgba(217,229,239,.50);
  --shadow-lg:   0 8px 32px rgba(217,229,239,.65);

  /* --- 注意色（1画面1箇所まで。原色赤は禁止） --- */
  --alert:    #E39385;
  --alert-bg: #FDEEEA;

  /* --- ゾーン --- */
  --zone-good-bg:   #EAFBF6;  --zone-good-fg:   #1FA88F;
  --zone-watch-bg:  #EEF4FE;  --zone-watch-fg:  #6FA4EA;
  --zone-action-bg: #FDEEEA;  --zone-action-fg: #C97B6C;

  /* --- 形 --- */
  --radius-card: 24px;
  --radius-sm:   16px;
  --radius-pill: 999px;

  /* --- タイポ --- */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Inter", "Noto Sans JP", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family: var(--font-jp);
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* --- 共通パーツ --- */
.mr-gradbar{ height:6px; background:var(--grad); }

.mr-wordmark{
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mr-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 28px;
}

.mr-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  background: var(--bg);
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--bg), var(--bg)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--text-body);
}

.mr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  padding: 16px 40px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white);
  background: var(--grad);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 52px;
}
.mr-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.mr-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.mr-btn-ghost{
  background: var(--bg);
  color: var(--text-body);
  border: 1.5px solid var(--line-2);
}

.mr-zone{
  display:inline-block; border-radius: var(--radius-pill);
  padding: 6px 18px; font-size: 13px; font-weight: 700;
}
.mr-zone.good  { background: var(--zone-good-bg);   color: var(--zone-good-fg); }
.mr-zone.watch { background: var(--zone-watch-bg);  color: var(--zone-watch-fg); }
.mr-zone.action{ background: var(--zone-action-bg); color: var(--zone-action-fg); }

.mr-tag{
  display:inline-block; border-radius: 6px; padding: 4px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.mr-tag.official{ background: var(--mint); color: var(--text-white); }
.mr-tag.trial{ background: var(--bg-lavender); color: var(--lavender); border:1px solid var(--lavender); }

label{ display:block; font-size:13px; font-weight:700; color:var(--text-body); margin-bottom:6px; }

input[type=text], input[type=email], select, textarea{
  width:100%; padding:14px 16px; font-size:16px; /* 16px未満はiOSでズームするため厳守 */
  font-family: var(--font-jp); color: var(--text-body);
  background: var(--bg); border:1.5px solid var(--line-2);
  border-radius: 12px; margin-bottom:18px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--aqua); }

.mr-note{ font-size:12px; color: var(--text-gray); line-height:1.9; }

.mr-bar-track{ background: var(--bg-section); border-radius:8px; height:20px; overflow:hidden; }
.mr-bar-fill{ height:100%; border-radius:8px; background: var(--mint); }
.mr-bar-zero{ height:20px; border:1.5px dashed var(--alert); border-radius:8px; }

@media (max-width: 768px){
  .mr-card{ padding:20px; border-radius: var(--radius-sm); }
  .mr-btn{ width:100%; }
}