/* ハナビュー 共通の土台(サイトとアプリ共通)。コンセプト「夜空の測量図」:
   墨紺の夜空に金の光、計測の細い線(藍)、見出しは明朝、数字は計器の書体。 */
:root {
  color-scheme: dark;
  --yoru: #0B0E1A;     /* 背景の基本(墨紺) */
  --kon: #131830;      /* 面1: カード・シート・ヘッダー */
  --kon-2: #1C2342;    /* 面2: hover・入力欄 */
  --sen: #2A3152;      /* 罫線 1px */
  --washi: #F1ECE0;    /* 本文・見出し(生成り) */
  --kasumi: #A3AAC6;   /* 補足の文字 */
  --kin: #FFC14D;      /* 主色・主ボタン・強調の数字 */
  --kin-ink: #1E1400;  /* 金の上の文字 */
  --botan: #FF6A5E;    /* 隠れる・警告・中止 */
  --hisui: #6FE0B0;    /* 全部見える */
  --sora: #8FB0FF;     /* 計測の線(方位・視線)。面積には使わない */
  --glass: rgba(19, 24, 48, .88);

  --f-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --f-num: "Barlow Condensed", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;

  --r-s: 6px; --r-m: 14px; --r-pill: 999px;
  --lift: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .45);
  --glow: 0 8px 28px rgba(255, 193, 77, .30);
  --ease: 180ms ease-out;

  /* 旧名(アプリ画面の中で使っている名前)を新しい色に寄せる */
  --sumi: var(--yoru); --ai: var(--glass); --line: var(--sen); --mute: var(--kasumi); --beni: var(--botan);
}

/* ロゴ */
.hn-logo { display: inline-flex; align-items: center; gap: .35em; font-family: var(--f-body); font-weight: 900; letter-spacing: -.01em;
  color: var(--washi); text-decoration: none; line-height: 1; white-space: nowrap; }
.hn-logo svg { height: 1.4em; width: auto; flex: none; }
.hn-logo em { font-style: normal; color: var(--kin); }

/* 数字(計器) */
.num { font-family: var(--f-num); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  font: 700 16px/1 var(--f-body); color: var(--washi); background: transparent; border: 1px solid var(--sen);
  border-radius: var(--r-pill); text-decoration: none; cursor: pointer; transition: border-color var(--ease), background var(--ease), transform var(--ease); }
.btn:hover { border-color: color-mix(in srgb, var(--kin) 50%, transparent); }
.btn.primary { min-height: 52px; background: var(--kin); color: var(--kin-ink); border-color: var(--kin); box-shadow: var(--glow); }
.btn.primary:hover { transform: translateY(-1px); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn svg { width: 20px; height: 20px; }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; }

/* 判定の色(必ず文字・アイコンと一緒に) */
.see-ok { color: var(--hisui); }
.see-part { color: var(--kin); }
.see-ng { color: var(--botan); }

/* アイコン(線画、currentColor) */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }