/* デジタル庁デザインシステム（DADS）準拠
   出典: @digital-go-jp/design-tokens v2.0.1 (CC BY 4.0)
         https://design.digital.go.jp/dads/foundations/
   すべて公式トークンの実値をそのまま引用している。
   書体は Noto Sans JP。Webフォントは読み込まず、端末にあれば使う。 */
:root {
  color-scheme: light;

  --color-bg: #ffffff;              /* neutral-white */
  --color-surface: #f2f2f2;         /* solid-gray-50 */
  --color-surface-accent: #e8f1fe;  /* blue-50 = key-50 */
  --color-text: #1a1a1a;            /* solid-gray-900 */
  --color-text-weak: #4d4d4d;       /* solid-gray-700 */
  --color-border: #cccccc;          /* solid-gray-200 */
  --color-border-strong: #b3b3b3;   /* solid-gray-300 */
  --color-primary: #0031d8;         /* key-800 */
  --color-primary-text: #0017c1;    /* key-900 */
  --color-primary-bg: #e8f1fe;      /* key-50 */
  --color-link: #0031d8;            /* key-800 */
  --color-focus: #0031d8;
  --color-caution-text: #6e5600;    /* yellow-1100。yellow-900では4.16でAA未達のため */
  --color-caution-bg: #fbf5e0;      /* yellow-50 */

  --color-label-accent-bg: #e8f1fe;
  --color-label-accent-text: #0017c1;
  --color-label-caution-bg: #fbf5e0;
  --color-label-caution-text: #6e5600;

  --color-button-secondary-border: #b3b3b3;
  --color-button-secondary-text: #4d4d4d;

  /* 角の形状: 角丸なし0 / スモール8 / ミディアム12（長方形） / フル */
  --shape-s: 0;
  --shape-m: 0.5rem;    /* border-radius-8  角丸スモール */
  --shape-l: 0.75rem;   /* border-radius-12 角丸ミディアム（長方形） */
  --shape-pill: 624.9375rem; /* border-radius-full */
  --shadow-1: 0 2px 8px 1px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.3); /* elevation-1 */

  /* 余白の基準単位は 8 CSS px。その倍数だけを使う */
  --space-1: 8px; --space-2: 8px; --space-3: 16px; --space-4: 16px;
  --space-5: 24px; --space-6: 24px; --space-7: 32px; --space-8: 64px;

  --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-display: 2rem;     /* font-size-32 */
  --font-size-heading: 1.375rem; /* font-size-22 */
  --font-size-lead: 1rem;        /* font-size-16 */
  --font-size-item: 1.0625rem;   /* font-size-17 */
  --font-size-body: 1rem;        /* font-size-16 */
  --font-size-sub: 1rem;
  --font-size-caption: 0.875rem; /* font-size-14 */
  --font-size-mini: 0.875rem;
  --line-height-tight: 1.4;      /* line-height-140 */
  --line-height-body: 1.75;      /* line-height-175 */

  --layout-max: 720px;
  --layout-gutter: 20px;
  --tap-min: 44px;
}

@media (max-width: 600px) {
  :root { --font-size-display: 1.75rem; --font-size-heading: 1.25rem; }
}

/* ------------------------------------------------------------
   罫線で区切る組み。影で階層を作らない。
   リンクは常に下線（デジタル庁デザインシステムのリンク指針）。
   ------------------------------------------------------------ */

.section { border-bottom-width: 2px; border-bottom-color: var(--color-text); }
.section:last-of-type { border-bottom: 2px solid var(--color-text); }

.header { border-bottom-width: 2px; border-bottom-color: var(--color-text); }

a { text-decoration: underline; }
a:hover { text-decoration: none; }

/* 影を使わず、罫線で囲う */
.balloon { box-shadow: none; border-width: 2px; border-color: var(--color-border-strong); }
.balloon::before { border-top-width: 11px; border-top-color: var(--color-border-strong); }

.notice {
  border: 2px solid var(--color-caution-text);
  background: var(--color-caution-bg);
}

/* 選択肢は太い枠で示す */
.choice { border-width: 2px; }
.choice.is-selected,
.choice:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }

.result.is-best {
  border: 2px solid var(--color-primary);
  border-radius: var(--shape-m);
}

.table thead th { border-bottom-width: 2px; border-bottom-color: var(--color-text); }


/* ------------------------------------------------------------
   リンクテキスト
   フォーカス時は「外枠線と黄色背景を追加」する
   ------------------------------------------------------------ */

a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 0;
  background: #ffc700;          /* yellow-400 */
  color: var(--color-text);
  text-decoration: underline;
}

a:hover { text-decoration-thickness: 2px; text-decoration: underline; }

/* 外部リンクであることを末尾のアイコンで示す */
.list--links a[target="_blank"]::after,
.result__link a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.35em;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: var(--icon-external) no-repeat center / contain;
  mask: var(--icon-external) no-repeat center / contain;
  text-decoration: none;
}

/* ------------------------------------------------------------
   エレベーション
   レベル0が基本。影でコントラスト比を確保してはいけないので、
   境界はすべてボーダーで表現する。
   ------------------------------------------------------------ */

.balloon, .result, .section { box-shadow: none; }